:root {
    --pwa-v2-page: #fafafa;
    --pwa-v2-surface: #ffffff;
    --pwa-v2-surface-soft: #f7f7f8;
    --pwa-v2-text: #4a4c55;
    --pwa-v2-muted: #78787f;
    --pwa-v2-border: #e4e4e7;
    --pwa-v2-brand: #c92d40;
    --pwa-v2-brand-strong: #a91f31;
    --pwa-v2-brand-soft: #fff1f3;
    --pwa-v2-control-radius: 12px;
    --pwa-v2-card-radius: 18px;
    --pwa-v2-sheet-radius: 24px;
}

/* Compositor-only page loading motion for consistently smooth navigation. */
.pwa-page-loader {
    background: rgb(250 250 250 / 96%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.pwa-page-loader__track {
    width: 108px;
    height: 4px;
}

.pwa-page-loader__track i {
    inset: 0 auto 0 0;
    width: 44%;
    border-radius: inherit;
    background: var(--pwa-primary);
    box-shadow: 0 0 10px rgb(201 45 64 / 24%);
    transform: translate3d(-120%, 0, 0) scaleX(0.72);
    transform-origin: center;
    will-change: transform;
    animation: pwa-page-loader-slide 920ms
        cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes pwa-page-loader-slide {
    0% {
        transform: translate3d(-120%, 0, 0) scaleX(0.72);
    }

    50% {
        transform: translate3d(92%, 0, 0) scaleX(1.18);
    }

    100% {
        transform: translate3d(245%, 0, 0) scaleX(0.72);
    }
}

body[data-pwa-release],
body[data-pwa-release] * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

body[data-pwa-release] img,
body[data-pwa-release] svg {
    -webkit-user-drag: none;
    user-drag: none;
}

.pwa-update-banner {
    position: fixed;
    z-index: 85;
    right: 14px;
    bottom: max(env(safe-area-inset-bottom, 0px), 14px);
    left: 14px;
    display: grid;
    max-width: 430px;
    min-height: 82px;
    margin: 0 auto;
    padding: 12px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 20px;
    color: #fff;
    background: rgb(39 39 42 / 96%);
    box-shadow: 0 18px 52px rgb(24 24 27 / 30%);
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    backdrop-filter: blur(16px);
}

.pwa-update-banner[hidden] {
    display: none;
}

.pwa-update-banner.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.pwa-update-banner__mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: #c92d40;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 25px;
    line-height: 1;
}

.pwa-update-banner__copy {
    min-width: 0;
    text-align: right;
}

.pwa-update-banner__copy strong,
.pwa-update-banner__copy small {
    display: block;
}

.pwa-update-banner__copy strong {
    font-size: 12px;
    font-weight: 900;
}

.pwa-update-banner__copy small {
    margin-top: 3px;
    color: rgb(255 255 255 / 70%);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.7;
}

.pwa-update-banner__actions {
    display: grid;
    gap: 5px;
}

.pwa-update-banner__actions button {
    min-width: 74px;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
}

.pwa-update-banner__actions button:first-child {
    color: #fff;
    background: #c92d40;
}

.pwa-update-banner__actions button:last-child {
    color: rgb(255 255 255 / 72%);
    background: rgb(255 255 255 / 10%);
}

.pwa-update-banner__actions button:disabled {
    cursor: wait;
    opacity: 0.65;
}

body.pwa-has-bottom-nav .pwa-update-banner,
body.epc-pwa-body .pwa-update-banner {
    bottom: calc(76px + max(env(safe-area-inset-bottom, 0px), 12px));
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--pwa-v2-brand) !important;
    outline-offset: 2px !important;
}

.pwa-unified-search-input::placeholder,
#epc-app[data-pwa-mode="1"] input::placeholder {
    color: #71717a !important;
    opacity: 1;
}

/* The bar itself carries nothing — no edge, no plate, no blur, no padding.
   It is only the frame the dock is painted in, so the dock owns every pixel
   down to the bottom of the screen. */
.pwa-has-bottom-nav .pwa-bottom-nav,
#epc-app[data-pwa-mode="1"] .epc-pwa-taskbar {
    padding: 0 !important;
    border-top: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Matches the selector app.css uses, so this wins on order rather than by
   accident of weight. */
body.pwa-has-bottom-nav {
    padding-bottom: calc(
        76px + max(env(safe-area-inset-bottom, 0px), 8px)
    ) !important;
}

/* The dock: smoked glass seated on the bottom edge, rounded across the top
   only. The dark fill is what makes it read as glass — a light one over a
   light page has nothing to filter — and the inset highlight is the lit top
   edge every piece of real glass has. */
.pwa-has-bottom-nav .pwa-bottom-dock,
#epc-app[data-pwa-mode="1"] .epc-pwa-taskbar__dock {
    width: 100% !important;
    max-width: 520px !important;
    /* Height and padding both carry the inset, so the row of buttons keeps
       its 64px while the glass runs under the home indicator instead of
       leaving a pale strip below it. */
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding-right: 6px !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: 6px !important;
    border: 1px solid rgb(255 255 255 / 12%) !important;
    border-bottom: 0 !important;
    border-radius: 26px 26px 0 0 !important;
    /* Wine rather than neutral black: the page above it is warm and the
       brand is crimson, so a grey slab reads as a foreign object. Two stops
       so the glass has a direction to it instead of one flat fill. */
    background: linear-gradient(
        180deg,
        rgb(48 18 24 / 88%) 0%,
        rgb(30 12 16 / 92%) 100%
    ) !important;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 14%),
        0 -8px 26px rgb(23 8 11 / 26%) !important;
    backdrop-filter: blur(22px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
}

.pwa-has-bottom-nav .pwa-bottom-dock {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

#epc-app[data-pwa-mode="1"] .epc-pwa-taskbar__dock {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.pwa-has-bottom-nav .pwa-bottom-link,
.pwa-has-bottom-nav .pwa-bottom-search,
#epc-app[data-pwa-mode="1"] .epc-pwa-taskbar__button {
    height: 56px !important;
    min-height: 56px !important;
    padding: 4px 1px 2px !important;
    gap: 2px !important;
    /* Rounded like the dock holding them, so the active and pressed states
       read as part of the same shape. */
    border-radius: 18px !important;
    /* Off-white rather than white: on glass, a resting icon that is already
       at full strength leaves the active one nothing to gain. */
    color: rgb(255 255 255 / 72%) !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Active state: the brand capsule sits behind the icon alone, not behind
   the whole cell. A block that tall next to the rounded corner of the dock
   reads as a button stuck on top of the glass; this reads as part of it. */
.pwa-has-bottom-nav .pwa-bottom-link.is-active,
.pwa-has-bottom-nav .pwa-bottom-link--search.is-active,
#epc-app[data-pwa-mode="1"] .epc-pwa-taskbar__button.is-active,
#epc-app[data-pwa-mode="1"]
    .epc-pwa-taskbar__button.is-search[aria-expanded="true"] {
    color: #fff !important;
    background: transparent !important;
    font-weight: 700 !important;
}

.pwa-has-bottom-nav .pwa-bottom-link.is-active .pwa-bottom-link__icon,
.pwa-has-bottom-nav
    .pwa-bottom-link--search.is-active .pwa-bottom-link__icon,
#epc-app[data-pwa-mode="1"] .epc-pwa-taskbar__button.is-active > i,
#epc-app[data-pwa-mode="1"]
    .epc-pwa-taskbar__button.is-search[aria-expanded="true"] > i {
    width: 46px !important;
    border-radius: 999px !important;
    background: #d93b52 !important;
    box-shadow: 0 4px 14px rgb(217 59 82 / 42%) !important;
}

.pwa-has-bottom-nav .pwa-bottom-link::before {
    display: none !important;
}

.pwa-has-bottom-nav .pwa-bottom-link,
.pwa-has-bottom-nav .pwa-bottom-link__icon,
.pwa-has-bottom-nav .pwa-bottom-link__icon svg {
    transform: none !important;
}

.pwa-has-bottom-nav .pwa-bottom-link__icon,
#epc-app[data-pwa-mode="1"] .epc-pwa-taskbar__button > i {
    width: 32px !important;
    height: 30px !important;
}

.pwa-has-bottom-nav .pwa-bottom-link__icon svg,
#epc-app[data-pwa-mode="1"] .epc-pwa-taskbar__button svg {
    width: 25px !important;
    height: 25px !important;
    stroke-width: 1.8;
}

/* The ring around the badge cuts it out of the icon behind it, so it has to
   be the colour of the glass now, not of the page. */
.pwa-has-bottom-nav .pwa-bottom-cart-count,
#epc-app[data-pwa-mode="1"] .epc-pwa-taskbar__badge {
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    padding-right: 4px !important;
    padding-left: 4px !important;
    border-color: rgb(30 30 34 / 92%) !important;
    font-size: 12px !important;
    color: #fff !important;
    background: #e0394f !important;
}

/* On the red capsule the badge would disappear into it. */
.pwa-has-bottom-nav .pwa-bottom-link.is-active .pwa-bottom-cart-count {
    color: #b0243a !important;
    background: #fff !important;
    border-color: rgb(201 45 64 / 92%) !important;
}

.pwa-bottom-cart-count.is-updated {
    animation: pwa-cart-count-pop 420ms cubic-bezier(.2, .9, .25, 1.25);
}

@keyframes pwa-cart-count-pop {
    0% {
        transform: scale(.55);
    }

    55% {
        transform: scale(1.28);
    }

    100% {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-bottom-cart-count.is-updated {
        animation: none;
    }
}

.pwa-button {
    position: relative;
    display: inline-flex;
    min-height: 52px;
    padding: 0 20px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--pwa-v2-control-radius) !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 160ms ease, background-color 160ms ease,
        box-shadow 160ms ease, color 160ms ease, transform 120ms ease;
}

.pwa-button--primary {
    border-color: var(--pwa-v2-brand-strong) !important;
    color: #fff !important;
    background: var(--pwa-v2-brand) !important;
    box-shadow: 0 4px 12px rgb(201 45 64 / 14%),
        inset 0 1px rgb(255 255 255 / 16%) !important;
}

.pwa-button--secondary {
    border-color: var(--pwa-v2-border) !important;
    color: #5c5f68 !important;
    background: var(--pwa-v2-surface) !important;
    box-shadow: none !important;
}

.pwa-button--dark {
    border-color: #27272a !important;
    color: #fff !important;
    background: #27272a !important;
    box-shadow: 0 3px 10px rgb(24 24 27 / 12%) !important;
}

.pwa-button--danger {
    border-color: rgb(201 45 64 / 16%) !important;
    color: var(--pwa-v2-brand-strong) !important;
    background: var(--pwa-v2-brand-soft) !important;
    box-shadow: none !important;
}

.pwa-button--compact {
    min-height: 44px;
    padding: 0 10px;
    border-radius: 11px !important;
    font-size: 12px;
    font-weight: 600;
}

.pwa-button:active:not(:disabled),
.pwa-icon-button:active:not(:disabled),
.pwa-stepper-button:active:not(:disabled) {
    box-shadow: none !important;
    transform: translateY(1px) scale(.98);
}

.pwa-button:disabled,
.pwa-icon-button:disabled,
.pwa-stepper-button:disabled {
    cursor: not-allowed;
    opacity: .5;
    box-shadow: none !important;
}

.pwa-icon-button,
.pwa-stepper-button {
    display: grid;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid #e4e4e7;
    border-radius: var(--pwa-v2-control-radius);
    color: #5c5f68;
    background: #fff;
    box-shadow: none;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    transition: border-color 160ms ease, background-color 160ms ease,
        box-shadow 160ms ease, color 160ms ease, transform 120ms ease;
}

.pwa-icon-button--danger {
    border-color: rgb(201 45 64 / 14%);
    color: #c92d40;
    background: #fff5f6;
}

.pwa-action-row {
    border-radius: 14px;
    transition: background-color 150ms ease, transform 120ms ease;
}

.pwa-action-row:active {
    background: #f7f7f8;
    transform: scale(.99);
}

.pwa-topbar__button {
    width: 44px;
    height: 44px;
    border-color: transparent;
    border-radius: 12px;
    color: #5c5f68;
    background: transparent;
    box-shadow: none;
}

.pwa-topbar__history .pwa-topbar__button {
    width: 44px;
    height: 44px;
    border-color: transparent;
    background: transparent;
}

.pwa-has-bottom-nav .pwa-bottom-link,
#epc-app[data-pwa-mode="1"] .epc-pwa-taskbar__button {
    transition: background-color 150ms ease, color 150ms ease,
        transform 120ms ease !important;
}

.pwa-has-bottom-nav .pwa-bottom-link:active,
#epc-app[data-pwa-mode="1"] .epc-pwa-taskbar__button:active {
    transform: scale(.95) !important;
}

.pwa-app-launcher {
    margin-top: 14px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.pwa-app-tile {
    min-height: 96px;
    padding: 12px !important;
    flex-direction: row !important;
    justify-content: flex-start;
    gap: 10px !important;
    border: 1px solid #e7e7ea !important;
    border-radius: 18px;
    background: rgb(255 255 255 / 88%) !important;
    box-shadow: 0 7px 20px rgb(24 24 27 / 5%);
    text-align: right !important;
    transition: border-color 160ms ease, box-shadow 160ms ease,
        color 160ms ease, transform 120ms ease !important;
}

.pwa-app-tile .pwa-app-tile__icon {
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 auto;
    border-radius: 15px !important;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 65%),
        0 5px 12px rgb(24 24 27 / 7%) !important;
}

.pwa-app-tile[data-tone="red"] .pwa-app-tile__icon {
    color: #c92d40 !important;
    background: #fff1f3 !important;
}

