/* /Components/Layout/Footer.razor.rz.scp.css */
footer[b-8u5qy2pm9i] {
    --footer-text: #f3f2ee;
    --footer-text-soft: rgba(243, 242, 238, 0.62);
    --footer-text-faint: rgba(243, 242, 238, 0.36);
    --footer-bg: #0a0b0c;
    --footer-bg-alt: #111213;
    --footer-signal: #d94a1f;
    --footer-signal-hover: #ef5a2a;
    --footer-border: rgba(243, 242, 238, 0.1);
    --footer-border-strong: rgba(243, 242, 238, 0.18);

    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--footer-bg);
    color: var(--footer-text);
    font-family: Inter, sans-serif;
    flex-shrink: 0;
    margin-top: auto;
    border-top: 1px solid var(--footer-signal);
    position: relative;
    overflow: hidden;
}

footer[b-8u5qy2pm9i]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 0%, rgba(217, 74, 31, 0.10) 0, transparent 35%),
        radial-gradient(circle at 84% 18%, rgba(217, 74, 31, 0.06) 0, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

footer > *[b-8u5qy2pm9i] {
    position: relative;
    z-index: 1;
}

/* tagline band */

.footer-tagline-band[b-8u5qy2pm9i] {
    padding: 56px 48px 44px;
    border-bottom: 1px solid var(--footer-border);
}

.footer-tagline-inner[b-8u5qy2pm9i] {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 32px;
}

.footer-tagline-eyebrow[b-8u5qy2pm9i] {
    grid-column: 1 / -1;
    display: inline-block;
    margin-bottom: 18px;
    color: var(--footer-signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.footer-tagline-main[b-8u5qy2pm9i] {
    margin: 0;
    color: var(--footer-text);
    font-family: Inter, sans-serif;
    font-size: clamp(1.8rem, 4.8vw, 3.6rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.04em;
    max-width: 880px;
}

.footer-tagline-dot[b-8u5qy2pm9i] {
    color: var(--footer-signal);
}

.footer-tagline-cta[b-8u5qy2pm9i] {
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    border: 0;
    border-radius: 4px;
    background: var(--footer-signal);
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.footer-tagline-cta:hover[b-8u5qy2pm9i],
.footer-tagline-cta:focus-visible[b-8u5qy2pm9i] {
    background: var(--footer-signal-hover);
    transform: translateY(-1px);
    outline: none;
}

.footer-tagline-cta i[b-8u5qy2pm9i] {
    font-size: 0.9rem;
}

/* main grid */

.footer-grid[b-8u5qy2pm9i] {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1.1fr;
    gap: 48px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 48px 36px;
    width: 100%;
    box-sizing: border-box;
}

.footer-col[b-8u5qy2pm9i] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.footer-col-heading[b-8u5qy2pm9i] {
    margin: 0 0 8px;
    color: var(--footer-signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* brand column */

.footer-col-brand[b-8u5qy2pm9i] {
    gap: 18px;
}

.footer-brand-link[b-8u5qy2pm9i] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--footer-text);
}

.footer-brand-logo[b-8u5qy2pm9i] {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.footer-brand-name[b-8u5qy2pm9i] {
    font-family: Inter, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.footer-brand-dot[b-8u5qy2pm9i] {
    color: var(--footer-signal);
}

.footer-brand-desc[b-8u5qy2pm9i] {
    margin: 0;
    color: var(--footer-text-soft);
    font-size: 0.88rem;
    line-height: 1.6;
    max-width: 360px;
}

.footer-brand-partnership[b-8u5qy2pm9i] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--footer-border);
}

.footer-brand-partnership-label[b-8u5qy2pm9i] {
    color: var(--footer-text-faint);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.footer-brand-partnership-logos[b-8u5qy2pm9i] {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.footer-partner-link[b-8u5qy2pm9i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--footer-text);
    text-decoration: none;
    font-family: Inter, sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}

.footer-partner-link:hover[b-8u5qy2pm9i],
.footer-partner-link:focus-visible[b-8u5qy2pm9i] {
    color: var(--footer-signal);
}

.footer-partner-link i[b-8u5qy2pm9i] {
    font-size: 0.83rem;
    color: var(--footer-text-faint);
    transition: color 0.2s ease;
}

.footer-partner-link:hover i[b-8u5qy2pm9i],
.footer-partner-link:focus-visible i[b-8u5qy2pm9i] {
    color: var(--footer-signal);
}

.footer-partner-divider[b-8u5qy2pm9i] {
    color: var(--footer-text-faint);
    font-size: 1.1rem;
    font-weight: 300;
}

/* nav columns */

.footer-col-nav ul[b-8u5qy2pm9i] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col-nav li[b-8u5qy2pm9i] {
    margin: 0;
    padding: 0;
}

.footer-col-nav a[b-8u5qy2pm9i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--footer-text-soft);
    text-decoration: none;
    font-family: Inter, sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-col-nav a:hover[b-8u5qy2pm9i],
.footer-col-nav a:focus-visible[b-8u5qy2pm9i] {
    color: var(--footer-signal);
    transform: translateX(2px);
}

.footer-link-ext[b-8u5qy2pm9i] {
    font-size: 0.83rem;
    color: var(--footer-text-faint);
    transition: color 0.2s ease;
}

.footer-col-nav a:hover .footer-link-ext[b-8u5qy2pm9i],
.footer-col-nav a:focus-visible .footer-link-ext[b-8u5qy2pm9i] {
    color: var(--footer-signal);
}

/* contact column */

.footer-col-contact[b-8u5qy2pm9i] {
    gap: 14px;
}

.footer-contacts-item[b-8u5qy2pm9i] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--footer-text);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    transition: color 0.2s ease;
    /* Phone number ("+385 42 404 500") must stay on one line - it was wrapping
       at the spaces in the narrow contact column above 1200px. */
    white-space: nowrap;
}

.footer-contacts-item i[b-8u5qy2pm9i] {
    color: var(--footer-signal);
    font-size: 0.9rem;
    width: 18px;
    text-align: center;
}

.footer-contacts-item:hover[b-8u5qy2pm9i],
.footer-contacts-item:focus-visible[b-8u5qy2pm9i] {
    color: var(--footer-signal);
}

/* social links - outline default, fill + scale on hover */
.footer-social-group[b-8u5qy2pm9i] {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-social-group + .footer-social-group[b-8u5qy2pm9i] {
    margin-top: 12px;
}

.footer-social-label[b-8u5qy2pm9i] {
    color: var(--footer-text-soft);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.footer-social[b-8u5qy2pm9i] {
    display: flex;
    gap: 10px;
}

.footer-social-link[b-8u5qy2pm9i] {
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: transparent;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: transform 0.22s ease, background 0.22s ease,
                color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.footer-social-link i[b-8u5qy2pm9i] {
    font-size: 1.05rem;
    line-height: 1;
    transition: color 0.22s ease;
}

.footer-social-link:focus-visible[b-8u5qy2pm9i] {
    outline: 2px solid var(--footer-signal);
    outline-offset: 3px;
}

/* Instagram - gradient ring + gradient icon, fills on hover */
.footer-social-link.is-instagram[b-8u5qy2pm9i] {
    --ig-gradient: linear-gradient(45deg,
        #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background:
        linear-gradient(var(--footer-bg), var(--footer-bg)) padding-box,
        var(--ig-gradient) border-box;
}

.footer-social-link.is-instagram i[b-8u5qy2pm9i] {
    background: var(--ig-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.footer-social-link.is-instagram:hover[b-8u5qy2pm9i],
.footer-social-link.is-instagram:focus-visible[b-8u5qy2pm9i] {
    background: var(--ig-gradient) padding-box, var(--ig-gradient) border-box;
    transform: scale(1.08);
    box-shadow: 0 8px 18px rgba(220, 39, 67, 0.35);
}

.footer-social-link.is-instagram:hover i[b-8u5qy2pm9i],
.footer-social-link.is-instagram:focus-visible i[b-8u5qy2pm9i] {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: #ffffff;
}

/* Facebook - outline blue, fills blue on hover */
.footer-social-link.is-facebook[b-8u5qy2pm9i] {
    border-color: #1877F2;
    color: #1877F2;
}

.footer-social-link.is-facebook i[b-8u5qy2pm9i] {
    color: #1877F2;
}

.footer-social-link.is-facebook:hover[b-8u5qy2pm9i],
.footer-social-link.is-facebook:focus-visible[b-8u5qy2pm9i] {
    background: #1877F2;
    border-color: #1877F2;
    transform: scale(1.08);
    box-shadow: 0 8px 18px rgba(24, 119, 242, 0.35);
}

.footer-social-link.is-facebook:hover i[b-8u5qy2pm9i],
.footer-social-link.is-facebook:focus-visible i[b-8u5qy2pm9i] {
    color: #ffffff;
}

/* LinkedIn - outline corporate blue, fills on hover */
.footer-social-link.is-linkedin[b-8u5qy2pm9i] {
    border-color: #0A66C2;
    color: #0A66C2;
}

.footer-social-link.is-linkedin i[b-8u5qy2pm9i] {
    color: #0A66C2;
}

.footer-social-link.is-linkedin:hover[b-8u5qy2pm9i],
.footer-social-link.is-linkedin:focus-visible[b-8u5qy2pm9i] {
    background: #0A66C2;
    border-color: #0A66C2;
    transform: scale(1.08);
    box-shadow: 0 8px 18px rgba(10, 102, 194, 0.35);
}

.footer-social-link.is-linkedin:hover i[b-8u5qy2pm9i],
.footer-social-link.is-linkedin:focus-visible i[b-8u5qy2pm9i] {
    color: #ffffff;
}

/* X (Twitter) - outline pale, fills inky on hover */
.footer-social-link.is-x[b-8u5qy2pm9i] {
    border-color: var(--footer-text);
    color: var(--footer-text);
}

.footer-social-link.is-x i[b-8u5qy2pm9i] {
    color: var(--footer-text);
}

.footer-social-link.is-x:hover[b-8u5qy2pm9i],
.footer-social-link.is-x:focus-visible[b-8u5qy2pm9i] {
    background: var(--footer-text);
    border-color: var(--footer-text);
    transform: scale(1.08);
    box-shadow: 0 8px 18px rgba(243, 242, 238, 0.25);
}

.footer-social-link.is-x:hover i[b-8u5qy2pm9i],
.footer-social-link.is-x:focus-visible i[b-8u5qy2pm9i] {
    color: #0a0b0c;
}

.footer-contact-sheet-trigger[b-8u5qy2pm9i] {
    margin-top: 6px;
    padding: 9px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--footer-signal);
    border-radius: 4px;
    background: transparent;
    color: var(--footer-text);
    font-family: Inter, sans-serif;
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    align-self: flex-start;
}

.footer-contact-sheet-trigger i[b-8u5qy2pm9i] {
    color: var(--footer-signal);
    transition: color 0.2s ease;
}

.footer-contact-sheet-trigger:hover[b-8u5qy2pm9i],
.footer-contact-sheet-trigger:focus-visible[b-8u5qy2pm9i] {
    background: var(--footer-signal);
    color: var(--ink);
}

.footer-contact-sheet-trigger:hover i[b-8u5qy2pm9i],
.footer-contact-sheet-trigger:focus-visible i[b-8u5qy2pm9i] {
    color: var(--ink);
}

/* stats strip */

.footer-stats[b-8u5qy2pm9i] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 48px;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid var(--footer-border);
    border-bottom: 1px solid var(--footer-border);
}

.footer-stat[b-8u5qy2pm9i] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid var(--footer-border-strong);
    border-radius: 999px;
    background: var(--footer-bg-alt);
    color: var(--footer-text);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-stat i[b-8u5qy2pm9i] {
    color: var(--footer-signal);
    font-size: 0.86rem;
}

/* giant wordmark */

.footer-wordmark[b-8u5qy2pm9i] {
    width: 100%;
    margin: 0;
    padding: 32px 16px 8px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.footer-wordmark-text[b-8u5qy2pm9i] {
    display: inline-block;
    font-family: Inter, sans-serif;
    font-size: clamp(3rem, 11.5vw, 13rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: rgba(243, 242, 238, 0.06);
    background: linear-gradient(180deg, rgba(243, 242, 238, 0.14) 0%, rgba(243, 242, 238, 0.02) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    user-select: none;
    white-space: nowrap;
    text-align: center;
    max-width: 100%;
}

.footer-wordmark-dot[b-8u5qy2pm9i] {
    color: var(--footer-signal);
    -webkit-text-fill-color: var(--footer-signal);
    background: none;
}

/* bottom bar */

.footer-bottom[b-8u5qy2pm9i] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 22px 48px 28px;
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    border-top: 1px solid var(--footer-border);
    color: var(--footer-text-soft);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-bottom-left[b-8u5qy2pm9i] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-copyright-line[b-8u5qy2pm9i] {
    color: var(--footer-text);
    font-weight: 600;
    white-space: nowrap;
}

.footer-rights[b-8u5qy2pm9i] {
    color: var(--footer-text-faint);
}

.footer-bottom-mid[b-8u5qy2pm9i] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    justify-self: center;
}

.footer-legal-link[b-8u5qy2pm9i] {
    color: var(--footer-text-soft);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.footer-legal-link:hover[b-8u5qy2pm9i],
.footer-legal-link:focus-visible[b-8u5qy2pm9i] {
    color: var(--footer-signal);
}

.footer-bottom-right[b-8u5qy2pm9i] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-self: end;
}

.footer-made-in[b-8u5qy2pm9i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--footer-text-soft);
    font-weight: 600;
}

.footer-made-in i[b-8u5qy2pm9i] {
    color: var(--footer-signal);
}

.footer-design-credit[b-8u5qy2pm9i] {
    color: var(--footer-text-faint);
}

.footer-bottom-sep[b-8u5qy2pm9i] {
    color: var(--footer-text-faint);
}

.footer-bottom-sep-made-in[b-8u5qy2pm9i] {
    /* Inline-with-Privacy/Terms separator on desktop is implicit (the
       Made-In sits in its own column there). On mobile this separator joins
       Privacy · Terms · Made-In into one centered row. Hidden on desktop
       since Made-In lives elsewhere there. */
}

.footer-proceptio-link[b-8u5qy2pm9i] {
    display: inline-flex;
    align-items: center;
    padding: 0;
}

.footer-proceptio-logo[b-8u5qy2pm9i] {
    height: 22px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1) opacity(0.85);
    /* PNG asset bakes in extra whitespace below the wordmark - nudge the
       whole image up so the "procept.io" baseline sits level with the
       circle icon optically, instead of drifting low. */
    transform: translateY(-1.5px);
    transition: filter 0.2s ease;
}

.footer-proceptio-link:hover .footer-proceptio-logo[b-8u5qy2pm9i] {
    filter: brightness(0) invert(1) opacity(1);
}

/* jump bubble */

.footer-jump-bubble[b-8u5qy2pm9i] {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1050;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--signal);
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper-warm);
    box-shadow: 0 14px 34px rgba(14, 15, 16, 0.32);
    cursor: pointer;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.footer-jump-bubble:hover[b-8u5qy2pm9i],
.footer-jump-bubble:focus-visible[b-8u5qy2pm9i] {
    background: var(--signal);
    color: var(--ink);
    outline: none;
}

.footer-jump-bubble.is-hidden[b-8u5qy2pm9i] {
    pointer-events: none;
    opacity: 0;
    transform: translateY(12px);
}

/* Compare tray is fixed bottom: 0 and ~88px tall on desktop / ~200px tall
   on mobile (thumbs + meta + actions stack). Lift the contact bubble out
   of the way when the tray is present so they don't overlap. Uses :has()
   so the rule fires only while CompareTray renders (it returns null when
   the visitor's tray is empty). */
body:has(.compare-tray) .footer-jump-bubble[b-8u5qy2pm9i] {
    bottom: 110px;
}

@media (max-width: 767.98px) {
    body:has(.compare-tray) .footer-jump-bubble[b-8u5qy2pm9i] {
        /* Mobile tray inner-grid stacks vertically. Lift the bubble so it
           sits at the thumb row height (above the "X od 3" meta line),
           aligned to the right edge of the tray content. */
        bottom: 170px;
    }
}


/* scroll-to-top - bottom-LEFT corner. No circle/chrome/label: just a signal-
   orange arrow that pulses UP (mirror of the home hero's down-pulsing hint).
   The pulse signals it's interactive. Bottom-left so it never collides with the
   contact bubble (bottom-right). */
.footer-scroll-top-btn[b-8u5qy2pm9i] {
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: 0;
    background: transparent;
    color: var(--signal);
    cursor: pointer;
    /* Hidden until the user scrolls past one viewport (JS toggles .is-visible
       in scroll-helpers.js) - pointless at the top of the page. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease, bottom 0.24s ease, color 0.18s ease;
}
.footer-scroll-top-btn.is-visible[b-8u5qy2pm9i] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.footer-scroll-top-btn > i[b-8u5qy2pm9i] {
    font-size: 1.55rem;
    animation: footer-scroll-top-pulse-b-8u5qy2pm9i 1.6s ease-in-out infinite;
}
.footer-scroll-top-btn:hover[b-8u5qy2pm9i],
.footer-scroll-top-btn:focus-visible[b-8u5qy2pm9i] {
    color: var(--signal-hover, #b83a15);
    outline: none;
}
@keyframes footer-scroll-top-pulse-b-8u5qy2pm9i {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-7px); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
    .footer-scroll-top-btn > i[b-8u5qy2pm9i] { animation: none; }
}

/* Compare tray is a full-width bottom bar - lift the arrow above it too. */
body:has(.compare-tray) .footer-scroll-top-btn[b-8u5qy2pm9i] {
    bottom: 110px;
}

@media (max-width: 767.98px) {
    .footer-scroll-top-btn[b-8u5qy2pm9i] {
        left: 16px;
        bottom: 16px;
    }
    body:has(.compare-tray) .footer-scroll-top-btn[b-8u5qy2pm9i] {
        bottom: 170px;
    }
}

/* responsive */

@media (max-width: 1199.98px) {
    .footer-grid[b-8u5qy2pm9i] {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 36px;
    }

    .footer-col-brand[b-8u5qy2pm9i] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .footer-tagline-band[b-8u5qy2pm9i] {
        padding: 36px 24px 28px;
    }

    .footer-tagline-inner[b-8u5qy2pm9i] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .footer-tagline-cta[b-8u5qy2pm9i] {
        justify-self: start;
    }

    .footer-grid[b-8u5qy2pm9i] {
        grid-template-columns: 1fr 1fr;
        padding: 32px 24px 28px;
        gap: 28px;
    }

    .footer-col-brand[b-8u5qy2pm9i] {
        grid-column: 1 / -1;
    }

    .footer-stats[b-8u5qy2pm9i] {
        padding: 18px 24px;
        gap: 8px;
    }

    .footer-stat[b-8u5qy2pm9i] {
        padding: 8px 14px;
        font-size: 0.83rem;
    }

    .footer-wordmark[b-8u5qy2pm9i] {
        padding: 22px 24px 4px;
    }

    .footer-bottom[b-8u5qy2pm9i] {
        grid-template-columns: 1fr;
        padding: 18px 24px 24px;
        text-align: left;
        gap: 12px;
    }

    /* Row 1: copyright + rights - flush left. */
    .footer-bottom-left[b-8u5qy2pm9i] {
        justify-self: start;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Row 2: Privacy · Terms · Made-In - centred under the copyright. */
    .footer-bottom-mid[b-8u5qy2pm9i] {
        justify-self: center;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    /* Row 3: "Design and development" left, procept.io wordmark hard right.
       Uses space-between so the wordmark anchors to the row's right edge. */
    .footer-bottom-right[b-8u5qy2pm9i] {
        justify-self: stretch;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
    }

    .footer-bottom-right .footer-design-credit[b-8u5qy2pm9i] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .footer-bottom-right .footer-proceptio-link[b-8u5qy2pm9i] {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .footer-jump-bubble[b-8u5qy2pm9i] {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 479.98px) {
    .footer-grid[b-8u5qy2pm9i] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Layout/Header/Header.razor.rz.scp.css */
.header[b-mhd8fqa2ht] {
    --header-bg: #0e0f10;
    --header-bg-deep: #000000;
    --header-text: #f3f2ee;
    --header-text-muted: #8a8a82;
    --header-signal: var(--signal);
    --header-border: rgba(243, 242, 238, 0.14);
    --header-border-hover: rgba(243, 242, 238, 0.3);
    --header-border-open: rgba(243, 242, 238, 0.5);
    --header-surface-hover: rgba(243, 242, 238, 0.06);
    --header-surface-hover-strong: rgba(243, 242, 238, 0.1);
    --header-surface-active: rgba(243, 242, 238, 0.14);
    --header-bottom-line: var(--signal);

    --dropdown-bg: #0e0f10;
    --dropdown-border: rgba(243, 242, 238, 0.12);
    --dropdown-shadow: rgba(0, 0, 0, 0.5);
    --dropdown-link: #f3f2ee;
    --dropdown-link-hover: #ffffff;
    --dropdown-link-hover-bg: rgba(217, 74, 31, 0.12);
    --dropdown-link-active: #ffffff;
    --dropdown-link-active-bg: rgba(217, 74, 31, 0.18);
    --dropdown-short: #8a8a82;

    background-color: var(--header-bg);
    border-bottom: 1px solid var(--header-bottom-line);
    gap: 1.25rem;
    padding: 0.75rem 1.75rem;
    height: 54px;
    z-index: 1000;
    color: var(--header-text);
    font-family: Inter, sans-serif;
}

@media (min-width: 992px) {
    .header[b-mhd8fqa2ht] {
        height: 60px;
    }
}

.site-logo[b-mhd8fqa2ht] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    /* Anchor - must always render even when a11y scale or sibling content
       fights for header width. Never let it shrink below its content. */
    flex-shrink: 0;
}

.logo-image[b-mhd8fqa2ht] {
    display: block;
    height: 26px;
    width: auto;
    flex-shrink: 0;
}

.header-brand[b-mhd8fqa2ht] {
    color: var(--header-text);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.header-brand-dot[b-mhd8fqa2ht] {
    color: var(--header-signal);
}

/* The "TrebamGume" wordmark stays next to the logo mark all the way down to
   500px (icon + wordmark on tablets in burger mode), then drops below 500px so
   small phones keep just the icon + burger. Above 1045px the nav is inline; if
   the wordmark + nav + search ever collide there, header-menu.js collapses to
   burger (.is-compact) rather than the wordmark hiding. */
@media (max-width: 499.98px) {
    .header-brand[b-mhd8fqa2ht] {
        display: none;
    }
}

.header-page-title[b-mhd8fqa2ht] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1.25rem;
    padding-left: 1.25rem;
    border-left: 1px solid var(--header-border);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--header-text-muted);
}

.header-page-title-label[b-mhd8fqa2ht] {
    color: var(--header-signal);
}

.header-nav[b-mhd8fqa2ht] {
    display: flex;
    align-items: center;
}

@media (min-width: 992px) {
    /* True VIEWPORT-centred nav - absolute + translate(-50%) so "Početna" etc.
       sit dead-centre of the screen regardless of how wide the left (logo +
       search) or right (switcher trio) content is. It floats out of flow, so it
       CAN overlap the side content when the row gets tight - header-menu.js
       measures that (nav rect vs left/right group rects) and collapses to burger
       (`.is-compact`) the instant it would touch. Net: always perfectly centred,
       or burger - never off-centre. */
    .header-nav[b-mhd8fqa2ht] {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 991.98px) {
    .header-nav[b-mhd8fqa2ht] {
        margin-left: auto;
    }
}

.header-nav .k-menu[b-mhd8fqa2ht] {
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--header-text);
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
}

.header-nav .k-menu > .k-item[b-mhd8fqa2ht] {
    margin: 0 2px;
    list-style: none;
}

.header-nav .k-menu > .k-item > .k-link[b-mhd8fqa2ht] {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: auto;
    height: 34px;
    padding: 0 0.85rem;
    line-height: 1;
    color: var(--header-text) !important;
    /* Bumped 0.85 → 0.95rem post readability audit - primary nav must read
       at a glance, especially for older users with reduced contrast acuity. */
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 999px;
    background: transparent;
    overflow: visible;
    /* Never let a label wrap to 2 lines (e.g. "Alle Reifen", "Über uns" at +50%
       a11y). Wrapping keeps the absolute-centred nav narrow horizontally, so
       header-menu.js never sees the overlap and never collapses to burger - the
       nav just silently breaks into two rows. nowrap forces horizontal overflow
       instead, which the measure DOES catch → burger. */
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.header-nav .k-menu > .k-item > .k-link[b-mhd8fqa2ht]::after {
    content: "";
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: -9px;
    height: 2px;
    background: var(--header-signal);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
    opacity: 0;
}

@media (min-width: 992px) {
    .header-nav .k-menu > .k-item > .k-link[b-mhd8fqa2ht]::after {
        bottom: -12px;
    }
}

/* Long-label locales widen the centre-anchored nav until its left edge collides
   with the left-aligned search pill. English + Croatian fit at full size; every
   other language (German "Alle Reifen", Spanish "Todos los neumáticos", French
   "Tous les pneus", Italian "Tutti i pneumatici", Russian, …) gets a tighter
   font + padding + gap so the nav footprint stays clear of the search.
   `:not(:lang(en)):not(:lang(hr))` matches off the inherited <html lang> and
   auto-covers any future locale without enumerating each. */
@media (min-width: 1260px) {
    .header-nav .k-menu > .k-item:not(:lang(en)):not(:lang(hr))[b-mhd8fqa2ht] {
        margin: 0 1px;
    }

    .header-nav .k-menu > .k-item > .k-link:not(:lang(en)):not(:lang(hr))[b-mhd8fqa2ht] {
        font-size: 0.84rem;
        padding: 0 0.58rem;
    }

    .header-nav .k-menu > .k-item > .k-link:not(:lang(en)):not(:lang(hr))[b-mhd8fqa2ht]::after {
        left: 0.58rem;
        right: 0.58rem;
    }
}

.header-nav .k-menu > .k-item:hover > .k-link[b-mhd8fqa2ht],
.header-nav .k-menu > .k-item:focus-within > .k-link[b-mhd8fqa2ht] {
    color: var(--header-text) !important;
    background-color: var(--header-surface-hover);
}

.header-nav .k-menu > .k-item:hover > .k-link[b-mhd8fqa2ht]::after,
.header-nav .k-menu > .k-item:focus-within > .k-link[b-mhd8fqa2ht]::after {
    transform: scaleX(0.5);
    opacity: 0.7;
}

.header-nav .k-menu > .k-item.k-selected > .k-link[b-mhd8fqa2ht],
.header-nav .k-menu > .k-item.is-active > .k-link[b-mhd8fqa2ht],
.header-nav .k-menu > .k-item > .k-link.is-active[b-mhd8fqa2ht] {
    color: var(--header-signal) !important;
    background-color: transparent;
    font-weight: 700;
}

.header-nav .k-menu > .k-item.k-selected > .k-link[b-mhd8fqa2ht]::after,
.header-nav .k-menu > .k-item.is-active > .k-link[b-mhd8fqa2ht]::after,
.header-nav .k-menu > .k-item > .k-link.is-active[b-mhd8fqa2ht]::after {
    transform: scaleX(1);
    opacity: 1;
    height: 3px;
}

.header-auth[b-mhd8fqa2ht] {
    /* Sign-up flow disabled per founder decision - auth pills hidden across
       all viewports. Markup retained so flipping `display: none` → `flex`
       re-enables Log in / Sign up + Profile without component changes. */
    display: none;
    align-items: center;
    gap: 0.5rem;
}

.header-auth-link[b-mhd8fqa2ht] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    color: var(--header-text);
    text-decoration: none;
    font-family: Inter, sans-serif;
    font-size: 0.83rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    background-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.header-auth-link:hover[b-mhd8fqa2ht],
.header-auth-link:focus-visible[b-mhd8fqa2ht] {
    background-color: var(--header-surface-hover);
    border-color: var(--header-border);
    color: var(--header-text);
}

.header-auth-link-primary[b-mhd8fqa2ht] {
    background-color: var(--header-signal);
    color: var(--ink);
    border-color: var(--header-signal);
}

.header-auth-link-primary:hover[b-mhd8fqa2ht],
.header-auth-link-primary:focus-visible[b-mhd8fqa2ht] {
    background-color: var(--signal-bright);
    border-color: var(--signal-bright);
    color: var(--ink);
}

/* profile menu styles live in HeaderProfileMenu.razor.css */

/* a11y + language switcher styles live in their own scoped CSS files
   (HeaderA11ySwitcher.razor.css, HeaderLanguageSwitcher.razor.css) */

@media (max-width: 1259.98px) {
    /* Page title is decorative editorial chrome - burger + a11y + language
       are functional, so chrome loses on a width contest. !important defeats
       any stale scoped-CSS variant cached after re-bundles. Matches the burger
       breakpoint (1260) so the title never crowds the burger. */
    .header-page-title[b-mhd8fqa2ht] {
        display: none !important;
    }
}

/* Burger button - hidden on desktop, shown <=1045. Three thin bars rotate
   into an X when the menu opens. Sizes are in px (not rem) so the burger
   stays the same width regardless of the user's a11y font scale (otherwise
   at +50% the button blows up and gets pushed off-screen on phones). */
.header-burger[b-mhd8fqa2ht] {
    display: none;
    width: 40px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--header-border);
    border-radius: 6px;
    color: var(--header-text);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.header-burger:hover[b-mhd8fqa2ht],
.header-burger:focus-visible[b-mhd8fqa2ht] {
    border-color: var(--header-border-hover);
    background: var(--header-surface-hover);
    outline: none;
}

.header-burger-bar[b-mhd8fqa2ht] {
    width: 18px;
    height: 2px;
    background: var(--header-text);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.header.is-menu-open .header-burger-bar:nth-child(1)[b-mhd8fqa2ht] { transform: translateY(6px) rotate(45deg); }
.header.is-menu-open .header-burger-bar:nth-child(2)[b-mhd8fqa2ht] { opacity: 0; }
.header.is-menu-open .header-burger-bar:nth-child(3)[b-mhd8fqa2ht] { transform: translateY(-6px) rotate(-45deg); }

/* Backdrop behind the open burger drawer. Hidden unless the menu is open (which
   only happens in burger mode), so no media query needed. Fixed below the header
   (.header has no transform/filter, so a fixed child anchors to the viewport) -
   the top bar (X / language / a11y) stays above + tappable. z-index 998 sits
   under the drawer (999) but over page content, so a tap on it CLOSES the menu
   (via @@onclick) instead of reaching a link behind. Blur + dim the page. */
.header-backdrop[b-mhd8fqa2ht] {
    display: none;
}
.header.is-menu-open .header-backdrop[b-mhd8fqa2ht] {
    display: block;
    position: fixed;
    top: var(--header-h, 55px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    background: rgba(14, 15, 16, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: header-menu-scrim-b-mhd8fqa2ht 0.2s ease;
}

@media (max-width: 1259.98px) {
    .header[b-mhd8fqa2ht] {
        /* padding-inline intentionally NOT reduced here - keeping it at the base
           1.75rem keeps the logo's left edge fixed when burger mode kicks in at
           1260 (otherwise the mark jumped ~14px left). Reduced only on phones
           (<=575.98) where space is tight. */
        gap: 0.6rem;
        flex-wrap: nowrap;
    }
    /* Wordmark intentionally NOT hidden here - it stays in burger mode down to
       500px (handled by the <=499.98 rule above). */

    .header-burger[b-mhd8fqa2ht] {
        display: inline-flex;
    }

    .header-nav[b-mhd8fqa2ht],
    .header-auth[b-mhd8fqa2ht] {
        display: none;
    }

    /* Logo left, a11y + language + burger as a grouped trio on the right.
       margin-left auto on the first of the trio absorbs all slack space,
       header's own gap (0.6rem) provides breathing room between buttons.
       !important defeats any cached scoped-CSS version stuck in browser. */
    .header-a11y-switcher[b-mhd8fqa2ht] {
        margin-left: auto !important;
    }

    /* Mobile drawer - full viewport width. Nav + auth share one continuous
       sheet flush against the left + right edges so the menu reads as a
       single panel, not two stacked floating boxes.

       Fallback `--header-h: 55px` includes the 1px signal-orange border so
       the drawer sits flush - previously fallback was 54px which left a
       1px paper-coloured seam before ResizeObserver fired. */
    .header.is-menu-open .header-nav[b-mhd8fqa2ht] {
        display: block;
        /* Absolute against the fixed header element - guarantees the drawer
           sits exactly at the header's bottom edge regardless of
           --header-h rounding (offsetHeight returns integer px so sub-pixel
           header heights left a 0.5-1px paper gap). `top: 100%` ties to the
           parent's bottom; `margin-top: -1px` overlaps the header border so
           anti-aliasing can't expose a seam. Drawer paints its own
           signal-orange border-top so the visual separator survives.
           `box-sizing: border-box` + `margin: 0` overrides the tablet rule
           `.header-nav { margin-left: auto }` which on an absolute element
           computed to a NEGATIVE margin pulling the drawer left off-screen
           (menu items cut on the left edge). */
        position: absolute;
        top: 100%;
        /* Reset the >=992px centered-nav transform - now that the burger shows
           up to 1045px, the 992px `translate(-50%,-50%)` rule would otherwise
           shove the open drawer half-off-screen between 992–1045px. */
        transform: none;
        margin: -1px 0 0;
        left: 0;
        right: auto;
        width: 100vw;
        box-sizing: border-box;
        background: var(--header-bg);
        border-top: 1px solid var(--signal);
        border-bottom: 1px solid var(--header-border);
        padding: 0.4rem 1.25rem 0.25rem;
        z-index: 999;
        max-height: calc(100vh - var(--header-h, 55px));
        overflow-y: auto;
        animation: header-menu-slide-in-b-mhd8fqa2ht 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .header.is-menu-open .header-nav .k-menu[b-mhd8fqa2ht] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        width: 100%;
    }

    .header.is-menu-open .header-nav .k-menu > .k-item[b-mhd8fqa2ht] {
        width: 100%;
        margin: 0;
    }

    /* Full-row click target - display: flex (not inline-flex) + width: 100%
       so tapping anywhere along the row hits the anchor, not just the text. */
    .header.is-menu-open .header-nav .k-menu > .k-item > .k-link[b-mhd8fqa2ht] {
        display: flex;
        width: 100%;
        height: 52px;
        padding: 0 1rem;
        font-size: 1.1rem;
        font-weight: 600;
        border-radius: 8px;
    }

    .header.is-menu-open .header-nav .k-menu > .k-item > .k-link[b-mhd8fqa2ht]::after {
        display: none;
    }

    .header.is-menu-open .header-nav .k-menu > .k-item:hover > .k-link[b-mhd8fqa2ht],
    .header.is-menu-open .header-nav .k-menu > .k-item.is-active > .k-link[b-mhd8fqa2ht] {
        background: var(--header-surface-hover-strong);
    }

    /* Auth panel - extends from the bottom of nav to the bottom of the
       viewport so the drawer reads as one continuous sheet (no dead scrim
       band below). Profile button stays top-aligned, drawer bg fills the
       rest. Same bg as nav, no border between them. */
    .header.is-menu-open .header-auth[b-mhd8fqa2ht] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        top: calc(var(--header-h, 54px) + 1rem + (48px * 4) + (0.25rem * 3) + 0.25rem);
        margin: 0;
        padding: 0.75rem 1.25rem 1.25rem;
        background: var(--header-bg);
        z-index: 998;
        animation: header-menu-slide-in-b-mhd8fqa2ht 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* No scrim - the drawer (nav + auth) now covers the entire viewport
       below the header, so a separate scrim is redundant and only creates
       a faint visual "void" band where the two fixed panels meet. */
}

@keyframes header-menu-slide-in-b-mhd8fqa2ht {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

@keyframes header-menu-scrim-b-mhd8fqa2ht {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   Dynamic collapse - JS-measured `.is-compact`
   ============================================================
   header-menu.js measures whether the inline header (logo + search + nav +
   switcher trio) actually fits. When it doesn't - at ANY viewport width, ANY
   browser zoom, OR ANY a11y font scale - it adds `.is-compact`, collapsing to
   burger mode where BOTH the nav AND the search move into the drawer (the
   search no longer floats outside, which looked wrong at +50%). The ≤1045px
   media block above stays as a no-JS fallback so a narrow viewport never flashes
   an overflowing header before the script runs.

   The script measures by briefly removing `.is-compact` (one synchronous reflow,
   never painted) and comparing the centred nav's bounding rect against the left
   (logo+search) and right (switcher) group rects - overlap ⇒ collapse. */
.header.is-compact[b-mhd8fqa2ht] {
    /* No padding-inline change - keep the logo's left edge fixed when the JS
       measure flips compact (it can trigger at wide widths under a11y scale; a
       padding jump there would visibly shift the logo). */
    gap: 0.6rem;
    flex-wrap: nowrap;
}
/* Wordmark stays in compact/burger mode too (down to 650px, via the
   <=649.98 rule). Only the decorative page-title chrome is dropped here. */
.header.is-compact .header-page-title[b-mhd8fqa2ht] { display: none !important; }
.header.is-compact .header-burger[b-mhd8fqa2ht] { display: inline-flex; }
.header.is-compact .header-nav[b-mhd8fqa2ht],
.header.is-compact .header-auth[b-mhd8fqa2ht] { display: none; }
.header.is-compact .header-a11y-switcher[b-mhd8fqa2ht] { margin-left: auto !important; }

.header.is-compact.is-menu-open .header-nav[b-mhd8fqa2ht] {
    display: block;
    position: absolute;
    top: 100%;
    transform: none;
    margin: -1px 0 0;
    left: 0;
    right: auto;
    width: 100vw;
    box-sizing: border-box;
    background: var(--header-bg);
    border-top: 1px solid var(--signal);
    border-bottom: 1px solid var(--header-border);
    padding: 0.4rem 1.25rem 0.25rem;
    z-index: 999;
    max-height: calc(100vh - var(--header-h, 55px));
    overflow-y: auto;
    animation: header-menu-slide-in-b-mhd8fqa2ht 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.header.is-compact.is-menu-open .header-nav .k-menu[b-mhd8fqa2ht] {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    width: 100%;
}
.header.is-compact.is-menu-open .header-nav .k-menu > .k-item[b-mhd8fqa2ht] {
    width: 100%;
    margin: 0;
}
.header.is-compact.is-menu-open .header-nav .k-menu > .k-item > .k-link[b-mhd8fqa2ht] {
    display: flex;
    width: 100%;
    height: 52px;
    padding: 0 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
}
.header.is-compact.is-menu-open .header-nav .k-menu > .k-item > .k-link[b-mhd8fqa2ht]::after {
    display: none;
}

/* NO width-dependent side padding anywhere - header padding-inline stays at the
   base 1.75rem from the widest desktop down to the narrowest phone, so the logo
   mark's left edge never shifts on resize / burger-collapse. Verified at 320px:
   logo + a11y/language/burger trio still fit with ~39px slack, no overflow. */
/* /Components/Layout/Header/HeaderA11ySwitcher.razor.rz.scp.css */
.header-a11y-switcher[b-jxf6ahpdzn] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-right: 0.5rem;
}

.header-a11y-menu[b-jxf6ahpdzn] {
    position: relative;
}

.header-a11y-menu summary[b-jxf6ahpdzn] {
    list-style: none;
}

.header-a11y-menu summary[b-jxf6ahpdzn]::-webkit-details-marker {
    display: none;
}

.header-a11y-trigger[b-jxf6ahpdzn] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    color: var(--paper);
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
    border: 1px solid var(--signal);
    background: var(--signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}

.header-a11y-trigger i[b-jxf6ahpdzn] {
    font-size: 0.95rem;
}

/* Pill trigger with "Aa" wordmark + icon - fixed px sizing so the button
   stays the same on every a11y scale step. Otherwise +50% scale balloons
   it and pushes the burger off-screen on phones. */
.header-a11y-trigger-icon[b-jxf6ahpdzn] {
    gap: 6px;
    padding: 7px 11px;
    min-width: 42px;
    min-height: 36px;
    justify-content: center;
    flex-shrink: 0;
}

.header-a11y-trigger-text[b-jxf6ahpdzn] {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: none;
}

.header-a11y-trigger-icon i[b-jxf6ahpdzn] {
    font-size: 13px;
}

.header-a11y-trigger:hover[b-jxf6ahpdzn] {
    background: var(--signal-hover);
    border-color: var(--signal-hover);
    transform: translateY(-1px);
}

.header-a11y-menu[open] .header-a11y-trigger[b-jxf6ahpdzn] {
    background: var(--signal-hover);
    border-color: var(--signal-hover);
}

.header-a11y-label[b-jxf6ahpdzn] {
    line-height: 1;
}

.header-a11y-dropdown[b-jxf6ahpdzn] {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    z-index: 30;
    width: 26rem;
    padding: 1.25rem 1.25rem 1.4rem;
    display: grid;
    gap: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--dropdown-border);
    background: var(--dropdown-bg);
    box-shadow: 0 18px 40px var(--dropdown-shadow);
}

.header-a11y-dropdown-head[b-jxf6ahpdzn] {
    display: grid;
    gap: 0.25rem;
}

.header-a11y-dropdown-title[b-jxf6ahpdzn] {
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper);
}

.header-a11y-dropdown-desc[b-jxf6ahpdzn] {
    font-size: 0.88rem;
    line-height: 1.45;
    color: rgba(243, 242, 238, 0.78);
}

.header-a11y-steps[b-jxf6ahpdzn] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.header-a11y-step[b-jxf6ahpdzn] {
    /* Pills are short labels (100%, +10%, +25%, +50%) - older users with
       reading-accessibility needs are the primary clickers, so the hit area
       needs to be generous.
       FIXED PX EVERYWHERE: per CLAUDE.md §29 the a11y switcher must be
       immune to its own --a11y-font-scale. Previous `font-size: 1rem +
       padding: 0.7rem` cascaded through the scale multiplier and broke
       layout at +50% (text overflowed the pill box). All sizing now in px
       so the +50% click target stays inside its own square. */
    min-height: 52px;
    padding: 10px 8px;
    /* White (cream) border, not the faint grey it read as before (0.22 looked
       washed-out grey on graphite). Per user request: white, not grey. */
    border: 1px solid rgba(243, 242, 238, 0.85);
    border-radius: 8px;
    background: transparent;
    color: var(--paper);
    font-family: var(--app-mono);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.1;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.header-a11y-step:hover[b-jxf6ahpdzn] {
    border-color: var(--signal);
    color: var(--signal-glow);
    transform: translateY(-1px);
}

.header-a11y-step.is-active[b-jxf6ahpdzn] {
    background: var(--signal);
    border-color: var(--signal);
    color: var(--paper);
    box-shadow: 0 0 0 2px rgba(217, 74, 31, 0.25);
}

/* +50% step gets a slightly larger label - power-user-of-accessibility
   scale. The previous tinted border in the default state was QA-flagged
   as misleading "pre-selected" state, so border now only highlights when
   `.is-active`. Fixed px for the same immune-from-scale reason as the
   base step. */
.header-a11y-step[data-a11y-step="1.50"][b-jxf6ahpdzn] {
    font-size: 15px;
}

.header-a11y-step[data-a11y-step="1.50"].is-active[b-jxf6ahpdzn] {
    box-shadow: 0 0 0 3px rgba(217, 74, 31, 0.4);
}

/* Active step ALSO driven by the <html> a11y class (set by a11y-font-scale.js
   before paint). The JS-added `.is-active` alone was unreliable: Blazor's
   interactive re-render on hydration wipes it, so after a refresh the already-
   selected step showed no highlight. The <html> class survives (Blazor never
   touches <html>), so mirror the active look off it. `html` is an ancestor
   combinator - the scoped [b-hash] still binds to the button itself. */
html:not(.a11y-large) .header-a11y-step[data-a11y-step="1"][b-jxf6ahpdzn],
html.a11y-step-110 .header-a11y-step[data-a11y-step="1.10"][b-jxf6ahpdzn],
html.a11y-step-125 .header-a11y-step[data-a11y-step="1.25"][b-jxf6ahpdzn],
html.a11y-step-150 .header-a11y-step[data-a11y-step="1.50"][b-jxf6ahpdzn] {
    background: var(--signal);
    border-color: var(--signal);
    color: var(--paper);
    box-shadow: 0 0 0 2px rgba(217, 74, 31, 0.25);
}

html.a11y-step-150 .header-a11y-step[data-a11y-step="1.50"][b-jxf6ahpdzn] {
    box-shadow: 0 0 0 3px rgba(217, 74, 31, 0.4);
}

@media (max-width: 991.98px) {
    .header-a11y-label[b-jxf6ahpdzn] {
        display: none;
    }

    .header-a11y-trigger[b-jxf6ahpdzn] {
        padding: 0.4rem 0.6rem;
    }
}

/* Phones - the dropdown anchored right:0 to the trigger overflows the
   left edge. Pin it to a fixed position centered horizontally below the
   header so the panel stays fully on-screen regardless of trigger pos. */
@media (max-width: 575.98px) {
    .header-a11y-dropdown[b-jxf6ahpdzn] {
        position: fixed;
        top: calc(var(--header-h, 54px) + 0.55rem);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100vw - 1.5rem);
        max-width: 22rem;
    }
}
/* /Components/Layout/Header/HeaderLanguageSwitcher.razor.rz.scp.css */
.header-language-switcher[b-wm7bmdc2c4] {
    --dropdown-short: var(--gray-muted);

    position: relative;
    display: flex;
    justify-content: flex-end;
}

.header-language-menu[b-wm7bmdc2c4] {
    position: relative;
}

.header-language-menu summary[b-wm7bmdc2c4] {
    list-style: none;
}

.header-language-menu summary[b-wm7bmdc2c4]::-webkit-details-marker {
    display: none;
}

.header-language-trigger[b-wm7bmdc2c4] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.75rem;
    color: var(--header-text);
    cursor: pointer;
    user-select: none;
    border-radius: 999px;
    border: 1px solid var(--header-border);
    background-color: transparent;
    font-family: var(--app-mono);
    font-size: 0.83rem;
    letter-spacing: 0.04em;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.header-language-trigger:hover[b-wm7bmdc2c4] {
    border-color: var(--header-border-hover);
    background-color: var(--header-surface-hover);
}

.header-language-menu[open] .header-language-trigger[b-wm7bmdc2c4] {
    border-color: var(--header-border-open);
    background-color: var(--header-surface-active);
}

.header-language-chevron[b-wm7bmdc2c4] {
    font-size: 0.83rem;
    transition: transform 0.2s ease;
}

.header-language-menu[open] .header-language-chevron[b-wm7bmdc2c4] {
    transform: rotate(180deg);
}

.header-language-flag[b-wm7bmdc2c4] {
    display: inline-block;
    width: 1.3rem;
    border-radius: 0.15rem;
    box-shadow: 0 0 0 1px rgba(243, 242, 238, 0.12);
    font-size: 1rem;
    line-height: 1;
    overflow: hidden;
    flex-shrink: 0;
}

.header-language-dropdown[b-wm7bmdc2c4] {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    z-index: 20;
    min-width: 13rem;
    padding: 0.45rem;
    display: grid;
    gap: 0.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--dropdown-border);
    background: var(--dropdown-bg);
    box-shadow: 0 18px 40px var(--dropdown-shadow);
}

.header-language-link[b-wm7bmdc2c4] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.7rem;
    color: var(--dropdown-link);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.header-language-label[b-wm7bmdc2c4] {
    white-space: nowrap;
}

.header-language-short[b-wm7bmdc2c4] {
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dropdown-short);
}

.header-language-link:hover[b-wm7bmdc2c4] {
    color: var(--dropdown-link-hover);
    background-color: var(--dropdown-link-hover-bg);
}

.header-language-link.is-active[b-wm7bmdc2c4] {
    color: var(--dropdown-link-active);
    background: var(--dropdown-link-active-bg);
}

.header-language-link.is-active .header-language-short[b-wm7bmdc2c4] {
    color: var(--signal);
}

@media (max-width: 768px) {
    /* Fixed px sizing on mobile so the trigger stays the same width on
       every a11y font scale step. Without this, +50% scale blows the pill
       out and pushes the burger off-screen. */
    .header-language-trigger[b-wm7bmdc2c4] {
        padding: 7px 10px;
        gap: 7px;
        font-size: 12px;
        flex-shrink: 0;
    }

    .header-language-flag[b-wm7bmdc2c4] {
        width: 20px;
        font-size: 14px;
    }

    .header-language-chevron[b-wm7bmdc2c4] {
        font-size: 11px;
    }

    .header-language-dropdown[b-wm7bmdc2c4] {
        min-width: min(13rem, calc(100vw - 2rem));
    }
}

/* Phones - anchor the language dropdown centered below the header so the
   panel never overflows the right edge. */
@media (max-width: 575.98px) {
    .header-language-dropdown[b-wm7bmdc2c4] {
        position: fixed;
        top: calc(var(--header-h, 54px) + 0.55rem);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100vw - 1.5rem);
        max-width: 22rem;
    }
}
/* /Components/Layout/Header/HeaderProfileMenu.razor.rz.scp.css */
.header-profile-menu[b-u5j0870dpj] {
    --header-signal: var(--signal);

    position: relative;
}

.header-profile-menu summary[b-u5j0870dpj] {
    list-style: none;
}

.header-profile-menu summary[b-u5j0870dpj]::-webkit-details-marker {
    display: none;
}

.header-profile-trigger[b-u5j0870dpj] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.32rem 0.7rem 0.32rem 0.4rem;
    color: var(--header-text);
    cursor: pointer;
    user-select: none;
    border-radius: 999px;
    border: 1px solid var(--header-border);
    background-color: transparent;
    font-family: Inter, sans-serif;
    font-size: 0.83rem;
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.header-profile-trigger:hover[b-u5j0870dpj] {
    border-color: var(--header-border-hover);
    background-color: var(--header-surface-hover);
}

.header-profile-menu[open] .header-profile-trigger[b-u5j0870dpj] {
    border-color: var(--header-border-open);
    background-color: var(--header-surface-active);
}

.header-profile-avatar[b-u5j0870dpj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--header-signal);
    color: var(--ink);
    font-size: 0.83rem;
}

.header-profile-name[b-u5j0870dpj] {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
}

.header-profile-chevron[b-u5j0870dpj] {
    font-size: 0.83rem;
    color: var(--header-text-muted);
    transition: transform 0.2s ease, color 0.2s ease;
}

.header-profile-menu[open] .header-profile-chevron[b-u5j0870dpj] {
    transform: rotate(180deg);
    color: var(--header-text);
}

.header-profile-dropdown[b-u5j0870dpj] {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    z-index: 20;
    min-width: 16rem;
    padding: 0.4rem;
    display: grid;
    gap: 0.15rem;
    border-radius: 0.75rem;
    border: 1px solid var(--dropdown-border);
    background: var(--dropdown-bg);
    box-shadow: 0 18px 40px var(--dropdown-shadow);
}

.header-profile-dropdown-head[b-u5j0870dpj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.55rem 0.7rem 0.65rem;
    border-bottom: 1px solid var(--header-border);
    margin-bottom: 0.3rem;
}

.header-profile-dropdown-name[b-u5j0870dpj] {
    color: var(--dropdown-link);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-profile-dropdown-kicker[b-u5j0870dpj] {
    color: var(--header-signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.header-profile-link[b-u5j0870dpj] {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--dropdown-link);
    font-family: Inter, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.header-profile-link i[b-u5j0870dpj] {
    width: 16px;
    text-align: center;
    color: var(--header-text-muted);
    transition: color 0.2s ease;
    font-size: 0.92rem;
}

.header-profile-link:hover[b-u5j0870dpj],
.header-profile-link:focus-visible[b-u5j0870dpj] {
    background-color: var(--dropdown-link-hover-bg);
    color: var(--dropdown-link-hover);
    outline: none;
}

.header-profile-link:hover i[b-u5j0870dpj],
.header-profile-link:focus-visible i[b-u5j0870dpj] {
    color: var(--header-signal);
}

.header-profile-link.is-disabled[b-u5j0870dpj] {
    color: var(--header-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

.header-profile-link.is-disabled:hover[b-u5j0870dpj] {
    background-color: transparent;
    color: var(--header-text-muted);
}

.header-profile-link.is-disabled:hover i[b-u5j0870dpj] {
    color: var(--header-text-muted);
}

.header-profile-link-tag[b-u5j0870dpj] {
    margin-left: auto;
    padding: 2px 6px;
    border: 1px solid var(--header-border);
    border-radius: 999px;
    color: var(--header-text-muted);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.header-profile-link-danger[b-u5j0870dpj] {
    margin-top: 0.2rem;
    border-top: 1px solid var(--header-border);
    border-radius: 0 0 0.5rem 0.5rem;
    padding-top: 0.65rem;
}

.header-profile-link-danger:hover[b-u5j0870dpj],
.header-profile-link-danger:focus-visible[b-u5j0870dpj] {
    background-color: rgba(217, 74, 31, 0.18);
    color: var(--header-signal);
}

.header-profile-link-danger:hover i[b-u5j0870dpj],
.header-profile-link-danger:focus-visible i[b-u5j0870dpj] {
    color: var(--header-signal);
}

.header-profile-logout[b-u5j0870dpj] {
    margin: 0;
    padding: 0;
    display: contents;
}

@media (max-width: 768px) {
    .header-profile-name[b-u5j0870dpj] {
        display: none;
    }

    .header-profile-chevron[b-u5j0870dpj] {
        display: none;
    }

    .header-profile-trigger[b-u5j0870dpj] {
        padding: 0.32rem 0.4rem;
    }

    .header-profile-dropdown[b-u5j0870dpj] {
        min-width: min(16rem, calc(100vw - 2rem));
    }
}

/* Mobile profile block - hidden in the burger drawer for now. Markup kept
   in the tree so we can re-enable later by flipping the default below
   from `none` back to `flex` inside the @media block. */
.header-profile-mobile[b-u5j0870dpj] {
    display: none;
}

@media (max-width: 768px) {
    .header-profile-menu[b-u5j0870dpj] {
        display: none;
    }

    /* Intentionally still display:none here - see comment above. Removing
       the rule re-shows the profile + logout buttons in the drawer. */
    .header-profile-mobile[b-u5j0870dpj] {
        display: none;
    }

    .header-profile-mobile-link[b-u5j0870dpj] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 12px 14px;
        background: rgba(243, 242, 238, 0.06);
        border: 1px solid var(--header-border, rgba(243, 242, 238, 0.14));
        border-radius: 10px;
        color: var(--header-text, #f3f2ee);
        text-decoration: none;
        transition: background 0.2s ease, border-color 0.2s ease;
    }

    .header-profile-mobile-link:hover[b-u5j0870dpj],
    .header-profile-mobile-link:focus-visible[b-u5j0870dpj] {
        background: rgba(243, 242, 238, 0.12);
        border-color: var(--signal, #d94a1f);
        outline: none;
    }

    .header-profile-mobile-avatar[b-u5j0870dpj] {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--signal, #d94a1f);
        color: var(--paper, #faf9f5);
        flex-shrink: 0;
    }

    .header-profile-mobile-text[b-u5j0870dpj] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .header-profile-mobile-name[b-u5j0870dpj] {
        font-size: 15px;
        font-weight: 700;
        color: var(--header-text, #f3f2ee);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-profile-mobile-label[b-u5j0870dpj] {
        font-family: var(--app-mono, monospace);
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--header-text-muted, #8a8a82);
    }

    .header-profile-mobile-chev[b-u5j0870dpj] {
        color: var(--header-text-muted, #8a8a82);
        font-size: 14px;
        flex-shrink: 0;
    }

    .header-profile-mobile-logout-form[b-u5j0870dpj] {
        margin: 0;
    }

    .header-profile-mobile-logout[b-u5j0870dpj] {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 10px 14px;
        background: transparent;
        border: 1px solid var(--header-border, rgba(243, 242, 238, 0.14));
        border-radius: 10px;
        color: var(--header-text, #f3f2ee);
        font-family: Inter, sans-serif;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .header-profile-mobile-logout:hover[b-u5j0870dpj],
    .header-profile-mobile-logout:focus-visible[b-u5j0870dpj] {
        background: rgba(217, 74, 31, 0.12);
        border-color: var(--signal, #d94a1f);
        color: var(--signal, #d94a1f);
        outline: none;
    }
}

/* Phones - anchor desktop dropdown variant centered below header just in
   case mobile breakpoint above ever inverts. */
@media (max-width: 575.98px) {
    .header-profile-dropdown[b-u5j0870dpj] {
        position: fixed;
        top: calc(var(--header-h, 54px) + 0.5rem);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100vw - 1.5rem);
        max-width: 22rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page-shell[b-e8zd83x6rk] {
    --error-bg: lightyellow;
    --error-shadow: rgba(0, 0, 0, 0.2);

    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main[b-e8zd83x6rk] {
    flex: 1 0 auto;
    display: block;
}


#blazor-error-ui[b-e8zd83x6rk] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-e8zd83x6rk] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

[b-e8zd83x6rk] .layout-error-fallback {
    max-width: 640px;
    margin: 4rem auto;
    padding: 2rem 1.5rem;
    text-align: center;
}

[b-e8zd83x6rk] .layout-error-fallback h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

[b-e8zd83x6rk] .layout-error-fallback p {
    color: var(--gray-muted, #8a8a82);
    margin-bottom: 1.5rem;
}

[b-e8zd83x6rk] .layout-error-fallback-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

[b-e8zd83x6rk] .layout-error-fallback-actions .btn {
    min-width: 140px;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-2e092rccyl],
.components-reconnect-repeated-attempt-visible[b-2e092rccyl],
.components-reconnect-failed-visible[b-2e092rccyl],
.components-pause-visible[b-2e092rccyl],
.components-resume-failed-visible[b-2e092rccyl],
.components-rejoining-animation[b-2e092rccyl] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-2e092rccyl],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-2e092rccyl],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-2e092rccyl],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-2e092rccyl],
#components-reconnect-modal.components-reconnect-retrying[b-2e092rccyl],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-2e092rccyl],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-2e092rccyl],
#components-reconnect-modal.components-reconnect-failed[b-2e092rccyl],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-2e092rccyl] {
    display: block;
}


#components-reconnect-modal[b-2e092rccyl] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-2e092rccyl 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-2e092rccyl 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-2e092rccyl 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-2e092rccyl]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-2e092rccyl 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-2e092rccyl {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-2e092rccyl {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-2e092rccyl {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-2e092rccyl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-2e092rccyl] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-2e092rccyl] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-2e092rccyl] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-2e092rccyl] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-2e092rccyl] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-2e092rccyl] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-2e092rccyl 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-2e092rccyl] {
            animation-delay: -0.5s;
        }

@media (max-width: 575.98px) {
    #components-reconnect-modal[b-2e092rccyl] {
        width: calc(100vw - 32px);
        margin: 12vh auto;
        padding: 1.5rem;
    }

    .components-rejoining-animation[b-2e092rccyl] {
        width: 64px;
        height: 64px;
    }
}

@keyframes components-rejoining-animation-b-2e092rccyl {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/About/About.razor.rz.scp.css */
.about-page[b-eungpt6kp7] {
    --paper: #faf9f5;
    --paper-warm: #f3f2ee;
    --ink: #0e0f10;
    --signal: #d94a1f;
    --gray-muted: #8a8a82;
    --gray-faint: #d6d4ca;
    --gray-divider: #e4e1d5;
    --card-surface: #ffffff;
    --card-border: #d6d4ca;

    font-family: Inter, sans-serif;
    padding: 110px 0 80px;
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
}

.about-shell[b-eungpt6kp7] {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 32px;
}

.about-article[b-eungpt6kp7] {
    padding-top: 0;
}

.about-hero[b-eungpt6kp7] {
    padding: 40px 0 32px;
    border-bottom: 1px solid var(--gray-divider);
    margin-bottom: 32px;
}

.about-kicker[b-eungpt6kp7] {
    display: inline-block;
    color: var(--signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.about-title[b-eungpt6kp7] {
    margin: 0 0 16px;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: clamp(2.2rem, 6vw, 3.8rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}

.about-dot[b-eungpt6kp7] {
    /* QA C6: muted on non-hero titles so the trailing `;` reads as wordmark
       punctuation, not a typo. Hero keeps the punchy full-opacity orange. */
    color: var(--signal);
    opacity: 0.45;
}

.about-lead[b-eungpt6kp7] {
    margin: 0;
    color: var(--gray-muted);
    font-size: 1.1rem;
    line-height: 1.55;
    max-width: 640px;
}

.about-section[b-eungpt6kp7] {
    margin-bottom: 40px;
}

.about-section h2[b-eungpt6kp7] {
    margin: 0 0 12px;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.about-section p[b-eungpt6kp7] {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 0.98rem;
    line-height: 1.7;
}

.about-list[b-eungpt6kp7] {
    margin: 10px 0 0;
    padding: 0 0 0 20px;
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.8;
}

.about-list li[b-eungpt6kp7] {
    margin-bottom: 4px;
}

.about-partners[b-eungpt6kp7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 16px;
}

.about-partner[b-eungpt6kp7] {
    display: block;
    padding: 20px 22px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--card-surface);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.about-partner:hover[b-eungpt6kp7],
.about-partner:focus-visible[b-eungpt6kp7] {
    transform: translateY(-2px);
    border-color: var(--ink);
    box-shadow: 0 10px 28px rgba(14, 15, 16, 0.09);
    outline: none;
}

.about-partner:hover .about-partner-link[b-eungpt6kp7],
.about-partner:focus-visible .about-partner-link[b-eungpt6kp7] {
    text-decoration: underline;
}

.about-partner h3[b-eungpt6kp7] {
    margin: 0 0 4px;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.about-partner-role[b-eungpt6kp7] {
    color: var(--signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.about-partner p[b-eungpt6kp7] {
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 10px;
}

.about-partner-link[b-eungpt6kp7] {
    display: inline-block;
    color: var(--signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.about-partner-link:hover[b-eungpt6kp7],
.about-partner-link:focus-visible[b-eungpt6kp7] {
    text-decoration: underline;
}

.about-section-contact a[b-eungpt6kp7] {
    color: var(--signal);
    font-weight: 600;
    text-decoration: none;
}

.about-section-contact a:hover[b-eungpt6kp7] {
    text-decoration: underline;
}

.visually-hidden[b-eungpt6kp7] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Trust stats trio - big number + mono caption. Reads as a credibility
   signal at a glance, sits between WhatIs and Partners blocks. */
.about-section-stats[b-eungpt6kp7] {
    padding: 0;
}

.about-stats[b-eungpt6kp7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding: 24px 28px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--paper-warm);
}

.about-stat[b-eungpt6kp7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.about-stat-value[b-eungpt6kp7] {
    font-family: Inter, sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--signal);
}

.about-stat-label[b-eungpt6kp7] {
    font-family: var(--app-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-muted);
}

/* Partner-card credentials - small mono caption under body copy. */
.about-partner-credentials[b-eungpt6kp7] {
    margin-top: 8px;
    font-family: var(--app-mono);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--gray-muted);
}

/* Editorial team byline section. */
.about-section-editorial .about-list-editorial[b-eungpt6kp7] {
    list-style: none;
    padding: 0;
}

.about-list-editorial li[b-eungpt6kp7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-divider);
}

.about-list-editorial li:last-child[b-eungpt6kp7] {
    border-bottom: 0;
}

.about-list-editorial li strong[b-eungpt6kp7] {
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

.about-editorial-note[b-eungpt6kp7] {
    font-size: 0.92rem;
    color: var(--gray-muted);
    line-height: 1.55;
}

@media (max-width: 767.98px) {
    .about-partners[b-eungpt6kp7] {
        grid-template-columns: 1fr;
    }

    .about-shell[b-eungpt6kp7] {
        padding: 0 20px;
    }

    .about-stats[b-eungpt6kp7] {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px 20px;
    }

    .about-stat-value[b-eungpt6kp7] {
        font-size: 2rem;
    }
}
/* /Components/Pages/Compare/Compare.razor.rz.scp.css */
.compare-page[b-mnogjvei69] {
    --paper: #faf9f5;
    --paper-warm: #f3f2ee;
    --ink: #0e0f10;
    --signal: #d94a1f;
    --signal-soft: rgba(217, 74, 31, 0.14);
    --positive: #2e7d32;
    --positive-soft: rgba(46, 125, 50, 0.10);
    --gray-muted: #8a8a82;
    --gray-divider: #e4e1d5;
    --card-border: #d6d4ca;

    background: var(--paper);
    color: var(--ink);
    min-height: 100vh;
    padding: 100px 0 140px;
    font-family: Inter, sans-serif;
}

.compare-page-shell[b-mnogjvei69] {
    max-width: 1200px;
}

.compare-header[b-mnogjvei69] {
    margin: 28px 0 28px;
}

.compare-kicker[b-mnogjvei69] {
    display: inline-block;
    margin-bottom: 8px;
    font-family: var(--app-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--signal);
}

.compare-title[b-mnogjvei69] {
    margin: 0 0 10px;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.compare-dot[b-mnogjvei69] {
    color: var(--signal);
}

.compare-lead[b-mnogjvei69] {
    margin: 0;
    color: var(--gray-muted);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 720px;
}

.compare-empty[b-mnogjvei69] {
    padding: 40px 24px;
    text-align: center;
    color: var(--gray-muted);
    border: 1px dashed var(--card-border);
    border-radius: 6px;
    background: var(--paper-warm);
}

.compare-matrix-wrap[b-mnogjvei69] {
    overflow-x: auto;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    background: var(--paper);
}

.compare-matrix[b-mnogjvei69] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 640px;
}

.compare-matrix th[b-mnogjvei69],
.compare-matrix td[b-mnogjvei69] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--gray-divider);
    text-align: left;
    vertical-align: top;
    font-size: 0.95rem;
}

.compare-row-label[b-mnogjvei69] {
    width: 180px;
    background: var(--paper-warm);
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* Long labels like "Tragfähigkeitsindex" need to wrap mid-word on
       narrow viewports - otherwise they overflow the value cell. */
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.compare-product[b-mnogjvei69] {
    padding: 0 !important;
    background: var(--paper);
}

/* Only the product-card itself (the slika kvadrat with brand + name + image)
   is pure white - table chrome (matrix wrap, labels, cells) stays in the
   paper / paper-warm palette so the white square reads as the focal element. */
.compare-product-card[b-mnogjvei69] {
    display: block;
    padding: 16px;
    text-decoration: none;
    color: var(--ink);
    background: #ffffff;
    transition: background 0.18s ease;
}

.compare-product-card:hover[b-mnogjvei69] {
    background: var(--signal-soft);
}

.compare-product-media[b-mnogjvei69] {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #ffffff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.compare-product-media img[b-mnogjvei69] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.compare-product-meta[b-mnogjvei69] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.compare-product-brand[b-mnogjvei69] {
    font-family: var(--app-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--signal);
    font-weight: 600;
}

.compare-product-name[b-mnogjvei69] {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.compare-product-dim[b-mnogjvei69] {
    font-family: var(--app-mono);
    font-size: 0.84rem;
    color: var(--gray-muted);
}

.compare-cell-best[b-mnogjvei69] {
    background: var(--positive-soft);
    border-left: 3px solid var(--positive);
    color: var(--positive);
    font-weight: 700;
}

.compare-cell-empty[b-mnogjvei69] {
    color: var(--gray-muted);
}

.compare-cell-positive[b-mnogjvei69] {
    color: var(--positive);
    font-weight: 600;
}

.compare-cell-positive i[b-mnogjvei69] {
    margin-right: 6px;
}

.compare-chip[b-mnogjvei69] {
    display: inline-block;
    margin-right: 6px;
    padding: 3px 8px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: var(--paper-warm);
    color: var(--ink);
    font-family: var(--app-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

@media (max-width: 767.98px) {
    .compare-page[b-mnogjvei69] {
        padding: 80px 0 200px;
    }
    .compare-matrix[b-mnogjvei69] {
        /* Drop fixed layout so the label column auto-grows to the longest
           label without overflowing into value cells. */
        table-layout: auto;
        min-width: 520px;
    }
    .compare-row-label[b-mnogjvei69] {
        width: 140px;
        font-size: 0.7rem;
        letter-spacing: 0.04em;
        padding: 8px 10px;
        white-space: normal;
    }
    .compare-matrix th[b-mnogjvei69],
    .compare-matrix td[b-mnogjvei69] {
        padding: 8px 10px;
        font-size: 0.86rem;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .compare-product-card[b-mnogjvei69] {
        padding: 10px;
    }
}
/* /Components/Pages/ItemDetail/ItemDetail.razor.rz.scp.css */
.product-detail-page[b-co2ajfq5h3] {
    /* All shared tokens come from Variables.less :root. */
    background: var(--paper);
    color: var(--ink);
    min-height: 100vh;
    padding: 88px 0 80px;
    font-family: Inter, sans-serif;
}

.product-detail-shell[b-co2ajfq5h3] {
    max-width: 1200px;
}

/* Back link moved to shared BackLink.razor component. */

.product-detail-card[b-co2ajfq5h3] {
    margin-top: 24px;
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) 1.2fr;
    gap: 36px;
    padding: 32px;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    background: var(--card-surface);
}

.product-detail-media[b-co2ajfq5h3] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

/* Compare toggle floats over the top-left of the product image (mirrors the
   listing card). z-index beats the carousel so it stays clickable. */
.product-detail-compare[b-co2ajfq5h3] {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 6;
}

/* ---- Unified media carousel (product photo + EU label + info sheet) ---- */
.product-detail-carousel[b-co2ajfq5h3] {
    position: relative;
    width: 100%;
}

/* Viewport just clips the sliding track - the square frame, border + white
   surface come from the nested .product-detail-zoom-frame (so the magnifier
   zoom keeps working). */
.product-detail-carousel-viewport[b-co2ajfq5h3] {
    overflow: hidden;
    border-radius: 12px;
}

.product-detail-carousel-track[b-co2ajfq5h3] {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-detail-carousel-slide[b-co2ajfq5h3] {
    flex: 0 0 100%;
    min-width: 0;
}

/* Inside the carousel the zoom tile fills the full slide (the standalone 480px
   cap only applied to the old single-image layout). */
.product-detail-carousel-slide .product-detail-zoom[b-co2ajfq5h3] {
    max-width: 100%;
    width: 100%;
}

/* Label / info-sheet slides wrap the zoom tile in a link (click → open source
   in a new tab). The anchor must fill the slide so the whole tile is clickable
   and the zoom frame keeps its full size. */
.product-detail-carousel-link[b-co2ajfq5h3] {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

/* Arrows pinned to the viewport centre - never move with the image (the old
   per-image anchoring made them jump). */
.product-detail-carousel-nav[b-co2ajfq5h3] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 2px 8px var(--card-shadow);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.product-detail-carousel-nav:hover[b-co2ajfq5h3] {
    background: var(--graphite);
    color: var(--paper);
    border-color: var(--graphite);
}

.product-detail-carousel-nav.is-prev[b-co2ajfq5h3] { left: 10px; }
.product-detail-carousel-nav.is-next[b-co2ajfq5h3] { right: 10px; }

.product-detail-carousel-thumbs[b-co2ajfq5h3] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.product-detail-carousel-thumb[b-co2ajfq5h3] {
    width: 64px;
    height: 64px;
    padding: 5px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.product-detail-carousel-thumb img[b-co2ajfq5h3] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-detail-carousel-thumb:hover[b-co2ajfq5h3] { transform: translateY(-2px); }

.product-detail-carousel-thumb.is-active[b-co2ajfq5h3] {
    border-color: var(--signal);
    box-shadow: 0 0 0 1px var(--signal);
}

/* ---- Product photo tile w/ magnifier zoom ----
   White surface masks transparent rim-spoke gaps from rembg cut-outs.
   2px paper-tinted border frames like a studio shot. Hover spawns a
   square lens following the cursor + a result panel beside the image
   showing the zoomed portion. Wired up by product-detail-zoom.js - no
   CSS-only hover scale (user wants explicit lens preview pattern). */
/* Outer wrapper - NO overflow:hidden so the side result panel can sit
   beyond the right edge. Frame holds the radius/border/clip; result is
   absolute child of outer (escapes the frame clip). */
.product-detail-zoom[b-co2ajfq5h3] {
    position: relative;
    width: 100%;
    max-width: 480px;
}

.product-detail-zoom-frame[b-co2ajfq5h3] {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    background: #ffffff;
    border: 2px solid var(--gray-faint, #d6d4ca);
    box-sizing: border-box;
    overflow: hidden;
    cursor: zoom-in;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.product-detail-zoom-frame:hover[b-co2ajfq5h3] {
    border-color: var(--signal, #d94a1f);
    box-shadow: 0 12px 30px rgba(14, 15, 16, 0.12);
}

.product-detail-zoom-img[b-co2ajfq5h3] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

/* Lens - square outline tracking the cursor. Hidden by default, JS
   toggles `is-active` on enter/leave. Border-radius 8 keeps it on-brand. */
.product-detail-zoom-lens[b-co2ajfq5h3] {
    position: absolute;
    width: 140px;
    height: 140px;
    border: 2px solid var(--signal, #d94a1f);
    border-radius: 8px;
    background: rgba(217, 74, 31, 0.08);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 2;
}

.product-detail-zoom-lens.is-active[b-co2ajfq5h3] { opacity: 1; }

/* Result panel - sits to the right of the image tile, shows a magnified
   crop of the area under the lens. JS sets background-image + position
   from the source URL. Hidden by default. */
.product-detail-zoom-result[b-co2ajfq5h3] {
    position: absolute;
    top: 0;
    left: calc(100% + 20px);
    width: 520px;
    height: 100%;
    border-radius: 12px;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-size: 1440px auto;
    border: 2px solid var(--gray-faint, #d6d4ca);
    box-shadow: 0 18px 40px rgba(14, 15, 16, 0.18);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 3;
}

.product-detail-zoom-result.is-active[b-co2ajfq5h3] { opacity: 1; }

/* Mobile: drop the side panel + lens entirely. Touch users can't drive a
   mouse-follower magnifier; pinch-zoom in the browser covers the case. */
@media (hover: none), (max-width: 991.98px) {
    .product-detail-zoom-lens[b-co2ajfq5h3],
    .product-detail-zoom-result[b-co2ajfq5h3] {
        display: none !important;
    }
    .product-detail-zoom[b-co2ajfq5h3] { cursor: default; }
}

/* When viewport too narrow to fit the side panel, drop it back to nothing.
   Lens stays - small magnify gesture still useful on tablet landscape. */
@media (max-width: 1199.98px) {
    .product-detail-zoom-result[b-co2ajfq5h3] { display: none; }
}

/* Horizontal carousel of EU energy label cards. Scroll-snaps between cards,
   native overflow scroll on touch + trackpad. Vertical padding gives the
   hover translateY room to lift without overflow:auto clipping the lifted
   border edge. */
.product-detail-eu-labels[b-co2ajfq5h3] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4px 2px 8px;
}

/* Carousel nav buttons - absolute over the label image edges. Translucent
   gray at rest, signal-orange on hover. Hidden hit-area extends beyond
   visible glyph so tapping near the image edge still cycles. */
.product-detail-eu-nav[b-co2ajfq5h3] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(14, 15, 16, 0.18);
    border: 0;
    border-radius: 6px;
    color: var(--paper, #faf9f5);
    cursor: pointer;
    z-index: 2;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.product-detail-eu-nav:hover[b-co2ajfq5h3],
.product-detail-eu-nav:focus-visible[b-co2ajfq5h3] {
    background: var(--signal, #d94a1f);
    color: var(--paper, #faf9f5);
    outline: none;
}

/* Arrows sit OUTSIDE the label image - visually disconnected from the
   content so the carousel reads as a control over the card, not on top of
   it. Negative offsets place them past the wrap edges. */
.product-detail-eu-nav-prev[b-co2ajfq5h3] { left: -52px; }
.product-detail-eu-nav-next[b-co2ajfq5h3] { right: -52px; }

.product-detail-eu-nav i[b-co2ajfq5h3] { font-size: 0.95rem; }

/* Anchor wrap - entire label image area is clickable (opens EPREL/info
   URL in a new tab). Inner zoom container handles the magnifier lens.
   Mousemove still fires on the anchor, click navigates. */
.product-detail-eu-label-wrap[b-co2ajfq5h3] {
    position: relative;
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-decoration: none;
    color: inherit;
}

/* Label variant of the zoom frame - info sheet PNGs are tall, EPREL SVGs
   are short. Cap the frame so it never blows past 460px tall regardless
   of the source image's intrinsic ratio. Aspect-ratio override drops the
   1:1 enforcement (product photo only). */
.product-detail-zoom--label .product-detail-zoom-frame[b-co2ajfq5h3] {
    aspect-ratio: auto;
    max-height: 460px;
    height: auto;
    padding: 8px;
}

.product-detail-zoom--label .product-detail-zoom-img[b-co2ajfq5h3] {
    max-width: 100%;
    max-height: 460px;
    width: auto;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

@media (max-width: 575.98px) {
    /* Drop the height cap on mobile - tall info-sheet PNGs (Croatian regulator
       format) were getting cut at the bottom. Let the frame grow to source
       aspect; width is already clamped by the parent column so layout stays
       contained. EPREL stickers (squarer) render same height regardless. */
    .product-detail-zoom--label .product-detail-zoom-frame[b-co2ajfq5h3] {
        max-height: none;
    }
    .product-detail-zoom--label .product-detail-zoom-img[b-co2ajfq5h3] {
        max-height: none;
        width: 100%;
        height: auto;
    }
    .product-detail-eu-nav-prev[b-co2ajfq5h3] { left: -8px; }
    .product-detail-eu-nav-next[b-co2ajfq5h3] { right: -8px; }
}

.product-detail-body[b-co2ajfq5h3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-detail-title[b-co2ajfq5h3] {
    margin: 0;
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* Brand printed inline with the title in signal red for instant brand recognition.
   Now also an internal link to /gume/{brand} for SEO indexing. Hover reveals an
   underline so the affordance is clear without changing default page styling. */
.product-detail-title-brand[b-co2ajfq5h3] {
    color: var(--signal);
    font-weight: 800;
    text-decoration: none;
    transition: color 0.15s ease;
}

.product-detail-title-brand:hover[b-co2ajfq5h3],
.product-detail-title-brand:focus-visible[b-co2ajfq5h3] {
    color: var(--signal-hover);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 2px;
}

.product-detail-title-name[b-co2ajfq5h3] {
    color: var(--ink);
}

/* Kicker row sits directly under the title - season chip with icon plus XL/RFT
   pills. All chips share the same height so the row reads cleanly. */
/* Row wraps the kicker chips + inline price so they sit on the same line.
   Chips left, price far right via space-between. flex-wrap so on very narrow
   mobiles the price drops below the chips instead of overflowing. */
.product-detail-kicker-row[b-co2ajfq5h3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
}

.product-detail-kicker[b-co2ajfq5h3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    flex: 0 1 auto;
}

/* Inline variant - sits to the right of the kicker chips in the kicker-row.
   Smaller weight + mono font so it reads as supporting data, not headline. */
.product-detail-price-inline[b-co2ajfq5h3] {
    margin-top: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    text-align: right;
}

.product-detail-price-inline strong[b-co2ajfq5h3] {
    font-family: "IBM Plex Mono", monospace;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink);
}

.product-detail-price-inline strong.is-promo[b-co2ajfq5h3] {
    color: var(--signal);
}

.product-detail-price-inline .product-detail-price-vat[b-co2ajfq5h3] {
    margin-left: 0;
}

/* Keep the price value + € on one line and the VAT label intact. Below ~780px
   the kicker-row wraps the price onto its own line; without nowrap the value
   split mid-number ("207,66" / "€") and "MWST. INKL." stacked into two lines. */
.product-detail-price strong[b-co2ajfq5h3],
.product-detail-price-inline strong[b-co2ajfq5h3],
.product-detail-price-vat[b-co2ajfq5h3] {
    white-space: nowrap;
}

@media (max-width: 780px) {
    .product-detail-price-inline[b-co2ajfq5h3] {
        margin-left: 0;
        text-align: left;
        flex-wrap: wrap;
    }
    .product-detail-price-inline strong[b-co2ajfq5h3] {
        font-size: 1.5rem;
    }
}

.product-detail-kicker-chip[b-co2ajfq5h3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--card-border);
    background: var(--card-surface);
    color: var(--ink);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}

/* Warranty pill holds the longest label (German "6 JAHRE HERSTELLERGARANTIE").
   Cap its width so the text wraps onto a SECOND line inside the pill (instead
   of stretching the pill wide enough to overflow the page, which a plain
   nowrap did). min-height on the base lets it grow tall; align-items:center
   keeps the shield icon vertically centred against the 2 lines. */
.product-detail-kicker-chip.is-warranty[b-co2ajfq5h3] {
    /* TEMP: warranty chip hidden on the page for now (markup + all styling kept
       intact - decision pending on what to do with it). Re-enable by removing
       this single display line. */
    display: none;
    max-width: 289px;
    white-space: normal;
    line-height: 1.2;
    padding-top: 4px;
    padding-bottom: 4px;
    text-align: left;
}

.product-detail-kicker-chip i[b-co2ajfq5h3] {
    font-size: 0.85rem;
}

.product-detail-kicker-chip.is-season-summer i[b-co2ajfq5h3] {
    color: #e8a93b;
}

.product-detail-kicker-chip.is-season-winter i[b-co2ajfq5h3] {
    color: #4ea7d4;
}

.product-detail-kicker-chip.is-season-allseason i[b-co2ajfq5h3] {
    color: var(--signal);
}

.product-detail-kicker-chip.is-xl[b-co2ajfq5h3] {
    background: var(--signal);
    color: var(--paper);
    border-color: var(--signal);
}

.product-detail-kicker-chip.is-rft[b-co2ajfq5h3] {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

/* Manufacturer warranty trust chip - soft green tint so it reads as a positive
   trust signal next to the XL/RFT spec chips without competing for attention. */
.product-detail-kicker-chip.is-warranty[b-co2ajfq5h3] {
    background: rgba(46, 125, 50, 0.08);
    color: #2e7d32;
    border-color: rgba(46, 125, 50, 0.45);
    gap: 6px;
}

.product-detail-kicker-chip.is-warranty i[b-co2ajfq5h3] {
    color: #2e7d32;
    font-size: 0.92em;
}

.product-detail-dimension[b-co2ajfq5h3] {
    margin: 0;
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Spec list - vertical rows, label left / value right, subtle dividers.
   Inspired by Gumiimpex product details: scannable like a spec sheet,
   no card noise. Hover lightly tints the row instead of lifting it. */
.product-detail-specs[b-co2ajfq5h3] {
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--gray-divider);
    border-bottom: 1px solid var(--gray-divider);
    padding: 0;
}

.product-detail-specs > div[b-co2ajfq5h3] {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 1.4fr;
    align-items: baseline;
    gap: 16px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--gray-divider);
    background: transparent;
    transition: background 0.18s ease, color 0.18s ease;
}

.product-detail-specs > div:last-child[b-co2ajfq5h3] {
    border-bottom: 0;
}

.product-detail-specs > div:hover[b-co2ajfq5h3] {
    background: color-mix(in oklab, var(--paper-warm), var(--signal) 6%);
}

.product-detail-specs dt[b-co2ajfq5h3] {
    margin: 0;
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.3;
    transition: color 0.18s ease;
}

.product-detail-specs > div:hover dt[b-co2ajfq5h3] {
    color: var(--signal);
}

.product-detail-specs dd[b-co2ajfq5h3] {
    margin: 0;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left;
}

@media (max-width: 575.98px) {
    .product-detail-specs > div[b-co2ajfq5h3] {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 4px;
    }
}

.product-detail-flags[b-co2ajfq5h3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.product-detail-flag[b-co2ajfq5h3] {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--card-border);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
}

.product-detail-flag.is-xl[b-co2ajfq5h3] {
    background: var(--signal);
    color: var(--paper);
    border-color: var(--signal);
}

.product-detail-flag.is-rft[b-co2ajfq5h3] {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.product-detail-price[b-co2ajfq5h3] {
    margin-top: 4px;
    color: var(--ink);
}

.product-detail-price strong[b-co2ajfq5h3] {
    font-family: Inter, sans-serif;
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--signal);
}

.product-detail-price-vat[b-co2ajfq5h3] {
    margin-left: 8px;
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.product-detail-price-unit-toggle[b-co2ajfq5h3] {
    display: inline-flex;
    gap: 4px;
    margin-top: 8px;
    padding: 4px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: var(--paper);
    /* Fixed width + equal-width buttons (below) so the two segments are
       symmetric - the divider sits dead-centre regardless of label length. */
    width: 289px;
    max-width: 100%;
}

.product-detail-price-unit-btn[b-co2ajfq5h3] {
    appearance: none;
    border: 0;
    flex: 1 1 0;
    text-align: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: transparent;
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.product-detail-price-unit-btn:hover[b-co2ajfq5h3] {
    color: var(--ink);
}

.product-detail-price-unit-btn.is-active[b-co2ajfq5h3] {
    background: var(--ink);
    color: var(--paper);
}

.product-detail-price-promo-badge[b-co2ajfq5h3] {
    display: inline-block;
    margin-right: 10px;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--signal);
    color: var(--paper);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    vertical-align: middle;
}

.product-detail-price-original[b-co2ajfq5h3] {
    margin-right: 10px;
    color: var(--gray-muted);
    font-family: Inter, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: line-through;
}

.product-detail-price strong.is-promo[b-co2ajfq5h3] {
    color: var(--signal);
}

.product-detail-price-promo-ends[b-co2ajfq5h3] {
    display: block;
    margin-top: 6px;
    color: var(--signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-detail-cta[b-co2ajfq5h3] {
    /* Brand-coloured marketplace CTAs (Gumiimpex on the left, Continental on
       the right when ImageUrl3 is set). Both share the same shape + height
       so they sit on the same baseline; only the background colour differs.
       Hover collapses to graphite for a consistent secondary state. */
    --cta-brand: var(--signal);
    --cta-brand-text: var(--paper);

    height: 48px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 22px;
    border-radius: 10px;
    background: var(--cta-brand);
    color: var(--cta-brand-text);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--cta-brand);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.product-detail-cta:hover[b-co2ajfq5h3],
.product-detail-cta:focus-visible[b-co2ajfq5h3] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
    transform: translateY(-1px);
    outline: none;
}

.product-detail-cta i[b-co2ajfq5h3] {
    font-size: 0.9rem;
}

/* Gumiimpex brand blue - drawn from the GRP wordmark logo. */
.product-detail-cta-gumiimpex[b-co2ajfq5h3] {
    --cta-brand: #1f6cb0;
    --cta-brand-text: #ffffff;
}

/* Continental brand orange - sampled from the official wordmark logo. */
.product-detail-cta-continental[b-co2ajfq5h3] {
    --cta-brand: #ffa500;
    --cta-brand-text: #ffffff;
}

.product-detail-actions[b-co2ajfq5h3] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin-top: 18px;
}

/* Both brand CTAs sit at the same 48px height as ::cta default, share-buttons
   wrap to the next row after them on narrow viewports. */
.product-detail-actions .product-detail-cta[b-co2ajfq5h3] {
    flex: 1 1 auto;
    min-width: 220px;
}

.product-detail-share[b-co2ajfq5h3] {
    /* Match height of .product-detail-cta (padding 14px + line ~1em → ~48px). Square icon-only. */
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid;
    background: var(--paper);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.product-detail-share i[b-co2ajfq5h3] {
    font-size: 1.3rem;
}

.product-detail-share-whatsapp[b-co2ajfq5h3] {
    border-color: #25d366;
    color: #25d366;
}

.product-detail-share-whatsapp:hover[b-co2ajfq5h3],
.product-detail-share-whatsapp:focus-visible[b-co2ajfq5h3] {
    background: #25d366;
    color: #ffffff;
    transform: translateY(-1px);
    outline: none;
}

.product-detail-share-viber[b-co2ajfq5h3] {
    border-color: #7360f2;
    color: #7360f2;
}

.product-detail-share-viber:hover[b-co2ajfq5h3],
.product-detail-share-viber:focus-visible[b-co2ajfq5h3] {
    background: #7360f2;
    color: #ffffff;
    transform: translateY(-1px);
    outline: none;
}

.product-detail-section[b-co2ajfq5h3] {
    margin-top: 36px;
    padding: 28px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--card-surface);
}

.product-detail-section h2[b-co2ajfq5h3] {
    margin: 0 0 14px;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.product-detail-empty[b-co2ajfq5h3] {
    color: var(--gray-muted);
    font-style: italic;
}

.product-detail-stock-qty[b-co2ajfq5h3] {
    font-family: var(--app-mono, monospace);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1f8a4a;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(40, 160, 106, 0.12);
}

/* Low-stock variant - qty ∈ [1, 4]. Amber: R bumped well past G, B low. Reads
   as a warm warning chip without going full red. */
.product-detail-stock-qty.is-low[b-co2ajfq5h3] {
    color: #b8822a;
    background: rgba(200, 140, 50, 0.18);
}

/* Per-warehouse stock table - 2 columns (name | qty pill). Bordered rows so
   it reads as a compact mini-spec, not a free-flow list. Same shape mobile +
   desktop; on narrow screens the table just shrinks. */
.product-detail-stock-table[b-co2ajfq5h3] {
    width: 100%;
    margin: 10px 0 0;
    border-collapse: collapse;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    overflow: hidden;
    font-family: Inter, sans-serif;
}

.product-detail-stock-table th[b-co2ajfq5h3] {
    text-align: left;
    padding: 6px 12px;
    background: var(--paper-warm);
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--gray-divider);
}

.product-detail-stock-table th:last-child[b-co2ajfq5h3] {
    text-align: center;
    width: 110px;
}

.product-detail-stock-table td[b-co2ajfq5h3] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--gray-divider);
    vertical-align: middle;
}

.product-detail-stock-table tbody tr:last-child td[b-co2ajfq5h3] {
    border-bottom: 0;
}

.product-detail-stock-name[b-co2ajfq5h3] {
    font-weight: 600;
    color: var(--ink);
    font-size: 0.92rem;
}

.product-detail-stock-cell-qty[b-co2ajfq5h3] {
    white-space: nowrap;
    width: 110px;
    text-align: center;
}

.product-detail-stock-cell-qty .product-detail-stock-qty[b-co2ajfq5h3] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 12px;
    box-sizing: border-box;
}

@media (max-width: 575.98px) {
    /* Mobile similar-card layout - moved to global tyre-card-hover.css
       (.product-detail-page .product-similar-card{...}) because scoped
       CSS bundle requires rebuild and we want this rule live without
       restarting the dev server. */
}

.product-similar-grid[b-co2ajfq5h3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.product-similar-card[b-co2ajfq5h3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.product-similar-card:hover[b-co2ajfq5h3],
.product-similar-card:focus-visible[b-co2ajfq5h3] {
    border-color: var(--signal);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px var(--card-shadow);
    outline: none;
}

.product-similar-card-media[b-co2ajfq5h3] {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    border-bottom: 2px solid var(--signal);
    padding-bottom: 8px;
    background: var(--paper-warm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-similar-card-media img[b-co2ajfq5h3] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-similar-card-body[b-co2ajfq5h3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Specs ribbon on recommended + recently-viewed cards. Compact icon+value
   pills mirror the listing card spec row. Renders inline below the dim
   caption, above the price. Hidden when the item has no EU label data. */
.product-similar-card-specs[b-co2ajfq5h3] {
    list-style: none;
    margin: 6px 0 4px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.product-similar-card-specs:empty[b-co2ajfq5h3] {
    display: none;
}

.product-similar-card-spec[b-co2ajfq5h3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border: 1px solid var(--gray-divider);
    border-radius: 4px;
    background: var(--paper);
    font-family: var(--app-mono);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.product-similar-card-spec i[b-co2ajfq5h3] {
    color: var(--signal);
    font-size: 0.82em;
}

.product-similar-card-spec strong[b-co2ajfq5h3] {
    font-weight: 700;
}

.product-similar-card-brand[b-co2ajfq5h3] {
    font-family: var(--app-mono);
    font-size: 0.83rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-muted);
}

.product-similar-card-title[b-co2ajfq5h3] {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
    /* Line-clamp + ellipsis live in tyre-card-hover.css (single owner). */
}

.product-similar-card:hover .product-similar-card-title[b-co2ajfq5h3],
.product-similar-card:focus-visible .product-similar-card-title[b-co2ajfq5h3] {
    color: var(--signal);
}

.product-similar-card-dim[b-co2ajfq5h3] {
    margin: 0;
    font-family: var(--app-mono);
    font-size: 0.83rem;
    letter-spacing: 0.06em;
    color: var(--gray-muted);
}

.product-similar-card-price[b-co2ajfq5h3] {
    margin-top: 4px;
    font-family: Inter, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}

@media (max-width: 767.98px) {
    .product-detail-page[b-co2ajfq5h3] {
        padding: 64px 0 56px;
    }

    .product-detail-card[b-co2ajfq5h3] {
        grid-template-columns: 1fr;
        padding: 18px;
        gap: 22px;
    }

    .product-detail-section[b-co2ajfq5h3] {
        padding: 18px;
        margin-top: 20px;
    }
}
/* /Components/Pages/Items/Items.razor.rz.scp.css */
/* All shared design tokens (--paper, --ink, --signal, --gray-*, --card-*)
   come from Variables.less :root. Nothing page-local needed here. */

/* Back link moved to shared BackLink.razor component (canonical pill visual). */

.vehicles-items-page[b-iaz1geiuvo]  .page-breadcrumb {
    margin-top: 20px;
}

.vehicles-items-header[b-iaz1geiuvo] {
    margin: 24px 0 28px;
    padding: 0;
}

.vehicles-items-kicker[b-iaz1geiuvo] {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--gray-muted);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signal, #d94a1f);
}

.vehicles-items-title[b-iaz1geiuvo] {
    margin: 0;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}

.vehicles-items-title-dot[b-iaz1geiuvo] {
    color: var(--signal);
    opacity: 0.45;
}

.vehicles-items-subtitle[b-iaz1geiuvo] {
    margin: 14px 0 0;
    max-width: 56ch;
    color: var(--gray-muted);
    font-family: Inter, sans-serif;
    font-size: 1.05rem;
    line-height: 1.5;
}

/* ---- Top filter row (mirrors sidebar state) ---- */

.vehicles-items-top-filters[b-iaz1geiuvo] {
    margin: 0 0 22px;
    padding: 20px 22px;
    background: var(--card-surface);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(14, 15, 16, 0.04);
}

.vehicles-items-top-filters-grid[b-iaz1geiuvo] {
    display: grid;
    /* 5 columns (Brand + Width + Aspect + Rim + Season). Each cell uses an
       independent minimum (170px) instead of an even fraction, so when the
       page is wide enough the dropdowns stay roomy + on one line - current
       desktop shell has plenty of horizontal space. */
    grid-template-columns: repeat(5, minmax(170px, 1fr));
    gap: 16px;
    align-items: end;
}

@media (max-width: 1199.98px) {
    .vehicles-items-top-filters-grid[b-iaz1geiuvo] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .vehicles-items-top-filters-grid[b-iaz1geiuvo] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 479.98px) {
    .vehicles-items-top-filters-grid[b-iaz1geiuvo] {
        grid-template-columns: 1fr;
    }
}

.vehicles-items-top-filter label[b-iaz1geiuvo] {
    display: block;
    margin-bottom: 8px;
    color: var(--gray-muted, #8a8a82);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Polish the underlying multi-select dropdown trigger so it matches the
   refined surface - taller hit target, subtle hover lift, signal-orange
   focus ring. Scoped to the top-filter context so we don't disturb other
   usages of StyledDropdown. */
.vehicles-items-top-filter .styled-dropdown-trigger[b-iaz1geiuvo] {
    height: 46px;
    border-radius: 8px;
    border: 1px solid var(--card-border, #d6d4ca);
    background: var(--card-surface, #ffffff);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.vehicles-items-top-filter .styled-dropdown-trigger:hover[b-iaz1geiuvo] {
    border-color: var(--gray-muted, #8a8a82);
    background: var(--paper-warm, #f3f2ee);
}

.vehicles-items-top-filter .styled-dropdown-trigger[aria-expanded="true"][b-iaz1geiuvo],
.vehicles-items-top-filter .styled-dropdown-trigger:focus-visible[b-iaz1geiuvo] {
    border-color: var(--signal, #d94a1f);
    box-shadow: 0 0 0 3px rgba(217, 74, 31, 0.14);
    outline: none;
}

/* ---- Three-column shell: filter sidebar + results + recently-viewed rail ----
   Full width (>=1200px) = filters | 4-card grid | recents rail. The rail drops
   below 1200px (recents move to the horizontal strip above the results) and the
   filter sidebar collapses into a drawer below 992px. */

.vehicles-items-shell-grid[b-iaz1geiuvo] {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 240px;
    gap: 36px;
    align-items: start;
}

@media (min-width: 1600px) {
    .vehicles-items-shell-grid[b-iaz1geiuvo] {
        grid-template-columns: 320px minmax(0, 1fr) 264px;
        gap: 44px;
    }
}

/* Below 1200px the recents rail is hidden - fall back to the 2-column shell. */
@media (max-width: 1199.98px) {
    .vehicles-items-shell-grid[b-iaz1geiuvo] {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 32px;
    }
}

/* Right-hand recently-viewed rail - sticky, compact vertical stack of 4 items.
   No inner scroll (4 items always fit), so a short viewport never traps a
   scrollbar the way the old left-rail mount did. */
.vehicles-items-recents-rail[b-iaz1geiuvo] {
    position: sticky;
    top: 88px;
    align-self: start;
}

.vehicles-items-recents-rail[b-iaz1geiuvo]  .recently-viewed-strip-sidebar {
    margin-top: 0;
}

@media (max-width: 1199.98px) {
    .vehicles-items-recents-rail[b-iaz1geiuvo] {
        display: none;
    }
}

/* ---- Table view: full-width table, no right recents rail ----
   The dense expert table wants horizontal room. In table mode only: drop the
   right recents rail (the column), let the main area span the full 2-col shell,
   widen the whole page shell toward the screen edges, and surface the recents
   as the horizontal strip above the results (same placement as the smaller
   breakpoints). Grid + list views are untouched. */
.vehicles-items-page.is-view-table .vehicles-items-shell-grid[b-iaz1geiuvo] {
    grid-template-columns: 300px minmax(0, 1fr);
}

.vehicles-items-page.is-view-table .vehicles-items-recents-rail[b-iaz1geiuvo] {
    display: none;
}

/* Recents jump above the results (desktop too) when the right rail is gone. */
.vehicles-items-page.is-view-table .vehicles-items-mobile-recents[b-iaz1geiuvo] {
    display: block;
}

/* Widen the shell so the table reaches close to the screen edges. */
.vehicles-items-page.is-view-table .container-xxl.vehicles-page-shell[b-iaz1geiuvo] {
    max-width: 95vw;
}

.vehicles-items-sidebar[b-iaz1geiuvo] {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    scrollbar-gutter: stable;
}

/* Desktop hides the legacy sidebar head entirely - facet pills are the only
   affordance. Mobile re-shows it as a full-width strip header below. */
.vehicles-items-sidebar-head[b-iaz1geiuvo] {
    display: none;
}

.vehicles-items-sidebar-title[b-iaz1geiuvo] {
    color: var(--ink);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ---- Filter pill accordion ----
   Paper bg + graphite border at rest. Signal-orange fill when expanded.
   Single-open: only one pill expanded at a time (C#-side _expandedFacet).
   Trigger button = full pill hitbox. Body animates open via max-height. */

.vehicles-items-facet[b-iaz1geiuvo] {
    margin: 0 0 10px;
    padding: 0;
    background: var(--card-surface, #ffffff);
    border: 1px solid var(--ink, #0e0f10);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.vehicles-items-facet:last-of-type[b-iaz1geiuvo] {
    margin-bottom: 0;
}

.vehicles-items-facet:hover[b-iaz1geiuvo] {
    box-shadow: 0 4px 14px rgba(14, 15, 16, 0.08);
}

/* Expanded - pill flips to signal orange. Border + bg match so the whole
   capsule reads as one solid coloured surface, body sits on paper inside. */
.vehicles-items-facet:not(.is-collapsed)[b-iaz1geiuvo] {
    background: var(--signal, #d94a1f);
    border-color: var(--signal, #d94a1f);
    box-shadow: 0 10px 26px rgba(217, 74, 31, 0.24);
}

/* Specs + price share one row - specs flex column on the left, price tucked
   in the top-right corner of the same row. Kills the awkward vertical gap
   between price line and the spec list when they sat as separate blocks. */
.vehicles-items-page .vehicle-compatible-item-card-info[b-iaz1geiuvo] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.vehicles-items-page .vehicle-compatible-item-card-info .vehicle-compatible-item-card-specs[b-iaz1geiuvo] {
    flex: 1 1 auto;
    margin: 0;
}

.vehicles-items-page .vehicle-compatible-item-card-info .vehicle-compatible-item-card-price[b-iaz1geiuvo] {
    margin-top: 0;
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

/* ---- Result card typography rebalance ----
   Default Model page sizing left price louder than title (1.45rem bold vs
   1.25rem bold) - wrong hierarchy for the listing. Title is the scan
   target, price reads after. Bumps title to 1.4rem 800, drops price
   strong to 1.05rem 500 + Plex Mono so it reads as data not headline.
   Selector overrides the `.vehicles-model-page` cascade via shared parent
   `.vehicles-items-page` (Items.razor sets both classes on the page shell). */
.vehicles-items-page .vehicle-compatible-item-card[b-iaz1geiuvo] {
    padding-bottom: 14px;
}

/* White media background on listing cards - paper-warm reads dirty on small
   tyre product shots, white isolates the product silhouette cleanly. */
.vehicles-items-page .vehicle-compatible-item-card-media[b-iaz1geiuvo] {
    background: #ffffff;
}

/* Reserve ~a screen of height while results load so the results grid doesn't
   pop in from the short "Loading" placeholder and push the footer down (CLS).
   vh keeps the reservation proportional across a11y zoom steps. */
.vehicles-items-loading[b-iaz1geiuvo] {
    min-height: 70vh;
}

/* Mobile recently-viewed wrapper - desktop hides this so the sidebar
   variant is the only surface; mobile shows the horizontal strip below
   results because mobile has no visible sidebar. */
.vehicles-items-mobile-recents[b-iaz1geiuvo] {
    display: block;
}

/* Horizontal strip shows below 1200px (where the right rail is hidden) and
   hides at >=1200px where the dedicated right rail takes over. */
@media (min-width: 1200px) {
    .vehicles-items-mobile-recents[b-iaz1geiuvo] {
        display: none;
    }
}

/* Compare button anchor rules live in wwwroot/css/pages/tyre-card-hover.css
   (unscoped) because the wrap div is rendered by ItemsResultCard component
   and Blazor scoped CSS from Items.razor wouldn't match it. */

.vehicles-items-page .vehicle-compatible-item-card-title[b-iaz1geiuvo] {
    margin-top: 8px;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    /* Line-clamp + ellipsis live in tyre-card-hover.css (single owner). */
}

.vehicles-items-page .vehicle-compatible-item-card-subtitle[b-iaz1geiuvo] {
    margin: 6px 0 0;
    font-size: 0.85rem;
}

/* Price block - pushed right with extra top margin so it sits clear of
   title + subtitle. text-align: right tucks the number against the card's
   right edge so the title gets full-width breathing room on the left. */
.vehicles-items-page .vehicle-compatible-item-card-price[b-iaz1geiuvo] {
    margin-top: 14px;
    text-align: right;
    color: var(--ink, #0e0f10);
}

/* De-emphasize price strong - was 1.45rem 700, now 1.1rem 500 mono so it
   reads as supporting data rather than the loudest element on the card. */
/* Price-strong typography (font-family + size + weight) lives in
   tyre-card-hover.css - applies to both items + model pages. */

/* ---- Compact /tyres card with hover-expand reveal ----
   On the catalog grid the default state shows only brand + name + price.
   Subtitle (dim), flags, specs, CTA, stock pill all collapse via max-height
   + opacity transitions. Hovering or keyboard-focusing the card reveals
   them with a single smooth animation, no layout jump.
   Mirrors the "similar / recently viewed" minimalist tile language so the
   catalog reads as a denser grid at rest. Mobile (no hover) opts out of the
   collapse - see the ≤768px media query below. */
.vehicles-items-page .vehicle-compatible-item-card .vehicle-compatible-item-card-subtitle[b-iaz1geiuvo],
.vehicles-items-page .vehicle-compatible-item-card .vehicle-compatible-item-card-flags[b-iaz1geiuvo],
.vehicles-items-page .vehicle-compatible-item-card .vehicle-compatible-item-card-specs[b-iaz1geiuvo],
.vehicles-items-page .vehicle-compatible-item-card .vehicle-compatible-item-card-cta[b-iaz1geiuvo],
.vehicles-items-page .vehicle-compatible-item-card .vehicle-compatible-item-card-stock[b-iaz1geiuvo] {
    max-height: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-4px);
    transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.22s ease 0.04s,
                margin 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover / keyboard focus expands every collapsed block back to its natural
   layout. max-height upper bound is generous enough that even the most
   verbose card (5 specs + season + XL + RFT) renders fully. */
.vehicles-items-page .vehicle-compatible-item-card:hover .vehicle-compatible-item-card-subtitle[b-iaz1geiuvo],
.vehicles-items-page .vehicle-compatible-item-card:focus-within .vehicle-compatible-item-card-subtitle[b-iaz1geiuvo],
.vehicles-items-page .vehicle-compatible-item-card:hover .vehicle-compatible-item-card-flags[b-iaz1geiuvo],
.vehicles-items-page .vehicle-compatible-item-card:focus-within .vehicle-compatible-item-card-flags[b-iaz1geiuvo],
.vehicles-items-page .vehicle-compatible-item-card:hover .vehicle-compatible-item-card-specs[b-iaz1geiuvo],
.vehicles-items-page .vehicle-compatible-item-card:focus-within .vehicle-compatible-item-card-specs[b-iaz1geiuvo],
.vehicles-items-page .vehicle-compatible-item-card:hover .vehicle-compatible-item-card-cta[b-iaz1geiuvo],
.vehicles-items-page .vehicle-compatible-item-card:focus-within .vehicle-compatible-item-card-cta[b-iaz1geiuvo],
.vehicles-items-page .vehicle-compatible-item-card:hover .vehicle-compatible-item-card-stock[b-iaz1geiuvo],
.vehicles-items-page .vehicle-compatible-item-card:focus-within .vehicle-compatible-item-card-stock[b-iaz1geiuvo] {
    max-height: 240px;
    opacity: 1;
    transform: translateY(0);
}

/* Per-block margin restore on expand - keeps the rhythm identical to the
   pre-collapse card so nothing else has to budge. */
.vehicles-items-page .vehicle-compatible-item-card:hover .vehicle-compatible-item-card-subtitle[b-iaz1geiuvo],
.vehicles-items-page .vehicle-compatible-item-card:focus-within .vehicle-compatible-item-card-subtitle[b-iaz1geiuvo] {
    margin: 6px 0 0;
}
.vehicles-items-page .vehicle-compatible-item-card:hover .vehicle-compatible-item-card-flags[b-iaz1geiuvo],
.vehicles-items-page .vehicle-compatible-item-card:focus-within .vehicle-compatible-item-card-flags[b-iaz1geiuvo] {
    margin: 10px 0 0;
}
.vehicles-items-page .vehicle-compatible-item-card:hover .vehicle-compatible-item-card-specs[b-iaz1geiuvo],
.vehicles-items-page .vehicle-compatible-item-card:focus-within .vehicle-compatible-item-card-specs[b-iaz1geiuvo] {
    margin: 0;
}
.vehicles-items-page .vehicle-compatible-item-card:hover .vehicle-compatible-item-card-cta[b-iaz1geiuvo],
.vehicles-items-page .vehicle-compatible-item-card:focus-within .vehicle-compatible-item-card-cta[b-iaz1geiuvo] {
    margin-top: 12px;
}

/* On touch devices hover doesn't fire reliably - drop the collapse entirely
   so mobile users see the full card upfront (and we hide the catalog cards
   in a smaller grid via the breakpoint elsewhere). */
@media (hover: none), (max-width: 768px) {
    .vehicles-items-page .vehicle-compatible-item-card .vehicle-compatible-item-card-subtitle[b-iaz1geiuvo],
    .vehicles-items-page .vehicle-compatible-item-card .vehicle-compatible-item-card-flags[b-iaz1geiuvo],
    .vehicles-items-page .vehicle-compatible-item-card .vehicle-compatible-item-card-specs[b-iaz1geiuvo],
    .vehicles-items-page .vehicle-compatible-item-card .vehicle-compatible-item-card-cta[b-iaz1geiuvo],
    .vehicles-items-page .vehicle-compatible-item-card .vehicle-compatible-item-card-stock[b-iaz1geiuvo] {
        max-height: none;
        margin: revert;
        opacity: 1;
        overflow: visible;
        transform: none;
        transition: none;
    }
}

/* Results grid override - Items.razor reuses `vehicles-model-page` base class
   so it inherits the Model page grid (`auto-fit, minmax(280px, 360px)`).
   That caps each cell at 360px which read as "only 2 cols" against a
   container minus the 280px sidebar. Override with a wider container,
   smaller minimum, and 1fr maximum so 3–4 cards fit per row on desktop. */
/* Explicit column counts so the grid reads as a deterministic 3 → 2 → 1 step
   as the viewport narrows, matching the shell layout. Cards stay wide enough
   that the title + spec text never squishes:
   >=1200px  filter | 3 cards | recents rail
   768-1199  filter | 2 cards  (recents rail dropped to horizontal strip)
   <=767     1 card  (filters in drawer) */
.vehicles-items-page .vehicles-compatible-items-grid[b-iaz1geiuvo] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    gap: 18px;
}

@media (min-width: 1600px) {
    .vehicles-items-page .vehicles-compatible-items-grid[b-iaz1geiuvo] {
        gap: 20px;
    }
}

@media (max-width: 1199.98px) {
    .vehicles-items-page .vehicles-compatible-items-grid[b-iaz1geiuvo] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 767.98px) {
    .vehicles-items-page .vehicles-compatible-items-grid[b-iaz1geiuvo] {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
}

/* Widen the page shell so the larger grid has breathing room - default
   container-xxl tops out at 1200, which after a 300 sidebar still leaves
   plenty for cards. Push max to 1640 on big screens so the 5-col top
   filter row + 4-card grid never wraps prematurely. */
.vehicles-items-page .container-xxl.vehicles-page-shell[b-iaz1geiuvo] {
    max-width: 1640px;
}

/* Load-more button - full-width centred CTA under the grid. Paper fill
   with graphite outline at rest, signal-orange fill on hover. Mono caps
   matches the rest of the editorial typography. Replaces the previous
   prev/next pagination nav. */
.vehicles-items-page .vehicles-items-load-more[b-iaz1geiuvo] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 32px 0 16px;
    text-align: center;
}

.vehicles-items-page .vehicles-items-load-more-btn[b-iaz1geiuvo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 240px;
    padding: 14px 28px;
    border: 1.5px solid var(--ink, #0e0f10);
    border-radius: 4px;
    background: transparent;
    color: var(--ink, #0e0f10);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background-color 0.22s ease,
        color 0.22s ease,
        border-color 0.22s ease,
        transform 0.18s ease;
}

.vehicles-items-page .vehicles-items-load-more-btn:hover:not(:disabled)[b-iaz1geiuvo],
.vehicles-items-page .vehicles-items-load-more-btn:focus-visible:not(:disabled)[b-iaz1geiuvo] {
    background: var(--signal, #d94a1f);
    border-color: var(--signal, #d94a1f);
    color: #ffffff;
    outline: none;
    transform: translateY(-1px);
}

.vehicles-items-page .vehicles-items-load-more-btn:disabled[b-iaz1geiuvo] {
    opacity: 0.55;
    cursor: progress;
}

.vehicles-items-page .vehicles-items-load-more-btn i[b-iaz1geiuvo] {
    font-size: 0.85rem;
}

/* Multi-dim "combine multiple sizes" card styles moved to
   ItemsMultiDimInput.razor.css - Blazor scopes each component's CSS to its
   OWN rendered markup, so the parent's selectors never reached the child
   component's <section class="items-search-multidim-card"> and the card
   rendered un-styled whenever the parent CSS rebundled. */

/* Clear-filters trash FAB is mobile-only - the desktop sidebar already
   exposes an inline "Očisti filtre" button next to the facet list. Hide
   here by default; the mobile media query below flips display back. */
.vehicles-items-clear-fab[b-iaz1geiuvo] {
    display: none;
}

/* Sidebar top row - height-matched to .vehicles-items-summary on the right
   (min-height 22px + margin-bottom 16px). Empty by default, holds the
   desktop Clear-filters bar when at least one filter is active. Reservation
   stays so facet pills always start at the same Y as the first item row. */
.vehicles-items-sidebar-top[b-iaz1geiuvo] {
    display: flex;
    align-items: center;
    min-height: 22px;
    margin: 0 0 16px;
}

/* Desktop clear-filters bar - gray-muted text + faint border at rest;
   signal-orange border + text on hover, background stays transparent.
   Mobile hides via media query below (trash FAB takes over). */
.vehicles-items-clear-desktop[b-iaz1geiuvo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 16px;
    background: transparent;
    border: 1px solid var(--gray-faint, #d6d4ca);
    border-radius: 999px;
    color: var(--gray-muted, #8a8a82);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease;
}

.vehicles-items-clear-desktop:hover[b-iaz1geiuvo],
.vehicles-items-clear-desktop:focus-visible[b-iaz1geiuvo] {
    border-color: var(--signal, #d94a1f);
    color: var(--signal, #d94a1f);
    background: transparent;
    outline: none;
}

.vehicles-items-clear-desktop i[b-iaz1geiuvo] {
    font-size: 0.82rem;
}

.vehicles-items-facet-label[b-iaz1geiuvo] {
    flex: 1 1 auto;
    color: var(--ink, #0e0f10);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.vehicles-items-facet:not(.is-collapsed) .vehicles-items-facet-label[b-iaz1geiuvo] {
    color: var(--paper, #faf9f5);
}

/* Selection count badge on the trigger - small mono pill on the right
   showing how many values are currently active for that facet. */
.vehicles-items-facet-count[b-iaz1geiuvo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: var(--signal, #d94a1f);
    color: var(--paper, #faf9f5);
    border-radius: 999px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.vehicles-items-facet:not(.is-collapsed) .vehicles-items-facet-count[b-iaz1geiuvo] {
    background: var(--paper, #faf9f5);
    color: var(--signal, #d94a1f);
}

/* Reset button - lives inside the open body, mono uppercase. */
.vehicles-items-facet-reset[b-iaz1geiuvo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--card-border, #d6d4ca);
    border-radius: 999px;
    color: var(--gray-muted, #8a8a82);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.vehicles-items-facet-reset:hover[b-iaz1geiuvo] {
    border-color: var(--signal, #d94a1f);
    color: var(--signal, #d94a1f);
    background: var(--signal-soft, rgba(217, 74, 31, 0.14));
}

.vehicles-items-facet-reset i[b-iaz1geiuvo] {
    font-size: 0.78rem;
}

.vehicles-items-facet-list[b-iaz1geiuvo] {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.vehicles-items-facet-list--short[b-iaz1geiuvo] {
    max-height: none;
}

.vehicles-items-facet-list:empty[b-iaz1geiuvo] {
    display: none;
}

.vehicles-items-facet:has(.vehicles-items-facet-list:empty) .vehicles-items-facet-toggle[b-iaz1geiuvo] {
    opacity: 0.45;
    pointer-events: none;
}

.vehicles-items-facet-list li[b-iaz1geiuvo] {
    margin: 0;
    padding: 0;
}

.vehicles-items-facet-row[b-iaz1geiuvo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 0.86rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.vehicles-items-facet-row:hover[b-iaz1geiuvo] {
    background: var(--paper-warm);
    color: var(--signal);
}

.vehicles-items-facet-row.is-active[b-iaz1geiuvo] {
    background: var(--signal-soft);
    color: var(--signal);
    border-left-color: var(--signal);
    font-weight: 600;
}

.vehicles-items-facet-row-check[b-iaz1geiuvo] {
    width: 14px;
    font-size: 0.88rem;
    color: var(--gray-faint);
    transition: color 0.14s ease;
}

.vehicles-items-facet-row.is-active .vehicles-items-facet-row-check[b-iaz1geiuvo],
.vehicles-items-facet-row:hover .vehicles-items-facet-row-check[b-iaz1geiuvo] {
    color: var(--signal);
}

.vehicles-items-facet-row-icon[b-iaz1geiuvo] {
    width: 14px;
    font-size: 0.83rem;
    color: var(--gray-muted);
    transition: color 0.14s ease;
}

.vehicles-items-facet-row.is-active .vehicles-items-facet-row-icon[b-iaz1geiuvo],
.vehicles-items-facet-row:hover .vehicles-items-facet-row-icon[b-iaz1geiuvo] {
    color: var(--signal);
}

.vehicles-items-facet-row-value[b-iaz1geiuvo] {
    flex: 1;
}

/* SKU count badge - sits at the right end of each facet row. Same mono+pill
   vocabulary as the dropdown badge so the two filter surfaces share a look. */
.vehicles-items-facet-row-count[b-iaz1geiuvo] {
    flex: 0 0 auto;
    min-width: 30px;
    padding: 2px 9px;
    margin-left: 8px;
    border-radius: 999px;
    background: var(--signal-soft);
    color: var(--signal);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    font-feature-settings: "tnum" 1;
}

.vehicles-items-facet-row.is-active .vehicles-items-facet-row-count[b-iaz1geiuvo],
.vehicles-items-facet-row:hover .vehicles-items-facet-row-count[b-iaz1geiuvo] {
    background: var(--signal);
    color: #ffffff;
}

/* ---- Right column: summary + grid + pagination ---- */

.vehicles-items-main[b-iaz1geiuvo] {
    min-width: 0;
}

.vehicles-items-summary[b-iaz1geiuvo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
    min-height: 22px;
    color: var(--gray-muted);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* At +25%/+50% a11y scale the inline count + sort row no longer fits - the
   sort dropdown spilled off the right edge. Stack them: sort/view toolbar on
   top, result count below it (per founder request). +10%/standard keep the
   inline row. */
:where(html.a11y-step-125, html.a11y-step-150) .vehicles-items-summary[b-iaz1geiuvo] {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
:where(html.a11y-step-125, html.a11y-step-150) .vehicles-items-summary .vehicles-items-toolbar[b-iaz1geiuvo] {
    order: -1;
    margin-left: 0;
}

/* ---- Toolbar wrapper (filter + sort + view) ----
   Inline trio pinned right of the result count. On mobile the view toggle is
   hidden via existing rule; filter + sort stay reachable so the toolbar never
   collapses to a single oddball control. */
.vehicles-items-toolbar[b-iaz1geiuvo] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

/* Shared pill - filter trigger + sort dropdown trigger share padding /
   border / hover treatment so the trio reads as a unit. */
.vehicles-items-toolbar-btn[b-iaz1geiuvo] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 6px 14px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: var(--card-surface);
    color: var(--ink);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.vehicles-items-toolbar-btn:hover[b-iaz1geiuvo],
.vehicles-items-toolbar-btn:focus-visible[b-iaz1geiuvo] {
    border-color: var(--ink);
    color: var(--signal);
    outline: none;
}

.vehicles-items-toolbar-btn.is-active[b-iaz1geiuvo] {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
}

.vehicles-items-toolbar-btn > i[b-iaz1geiuvo] {
    font-size: 0.92rem;
}

.vehicles-items-toolbar-btn-label[b-iaz1geiuvo] {
    white-space: nowrap;
}

/* Active-filter dot - small signal-orange pip on the filter trigger when
   ≥1 facet is engaged. Mirrors the existing mobile FAB dot. */
.vehicles-items-toolbar-filter[b-iaz1geiuvo] {
    position: relative;
}

.vehicles-items-toolbar-dot[b-iaz1geiuvo] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--signal);
    margin-left: 2px;
}

/* Sort popover wrapper - relative anchor for the absolutely-positioned menu
   below; scrim sits between trigger + menu so click-outside closes it. */
.vehicles-items-toolbar-sort[b-iaz1geiuvo] {
    position: relative;
}

.vehicles-items-toolbar-sort-chev[b-iaz1geiuvo] {
    font-size: 0.72rem;
    transition: transform 0.18s ease;
}

.vehicles-items-toolbar-sort.is-open .vehicles-items-toolbar-sort-chev[b-iaz1geiuvo] {
    transform: rotate(180deg);
}

.vehicles-items-toolbar-sort-scrim[b-iaz1geiuvo] {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: transparent;
    cursor: default;
}

.vehicles-items-toolbar-sort-menu[b-iaz1geiuvo] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    z-index: 90;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--card-surface);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    box-shadow: 0 18px 40px var(--card-shadow);
}

.vehicles-items-toolbar-sort-item[b-iaz1geiuvo] {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.vehicles-items-toolbar-sort-item:hover[b-iaz1geiuvo],
.vehicles-items-toolbar-sort-item:focus-visible[b-iaz1geiuvo] {
    background: var(--paper-warm);
    color: var(--signal);
    outline: none;
}

.vehicles-items-toolbar-sort-item.is-active[b-iaz1geiuvo] {
    color: var(--signal);
    font-weight: 700;
}

.vehicles-items-toolbar-sort-item > i[b-iaz1geiuvo] {
    font-size: 0.8rem;
    color: var(--signal);
}

/* ---- View toggle (grid / list / table) ----
   Segmented control pinned to the right of the result count. Square editorial
   buttons; active = graphite fill + paper icon, idle = paper + ink hover to
   signal. Desktop only - hidden on mobile where only the grid makes sense. */
.vehicles-items-viewtoggle[b-iaz1geiuvo] {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    overflow: hidden;
    background: var(--card-surface, #fff);
}

.vehicles-items-viewtoggle-btn[b-iaz1geiuvo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 32px;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--gray-divider);
    background: transparent;
    color: var(--gray-muted);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.vehicles-items-viewtoggle-btn:first-child[b-iaz1geiuvo] {
    border-left: 0;
}

.vehicles-items-viewtoggle-btn:hover[b-iaz1geiuvo] {
    color: var(--signal);
}

.vehicles-items-viewtoggle-btn.is-active[b-iaz1geiuvo] {
    background: var(--graphite, #0e0f10);
    color: var(--paper, #faf9f5);
}

/* Mobile: no alternate views - drop the toggle, grid is the only layout. */
@media (max-width: 767.98px) {
    .vehicles-items-viewtoggle[b-iaz1geiuvo] {
        display: none;
    }
}

.vehicles-items-summary-filter[b-iaz1geiuvo] {
    color: var(--ink);
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid var(--gray-faint);
}

.vehicles-items-pagination[b-iaz1geiuvo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 28px 0 16px;
    padding: 18px 0;
    border-top: 1px solid var(--gray-divider);
}

.vehicles-items-page-btn[b-iaz1geiuvo] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--card-surface);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    color: var(--ink);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.vehicles-items-page-btn:hover:not(:disabled)[b-iaz1geiuvo] {
    border-color: var(--signal);
    color: var(--signal);
    transform: translateY(-1px);
    outline: none;
}

.vehicles-items-page-btn:disabled[b-iaz1geiuvo] {
    opacity: 0.45;
    cursor: not-allowed;
    border-style: dashed;
}

.vehicles-items-page-btn i[b-iaz1geiuvo] {
    font-size: 0.83rem;
}

.vehicles-items-page-indicator[b-iaz1geiuvo] {
    color: var(--gray-muted);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---- Responsive collapse ---- */

@media (max-width: 991.98px) {
    .vehicles-items-shell-grid[b-iaz1geiuvo] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .vehicles-items-sidebar[b-iaz1geiuvo] {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .vehicles-items-facet-list[b-iaz1geiuvo] {
        max-height: 240px;
    }

    .vehicles-items-top-filters-grid[b-iaz1geiuvo] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Mobile facet strips - square corners, full panel width. The "Filtriraj
       rezultate" header strip above shares the same look so all bars stack
       seamlessly inside the drawer. */
    .vehicles-items-facet[b-iaz1geiuvo] {
        margin: 0 0 8px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .vehicles-items-facet-toggle[b-iaz1geiuvo] {
        padding: 18px 20px;
    }

    .vehicles-items-facet:not(.is-collapsed) .vehicles-items-facet-body[b-iaz1geiuvo] {
        border-radius: 0;
    }

    /* Mobile re-shows the sidebar head as a full-width strip header label.
       Matches facet pills visually (square, paper, graphite border) so the
       drawer reads as a single vertical column of strips. */
    .vehicles-items-sidebar-head[b-iaz1geiuvo] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 0 0 8px;
        padding: 16px 20px;
        background: var(--card-surface, #ffffff);
        border-top: 1px solid var(--ink, #0e0f10);
        border-bottom: 1px solid var(--ink, #0e0f10);
        border-radius: 0;
    }

    /* Desktop clear bar hidden on mobile - trash FAB outside drawer handles it. */
    .vehicles-items-clear-desktop[b-iaz1geiuvo] {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .vehicles-items-top-filters-grid[b-iaz1geiuvo] {
        grid-template-columns: 1fr;
}

    .vehicles-items-pagination[b-iaz1geiuvo] {
        flex-direction: column;
        gap: 12px;
    }
}

/* ---- Accordion trigger button - full pill hitbox ---- */
.vehicles-items-facet-toggle[b-iaz1geiuvo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    text-align: left;
    font: inherit;
}

.vehicles-items-facet-toggle:focus-visible[b-iaz1geiuvo] {
    outline: 2px solid var(--signal, #d94a1f);
    outline-offset: -2px;
}

.vehicles-items-facet-chevron[b-iaz1geiuvo] {
    width: 12px;
    height: 8px;
    flex-shrink: 0;
    color: var(--ink, #0e0f10);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}

.vehicles-items-facet:not(.is-collapsed) .vehicles-items-facet-chevron[b-iaz1geiuvo] {
    transform: rotate(180deg);
    color: var(--paper, #faf9f5);
}

/* ---- Expand/collapse animation ----
   Body always in DOM (markup keeps it rendered, no @if). max-height +
   opacity transition gives smooth expand. Background paper inside signal
   capsule. */
.vehicles-items-facet-body[b-iaz1geiuvo] {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background: var(--card-surface, #ffffff);
    transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.22s ease,
                padding 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 0 14px;
}

.vehicles-items-facet:not(.is-collapsed) .vehicles-items-facet-body[b-iaz1geiuvo] {
    max-height: 360px;
    opacity: 1;
    padding: 12px 14px 14px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.vehicles-items-sidebar-close[b-iaz1geiuvo] {
    display: none;
}

/* ---- Mobile filter FAB + slide-in drawer ---- */
.vehicles-items-filter-fab[b-iaz1geiuvo] {
    display: none;
}

@media (max-width: 991.98px) {
    .vehicles-items-shell-grid[b-iaz1geiuvo] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Hide sidebar by default on mobile/tablet - opens via FAB. */
    .vehicles-items-sidebar[b-iaz1geiuvo] {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        width: min(360px, 90vw);
        /* Use dynamic viewport units so mobile browser chrome (Safari address
           bar) doesn't push the bottom of the drawer off-screen and trap the
           scroll inside an oversized box. Fall back to 100vh on older agents. */
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        /* Solid paper bg behind the strip stack - desktop keeps the sidebar
           transparent so individual pills float on the page bg, but mobile
           drawer needs an opaque surface so underlying page content doesn't
           bleed through the gaps between strips. */
        background: var(--card-surface, #ffffff);
        border-radius: 0;
        border: 0;
        border-left: 1px solid var(--card-border);
        box-shadow: -16px 0 36px rgba(0, 0, 0, 0.18);
        /* Force own scroll context with momentum scrolling on iOS - base rule
           sets overflow-y: auto but on mobile we also need touch scrolling +
           generous bottom padding so the last facet clears the FAB. */
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 96px;
        animation: items-filter-slide-in-b-iaz1geiuvo 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Mobile drawer hides the desktop top-row reservation - header strip
       already provides equivalent affordance there. */
    .vehicles-items-sidebar-top[b-iaz1geiuvo] {
        display: none;
    }

    /* Mobile strips = ONE continuous accordion stack. Zero margin between
       strips, single 1px hairline between (border-bottom on each + bottom
       border on the last too - closes the stack visually against drawer
       bottom). Open state keeps the same shape; only color flips to
       signal-orange. No radius, no pop-out margin - strip stays in flow
       so the column reads as a unified panel. */
    .vehicles-items-facet[b-iaz1geiuvo] {
        margin: 0;
        border-radius: 0;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid var(--gray-divider, #e4e1d5);
        transition: border-color 0.22s ease, background 0.22s ease;
    }

    /* Open strip - connected with neighbors, signal-orange fill. Border
       stays so the next strip's hairline still reads against the signal bg. */
    .vehicles-items-facet:not(.is-collapsed)[b-iaz1geiuvo] {
        border-radius: 0;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid var(--signal, #d94a1f);
        box-shadow: none;
    }

    .vehicles-items-facet:not(.is-collapsed) .vehicles-items-facet-body[b-iaz1geiuvo] {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Header strip - flush against first facet, matching divider weight so
       the whole drawer reads as one stack. */
    .vehicles-items-sidebar-head[b-iaz1geiuvo] {
        margin: 0;
        border-top: 0;
        border-bottom: 1px solid var(--gray-divider, #e4e1d5);
    }

    .vehicles-items-shell-grid.is-filters-open .vehicles-items-sidebar[b-iaz1geiuvo] {
        display: block;
    }

    .vehicles-items-sidebar-close[b-iaz1geiuvo] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        background: transparent;
        border: 1px solid var(--card-border);
        border-radius: 999px;
        color: var(--ink);
        cursor: pointer;
        margin-left: auto;
    }

    /* Floating action button - left bottom corner. Right side is reserved for
       the chat bubble + recently-viewed callout, so filter FAB lives left. */
    .vehicles-items-filter-fab[b-iaz1geiuvo] {
        position: fixed;
        bottom: 24px;
        left: 24px;
        z-index: 950;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 18px;
        background: var(--signal, #d94a1f);
        color: var(--paper, #faf9f5);
        border: 0;
        border-radius: 999px;
        box-shadow: 0 12px 32px rgba(217, 74, 31, 0.32);
        font-family: Inter, sans-serif;
        font-size: 0.95rem;
        font-weight: 700;
        cursor: pointer;
        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

    .vehicles-items-filter-fab:hover[b-iaz1geiuvo],
    .vehicles-items-filter-fab:focus-visible[b-iaz1geiuvo] {
        background: var(--signal-hover, #b83a15);
        transform: translateY(-2px);
        outline: none;
    }

    .vehicles-items-filter-fab i[b-iaz1geiuvo] {
        font-size: 1rem;
    }

    .vehicles-items-filter-fab-dot[b-iaz1geiuvo] {
        position: absolute;
        top: 6px;
        right: 8px;
        width: 9px;
        height: 9px;
        border-radius: 999px;
        background: var(--paper, #faf9f5);
        border: 2px solid var(--signal, #d94a1f);
    }

    /* Quick-clear trash FAB - circular icon-only button stacked directly
       above the filter FAB. Same left edge so the pair reads as a vertical
       cluster. Paper background + ink icon so it stays subtle; only fires
       when a filter is active (markup guards). */
    .vehicles-items-clear-fab[b-iaz1geiuvo] {
        display: inline-flex;
        position: fixed;
        left: 24px;
        bottom: 80px;
        z-index: 950;
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: var(--card-surface, #ffffff);
        color: var(--ink, #0e0f10);
        border: 1px solid var(--card-border, #d6d4ca);
        border-radius: 999px;
        box-shadow: 0 6px 18px rgba(14, 15, 16, 0.18);
        cursor: pointer;
        transition: transform 0.18s ease, color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }

    .vehicles-items-clear-fab:hover[b-iaz1geiuvo],
    .vehicles-items-clear-fab:focus-visible[b-iaz1geiuvo] {
        background: var(--signal, #d94a1f);
        border-color: var(--signal, #d94a1f);
        color: var(--paper, #faf9f5);
        transform: translateY(-2px);
        outline: none;
    }

    .vehicles-items-clear-fab i[b-iaz1geiuvo] {
        font-size: 1rem;
    }

    .vehicles-items-filter-scrim[b-iaz1geiuvo] {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1099;
        animation: items-filter-scrim-fade-b-iaz1geiuvo 0.22s ease-out;
    }
}

@keyframes items-filter-slide-in-b-iaz1geiuvo {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes items-filter-scrim-fade-b-iaz1geiuvo {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ---- Price range filter (slider + Od/Do inputs) ----
   Dual-range built from two overlaid <input type=range>: the inputs are
   pointer-events:none (so they don't block each other) and only their thumbs
   re-enable pointer events, leaving both handles grabbable. Track + fill are
   plain spans behind them; the fill's left/right % is set inline from C#. */
.vehicles-items-price[b-iaz1geiuvo] {
    padding: 4px 2px 2px;
}

.vehicles-items-price-slider[b-iaz1geiuvo] {
    position: relative;
    height: 34px;
}

.vehicles-items-price-track[b-iaz1geiuvo],
.vehicles-items-price-fill[b-iaz1geiuvo] {
    position: absolute;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 2px;
}

.vehicles-items-price-track[b-iaz1geiuvo] {
    left: 0;
    right: 0;
    background: var(--gray-faint, #d6d4ca);
}

.vehicles-items-price-fill[b-iaz1geiuvo] {
    background: var(--signal, #d94a1f);
}

.vehicles-items-price-range[b-iaz1geiuvo] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 34px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}

.vehicles-items-price-range[b-iaz1geiuvo]::-webkit-slider-runnable-track {
    height: 34px;
    background: transparent;
    border: 0;
}

.vehicles-items-price-range[b-iaz1geiuvo]::-moz-range-track {
    height: 34px;
    background: transparent;
    border: 0;
}

.vehicles-items-price-range[b-iaz1geiuvo]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--signal, #d94a1f);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(14, 15, 16, 0.25);
    cursor: pointer;
}

.vehicles-items-price-range[b-iaz1geiuvo]::-moz-range-thumb {
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--signal, #d94a1f);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(14, 15, 16, 0.25);
    cursor: pointer;
}

.vehicles-items-price-inputs[b-iaz1geiuvo] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.vehicles-items-price-field[b-iaz1geiuvo] {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-muted, #8a8a82);
}

.vehicles-items-price-field input[b-iaz1geiuvo] {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--card-border, #d6d4ca);
    border-radius: 6px;
    background: var(--card-surface, #fff);
    font-family: Inter, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink, #0e0f10);
}

.vehicles-items-price-field input:focus-visible[b-iaz1geiuvo] {
    outline: none;
    border-color: var(--signal, #d94a1f);
    box-shadow: 0 0 0 3px rgba(217, 74, 31, 0.14);
}

.vehicles-items-price-dash[b-iaz1geiuvo],
.vehicles-items-price-cur[b-iaz1geiuvo] {
    padding-bottom: 9px;
    color: var(--gray-muted, #8a8a82);
    font-weight: 600;
}


/* Price slider polish - thumb lifts on hover/active, focus ring for keyboard.
   No transition on left/right of the fill (JS sets it live during drag; a
   transition would lag behind the cursor). */
.vehicles-items-price-range[b-iaz1geiuvo]::-webkit-slider-thumb {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.vehicles-items-price-range:hover[b-iaz1geiuvo]::-webkit-slider-thumb,
.vehicles-items-price-range:active[b-iaz1geiuvo]::-webkit-slider-thumb {
    transform: scale(1.18);
    box-shadow: 0 2px 8px rgba(217, 74, 31, 0.45);
}
.vehicles-items-price-range:focus-visible[b-iaz1geiuvo]::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(217, 74, 31, 0.22);
    outline: none;
}
.vehicles-items-price-range:hover[b-iaz1geiuvo]::-moz-range-thumb,
.vehicles-items-price-range:active[b-iaz1geiuvo]::-moz-range-thumb {
    transform: scale(1.18);
    box-shadow: 0 2px 8px rgba(217, 74, 31, 0.45);
}
.vehicles-items-price-range:focus-visible[b-iaz1geiuvo]::-moz-range-thumb {
    box-shadow: 0 0 0 4px rgba(217, 74, 31, 0.22);
    outline: none;
}
/* /Components/Pages/Items/ItemsMultiDimInput.razor.rz.scp.css */
/* Scoped to ItemsMultiDimInput.razor. Previously these rules lived in the
   parent Items.razor.css - Blazor scopes each component's CSS to its OWN
   rendered DOM via a generated [b-xyz] attribute, so the parent's selectors
   never matched the child component's markup and the card rendered unstyled.
   Keeping the styles in this file (next to the .razor) means Blazor stamps
   matching scope attributes onto both selectors and elements, so the rules
   bind reliably regardless of how the parent CSS gets reshuffled. */

.items-search-multidim-card[b-qd6f6ha02w] {
    margin: 16px 0 22px;
    padding: 18px 22px 20px;
    border: 1px dashed var(--card-border, #d6d4ca);
    border-radius: 12px;
    background: var(--paper-warm, #f3f2ee);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.items-search-multidim-head[b-qd6f6ha02w] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.items-search-multidim-kicker[b-qd6f6ha02w] {
    font-family: var(--app-mono, monospace);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--signal, #d94a1f);
    line-height: 1;
}

.items-search-multidim-hint[b-qd6f6ha02w] {
    margin: 0;
    color: var(--gray-muted, #8a8a82);
    font-family: var(--app-mono, monospace);
    font-size: 0.83rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.items-search-multidim-inputwrap[b-qd6f6ha02w] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--card-surface, #ffffff);
    border: 1px solid var(--signal, #d94a1f);
    border-radius: 999px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.items-search-multidim-inputwrap:focus-within[b-qd6f6ha02w] {
    box-shadow: 0 0 0 4px rgba(217, 74, 31, 0.12);
}

.items-search-multidim-icon[b-qd6f6ha02w] {
    color: var(--gray-muted, #8a8a82);
    font-size: 1rem;
    flex-shrink: 0;
}

.items-search-multidim-input[b-qd6f6ha02w] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--app-mono, monospace);
    font-size: 0.95rem;
    color: var(--ink, #0e0f10);
}

.items-search-multidim-input[b-qd6f6ha02w]::placeholder {
    color: var(--gray-muted, #8a8a82);
    font-family: var(--app-mono, monospace);
    letter-spacing: 0.04em;
}

.items-search-multidim-error[b-qd6f6ha02w] {
    color: var(--signal, #d94a1f);
    font-family: var(--app-mono, monospace);
    font-size: 0.83rem;
    font-weight: 600;
    margin-left: auto;
    white-space: nowrap;
}

.items-search-multidim-chips[b-qd6f6ha02w] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.items-search-multidim-chip[b-qd6f6ha02w] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 16px;
    background: var(--card-surface, #ffffff);
    border: 1px solid var(--ink, #0e0f10);
    border-radius: 999px;
    font-family: var(--app-mono, monospace);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ink, #0e0f10);
    letter-spacing: 0.02em;
}

/* EAN/SAP code chips read distinct from dimension chips: signal-orange accent
   border + a leading "#" so the user sees at a glance it's a code, not a size. */
.items-search-multidim-chip-code[b-qd6f6ha02w] {
    border-color: var(--signal, #d94a1f);
    color: var(--signal-hover, #b83a15);
}
.items-search-multidim-chip-code > strong[b-qd6f6ha02w]::before {
    content: "#";
    opacity: 0.5;
    margin-right: 1px;
}

.items-search-multidim-chip-remove[b-qd6f6ha02w] {
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-warm, #f3f2ee);
    border: 0;
    border-radius: 999px;
    color: var(--gray-muted, #8a8a82);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.items-search-multidim-chip-remove:hover[b-qd6f6ha02w],
.items-search-multidim-chip-remove:focus-visible[b-qd6f6ha02w] {
    background: var(--signal, #d94a1f);
    color: var(--paper, #faf9f5);
    outline: none;
}

.items-search-multidim-chip-remove i[b-qd6f6ha02w] {
    font-size: 0.83rem;
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found-page[b-lubxl4v1ov] {
    --page-bg: var(--paper);
    --card-bg: #ffffff;
    --card-border: var(--gray-faint);
    --title-ink: var(--ink);
    --text-muted: var(--gray-muted);
    --link-bg: var(--ink);
    --link-text: var(--paper);

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 100px 20px 60px;
    background: var(--page-bg);
}

.not-found-card[b-lubxl4v1ov] {
    max-width: 480px;
    padding: 48px 40px;
    text-align: center;
    border: 1px solid var(--card-border);
    border-radius: 24px;
    background: var(--card-bg);
}

.not-found-card h1[b-lubxl4v1ov] {
    margin: 0 0 12px;
    color: var(--title-ink);
    font-family: Inter, sans-serif;
    font-size: clamp(4rem, 10vw, 6rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}

.not-found-card p[b-lubxl4v1ov] {
    margin: 0 0 24px;
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 500;
}

.not-found-home[b-lubxl4v1ov] {
    display: inline-flex;
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--link-bg);
    color: var(--link-text);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
}

.not-found-home:hover[b-lubxl4v1ov] {
    background: var(--signal);
}
/* /Components/Pages/Profile/Profile.razor.rz.scp.css */
.profile-page[b-lmussrtww0] {
    --paper: #faf9f5;
    --paper-warm: #f3f2ee;
    --graphite: #0e0f10;
    --ink: #0e0f10;
    --signal: #d94a1f;
    --signal-hover: #b83a15;
    --signal-soft: rgba(217, 74, 31, 0.14);

    --gray-muted: #8a8a82;
    --gray-faint: #d6d4ca;
    --gray-divider: #e4e1d5;

    --card-surface: #ffffff;
    --card-border: #d6d4ca;
    --card-shadow: rgba(14, 15, 16, 0.08);

    --danger: #a8321a;
    --danger-bg: #fbe9e2;
    --danger-border: rgba(168, 50, 26, 0.28);

    min-height: 100vh;
    padding: 130px 24px 80px;
    background: var(--paper);
    color: var(--ink);
    font-family: Inter, sans-serif;
    position: relative;
    overflow: hidden;
}

.profile-page[b-lmussrtww0]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 14%, rgba(217, 74, 31, 0.07) 0, transparent 38%),
        radial-gradient(circle at 92% 88%, rgba(14, 15, 16, 0.05) 0, transparent 42%);
    pointer-events: none;
    z-index: 0;
}

.profile-shell[b-lmussrtww0] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

/* ---------- Hero ---------- */

.profile-hero[b-lmussrtww0] {
    margin-bottom: 56px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--gray-divider);
}

.profile-hero-kicker[b-lmussrtww0] {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    color: var(--signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.profile-hero-kicker-line[b-lmussrtww0] {
    width: 36px;
    height: 1px;
    background: var(--signal);
}

.profile-hero-title[b-lmussrtww0] {
    margin: 0 0 14px;
    font-family: Inter, sans-serif;
    font-size: clamp(2.6rem, 8vw, 5.5rem);
    font-weight: 600;
    line-height: 0.94;
    letter-spacing: -0.04em;
    color: var(--ink);
}

.profile-hero-dot[b-lmussrtww0] {
    color: var(--signal);
}

.profile-hero-subtitle[b-lmussrtww0] {
    max-width: 540px;
    margin: 0;
    color: var(--gray-muted);
    font-size: 1rem;
    line-height: 1.55;
    font-weight: 500;
}

/* ---------- Grid ---------- */

.profile-grid[b-lmussrtww0] {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-areas:
        "account units"
        "account actions";
    gap: 24px;
}

.profile-card-account[b-lmussrtww0] {
    grid-area: account;
}

.profile-card-units[b-lmussrtww0] {
    grid-area: units;
}

.profile-card-actions[b-lmussrtww0] {
    grid-area: actions;
}

@media (max-width: 900px) {
    .profile-grid[b-lmussrtww0] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "account"
            "units"
            "actions";
    }
}

/* ---------- Card ---------- */

.profile-card[b-lmussrtww0] {
    position: relative;
    padding: 32px 32px 28px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--card-surface);
    box-shadow: 0 18px 48px var(--card-shadow);
}

.profile-card[b-lmussrtww0]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 3px;
    background: var(--signal);
    border-radius: 4px 4px 0 0;
}

.profile-card-head[b-lmussrtww0] {
    margin-bottom: 22px;
}

.profile-card-kicker[b-lmussrtww0] {
    display: inline-block;
    color: var(--signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.profile-card-title[b-lmussrtww0] {
    margin: 0 0 6px;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.profile-card-desc[b-lmussrtww0] {
    margin: 0;
    color: var(--gray-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ---------- Avatar block ---------- */

.profile-avatar-block[b-lmussrtww0] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    margin-bottom: 22px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--paper);
}

.profile-avatar[b-lmussrtww0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--graphite);
    color: var(--paper);
    font-family: Inter, sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    border: 2px solid var(--signal);
}

.profile-avatar-meta[b-lmussrtww0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.profile-avatar-name[b-lmussrtww0] {
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-avatar-email[b-lmussrtww0] {
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Info list (definition list) ---------- */

.profile-info-list[b-lmussrtww0] {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.profile-info-row[b-lmussrtww0] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 20px;
    padding: 14px 0;
    border-top: 1px solid var(--gray-divider);
}

.profile-info-row:first-child[b-lmussrtww0] {
    border-top: 0;
    padding-top: 0;
}

.profile-info-label[b-lmussrtww0] {
    margin: 0;
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.profile-info-value[b-lmussrtww0] {
    margin: 0;
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

@media (max-width: 540px) {
    .profile-info-row[b-lmussrtww0] {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ---------- Unit toggle ---------- */

.profile-unit-toggle[b-lmussrtww0] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.profile-unit-option[b-lmussrtww0] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--paper);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.profile-unit-option:hover[b-lmussrtww0],
.profile-unit-option:focus-visible[b-lmussrtww0] {
    border-color: var(--ink);
    transform: translateY(-1px);
    outline: none;
}

.profile-unit-option.is-active[b-lmussrtww0] {
    border-color: var(--signal);
    background: var(--card-surface);
    box-shadow: 0 0 0 3px var(--signal-soft);
}

.profile-unit-option-mark[b-lmussrtww0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--card-border);
    background: var(--card-surface);
    color: var(--paper);
    font-size: 0.83rem;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.profile-unit-option.is-active .profile-unit-option-mark[b-lmussrtww0] {
    background: var(--signal);
    border-color: var(--signal);
}

.profile-unit-option-body[b-lmussrtww0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.profile-unit-option-title[b-lmussrtww0] {
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.profile-unit-option-desc[b-lmussrtww0] {
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

/* ---------- Action rows ---------- */

.profile-action-row[b-lmussrtww0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--gray-divider);
    margin: 0;
}

.profile-action-row:first-of-type[b-lmussrtww0] {
    border-top: 0;
    padding-top: 0;
}

.profile-action-info[b-lmussrtww0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.profile-action-title[b-lmussrtww0] {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.profile-action-desc[b-lmussrtww0] {
    color: var(--gray-muted);
    font-size: 0.85rem;
    line-height: 1.4;
}

.profile-action-btn[b-lmussrtww0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--card-surface);
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.profile-action-btn:hover[b-lmussrtww0],
.profile-action-btn:focus-visible[b-lmussrtww0] {
    border-color: var(--ink);
    transform: translateY(-1px);
    outline: none;
}

.profile-action-btn.is-disabled[b-lmussrtww0] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.profile-action-btn-danger[b-lmussrtww0] {
    border-color: var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger);
}

.profile-action-btn-danger:hover[b-lmussrtww0],
.profile-action-btn-danger:focus-visible[b-lmussrtww0] {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--paper);
}

@media (max-width: 540px) {
    .profile-action-row[b-lmussrtww0] {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-action-btn[b-lmussrtww0] {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .profile-page[b-lmussrtww0] {
        padding: 110px 16px 60px;
    }

    .profile-card[b-lmussrtww0] {
        padding: 24px 22px 20px;
    }

    .profile-avatar-block[b-lmussrtww0] {
        padding: 14px;
    }
}
/* /Components/Pages/Savjeti/CompatibilityCheck.razor.rz.scp.css */
/* `details.checker-numbers-panel` raises specificity past
   `.guide-faq:first-of-type { border-top: 0 }` from Guides.less, which was
   eating the top edge of our bordered card. */
details.checker-numbers-panel[b-ai0vcr0cbi] {
    margin-top: 16px;
    padding: 0;
    border: 1px solid var(--card-border, #d6d4ca);
    border-radius: 4px;
    background: var(--paper, #faf9f5);
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.checker-numbers-panel summary[b-ai0vcr0cbi] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--gray-divider, #e4e1d5);
    color: var(--ink, #0e0f10);
    font-weight: 700;
    transition: background-color 0.18s ease, color 0.18s ease;
}

/* Override base .guide-faq summary:hover (Guides.less). Heading stays ink so
   the row reads as a section title - only the +/− indicator and a subtle
   paper-warm wash on the summary itself signal that the row is clickable. */
.checker-numbers-panel summary:hover[b-ai0vcr0cbi],
.checker-numbers-panel summary:focus-visible[b-ai0vcr0cbi] {
    color: var(--ink, #0e0f10);
    background-color: var(--paper-warm, #f3f2ee);
}

.checker-numbers-panel:not([open]) summary[b-ai0vcr0cbi] {
    border-bottom-color: transparent;
}

.checker-numbers-body[b-ai0vcr0cbi] {
    padding: 14px 18px 18px;
}

.checker-numbers-example[b-ai0vcr0cbi] {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 4px;
    background: var(--paper, #faf9f5);
    border: 1px solid var(--gray-divider, #e4e1d5);
    font-size: 0.95rem;
    line-height: 1.55;
}

.checker-numbers-example code[b-ai0vcr0cbi] {
    font-family: var(--app-mono);
    font-weight: 700;
    color: var(--ink, #0e0f10);
}

.checker-numbers-tables[b-ai0vcr0cbi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.checker-numbers-table h3[b-ai0vcr0cbi] {
    margin: 0 0 8px;
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink, #0e0f10);
}

.checker-numbers-note[b-ai0vcr0cbi] {
    margin: 14px 0 0;
    padding: 10px 14px;
    border-left: 3px solid var(--gray-divider, #e4e1d5);
    background: var(--paper, #faf9f5);
    font-size: 0.88rem;
    color: var(--gray-muted, #8a8a82);
    line-height: 1.55;
}

@media (max-width: 767.98px) {
    .checker-numbers-tables[b-ai0vcr0cbi] {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}
/* /Components/Pages/Savjeti/SavjetiIndex.razor.rz.scp.css */
.savjeti-page[b-l1sxz1cj1u] {
    --paper: #faf9f5;
    --paper-warm: #f3f2ee;
    --ink: #0e0f10;
    --signal: #d94a1f;
    --gray-muted: #8a8a82;
    --gray-faint: #d6d4ca;
    --gray-divider: #e4e1d5;
    --card-surface: #ffffff;
    --card-border: #d6d4ca;

    font-family: Inter, sans-serif;
    padding: 110px 0 80px;
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
}

.savjeti-shell[b-l1sxz1cj1u] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 32px;
}

.savjeti-hero[b-l1sxz1cj1u] {
    padding: 48px 0 36px;
    border-bottom: 1px solid var(--gray-divider);
    margin-bottom: 40px;
}

.savjeti-kicker[b-l1sxz1cj1u] {
    display: inline-block;
    color: var(--signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.savjeti-title[b-l1sxz1cj1u] {
    margin: 0 0 16px;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: clamp(2rem, 6vw, 3.6rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.savjeti-dot[b-l1sxz1cj1u] {
    color: var(--signal);
    opacity: 0.45;
}

.savjeti-lead[b-l1sxz1cj1u] {
    margin: 0;
    color: var(--gray-muted);
    font-size: 1.08rem;
    line-height: 1.6;
    max-width: 680px;
}

.savjeti-list[b-l1sxz1cj1u] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.savjeti-card[b-l1sxz1cj1u] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 4px 20px;
    padding: 24px 26px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--card-surface);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.savjeti-card:hover[b-l1sxz1cj1u],
.savjeti-card:focus-visible[b-l1sxz1cj1u] {
    transform: translateY(-2px);
    border-color: var(--signal);
    box-shadow: 0 14px 28px rgba(14, 15, 16, 0.1);
}

.savjeti-card-tag[b-l1sxz1cj1u] {
    grid-column: 1 / -1;
    color: var(--signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.savjeti-card-title[b-l1sxz1cj1u] {
    grid-column: 1;
    margin: 0;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.savjeti-card-excerpt[b-l1sxz1cj1u] {
    grid-column: 1;
    margin: 0;
    color: var(--gray-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.savjeti-card-cta[b-l1sxz1cj1u] {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: end;
    color: var(--signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .savjeti-shell[b-l1sxz1cj1u] {
        padding: 0 20px;
    }

    .savjeti-card[b-l1sxz1cj1u] {
        grid-template-columns: 1fr;
    }

    .savjeti-card-cta[b-l1sxz1cj1u] {
        grid-column: 1;
        grid-row: auto;
        margin-top: 10px;
    }
}
/* /Components/Pages/Vehicles/Make/Make.razor.rz.scp.css */
.vehicles-page[b-a14e692iwq] {
    --paper: #faf9f5;
    --paper-warm: #f3f2ee;
    --ink: #0e0f10;
    --signal: #d94a1f;
    --signal-soft: rgba(217, 74, 31, 0.12);
    --gray-muted: #8a8a82;
    --gray-faint: #d6d4ca;
    --gray-divider: #e4e1d5;

    --card-surface: #ffffff;
    --card-border: #d6d4ca;
    --card-shadow: rgba(14, 15, 16, 0.08);

    font-family: Inter, sans-serif;
    padding: 79px 0 40px;
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
}

.vehicles-page-shell[b-a14e692iwq] {
    max-width: 1200px;
}

/* breadcrumb styles live in Components/Shared/PageBreadcrumb.razor.css */

/* back link */

.vehicles-back-link-row[b-a14e692iwq] {
    padding-top: 12px;
}

.vehicles-back-link[b-a14e692iwq] {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1rem;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card-surface);
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.vehicles-back-link:hover[b-a14e692iwq],
.vehicles-back-link:focus[b-a14e692iwq],
.vehicles-back-link:active[b-a14e692iwq] {
    border-color: var(--signal);
    background: var(--ink);
    color: var(--paper) !important;
    box-shadow: none;
    transform: translateY(-1px);
}

.vehicles-back-link i[b-a14e692iwq] {
    color: inherit !important;
}

/* page header - Kalibar style big title */

.vehicles-page-header-card[b-a14e692iwq] {
    margin-top: 32px;
    padding: 40px 0 24px;
    border-bottom: 1px solid var(--gray-divider);
}

.vehicles-page-header-card h1[b-a14e692iwq] {
    margin: 0 0 8px;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.vehicles-page-header-card p[b-a14e692iwq] {
    margin: 8px 0 0;
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* models section */

.vehicles-models-section[b-a14e692iwq] {
    margin-top: 24px;
}

.vehicles-models-search[b-a14e692iwq] {
    max-width: 440px;
    margin-bottom: 28px;
}

.vehicles-makes-search-input-wrap[b-a14e692iwq] {
    position: relative;
    max-width: 440px;
}

.vehicles-makes-search-input-wrap i[b-a14e692iwq] {
    position: absolute;
    top: 50%;
    left: 18px;
    color: var(--gray-muted);
    font-size: 0.9rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.vehicles-makes-search-input[b-a14e692iwq] {
    min-height: 48px;
    padding: 0 18px 0 46px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card-surface);
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 500;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vehicles-makes-search-input[b-a14e692iwq]::placeholder {
    color: var(--gray-muted);
}

.vehicles-makes-search-input:focus[b-a14e692iwq] {
    border-color: var(--signal);
    box-shadow: 0 0 0 3px var(--signal-soft);
    outline: none;
}

.vehicles-models-grid[b-a14e692iwq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
    max-width: none;
}

/* model card */

.vehicles-model-card[b-a14e692iwq] {
    position: relative;
    display: block;
    width: 100%;
    min-height: 112px;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--card-surface);
    box-shadow: none;
    text-decoration: none;
    transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.vehicles-model-card:hover[b-a14e692iwq],
.vehicles-model-card:focus-visible[b-a14e692iwq] {
    transform: translateY(-2px);
    border-color: var(--signal);
    box-shadow: 0 14px 32px var(--card-shadow);
}

.vehicles-model-card:hover .vehicles-model-card-image[b-a14e692iwq],
.vehicles-model-card:focus-visible .vehicles-model-card-image[b-a14e692iwq] {
    opacity: 1;
    filter: none;
}

.vehicles-model-card-media[b-a14e692iwq] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44%;
    min-width: 168px;
    max-width: 220px;
    overflow: hidden;
    background: transparent;
    z-index: 0;
}

.vehicles-model-card-media[b-a14e692iwq]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, var(--card-surface) 0, rgba(255, 255, 255, 0.92) 12%, rgba(255, 255, 255, 0) 30%);
}

.vehicles-model-card-image[b-a14e692iwq] {
    position: absolute;
    top: 50%;
    left: 2px;
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
    opacity: 0.92;
    filter: grayscale(1) saturate(0) contrast(1.02);
    transition: filter 0.22s ease, opacity 0.22s ease;
    transform: translateY(-50%) scale(1.18);
    transform-origin: left center;
}

/* Silhouette fallback: a model with no image of its own borrows the make's
   first available car image, knocked down to a faint ghost so the actual model
   can't be read - just a generic "car" hint. Uses grayscale + low opacity (NOT
   brightness(0)): an opaque photo's white background simply blends into the
   page at low opacity, whereas brightness(0) would turn that white into a solid
   black/grey block. Works for both transparent local bodies and opaque photos.
   Overrides the base filter + the hover brighten so it stays faint in every state. */
.vehicles-model-card-image.vehicles-model-card-image-silhouette[b-a14e692iwq],
.vehicles-model-card:hover .vehicles-model-card-image-silhouette[b-a14e692iwq],
.vehicles-model-card:focus-visible .vehicles-model-card-image-silhouette[b-a14e692iwq] {
    filter: grayscale(1) blur(0.6px) !important;
    opacity: 0.16 !important;
}

.vehicles-model-card-body[b-a14e692iwq] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px 24px;
    position: relative;
    z-index: 2;
}

.vehicles-model-card-has-image .vehicles-model-card-body[b-a14e692iwq] {
    padding-right: 200px;
}

.vehicles-model-name[b-a14e692iwq] {
    margin: 0;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.vehicles-model-meta[b-a14e692iwq] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 8px;
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
}

.vehicles-model-years[b-a14e692iwq],
.vehicles-model-engines[b-a14e692iwq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.vehicles-model-years i[b-a14e692iwq],
.vehicles-model-engines i[b-a14e692iwq] {
    color: var(--signal);
    font-size: 0.88rem;
}

.vehicles-empty-state[b-a14e692iwq] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 128px;
    margin-bottom: 24px;
    padding: 24px;
    border: 1px dashed var(--card-border);
    border-radius: 10px;
    background: transparent;
    color: var(--gray-muted);
    font-size: 0.92rem;
    font-weight: 500;
    text-align: center;
}

@media (max-width: 1199.98px) {
    .vehicles-make-page .vehicles-page-shell[b-a14e692iwq] {
        max-width: 100%;
    }

    .vehicles-models-grid[b-a14e692iwq] {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    .vehicles-page[b-a14e692iwq] {
        padding-top: 72px;
    }

    .vehicles-page-header-card[b-a14e692iwq] {
        padding: 24px 0 16px;
    }

    /* Model cards stack one per row on mobile (unlike make tiles which go
       2-3 per row). Reason: models often have no body image yet, so a
       narrow square cell collapses to just a single letter + cut-off year
       range. Full-width horizontal rows give the name room to breathe and
       keep meta (years, engine count) readable. */
    .vehicles-models-grid[b-a14e692iwq] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .vehicles-model-card[b-a14e692iwq] {
        flex-direction: row;
        min-height: 96px;
        overflow: hidden;
    }

    .vehicles-model-card-media[b-a14e692iwq] {
        flex: 0 0 35%;
        max-width: 140px;
        min-width: 110px;
        aspect-ratio: auto;
    }

    .vehicles-model-card-image[b-a14e692iwq] {
        left: -4px;
        transform: translateY(-50%) scale(1.1);
    }

    .vehicles-model-card-body[b-a14e692iwq] {
        flex: 1 1 auto;
        padding: 12px 14px;
        min-width: 0;
    }

    /* Fixed px text + ellipsis truncation so a +50% a11y scale (or a very
       long model name like "Vito 119 CDI Tourer Mixto-L") doesn't overflow
       the card or push other rows off. */
    .vehicles-model-name[b-a14e692iwq] {
        font-size: 16px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vehicles-model-meta[b-a14e692iwq] {
        flex-wrap: wrap;
        gap: 8px 14px;
        font-size: 12px;
    }

    .vehicles-model-years[b-a14e692iwq],
    .vehicles-model-engines[b-a14e692iwq] {
        white-space: nowrap;
    }

    .vehicles-model-card-body[b-a14e692iwq] {
        padding: 18px 20px;
    }

    .vehicles-model-card-has-image .vehicles-model-card-body[b-a14e692iwq] {
        padding-right: 140px;
    }

    .vehicles-model-meta[b-a14e692iwq] {
        flex-direction: column;
        gap: 6px;
    }
}

.vehicles-page-intro[b-a14e692iwq] {
    margin: 14px 0 0;
    color: var(--gray-muted, #8a8a82);
    font-size: 0.95rem;
    line-height: 1.65;
    max-width: 720px;
}

.vehicles-related-makes[b-a14e692iwq] {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--gray-divider, #e4e1d5);
}

.vehicles-related-makes-title[b-a14e692iwq] {
    margin: 0 0 16px;
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--signal, #d94a1f);
}

.vehicles-related-makes-grid[b-a14e692iwq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.vehicles-related-make-chip[b-a14e692iwq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--card-border, #d6d4ca);
    border-radius: 4px;
    background: var(--card-surface, #ffffff);
    color: var(--ink, #0e0f10);
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.vehicles-related-make-chip:hover[b-a14e692iwq],
.vehicles-related-make-chip:focus-visible[b-a14e692iwq] {
    transform: translateY(-2px);
    border-color: var(--ink, #0e0f10);
    box-shadow: 0 8px 22px rgba(14, 15, 16, 0.08);
    outline: none;
}

.vehicles-related-make-name[b-a14e692iwq] {
    font-family: Inter, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.vehicles-related-make-count[b-a14e692iwq] {
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-muted, #8a8a82);
}
/* /Components/Pages/Vehicles/Model/Model.razor.rz.scp.css */
.vehicles-cross-make[b-1i0hnutsze] {
    margin-top: 28px;
    padding: 22px 24px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--card-surface);
}

.vehicles-cross-make-title[b-1i0hnutsze] {
    margin: 0 0 6px;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.vehicles-cross-make-lead[b-1i0hnutsze] {
    margin: 0 0 14px;
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    letter-spacing: 0.04em;
}

.vehicles-cross-make-grid[b-1i0hnutsze] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.vehicles-cross-make-chip[b-1i0hnutsze] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.vehicles-cross-make-chip:hover[b-1i0hnutsze],
.vehicles-cross-make-chip:focus-visible[b-1i0hnutsze] {
    border-color: var(--signal);
    background: var(--ink);
    color: var(--paper);
    transform: translateY(-2px);
    outline: none;
    text-decoration: none;
}

.vehicles-cross-make-chip-make[b-1i0hnutsze] {
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--signal);
}

.vehicles-cross-make-chip-name[b-1i0hnutsze] {
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.vehicles-cross-make-chip-meta[b-1i0hnutsze] {
    font-family: var(--app-mono);
    font-size: 0.83rem;
    color: var(--gray-muted);
}

.vehicles-cross-make-chip:hover .vehicles-cross-make-chip-meta[b-1i0hnutsze],
.vehicles-cross-make-chip:focus-visible .vehicles-cross-make-chip-meta[b-1i0hnutsze] {
    color: var(--paper);
}

.vehicles-citable-overview[b-1i0hnutsze] {
    margin-top: 20px;
    padding: 20px 24px;
    border-left: 3px solid var(--signal);
    border-radius: 0 12px 12px 0;
    background: var(--paper-warm);
}

.vehicles-citable-overview p[b-1i0hnutsze] {
    margin: 0;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -0.005em;
}

.vehicles-year-adjacency[b-1i0hnutsze] {
    margin-top: 28px;
    padding: 18px 20px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--card-surface);
}

.vehicles-year-adjacency-title[b-1i0hnutsze] {
    margin: 0 0 12px;
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-muted);
}

.vehicles-year-adjacency-chips[b-1i0hnutsze] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vehicles-year-adjacency-chip[b-1i0hnutsze] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.vehicles-year-adjacency-chip:hover[b-1i0hnutsze],
.vehicles-year-adjacency-chip:focus-visible[b-1i0hnutsze] {
    border-color: var(--signal);
    background: var(--ink);
    color: var(--paper);
    transform: translateY(-1px);
    outline: none;
}

.vehicles-year-adjacency-chip.is-parent[b-1i0hnutsze] {
    background: var(--signal-soft);
    border-color: transparent;
    color: var(--signal);
}

.vehicles-page[b-1i0hnutsze] {
    /* All shared tokens come from Variables.less :root. */
    font-family: Inter, sans-serif;
    padding: 79px 0 40px;
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
}

.vehicles-page-shell[b-1i0hnutsze] {
    max-width: 1200px;
}

/* breadcrumb styles live in Components/Shared/PageBreadcrumb.razor.css */

/* back link */

.vehicles-back-link-row[b-1i0hnutsze] {
    padding-top: 12px;
}

.vehicles-back-link[b-1i0hnutsze] {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1rem;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card-surface);
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.vehicles-back-link:hover[b-1i0hnutsze],
.vehicles-back-link:focus[b-1i0hnutsze],
.vehicles-back-link:active[b-1i0hnutsze] {
    border-color: var(--signal);
    background: var(--ink);
    color: var(--paper) !important;
    transform: translateY(-1px);
}

.vehicles-back-link i[b-1i0hnutsze] {
    color: inherit !important;
}

/* page header */

.vehicles-page-header-card[b-1i0hnutsze] {
    margin-top: 24px;
    padding: 32px 0 20px;
    border-bottom: 1px solid var(--gray-divider);
}

.vehicles-page-header-card-compact[b-1i0hnutsze] {
    padding-bottom: 16px;
}

.vehicles-page-header-card h1[b-1i0hnutsze] {
    margin: 0;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.vehicles-page-header-card p[b-1i0hnutsze] {
    margin: 12px 0 0;
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.vehicles-meta-divider[b-1i0hnutsze] {
    display: inline-block;
    margin: 0 8px;
    color: var(--gray-faint);
}

/* quick filters: season tabs + year pills */

.vehicles-quick-filters[b-1i0hnutsze] {
    --signal: #d94a1f;
    --signal-soft: rgba(217, 74, 31, 0.12);
    --ink: #0e0f10;
    --gray-faint: #d6d4ca;
    --card-surface: #ffffff;
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vehicles-season-tabs[b-1i0hnutsze] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.vehicles-season-tab[b-1i0hnutsze] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 12px;
    border: 1px solid var(--gray-faint);
    border-radius: 4px;
    background: var(--card-surface);
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.vehicles-season-tab i[b-1i0hnutsze] {
    font-size: 1rem;
    opacity: 0.85;
}

.vehicles-season-tab:hover[b-1i0hnutsze] {
    border-color: var(--ink);
    transform: translateY(-1px);
}

.vehicles-season-tab.is-active[b-1i0hnutsze] {
    background: var(--ink);
    border-color: var(--ink);
    color: #faf9f5;
    box-shadow: inset 0 -2px 0 var(--signal);
}

.vehicles-season-tab.is-active i[b-1i0hnutsze] {
    color: var(--signal);
    opacity: 1;
}

.vehicles-year-pills[b-1i0hnutsze] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--gray-faint);
    border-radius: 4px;
    background: var(--card-surface);
}

.vehicles-year-pill[b-1i0hnutsze] {
    min-width: 56px;
    padding: 7px 14px;
    border: 1px solid var(--gray-faint);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.vehicles-year-pill:hover[b-1i0hnutsze] {
    border-color: var(--signal);
    color: var(--signal);
}

.vehicles-year-pill.is-active[b-1i0hnutsze] {
    background: var(--signal);
    border-color: var(--signal);
    color: #faf9f5;
}

@media (max-width: 720px) {
    .vehicles-season-tabs[b-1i0hnutsze] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* filter / size / items sections */

.vehicles-filter-card[b-1i0hnutsze],
.vehicles-size-section[b-1i0hnutsze],
.vehicles-compatible-items-section[b-1i0hnutsze],
.vehicles-selected-size-section[b-1i0hnutsze] {
    margin-top: 28px;
    padding: 28px;
    border: 1px solid var(--section-border);
    border-radius: 12px;
    background: var(--card-surface);
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .vehicles-filter-card[b-1i0hnutsze],
    .vehicles-size-section[b-1i0hnutsze],
    .vehicles-compatible-items-section[b-1i0hnutsze],
    .vehicles-selected-size-section[b-1i0hnutsze] {
        margin-top: 20px;
        padding: 18px 16px;
        border-radius: 10px;
    }
}

.vehicles-filter-card-title[b-1i0hnutsze],
.vehicles-size-section h2[b-1i0hnutsze],
.vehicles-compatible-items-section h2[b-1i0hnutsze],
.vehicles-selected-size-section h2[b-1i0hnutsze] {
    margin: 0 0 18px;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* QA fix M3: Compatible Sizes empty-state - renders when neither factory nor
   alternative size lists have rows. Previously the section header sat alone
   with no body, which looked like a render glitch. */
.vehicles-size-empty[b-1i0hnutsze] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 24px;
    border: 1px dashed var(--card-border, #d6d4ca);
    border-radius: 8px;
    background: var(--paper-warm, #f3f2ee);
    color: var(--ink);
    text-align: center;
}

.vehicles-size-empty i[b-1i0hnutsze] {
    font-size: 1.6rem;
    color: var(--signal, #d94a1f);
}

.vehicles-size-empty p[b-1i0hnutsze] {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
}

.vehicles-size-empty-hint[b-1i0hnutsze] {
    color: var(--gray-muted, #8a8a82);
    font-weight: 400 !important;
}

.vehicles-filter-form[b-1i0hnutsze] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: end;
}

.vehicles-finder-field label[b-1i0hnutsze] {
    display: block;
    margin-bottom: 8px;
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* selected size specs */

.vehicles-selected-size-grid[b-1i0hnutsze] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.vehicles-selected-size-spec[b-1i0hnutsze] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
}

.vehicles-selected-size-spec-label[b-1i0hnutsze] {
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: help;
}

.vehicles-selected-size-spec-label i[b-1i0hnutsze] {
    color: var(--signal);
    margin-left: 4px;
    font-size: 0.83rem;
}

.vehicles-selected-size-spec strong[b-1i0hnutsze] {
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.vehicles-pressure-toggle[b-1i0hnutsze] {
    display: inline-flex;
    gap: 4px;
    margin: 4px 0;
}

.vehicles-pressure-unit-btn[b-1i0hnutsze] {
    appearance: none;
    border: 1px solid var(--card-border);
    background: var(--card-surface);
    color: var(--gray-muted);
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vehicles-pressure-unit-btn:hover[b-1i0hnutsze] {
    border-color: var(--signal);
    color: var(--signal);
}

.vehicles-pressure-unit-btn.is-active[b-1i0hnutsze] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* size groups */

.vehicles-size-group + .vehicles-size-group[b-1i0hnutsze] {
    margin-top: 24px;
}

.vehicles-size-group-title[b-1i0hnutsze] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vehicles-size-group-title i[b-1i0hnutsze] {
    color: var(--signal);
}

.vehicles-sizes-grid[b-1i0hnutsze] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vehicles-size-card[b-1i0hnutsze] {
    appearance: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-width: 180px;
    min-height: 90px;
    padding: 16px 18px 14px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card-surface);
    box-shadow: none;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.vehicles-size-card:hover[b-1i0hnutsze],
.vehicles-size-card:focus-visible[b-1i0hnutsze] {
    transform: translateY(-2px);
    border-color: var(--signal);
}

.vehicles-size-card.is-selected[b-1i0hnutsze] {
    border-color: var(--ink);
    background: var(--paper-warm);
}

.vehicles-size-card-oem[b-1i0hnutsze] {
    border-color: var(--oem);
    background: var(--oem-soft);
}

.vehicles-size-card-oem.is-selected[b-1i0hnutsze] {
    border-color: var(--oem);
    background: rgba(40, 160, 106, 0.18);
}

.vehicles-size-card-dimension[b-1i0hnutsze] {
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.vehicles-size-card-meta[b-1i0hnutsze] {
    margin-top: 6px;
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vehicles-size-card-meta.is-empty[b-1i0hnutsze] {
    color: var(--danger);
}

/* compatible items grid layout lives in
   wwwroot/css/pages/tyre-card-hover.css (single owner - column count,
   gaps + overlay-on-hover behavior all anchored there). This file only
   declares card-internal visuals below. */

.vehicle-compatible-item-card[b-1i0hnutsze] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 184px;
    padding: 20px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--card-surface);
    box-shadow: none;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.vehicle-compatible-item-card-media[b-1i0hnutsze] {
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: -4px 0 14px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--signal);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    background: var(--paper-warm, #f3f2ee);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vehicle-compatible-item-card-media img[b-1i0hnutsze] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.32s ease;
}

.vehicle-compatible-item-card:hover .vehicle-compatible-item-card-media img[b-1i0hnutsze],
.vehicle-compatible-item-card:focus-visible .vehicle-compatible-item-card-media img[b-1i0hnutsze] {
    transform: scale(1.04);
}

@media (max-width: 575.98px) {
    .vehicle-compatible-item-card[b-1i0hnutsze] {
        padding: 16px;
        min-height: auto;
        gap: 10px;
    }
    .vehicle-compatible-item-card-title[b-1i0hnutsze] {
        font-size: 1.1rem;
    }
    .vehicle-compatible-item-card-price strong[b-1i0hnutsze] {
        font-size: 1.25rem;
    }
}

.vehicle-compatible-item-card:hover[b-1i0hnutsze],
.vehicle-compatible-item-card:focus-visible[b-1i0hnutsze] {
    transform: translateY(-2px);
    border-color: var(--signal);
    box-shadow: 0 14px 32px var(--card-shadow);
    outline: none;
    text-decoration: none;
    color: inherit;
}

.vehicle-compatible-item-card-title[b-1i0hnutsze] {
    transition: color 0.2s ease;
}

.vehicle-compatible-item-card:hover .vehicle-compatible-item-card-title[b-1i0hnutsze],
.vehicle-compatible-item-card:focus-visible .vehicle-compatible-item-card-title[b-1i0hnutsze] {
    color: var(--signal);
}

.vehicle-compatible-item-card-cta[b-1i0hnutsze] {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--gray-divider);
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.22s ease;
}

.vehicle-compatible-item-card:hover .vehicle-compatible-item-card-cta[b-1i0hnutsze],
.vehicle-compatible-item-card:focus-visible .vehicle-compatible-item-card-cta[b-1i0hnutsze] {
    color: var(--signal);
}

.vehicle-compatible-item-card-cta i[b-1i0hnutsze] {
    font-size: 0.83rem;
}

.vehicle-compatible-item-card-top[b-1i0hnutsze] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.vehicle-compatible-item-card-type[b-1i0hnutsze] {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--signal-soft);
    color: var(--signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vehicle-compatible-item-card-brand[b-1i0hnutsze] {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* .vehicle-compatible-item-card-subtitle floating dimension chip - see
   tyre-card-hover.css (single owner). */

.vehicle-compatible-item-card-price[b-1i0hnutsze] {
    margin-top: 4px;
    color: var(--ink);
}

/* Price-strong typography (font-family + size + weight) lives in
   tyre-card-hover.css - applies to both items + model pages. */

.vehicle-compatible-item-card-stock[b-1i0hnutsze] {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.vehicle-compatible-item-card-stock.is-available[b-1i0hnutsze] {
    background: var(--oem-soft);
    color: var(--oem);
}

.vehicle-compatible-item-card-stock.is-empty[b-1i0hnutsze] {
    background: var(--danger-soft);
    color: var(--danger);
}

.vehicle-compatible-item-card-title[b-1i0hnutsze] {
    margin: 0;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.vehicle-compatible-item-card-flags[b-1i0hnutsze] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vehicle-compatible-item-card-compat[b-1i0hnutsze] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vehicle-compatible-item-card-compat.is-ok[b-1i0hnutsze] {
    background: var(--oem-soft);
    color: var(--oem);
}

.vehicle-compatible-item-card-compat.is-below[b-1i0hnutsze] {
    background: var(--danger-soft);
    color: var(--danger);
}

.vehicle-compatible-item-card-flag[b-1i0hnutsze] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: help;
}

.vehicle-compatible-item-card-flag.is-xl[b-1i0hnutsze] {
    background: var(--signal-soft);
    color: var(--signal);
}

.vehicle-compatible-item-card-flag.is-rft[b-1i0hnutsze] {
    background: rgba(217, 74, 31, 0.22);
    color: var(--signal);
}

.vehicle-compatible-item-card-flag.is-season-summer[b-1i0hnutsze] {
    background: rgba(217, 74, 31, 0.14);
    color: var(--signal);
}

.vehicle-compatible-item-card-flag.is-season-winter[b-1i0hnutsze] {
    background: rgba(147, 197, 253, 0.18);
    color: #1e3a8a;
}

.vehicle-compatible-item-card-flag.is-season-allseason[b-1i0hnutsze] {
    background: rgba(138, 138, 130, 0.18);
    color: var(--ink);
}

.vehicle-compatible-item-card-specs[b-1i0hnutsze] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    margin-top: auto;
    max-width: 175px;
}

.vehicle-compatible-item-card-spec[b-1i0hnutsze] {
    display: grid;
    grid-template-columns: 18px auto;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    background: transparent;
    color: var(--ink);
}

.vehicle-compatible-item-card-spec > i[b-1i0hnutsze] {
    grid-column: 1;
    width: 18px;
    color: var(--signal);
    font-size: 0.85rem;
    text-align: center;
}

.vehicle-compatible-item-card-spec > strong[b-1i0hnutsze] {
    grid-column: 2;
}

.vehicle-compatible-item-card-spec strong[b-1i0hnutsze] {
    font-family: Inter, sans-serif;
    font-size: 0.83rem;
    font-weight: 600;
    line-height: 1.15;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.vehicle-compatible-item-card-spec-sub[b-1i0hnutsze] {
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.vehicle-compatible-item-card-spec-label[b-1i0hnutsze] {
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* FAQ section */

.model-faq[b-1i0hnutsze] {
    margin-top: 40px;
    padding: 28px;
    border: 1px solid var(--section-border);
    border-radius: 12px;
    background: var(--card-surface);
}

.model-faq h2[b-1i0hnutsze] {
    margin: 0 0 18px;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.model-faq-item[b-1i0hnutsze] {
    padding: 14px 0;
    border-top: 1px solid var(--gray-divider);
}

.model-faq-item:first-of-type[b-1i0hnutsze] {
    border-top: 0;
    padding-top: 0;
}

.model-faq-item summary[b-1i0hnutsze] {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    padding: 6px 0;
}

.model-faq-item summary[b-1i0hnutsze]::-webkit-details-marker {
    display: none;
}

.model-faq-item summary[b-1i0hnutsze]::after {
    content: "+";
    color: var(--signal);
    font-size: 1.2rem;
    font-weight: 600;
    transition: transform 0.2s ease;
}

.model-faq-item[open] summary[b-1i0hnutsze]::after {
    content: "-";
}

.model-faq-item p[b-1i0hnutsze] {
    margin: 8px 0 4px;
    color: var(--gray-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* empty state */

.vehicles-empty-state[b-1i0hnutsze] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 128px;
    margin-bottom: 24px;
    padding: 24px;
    border: 1px dashed var(--card-border);
    border-radius: 10px;
    background: transparent;
    color: var(--gray-muted);
    font-size: 0.92rem;
    font-weight: 500;
    text-align: center;
}

@media (max-width: 767.98px) {
    .vehicles-page[b-1i0hnutsze] {
        padding-top: 72px;
    }

    .vehicles-filter-card[b-1i0hnutsze],
    .vehicles-size-section[b-1i0hnutsze],
    .vehicles-compatible-items-section[b-1i0hnutsze],
    .vehicles-selected-size-section[b-1i0hnutsze] {
        padding: 20px 18px;
        border-radius: 10px;
    }

    .vehicles-filter-form[b-1i0hnutsze] {
        grid-template-columns: 1fr;
    }

    .vehicles-size-card[b-1i0hnutsze] {
        width: 100%;
        min-width: 0;
    }

    /* .vehicles-compatible-items-grid mobile single-column override lives
       in tyre-card-hover.css (single owner). */

    .vehicles-page-header-card[b-1i0hnutsze] {
        padding: 20px 0 12px;
    }
}

.vehicles-page-intro[b-1i0hnutsze] {
    margin: 14px 0 0;
    color: var(--gray-muted, #8a8a82);
    font-size: 0.95rem;
    line-height: 1.65;
    max-width: 720px;
}

.vehicles-related-models[b-1i0hnutsze] {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--gray-divider, #e4e1d5);
}

.vehicles-related-models-title[b-1i0hnutsze] {
    margin: 0 0 16px;
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--signal, #d94a1f);
}

.vehicles-related-models-grid[b-1i0hnutsze] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.vehicles-related-model-chip[b-1i0hnutsze] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--card-border, #d6d4ca);
    border-radius: 4px;
    background: var(--card-surface, #ffffff);
    color: var(--ink, #0e0f10);
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.vehicles-related-model-chip:hover[b-1i0hnutsze],
.vehicles-related-model-chip:focus-visible[b-1i0hnutsze] {
    transform: translateY(-2px);
    border-color: var(--ink, #0e0f10);
    box-shadow: 0 8px 22px rgba(14, 15, 16, 0.08);
    outline: none;
}

.vehicles-related-model-name[b-1i0hnutsze] {
    font-family: Inter, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.vehicles-related-model-meta[b-1i0hnutsze] {
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-muted, #8a8a82);
}

.vehicles-model-header-grid[b-1i0hnutsze] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
}

.vehicles-model-header-text[b-1i0hnutsze] {
    min-width: 0;
}

.vehicles-model-header-text h1[b-1i0hnutsze] {
    margin: 0 0 14px;
}

.vehicles-model-header-title-dot[b-1i0hnutsze] {
    /* QA fix C6: signal-orange `;` on short titles ("Volkswagen Golf;") was
       flagged as looking like a typo. Mute opacity on non-hero headings -
       the brand-signal punch is reserved for the home hero `;` only. */
    color: var(--signal);
    opacity: 0.45;
    margin-left: 2px;
}

.vehicles-model-header-text p[b-1i0hnutsze] {
    margin-top: 6px;
}

.vehicles-model-header-visual[b-1i0hnutsze] {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    background: transparent;
}

.vehicles-model-header-logo[b-1i0hnutsze] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.vehicles-model-header-logo img[b-1i0hnutsze] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(0.7) contrast(1.05);
    transition: filter 0.25s ease;
}

.vehicles-model-header-logo:hover img[b-1i0hnutsze] {
    filter: grayscale(0.1) contrast(1.15) drop-shadow(-1.25px 1.25px 0 #b83a15);
}

.vehicles-model-header-illu[b-1i0hnutsze] {
    flex-shrink: 0;
    width: 160px;
    height: auto;
    color: var(--gray-muted, #8a8a82);
    background: transparent;
}

.vehicles-model-header-illu svg[b-1i0hnutsze] {
    width: 100%;
    height: auto;
    display: block;
    background: transparent;
}

@media (max-width: 767.98px) {
    /* Mobile: keep two-column grid so logo stays right of title block.
       Title wraps in its column; visual collapses to 48px so it sits beside
       the heading without dominating the card. */
    .vehicles-model-header-grid[b-1i0hnutsze] {
        grid-template-columns: 1fr auto;
        align-items: start;
        gap: 14px;
    }

    .vehicles-model-header-visual[b-1i0hnutsze] {
        justify-self: end;
        align-self: start;
        gap: 8px;
        margin-top: 4px;
    }

    .vehicles-model-header-logo[b-1i0hnutsze] {
        width: 48px;
        height: 48px;
    }
}
/* /Components/Pages/Vehicles/Model/ModelCrossMakeCompetitors.razor.rz.scp.css */
.vehicles-cross-make[b-spy80jbz68] {
    margin: 40px 0 0;
    padding: 28px 0 0;
    border-top: 1px solid var(--gray-divider);
}

.vehicles-cross-make-title[b-spy80jbz68] {
    margin: 0 0 8px;
    font-family: Inter, sans-serif;
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.vehicles-cross-make-lead[b-spy80jbz68] {
    margin: 0 0 20px;
    max-width: 720px;
    color: var(--gray-muted);
    font-family: Inter, sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
}

.vehicles-cross-make-grid[b-spy80jbz68] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

/* Mirror the .vehicles-related-models card pattern so the section reads as
   part of the same family - same border, radius, hover, and typography. */
.vehicles-cross-make-chip[b-spy80jbz68] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--card-surface);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.vehicles-cross-make-chip[b-spy80jbz68]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: translateY(100%);
    transition: transform 0.25s ease;
    z-index: 0;
}

.vehicles-cross-make-chip > *[b-spy80jbz68] {
    position: relative;
    z-index: 1;
    transition: color 0.2s ease;
}

.vehicles-cross-make-chip:hover[b-spy80jbz68],
.vehicles-cross-make-chip:focus-visible[b-spy80jbz68] {
    border-color: var(--ink);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--card-shadow);
    outline: none;
}

.vehicles-cross-make-chip:hover[b-spy80jbz68]::before,
.vehicles-cross-make-chip:focus-visible[b-spy80jbz68]::before {
    transform: translateY(0);
}

.vehicles-cross-make-chip:hover > *[b-spy80jbz68],
.vehicles-cross-make-chip:focus-visible > *[b-spy80jbz68] {
    color: var(--paper);
}

.vehicles-cross-make-chip-make[b-spy80jbz68] {
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-muted);
}

.vehicles-cross-make-chip-name[b-spy80jbz68] {
    font-family: Inter, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.vehicles-cross-make-chip-meta[b-spy80jbz68] {
    font-family: var(--app-mono);
    font-size: 0.83rem;
    color: var(--gray-muted);
}

@media (max-width: 575.98px) {
    .vehicles-cross-make[b-spy80jbz68] {
        margin-top: 28px;
        padding-top: 20px;
    }

    .vehicles-cross-make-grid[b-spy80jbz68] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Vehicles/TyreFinderCard.razor.rz.scp.css */
/* Tyre dimension finder card - sister to the Vehicles finder card on the
   home page. Same square-editorial vocabulary (4px radius, signal accent,
   mono labels) so the two cards read as a pair. */
.tyre-finder-card[b-7eu7p5hb6g] {
    position: relative;
    /* Lower than .vehicles-finder-card (z-index: 20) so its dropdown popup
       can paint over this card when the user is still on the upper finder. */
    z-index: 10;
    margin: 0 0 56px;
    padding: 28px;
    border: 1px solid var(--card-border, #d6d4ca);
    border-radius: 4px;
    background: var(--card-surface, #ffffff);
    box-shadow: 0 10px 32px var(--card-shadow, rgba(14, 15, 16, 0.08));
}

.tyre-finder-card-head[b-7eu7p5hb6g] {
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tyre-finder-card-kicker[b-7eu7p5hb6g] {
    font-family: var(--app-mono, 'IBM Plex Mono', monospace);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signal, #d94a1f);
}

.tyre-finder-card-title[b-7eu7p5hb6g] {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: clamp(1.25rem, 2.4vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink, #0e0f10);
}

/* 5 dropdowns in one row, submit button on its own row below. Gives each
   dropdown enough width to breathe and matches the "naredba ispod" intent. */
.tyre-finder-form[b-7eu7p5hb6g] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.tyre-finder-field[b-7eu7p5hb6g] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tyre-finder-field label[b-7eu7p5hb6g] {
    font-family: var(--app-mono, 'IBM Plex Mono', monospace);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-muted, #8a8a82);
}

.tyre-finder-submit-row[b-7eu7p5hb6g] {
    grid-column: 1 / -1;
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

/* Outline-style "clear" sibling to the primary search button. Trash icon
   to signal "wipe filters" without dominating attention. */
.tyre-finder-clear[b-7eu7p5hb6g] {
    height: 56px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--card-border, #d6d4ca);
    border-radius: 4px;
    background: transparent;
    color: var(--ink, #0e0f10);
    font-family: var(--app-mono, monospace);
    font-size: 0.83rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.tyre-finder-clear:hover:not(:disabled)[b-7eu7p5hb6g],
.tyre-finder-clear:focus-visible:not(:disabled)[b-7eu7p5hb6g] {
    border-color: var(--signal, #d94a1f);
    color: var(--signal, #d94a1f);
    transform: translateY(-1px);
    outline: none;
}

.tyre-finder-clear:disabled[b-7eu7p5hb6g] {
    opacity: 0.45;
    cursor: not-allowed;
}

.tyre-finder-clear i[b-7eu7p5hb6g] {
    font-size: 0.85rem;
}

.tyre-finder-btn[b-7eu7p5hb6g] {
    /* min-height (not fixed height) + vertical padding + wrapping so a long
       label ("REIFEN FÜR FAHRZEUG SUCHEN") at +50% a11y scale grows the button
       vertically instead of spilling out the side/bottom. */
    min-height: 56px;
    min-width: 240px;
    padding: 8px 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 4px;
    background: var(--signal, #d94a1f);
    color: var(--paper, #faf9f5);
    font-family: var(--app-mono, 'IBM Plex Mono', monospace);
    font-size: 0.83rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-transform: uppercase;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.tyre-finder-btn:hover[b-7eu7p5hb6g],
.tyre-finder-btn:focus-visible[b-7eu7p5hb6g] {
    background: var(--ink, #0e0f10);
    transform: translateY(-1px);
    outline: none;
}

.tyre-finder-btn i[b-7eu7p5hb6g] {
    font-size: 0.95rem;
}

@media (max-width: 991.98px) {
    .tyre-finder-form[b-7eu7p5hb6g] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tyre-finder-submit-row[b-7eu7p5hb6g] {
        justify-content: stretch;
    }

    .tyre-finder-btn[b-7eu7p5hb6g] {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .tyre-finder-card[b-7eu7p5hb6g] {
        padding: 20px;
    }

    .tyre-finder-form[b-7eu7p5hb6g] {
        grid-template-columns: 1fr;
    }

    /* On narrow viewports stack submit + clear vertically. Search CTA on
       top so it stays the focal action; clear sits below as muted secondary. */
    .tyre-finder-submit-row[b-7eu7p5hb6g] {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 10px;
    }
    .tyre-finder-clear[b-7eu7p5hb6g],
    .tyre-finder-btn[b-7eu7p5hb6g] {
        width: 100%;
    }
}

/* A11y font-scale escape hatch: when the user picks +25% or +50% body scale,
   the buttons no longer fit side-by-side even at desktop widths. Stack them
   in a column so labels stay legible instead of getting crushed. */
:where(html.a11y-step-125, html.a11y-step-150) .tyre-finder-submit-row[b-7eu7p5hb6g] {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
}
:where(html.a11y-step-125, html.a11y-step-150) .tyre-finder-clear[b-7eu7p5hb6g],
:where(html.a11y-step-125, html.a11y-step-150) .tyre-finder-btn[b-7eu7p5hb6g] {
    width: 100%;
    min-width: 0;
}
/* /Components/Pages/Vehicles/Vehicles.razor.rz.scp.css */
.vehicles-page[b-z4sg0j5vw5] {
    --paper: #faf9f5;
    --paper-warm: #f3f2ee;
    --graphite: #0e0f10;
    --graphite-soft: #1a1b1c;
    --ink: #0e0f10;
    --signal: #d94a1f;
    --signal-soft: rgba(217, 74, 31, 0.14);
    --cream: #f3f2ee;
    --cream-muted: #a8a8a0;
    --gray-muted: #8a8a82;
    --gray-faint: #d6d4ca;
    --gray-divider: #e4e1d5;

    --card-surface: #ffffff;
    --card-border: #d6d4ca;
    --card-shadow: rgba(14, 15, 16, 0.08);

    --phase: var(--scroll-phase, 0);

    font-family: Inter, sans-serif;
    padding: 0 0 40px;
    min-height: 100vh;
    background-color: color-mix(in oklab, var(--graphite), var(--paper) calc(var(--phase) * 100%));
    color: color-mix(in oklab, var(--cream), var(--ink) calc(var(--phase) * 100%));
    transition: background-color 0.1s linear;
}

/* fallback for no color-mix support - static graphite then content */
@supports not (background: color-mix(in oklab, red, blue)) {
    .vehicles-page[b-z4sg0j5vw5] {
        background-color: var(--paper);
        color: var(--ink);
    }
}

/* --- breadcrumb fixed top-left, color adapts via phase --- */

.vehicles-breadcrumb-fixed[b-z4sg0j5vw5] {
    position: fixed;
    top: calc(var(--header-h, 60px) + 14px);
    left: 32px;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    font-family: var(--app-mono);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--cream-muted), var(--gray-muted) calc(var(--phase) * 100%));
    pointer-events: auto;
}

.vehicles-breadcrumb-link[b-z4sg0j5vw5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: color-mix(in oklab, var(--cream-muted), var(--gray-muted) calc(var(--phase) * 100%));
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.vehicles-breadcrumb-link i[b-z4sg0j5vw5] {
    color: inherit;
    font-size: 0.83rem;
}

.vehicles-breadcrumb-link:hover[b-z4sg0j5vw5],
.vehicles-breadcrumb-link:focus-visible[b-z4sg0j5vw5] {
    background: transparent;
    border: 0;
    color: var(--signal);
    transform: none;
}

.vehicles-breadcrumb-current[b-z4sg0j5vw5] {
    padding: 0;
    color: color-mix(in oklab, var(--cream), var(--ink) calc(var(--phase) * 100%));
    font-weight: 600;
}

.vehicles-breadcrumb-sep[b-z4sg0j5vw5] {
    color: var(--gray-muted);
    opacity: 0.5;
    font-weight: 400;
}

@media (max-width: 767.98px) {
    .vehicles-breadcrumb-fixed[b-z4sg0j5vw5] {
        top: 66px;
        left: 16px;
        font-size: 0.83rem;
    }
}

/* --- split hero: title left, finder card right, fills viewport, graphite bg --- */

.page-hero[b-z4sg0j5vw5] {
    position: relative;
    min-height: calc(100vh - 60px);
    background-color: color-mix(in oklab, var(--graphite), var(--paper) calc(var(--phase) * 100%));
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.1s linear;
}

/* fallback for no color-mix support - static graphite */
@supports not (background: color-mix(in oklab, red, blue)) {
    .page-hero[b-z4sg0j5vw5] {
        background-color: var(--graphite);
    }
}

.page-hero-grid[b-z4sg0j5vw5] {
    width: 100%;
    max-width: 1400px;
    padding: 0 56px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 480px;
    align-items: center;
    gap: 80px;
}

.page-hero-left[b-z4sg0j5vw5] {
    min-width: 0;
}

.page-hero-right[b-z4sg0j5vw5] {
    min-width: 0;
}

.page-hero-title[b-z4sg0j5vw5] {
    margin: 0 0 28px;
    color: color-mix(in oklab, var(--cream), var(--ink) calc(var(--phase) * 100%));
    font-family: Inter, sans-serif;
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 600;
    line-height: 0.94;
    letter-spacing: -0.05em;
    text-wrap: balance;
    /* Min-height locks the title block to the tallest phrase the typer will
       cycle through, so subtitle + finder card don't bounce when the line
       count changes during animation. */
    min-height: 1.88em;
}

.page-hero-dot[b-z4sg0j5vw5] {
    color: var(--signal);
}

.page-hero-subtitle[b-z4sg0j5vw5] {
    max-width: 480px;
    margin: 0 0 28px;
    color: color-mix(in oklab, var(--cream-muted), var(--gray-muted) calc(var(--phase) * 100%));
    font-family: Inter, sans-serif;
    font-size: 1.1rem;
    line-height: 1.55;
    font-weight: 400;
    letter-spacing: -0.005em;
}

.page-hero-browse[b-z4sg0j5vw5] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid color-mix(in oklab, var(--cream), var(--ink) calc(var(--phase) * 100%));
    color: color-mix(in oklab, var(--cream), var(--ink) calc(var(--phase) * 100%));
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.page-hero-browse:hover[b-z4sg0j5vw5],
.page-hero-browse:focus-visible[b-z4sg0j5vw5] {
    color: var(--signal);
    border-color: var(--signal);
}

.page-hero-browse-arrow[b-z4sg0j5vw5] {
    color: var(--signal);
    font-size: 0.95rem;
    line-height: 1;
}

/* --- content below hero on paper bg --- */

.vehicles-page-shell[b-z4sg0j5vw5] {
    max-width: 1200px;
    padding-top: 0;
}

#makes[b-z4sg0j5vw5] {
    scroll-margin-top: 84px;
}

/* finder card - clean editorial */

.vehicles-finder-card[b-z4sg0j5vw5] {
    position: relative;
    z-index: 20;
    margin: 0;
    padding: 24px 28px 28px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--card-surface);
    box-shadow: 0 16px 40px var(--card-shadow);
}

.vehicles-finder-form[b-z4sg0j5vw5] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vehicles-finder-field label[b-z4sg0j5vw5] {
    display: block;
    margin-bottom: 8px;
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.vehicles-finder-btn[b-z4sg0j5vw5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 60px;
    height: 60px;
    margin-top: 4px;
    padding: 0 24px;
    border: 0;
    border-radius: 4px !important;
    background: var(--signal);
    color: var(--paper);
    font-family: Inter, sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: none;
    transition: background-color 0.2s ease;
}

.vehicles-finder-btn:hover:not(:disabled)[b-z4sg0j5vw5],
.vehicles-finder-btn:focus-visible:not(:disabled)[b-z4sg0j5vw5] {
    transform: none;
    background: var(--graphite);
    box-shadow: none;
}

.vehicles-finder-btn:disabled[b-z4sg0j5vw5] {
    background: #b8b5a8;
    color: #5a5a52;
    box-shadow: none;
    cursor: not-allowed;
}

/* --- makes section --- */

.vehicles-makes-section[b-z4sg0j5vw5] {
    margin-top: 64px;
}

.vehicles-makes-title[b-z4sg0j5vw5] {
    margin: 0 0 24px;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.vehicles-makes-search[b-z4sg0j5vw5] {
    margin-bottom: 28px;
}

.vehicles-makes-search-input-wrap[b-z4sg0j5vw5] {
    position: relative;
    max-width: 440px;
}

.vehicles-makes-search-input-wrap i[b-z4sg0j5vw5] {
    position: absolute;
    top: 50%;
    left: 18px;
    color: var(--gray-muted);
    font-size: 0.9rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.vehicles-makes-search-input[b-z4sg0j5vw5] {
    min-height: 48px;
    padding: 0 18px 0 46px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--card-surface);
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vehicles-makes-search-input[b-z4sg0j5vw5]::placeholder {
    color: var(--gray-muted);
}

.vehicles-makes-search-input:focus[b-z4sg0j5vw5] {
    border-color: var(--signal);
    box-shadow: 0 0 0 3px var(--signal-soft);
    outline: none;
}

/* --- alpha nav --- */

.vehicles-alpha-nav[b-z4sg0j5vw5] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 40px;
    padding: 10px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--card-surface);
}

.vehicles-alpha-link[b-z4sg0j5vw5] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--gray-divider);
    border-radius: 4px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--app-mono);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.vehicles-alpha-link[b-z4sg0j5vw5]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 0;
    height: 2px;
    background: var(--signal);
    transform: translateX(-50%);
    transition: width 0.18s ease;
}

.vehicles-alpha-link:focus-visible[b-z4sg0j5vw5],
.vehicles-alpha-link:hover[b-z4sg0j5vw5] {
    transform: translateY(-1px);
    border-color: var(--graphite);
    background: var(--graphite);
    color: var(--paper);
    box-shadow: 0 6px 14px rgba(14, 15, 16, 0.18);
}

.vehicles-alpha-link:focus-visible[b-z4sg0j5vw5]::after,
.vehicles-alpha-link:hover[b-z4sg0j5vw5]::after {
    width: 60%;
}

.vehicles-alpha-link.is-disabled[b-z4sg0j5vw5] {
    border: 1px dashed var(--gray-faint);
    background: transparent;
    color: var(--gray-faint);
    opacity: 0.6;
    pointer-events: none;
}

.vehicles-alpha-link.is-disabled[b-z4sg0j5vw5]::after {
    display: none;
}

/* --- make group + cards (Kalibar-vibe) --- */

.vehicles-makes-groups[b-z4sg0j5vw5] {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.vehicles-make-group[b-z4sg0j5vw5] {
    scroll-margin-top: 84px;
}

.vehicles-make-group-heading[b-z4sg0j5vw5] {
    position: relative;
    margin-bottom: 20px;
    padding: 14px 0 16px;
    border: 0;
    display: flex;
    align-items: center;
    gap: 24px;
}

.vehicles-make-group-heading[b-z4sg0j5vw5]::before {
    display: none;
}

.vehicles-make-group-letter[b-z4sg0j5vw5] {
    display: inline-block;
    flex-shrink: 0;
    padding-right: 12px;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}

.vehicles-make-group-heading[b-z4sg0j5vw5]::after {
    content: "";
    flex: 1;
    height: 1px;
    background-image:
        linear-gradient(to right, var(--ink) 0, var(--ink) 100%),
        repeating-linear-gradient(to right, var(--ink) 0 4px, transparent 4px 8px);
    background-size: calc(100% - 60px) 1px, 60px 1px;
    background-position: 60px 0, 0 0;
    background-repeat: no-repeat;
    align-self: center;
}

.vehicles-make-grid[b-z4sg0j5vw5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.vehicle-make-card[b-z4sg0j5vw5] {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px;
    min-height: 148px;
    padding: 28px 24px;
    border: 1px solid var(--gray-divider);
    border-radius: 4px;
    background: var(--card-surface);
    box-shadow: none;
    text-decoration: none;
    overflow: hidden;
    text-align: left;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.vehicle-make-card[b-z4sg0j5vw5]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--graphite);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
    pointer-events: none;
}

.vehicle-make-card:hover[b-z4sg0j5vw5],
.vehicle-make-card:focus-visible[b-z4sg0j5vw5] {
    transform: translateY(-2px);
    border-color: var(--graphite);
    box-shadow: 0 12px 28px rgba(14, 15, 16, 0.14);
}

.vehicle-make-card:hover[b-z4sg0j5vw5]::before,
.vehicle-make-card:focus-visible[b-z4sg0j5vw5]::before {
    transform: translateY(0);
}

.vehicle-make-card-logo[b-z4sg0j5vw5] {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    display: block;
    width: auto;
    max-width: 162px;
    height: 130px;
    margin: 0;
    object-fit: contain;
    object-position: right center;
    filter: grayscale(0.82) contrast(1.05) brightness(0.92) saturate(1);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.vehicle-make-card:hover .vehicle-make-card-logo[b-z4sg0j5vw5],
.vehicle-make-card:focus-visible .vehicle-make-card-logo[b-z4sg0j5vw5] {
    filter:
        grayscale(0.2) contrast(1.15) brightness(0.98) saturate(1.1)
        drop-shadow(0.5px 0.5px 0 #faf9f5) drop-shadow(-0.5px -0.5px 0 #faf9f5);
    transform: scale(1.04);
}

.vehicle-make-card-body[b-z4sg0j5vw5] {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    width: 100%;
}

.vehicle-make-card-name[b-z4sg0j5vw5] {
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    transition: color 0.25s ease;
}

.vehicle-make-card-meta[b-z4sg0j5vw5] {
    color: var(--gray-muted);
    font-family: var(--app-mono);
    /* Model count chip - primary signal on each make card; bumped from 0.78
       so it's readable across a 148-card grid without leaning in. */
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 0.25s ease;
}

.vehicle-make-card:hover .vehicle-make-card-name[b-z4sg0j5vw5],
.vehicle-make-card:focus-visible .vehicle-make-card-name[b-z4sg0j5vw5] {
    color: var(--paper);
}

.vehicle-make-card:hover .vehicle-make-card-meta[b-z4sg0j5vw5],
.vehicle-make-card:focus-visible .vehicle-make-card-meta[b-z4sg0j5vw5] {
    color: var(--signal);
}

.vehicle-make-card[b-z4sg0j5vw5]::after {
    content: "->";
    position: absolute;
    top: 14px;
    left: 18px;
    z-index: 1;
    color: var(--gray-faint);
    font-family: Inter, sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    opacity: 1;
    transform: translateX(0);
    transition: color 0.25s ease, transform 0.25s ease;
}

.vehicle-make-card:hover[b-z4sg0j5vw5]::after,
.vehicle-make-card:focus-visible[b-z4sg0j5vw5]::after {
    color: var(--signal);
    transform: translateX(4px);
}

/* empty state */

.vehicles-empty-state[b-z4sg0j5vw5] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 128px;
    margin-bottom: 24px;
    padding: 24px;
    border: 1px dashed var(--card-border);
    border-radius: 4px;
    background: transparent;
    color: var(--gray-muted);
    font-family: Inter, sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    text-align: center;
}

.vehicles-loading-indicator[b-z4sg0j5vw5] {
    position: absolute;
    top: 50%;
    right: 16px;
    display: none;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    background: url('/Images/GIFLogo.gif') center / contain no-repeat;
    filter: grayscale(1) brightness(1.1);
    opacity: 0.82;
}

.vehicles-native-select-wrap[b-z4sg0j5vw5] {
    position: relative;
}

.vehicles-native-select-wrap.is-loading .vehicles-loading-indicator[b-z4sg0j5vw5] {
    display: block;
}

/* --- responsive --- */

@media (max-width: 1199.98px) {
    .page-hero[b-z4sg0j5vw5] {
        align-items: start;
        padding: 120px 0 40px;
    }

    .page-hero-grid[b-z4sg0j5vw5] {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
        padding: 0 32px;
    }

    .page-hero-right[b-z4sg0j5vw5] {
        max-width: 560px;
        width: 100%;
        margin: 0 auto;
    }

    .vehicles-make-grid[b-z4sg0j5vw5] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 767.98px) {
    .page-hero[b-z4sg0j5vw5] {
        padding: 100px 0 40px;
    }

    .page-hero-grid[b-z4sg0j5vw5] {
        padding: 0 20px;
        gap: 32px;
    }

    .page-hero-title[b-z4sg0j5vw5] {
        font-size: clamp(2.4rem, 12vw, 4.5rem);
        margin-bottom: 18px;
    }

    .page-hero-subtitle[b-z4sg0j5vw5] {
        font-size: 0.98rem;
        margin-bottom: 22px;
    }

    .vehicles-finder-card[b-z4sg0j5vw5] {
        padding: 20px 20px 22px;
    }

    .vehicles-alpha-nav[b-z4sg0j5vw5] {
        gap: 2px;
        padding: 8px;
    }

    .vehicles-alpha-link[b-z4sg0j5vw5] {
        min-width: 32px;
        height: 32px;
        font-size: 0.83rem;
    }

    /* QA point 2: mobile make grid was 1 card per row - phone screen wasted
       on whitespace, only 1.5 cards visible at a time. Auto-fit with 150px
       floor lands 2 cols on a 360px phone, 3 cols on a 480px phablet, so
       the user scans the makes list in fewer scroll gestures. */
    .vehicles-make-grid[b-z4sg0j5vw5] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }

    .vehicle-make-card[b-z4sg0j5vw5] {
        padding: 12px;
        grid-template-columns: 1fr;
        text-align: left;
        overflow: hidden;
    }

    /* Logo + name fixed in px on mobile so a +50% a11y font scale doesn't
       blow the text up and push it across the logo. Longer make names
       ("Mercedes-Benz", "Aston Martin", "Genesis") truncate with ellipsis
       rather than overflow the card boundary. */
    .vehicle-make-card-logo[b-z4sg0j5vw5] {
        max-width: 90px;
        max-height: 56px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .vehicle-make-card-name[b-z4sg0j5vw5] {
        font-size: 15px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vehicle-make-card-meta[b-z4sg0j5vw5] {
        font-size: 11px;
    }

    .vehicles-make-group-letter[b-z4sg0j5vw5] {
        font-size: 1.8rem;
    }
}
/* /Components/Shared/Catalog/CompareToggleButton.razor.rz.scp.css */
.compare-toggle[b-jmbsrnehzm] {
    --paper: #faf9f5;
    --ink: #0e0f10;
    --signal: #d94a1f;
    --signal-soft: rgba(217, 74, 31, 0.14);
    /* Opaque equivalent of signal-soft blended over paper - used on hover/active
       so the pill never goes see-through over a dark tyre photo. */
    --signal-soft-solid: #f6e3dc;
    --signal-hover: #b83a15;
    --gray-muted: #8a8a82;
    --card-border: #d6d4ca;
    --card-shadow: rgba(14, 15, 16, 0.12);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: var(--paper);
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 0 2px 6px var(--card-shadow);
    transition: width 0.22s ease, gap 0.22s ease, padding 0.22s ease,
                border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

/* Expand on direct hover/focus OR when the parent card-wrap is hovered.
   Parent-hover ensures the button reveals on listing-card hover even when
   pointer hasn't reached the button itself yet. */
.compare-toggle:hover[b-jmbsrnehzm],
.compare-toggle:focus-visible[b-jmbsrnehzm],
.vehicle-compatible-item-card-wrap:hover .compare-toggle[b-jmbsrnehzm] {
    width: auto;
    gap: 6px;
    padding: 0 14px 0 12px;
    border-color: var(--signal);
    color: var(--signal);
    background: var(--signal-soft-solid);
    outline: none;
}

/* Active (already in tray) - keep expanded so the user sees "U usporedbi"
   without hovering, plus signal-orange tint reads as "selected" state. */
.compare-toggle.is-active[b-jmbsrnehzm] {
    width: auto;
    gap: 6px;
    padding: 0 14px 0 12px;
    border-color: var(--signal);
    color: var(--signal);
    background: var(--signal-soft-solid);
}

.compare-toggle i[b-jmbsrnehzm] {
    font-size: 0.96em;
}

.compare-toggle-label[b-jmbsrnehzm] {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.22s ease, opacity 0.18s ease 0.04s;
}

.compare-toggle:hover .compare-toggle-label[b-jmbsrnehzm],
.compare-toggle:focus-visible .compare-toggle-label[b-jmbsrnehzm],
.compare-toggle.is-active .compare-toggle-label[b-jmbsrnehzm],
.vehicle-compatible-item-card-wrap:hover .compare-toggle .compare-toggle-label[b-jmbsrnehzm] {
    max-width: 120px;
    opacity: 1;
}

@media (max-width: 575.98px) {
    /* Mobile: kebab-style fixed icon, no expand. Saves card real-estate.
       Tap toggles state; visual feedback via active fill. */
    .compare-toggle[b-jmbsrnehzm],
    .compare-toggle:hover[b-jmbsrnehzm],
    .compare-toggle:focus-visible[b-jmbsrnehzm],
    .compare-toggle.is-active[b-jmbsrnehzm],
    .vehicle-compatible-item-card-wrap:hover .compare-toggle[b-jmbsrnehzm] {
        width: 36px;
        padding: 0;
        gap: 0;
    }
    .compare-toggle-label[b-jmbsrnehzm],
    .compare-toggle:hover .compare-toggle-label[b-jmbsrnehzm],
    .compare-toggle.is-active .compare-toggle-label[b-jmbsrnehzm],
    .vehicle-compatible-item-card-wrap:hover .compare-toggle .compare-toggle-label[b-jmbsrnehzm] {
        display: none;
    }
}
/* /Components/Shared/Catalog/CompareTray.razor.rz.scp.css */
.compare-tray[b-wkqgrwh8x6] {
    --paper: #faf9f5;
    --paper-warm: #f3f2ee;
    --ink: #0e0f10;
    --signal: #d94a1f;
    --signal-soft: rgba(217, 74, 31, 0.14);
    --signal-hover: #b83a15;
    --gray-muted: #8a8a82;
    --gray-divider: #e4e1d5;
    --card-border: #d6d4ca;
    --card-shadow: rgba(14, 15, 16, 0.16);

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    background: var(--paper);
    border-top: 1px solid var(--card-border);
    box-shadow: 0 -10px 28px var(--card-shadow);
    color: var(--ink);
    font-family: Inter, sans-serif;
    animation: compare-tray-slide-in-b-wkqgrwh8x6 0.22s ease-out;
}

@keyframes compare-tray-slide-in-b-wkqgrwh8x6 {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.compare-tray-inner[b-wkqgrwh8x6] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
}

.compare-tray-thumbs[b-wkqgrwh8x6] {
    display: flex;
    gap: 8px;
}

.compare-tray-thumb[b-wkqgrwh8x6] {
    position: relative;
    width: 56px;
    height: 56px;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    background: var(--paper-warm);
    /* overflow: visible so the remove-X button overhangs the corner instead
       of getting clipped against the thumb edge. Inner img wrapper handles
       its own clipping below. */
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-tray-thumb img[b-wkqgrwh8x6] {
    /* Clip image to thumb's rounded edges; X button (sibling, outside this
       rule) stays visible because it's not constrained by img bounds. */
    border-radius: 6px;
}

.compare-tray-thumb img[b-wkqgrwh8x6] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.compare-tray-thumb-remove[b-wkqgrwh8x6] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease;
}

.compare-tray-thumb-remove:hover[b-wkqgrwh8x6] {
    background: var(--signal);
}

.compare-tray-thumb-placeholder[b-wkqgrwh8x6] {
    border-style: dashed;
    color: var(--gray-muted);
    font-size: 1.4rem;
    background: var(--paper);
}

.compare-tray-meta[b-wkqgrwh8x6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.compare-tray-label[b-wkqgrwh8x6] {
    font-family: var(--app-mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-muted);
}

.compare-tray-count[b-wkqgrwh8x6] {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.compare-tray-actions[b-wkqgrwh8x6] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.compare-tray-clear[b-wkqgrwh8x6],
.compare-tray-cta[b-wkqgrwh8x6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 6px;
    font-family: Inter, sans-serif;
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.compare-tray-clear[b-wkqgrwh8x6] {
    background: transparent;
    color: var(--gray-muted);
    border-color: var(--card-border);
}

.compare-tray-clear:hover[b-wkqgrwh8x6] {
    color: var(--signal);
    border-color: var(--signal);
}

.compare-tray-cta[b-wkqgrwh8x6] {
    background: var(--signal);
    color: var(--paper);
}

.compare-tray-cta:hover[b-wkqgrwh8x6] {
    background: var(--signal-hover);
    transform: translateY(-1px);
}

.compare-tray-cta[aria-disabled="true"][b-wkqgrwh8x6] {
    background: var(--gray-divider);
    color: var(--gray-muted);
    pointer-events: none;
    cursor: not-allowed;
}

@media (max-width: 767.98px) {
    .compare-tray-inner[b-wkqgrwh8x6] {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px 14px;
    }
    .compare-tray-thumb[b-wkqgrwh8x6] {
        width: 48px;
        height: 48px;
    }
    .compare-tray-meta[b-wkqgrwh8x6] {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
    }
    .compare-tray-actions[b-wkqgrwh8x6] {
        justify-content: stretch;
    }
    .compare-tray-clear[b-wkqgrwh8x6],
    .compare-tray-cta[b-wkqgrwh8x6] {
        flex: 1;
        justify-content: center;
    }
    .compare-tray-clear span[b-wkqgrwh8x6],
    .compare-tray-cta span[b-wkqgrwh8x6] {
        white-space: nowrap;
    }
}
/* /Components/Shared/Catalog/FuelSavingsCalculator.razor.rz.scp.css */
.fuel-calc[b-meoeg2rcib] {
    --paper: #faf9f5;
    --paper-warm: #f3f2ee;
    --ink: #0e0f10;
    --signal: #d94a1f;
    --signal-soft: rgba(217, 74, 31, 0.14);
    --positive: #2e7d32;
    --positive-soft: rgba(46, 125, 50, 0.10);
    --gray-muted: #8a8a82;
    --gray-divider: #e4e1d5;
    --card-border: #d6d4ca;

    max-width: 880px;
    /* Bottom margin + thin divider so the next guide-section heading
       ("Wie der Rechner funktioniert") doesn't crowd the calculator. */
    margin: 0 auto 40px;
    padding: 28px 32px 32px;
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--signal);
    border-radius: 4px;
    background: var(--paper);
    color: var(--ink);
    font-family: Inter, sans-serif;
}


.fuel-calc-head[b-meoeg2rcib] {
    margin-bottom: 22px;
}

.fuel-calc-kicker[b-meoeg2rcib] {
    display: inline-block;
    margin-bottom: 8px;
    font-family: var(--app-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--signal);
}

.fuel-calc-title[b-meoeg2rcib] {
    margin: 0 0 8px;
    font-family: Inter, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.fuel-calc-lead[b-meoeg2rcib] {
    margin: 0;
    color: var(--gray-muted);
    font-size: 0.96rem;
    line-height: 1.6;
}

.fuel-calc-form[b-meoeg2rcib] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.fuel-calc-field[b-meoeg2rcib] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fuel-calc-field label[b-meoeg2rcib] {
    font-family: var(--app-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-muted);
}

.fuel-calc-field input[b-meoeg2rcib],
.fuel-calc-field select[b-meoeg2rcib] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: #fff;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.fuel-calc-field input:focus[b-meoeg2rcib],
.fuel-calc-field select:focus[b-meoeg2rcib] {
    border-color: var(--signal);
    outline: none;
    box-shadow: 0 0 0 3px var(--signal-soft);
}

.fuel-calc-unit[b-meoeg2rcib] {
    font-family: var(--app-mono);
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    color: var(--gray-muted);
}

.fuel-calc-result[b-meoeg2rcib] {
    padding: 18px 20px;
    border-radius: 4px;
    border: 1px solid var(--gray-divider);
    background: var(--paper-warm);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.fuel-calc-result.is-positive[b-meoeg2rcib] {
    background: var(--positive-soft);
    border-color: var(--positive);
}

.fuel-calc-result.is-negative[b-meoeg2rcib] {
    background: var(--signal-soft);
    border-color: var(--signal);
}

.fuel-calc-result-row[b-meoeg2rcib] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.fuel-calc-result-row + .fuel-calc-result-row[b-meoeg2rcib] {
    margin-top: 6px;
}

.fuel-calc-result-row-secondary[b-meoeg2rcib] {
    font-size: 0.92rem;
    color: var(--gray-muted);
}

.fuel-calc-result-label[b-meoeg2rcib] {
    font-family: var(--app-mono);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fuel-calc-result-value[b-meoeg2rcib] {
    font-family: Inter, sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.fuel-calc-result-row:first-child .fuel-calc-result-value[b-meoeg2rcib] {
    font-size: 1.65rem;
    line-height: 1.1;
}

.is-positive .fuel-calc-result-row:first-child .fuel-calc-result-value[b-meoeg2rcib] {
    color: var(--positive);
}

.is-negative .fuel-calc-result-row:first-child .fuel-calc-result-value[b-meoeg2rcib] {
    color: var(--signal);
}

.fuel-calc-result-caption[b-meoeg2rcib] {
    margin: 10px 0 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink);
}

.fuel-calc-note[b-meoeg2rcib] {
    margin: 18px 0 0;
    padding: 10px 14px;
    border-left: 3px solid var(--gray-divider);
    background: var(--paper-warm);
    font-size: 0.84rem;
    color: var(--gray-muted);
    line-height: 1.55;
}

@media (max-width: 575.98px) {
    .fuel-calc[b-meoeg2rcib] {
        padding: 20px 18px;
    }
    .fuel-calc-title[b-meoeg2rcib] {
        font-size: 1.35rem;
    }
    .fuel-calc-form[b-meoeg2rcib] {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .fuel-calc-result-row:first-child .fuel-calc-result-value[b-meoeg2rcib] {
        font-size: 1.3rem;
    }
}
/* /Components/Shared/Catalog/RecentlyViewedStrip.razor.rz.scp.css */
.recently-viewed-strip[b-zx52yypqyn] {
    --paper: #faf9f5;
    --paper-warm: #f3f2ee;
    --ink: #0e0f10;
    --signal: #d94a1f;
    --gray-muted: #8a8a82;
    --gray-divider: #e4e1d5;
    --card-border: #d6d4ca;
    --card-shadow: rgba(14, 15, 16, 0.08);

    max-width: 1200px;
    /* Extra top margin pushes the strip below the home hero fold so the
       carousel arrows + heading don't peek into the hero on first paint.
       Bottom keeps the existing small gap so makes browser sits close. */
    margin: 96px auto 8px;
    padding: 0 24px;
    color: var(--ink);
    font-family: Inter, sans-serif;
}

.recently-viewed-strip-head[b-zx52yypqyn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray-divider);
}

.recently-viewed-strip-title[b-zx52yypqyn] {
    margin: 0;
    font-family: var(--app-mono);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
}

/* Horizontal carousel: flexbox row scroller showing exactly 3 cards on
   desktop. Flex shorthand with fixed-basis + no shrink/grow keeps every
   card the SAME width regardless of content length (grid-auto-columns
   was inconsistent under content variation). */
.recently-viewed-strip-horizontal .recently-viewed-strip-grid[b-zx52yypqyn] {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    /* Vertical padding so card hover translateY(-2px) isn't clipped by
       the auto-promoted overflow-y on this scroll container. */
    padding: 10px 0 12px;
}

.recently-viewed-strip-horizontal .recently-viewed-strip-grid > .recently-viewed-card[b-zx52yypqyn] {
    flex: 0 0 calc((100% - 28px) / 3);
    scroll-snap-align: start;
}

/* Sidebar variant keeps the original auto-fill grid (rules below override
   for the sidebar selector). */
.recently-viewed-strip-grid[b-zx52yypqyn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.recently-viewed-strip-arrows[b-zx52yypqyn] {
    display: flex;
    gap: 8px;
}

.recently-viewed-strip-arrow[b-zx52yypqyn] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: #ffffff;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.recently-viewed-strip-arrow:hover[b-zx52yypqyn],
.recently-viewed-strip-arrow:focus-visible[b-zx52yypqyn] {
    border-color: var(--signal);
    color: var(--signal);
    transform: translateY(-1px);
    outline: none;
}

.recently-viewed-card[b-zx52yypqyn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.recently-viewed-card:hover[b-zx52yypqyn],
.recently-viewed-card:focus-visible[b-zx52yypqyn] {
    border-color: var(--signal);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px var(--card-shadow);
    outline: none;
}

.recently-viewed-card-media[b-zx52yypqyn] {
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 180px;
    overflow: hidden;
    border-radius: 6px;
    /* Three-sided paper outline + signal accent on the bottom edge. */
    border-top: 1px solid var(--gray-divider);
    border-left: 1px solid var(--gray-divider);
    border-right: 1px solid var(--gray-divider);
    border-bottom: 2px solid var(--signal);
    padding-bottom: 6px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recently-viewed-card-media img[b-zx52yypqyn] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.recently-viewed-card-body[b-zx52yypqyn] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.recently-viewed-card-brand[b-zx52yypqyn] {
    font-family: var(--app-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-muted);
}

.recently-viewed-card-brand-logo[b-zx52yypqyn] {
    max-height: 18px;
    max-width: 80px;
    object-fit: contain;
    filter: grayscale(0.7) contrast(1.05);
    transition: filter 0.2s ease;
}

.recently-viewed-card:hover .recently-viewed-card-brand-logo[b-zx52yypqyn],
.recently-viewed-card:focus-visible .recently-viewed-card-brand-logo[b-zx52yypqyn] {
    filter: grayscale(0.1) contrast(1.15);
}

.recently-viewed-card-title[b-zx52yypqyn] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: Inter, sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}

.recently-viewed-card:hover .recently-viewed-card-name[b-zx52yypqyn],
.recently-viewed-card:focus-visible .recently-viewed-card-name[b-zx52yypqyn] {
    color: var(--signal);
}

.recently-viewed-card-dim[b-zx52yypqyn] {
    margin: 0;
    font-family: var(--app-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--gray-muted);
}

.recently-viewed-card-price[b-zx52yypqyn] {
    margin-top: 3px;
    font-family: Inter, sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
}

/* Specs ribbon - mirror product-similar-card pattern. Compact icon+value
   pills, signal-orange icon, graphite value. */
.recently-viewed-card-specs[b-zx52yypqyn] {
    list-style: none;
    margin: 4px 0 2px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.recently-viewed-card-specs:empty[b-zx52yypqyn] {
    display: none;
}

.recently-viewed-card-spec[b-zx52yypqyn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border: 1px solid var(--gray-divider);
    border-radius: 4px;
    background: #fff;
    font-family: var(--app-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--ink);
}

.recently-viewed-card-spec i[b-zx52yypqyn] {
    color: var(--signal);
    font-size: 0.8em;
}

.recently-viewed-card-spec strong[b-zx52yypqyn] {
    font-weight: 700;
}

/* Carousel: 2 cards per view on tablet, ~1.4 cards on mobile (peek so user
   sees there's more to scroll). Snap stops on first card edge so swipes
   land cleanly. */
@media (max-width: 991.98px) {
    .recently-viewed-strip-horizontal .recently-viewed-strip-grid > .recently-viewed-card[b-zx52yypqyn] {
        flex: 0 0 calc((100% - 14px) / 2);
    }
}

@media (max-width: 575.98px) {
    .recently-viewed-strip-horizontal .recently-viewed-strip-grid > .recently-viewed-card[b-zx52yypqyn] {
        flex: 0 0 70%;
    }
    .recently-viewed-strip-arrow[b-zx52yypqyn] {
        width: 32px;
        height: 32px;
    }
}

/* ---------- Sidebar variant - vertical compact rail ---------- */
.recently-viewed-strip-sidebar[b-zx52yypqyn] {
    max-width: none;
    margin: 18px 0 0;
    padding: 0;
}

.recently-viewed-strip-sidebar .recently-viewed-strip-head[b-zx52yypqyn] {
    margin-bottom: 10px;
    padding-bottom: 8px;
}

.recently-viewed-strip-sidebar .recently-viewed-strip-title[b-zx52yypqyn] {
    font-family: var(--app-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-muted);
}

.recently-viewed-strip-sidebar .recently-viewed-strip-grid[b-zx52yypqyn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.recently-viewed-strip-sidebar .recently-viewed-card[b-zx52yypqyn] {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
}

.recently-viewed-strip-sidebar .recently-viewed-card-media[b-zx52yypqyn] {
    width: 56px;
    aspect-ratio: 1 / 1;
    padding-bottom: 0;
    border-bottom: 0;
    border-radius: 4px;
    background: #fff;
}

.recently-viewed-strip-sidebar .recently-viewed-card-body[b-zx52yypqyn] {
    gap: 1px;
}

.recently-viewed-strip-sidebar .recently-viewed-card-title[b-zx52yypqyn] {
    font-size: 0.84rem;
    line-height: 1.15;
    gap: 2px;
}

.recently-viewed-strip-sidebar .recently-viewed-card-brand-logo[b-zx52yypqyn] {
    max-height: 14px;
    max-width: 64px;
}

.recently-viewed-strip-sidebar .recently-viewed-card-name[b-zx52yypqyn] {
    /* Truncate long product names so the card stays one line worth. */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recently-viewed-strip-sidebar .recently-viewed-card-dim[b-zx52yypqyn] {
    font-size: 0.72rem;
}

.recently-viewed-strip-sidebar .recently-viewed-card-price[b-zx52yypqyn] {
    margin-top: 0;
    font-size: 0.86rem;
}

/* On mobile the sidebar is replaced by a filter drawer - hide the
   recently-viewed-sidebar rail entirely so it doesn't follow the drawer
   open/close, and let the horizontal variant (mounted below results)
   handle mobile visibility instead. */
@media (max-width: 991.98px) {
    .recently-viewed-strip-sidebar[b-zx52yypqyn] {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .recently-viewed-strip[b-zx52yypqyn] {
        margin-top: 24px;
        padding: 0 16px;
    }
    .recently-viewed-strip-grid[b-zx52yypqyn] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }
    .recently-viewed-card[b-zx52yypqyn] {
        padding: 10px;
    }
    .recently-viewed-card-title[b-zx52yypqyn] {
        font-size: 0.85rem;
    }
}
/* /Components/Shared/Catalog/TopSearchesStrip.razor.rz.scp.css */
.top-searches-strip[b-2ope4yn5ie] {
    --paper: #faf9f5;
    --paper-warm: #f3f2ee;
    --ink: #0e0f10;
    --signal: #d94a1f;
    --signal-soft: rgba(217, 74, 31, 0.14);
    --gray-muted: #8a8a82;
    --gray-divider: #e4e1d5;
    --card-border: #d6d4ca;

    max-width: 1200px;
    margin: 32px auto 8px;
    padding: 0 24px;
    color: var(--ink);
    font-family: Inter, sans-serif;
}

.top-searches-strip-head[b-2ope4yn5ie] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray-divider);
}

.top-searches-strip-kicker[b-2ope4yn5ie] {
    font-family: var(--app-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--signal);
}

.top-searches-strip-title[b-2ope4yn5ie] {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.005em;
}

.top-searches-strip-list[b-2ope4yn5ie] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.top-searches-chip[b-2ope4yn5ie] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.top-searches-chip:hover[b-2ope4yn5ie],
.top-searches-chip:focus-visible[b-2ope4yn5ie] {
    border-color: var(--signal);
    background: var(--signal-soft);
    transform: translateY(-1px);
    outline: none;
}

.top-searches-chip-brand[b-2ope4yn5ie] {
    font-family: Inter, sans-serif;
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.top-searches-chip-sep[b-2ope4yn5ie] {
    color: var(--gray-divider);
    font-weight: 400;
}

.top-searches-chip-season[b-2ope4yn5ie] {
    font-family: var(--app-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-muted);
}

.top-searches-chip-hits[b-2ope4yn5ie] {
    margin-left: 4px;
    font-family: var(--app-mono);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--signal);
}

.top-searches-chip:hover .top-searches-chip-hits[b-2ope4yn5ie],
.top-searches-chip:focus-visible .top-searches-chip-hits[b-2ope4yn5ie] {
    color: var(--signal);
}

@media (max-width: 575.98px) {
    .top-searches-strip[b-2ope4yn5ie] {
        margin-top: 24px;
        padding: 0 16px;
    }
    .top-searches-strip-list[b-2ope4yn5ie] {
        gap: 8px;
    }
    .top-searches-chip[b-2ope4yn5ie] {
        padding: 7px 12px;
    }
    .top-searches-chip-brand[b-2ope4yn5ie] {
        font-size: 0.88rem;
    }
}
/* /Components/Shared/Catalog/TyreCompatibilityChecker.razor.rz.scp.css */
.tyre-checker[b-yd8bk3u823] {
    --paper: #faf9f5;
    --paper-warm: #f3f2ee;
    --ink: #0e0f10;
    --signal: #d94a1f;
    --signal-soft: rgba(217, 74, 31, 0.14);
    --gray-muted: #8a8a82;
    --gray-divider: #e4e1d5;
    --card-surface: #ffffff;
    --card-border: #d6d4ca;

    max-width: 1080px;
    margin: 0 auto 40px;
    padding: 28px 32px 32px;
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--signal);
    border-radius: 4px;
    background: var(--paper);
    color: var(--ink);
    font-family: Inter, sans-serif;
}

.tyre-checker-inputs[b-yd8bk3u823] {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr)) auto;
    gap: 14px;
    align-items: end;
    margin-bottom: 22px;
}

.tyre-checker-field[b-yd8bk3u823] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Swapped the native <select> for the shared StyledDropdown (matches the home
   finder look + the custom popup doesn't close on scroll). ::deep pierces the
   child component's scope so the dropdown fills the grid cell. */
.tyre-checker-field[b-yd8bk3u823]  .styled-dropdown {
    width: 100%;
}

.tyre-checker-field label[b-yd8bk3u823] {
    font-family: var(--app-mono);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-muted);
}

.tyre-checker-field select[b-yd8bk3u823] {
    width: 100%;
    /* right padding keeps the chevron a comfortable 14px inside the right edge */
    padding: 10px 36px 10px 12px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background-color: #fff;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%230e0f10' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.tyre-checker-field select:focus[b-yd8bk3u823] {
    border-color: var(--signal);
    outline: none;
    box-shadow: 0 0 0 3px var(--signal-soft);
}

.tyre-checker-field select[b-yd8bk3u823]::-ms-expand {
    display: none;
}

.tyre-checker-reset[b-yd8bk3u823] {
    height: 42px;
    padding: 0 18px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--paper-warm);
    color: var(--ink);
    font-family: var(--app-mono);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.tyre-checker-reset:not(:disabled):hover[b-yd8bk3u823],
.tyre-checker-reset:not(:disabled):focus-visible[b-yd8bk3u823] {
    background: var(--signal);
    border-color: var(--signal);
    color: #fff;
    outline: none;
}

.tyre-checker-reset:disabled[b-yd8bk3u823] {
    opacity: 0.45;
    cursor: not-allowed;
}

.tyre-checker-empty[b-yd8bk3u823] {
    margin: 0 0 18px;
    color: var(--signal);
    font-family: var(--app-mono);
    font-size: 0.86rem;
    letter-spacing: 0.04em;
}

.tyre-checker-metrics[b-yd8bk3u823] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--gray-divider);
    border-radius: 4px;
    background: var(--paper-warm);
}

.tyre-checker-metric[b-yd8bk3u823] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 14px 14px;
    border: 1px solid var(--gray-divider);
    border-radius: 4px;
    background: var(--card-surface);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.tyre-checker-metric:hover[b-yd8bk3u823] {
    border-color: var(--signal);
    box-shadow: 0 4px 12px rgba(217, 74, 31, 0.12);
    transform: translateY(-1px);
}

.tyre-checker-metric-label[b-yd8bk3u823] {
    font-family: var(--app-mono);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-muted);
    white-space: normal;
}

.tyre-checker-metric-value[b-yd8bk3u823] {
    font-family: Inter, sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
    white-space: nowrap;
}

.tyre-checker-metric-sub[b-yd8bk3u823] {
    font-family: var(--app-mono);
    font-size: 0.76rem;
    color: var(--gray-muted);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.tyre-checker-stock-line[b-yd8bk3u823] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding: 14px 18px;
    border: 1px solid var(--gray-divider);
    border-radius: 4px;
    background: var(--paper-warm);
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.18s ease, background-color 0.18s ease,
                box-shadow 0.18s ease, transform 0.18s ease;
}

.tyre-checker-stock-line-link[b-yd8bk3u823] {
    cursor: pointer;
}

.tyre-checker-stock-line-link:hover[b-yd8bk3u823],
.tyre-checker-stock-line-link:focus-visible[b-yd8bk3u823] {
    border-color: var(--signal);
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(217, 74, 31, 0.12);
    transform: translateY(-1px);
    outline: none;
}

.tyre-checker-stock-line-link:hover .tyre-checker-stock-count[b-yd8bk3u823],
.tyre-checker-stock-line-link:focus-visible .tyre-checker-stock-count[b-yd8bk3u823] {
    background: var(--signal);
    color: #fff;
}

.tyre-checker-stock-line-link:hover .tyre-checker-stock-arrow[b-yd8bk3u823],
.tyre-checker-stock-line-link:focus-visible .tyre-checker-stock-arrow[b-yd8bk3u823] {
    transform: translateX(4px);
    color: var(--signal);
}

.tyre-checker-stock-count[b-yd8bk3u823] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--signal-soft);
    color: var(--signal);
    font-family: var(--app-mono);
    font-size: 0.92rem;
    font-weight: 700;
    transition: background 0.18s ease, color 0.18s ease;
}

.tyre-checker-stock-text[b-yd8bk3u823] {
    flex: 1;
    color: var(--ink);
}

.tyre-checker-stock-arrow[b-yd8bk3u823] {
    color: var(--gray-muted);
    font-family: var(--app-mono);
    transition: transform 0.18s ease, color 0.18s ease;
}

.tyre-checker-stock-empty[b-yd8bk3u823] {
    font-family: var(--app-mono);
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    color: var(--gray-muted);
}

.tyre-checker-block[b-yd8bk3u823] {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--gray-divider);
}

.tyre-checker-block-title[b-yd8bk3u823] {
    margin: 0 0 6px;
    font-family: Inter, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.tyre-checker-block-lead[b-yd8bk3u823] {
    margin: 0 0 14px;
    color: var(--gray-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.tyre-checker-compat-list[b-yd8bk3u823] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tyre-checker-compat-row[b-yd8bk3u823] {
    border: 1px solid var(--gray-divider);
    border-radius: 4px;
    background: var(--card-surface);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.tyre-checker-compat-row.is-exact[b-yd8bk3u823] {
    border-color: var(--signal);
    background: var(--signal-soft);
}

.tyre-checker-compat-row.is-open[b-yd8bk3u823] {
    border-color: var(--signal);
    box-shadow: 0 4px 12px rgba(14, 15, 16, 0.06);
}

.tyre-checker-compat-summary[b-yd8bk3u823] {
    display: grid;
    grid-template-columns: minmax(120px, auto) auto 1fr auto;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font-family: Inter, sans-serif;
    transition: background-color 0.18s ease;
}

.tyre-checker-compat-summary:hover[b-yd8bk3u823],
.tyre-checker-compat-summary:focus-visible[b-yd8bk3u823] {
    background: var(--paper-warm);
    outline: none;
}

.tyre-checker-compat-row.is-open .tyre-checker-compat-summary[b-yd8bk3u823] {
    border-bottom: 1px solid var(--gray-divider);
}

.tyre-checker-compat-dim[b-yd8bk3u823] {
    font-family: Inter, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.tyre-checker-compat-diff[b-yd8bk3u823] {
    font-family: var(--app-mono);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--signal);
    justify-self: start;
}

.tyre-checker-compat-stock[b-yd8bk3u823] {
    font-family: var(--app-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--gray-muted);
    justify-self: end;
}

.tyre-checker-compat-chevron[b-yd8bk3u823] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--signal-soft);
    color: var(--signal);
    font-family: var(--app-mono);
    font-size: 1.05rem;
    font-weight: 700;
}

/* On phones the 4-column summary grid (dim | diff | stock | chevron) overflowed
   - the fixed columns + gaps exceeded the narrow row, pushing the +/− chevron
   out the right edge (worst at +25%/+50% where the text is larger). Switch to a
   wrapping 2-row flex layout: row 1 = dimension + chevron (pinned right), row 2
   = diff + stock. The chevron can never spill now. */
@media (max-width: 575.98px) {
    .tyre-checker-compat-summary[b-yd8bk3u823] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;
    }
    .tyre-checker-compat-dim[b-yd8bk3u823] { flex: 1 1 auto; min-width: 0; }
    .tyre-checker-compat-chevron[b-yd8bk3u823] { order: 2; margin-left: auto; }
    .tyre-checker-compat-diff[b-yd8bk3u823] { order: 3; justify-self: start; }
    .tyre-checker-compat-stock[b-yd8bk3u823] { order: 4; margin-left: auto; justify-self: auto; }
}

.tyre-checker-compat-body[b-yd8bk3u823] {
    padding: 14px 16px 16px;
    background: var(--paper);
}

.tyre-checker-compat-loading[b-yd8bk3u823] {
    margin: 0;
    padding: 12px;
    text-align: center;
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.86rem;
    letter-spacing: 0.04em;
}

/* `.tyre-checker-compat-itemgrid` carries the same global rules as
   `.vehicles-compatible-items-grid` via the alias parent context in the
   markup - no grid-template-columns override here so we don't fight the
   responsive breakpoints in tyre-card-hover.css. */

/* Body needs to stay clip-free so the overflowing card can render past it.
   The actual overlay-on-hover rules live in wwwroot/css/pages/tyre-card-hover.css
   because they target `.vehicle-compatible-item-card` which is rendered inside
   the ItemsResultCard child component - Blazor scoped CSS from this file would
   never reach it. */
.tyre-checker-compat-body[b-yd8bk3u823] {
    overflow: visible;
}

/* "Show all" tile sits inside the same grid as the tyre cards - same footprint
   so the row reads as 9 results + 1 CTA. Matches the card 480px min-height
   so the grid row track lines up. Mono label + ink ground, hover flips to
   signal. */
.tyre-checker-compat-more[b-yd8bk3u823] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    align-self: start;
    min-height: 480px;
    padding: 24px;
    border: 1px dashed var(--card-border);
    border-radius: 4px;
    background: var(--paper-warm);
    color: var(--ink);
    text-decoration: none;
    text-align: center;
    transition: border-color 0.18s ease, background-color 0.18s ease,
                color 0.18s ease, transform 0.18s ease;
}

.tyre-checker-compat-more:hover[b-yd8bk3u823],
.tyre-checker-compat-more:focus-visible[b-yd8bk3u823] {
    border-color: var(--signal);
    border-style: solid;
    background: var(--signal);
    color: #fff;
    transform: translateY(-1px);
    outline: none;
}

.tyre-checker-compat-more:hover .tyre-checker-compat-more-icon[b-yd8bk3u823],
.tyre-checker-compat-more:hover .tyre-checker-compat-more-sub[b-yd8bk3u823],
.tyre-checker-compat-more:focus-visible .tyre-checker-compat-more-icon[b-yd8bk3u823],
.tyre-checker-compat-more:focus-visible .tyre-checker-compat-more-sub[b-yd8bk3u823] {
    color: #fff;
}

.tyre-checker-compat-more-icon[b-yd8bk3u823] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--signal-soft);
    color: var(--signal);
    font-family: var(--app-mono);
    font-size: 1.4rem;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.tyre-checker-compat-more:hover .tyre-checker-compat-more-icon[b-yd8bk3u823],
.tyre-checker-compat-more:focus-visible .tyre-checker-compat-more-icon[b-yd8bk3u823] {
    background: rgba(255, 255, 255, 0.18);
}

.tyre-checker-compat-more-label[b-yd8bk3u823] {
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.tyre-checker-compat-more-sub[b-yd8bk3u823] {
    font-family: var(--app-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--gray-muted);
}

@media (max-width: 767.98px) {
    .tyre-checker[b-yd8bk3u823] {
        padding: 22px 18px;
    }
    .tyre-checker-inputs[b-yd8bk3u823] {
        /* Stack the dropdowns one below another - 3 columns overflowed the
           right edge on phones. */
        grid-template-columns: 1fr;
    }
    .tyre-checker-reset[b-yd8bk3u823] {
        grid-column: 1 / -1;
        width: 100%;
    }
    .tyre-checker-metrics[b-yd8bk3u823] {
        grid-template-columns: 1fr 1fr;
        padding: 14px;
    }
}

@media (max-width: 480px) {
    .tyre-checker-metrics[b-yd8bk3u823] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/Compliance/CookieConsentBar.razor.rz.scp.css */
.cookie-consent[b-u3opir1i2u] {
    --paper: #faf9f5;
    --graphite: #0e0f10;
    --ink: #0e0f10;
    --signal: #d94a1f;
    --signal-hover: #b83a15;
    --gray-muted: #8a8a82;
    --gray-divider: #e4e1d5;
    --card-border: #d6d4ca;

    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1100;
    background: var(--graphite);
    color: var(--paper);
    border: 1px solid var(--signal);
    border-radius: 4px;
    box-shadow: 0 24px 64px rgba(14, 15, 16, 0.4);
    font-family: Inter, sans-serif;
    animation: cookie-slide-up-b-u3opir1i2u 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cookie-slide-up-b-u3opir1i2u {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cookie-consent-inner[b-u3opir1i2u] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px;
}

.cookie-consent-text[b-u3opir1i2u] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.cookie-consent-kicker[b-u3opir1i2u] {
    color: var(--signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.cookie-consent-title[b-u3opir1i2u] {
    margin: 0;
    color: var(--paper);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

.cookie-consent-body[b-u3opir1i2u] {
    margin: 0;
    color: rgba(243, 242, 238, 0.78);
    font-size: 0.83rem;
    line-height: 1.4;
    max-width: 720px;
}

.cookie-consent-link[b-u3opir1i2u] {
    color: var(--signal);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

.cookie-consent-link:hover[b-u3opir1i2u] {
    color: var(--paper);
}

.cookie-consent-actions[b-u3opir1i2u] {
    flex-shrink: 0;
}

.cookie-consent-form[b-u3opir1i2u] {
    display: inline-flex;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.cookie-consent-btn[b-u3opir1i2u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 16px;
    border-radius: 4px;
    font-family: Inter, sans-serif;
    font-size: 0.83rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.cookie-consent-btn-ghost[b-u3opir1i2u] {
    background: transparent;
    color: var(--paper);
    border: 1px solid rgba(243, 242, 238, 0.3);
}

.cookie-consent-btn-ghost:hover[b-u3opir1i2u],
.cookie-consent-btn-ghost:focus-visible[b-u3opir1i2u] {
    background: rgba(243, 242, 238, 0.08);
    border-color: rgba(243, 242, 238, 0.6);
    outline: none;
}

.cookie-consent-btn-primary[b-u3opir1i2u] {
    background: var(--signal);
    color: var(--graphite);
    border: 1px solid var(--signal);
}

.cookie-consent-btn-primary:hover[b-u3opir1i2u],
.cookie-consent-btn-primary:focus-visible[b-u3opir1i2u] {
    background: var(--signal-hover);
    border-color: var(--signal-hover);
    color: var(--paper);
    transform: translateY(-1px);
    outline: none;
}

@media (max-width: 768px) {
    .cookie-consent[b-u3opir1i2u] {
        left: 8px;
        right: 8px;
        bottom: 8px;
    }

    .cookie-consent-inner[b-u3opir1i2u] {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px 14px;
    }

    .cookie-consent-form[b-u3opir1i2u] {
        width: 100%;
        gap: 8px;
    }

    .cookie-consent-btn[b-u3opir1i2u] {
        flex: 1;
        height: 36px;
        padding: 0 12px;
        font-size: 0.83rem;
    }
}
/* /Components/Shared/Forms/MultiSelectStyledDropdown.razor.rz.scp.css */
.styled-dropdown[b-3113925hfm] {
    --dd-border: #d6d4ca;
    --dd-surface: #ffffff;
    --dd-text: #0e0f10;
    --dd-text-muted: #8a8a82;
    --dd-disabled-bg: #f3f2ee;
    --dd-hover-border: #d94a1f;
    --dd-accent: #d94a1f;
    --dd-accent-ring: rgba(217, 74, 31, 0.16);
    --dd-accent-soft: rgba(217, 74, 31, 0.14);
    --dd-accent-ink: #0e0f10;
    --dd-chevron: #d94a1f;
    --dd-chevron-divider: #e4e1d5;
    --dd-popup-border: rgba(14, 15, 16, 0.08);
    --dd-popup-shadow: rgba(14, 15, 16, 0.18);
    --dd-item-text: #0e0f10;
    --dd-item-divider: #e4e1d5;
    --dd-optionlabel-text: #8a8a82;
    --dd-optionlabel-bg: #f3f2ee;

    position: relative;
    width: 100%;
}

.styled-dropdown-trigger[b-3113925hfm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 0 0 0 14px;
    border: 1px solid var(--dd-border);
    border-radius: 4px;
    background-color: var(--dd-surface);
    color: var(--dd-text);
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

    .styled-dropdown-trigger:hover[b-3113925hfm] {
        border-color: var(--dd-hover-border);
    }

    .styled-dropdown-trigger:focus[b-3113925hfm],
    .styled-dropdown-trigger:focus-visible[b-3113925hfm] {
        border-color: var(--dd-accent);
        box-shadow: 0 0 0 4px var(--dd-accent-ring);
        outline: none;
    }

.styled-dropdown.is-open .styled-dropdown-trigger[b-3113925hfm] {
    border-color: var(--dd-accent);
    box-shadow: 0 0 0 4px var(--dd-accent-ring);
}

.styled-dropdown.is-disabled .styled-dropdown-trigger[b-3113925hfm],
.styled-dropdown-trigger:disabled[b-3113925hfm] {
    background-color: var(--dd-disabled-bg);
    color: var(--dd-text-muted);
    cursor: not-allowed;
    border-color: var(--dd-border);
    box-shadow: none;
}

.styled-dropdown-value[b-3113925hfm] {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .styled-dropdown-value.is-placeholder[b-3113925hfm] {
        color: var(--dd-text-muted);
        font-weight: 500;
    }

.styled-dropdown-count[b-3113925hfm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    margin: 0 8px;
    background: var(--dd-accent);
    color: #faf9f5;
    border-radius: 999px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1;
}

.styled-dropdown-chevron[b-3113925hfm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    align-self: stretch;
    color: var(--dd-chevron);
    box-shadow: inset 1px 0 0 var(--dd-chevron-divider);
    flex-shrink: 0;
}

.styled-dropdown-chevron-icon[b-3113925hfm] {
    width: 12px;
    height: 8px;
    display: block;
    transition: transform 0.2s ease;
}

.styled-dropdown.is-open .styled-dropdown-chevron-icon[b-3113925hfm] {
    transform: rotate(180deg);
}

.styled-dropdown-popup[b-3113925hfm] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1000;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--dd-popup-border);
    border-radius: 4px;
    background: var(--dd-surface);
    box-shadow: 0 24px 44px var(--dd-popup-shadow);
    scrollbar-width: thin;
    animation: multi-styled-dropdown-pop-b-3113925hfm 0.16s ease;
}

@keyframes multi-styled-dropdown-pop-b-3113925hfm {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.styled-dropdown-item[b-3113925hfm],
.styled-dropdown-optionlabel[b-3113925hfm],
.styled-dropdown-empty[b-3113925hfm] {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 12px;
    color: var(--dd-item-text);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.3;
    border-bottom: 1px solid var(--dd-item-divider);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.styled-dropdown-optionlabel[b-3113925hfm] {
    color: var(--dd-optionlabel-text);
    font-weight: 600;
    background: var(--dd-optionlabel-bg);
}

.styled-dropdown-empty[b-3113925hfm] {
    color: var(--dd-text-muted);
    cursor: default;
}

.styled-dropdown-item:last-child[b-3113925hfm],
.styled-dropdown-empty:last-child[b-3113925hfm] {
    border-bottom: 0;
}

.styled-dropdown-item:hover[b-3113925hfm],
.styled-dropdown-optionlabel:hover[b-3113925hfm] {
    background: var(--dd-accent-soft);
    color: var(--dd-accent-ink);
}

.styled-dropdown-item.is-selected[b-3113925hfm] {
    background: var(--dd-accent-soft);
    color: var(--dd-accent);
    font-weight: 600;
}

.styled-dropdown-multi-icon[b-3113925hfm] {
    width: 16px;
    margin-right: 10px;
    color: var(--dd-text-muted);
    font-size: 0.9rem;
}

.styled-dropdown-item.is-selected .styled-dropdown-multi-icon[b-3113925hfm],
.styled-dropdown-optionlabel .styled-dropdown-multi-icon[b-3113925hfm] {
    color: var(--dd-accent);
}

.styled-dropdown-trigger:focus-visible[b-3113925hfm],
.styled-dropdown-item:focus-visible[b-3113925hfm],
.styled-dropdown-optionlabel:focus-visible[b-3113925hfm] {
    outline: 2px solid var(--signal, #d94a1f);
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .styled-dropdown-trigger[b-3113925hfm] {
        min-height: 44px;
        padding: 0 0 0 14px;
        font-size: 0.9rem;
    }

    .styled-dropdown-chevron[b-3113925hfm] {
        width: 40px;
    }

    .styled-dropdown-item[b-3113925hfm],
    .styled-dropdown-optionlabel[b-3113925hfm] {
        min-height: 36px;
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}
/* /Components/Shared/Forms/StyledDropdown.razor.rz.scp.css */
.styled-dropdown[b-2d50l2imyd] {
    --dd-border: #d6d4ca;
    --dd-surface: #ffffff;
    --dd-text: #0e0f10;
    --dd-text-muted: #8a8a82;
    --dd-disabled-bg: #f3f2ee;
    --dd-hover-border: #d94a1f;
    --dd-accent: #d94a1f;
    --dd-accent-ring: rgba(217, 74, 31, 0.16);
    --dd-accent-soft: rgba(217, 74, 31, 0.14);
    --dd-accent-ink: #0e0f10;
    --dd-chevron: #d94a1f;
    --dd-chevron-divider: #e4e1d5;
    --dd-popup-border: rgba(14, 15, 16, 0.08);
    --dd-popup-shadow: rgba(14, 15, 16, 0.18);
    --dd-item-text: #0e0f10;
    --dd-item-divider: #e4e1d5;
    --dd-optionlabel-text: #8a8a82;
    --dd-optionlabel-bg: #f3f2ee;

    position: relative;
    width: 100%;
}

.styled-dropdown-trigger[b-2d50l2imyd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 0 0 0 16px;
    border: 1px solid var(--dd-border);
    border-radius: 4px;
    background-color: var(--dd-surface);
    color: var(--dd-text);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

    .styled-dropdown-trigger:hover[b-2d50l2imyd] {
        border-color: var(--dd-hover-border);
    }

    .styled-dropdown-trigger:focus[b-2d50l2imyd],
    .styled-dropdown-trigger:focus-visible[b-2d50l2imyd] {
        border-color: var(--dd-accent);
        box-shadow: 0 0 0 4px var(--dd-accent-ring);
        outline: none;
    }

.styled-dropdown.is-open .styled-dropdown-trigger[b-2d50l2imyd] {
    border-color: var(--dd-accent);
    box-shadow: 0 0 0 4px var(--dd-accent-ring);
}

.styled-dropdown.is-disabled .styled-dropdown-trigger[b-2d50l2imyd],
.styled-dropdown-trigger:disabled[b-2d50l2imyd] {
    background-color: var(--dd-disabled-bg);
    color: var(--dd-text-muted);
    cursor: not-allowed;
    border-color: var(--dd-border);
    box-shadow: none;
}

.styled-dropdown-value[b-2d50l2imyd] {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .styled-dropdown-value.is-placeholder[b-2d50l2imyd] {
        color: var(--dd-text-muted);
        font-weight: 500;
    }

.styled-dropdown-chevron[b-2d50l2imyd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    align-self: stretch;
    color: var(--dd-chevron);
    /* Divider via inset shadow - zero content-area cost. */
    box-shadow: inset 1px 0 0 var(--dd-chevron-divider);
    flex-shrink: 0;
}

.styled-dropdown-chevron-icon[b-2d50l2imyd] {
    width: 12px;
    height: 8px;
    display: block;
    transition: transform 0.2s ease;
}

.styled-dropdown.is-open .styled-dropdown-chevron-icon[b-2d50l2imyd] {
    transform: rotate(180deg);
}

.styled-dropdown-popup[b-2d50l2imyd] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1000;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--dd-popup-border);
    border-radius: 4px;
    background: var(--dd-surface);
    box-shadow: 0 24px 44px var(--dd-popup-shadow);
    scrollbar-width: thin;
    animation: styled-dropdown-pop-b-2d50l2imyd 0.16s ease;
}

/* QA D1: SearchEnabled wrap - popup + search input stack as one floating
   panel. The wrap takes over absolute positioning from the bare popup so
   the input sits ABOVE the scrollable list. */
.styled-dropdown-popup-wrap[b-2d50l2imyd] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1000;
    border: 1px solid var(--dd-popup-border);
    border-radius: 4px;
    background: var(--dd-surface);
    box-shadow: 0 24px 44px var(--dd-popup-shadow);
    animation: styled-dropdown-pop-b-2d50l2imyd 0.16s ease;
    overflow: hidden;
}

/* When wrapped, the inner popup loses its own positioning/shadow - the wrap
   owns it. The popup just renders the scrollable item list. */
.styled-dropdown-popup-wrap .styled-dropdown-popup[b-2d50l2imyd] {
    position: static;
    border: 0;
    box-shadow: none;
    animation: none;
    max-height: 280px;
}

.styled-dropdown-search[b-2d50l2imyd] {
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid var(--dd-item-divider);
    background: var(--dd-optionlabel-bg);
}

.styled-dropdown-search-icon[b-2d50l2imyd] {
    position: absolute;
    top: 50%;
    left: 22px;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: var(--dd-text-muted);
    pointer-events: none;
}

.styled-dropdown-search-input[b-2d50l2imyd] {
    width: 100%;
    padding: 8px 10px 8px 30px;
    border: 1px solid var(--dd-border);
    border-radius: 4px;
    background: var(--dd-surface);
    color: var(--dd-text);
    font-size: 0.92rem;
    font-family: inherit;
    line-height: 1.3;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.styled-dropdown-search-input:focus[b-2d50l2imyd] {
    border-color: var(--dd-accent);
    box-shadow: 0 0 0 3px var(--dd-accent-ring);
}

@keyframes styled-dropdown-pop-b-2d50l2imyd {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.styled-dropdown-item[b-2d50l2imyd],
.styled-dropdown-optionlabel[b-2d50l2imyd],
.styled-dropdown-empty[b-2d50l2imyd] {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 14px;
    color: var(--dd-item-text);
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.3;
    border-bottom: 1px solid var(--dd-item-divider);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.styled-dropdown-optionlabel[b-2d50l2imyd] {
    color: var(--dd-optionlabel-text);
    font-weight: 600;
    background: var(--dd-optionlabel-bg);
}

.styled-dropdown-empty[b-2d50l2imyd] {
    color: var(--dd-text-muted);
    cursor: default;
}

.styled-dropdown-item:last-child[b-2d50l2imyd],
.styled-dropdown-empty:last-child[b-2d50l2imyd] {
    border-bottom: 0;
}

.styled-dropdown-item:hover[b-2d50l2imyd],
.styled-dropdown-item.is-selected[b-2d50l2imyd],
.styled-dropdown-optionlabel:hover[b-2d50l2imyd],
.styled-dropdown-optionlabel.is-selected[b-2d50l2imyd] {
    background: var(--dd-accent-soft);
    color: var(--dd-accent-ink);
}

/* Count-badge layout - value left, count pill right.
   Pill mirrors the orange/cream wash used on facet count chips in Items.razor
   so the same visual vocabulary covers dropdowns + sidebar. */
.styled-dropdown-item.has-count[b-2d50l2imyd] {
    justify-content: space-between;
    gap: 12px;
}

.styled-dropdown-item-label[b-2d50l2imyd] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.styled-dropdown-item-count[b-2d50l2imyd] {
    flex: 0 0 auto;
    min-width: 28px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--dd-accent-soft);
    color: var(--dd-accent);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    font-feature-settings: "tnum" 1;
}

.styled-dropdown-item.has-count:hover .styled-dropdown-item-count[b-2d50l2imyd],
.styled-dropdown-item.has-count.is-selected .styled-dropdown-item-count[b-2d50l2imyd] {
    background: var(--dd-accent);
    color: #ffffff;
}

.styled-dropdown-trigger:focus-visible[b-2d50l2imyd],
.styled-dropdown-item:focus-visible[b-2d50l2imyd],
.styled-dropdown-optionlabel:focus-visible[b-2d50l2imyd] {
    outline: 2px solid var(--signal, #d94a1f);
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .styled-dropdown-trigger[b-2d50l2imyd] {
        min-height: 46px;
        padding: 0 0 0 14px;
        font-size: 0.92rem;
    }

    .styled-dropdown-chevron[b-2d50l2imyd] {
        width: 42px;
    }

    .styled-dropdown-item[b-2d50l2imyd],
    .styled-dropdown-optionlabel[b-2d50l2imyd] {
        min-height: 36px;
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}
/* /Components/Shared/Modals/ContactSheet.razor.rz.scp.css */
.contact-sheet-backdrop[b-3qmb3pqnp9] {
    --sheet-bg: #faf9f5;
    --sheet-ink: #0e0f10;
    --sheet-gray: #8a8a82;
    --sheet-border: #d6d4ca;
    --sheet-signal: #d94a1f;
    --sheet-signal-soft: rgba(217, 74, 31, 0.14);
    --sheet-success: #28a06a;
    --sheet-success-soft: rgba(40, 160, 106, 0.12);

    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
    background: rgba(14, 15, 16, 0.55);
    backdrop-filter: blur(4px);
    opacity: 0;
    animation: contact-sheet-fade-in-b-3qmb3pqnp9 0.24s ease forwards;
    font-family: Inter, sans-serif;
}

@keyframes contact-sheet-fade-in-b-3qmb3pqnp9 {
    to { opacity: 1; }
}

.contact-sheet[b-3qmb3pqnp9] {
    width: min(520px, 100%);
    height: 100vh;
    padding: 32px 36px 28px;
    background: var(--sheet-bg);
    color: var(--sheet-ink);
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    border-left: 1px solid var(--sheet-border);
    box-shadow: -24px 0 48px rgba(14, 15, 16, 0.22);
    transform: translateX(100%);
    animation: contact-sheet-slide-b-3qmb3pqnp9 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes contact-sheet-slide-b-3qmb3pqnp9 {
    to { transform: translateX(0); }
}

.contact-sheet-header[b-3qmb3pqnp9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.contact-sheet-kicker[b-3qmb3pqnp9] {
    color: var(--sheet-signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.contact-sheet-title[b-3qmb3pqnp9] {
    margin: 4px 0 0;
    color: var(--sheet-ink);
    font-family: Inter, sans-serif;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.contact-sheet-close[b-3qmb3pqnp9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--sheet-border);
    border-radius: 4px;
    background: transparent;
    color: var(--sheet-ink);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.contact-sheet-close:hover[b-3qmb3pqnp9],
.contact-sheet-close:focus-visible[b-3qmb3pqnp9] {
    background: var(--sheet-ink);
    color: var(--sheet-bg);
    border-color: var(--sheet-ink);
}

.contact-sheet-subtitle[b-3qmb3pqnp9] {
    margin: 0 0 8px;
    color: var(--sheet-gray);
    font-size: 0.92rem;
    line-height: 1.5;
}

.contact-sheet-form[b-3qmb3pqnp9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-sheet-field[b-3qmb3pqnp9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-sheet-field-label[b-3qmb3pqnp9] {
    color: var(--sheet-ink);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.contact-sheet-input[b-3qmb3pqnp9] {
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--sheet-border);
    border-radius: 4px;
    background: #ffffff;
    color: var(--sheet-ink);
    font-family: Inter, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-sheet-input:focus[b-3qmb3pqnp9] {
    border-color: var(--sheet-signal);
    box-shadow: 0 0 0 3px var(--sheet-signal-soft);
    outline: none;
}

.contact-sheet-textarea[b-3qmb3pqnp9] {
    resize: vertical;
    min-height: 140px;
    line-height: 1.5;
}

.contact-sheet-actions[b-3qmb3pqnp9] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.contact-sheet-btn[b-3qmb3pqnp9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: Inter, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.contact-sheet-btn-ghost[b-3qmb3pqnp9] {
    background: transparent;
    border-color: var(--sheet-border);
    color: var(--sheet-ink);
}

.contact-sheet-btn-ghost:hover[b-3qmb3pqnp9],
.contact-sheet-btn-ghost:focus-visible[b-3qmb3pqnp9] {
    border-color: var(--sheet-ink);
}

.contact-sheet-btn-primary[b-3qmb3pqnp9] {
    background: var(--sheet-signal);
    border-color: var(--sheet-signal);
    color: var(--sheet-bg);
}

.contact-sheet-btn-primary:hover[b-3qmb3pqnp9],
.contact-sheet-btn-primary:focus-visible[b-3qmb3pqnp9] {
    background: var(--sheet-ink);
    border-color: var(--sheet-ink);
    color: var(--sheet-bg);
}

.contact-sheet-privacy[b-3qmb3pqnp9] {
    margin: 8px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sheet-gray);
    font-size: 0.83rem;
    font-weight: 500;
}

.contact-sheet-privacy i[b-3qmb3pqnp9] {
    color: var(--sheet-signal);
}

.contact-sheet-success[b-3qmb3pqnp9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
    border: 1px solid rgba(40, 160, 106, 0.35);
    border-radius: 4px;
    background: var(--sheet-success-soft);
    color: var(--sheet-success);
    font-weight: 600;
    font-size: 0.95rem;
}

.contact-sheet-success i[b-3qmb3pqnp9] {
    font-size: 1.2rem;
}

.contact-sheet-error[b-3qmb3pqnp9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid rgba(217, 74, 31, 0.35);
    border-radius: 4px;
    background: var(--sheet-signal-soft);
    color: var(--sheet-signal);
    font-weight: 600;
    font-size: 0.9rem;
}

.contact-sheet-btn:disabled[b-3qmb3pqnp9] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 767.98px) {
    .contact-sheet[b-3qmb3pqnp9] {
        width: 100%;
        padding: 24px 20px;
    }
}
/* /Components/Shared/Navigation/BackLink.razor.rz.scp.css */
/* Canonical back-link visual. Used everywhere - Make, Model, ItemDetail,
   Items. Matches the pill style introduced first in ItemDetail. Keep this
   file as the single source so nav controls stay consistent across pages. */

.back-link-row[b-33lqays6ts] {
    margin: 16px 0 12px;
}

.back-link[b-33lqays6ts] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 1rem;
    border: 1px solid var(--card-border, #d6d4ca);
    border-radius: 10px;
    background: var(--card-surface, #ffffff);
    color: var(--ink, #0e0f10);
    font-family: Inter, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.back-link:hover[b-33lqays6ts],
.back-link:focus-visible[b-33lqays6ts],
.back-link:active[b-33lqays6ts] {
    border-color: var(--signal, #d94a1f);
    background: var(--ink, #0e0f10);
    color: var(--paper, #faf9f5) !important;
    transform: translateY(-1px);
    outline: none;
}

.back-link-icon[b-33lqays6ts] {
    font-size: 0.85rem;
    color: inherit !important;
    transition: transform 0.2s ease;
}

.back-link:hover .back-link-icon[b-33lqays6ts],
.back-link:focus-visible .back-link-icon[b-33lqays6ts] {
    transform: translateX(-2px);
}
/* /Components/Shared/Navigation/PageBreadcrumb.razor.rz.scp.css */
.page-breadcrumb[b-yohn8umzso] {
    --pb-ink: #0e0f10;
    --pb-signal: #d94a1f;
    --pb-muted: #8a8a82;
    --pb-faint: #d6d4ca;

    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 6px 0 8px;
    margin: 0 0 24px;
    font-family: var(--app-mono);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--pb-muted);
    line-height: 1.1;
}

.page-breadcrumb-link[b-yohn8umzso] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pb-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.18s ease, transform 0.18s ease;
}

.page-breadcrumb-link i[b-yohn8umzso] {
    color: inherit;
    font-size: 0.95em;
    line-height: 1;
}

.page-breadcrumb-link:hover[b-yohn8umzso],
.page-breadcrumb-link:focus-visible[b-yohn8umzso] {
    color: var(--pb-signal);
    outline: none;
}

.page-breadcrumb-home[b-yohn8umzso] {
    padding: 0;
    margin: 0;
    background: transparent;
}

.page-breadcrumb-home i[b-yohn8umzso] {
    font-size: 1em;
}

.page-breadcrumb-home:hover[b-yohn8umzso],
.page-breadcrumb-home:focus-visible[b-yohn8umzso] {
    background: transparent;
    color: var(--pb-signal);
    transform: translateY(-1px);
}

.page-breadcrumb-current[b-yohn8umzso] {
    color: var(--pb-ink);
    font-weight: 600;
    letter-spacing: 0.11em;
}

.page-breadcrumb-sep[b-yohn8umzso] {
    color: var(--pb-faint);
    font-weight: 400;
    user-select: none;
    transform: translateY(-1px);
    font-size: 0.92em;
}

@media (max-width: 767.98px) {
    .page-breadcrumb[b-yohn8umzso] {
        gap: 10px;
        margin-bottom: 18px;
        font-size: 0.85rem;
    }
}

@media (max-width: 575.98px) {
    .page-breadcrumb[b-yohn8umzso] {
        gap: 8px;
        font-size: 0.82rem;
        margin-bottom: 16px;
    }
}
/* /Components/Shared/Navigation/RelatedVehiclesChips.razor.rz.scp.css */
.related-vehicles-chips[b-nonka31t9k] {
    --paper-warm: #f3f2ee;
    --ink: #0e0f10;
    --signal: #d94a1f;
    --gray-muted: #8a8a82;
    --gray-divider: #e4e1d5;
    --card-border: #d6d4ca;

    margin-top: 40px;
    padding: 24px 28px;
    border: 1px solid var(--gray-divider);
    border-radius: 4px;
    background: var(--paper-warm);
}

.related-vehicles-chips-title[b-nonka31t9k] {
    margin: 0 0 14px;
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--signal);
}

.related-vehicles-chips-grid[b-nonka31t9k] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.related-vehicles-chip[b-nonka31t9k] {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: #ffffff;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.related-vehicles-chip:hover[b-nonka31t9k],
.related-vehicles-chip:focus-visible[b-nonka31t9k] {
    border-color: var(--signal);
    color: var(--signal);
    transform: translateY(-1px);
    outline: none;
}
/* /Components/Shared/Search/GlobalSearch.razor.rz.scp.css */
.global-search[b-sxv6alhw2z] {
    /* dark-header context tokens */
    --gs-cream: #f3f2ee;
    --gs-cream-muted: rgba(243, 242, 238, 0.55);
    --gs-surface: rgba(255, 255, 255, 0.06);
    --gs-surface-hover: rgba(255, 255, 255, 0.11);
    --gs-border: rgba(255, 255, 255, 0.16);
    --gs-signal: #d94a1f;
    --gs-signal-soft: rgba(217, 74, 31, 0.24);
    /* popup (paper) tokens */
    --gs-paper: #ffffff;
    --gs-paper-2: #f3f2ee;
    --gs-ink: #0e0f10;
    --gs-muted: #8a8a82;
    --gs-divider: #e4e1d5;
    --gs-card-border: #d6d4ca;
    --gs-shadow: rgba(14, 15, 16, 0.22);

    position: relative;
    font-family: "Inter", system-ui, sans-serif;
    flex-shrink: 0;
}

/* ---------- input pill ---------- */
.global-search-field[b-sxv6alhw2z] {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding: 0 14px;
    background: var(--gs-paper);
    border: 1px solid var(--gs-card-border);
    border-radius: 999px;
    cursor: text;
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.global-search-field:hover[b-sxv6alhw2z] { border-color: var(--gs-muted); }

.global-search-icon[b-sxv6alhw2z] {
    color: var(--gs-muted);
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: color 0.2s ease;
}
.global-search.is-open .global-search-icon[b-sxv6alhw2z] { color: var(--gs-signal); }

.global-search-input[b-sxv6alhw2z] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--gs-ink);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    /* Ellipsis instead of a hard clip when the placeholder/value outgrows the
       field - kicks in on the mobile drawer search at +25%/+50% a11y scale
       where the long localized placeholder no longer fits. */
    text-overflow: ellipsis;
}
.global-search-input[b-sxv6alhw2z]::placeholder { color: var(--gs-muted); }
.global-search-input[b-sxv6alhw2z]::-webkit-search-cancel-button { display: none; }

.global-search-clear[b-sxv6alhw2z] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 999px;
    background: var(--gs-paper-2);
    color: var(--gs-muted);
    cursor: pointer;
    font-size: 0.68rem;
    transition: color 0.15s ease, background 0.15s ease;
}
.global-search-clear:hover[b-sxv6alhw2z] { color: #fff; background: var(--gs-signal); }

.global-search-spinner[b-sxv6alhw2z] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 2px solid var(--gs-divider);
    border-top-color: var(--gs-signal);
    border-radius: 50%;
    animation: gs-spin-b-sxv6alhw2z 0.7s linear infinite;
}
@keyframes gs-spin-b-sxv6alhw2z { to { transform: rotate(360deg); } }

.global-search.is-open .global-search-field[b-sxv6alhw2z] {
    position: relative;
    z-index: 1090;
    background: var(--gs-paper);
    border-color: var(--gs-signal);
    box-shadow: 0 0 0 3px var(--gs-signal-soft), 0 14px 40px rgba(0, 0, 0, 0.45);
    animation: gs-field-pop-b-sxv6alhw2z 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes gs-field-pop-b-sxv6alhw2z {
    from { transform: scale(0.94); }
    to { transform: scale(1); }
}

/* ---------- spotlight backdrop ---------- */
/* Fixed full-viewport scrim that blurs + dims everything behind the focused
   search. Lives in the header's stacking context (header is fixed-top z1030),
   so it paints above all page content; the field + popup sit above it. Works
   identically on every viewport - desktop pill, mid icon, mobile drawer. */
.global-search-backdrop[b-sxv6alhw2z] {
    position: fixed;
    top: 0;
    left: 0;
    /* 100vw/100dvh (NOT inset:0) so the scrim covers the scrollbar gutter too.
       The app reserves a `scrollbar-gutter: stable` gutter on <html>; with
       inset:0 the fixed scrim stops at the layout-viewport edge, leaving the
       paper-coloured gutter exposed as a white strip down the right once the
       scroll lock hides the scrollbar. 100vw includes that gutter. */
    width: 100vw;
    height: 100dvh;
    z-index: 1080;
    background: rgba(14, 15, 16, 0.34);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: gs-fade-b-sxv6alhw2z 0.2s ease-out;
    cursor: default;
}
@keyframes gs-fade-b-sxv6alhw2z {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- popup (paper dropdown) ---------- */
.global-search-popup[b-sxv6alhw2z] {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: auto;
    width: 400px;
    max-width: min(94vw, 440px);
    max-height: min(70vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--gs-paper);
    border: 1px solid var(--gs-card-border);
    border-radius: 12px;
    box-shadow: 0 20px 52px var(--gs-shadow);
    padding: 6px;
    z-index: 1100;
    animation: gs-pop-b-sxv6alhw2z 0.16s ease-out;
    /* thin styled scrollbar - kills the chunky native bar glitch */
    scrollbar-width: thin;
    scrollbar-color: var(--gs-card-border) transparent;
}
.global-search-popup[b-sxv6alhw2z]::-webkit-scrollbar { width: 8px; }
.global-search-popup[b-sxv6alhw2z]::-webkit-scrollbar-track { background: transparent; }
.global-search-popup[b-sxv6alhw2z]::-webkit-scrollbar-thumb {
    background: var(--gs-card-border);
    border-radius: 999px;
    border: 2px solid var(--gs-paper);
}
@keyframes gs-pop-b-sxv6alhw2z {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.global-search-hint[b-sxv6alhw2z],
.global-search-empty[b-sxv6alhw2z] {
    margin: 0;
    padding: 18px 14px;
    color: var(--gs-muted);
    font-size: 0.85rem;
    text-align: center;
}

.global-search-section[b-sxv6alhw2z] { padding: 4px 0; }
.global-search-section + .global-search-section[b-sxv6alhw2z] { border-top: 1px solid var(--gs-divider); }
.global-search-section-title[b-sxv6alhw2z] {
    margin: 0;
    padding: 9px 12px 5px;
    font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gs-signal);
}

.global-search-result[b-sxv6alhw2z] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--gs-ink);
    transition: background 0.12s ease;
}
.global-search-result:hover[b-sxv6alhw2z],
.global-search-result:focus-visible[b-sxv6alhw2z] {
    background: rgba(217, 74, 31, 0.10);
    outline: none;
}

.global-search-result-media[b-sxv6alhw2z] {
    flex-shrink: 0;
    width: 50px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
    background: var(--gs-paper-2);
}
.global-search-result-media img[b-sxv6alhw2z] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.global-search-result-media-logo[b-sxv6alhw2z] { background: #fff; border: 1px solid var(--gs-divider); }
.global-search-result-media-logo img[b-sxv6alhw2z] { padding: 4px; }

.global-search-result-body[b-sxv6alhw2z] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.global-search-result-title[b-sxv6alhw2z] {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.global-search-result-title strong[b-sxv6alhw2z] { font-weight: 800; }
.global-search-result-sub[b-sxv6alhw2z] {
    font-size: 0.76rem;
    color: var(--gs-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.global-search-result-meta[b-sxv6alhw2z] {
    flex-shrink: 0;
    font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gs-ink);
}

/* ============================================================
   HEADER placement (desktop) - 3 stages by width
   ============================================================ */
/* Wide (≥1326): open input left of the nav. Widens on focus so the full
   placeholder + typed text is never clipped. */
@media (min-width: 1326px) {
    .global-search-header .global-search-field[b-sxv6alhw2z] { width: 260px; }
    .global-search-header.is-open .global-search-field[b-sxv6alhw2z] { width: 360px; }
}

/* Snug (1260-1325): nav crowds the bar - the pill shrinks to ~half width so it
   stops overflowing the nav. Click/focus pops it open into a wider absolute
   overlay above the blurred backdrop, so it shows the whole text and never
   shoves the nav. Below 1260 the header search is in the burger drawer. */
@media (min-width: 1260px) and (max-width: 1325.98px) {
    /* Pin the container height to the field height. When the field goes
       absolute on open the container would otherwise collapse to 0, dragging
       the popup's `top: 100%` anchor up over the field. */
    .global-search-header[b-sxv6alhw2z] { height: 38px; }
    .global-search-header .global-search-field[b-sxv6alhw2z] { width: 120px; }

    .global-search-header.is-open .global-search-field[b-sxv6alhw2z] {
        position: absolute;
        top: 0;
        left: 0;
        width: min(64vw, 440px);
    }
}

/* ============================================================
   DRAWER placement (mobile, inside burger) - full width
   ============================================================ */
.global-search-drawer[b-sxv6alhw2z] { width: 100%; }
.global-search-drawer .global-search-field[b-sxv6alhw2z] { width: 100%; height: 46px; border-radius: 12px; }
.global-search-drawer .global-search-input[b-sxv6alhw2z] { font-size: 1rem; }
/* Fixed (not absolute) so it escapes the burger drawer's `overflow-y: auto`,
   which was clipping the popup + killing its scroll. Anchored just below the
   header, inset from the edges → a clean rounded panel that shows the full
   result list and scrolls internally to the bottom of the viewport. */
.global-search-drawer .global-search-popup[b-sxv6alhw2z] {
    position: fixed;
    top: calc(var(--header-h, 55px) + 62px);
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - var(--header-h, 55px) - 86px);
    border-radius: 16px;
}

/* Show the right instance for the right viewport (burger appears ≤1259.98px). */
@media (max-width: 1259.98px) { .global-search-header[b-sxv6alhw2z] { display: none; } }
@media (min-width: 1260px) { .global-search-drawer[b-sxv6alhw2z] { display: none; } }

/* When the header collapses to burger mode at a WIDER width (JS `.is-compact`,
   driven by a11y font scale / very long nav), the search must follow the nav
   into the drawer instead of floating in the top bar. Hide the header instance,
   un-hide the drawer instance (it only actually shows once the burger opens, as
   it lives inside the drawer's .header-nav). */
.header.is-compact .global-search-header[b-sxv6alhw2z] { display: none; }
.header.is-compact .global-search-drawer[b-sxv6alhw2z] { display: block; }
/* /Components/Shared/Shells/AuthShell.razor.rz.scp.css */
.auth-page[b-gk1q8c12xy] {
    --paper: #faf9f5;
    --paper-warm: #f3f2ee;
    --ink: #0e0f10;
    --signal: #d94a1f;
    --signal-hover: #b83a15;
    --gray-muted: #8a8a82;
    --gray-faint: #d6d4ca;
    --gray-divider: #e4e1d5;
    --card-surface: #ffffff;
    --card-border: #d6d4ca;

    --error-bg: #fbe9e2;
    --error-text: #a8321a;
    --error-border: rgba(168, 50, 26, 0.28);

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 120px 20px 80px;
    background: var(--paper);
    font-family: Inter, sans-serif;
    color: var(--ink);
    position: relative;
    overflow: hidden;
}

.auth-page[b-gk1q8c12xy]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(217, 74, 31, 0.08) 0, transparent 38%),
        radial-gradient(circle at 88% 82%, rgba(14, 15, 16, 0.05) 0, transparent 42%);
    pointer-events: none;
    z-index: 0;
}

.auth-page[b-gk1q8c12xy]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 120px;
    transform: translateX(-50%);
    width: min(92vw, 520px);
    height: 1px;
    background: var(--gray-divider);
    z-index: 0;
}

.auth-card[b-gk1q8c12xy] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    padding: 44px 38px 36px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--card-surface);
    box-shadow: 0 18px 48px rgba(14, 15, 16, 0.08);
}

.auth-card[b-gk1q8c12xy]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--signal);
    border-radius: 4px 4px 0 0;
}

.auth-kicker[b-gk1q8c12xy] {
    display: inline-block;
    color: var(--signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.auth-title[b-gk1q8c12xy] {
    margin: 0 0 10px;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.auth-title-dot[b-gk1q8c12xy] {
    color: var(--signal);
}

.auth-subtitle[b-gk1q8c12xy] {
    margin: 0 0 28px;
    color: var(--gray-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.auth-error[b-gk1q8c12xy] {
    padding: 12px 14px;
    margin-bottom: 18px;
    border: 1px solid var(--error-border);
    border-left: 3px solid var(--error-text);
    border-radius: 4px;
    background: var(--error-bg);
    color: var(--error-text);
    font-size: 0.9rem;
    font-weight: 600;
}

/* ChildContent rules use ::deep to pierce Login/SignUp scopes */
[b-gk1q8c12xy] .auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

[b-gk1q8c12xy] .auth-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-gk1q8c12xy] .auth-field-label {
    color: var(--ink);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

[b-gk1q8c12xy] .auth-input {
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--paper);
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

[b-gk1q8c12xy] .auth-input::placeholder {
    color: var(--gray-muted);
}

[b-gk1q8c12xy] .auth-input:hover {
    border-color: var(--gray-muted);
}

[b-gk1q8c12xy] .auth-input:focus {
    border-color: var(--signal);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(217, 74, 31, 0.15);
    outline: none;
}

[b-gk1q8c12xy] .auth-hint {
    color: var(--gray-muted);
    font-size: 0.83rem;
}

[b-gk1q8c12xy] .auth-submit-btn {
    margin-top: 10px;
    min-height: 54px;
    padding: 0 28px;
    border: 0;
    border-radius: 4px;
    background: var(--signal);
    color: var(--paper);
    font-family: Inter, sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

[b-gk1q8c12xy] .auth-submit-btn:hover,
[b-gk1q8c12xy] .auth-submit-btn:focus-visible {
    background: var(--ink);
    transform: translateY(-1px);
    outline: none;
}

.auth-switch[b-gk1q8c12xy] {
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--gray-divider);
    color: var(--gray-muted);
    font-size: 0.92rem;
    font-weight: 500;
    text-align: center;
}

.auth-switch a[b-gk1q8c12xy] {
    color: var(--signal);
    font-weight: 700;
    text-decoration: none;
    margin-left: 4px;
    transition: color 0.2s ease;
}

.auth-switch a:hover[b-gk1q8c12xy] {
    color: var(--signal-hover);
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .auth-card[b-gk1q8c12xy] {
        padding: 32px 24px 28px;
    }
}

.auth-divider[b-gk1q8c12xy] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 18px;
    color: var(--gray-muted);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.auth-divider[b-gk1q8c12xy]::before,
.auth-divider[b-gk1q8c12xy]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gray-divider);
}

.auth-social-row[b-gk1q8c12xy] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.auth-social-btn[b-gk1q8c12xy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 12px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--card-surface);
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.auth-social-btn i[b-gk1q8c12xy] {
    font-size: 1rem;
    line-height: 1;
}

.auth-social-btn:hover[b-gk1q8c12xy],
.auth-social-btn:focus-visible[b-gk1q8c12xy] {
    transform: translateY(-1px);
    border-color: var(--ink);
    outline: none;
}

.auth-social-btn-google:hover i[b-gk1q8c12xy],
.auth-social-btn-google:focus-visible i[b-gk1q8c12xy] {
    color: #DB4437;
}

.auth-social-btn-facebook:hover[b-gk1q8c12xy],
.auth-social-btn-facebook:focus-visible[b-gk1q8c12xy] {
    background: #1877F2;
    border-color: #1877F2;
    color: #ffffff;
}

.auth-social-btn-facebook:hover i[b-gk1q8c12xy],
.auth-social-btn-facebook:focus-visible i[b-gk1q8c12xy] {
    color: #ffffff;
}

.auth-social-btn-apple:hover[b-gk1q8c12xy],
.auth-social-btn-apple:focus-visible[b-gk1q8c12xy] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.auth-social-btn-apple:hover i[b-gk1q8c12xy],
.auth-social-btn-apple:focus-visible i[b-gk1q8c12xy] {
    color: var(--paper);
}

@media (max-width: 479.98px) {
    .auth-social-row[b-gk1q8c12xy] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .auth-social-btn[b-gk1q8c12xy] {
        height: 48px;
    }
}
/* /Components/Shared/Shells/LegalShell.razor.rz.scp.css */
.about-page[b-jkmv051q8s] {
    --paper: #faf9f5;
    --paper-warm: #f3f2ee;
    --ink: #0e0f10;
    --signal: #d94a1f;
    --gray-muted: #8a8a82;
    --gray-faint: #d6d4ca;
    --gray-divider: #e4e1d5;
    --card-surface: #ffffff;
    --card-border: #d6d4ca;

    font-family: Inter, sans-serif;
    padding: 79px 0 80px;
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
}

.about-shell[b-jkmv051q8s] {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 32px;
}

.about-article[b-jkmv051q8s] {
    padding-top: 24px;
}

.about-hero[b-jkmv051q8s] {
    padding: 40px 0 32px;
    border-bottom: 1px solid var(--gray-divider);
    margin-bottom: 32px;
}

.about-kicker[b-jkmv051q8s] {
    display: inline-block;
    color: var(--signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.about-title[b-jkmv051q8s] {
    margin: 0 0 16px;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: clamp(2.2rem, 6vw, 3.8rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}

.about-dot[b-jkmv051q8s] {
    color: var(--signal);
    opacity: 0.45;
}

.about-lead[b-jkmv051q8s] {
    margin: 0;
    color: var(--gray-muted);
    font-size: 1.1rem;
    line-height: 1.55;
    max-width: 640px;
}

/* ChildContent rules use ::deep so they apply inside Privacy/Terms scopes */
[b-jkmv051q8s] .about-section {
    margin-bottom: 40px;
}

[b-jkmv051q8s] .about-section h2 {
    margin: 0 0 12px;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

[b-jkmv051q8s] .about-section p {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 0.98rem;
    line-height: 1.7;
}

[b-jkmv051q8s] .about-list {
    margin: 10px 0 0;
    padding: 0 0 0 20px;
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.8;
}

[b-jkmv051q8s] .about-list li {
    margin-bottom: 4px;
}

.about-partners[b-jkmv051q8s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 16px;
}

.about-partner[b-jkmv051q8s] {
    display: block;
    padding: 20px 22px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--card-surface);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.about-partner:hover[b-jkmv051q8s],
.about-partner:focus-visible[b-jkmv051q8s] {
    transform: translateY(-2px);
    border-color: var(--ink);
    box-shadow: 0 10px 28px rgba(14, 15, 16, 0.09);
    outline: none;
}

.about-partner:hover .about-partner-link[b-jkmv051q8s],
.about-partner:focus-visible .about-partner-link[b-jkmv051q8s] {
    text-decoration: underline;
}

.about-partner h3[b-jkmv051q8s] {
    margin: 0 0 4px;
    color: var(--ink);
    font-family: Inter, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.about-partner-role[b-jkmv051q8s] {
    color: var(--signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.about-partner p[b-jkmv051q8s] {
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 10px;
}

.about-partner-link[b-jkmv051q8s] {
    display: inline-block;
    color: var(--signal);
    font-family: var(--app-mono);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.about-partner-link:hover[b-jkmv051q8s],
.about-partner-link:focus-visible[b-jkmv051q8s] {
    text-decoration: underline;
}

.about-section-contact a[b-jkmv051q8s] {
    color: var(--signal);
    font-weight: 600;
    text-decoration: none;
}

.about-section-contact a:hover[b-jkmv051q8s] {
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .about-partners[b-jkmv051q8s] {
        grid-template-columns: 1fr;
    }

    .about-shell[b-jkmv051q8s] {
        padding: 0 20px;
    }
}