.pwa-app-tile[data-tone="blue"] .pwa-app-tile__icon {
    color: #315f86 !important;
    background: #eef4f8 !important;
}

.pwa-app-tile[data-tone="amber"] .pwa-app-tile__icon,
.pwa-app-tile[data-tone="cyan"] .pwa-app-tile__icon {
    color: #52525b !important;
    background: #f2f2f4 !important;
}

.pwa-app-tile .pwa-app-tile__icon svg {
    width: 25px !important;
    height: 25px !important;
}

.pwa-app-tile > strong {
    min-height: 0 !important;
    flex: 1;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.7 !important;
    text-align: right;
}

.pwa-app-tile:active {
    border-color: rgb(201 45 64 / 24%) !important;
    box-shadow: 0 3px 9px rgb(24 24 27 / 5%);
    transform: translateY(1px) scale(.985) !important;
}

.pwa-feature-rail {
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
}

.pwa-home-main {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.pwa-feature-rail__dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
}

.pwa-feature-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d4d4d8;
    transition: width 220ms ease, background 220ms ease;
    cursor: pointer;
}

.pwa-feature-dot.is-active {
    width: 20px;
    background: var(--pwa-primary, #c92d40);
}

.pwa-feature-rail__track {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--pwa-v2-card-radius);
    aspect-ratio: 2 / 1;
    box-shadow: 0 12px 28px rgb(103 73 179 / 16%);
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.pwa-feature-card {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    min-width: 0;
    height: 100%;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 72%);
    border-radius: var(--pwa-v2-card-radius);
    color: var(--pwa-v2-text);
    background: #eef0f4;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    -webkit-tap-highlight-color: transparent;
    transition: none;
}

.pwa-feature-card.is-active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
}

.pwa-feature-rail.is-dragging,
.pwa-feature-rail.is-dragging * {
    cursor: grabbing;
}

.pwa-feature-rail.is-dragging .pwa-feature-card.is-active {
    transform: translate3d(var(--pwa-feature-drag-x, 0), 0, 0) scale(.99);
    transition: none;
}

.pwa-feature-rail.is-dragging .pwa-feature-card__copy {
    pointer-events: none;
}

.pwa-feature-card > picture,
.pwa-feature-card > picture > img {
    display: block;
    width: 100%;
    height: 100%;
}

.pwa-feature-card > picture > img {
    object-fit: cover;
    background: #eef0f4;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

.pwa-feature-card::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(
        270deg,
        rgb(255 238 243 / 18%) 0,
        rgb(255 238 243 / 8%) 35%,
        transparent 56%
    );
    content: "";
    pointer-events: none;
}

.pwa-feature-card--parts::after {
    background: linear-gradient(
        90deg,
        rgb(232 245 255 / 18%) 0,
        rgb(232 245 255 / 8%) 36%,
        transparent 58%
    );
}

.pwa-feature-card--ecosystem::after {
    background: linear-gradient(
        90deg,
        rgb(19 10 73 / 8%) 0,
        transparent 42% 58%,
        rgb(19 10 73 / 8%) 100%
    );
}

.pwa-feature-card__copy {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 16px;
    display: flex;
    width: 46%;
    min-height: 116px;
    padding: 11px 12px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border: 0;
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(135deg, rgb(255 255 255 / 25%), rgb(255 255 255 / 10%));
    box-shadow: 0 8px 24px rgb(38 25 72 / 7%), inset 0 1px 0 rgb(255 255 255 / 24%);
    text-align: right;
    text-shadow: 0 2px 12px rgb(18 8 67 / 22%);
    -webkit-backdrop-filter: blur(12px) saturate(145%);
    backdrop-filter: blur(12px) saturate(145%);
    transform: translateY(-50%);
}

.pwa-feature-card--parts .pwa-feature-card__copy {
    right: auto;
    left: 16px;
}

.pwa-feature-card__copy small {
    color: rgb(255 255 255 / 82%);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8;
}

.pwa-feature-card__copy strong {
    margin-top: 3px;
    font-size: clamp(13px, 3.8vw, 17px);
    font-weight: 700;
    line-height: 1.6;
}

.pwa-feature-ecosystem__title {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 14px;
    display: flex;
    width: 42%;
    min-height: 108px;
    padding: 10px 11px;
    align-items: center;
    border-radius: 17px;
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, rgb(21 10 75 / 24%), rgb(91 46 179 / 9%));
    box-shadow: 0 9px 25px rgb(16 8 64 / 12%), inset 0 1px 0 rgb(255 255 255 / 14%);
    text-align: right;
    text-shadow: 0 2px 12px rgb(18 8 67 / 22%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    transform: translateY(-50%);
}

.pwa-feature-ecosystem__title strong,
.pwa-feature-ecosystem__title strong > span {
    display: block;
}

.pwa-feature-ecosystem__title strong {
    font-size: clamp(13px, 3.8vw, 17px);
    font-weight: 750;
    line-height: 1.75;
}

.pwa-feature-ecosystem__title bdi {
    font-family: Arial, sans-serif;
    font-weight: 800;
    letter-spacing: .04em;
}

.pwa-feature-brands {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 12px;
    display: grid;
    width: 42%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    transform: translateY(-50%);
}

.pwa-feature-brand {
    display: grid;
    height: clamp(27px, 7.4vw, 36px);
    place-items: center;
    overflow: hidden;
    border-radius: 10px;
    border: 0;
    background: rgb(255 255 255 / 48%);
    box-shadow: 0 5px 14px rgb(20 9 74 / 9%), inset 0 1px 0 rgb(255 255 255 / 24%);
    -webkit-backdrop-filter: blur(8px) saturate(125%);
    backdrop-filter: blur(8px) saturate(125%);
}

.pwa-feature-brand img {
    width: 62%;
    max-width: 25px;
    height: 62%;
    max-height: 22px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.pwa-feature-brand--lexus img {
    transform: scale(1.22);
}

.pwa-quick-actions {
    display: grid;
    margin-top: 14px;
    margin-bottom: 14px;
    padding: 5px 0 3px;
    border: 0;
    background: transparent;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.pwa-quick-action {
    --pwa-quick-rgb: 221 60 78;
    --pwa-quick-deep: #c92d40;
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 84px;
    padding: 4px 2px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #5c5f68;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: color 140ms ease, transform 140ms ease;
}

.pwa-quick-action:nth-child(2) {
    --pwa-quick-rgb: 112 86 222;
    --pwa-quick-deep: #6849c9;
}

.pwa-quick-action:nth-child(3) {
    --pwa-quick-rgb: 43 151 214;
    --pwa-quick-deep: #2385c2;
}

.pwa-quick-action:nth-child(4) {
    --pwa-quick-rgb: 211 70 151;
    --pwa-quick-deep: #b83782;
}

.pwa-quick-action__icon {
    position: relative;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    overflow: visible;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(
        145deg,
        rgb(var(--pwa-quick-rgb) / 78%),
        var(--pwa-quick-deep)
    );
    transition: transform 140ms ease;
}

.pwa-quick-action__icon::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border-radius: 15px 0 100% 0;
    background: rgb(255 255 255 / 12%);
    content: "";
}

.pwa-quick-action__icon svg {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
}

.pwa-quick-action > span:last-child {
    position: relative;
    z-index: 2;
    overflow: hidden;
    max-width: 100%;
    padding: 0 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-quick-action__badge {
    position: absolute;
    z-index: 4;
    top: -5px;
    left: -5px;
    display: grid;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: var(--pwa-v2-brand);
    font-size: 12px;
    font-weight: 700;
}

.pwa-quick-action:active {
    color: var(--pwa-v2-brand);
    transform: translateY(1px) scale(.975);
}

.pwa-quick-action:active .pwa-quick-action__icon {
    transform: scale(.94);
}

html[data-pwa-theme="dark"] .pwa-quick-action {
    color: #f4f4f5;
}

.pwa-app-recent {
    overflow: hidden;
    margin-top: auto !important;
    border: 0 !important;
    border-radius: var(--pwa-v2-card-radius) !important;
    background: var(--pwa-v2-surface) !important;
    box-shadow: none !important;
}

.pwa-app-recent__summary {
    display: flex;
    min-height: 56px;
    padding: 8px 14px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: default;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.pwa-app-recent__summary::-webkit-details-marker {
    display: none;
}

.pwa-app-recent__heading {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    padding-right: 10px;
    color: #5f6068;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
}

.pwa-app-recent__heading::before {
    position: absolute;
    right: 0;
    width: 3px;
    height: 20px;
    border-radius: 999px;
    background: linear-gradient(to bottom, #e55268, #7a57dc);
    content: "";
}

.pwa-app-recent__toggle {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    color: #a4a4ac;
    transition: transform 180ms ease;
}

.pwa-app-recent__toggle svg {
    width: 16px;
    height: 16px;
}

.pwa-app-recent[open] .pwa-app-recent__toggle {
    transform: rotate(-90deg);
}

.pwa-app-recent__body {
    padding: 0 14px 10px;
    border-top: 1px solid #f0f0f2;
}

.pwa-app-recent__list {
    display: block;
}

.pwa-app-recent__item {
    display: grid;
    min-height: 62px;
    padding: 9px 2px;
    align-items: center;
    color: inherit;
    grid-template-columns: minmax(0, 1fr) 22px;
    gap: 8px;
    transition: color 150ms ease, transform 130ms ease;
}

.pwa-app-recent__item.has-brand-logo {
    grid-template-columns: 40px minmax(0, 1fr) 24px;
}

.pwa-app-recent__item + .pwa-app-recent__item {
    border-top: 1px solid #f0f0f2;
}

.pwa-app-recent__copy {
    display: block;
    min-width: 0;
    text-align: right;
}

.pwa-app-recent__brand {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
}

.pwa-app-recent__brand img {
    display: block;
    width: 31px;
    height: 31px;
    filter: saturate(.48);
    object-fit: contain;
    opacity: .44;
}

.pwa-app-recent__copy strong,
.pwa-app-recent__copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-app-recent__copy strong {
    color: #74757e;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.7;
    text-align: start;
    unicode-bidi: plaintext;
}

.pwa-app-recent__copy small {
    margin-top: 2px;
    color: #92939c;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .025em;
    line-height: 1.5;
    direction: ltr;
    text-align: left;
}

.pwa-app-recent__arrow {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: #b8b8c0;
}

.pwa-app-recent__arrow svg {
    width: 15px;
    height: 15px;
}

.pwa-app-recent__item:active {
    color: var(--pwa-v2-brand);
    transform: scale(.985);
}

.pwa-app-recent__all {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-top: 1px solid #f0f0f2;
    color: var(--pwa-v2-brand);
    font-size: 12px;
    font-weight: 650;
    transition: transform 130ms ease;
}

.pwa-app-recent__all svg {
    width: 15px;
    height: 15px;
}

.pwa-app-recent__all:active {
    transform: scale(.985);
}

html[data-pwa-theme="dark"] .pwa-app-recent {
    background: #24252b !important;
}

html[data-pwa-theme="dark"] .pwa-app-recent__heading,
html[data-pwa-theme="dark"] .pwa-app-recent__copy strong {
    color: #f4f4f5;
}

html[data-pwa-theme="dark"] .pwa-app-recent__copy small {
    color: #b7b7bf;
}

html[data-pwa-theme="dark"] .pwa-app-recent__brand img {
    filter: saturate(.58) brightness(1.25) contrast(.8);
    opacity: .72;
}

html[data-pwa-theme="dark"] .pwa-app-recent__body,
html[data-pwa-theme="dark"] .pwa-app-recent__item + .pwa-app-recent__item,
html[data-pwa-theme="dark"] .pwa-app-recent__all {
    border-color: #35363d;
}

.pwa-profile-screen {
    min-height: 100dvh;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.pwa-profile-main {
    width: min(100%, 520px);
    padding: 16px;
    margin: 0 auto;
}

.pwa-profile-account {
    overflow: hidden;
    padding: 18px;
    border: 1px solid var(--pwa-v2-border);
    border-radius: var(--pwa-v2-card-radius);
    color: var(--pwa-v2-text);
    background: var(--pwa-v2-surface);
}

.pwa-profile-account h1 {
    font-size: 18px !important;
    font-weight: 700 !important;
}

.pwa-profile-account__icon {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 14px;
    color: var(--pwa-v2-brand);
    background: var(--pwa-v2-brand-soft);
}

.pwa-profile-account__icon svg {
    width: 24px;
    height: 24px;
}

.pwa-passkey-settings {
    display: grid;
    min-height: 76px;
    align-items: center;
    padding: 12px;
    margin-top: 12px;
    border: 1px solid rgb(201 45 64 / 14%);
    border-radius: 20px;
    background: var(--pwa-v2-surface);
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
}

.pwa-passkey-settings__icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 15px;
    color: var(--pwa-v2-brand);
    background: var(--pwa-v2-brand-soft);
}

.pwa-passkey-settings__icon svg {
    width: 25px;
    height: 25px;
}

.pwa-passkey-settings__copy {
    display: block;
    min-width: 0;
}

.pwa-passkey-settings__copy strong,
.pwa-passkey-settings__copy small {
    display: block;
}

.pwa-passkey-settings__copy strong {
    color: var(--pwa-v2-text);
    font-size: 14px;
    font-weight: 500;
}

.pwa-passkey-settings__copy small {
    margin-top: 3px;
    color: var(--pwa-v2-muted);
    font-size: 12px;
    font-weight: 400;
}

.pwa-passkey-settings__button {
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid rgb(201 45 64 / 18%);
    border-radius: 12px;
    color: var(--pwa-v2-brand);
    background: var(--pwa-v2-brand-soft);
    font-size: 12px;
    font-weight: 500;
}

.pwa-passkey-settings__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.pwa-passkey-settings__button--danger {
    border-color: rgb(180 35 24 / 14%);
    color: #b42318;
    background: #fff4f2;
}

.pwa-passkey-settings__button--danger.is-confirming {
    color: #fff;
    background: #b42318;
}

.pwa-passkey-settings__button:disabled {
    cursor: wait;
    opacity: .65;
}

.pwa-passkey-settings__message {
    padding: 8px 10px;
    margin: 2px 0 0;
    border-radius: 11px;
    grid-column: 1 / -1;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
}

.pwa-passkey-settings__message.is-success {
    color: #067647;
    background: #ecfdf3;
}

.pwa-passkey-settings__message.is-error {
    color: #b42338;
    background: #fff1f3;
}

html[data-pwa-theme="dark"] .pwa-passkey-settings {
    border-color: #3a3b43;
}

html[data-pwa-theme="dark"] .pwa-passkey-settings__button--danger {
    border-color: rgb(253 162 155 / 18%);
    color: #fda29b;
    background: rgb(180 35 24 / 14%);
}

html[data-pwa-theme="dark"]
    .pwa-passkey-settings__button--danger.is-confirming {
    color: #fff;
    background: #b42318;
}

@media (max-width: 390px) {
    .pwa-passkey-settings {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .pwa-passkey-settings__actions {
        justify-content: flex-start;
        grid-column: 1 / -1;
    }
}

.pwa-passkey-suggestion {
    position: fixed;
    z-index: 10020;
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(84px + env(safe-area-inset-bottom));
    left: max(14px, env(safe-area-inset-left));
    display: grid;
    max-width: 430px;
    padding: 14px;
    margin-inline: auto;
    border: 1px solid rgb(201 45 64 / 16%);
    border-radius: 20px;
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 18px 48px rgb(31 41 55 / 16%);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 220ms ease, transform 220ms ease;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px 11px;
    backdrop-filter: blur(16px);
}

.pwa-passkey-suggestion.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.pwa-passkey-suggestion__icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 15px;
    color: var(--pwa-v2-brand);
    background: var(--pwa-v2-brand-soft);
}

.pwa-passkey-suggestion__icon svg {
    width: 27px;
    height: 27px;
}

.pwa-passkey-suggestion__copy {
    align-self: center;
}

.pwa-passkey-suggestion__copy strong,
.pwa-passkey-suggestion__copy small {
    display: block;
}

.pwa-passkey-suggestion__copy strong {
    color: var(--pwa-v2-text);
    font-size: 14px;
    font-weight: 500;
}

.pwa-passkey-suggestion__copy small {
    margin-top: 2px;
    color: var(--pwa-v2-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;
}

.pwa-passkey-suggestion__actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, .65fr);
    gap: 8px;
}

.pwa-passkey-suggestion__actions button {
    min-height: 40px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
}

.pwa-passkey-suggestion__actions button:first-child {
    color: #fff;
    background: var(--pwa-v2-brand);
}

.pwa-passkey-suggestion__actions button:last-child {
    color: var(--pwa-v2-muted);
    background: var(--pwa-v2-surface-soft);
}

.pwa-passkey-suggestion__actions button:disabled {
    cursor: wait;
    opacity: .7;
}

.pwa-passkey-suggestion__message {
    padding: 8px 10px;
    margin: 0;
    border-radius: 11px;
    grid-column: 1 / -1;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;
}

.pwa-passkey-suggestion__message.is-success {
    color: #067647;
    background: #ecfdf3;
}

.pwa-passkey-suggestion__message.is-error {
    color: #b42338;
    background: #fff1f3;
}

html[data-pwa-theme="dark"] .pwa-passkey-suggestion {
    border-color: #44454d;
    background: rgb(38 39 46 / 96%);
    box-shadow: 0 18px 48px rgb(0 0 0 / 28%);
}

@media (prefers-reduced-motion: reduce) {
    .pwa-passkey-suggestion {
        transition: none;
    }
}

.pwa-active-sessions {
    overflow: hidden;
    border: 1px solid var(--pwa-v2-border);
    border-radius: 24px;
    background: var(--pwa-v2-surface);
    box-shadow: 0 10px 30px rgb(24 24 27 / 5%);
}

.pwa-active-sessions__header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px;
    border-bottom: 1px solid var(--pwa-v2-border);
}

.pwa-active-sessions__header-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border-radius: 15px;
    color: var(--pwa-v2-brand);
    background: var(--pwa-v2-brand-soft);
}

.pwa-active-sessions__header-icon svg {
    width: 25px;
    height: 25px;
}

.pwa-active-sessions__header h1 {
    color: var(--pwa-v2-text);
    font-size: 16px;
    font-weight: 600;
}

.pwa-active-sessions__header p {
    margin-top: 2px;
    color: var(--pwa-v2-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;
}

.pwa-active-sessions__list {
    display: grid;
    padding: 5px 14px;
}

.pwa-active-session {
    display: grid;
    min-height: 84px;
    align-items: center;
    padding: 12px 0;
    grid-template-columns: 43px minmax(0, 1fr) auto;
    gap: 10px;
}

.pwa-active-session + .pwa-active-session {
    border-top: 1px solid var(--pwa-v2-border);
}

.pwa-active-session__device {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border-radius: 14px;
    color: #71717a;
    background: var(--pwa-v2-surface-soft);
}

.pwa-active-session.is-current .pwa-active-session__device {
    color: var(--pwa-v2-brand);
    background: var(--pwa-v2-brand-soft);
}

.pwa-active-session__device svg {
    width: 24px;
    height: 24px;
}

.pwa-active-session__copy {
    min-width: 0;
}

.pwa-active-session__title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.pwa-active-session__title strong {
    overflow: hidden;
    color: var(--pwa-v2-text);
    font-size: 13px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-active-session__title span {
    padding: 2px 6px;
    border-radius: 99px;
    color: #067647;
    background: #ecfdf3;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.pwa-active-session__copy p,
.pwa-active-session__copy small {
    display: block;
    overflow: hidden;
    color: var(--pwa-v2-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.65;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-active-session__copy p {
    margin-top: 2px;
}

.pwa-active-session__copy small bdi {
    margin-right: 3px;
}

.pwa-active-session form button {
    display: grid;
    min-width: 38px;
    min-height: 38px;
    place-items: center;
    padding: 0 9px;
    border: 1px solid rgb(180 35 24 / 12%);
    border-radius: 12px;
    color: #b42318;
    background: #fff4f2;
    font-size: 12px;
    font-weight: 500;
    grid-template-columns: 17px auto;
    gap: 4px;
}

.pwa-active-session form button svg {
    width: 17px;
    height: 17px;
}

.pwa-active-sessions__empty {
    padding: 26px 14px;
    color: var(--pwa-v2-muted);
    font-size: 13px;
    font-weight: 400;
    text-align: center;
}

.pwa-session-confirm {
    position: fixed;
    z-index: 10050;
    inset: 0;
    display: grid;
    padding: 16px;
    place-items: end center;
}

.pwa-session-confirm.hidden {
    display: none;
}

.pwa-session-confirm__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgb(24 24 27 / 34%);
    opacity: 0;
    transition: opacity 180ms ease;
    backdrop-filter: blur(5px);
}

.pwa-session-confirm__panel {
    position: relative;
    width: min(100%, 420px);
    padding: 18px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    border: 1px solid var(--pwa-v2-border);
    border-radius: 24px;
    background: var(--pwa-v2-surface);
    box-shadow: 0 24px 70px rgb(24 24 27 / 22%);
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.pwa-session-confirm.is-visible .pwa-session-confirm__backdrop,
.pwa-session-confirm.is-visible .pwa-session-confirm__panel {
    opacity: 1;
}

.pwa-session-confirm.is-visible .pwa-session-confirm__panel {
    transform: translateY(0);
}

.pwa-session-confirm__icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 15px;
    color: #b42318;
    background: #fff4f2;
}

.pwa-session-confirm__icon svg {
    width: 24px;
    height: 24px;
}

.pwa-session-confirm h2 {
    margin-top: 13px;
    color: var(--pwa-v2-text);
    font-size: 16px;
    font-weight: 600;
}

.pwa-session-confirm p {
    margin-top: 5px;
    color: var(--pwa-v2-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
}

.pwa-session-confirm__actions {
    display: grid;
    margin-top: 16px;
    grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
    gap: 8px;
}

.pwa-session-confirm__actions button {
    min-height: 44px;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 500;
}

.pwa-session-confirm__actions button:first-child {
    color: var(--pwa-v2-muted);
    background: var(--pwa-v2-surface-soft);
}

.pwa-session-confirm__actions button:last-child {
    color: #fff;
    background: #b42318;
}

.pwa-session-confirm__actions button:disabled {
    cursor: wait;
    opacity: .68;
}

body.is-session-confirm-open {
    overflow: hidden !important;
}

html[data-pwa-theme="dark"] .pwa-active-session__title span {
    color: #6ce9a6;
    background: rgb(6 118 71 / 18%);
}

html[data-pwa-theme="dark"] .pwa-active-session form button,
html[data-pwa-theme="dark"] .pwa-session-confirm__icon {
    border-color: rgb(253 162 155 / 18%);
    color: #fda29b;
    background: rgb(180 35 24 / 14%);
}

@media (max-width: 370px) {
    .pwa-active-session {
        grid-template-columns: 40px minmax(0, 1fr) 38px;
        gap: 8px;
    }

    .pwa-active-session__device {
        width: 40px;
        height: 40px;
    }

    .pwa-active-session form button {
        min-width: 38px;
        padding: 0;
        grid-template-columns: 17px;
    }

    .pwa-active-session form button span {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-session-confirm__backdrop,
    .pwa-session-confirm__panel {
        transition: none;
    }
}

.pwa-profile-menu {
    overflow: hidden;
    margin-top: 16px;
    border-top: 1px solid var(--pwa-v2-border);
    border-bottom: 1px solid var(--pwa-v2-border);
    background: var(--pwa-v2-surface);
}

.pwa-profile-menu__item {
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: 11px;
    padding: 7px 2px;
    color: #5c5f68;
    font-size: 13px;
    font-weight: 600;
    transition: background-color 150ms ease, color 150ms ease,
        transform 120ms ease;
}

.pwa-profile-menu__item + .pwa-profile-menu__item {
    border-top: 1px solid #f0f0f2;
}

.pwa-profile-menu__icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    color: #52525b;
    background: var(--pwa-v2-surface-soft);
}

.pwa-profile-menu__icon svg {
    width: 20px;
    height: 20px;
}

.pwa-profile-menu__label {
    min-width: 0;
    flex: 1;
}

.pwa-profile-menu__arrow {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    color: #b7b7bf;
}

.pwa-profile-menu__arrow svg {
    width: 17px;
    height: 17px;
}

.pwa-profile-menu__item.is-active {
    color: var(--pwa-v2-brand);
}

.pwa-profile-menu__item.is-active .pwa-profile-menu__icon {
    color: var(--pwa-v2-brand);
    background: var(--pwa-v2-brand-soft);
}

.pwa-profile-menu__item:active {
    background: var(--pwa-v2-surface-soft);
    transform: scale(.995);
}

.pwa-profile-content {
    margin-top: 18px;
}

.pwa-profile-content > div,
.pwa-profile-content > section {
    border-radius: var(--pwa-v2-card-radius) !important;
    box-shadow: none !important;
}

.pwa-profile-main .font-black,
.pwa-profile-main .font-extrabold {
    font-weight: 700 !important;
}

.pwa-profile-content input,
.pwa-profile-content select,
.pwa-profile-content textarea {
    border-radius: var(--pwa-v2-control-radius) !important;
}

.pwa-login-entry {
    display: flex;
    width: min(100%, 420px);
    min-height: 100dvh;
    padding: 32px 24px;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: var(--pwa-v2-page);
}

.pwa-login-entry img {
    display: block;
    width: 148px;
    height: auto;
}

.pwa-login-entry .pwa-button {
    width: min(100%, 360px);
}

.ydk-auth-card {
    border-color: var(--pwa-v2-border);
    border-radius: var(--pwa-v2-sheet-radius);
    box-shadow: 0 24px 70px rgb(24 24 27 / 20%);
}

.ydk-auth-header {
    padding: 18px 20px 14px;
    border-bottom-color: var(--pwa-v2-border);
}

.ydk-auth-title {
    color: var(--pwa-v2-text);
    font-size: 19px;
    font-weight: 700;
}

.ydk-auth-description {
    color: var(--pwa-v2-muted);
    font-size: 12px;
    font-weight: 400;
}

.ydk-auth-close,
.ydk-auth-password-toggle {
    width: 44px;
    height: 44px;
    border-radius: var(--pwa-v2-control-radius);
    background: var(--pwa-v2-surface-soft);
}

.ydk-auth-body {
    padding: 20px 20px calc(22px + env(safe-area-inset-bottom));
}

.ydk-auth-label {
    color: #5c5f68;
    font-size: 13px;
    font-weight: 600;
}

.ydk-auth-input {
    height: 52px;
    border-color: var(--pwa-v2-border);
    border-radius: var(--pwa-v2-control-radius);
    color: var(--pwa-v2-text);
    background: var(--pwa-v2-page);
    font-size: 16px;
    font-weight: 600;
}

.ydk-auth-input:focus {
    border-color: rgb(201 45 64 / 52%);
    box-shadow: 0 0 0 3px rgb(201 45 64 / 7%);
}

.ydk-auth-submit {
    min-height: 52px;
    border: 1px solid var(--pwa-v2-brand-strong);
    border-radius: var(--pwa-v2-control-radius);
    background: var(--pwa-v2-brand);
    box-shadow: 0 4px 12px rgb(201 45 64 / 14%);
    font-size: 14px;
    font-weight: 700;
}

.ydk-auth-choice {
    min-height: 66px;
    border-color: var(--pwa-v2-border);
    border-radius: 14px;
    box-shadow: none;
}

.pwa-topbar__history .pwa-topbar__button:disabled {
    color: #b7b7bf;
    opacity: .52;
}

.ydk-auth-choice-title {
    font-weight: 700;
}

.ydk-auth-choice-copy,
.ydk-auth-countdown {
    font-weight: 400;
}

.pwa-auth-brand {
    display: flex;
    min-height: 94px;
    align-items: flex-end;
    justify-content: center;
    padding: max(22px, env(safe-area-inset-top)) 20px 17px;
}

.pwa-auth-brand img {
    display: block;
    width: 148px;
    height: auto;
}

.pwa-login-body .ydk-auth-modal {
    padding: 0;
    background: var(--pwa-v2-page);
}

.pwa-login-body .ydk-auth-backdrop {
    background: var(--pwa-v2-page);
    backdrop-filter: none;
}

.pwa-login-body .ydk-auth-card {
    width: min(100%, 520px);
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    background: var(--pwa-v2-surface);
    box-shadow: none;
}

.pwa-login-body .ydk-auth-header,
.pwa-login-body .ydk-auth-body {
    width: min(100%, 420px);
    margin-right: auto;
    margin-left: auto;
}

.pwa-login-body .ydk-auth-header {
    position: static;
    padding-top: 12px;
    background: transparent;
}

.pwa-login-body .ydk-auth-body {
    padding-top: 24px;
}

.pwa-simple-screen {
    width: min(100%, 520px);
    padding: 24px 16px;
    margin: 0 auto;
}

.pwa-app-info {
    padding: 24px 18px;
    border: 1px solid var(--pwa-v2-border);
    border-radius: var(--pwa-v2-card-radius);
    background: var(--pwa-v2-surface);
    text-align: center;
}

.pwa-app-info__icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    margin: 0 auto;
    border-radius: 15px;
    color: var(--pwa-v2-brand);
    background: var(--pwa-v2-brand-soft);
}

.pwa-app-info__icon svg {
    width: 26px;
    height: 26px;
}

.pwa-app-info h1 {
    margin: 13px 0 0;
    color: var(--pwa-v2-text);
    font-size: 18px;
    font-weight: 700;
}

.pwa-app-info p {
    max-width: 320px;
    margin: 6px auto 0;
    color: var(--pwa-v2-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.9;
}

.pwa-simple-list {
    overflow: hidden;
    margin-top: 18px;
    border-top: 1px solid var(--pwa-v2-border);
    border-bottom: 1px solid var(--pwa-v2-border);
    background: var(--pwa-v2-surface);
}

.pwa-simple-list > div,
.pwa-simple-list > a {
    display: flex;
    min-height: 56px;
    padding: 0 3px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #5c5f68;
    font-size: 13px;
    font-weight: 600;
}

.pwa-simple-list > * + * {
    border-top: 1px solid #f0f0f2;
}

.pwa-simple-list bdi {
    color: var(--pwa-v2-muted);
    font-size: 12px;
    font-weight: 400;
}

.pwa-simple-list svg {
    width: 18px;
    height: 18px;
    color: #a1a1aa;
}

.pwa-product-body .pwa-product-page {
    padding-top: 16px !important;
}

.pwa-product-body .pwa-product-page input,
.pwa-product-body .pwa-product-page select,
.pwa-product-body .pwa-product-page textarea {
    border-radius: var(--pwa-v2-control-radius) !important;
}

.pwa-cart-page,
.pwa-checkout-page {
    padding-top: 18px !important;
}

.pwa-cart-page .font-black,
.pwa-cart-page .font-extrabold,
.pwa-checkout-page .font-black,
.pwa-checkout-page .font-extrabold {
    font-weight: 700 !important;
}

.pwa-cart-count {
    color: #52525b !important;
    background: var(--pwa-v2-surface-soft) !important;
}

.pwa-cart-page article,
.pwa-cart-page section,
.pwa-checkout-page form,
.pwa-checkout-page section {
    box-shadow: none !important;
}

.pwa-cart-page article {
    border-radius: var(--pwa-v2-card-radius) !important;
}

.pwa-cart-page > section.rounded-\[26px\],
.pwa-checkout-page > section {
    border: 1px solid var(--pwa-v2-border) !important;
    border-radius: var(--pwa-v2-card-radius) !important;
    color: var(--pwa-v2-text) !important;
    background: var(--pwa-v2-surface) !important;
}

.pwa-cart-page > section.rounded-\[26px\] .text-zinc-400,
.pwa-checkout-page > section .text-zinc-400 {
    color: var(--pwa-v2-muted) !important;
}

.pwa-checkout-page form {
    border-radius: var(--pwa-v2-card-radius) !important;
}

.pwa-checkout-page input,
.pwa-checkout-page select {
    min-height: 52px !important;
    border-radius: var(--pwa-v2-control-radius) !important;
}

.pwa-checkout-page textarea,
.pwa-checkout-page form > div.rounded-2xl {
    border-radius: var(--pwa-v2-control-radius) !important;
}

.pwa-contact-methods {
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.pwa-action-row__arrow {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    place-items: center;
    color: #b4b4bc;
}

.pwa-action-row__arrow svg {
    width: 20px;
    height: 20px;
}

.pwa-vin-lookup,
.pwa-vin-results-page {
    padding-top: 18px !important;
}

.pwa-vin-flow,
.pwa-vin-result-summary {
    overflow: hidden;
    border: 1px solid var(--pwa-v2-border);
    border-radius: var(--pwa-v2-card-radius);
    background: var(--pwa-v2-surface);
    box-shadow: 0 16px 40px rgb(24 24 27 / 7%);
}

.pwa-vehicle-option__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.pwa-vehicle-option__spec {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 8px;
    background: var(--pwa-v2-surface-soft);
    white-space: nowrap;
}

.pwa-vehicle-option__spec > span {
    color: var(--pwa-v2-muted);
    font-size: 10px;
    font-weight: 400;
}

.pwa-vehicle-option__spec > b {
    color: var(--pwa-v2-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* The decode visual: a viewfinder that traces the car once, then sweeps a beam
   across it for as long as the decode is running. Deliberately not named
   `pwa-vin-scanner` — that class is the camera capture overlay, which the
   layout also renders on this page. */
.pwa-vin-decoder {
    position: relative;
    display: grid;
    height: 176px;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(
            120% 88% at 50% -8%,
            rgb(201 45 64 / 11%) 0%,
            transparent 62%
        ),
        linear-gradient(180deg, #fff 0%, var(--pwa-v2-surface-soft) 100%);
}

.pwa-vin-decoder__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(24 24 27 / 5%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(24 24 27 / 5%) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(
        72% 72% at 50% 50%,
        #000 0%,
        transparent 100%
    );
    mask-image: radial-gradient(
        72% 72% at 50% 50%,
        #000 0%,
        transparent 100%
    );
}

.pwa-vin-decoder__car {
    position: relative;
    z-index: 1;
    width: 232px;
    height: 100px;
    color: #b6b6bf;
}

.pwa-vin-decoder__car path,
.pwa-vin-decoder__car circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: pwa-vin-trace 1.4s ease-out forwards;
}

.pwa-vin-decoder__car .pwa-vin-decoder__car-detail {
    opacity: 0.55;
    stroke-width: 2.1;
    animation-delay: 0.3s;
}

.pwa-vin-decoder__car circle {
    animation-delay: 0.5s;
}

@keyframes pwa-vin-trace {
    to {
        stroke-dashoffset: 0;
    }
}

.pwa-vin-decoder__beam {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    height: 46px;
    border-bottom: 1.5px solid rgb(201 45 64 / 62%);
    background: linear-gradient(
        180deg,
        rgb(201 45 64 / 0%) 0%,
        rgb(201 45 64 / 13%) 100%
    );
    box-shadow: 0 10px 26px rgb(201 45 64 / 20%);
    animation: pwa-vin-sweep 2.6s cubic-bezier(0.55, 0, 0.45, 1) infinite;
    animation-delay: 0.9s;
}

@keyframes pwa-vin-sweep {
    0% {
        opacity: 0;
        transform: translateY(-46px);
    }

    12%,
    88% {
        opacity: 1;
    }

    50% {
        transform: translateY(176px);
    }

    100% {
        opacity: 0;
        transform: translateY(-46px);
    }
}

.pwa-vin-decoder__frame {
    position: absolute;
    z-index: 3;
    inset: 14px;
}

.pwa-vin-decoder__frame i {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgb(201 45 64 / 32%);
}

.pwa-vin-decoder__frame i:nth-child(1) {
    top: 0;
    left: 0;
    border-width: 2px 0 0 2px;
    border-radius: 8px 0 0;
}

.pwa-vin-decoder__frame i:nth-child(2) {
    top: 0;
    right: 0;
    border-width: 2px 2px 0 0;
    border-radius: 0 8px 0 0;
}

.pwa-vin-decoder__frame i:nth-child(3) {
    right: 0;
    bottom: 0;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 8px;
}

.pwa-vin-decoder__frame i:nth-child(4) {
    bottom: 0;
    left: 0;
    border-width: 0 0 2px 2px;
    border-radius: 0 0 0 8px;
}

/* A finished or failed decode is a still frame: nothing keeps moving. */
.pwa-vin-flow[data-vin-stage="done"] .pwa-vin-decoder__beam,
.pwa-vin-flow[data-vin-stage="failed"] .pwa-vin-decoder__beam {
    display: none;
}

.pwa-vin-flow[data-vin-stage="done"] .pwa-vin-decoder {
    background:
        radial-gradient(
            120% 88% at 50% -8%,
            rgb(22 163 74 / 13%) 0%,
            transparent 62%
        ),
        linear-gradient(180deg, #fff 0%, var(--pwa-v2-surface-soft) 100%);
}

.pwa-vin-flow[data-vin-stage="done"] .pwa-vin-decoder__car {
    color: #16a34a;
    animation: pwa-vin-confirm 520ms ease-out;
}

.pwa-vin-flow[data-vin-stage="done"] .pwa-vin-decoder__frame i {
    border-color: rgb(22 163 74 / 45%);
}

@keyframes pwa-vin-confirm {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1);
    }
}

.pwa-vin-flow[data-vin-stage="failed"] .pwa-vin-decoder__car {
    color: #d4d4d8;
}

.pwa-vin-flow[data-vin-stage="failed"] .pwa-vin-decoder__frame i {
    border-color: rgb(24 24 27 / 12%);
}

.pwa-vin-flow__body {
    padding: 16px;
    text-align: center;
}

.pwa-vin-flow__body h1,
.pwa-vin-result-summary h1 {
    margin: 0;
    color: var(--pwa-v2-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.7;
}

.pwa-vin-flow__body > p {
    margin: 3px 0 0;
    color: var(--pwa-v2-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
}

/* The VIN is read back character by character, so the wait shows the work. */
.pwa-vin-readout {
    display: flex;
    margin-top: 16px;
    gap: 3px;
    justify-content: center;
}

.pwa-vin-readout__cell {
    display: grid;
    min-width: 0;
    height: 32px;
    flex: 1 1 0;
    place-items: center;
    border-radius: 7px;
    color: #6b6d76;
    background: var(--pwa-v2-surface-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    animation: pwa-vin-readout 2.6s ease-in-out infinite;
}

@keyframes pwa-vin-readout {
    0%,
    55%,
    100% {
        color: #6b6d76;
        background: var(--pwa-v2-surface-soft);
        box-shadow: none;
    }

    18% {
        color: #fff;
        background: var(--pwa-v2-brand);
        box-shadow: 0 4px 12px rgb(201 45 64 / 28%);
    }
}

.pwa-vin-flow[data-vin-stage="done"] .pwa-vin-readout__cell,
.pwa-vin-flow[data-vin-stage="failed"] .pwa-vin-readout__cell {
    animation: none;
}

.pwa-vin-code {
    display: flex;
    min-height: 48px;
    padding: 8px 11px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #eeeeef;
    border-radius: var(--pwa-v2-control-radius);
    background: var(--pwa-v2-page);
}

.pwa-vin-code span {
    flex: 0 0 auto;
    color: var(--pwa-v2-brand);
    font-size: 12px;
    font-weight: 700;
}

.pwa-vin-code strong {
    overflow: hidden;
    min-width: 0;
    color: #5c5f68;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .45px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-vin-progress {
    position: relative;
    height: 4px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: #ececef;
}

.pwa-vin-progress > [data-vin-progress] {
    position: relative;
    overflow: hidden;
}

.pwa-vin-progress > [data-vin-progress]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgb(255 255 255 / 60%),
        transparent
    );
    animation: pwa-vin-shimmer 1.25s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .pwa-vin-progress > [data-vin-progress]::after,
    .pwa-vin-decoder__beam,
    .pwa-vin-readout__cell,
    .pwa-vin-steps li[data-state="active"] .pwa-vin-steps__marker::after {
        animation: none;
    }

    .pwa-vin-decoder__car path,
    .pwa-vin-decoder__car circle {
        stroke-dashoffset: 0;
        animation: none;
    }

    .pwa-vin-flow[data-vin-stage="done"] .pwa-vin-decoder__car {
        animation: none;
    }
}

@keyframes pwa-vin-shimmer {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

.pwa-vin-steps {
    display: grid;
    margin: 16px 0 0;
    padding: 0;
    gap: 3px;
    list-style: none;
    text-align: right;
}

.pwa-vin-steps li {
    display: flex;
    min-height: 40px;
    padding: 0 10px;
    align-items: center;
    gap: 10px;
    border-radius: var(--pwa-v2-control-radius);
    color: #a8a8b0;
    font-size: 12px;
    font-weight: 600;
    transition: color 220ms ease, background-color 220ms ease;
}

.pwa-vin-steps li[data-state="active"] {
    color: var(--pwa-v2-text);
    background: var(--pwa-v2-surface-soft);
}

.pwa-vin-steps li[data-state="done"] {
    color: #5c5f68;
}

.pwa-vin-steps li[data-state="failed"] {
    color: var(--pwa-v2-brand-strong);
    background: var(--pwa-v2-brand-soft);
}

.pwa-vin-steps__marker {
    position: relative;
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    place-items: center;
    border: 1.7px solid #e0e0e5;
    border-radius: 50%;
    background: #fff;
    transition: border-color 220ms ease, background-color 220ms ease;
}

.pwa-vin-steps li[data-state="active"] .pwa-vin-steps__marker {
    border-color: var(--pwa-v2-brand);
}

.pwa-vin-steps li[data-state="active"] .pwa-vin-steps__marker::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pwa-v2-brand);
    animation: pwa-vin-pulse 1.1s ease-in-out infinite;
}

.pwa-vin-steps li[data-state="done"] .pwa-vin-steps__marker {
    border-color: #16a34a;
    background: #16a34a;
}

.pwa-vin-steps li[data-state="done"] .pwa-vin-steps__marker::after {
    content: "";
    width: 9px;
    height: 5px;
    margin-top: -2px;
    border: 2px solid #fff;
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
}

.pwa-vin-steps li[data-state="failed"] .pwa-vin-steps__marker {
    border-color: var(--pwa-v2-brand);
    background: var(--pwa-v2-brand);
}

.pwa-vin-steps li[data-state="failed"] .pwa-vin-steps__marker::after {
    content: "";
    width: 2px;
    height: 9px;
    border-radius: 1px;
    background: #fff;
}

@keyframes pwa-vin-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .45;
        transform: scale(.7);
    }
}

.pwa-vin-error {
    margin-top: 16px;
    padding: 11px 13px;
    border: 1px solid rgb(201 45 64 / 16%);
    border-radius: var(--pwa-v2-control-radius);
    color: var(--pwa-v2-brand-strong);
    background: var(--pwa-v2-brand-soft);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.9;
    text-align: right;
}

.pwa-vin-flow__actions {
    display: flex;
    margin-top: 14px;
    gap: 8px;
}

/* `display: flex` above outranks the UA/Tailwind `[hidden]` rule, so the
   attribute has to be re-asserted or the recovery buttons would show while
   the decode is still running. */
.pwa-vin-flow__actions[hidden] {
    display: none;
}

.pwa-vin-flow__actions .pwa-button {
    flex: 1;
}

.pwa-vin-result-summary {
    padding: 15px;
}

.pwa-vin-result-summary__head {
    display: flex;
    min-height: 26px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pwa-vin-result-summary__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #137a55;
    font-size: 12px;
    font-weight: 600;
}

.pwa-vin-result-summary__status svg {
    width: 18px;
    height: 18px;
}

.pwa-vin-result-summary__brand {
    display: inline-flex;
    height: 24px;
    flex: 0 0 auto;
    align-items: center;
}

.pwa-vin-result-summary__brand img {
    width: auto;
    height: 23px;
    max-width: 88px;
    object-fit: contain;
}

.pwa-vin-result-summary__brand-text {
    flex: 0 0 auto;
    color: var(--pwa-v2-brand);
    font-size: 10px;
    font-weight: 700;
}

.pwa-vin-result-summary h1 {
    margin-top: 8px;
}

/* Specs shared by every version belong to the car, not to the choice — they
   are stated once here instead of being repeated on each option row. */
.pwa-vin-shared-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.pwa-vin-shared-spec {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 8px;
    background: var(--pwa-v2-surface-soft);
    white-space: nowrap;
}

.pwa-vin-shared-spec > span {
    color: var(--pwa-v2-muted);
    font-size: 10px;
    font-weight: 400;
}

.pwa-vin-shared-spec > b {
    color: var(--pwa-v2-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 600;
}

.pwa-vin-result-summary .pwa-vin-code {
    margin-top: 12px;
}

.pwa-vin-result-summary .pwa-vin-code strong {
    flex: 1 1 auto;
}

.pwa-vin-code__copy {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 9px;
    color: var(--pwa-v2-muted);
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    transition: color 150ms ease, background-color 150ms ease;
}

.pwa-vin-code__copy svg {
    width: 18px;
    height: 18px;
}

.pwa-vin-code__copy:active {
    color: var(--pwa-v2-brand);
    background: var(--pwa-v2-brand-soft);
}

.pwa-vin-copy-status:not(:empty) {
    display: block;
    margin-top: 7px;
    color: #137a55;
    font-size: 10px;
    font-weight: 600;
}

.pwa-vin-results-heading {
    display: flex;
    min-height: 44px;
    margin-top: 14px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pwa-vin-results-heading h2 {
    color: var(--pwa-v2-text);
    font-size: 15px;
    font-weight: 700;
}

.pwa-vin-results-heading span {
    color: var(--pwa-v2-muted);
    font-size: 12px;
    font-weight: 600;
}

.pwa-vin-results-hint {
    display: flex;
    margin: 0 0 12px;
    padding: 10px 12px;
    align-items: flex-start;
    gap: 8px;
    border-radius: var(--pwa-v2-control-radius);
    background: var(--pwa-v2-surface-soft);
    color: var(--pwa-v2-muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.9;
}

.pwa-vin-results-hint svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 4px;
    color: var(--pwa-v2-brand);
}

.pwa-vin-results-hint b {
    color: var(--pwa-v2-text);
    font-weight: 700;
}

.pwa-vehicle-options {
    display: grid;
    gap: 8px;
    font-size: 12px;
}

/* One tap target per version: the whole row is the link, so the list no
   longer stacks a wall of identical full-width buttons. */
.pwa-vehicle-option {
    display: flex;
    padding: 11px 12px;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--pwa-v2-border);
    border-radius: var(--pwa-v2-card-radius);
    color: inherit;
    background: var(--pwa-v2-surface);
    box-shadow: 0 2px 8px rgb(24 24 27 / 4%);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 150ms ease, background-color 150ms ease,
        box-shadow 150ms ease, transform 120ms ease;
}

.pwa-vehicle-option:active {
    border-color: rgb(201 45 64 / 24%);
    background: var(--pwa-v2-brand-soft);
    box-shadow: none;
    transform: scale(.99);
}

.pwa-vehicle-option__thumb {
    display: grid;
    width: 62px;
    height: 48px;
    flex: 0 0 auto;
    margin: 0;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    background: var(--pwa-v2-surface-soft);
}

.pwa-vehicle-option__thumb img {
    max-width: 56px;
    max-height: 42px;
    object-fit: contain;
}

.pwa-vehicle-option__thumb svg {
    width: 36px;
    height: 21px;
    color: #d4d4d8;
}

.pwa-vehicle-option__body {
    min-width: 0;
    flex: 1 1 auto;
}

.pwa-vehicle-option__title {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.pwa-vehicle-option__title > span {
    flex: 0 0 auto;
    color: var(--pwa-v2-muted);
    font-size: 10px;
    font-weight: 400;
}

.pwa-vehicle-option__title > strong {
    overflow: hidden;
    min-width: 0;
    color: var(--pwa-v2-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-vehicle-option__title mark {
    padding: 0 2px;
    border-radius: 4px;
    color: var(--pwa-v2-brand-strong);
    background: var(--pwa-v2-brand-soft);
    font-weight: 800;
}

.pwa-vehicle-option__go {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    place-items: center;
    color: #b4b4bc;
}

.pwa-vehicle-option__go svg {
    width: 20px;
    height: 20px;
}

#epc-app[data-pwa-mode="1"] .epc-pwa-search-action {
    box-shadow: 0 5px 16px rgb(24 24 27 / 4%);
}

#epc-app[data-pwa-mode="1"] .epc-pwa-search-action > i {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 9px;
    background: #f5f5f6;
}

#epc-app[data-pwa-mode="1"] .epc-pwa-search-action > i svg,
#epc-app[data-pwa-mode="1"] .epc-pwa-search-dialog__head > button svg {
    width: 20px;
    height: 20px;
}

#epc-app[data-pwa-mode="1"] .epc-pwa-context-nav__button {
    border: 1px solid #e7e7ea !important;
    background: #f7f7f8 !important;
    box-shadow: 0 3px 10px rgb(24 24 27 / 4%);
    transition: border-color 150ms ease, background-color 150ms ease,
        transform 120ms ease;
}

#epc-app[data-pwa-mode="1"] .epc-pwa-context-nav__button:active {
    border-color: rgb(201 45 64 / 20%) !important;
    background: #fff5f6 !important;
    transform: scale(.94);
}

@media (hover: hover) and (pointer: fine) {
    .pwa-button--primary:hover {
        border-color: #aa1f33 !important;
        background: #b82438 !important;
    }

    .pwa-button--secondary:hover,
    .pwa-icon-button:hover,
    .pwa-stepper-button:hover {
        border-color: #cfcfd5 !important;
        background: #fafafa !important;
    }

    .pwa-app-tile:hover {
        border-color: #d9d9de !important;
        box-shadow: 0 10px 24px rgb(24 24 27 / 7%);
    }
}

.pwa-topbar {
    height: 108px;
    border-bottom: 1px solid var(--pwa-v2-border);
    background: rgb(247 247 248 / 97%);
    backdrop-filter: blur(18px) saturate(130%);
    transition: transform 210ms cubic-bezier(.22, .8, .26, 1);
    will-change: transform;
}

/* The 108px above budgets for the unified search row. Screens that opt out
   of it (header-compact) must collapse to the bar itself, or they get a
   large empty strip under the title. */
.pwa-topbar--compact {
    height: auto;
}

.pwa-search-focus-backdrop {
    position: fixed;
    z-index: 72;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgb(24 24 27 / 22%);
    -webkit-backdrop-filter: blur(8px) saturate(82%);
    backdrop-filter: blur(8px) saturate(82%);
    opacity: 0;
    cursor: default;
    transition: opacity 180ms ease;
}

.pwa-search-focus-backdrop.is-visible {
    opacity: 1;
}

body.is-pwa-search-focused {
    overflow: hidden !important;
}

body.is-pwa-search-focused .pwa-topbar {
    z-index: 73;
    background: transparent;
    backdrop-filter: none;
    pointer-events: none;
    transform: none !important;
}

body.is-pwa-search-focused .pwa-topbar__inner {
    opacity: .28;
    filter: blur(5px);
    pointer-events: none;
    transition: opacity 180ms ease, filter 180ms ease;
}

body.is-pwa-search-focused .pwa-topbar__search-row {
    z-index: 2;
    pointer-events: auto;
}

body.is-pwa-search-focused
    .pwa-topbar__search
    .pwa-unified-search-field {
    border-color: rgb(201 45 64 / 64%);
    background: #fff;
    box-shadow:
        0 0 0 4px rgb(255 255 255 / 32%),
        0 18px 46px rgb(24 24 27 / 20%);
}

.pwa-topbar .pwa-topbar__inner {
    height: 52px;
    transition: opacity 180ms ease, filter 180ms ease;
}

.pwa-topbar--inner .pwa-topbar__inner {
    height: 52px;
}

/* Back sits on the LEFT of the bar on every PWA screen, with the page
   actions on the right. The document is RTL, so grid column 3 is the left
   edge and column 1 is the right edge. */
.pwa-topbar--inner .pwa-topbar__inner {
    grid-template-columns: 86px minmax(0, 1fr) 44px;
}

/* grid-row is mandatory here: the DOM order is back → title → actions, but
   the columns now run 3 → 2 → 1, and without an explicit row the auto
   placement drops the trailing actions onto a second row. */
.pwa-topbar__side--back {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
}

.pwa-topbar__side--menu,
.pwa-topbar__side--account {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
}

.pwa-topbar__history {
    position: relative;
    z-index: 1;
    display: flex;
    width: 44px;
    align-items: center;
    justify-content: flex-start;
    direction: ltr;
}

.pwa-topbar__history .pwa-topbar__button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid #e4e4e7;
    border-radius: 12px;
    color: #52525b;
    background: rgb(255 255 255 / 92%);
    box-shadow: 0 4px 12px rgb(24 24 27 / 5%);
    transition: color 150ms ease, border-color 150ms ease,
        background-color 150ms ease, box-shadow 150ms ease,
        transform 120ms ease;
}

.pwa-topbar__history .pwa-topbar__button svg {
    width: 20px;
    height: 20px;
    transition: transform 150ms ease;
}

.pwa-topbar__history [data-pwa-history-back] {
    border-color: rgb(201 45 64 / 15%);
    color: var(--pwa-v2-brand);
    background: var(--pwa-v2-brand-soft);
    box-shadow: 0 5px 14px rgb(201 45 64 / 8%);
}

.pwa-topbar__history .pwa-topbar__button:active {
    transform: scale(.91);
}

.pwa-topbar__history [data-pwa-history-back]:active svg {
    transform: translateX(-2px);
}

.pwa-topbar__history .pwa-topbar__button:disabled {
    border-color: #ececef;
    color: #c4c4ca;
    background: #f7f7f8;
    box-shadow: none;
    opacity: .68;
}

.pwa-topbar__search-row {
    position: relative;
    width: min(100%, 520px);
    height: 56px;
    padding: 0 14px 6px;
    margin: 0 auto;
}

.pwa-topbar__search {
    position: relative;
    z-index: 2;
}

.pwa-topbar__search .pwa-unified-search-field {
    height: 50px;
    border: 1px solid #e1e1e5;
    border-radius: 17px;
    background: var(--pwa-v2-surface);
    box-shadow: 0 5px 18px rgb(24 24 27 / 5%);
}

.pwa-topbar__search .pwa-unified-search-field:focus-within {
    border-color: rgb(201 45 64 / 46%);
    background: #fff;
    box-shadow:
        0 0 0 3px rgb(201 45 64 / 7%),
        0 7px 20px rgb(24 24 27 / 6%);
    transform: none;
}

.pwa-topbar__search .pwa-unified-search-input {
    padding-right: 58px;
    padding-left: 54px;
    color: #4a4c55;
    font-size: 14px;
    font-weight: 500;
}

.pwa-topbar__search .pwa-vin-scan-trigger {
    top: 7px;
    right: auto;
    left: 8px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 12px;
    color: var(--pwa-v2-brand);
    background: var(--pwa-v2-brand-soft);
    box-shadow: none;
}

.pwa-topbar__search .pwa-vin-scan-trigger svg {
    width: 20px;
    height: 20px;
}

.pwa-topbar__search .pwa-vin-scan-trigger:active {
    color: #fff;
    background: var(--pwa-v2-brand);
    box-shadow: none;
    transform: scale(.94);
}

.pwa-topbar__search .pwa-unified-search-submit {
    top: 7px;
    right: 8px;
    left: auto;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, #e55268, #bd2439);
    box-shadow: none;
}

.pwa-topbar__search .pwa-unified-search-submit svg {
    width: 18px;
    height: 18px;
    animation: none;
}

.pwa-topbar__search .pwa-unified-search-submit:active {
    background: linear-gradient(145deg, #d9475c, #ad2034);
    box-shadow: none;
    transform: scale(.94);
}

.pwa-topbar--home
    .pwa-topbar__search
    .pwa-unified-search-submit {
    right: 9px;
    border: 0;
    border-radius: 0;
    color: #8b8b95;
    background: transparent;
    box-shadow: none;
}

.pwa-topbar--home
    .pwa-topbar__search
    .pwa-unified-search-submit svg {
    width: 19px;
    height: 19px;
}

.pwa-topbar--home
    .pwa-topbar__search
    .pwa-unified-search-submit:active {
    color: #52525b;
    background: transparent;
    box-shadow: none;
    transform: scale(.92);
}

.pwa-topbar__search-results {
    position: absolute;
    z-index: 80;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    max-height: min(58dvh, 430px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--pwa-v2-border);
    border-radius: var(--pwa-v2-card-radius);
    color: #4a4c55;
    background: #fff;
    box-shadow: 0 18px 42px rgb(24 24 27 / 14%);
    overscroll-behavior: contain;
}

.pwa-topbar__button--account {
    border-color: rgb(201 45 64 / 12%);
    color: var(--pwa-v2-brand);
    background: var(--pwa-v2-brand-soft);
    box-shadow: none;
}

.pwa-search-name-action {
    display: flex;
    min-height: 64px;
    align-items: center;
    gap: 11px;
    padding: 8px 9px;
    border-radius: 12px;
    color: var(--pwa-v2-text);
    background: transparent;
    transition: background-color 150ms ease, transform 120ms ease;
}

.pwa-search-name-action__icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    color: var(--pwa-v2-brand);
    background: var(--pwa-v2-brand-soft);
}

.pwa-search-name-action__icon svg {
    width: 22px;
    height: 22px;
}

.pwa-search-name-action__copy {
    display: block;
    min-width: 0;
    flex: 1;
    text-align: right;
}

.pwa-search-name-action__copy strong,
.pwa-search-name-action__copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-search-name-action__copy strong {
    font-size: 13px;
    font-weight: 700;
}

.pwa-search-name-action__copy small {
    margin-top: 3px;
    color: var(--pwa-v2-muted);
    font-size: 12px;
    font-weight: 400;
}

.pwa-search-name-action__arrow {
    flex: 0 0 auto;
    color: var(--pwa-v2-brand);
    font-size: 18px;
}

.pwa-search-name-action:active {
    background: var(--pwa-v2-surface-soft);
    transform: scale(.99);
}

.pwa-search-screen {
    width: min(100%, 520px);
    min-height: calc(100dvh - 108px);
    padding: 16px 16px 28px;
    margin: 0 auto;
}

.pwa-parts-index {
    width: min(100%, 520px);
    min-height: calc(100dvh - 108px);
    padding: 16px 14px 28px;
    margin: 0 auto;
}

.pwa-parts-index__header {
    padding: 2px 2px 14px;
    text-align: right;
}

.pwa-parts-index__header > span {
    color: var(--pwa-v2-brand);
    font-size: 12px;
    font-weight: 500;
}

.pwa-parts-index__header h1 {
    margin: 3px 0 0;
    color: var(--pwa-v2-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.7;
}

.pwa-parts-index__header p {
    margin: 2px 0 0;
    color: var(--pwa-v2-muted);
    font-size: 13px;
    font-weight: 400;
}

.pwa-parts-index__search {
    position: sticky;
    z-index: 4;
    top: 68px;
    display: flex;
    height: 50px;
    margin-bottom: 14px;
    padding: 0 13px;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--pwa-v2-border);
    border-radius: 15px;
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 9px 24px rgb(24 24 27 / 6%);
    backdrop-filter: blur(16px);
}

.pwa-parts-index__search > svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    color: var(--pwa-v2-brand);
}

.pwa-parts-index__search input {
    width: 100%;
    min-width: 0;
    height: 48px;
    border: 0;
    outline: 0;
    color: var(--pwa-v2-text);
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
}

.pwa-parts-index__search button {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: #71717a;
    background: var(--pwa-v2-surface-soft);
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
}

.pwa-parts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.pwa-part-group {
    display: flex;
    min-width: 0;
    min-height: 122px;
    padding: 10px 6px 9px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pwa-v2-border);
    border-radius: 18px;
    color: var(--pwa-v2-text);
    background: var(--pwa-v2-surface);
    box-shadow: 0 6px 18px rgb(24 24 27 / 4%);
    transition: border-color 150ms ease, transform 120ms ease,
        box-shadow 150ms ease;
}

.pwa-part-group[hidden] {
    display: none;
}

.pwa-part-group:active {
    border-color: rgb(201 45 64 / 32%);
    box-shadow: 0 5px 14px rgb(201 45 64 / 8%);
    transform: scale(.98);
}

.pwa-part-group__image {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    overflow: hidden;
    border-radius: 16px;
    background: #f4f4f5;
}

.pwa-part-group__image img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.pwa-part-group__image > svg {
    width: 28px;
    height: 28px;
    color: #71717a;
}

.pwa-part-group > strong {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 8px;
    color: #5c5f68;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.65;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pwa-part-group > small {
    margin-top: 2px;
    color: var(--pwa-v2-muted);
    font-size: 12px;
    font-weight: 400;
}

.pwa-parts-index__empty {
    padding: 34px 16px;
    border: 1px dashed #d4d4d8;
    border-radius: 18px;
    color: var(--pwa-v2-muted);
    background: var(--pwa-v2-surface);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.9;
    text-align: center;
}

.pwa-parts-index__empty[hidden] {
    display: none;
}

.pwa-category-inline-search {
    display: flex;
    min-height: 52px;
    margin-top: 13px;
    padding: 4px 5px 4px 12px;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--pwa-v2-border);
    border-radius: 15px;
    background: var(--pwa-v2-surface);
}

.pwa-category-inline-search > svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    color: var(--pwa-v2-brand);
}

.pwa-category-inline-search input {
    width: 100%;
    min-width: 0;
    height: 44px;
    border: 0;
    outline: 0;
    color: var(--pwa-v2-text);
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
}

.pwa-category-inline-search button {
    min-width: 68px;
    height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: var(--pwa-v2-brand);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
}

.pwa-parts-category-screen .pwa-search-summary small,
.pwa-parts-category-screen .pwa-search-summary > bdi,
.pwa-parts-category-screen .pwa-search-note,
.pwa-parts-category-screen .pwa-search-vehicle-filter__summary small,
.pwa-parts-category-screen .pwa-search-vehicle-filter__status b,
.pwa-parts-category-screen .pwa-search-vehicle-filter__fields label,
.pwa-parts-category-screen .pwa-search-vehicle-filter__actions button,
.pwa-parts-category-screen .pwa-search-vehicle-filter__actions a,
.pwa-parts-category-screen .pwa-search-filters a,
.pwa-parts-category-screen .pwa-search-result__copy > small,
.pwa-parts-category-screen .pwa-search-result__meta,
.pwa-parts-category-screen .pwa-search-result__tail > strong,
.pwa-parts-category-screen .pwa-search-result__tail > strong small,
.pwa-parts-category-screen .pwa-search-result__tail > em {
    font-size: 12px;
    font-weight: 400;
}

.pwa-parts-category-screen .pwa-search-vehicle-filter__summary strong,
.pwa-parts-category-screen .pwa-search-result__copy > strong {
    font-weight: 500;
}

.pwa-parts-category-screen .pwa-search-filters a.is-active {
    border-color: rgb(201 45 64 / 28%);
    color: var(--pwa-v2-brand);
    background: var(--pwa-v2-brand-soft);
}

@media (max-width: 350px) {
    .pwa-parts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pwa-search-summary {
    display: flex;
    min-height: 50px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.pwa-search-summary > span {
    display: block;
    min-width: 0;
    flex: 1;
}

.pwa-search-summary small {
    display: block;
    color: var(--pwa-v2-muted);
    font-size: 12px;
    font-weight: 400;
}

.pwa-search-summary h1 {
    overflow: hidden;
    margin: 3px 0 0;
    color: var(--pwa-v2-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-search-summary > bdi {
    flex: 0 0 auto;
    padding-bottom: 3px;
    color: var(--pwa-v2-muted);
    font-size: 12px;
    font-weight: 600;
}

.pwa-search-note {
    margin: 12px 0 0;
    padding: 9px 11px;
    border-right: 3px solid var(--pwa-v2-brand);
    color: #52525b;
    background: var(--pwa-v2-brand-soft);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
}

.pwa-search-vehicle-filter {
    overflow: hidden;
    margin-top: 14px;
    border: 1px solid var(--pwa-v2-border);
    border-radius: 16px;
    background: var(--pwa-v2-surface);
}

.pwa-search-vehicle-filter__summary {
    display: flex;
    min-height: 62px;
    padding: 9px 12px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.pwa-search-vehicle-filter__summary::-webkit-details-marker {
    display: none;
}

.pwa-search-vehicle-filter__summary > span:first-child {
    display: block;
    min-width: 0;
}

.pwa-search-vehicle-filter__summary strong,
.pwa-search-vehicle-filter__summary small {
    display: block;
}

.pwa-search-vehicle-filter__summary strong {
    color: var(--pwa-v2-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
}

.pwa-search-vehicle-filter__summary small {
    margin-top: 2px;
    color: var(--pwa-v2-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
}

.pwa-search-vehicle-filter__status {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
}

.pwa-search-vehicle-filter__status b {
    display: grid;
    min-width: 23px;
    height: 23px;
    padding: 0 6px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--pwa-v2-brand);
    font-size: 12px;
    font-weight: 700;
}

.pwa-search-vehicle-filter__status i {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    color: #8b8b95;
    transition: transform 160ms ease;
}

.pwa-search-vehicle-filter__status svg {
    width: 16px;
    height: 16px;
}

.pwa-search-vehicle-filter[open]
    .pwa-search-vehicle-filter__status i {
    transform: rotate(-90deg);
}

.pwa-search-vehicle-filter__form {
    padding: 12px;
    border-top: 1px solid var(--pwa-v2-border);
}

.pwa-search-vehicle-filter__form[aria-busy="true"] {
    opacity: .72;
    pointer-events: none;
}

.pwa-search-vehicle-filter__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.pwa-search-vehicle-filter__fields label {
    display: grid;
    min-width: 0;
    gap: 5px;
    color: #71717a;
    font-size: 12px;
    font-weight: 600;
}

.pwa-search-vehicle-filter__fields select {
    width: 100%;
    height: 44px;
    padding: 0 9px;
    border: 1px solid var(--pwa-v2-border);
    border-radius: 11px;
    outline: 0;
    color: #5c5f68;
    background: var(--pwa-v2-surface);
    font-family: inherit;
    font-size: 12px;
}

.pwa-search-vehicle-filter__fields select:focus {
    border-color: rgb(201 45 64 / 48%);
    box-shadow: 0 0 0 3px rgb(201 45 64 / 7%);
}

.pwa-search-vehicle-filter__actions {
    display: flex;
    margin-top: 11px;
    align-items: center;
    gap: 10px;
}

.pwa-search-vehicle-filter__actions button {
    min-height: 44px;
    flex: 1;
    padding: 0 14px;
    border-radius: 11px;
    color: #fff;
    background: var(--pwa-v2-brand);
    font-size: 12px;
    font-weight: 700;
}

.pwa-search-vehicle-filter__actions a {
    display: inline-flex;
    min-height: 44px;
    flex: 0 0 auto;
    align-items: center;
    color: #71717a;
    font-size: 12px;
    font-weight: 600;
}

.pwa-search-filters {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 14px 0 11px;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}

.pwa-search-filters::-webkit-scrollbar {
    display: none;
}

.pwa-search-filters a {
    display: inline-flex;
    min-width: max-content;
    min-height: 44px;
    padding: 0 13px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pwa-v2-border);
    border-radius: 999px;
    color: #52525b;
    background: var(--pwa-v2-surface);
    font-size: 12px;
    font-weight: 600;
}

.pwa-search-filters a.is-active {
    border-color: #27272a;
    color: #fff;
    background: #27272a;
}

.pwa-search-results {
    overflow: hidden;
    border-top: 1px solid var(--pwa-v2-border);
    border-bottom: 1px solid var(--pwa-v2-border);
    background: var(--pwa-v2-surface);
}

.pwa-search-result {
    display: flex;
    min-height: 102px;
    align-items: center;
    gap: 11px;
    padding: 12px 2px;
    color: inherit;
    background: var(--pwa-v2-surface);
    transition: background-color 150ms ease, transform 120ms ease;
}

.pwa-search-result + .pwa-search-result {
    border-top: 1px solid #f0f0f2;
}

.pwa-search-result__icon {
    display: grid;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 15px;
    color: #52525b;
    background: var(--pwa-v2-surface-soft);
}

.pwa-search-result__icon svg {
    width: 25px;
    height: 25px;
}

.pwa-search-result__copy {
    display: block;
    min-width: 0;
    flex: 1;
}

.pwa-search-result__copy > strong,
.pwa-search-result__copy > small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-search-result__copy > strong {
    color: var(--pwa-v2-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
}

.pwa-search-result__copy > small {
    margin-top: 2px;
    color: #a1a1aa;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-align: right;
}

.pwa-search-result__meta {
    display: flex;
    min-width: 0;
    margin-top: 6px;
    align-items: center;
    gap: 6px;
    color: var(--pwa-v2-muted);
    font-size: 12px;
    font-weight: 400;
}

.pwa-search-result__meta bdi {
    flex: 0 0 auto;
    color: var(--pwa-v2-brand);
    font-family: Arial, sans-serif;
    font-weight: 700;
}

.pwa-search-result__meta i {
    width: 3px;
    height: 3px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #d4d4d8;
}

.pwa-search-result__meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-search-result__tail {
    display: flex;
    min-width: 60px;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.pwa-search-result__tail > svg {
    width: 17px;
    height: 17px;
    color: #a1a1aa;
}

.pwa-search-result__tail > strong {
    color: #4a4c55;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.pwa-search-result__tail > strong small {
    color: var(--pwa-v2-muted);
    font-size: 12px;
    font-weight: 400;
}

.pwa-search-result__tail > em {
    color: #147d54;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.pwa-search-result__tail > em.is-muted {
    color: var(--pwa-v2-muted);
}

.pwa-search-result:active {
    background: var(--pwa-v2-surface-soft);
    transform: scale(.995);
}

.pwa-search-empty {
    padding: 46px 20px;
    text-align: center;
}

.pwa-search-empty > span {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    margin: 0 auto;
    border-radius: 16px;
    color: var(--pwa-v2-muted);
    background: var(--pwa-v2-surface-soft);
}

.pwa-search-empty > span svg {
    width: 25px;
    height: 25px;
}

.pwa-search-empty h2 {
    margin: 14px 0 0;
    color: var(--pwa-v2-text);
    font-size: 15px;
    font-weight: 700;
}

.pwa-search-empty p {
    margin: 5px 0 18px;
    color: var(--pwa-v2-muted);
    font-size: 12px;
    font-weight: 400;
}

.pwa-search-pagination {
    display: grid;
    min-height: 58px;
    margin-top: 16px;
    align-items: center;
    grid-template-columns: 1fr auto 1fr;
}

.pwa-search-pagination a,
.pwa-search-pagination > span {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 4px;
    color: #5c5f68;
    font-size: 11px;
    font-weight: 700;
}

.pwa-search-pagination a:last-child,
.pwa-search-pagination > span:last-child {
    justify-self: end;
}

.pwa-search-pagination svg {
    width: 18px;
    height: 18px;
}

.pwa-search-pagination .is-disabled {
    color: #c4c4ca;
}

.pwa-search-pagination bdi {
    color: var(--pwa-v2-muted);
    font-size: 12px;
    font-weight: 600;
}

.pwa-home-content,
.pwa-viewport-content {
    top: 0 !important;
    padding-top: 108px;
}

body.is-pwa-chrome-hidden .pwa-topbar,
body.is-pwa-chrome-hidden .epc-pwa-top-chrome {
    transform: translateY(calc(-100% - 2px));
}

body.is-pwa-chrome-hidden .pwa-bottom-nav,
body.is-pwa-chrome-hidden .epc-pwa-taskbar {
    transform: translateY(calc(100% + 2px)) !important;
}

body.pwa-has-bottom-nav .pwa-viewport-content {
    padding-bottom: calc(
        76px + env(safe-area-inset-bottom, 0px)
    );
}

body.pwa-has-bottom-nav .pwa-home-content {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
}

.pwa-bottom-nav,
#epc-app[data-pwa-mode="1"] .epc-pwa-taskbar {
    transition: transform 210ms cubic-bezier(.22, .8, .26, 1);
    will-change: transform;
}

@media (max-width: 650px) {
    #epc-app[data-pwa-mode="1"] .epc-pwa-top-chrome {
        position: sticky;
        z-index: 900;
        top: 0;
        width: 100vw;
        padding: 8px 8px 2px;
        margin: 0 calc(50% - 50vw) 10px;
        border-bottom: 1px solid #ededf0;
        background: rgb(250 250 250 / 97%);
        backdrop-filter: blur(12px);
        transition: transform 210ms cubic-bezier(.22, .8, .26, 1);
        will-change: transform;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-header-search {
        display: flex;
        width: 100%;
        height: 46px;
        padding: 0 13px;
        align-items: center;
        gap: 9px;
        border: 1px solid #e1e1e5;
        border-radius: 15px;
        color: #71717a;
        background: #fff;
        box-shadow: 0 4px 14px rgb(24 24 27 / 5%);
        font-family: inherit;
        font-size: 12px;
        font-weight: 500;
        text-align: right;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-header-search svg {
        width: 21px;
        height: 21px;
        flex: 0 0 auto;
        color: #c92d40;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-header-search span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-top-chrome .epc-pwa-context-nav {
        min-height: 44px;
        margin-bottom: 0;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-context-nav__button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    #epc-app[data-pwa-mode="1"]
        .epc-pwa-context-nav__button:disabled {
        color: #b7b7bf !important;
        opacity: .52;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-search-dialog__head > button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-search-dialog__back {
        min-height: 44px;
    }
}

@media (max-width: 768px) {
    body:not(.epc-pwa-body) input,
    body:not(.epc-pwa-body) select,
    body:not(.epc-pwa-body) textarea,
    #epc-app[data-pwa-mode="1"] input,
    #epc-app[data-pwa-mode="1"] select,
    #epc-app[data-pwa-mode="1"] textarea {
        font-size: 16px !important;
    }
}

html[data-pwa-theme="dark"] .pwa-topbar,
html[data-pwa-theme="dark"] #epc-app[data-pwa-mode="1"] .epc-pwa-top-chrome {
    border-bottom-color: #41424a;
    background: rgb(27 28 33 / 97%);
}

html[data-pwa-theme="dark"] .pwa-topbar__search .pwa-unified-search-field,
html[data-pwa-theme="dark"] .pwa-topbar__search .pwa-unified-search-field:focus-within,
html[data-pwa-theme="dark"] #epc-app[data-pwa-mode="1"] .epc-pwa-header-search {
    border-color: #41424a;
    color: #d4d4d8;
    background: #24252b;
}

html[data-pwa-theme="dark"] .pwa-topbar__search .pwa-unified-search-input {
    color: #f4f4f5;
}

html[data-pwa-theme="dark"] .pwa-topbar__search .pwa-vin-scan-trigger {
    color: #fb7185;
    background: rgb(201 45 64 / 16%);
}

html[data-pwa-theme="dark"]
    .pwa-topbar--home
    .pwa-topbar__search
    .pwa-unified-search-submit {
    color: #b7b7bf;
    background: transparent;
}

html[data-pwa-theme="dark"] .pwa-topbar__search-results {
    border-color: #41424a;
    color: #f4f4f5;
    background: #24252b;
}

html[data-pwa-theme="dark"]
    .pwa-topbar__history
    .pwa-topbar__button {
    border-color: #41424a;
    color: #d4d4d8;
    background: #2b2c33;
    box-shadow: 0 4px 12px rgb(0 0 0 / 16%);
}

html[data-pwa-theme="dark"]
    .pwa-topbar__history
    [data-pwa-history-back] {
    border-color: rgb(251 113 133 / 22%);
    color: #fb7185;
    background: rgb(201 45 64 / 15%);
}

html[data-pwa-theme="dark"]
    .pwa-topbar__history
    .pwa-topbar__button:disabled {
    border-color: #35363d;
    color: #686973;
    background: #24252b;
    box-shadow: none;
}

@media (max-width: 360px) {
    .pwa-topbar--inner .pwa-topbar__inner {
        grid-template-columns: 82px minmax(0, 1fr) 40px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .pwa-topbar__history {
        width: 44px;
    }

    .pwa-topbar__history .pwa-topbar__button {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .pwa-feature-card__copy {
        right: 13px;
        width: 48%;
        padding: 9px 10px;
    }

    .pwa-search-vehicle-filter__fields {
        grid-template-columns: 1fr;
    }

    .pwa-feature-card--parts .pwa-feature-card__copy {
        right: auto;
        left: 13px;
    }

    .pwa-feature-ecosystem__title {
        right: 10px;
        width: 43%;
        min-height: 100px;
        padding: 8px 9px;
    }

    .pwa-feature-brands {
        left: 10px;
        width: 43%;
        gap: 4px;
    }

    .pwa-feature-brand {
        border-radius: 9px;
    }

    .pwa-quick-action {
        font-size: 12px;
    }
}

@media (min-width: 769px) {
    body.is-pwa-chrome-hidden .pwa-topbar,
    body.is-pwa-chrome-hidden .pwa-bottom-nav,
    body.is-pwa-chrome-hidden .epc-pwa-top-chrome,
    body.is-pwa-chrome-hidden .epc-pwa-taskbar {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-topbar,
    .pwa-bottom-nav,
    .pwa-home-content,
    .pwa-viewport-content,
    .epc-pwa-top-chrome,
    .epc-pwa-taskbar {
        transition: none !important;
    }
}

/* PWA application shell V2 for EPC only. Desktop EPC stays untouched. */
@media (max-width: 650px) {
    .epc-pwa-body {
        padding-bottom: calc(
            64px + env(safe-area-inset-bottom, 0px)
        ) !important;
        color: var(--pwa-v2-text);
        background: var(--pwa-v2-page) !important;
    }

    #epc-app[data-pwa-mode="1"] {
        --epc-pwa-red: var(--pwa-v2-brand);
        color: var(--pwa-v2-text);
        background: var(--pwa-v2-page);
    }

    #epc-app[data-pwa-mode="1"] .epc-main {
        padding-right: 12px !important;
        padding-bottom: calc(
            76px + env(safe-area-inset-bottom, 0px)
        ) !important;
        padding-left: 12px !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-top-chrome {
        position: sticky;
        z-index: 900;
        top: 0;
        width: 100vw;
        padding: 7px 12px 0;
        margin: 0 calc(50% - 50vw) 12px;
        border-bottom: 1px solid var(--pwa-v2-border);
        background: rgb(247 247 248 / 97%);
        backdrop-filter: blur(18px) saturate(130%);
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-header-search {
        display: flex;
        width: 100%;
        height: 48px;
        padding: 0 14px;
        align-items: center;
        gap: 9px;
        border: 1px solid var(--pwa-v2-border);
        border-radius: 14px;
        color: var(--pwa-v2-muted);
        background: var(--pwa-v2-surface);
        box-shadow: none;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        text-align: right;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-header-search svg {
        width: 23px;
        height: 23px;
        flex: 0 0 auto;
        color: var(--pwa-v2-brand);
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-context-nav {
        display: grid;
        width: calc(100% + 24px);
        min-height: 44px;
        margin: 0 -12px 4px;
        padding: 0 12px;
        border: 0;
        border-radius: 0;
        background: transparent;
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: center;
        gap: 5px;
        direction: ltr;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-context-nav__button {
        position: relative;
        z-index: 1;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border: 1px solid var(--pwa-v2-border) !important;
        border-radius: 12px !important;
        color: #52525b;
        background: var(--pwa-v2-surface) !important;
        box-shadow: 0 4px 12px rgb(24 24 27 / 5%) !important;
        transition: color 150ms ease, border-color 150ms ease,
            background-color 150ms ease, box-shadow 150ms ease,
            transform 120ms ease !important;
    }

    #epc-app[data-pwa-mode="1"]
        [data-epc-history-back].epc-pwa-context-nav__button {
        border-color: rgb(201 45 64 / 15%) !important;
        color: var(--pwa-v2-brand);
        background: var(--pwa-v2-brand-soft) !important;
        box-shadow: 0 5px 14px rgb(201 45 64 / 8%) !important;
    }

    #epc-app[data-pwa-mode="1"]
        .epc-pwa-context-nav__button:active {
        transform: scale(.91);
    }

    html[data-pwa-theme="dark"]
        #epc-app[data-pwa-mode="1"]
        .epc-pwa-context-nav__button {
        border-color: #41424a !important;
        color: #d4d4d8;
        background: #2b2c33 !important;
        box-shadow: 0 4px 12px rgb(0 0 0 / 16%) !important;
    }

    html[data-pwa-theme="dark"]
        #epc-app[data-pwa-mode="1"]
        [data-epc-history-back].epc-pwa-context-nav__button {
        border-color: rgb(251 113 133 / 22%) !important;
        color: #fb7185;
        background: rgb(201 45 64 / 15%) !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-context-nav__button svg {
        width: 22px;
        height: 22px;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-context-nav .epc-breadcrumb {
        position: relative;
        z-index: 0;
        display: flex;
        min-width: 0;
        min-height: 44px;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        overflow-x: auto;
        border: 0;
        border-radius: 0;
        direction: rtl;
        background: transparent;
        text-align: right;
        scrollbar-width: none;
    }

    #epc-app[data-pwa-mode="1"] .epc-breadcrumb button,
    #epc-app[data-pwa-mode="1"] .epc-breadcrumb > strong {
        min-height: 44px;
        padding: 0 5px;
        border: 0;
        border-radius: 0;
        color: #52525b;
        background: transparent !important;
        font-size: 12px;
        font-weight: 600;
        line-height: 44px;
        white-space: nowrap;
    }

    #epc-app[data-pwa-mode="1"] .epc-breadcrumb > strong {
        color: var(--pwa-v2-text);
        font-weight: 700;
    }

    #epc-app[data-pwa-mode="1"] .epc-breadcrumb > span {
        color: #c4c4ca;
    }

    #epc-app[data-pwa-mode="1"] .epc-intro-card {
        display: none !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-topbar {
        margin-bottom: 14px;
    }

    #epc-app[data-pwa-mode="1"] .epc-car-profile {
        position: relative;
        display: grid !important;
        width: 100%;
        padding: 13px !important;
        margin: 0 !important;
        overflow: hidden;
        border: 1px solid var(--pwa-v2-border) !important;
        border-radius: var(--pwa-v2-card-radius) !important;
        color: var(--pwa-v2-text) !important;
        background: var(--pwa-v2-surface) !important;
        box-shadow: none !important;
        grid-template-columns: minmax(0, 1fr) 124px !important;
        grid-template-rows: auto auto !important;
        align-items: center;
        gap: 9px 12px !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-car-profile::before,
    #epc-app[data-pwa-mode="1"] .epc-car-profile::after {
        display: none !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-car-profile-heading {
        display: flex !important;
        min-width: 0;
        min-height: 96px !important;
        padding: 0 !important;
        margin: 0 !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 4px !important;
        text-align: left !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-vehicle-brand-row {
        display: flex;
        width: 100%;
        min-width: 0;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        direction: ltr;
    }

    #epc-app[data-pwa-mode="1"]
        .epc-pwa-vehicle-brand-row
        .epc-car-profile-logo {
        width: 24px;
        height: 24px;
        padding: 2px;
        flex: 0 0 24px;
        border: 1px solid var(--pwa-v2-border);
        border-radius: 7px;
        background: var(--pwa-v2-surface);
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-vehicle-brand {
        overflow: hidden;
        color: var(--pwa-v2-muted);
        font-size: 12px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #epc-app[data-pwa-mode="1"] .epc-car-profile-identity {
        display: block;
        width: 100%;
        min-width: 0;
        direction: ltr;
    }

    #epc-app[data-pwa-mode="1"] .epc-car-profile-heading strong {
        display: block;
        overflow: hidden;
        width: 100%;
        color: var(--pwa-v2-text) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.55;
        text-align: left !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-vehicle-meta {
        display: flex;
        width: 100%;
        min-width: 0;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        direction: ltr;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-vehicle-meta > span {
        display: inline-flex;
        min-width: 0;
        align-items: baseline;
        gap: 3px;
        color: #52525b;
        font-size: 12px;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-vehicle-meta small {
        color: #a1a1aa;
        font-size: 12px;
        font-weight: 400;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-vehicle-meta b {
        overflow: hidden;
        font-size: 12px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-vehicle-vin {
        display: flex;
        width: 100%;
        min-width: 0;
        min-height: 24px;
        padding: 3px 6px;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        border: 1px solid #eeeeef;
        border-radius: 8px;
        direction: ltr;
        color: var(--pwa-v2-muted);
        background: var(--pwa-v2-page);
        text-align: left;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-vehicle-vin span {
        padding: 0;
        color: var(--pwa-v2-brand);
        background: transparent;
        font-size: 12px;
        font-weight: 700;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-vehicle-vin code {
        overflow: hidden;
        min-width: 0;
        color: #52525b;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
            monospace;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .25px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #epc-app[data-pwa-mode="1"] .epc-vehicle-image {
        width: 124px !important;
        height: 96px !important;
        min-height: 96px !important;
        padding: 2px;
        margin: 0 !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: var(--pwa-v2-page) !important;
        box-shadow: none !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-vehicle-image img {
        width: 100%;
        height: 100%;
        padding: 0 !important;
        object-fit: contain;
    }

    #epc-app[data-pwa-mode="1"] .epc-live-progress {
        width: 100%;
        min-height: 0;
        padding: 6px 8px !important;
        margin: 0 !important;
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        border: 0 !important;
        border-radius: 9px !important;
        color: #52525b !important;
        background: var(--pwa-v2-page) !important;
        box-shadow: none !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-live-progress.is-complete {
        display: none !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-live-progress > div:first-child {
        min-height: 18px;
    }

    #epc-app[data-pwa-mode="1"] .epc-live-progress span,
    #epc-app[data-pwa-mode="1"] .epc-live-progress strong,
    #epc-app[data-pwa-mode="1"] .epc-live-progress small {
        color: #52525b !important;
        font-size: 12px !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-children-section {
        padding: 0 !important;
        margin-top: 18px;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-section-heading {
        min-height: 42px;
        padding: 0 2px 8px !important;
        border: 0 !important;
        background: transparent !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-section-heading span {
        display: none !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-section-heading h2 {
        color: var(--pwa-v2-text) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-group-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        overflow: visible;
        border: 0;
        border-radius: 0 !important;
        background: transparent;
    }

    #epc-app[data-pwa-mode="1"] .epc-group-card {
        display: flex !important;
        width: auto !important;
        min-width: 0;
        max-width: none !important;
        min-height: 0 !important;
        padding: 0 !important;
        align-items: stretch;
        flex: none !important;
        flex-direction: column;
        border: 1px solid var(--pwa-v2-border) !important;
        border-radius: 14px !important;
        color: #5c5f68 !important;
        background: var(--pwa-v2-surface) !important;
        box-shadow: 0 4px 14px rgb(24 24 27 / 5%) !important;
        transform: none !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-group-card + .epc-group-card {
        border-top: 1px solid var(--pwa-v2-border) !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-group-card::after {
        display: none !important;
        content: none !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-group-card-image {
        width: 100% !important;
        height: clamp(148px, 42vw, 180px) !important;
        min-height: clamp(148px, 42vw, 180px) !important;
        flex: 0 0 auto;
        margin: 0;
        border: 0 !important;
        border-bottom: 1px solid var(--pwa-v2-border) !important;
        border-radius: 13px 13px 0 0 !important;
        background: var(--pwa-v2-page) !important;
    }

    #epc-app[data-pwa-mode="1"]
        .epc-group-card-image > .epc-single-group-image,
    #epc-app[data-pwa-mode="1"]
        .epc-group-card-image > .epc-group-own-image {
        padding: 4px !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-group-card-content {
        min-width: 0;
        flex: 1;
        padding: 10px !important;
        text-align: right;
    }

    #epc-app[data-pwa-mode="1"] .epc-group-card.is-home-group {
        min-height: 92px !important;
        justify-content: center;
    }

    #epc-app[data-pwa-mode="1"]
        .epc-group-card.is-home-group > .epc-group-card-content {
        display: flex;
        min-height: 90px;
        align-items: center;
    }

    #epc-app[data-pwa-mode="1"] .epc-group-card-heading {
        display: block !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-group-card-sequence {
        display: none !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-group-card h3 {
        color: #5c5f68 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.65 !important;
        text-align: right !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-group-card:active {
        color: var(--pwa-v2-brand) !important;
        background: var(--pwa-v2-surface-soft) !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-node-summary {
        padding: 10px 2px !important;
        border: 0 !important;
        border-top: 1px solid var(--pwa-v2-border) !important;
        border-bottom: 1px solid var(--pwa-v2-border) !important;
        border-radius: 0 !important;
        color: var(--pwa-v2-text) !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-node-summary h2 {
        color: var(--pwa-v2-text) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-search-dialog {
        align-items: flex-start !important;
        padding: calc(max(12px, env(safe-area-inset-top)) + 8px) 12px
            calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-search-dialog__card {
        width: min(100%, 500px) !important;
        max-height: calc(
            100dvh - 104px - env(safe-area-inset-bottom, 0px)
        ) !important;
        margin: 0 auto !important;
        border: 1px solid var(--pwa-v2-border) !important;
        border-radius: var(--pwa-v2-sheet-radius) !important;
        color: var(--pwa-v2-text) !important;
        background: var(--pwa-v2-surface) !important;
        box-shadow: 0 22px 60px rgb(24 24 27 / 22%) !important;
        transform: none !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-search-dialog__head {
        min-height: 66px;
        padding: 11px 14px !important;
        border-bottom: 1px solid var(--pwa-v2-border) !important;
        background: var(--pwa-v2-surface) !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-search-dialog__head strong {
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-search-dialog__head small {
        color: var(--pwa-v2-muted) !important;
        font-size: 12px !important;
        font-weight: 400 !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-search-dialog__head > button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 12px !important;
        color: #52525b !important;
        background: var(--pwa-v2-surface-soft) !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-search-dialog__body {
        padding: 14px !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-search-action {
        min-height: 66px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #epc-app[data-pwa-mode="1"]
        .epc-pwa-search-action
        + .epc-pwa-search-action {
        border-top: 1px solid #f0f0f2 !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-exact-search > p {
        display: none !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-exact-search .epc-sidebar-search {
        min-height: 56px !important;
        border: 1px solid var(--pwa-v2-border) !important;
        border-radius: 14px !important;
        background: var(--pwa-v2-page) !important;
        box-shadow: none !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-exact-search input {
        min-height: 54px !important;
        padding-right: 48px !important;
        padding-left: 12px !important;
        direction: rtl !important;
        color: var(--pwa-v2-text) !important;
        background: transparent !important;
        font-size: 16px !important;
        text-align: right !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-taskbar__menu {
        display: grid !important;
        width: 32px !important;
        height: 30px !important;
        place-items: center;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-taskbar__menu i {
        display: none !important;
    }

    #epc-app[data-pwa-mode="1"] .epc-pwa-taskbar__menu svg {
        display: block;
        width: 25px;
        height: 25px;
    }
}

/* ------------------------------------------------------------------
   Greyscale floor for the whole PWA.

   Tailwind's zinc-700 (rgb 63 63 70) is the body text colour and is used
   on ~86 elements plus <body> itself. On a phone it reads as black, so it
   is lifted to a dark grey here — one rule instead of touching every
   template. Same specificity as the utility, but this file loads last.
   ------------------------------------------------------------------ */

/* ==================================================================
   PWA colour system
   ------------------------------------------------------------------
   Three rules, the same ones consumer apps like the App Store or a
   storefront app follow:

   1. The canvas is a real step below white. It used to be #fafafa,
      1.04:1 against a white card — invisible. #f1f1f3 is 1.13:1: you
      can see where a card ends without drawing a box around it.
   2. Neutral, no hue. R/G/B stay within 2 points of each other. A cool
      cast reads like an admin dashboard, a warm one like a receipt;
      neutral greys let the red brand be the only colour on screen.
   3. Depth comes from elevation, not outlines. Cards get a soft shadow
      and keep a hairline border only where one carries meaning.

   Set here rather than in resources/css/pwa.css because that file is
   compiled into app.css, which loads before this one.
   ================================================================== */
:root {
    --pwa-page: #f1f1f3;
    --pwa-surface: #ffffff;
    --pwa-surface-soft: #f7f7f8;
    --pwa-border: #e5e5e8;
    --pwa-text: #55575e;
    --pwa-muted: #7b7d84;
    --pwa-shadow-card: 0 1px 2px rgb(24 24 27 / 4%), 0 2px 8px rgb(24 24 27 / 5%);
}

html[data-pwa-theme="dark"] {
    --pwa-page: #1b1c21;
    --pwa-surface: #24252b;
    --pwa-surface-soft: #2b2c33;
    --pwa-border: #41424a;
    --pwa-text: #f4f4f5;
    --pwa-muted: #a1a1aa;
    --pwa-shadow-card: none;
}

/* Every PWA body carries bg-zinc-50 from the layout; overriding that one
   utility retints the canvas everywhere, including pages that opt out of
   the bottom nav. */
body.bg-zinc-50 {
    background-color: var(--pwa-page);
}

/* The darkest text in the app: a dark grey, never black. Same specificity
   as Tailwind's utility, and this file loads last. */
.text-zinc-700 {
    color: var(--pwa-text);
}

/* Unified PWA journey feedback */
.pwa-network-status {
    position: fixed;
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    left: max(14px, env(safe-area-inset-left, 0px));
    z-index: 90;
    display: grid;
    max-width: 480px;
    min-height: 52px;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    padding: 8px 10px 8px 8px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    background: #27272a;
    color: #fff;
    box-shadow: 0 16px 42px rgba(24, 24, 27, .2);
    font-size: 12px;
    line-height: 1.75;
}
.pwa-network-status.hidden { display: none; }
.pwa-network-status.is-online { background: #16784d; }
.pwa-network-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .16);
}
.pwa-network-status.is-online .pwa-network-status__dot {
    background: #a7f3d0;
    box-shadow: 0 0 0 4px rgba(167, 243, 208, .16);
}
.pwa-network-status__message { min-width: 0; }
.pwa-network-status__retry {
    min-width: 88px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 11px;
    background: rgba(255, 255, 255, .12);
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.pwa-network-status__retry:disabled { opacity: .65; cursor: wait; }
.pwa-checkout-page :where(input, select, textarea)[aria-invalid="true"] {
    border-color: #dc2626 !important;
    background: #fff7f7 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .08);
}
[data-pwa-submit-locked] {
    position: relative;
    cursor: wait !important;
    opacity: .78;
}
[data-pwa-submit-locked]::after {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 999px;
    content: '';
    vertical-align: -2px;
    animation: pwa-submit-lock-spin .7s linear infinite;
}
@keyframes pwa-submit-lock-spin { to { transform: rotate(360deg); } }
body:not(.pwa-has-bottom-nav) .pwa-network-status {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 769px) {
    .pwa-network-status { bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    [data-pwa-submit-locked]::after { animation-duration: 1.4s; }
}