/* Modular Wrap shop — scoped design tokens */
.mw-page {
    --mw-ink: #101820;
    --mw-muted: #6b7785;
    --mw-line: #e4eaf0;
    --mw-line-strong: #cfd9e2;
    --mw-blue: #25a9e0;
    --mw-blue-dark: #1b8ec0;
    --mw-surface: #f6f9fb;
    background: #fff;
    color: var(--mw-ink);
}

.mw-page .mw-shell {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Vehicle finder ---------- */
.mw-hero {
    position: relative;
    background: var(--mw-surface);
    padding: 1.75rem 0 2.5rem;
}

.mw-page-head {
    margin-bottom: 1.25rem;
}

.mw-page-head h1 {
    margin: 0 0 0.35rem;
    color: var(--mw-ink);
    font-size: 32px;
    line-height: 1.2;
    font-weight: 500;
}

.mw-page-head .breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent;
}

.mw-page-head .breadcrumb-item,
.mw-page-head .breadcrumb-item a,
.mw-page-head .breadcrumb-item.active {
    color: var(--mw-muted) !important;
    font-size: 14px;
    line-height: 1.4;
    font-style: normal;
    opacity: 1;
    font-weight: 400;
}

/* Every breadcrumb step is a real link, all the same grey; hover shows it. */
.mw-page-head .breadcrumb-item a {
    cursor: pointer;
    pointer-events: auto;
    text-decoration: none;
    transition: color 0.15s ease;
}

.mw-page-head .breadcrumb-item a:hover,
.mw-page-head .breadcrumb-item a:focus-visible {
    color: var(--mw-blue-dark) !important;
    text-decoration: underline;
}

.mw-finder {
    position: relative;
    z-index: 2;
    margin-top: 0;
    background: #fff;
    border: 1px solid var(--mw-line);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(16, 24, 32, 0.10);
    padding: 2.25rem 2.25rem 2rem;
}

.mw-finder-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}

.mw-finder-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--mw-ink);
}

.mw-finder-subtitle {
    margin: 0.4rem 0 0;
    color: var(--mw-muted);
    font-size: 15px;
    line-height: 1.5;
}

.mw-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    height: 42px;
    padding: 0 1.1rem;
    background: #fff;
    border: 1px solid var(--mw-line-strong);
    border-radius: 6px;
    color: var(--mw-ink);
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.mw-reset:hover {
    background: var(--mw-ink);
    border-color: var(--mw-ink);
    color: #fff;
}

.mw-reset.is-hidden {
    display: none;
}

.mw-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}

.mw-field {
    display: flex;
    min-width: 0;
}

.mw-field.is-locked {
    display: none;
}

.mw-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 52px;
    padding: 0 2.75rem 0 1rem;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7785'%3E%3Cpath d='M8 11.5 2.5 6l1.06-1.06L8 9.38l4.44-4.44L13.5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 14px 14px;
    border: 1px solid var(--mw-line-strong);
    border-radius: 6px;
    color: var(--mw-muted);
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.mw-select:hover {
    border-color: #aebecc;
}

.mw-select:focus {
    outline: none;
    border-color: var(--mw-blue);
    box-shadow: 0 0 0 3px rgba(37, 169, 224, 0.16);
}

.mw-field.has-value .mw-select {
    border-color: var(--mw-blue);
    color: var(--mw-ink);
    font-weight: 500;
}

.mw-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    height: 52px;
    background: var(--mw-blue);
    border: 0;
    border-radius: 6px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.mw-submit:hover {
    background: var(--mw-blue-dark);
}

.mw-submit:active {
    transform: translateY(1px);
}

/* ---------- Catalog ---------- */
.mw-catalog {
    padding: 4rem 0 5.5rem;
}

#mwResults {
    scroll-margin-top: 90px;
}

.mw-catalog-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid var(--mw-line);
    margin-bottom: 2.25rem;
}

.mw-catalog-title {
    margin: 0;
    font-size: 26px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--mw-ink);
}

.mw-catalog-subtitle {
    margin: 0.4rem 0 0;
    color: var(--mw-muted);
    font-size: 15px;
}

.mw-count {
    flex-shrink: 0;
    padding: 0.4rem 0.85rem;
    background: var(--mw-surface);
    border: 1px solid var(--mw-line);
    border-radius: 999px;
    color: var(--mw-muted);
    font-size: 13px;
    white-space: nowrap;
}

.mw-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem;
}

.mw-recent {
    position: relative;
    padding: 0 52px;
}

.mw-recent-viewport {
    overflow: hidden;
    width: 100%;
    /* room for the card hover lift and shadow inside the clipped viewport */
    padding: 6px 0 26px;
    margin: -6px 0 -26px;
    touch-action: pan-y;
    container-type: inline-size;
    container-name: mw-recent;
}

.mw-recent-track {
    display: flex;
    align-items: stretch;
    gap: 1.75rem;
    position: relative;
    will-change: transform;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.mw-recent-track.is-instant {
    transition: none;
}

.mw-recent-slide {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100cqi - 5.25rem) / 4);
    width: calc((100cqi - 5.25rem) / 4);
    max-width: calc((100cqi - 5.25rem) / 4);
    min-width: 0;
}

.mw-recent-slide .mw-card {
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
    max-width: 100%;
}

@container mw-recent (max-width: 1083.98px) {
    .mw-recent-slide {
        flex-basis: calc((100cqi - 3.5rem) / 3);
        width: calc((100cqi - 3.5rem) / 3);
        max-width: calc((100cqi - 3.5rem) / 3);
    }
}

@container mw-recent (max-width: 805.98px) {
    .mw-recent-slide {
        flex-basis: calc((100cqi - 1.75rem) / 2);
        width: calc((100cqi - 1.75rem) / 2);
        max-width: calc((100cqi - 1.75rem) / 2);
    }
}

@container mw-recent (max-width: 527.98px) {
    .mw-recent-slide {
        flex-basis: 100cqi;
        width: 100cqi;
        max-width: 100cqi;
    }
}

.mw-recent-btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    margin-top: -21px;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 1.5px solid var(--mw-line-strong);
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(16, 24, 32, 0.12);
    color: var(--mw-ink);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.mw-recent-btn.is-prev {
    left: 0;
}

.mw-recent-btn.is-next {
    right: 0;
}

.mw-recent-btn i {
    color: inherit;
    line-height: 1;
}

.mw-recent-btn:hover:not(:disabled),
.mw-recent-btn:focus-visible:not(:disabled) {
    background: #fff;
    border-color: var(--mw-blue);
    color: var(--mw-blue-dark);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 169, 224, 0.22);
}

.mw-recent-btn:disabled,
.mw-recent.is-static .mw-recent-btn {
    display: none;
}

.mw-recent-slide[data-mw-recent-clone] {
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .mw-recent {
        padding: 0;
    }

    .mw-recent-btn.is-prev {
        left: 8px;
    }

    .mw-recent-btn.is-next {
        right: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mw-recent-track {
        transition: none;
    }
}

/* ---------- Pattern card ----------
   One card for the shop and the customisation flow, in both the carousel and the search grid.
   Shares the landing page's shape language: 12px card, 8px media, 6px buttons.
   Preview frame is a fixed 4:3 so every card lines up whatever size the source image is
   (see docs/ModularWrap-Image-Guidelines.md). */
.mw-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--mw-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 32, 0.04), 0 8px 22px rgba(16, 24, 32, 0.05);
    overflow: hidden;
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.mw-card:hover {
    border-color: #cfe4f1;
    box-shadow: 0 2px 4px rgba(16, 24, 32, 0.04), 0 18px 38px rgba(16, 24, 32, 0.11);
    transform: translateY(-3px);
}

.mw-card-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 7% 9%;
    background: #fff;
    border-bottom: 1px solid var(--mw-line);
    overflow: hidden;
}

/* Pattern previews are flat drawings on white or transparent; multiply drops the white box
   so the drawing sits directly on the frame's white background. */
.mw-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.35s ease;
}

.mw-card-media.is-empty {
    padding: 1rem;
    background: var(--mw-surface);
}

.mw-media-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    height: 100%;
    justify-content: center;
    border: 1px dashed var(--mw-line-strong);
    border-radius: 8px;
    color: var(--mw-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    padding: 0 1rem;
}

.mw-media-empty i {
    font-size: 26px;
    color: var(--mw-line-strong);
}

.mw-card:hover .mw-card-media img {
    transform: scale(1.04);
}

.mw-save {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 2;
    padding: 0.28rem 0.6rem;
    background: var(--mw-ink);
    border-radius: 999px;
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.mw-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1rem 1.1rem 1.1rem;
}

.mw-card-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin-bottom: 0.9rem;
}

.mw-card-vehicle {
    margin: 0;
    color: var(--mw-blue-dark);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mw-card-name {
    margin: 0.3rem 0 0;
    color: var(--mw-ink);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mw-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.6rem;
}

.mw-pills:empty {
    display: none;
}

.mw-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    background: var(--mw-surface);
    border: 1px solid var(--mw-line);
    border-radius: 999px;
    color: var(--mw-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

/* Footer is the same in every card: price on top, full-width action below. */
.mw-card-foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    margin-top: 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--mw-line);
}

.mw-price {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.5rem;
    line-height: 1.15;
    min-width: 0;
}

.mw-price-was {
    color: var(--mw-muted);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: line-through;
    white-space: nowrap;
}

.mw-price-now {
    color: var(--mw-ink);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.mw-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-shrink: 0;
    width: 100%;
    height: 44px;
    padding: 0 1rem;
    background: var(--mw-blue);
    border: 0;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.mw-add i {
    font-size: 15px;
}

.mw-add:hover {
    background: var(--mw-blue-dark);
    box-shadow: 0 6px 16px rgba(37, 169, 224, 0.28);
}

.mw-add:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 169, 224, 0.32);
}

.mw-add.is-in-cart {
    background: var(--mw-ink);
}

.mw-add.is-in-cart:hover {
    background: #1d2733;
    box-shadow: none;
}

/* ---------- Empty state ---------- */
.mw-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 1.5rem;
    background: var(--mw-surface);
    border: 1px solid var(--mw-line);
    border-radius: 12px;
}

/* Only the big illustration icon: the button icon keeps its own small size. */
.mw-empty > i {
    color: var(--mw-line-strong);
    font-size: 40px;
    margin-bottom: 1rem;
}

.mw-empty-title {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--mw-ink);
}

.mw-empty-text {
    margin: 0.6rem 0 1.5rem;
    color: var(--mw-muted);
    font-size: 15px;
    max-width: 44ch;
}

.mw-empty-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 44px;
    padding: 0 1.25rem;
    background: var(--mw-blue);
    border-radius: 6px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.18s ease;
}

.mw-empty-title + .mw-empty-action {
    margin-top: 1.5rem;
}

.mw-empty-action i {
    font-size: 16px;
    line-height: 1;
}

.mw-empty-action:hover {
    background: var(--mw-blue-dark);
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .mw-fields,
    .mw-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .mw-finder {
        padding: 1.75rem 1.5rem 1.5rem;
    }

    .mw-fields,
    .mw-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .mw-page .mw-shell {
        padding: 0 16px;
    }

    .mw-hero {
        padding: 1.25rem 0 2rem;
    }

    .mw-page-head h1 {
        font-size: 26px;
    }

    .mw-finder {
        margin-top: 0;
        padding: 1.5rem 1.25rem;
    }

    .mw-finder-head {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        margin-bottom: 1.25rem;
    }

    .mw-reset {
        align-self: flex-start;
    }

    .mw-finder-title {
        font-size: 21px;
    }

    .mw-catalog {
        padding: 3rem 0 4rem;
    }

    .mw-catalog-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1.75rem;
    }

    .mw-catalog-title {
        font-size: 21px;
    }
}

/* ---------- Hero extras: lead, benefits, bespoke cross-link ---------- */
.mw-page-lead {
    margin: 0.75rem 0 0;
    max-width: 70ch;
    color: var(--mw-muted);
    font-size: 15px;
    line-height: 1.55;
}

.mw-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.mw-benefits li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mw-ink);
    font-size: 14px;
    font-weight: 500;
}

.mw-benefits i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(37, 169, 224, 0.12);
    border-radius: 50%;
    color: var(--mw-blue-dark);
    font-size: 14px;
}

.mw-promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-top: 3rem;
    padding: 1.25rem 1.5rem;
    background: #f7fbfe;
    border: 1px solid #d7eaf4;
    border-radius: 12px;
}

.mw-promo-text {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0;
    color: var(--mw-ink);
    font-size: 15px;
    line-height: 1.5;
}

.mw-promo-text i {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: #fff;
    border: 1px solid #d7eaf4;
    border-radius: 50%;
    color: var(--mw-blue-dark);
    font-size: 18px;
}

/* Compact hero for cart and result pages */
.mw-hero.is-compact {
    padding: 1.75rem 0 1.5rem;
    border-bottom: 1px solid var(--mw-line);
}

.mw-hero.is-compact .mw-page-head {
    margin-bottom: 0;
}

/* ---------- Buttons and panels (shop pages) ---------- */
.mw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 46px;
    padding: 0 1.35rem;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.mw-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 169, 224, 0.3);
}

.mw-btn-primary {
    background: var(--mw-blue);
    color: #fff !important;
}

.mw-btn-primary:hover {
    background: var(--mw-blue-dark);
    box-shadow: 0 6px 16px rgba(37, 169, 224, 0.28);
}

.mw-btn-ghost {
    background: #fff;
    border-color: var(--mw-line-strong);
    color: var(--mw-ink) !important;
}

.mw-btn-ghost:hover {
    border-color: var(--mw-ink);
}

.mw-btn-block {
    width: 100%;
}

.mw-panel {
    background: #fff;
    border: 1px solid var(--mw-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 32, 0.04), 0 8px 22px rgba(16, 24, 32, 0.05);
}

/* ---------- Cart ---------- */
.mw-cart {
    padding: 2.25rem 0 4.5rem;
}

.mw-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas:
        "list summary"
        "offer summary";
    grid-template-rows: auto 1fr;
    gap: 1.75rem;
    align-items: start;
}

.mw-cart-layout > .mw-cart-list {
    grid-area: list;
}

.mw-cart-layout > .mw-cart-summary {
    grid-area: summary;
}

.mw-cart-offer {
    grid-area: offer;
    min-width: 0;
}

.mw-cart-offer .mw-sub {
    margin-bottom: 0;
}

.mw-cart-list {
    margin: 0;
    padding: 0.35rem 1.5rem;
    list-style: none;
}

.mw-cart-item {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1.1rem;
    padding: 1.1rem 0;
}

.mw-cart-item + .mw-cart-item {
    border-top: 1px solid var(--mw-line);
}

/* Same 4:3 framed preview as the product card, at thumbnail size. */
.mw-cart-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 78px;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid var(--mw-line);
    border-radius: 8px;
    color: var(--mw-line-strong);
    font-size: 22px;
}

.mw-cart-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.mw-cart-name {
    margin: 0;
    color: var(--mw-ink);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.3;
}

.mw-cart-car {
    margin: 0.25rem 0 0;
    color: var(--mw-muted);
    font-size: 13.5px;
}

.mw-cart-price {
    color: var(--mw-ink);
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
}

.mw-cart-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--mw-line);
    border-radius: 8px;
    color: var(--mw-muted);
    font-size: 15px;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.mw-cart-remove:hover,
.mw-cart-remove:focus-visible {
    background: #fdf2f2;
    border-color: #f1c4c4;
    color: #c42b2b;
    outline: none;
}

.mw-cart-summary {
    position: sticky;
    top: 100px;
    padding: 1.5rem;
}

.mw-cart-summary-title {
    margin: 0 0 1rem;
    color: var(--mw-ink);
    font-size: 18px;
    font-weight: 500;
}

.mw-cart-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.6rem;
    color: var(--mw-muted);
    font-size: 14.5px;
}

.mw-cart-row.is-total {
    margin: 1rem 0 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mw-line);
    color: var(--mw-ink);
    font-size: 16px;
    font-weight: 500;
}

.mw-cart-row.is-total strong {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mw-cart-note {
    display: flex;
    gap: 0.55rem;
    margin: 1rem 0 0;
    color: var(--mw-muted);
    font-size: 13px;
    line-height: 1.5;
}

.mw-cart-note i {
    color: var(--mw-blue-dark);
}

.mw-cart-continue {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    color: var(--mw-blue-dark) !important;
    font-size: 14px;
    font-weight: 600;
}

/* ---------- Subscription offer: subscriber price on cards, strip by the total, full offer card ----------
   Informational only: it never blocks or delays the purchase. Selectors are prefixed with
   .mw-sub where needed so the bespoke page's global heading/strong weights do not flatten them. */
.mw-sub-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin: -0.35rem 0 0;
    color: var(--mw-blue-dark);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    cursor: help;
}

.mw-sub-price i {
    font-size: 13px;
}

.mw-sub-price strong {
    font-weight: 600;
}

/* Clickable "Price with subscription" line with an instant tooltip */
.mw-sub-price.is-link {
    position: relative;
    align-self: flex-start;
    color: var(--mw-blue-dark) !important;
    text-decoration: none !important;
    cursor: pointer;
}

.mw-sub-price.is-link > span:first-of-type {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.mw-sub-price.is-link:hover > span:first-of-type,
.mw-sub-price.is-link:focus-visible > span:first-of-type {
    text-decoration-style: solid;
}

.mw-sub-price-tip {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 5;
    width: max-content;
    max-width: 230px;
    padding: 8px 11px;
    background: var(--mw-ink);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(16, 24, 32, 0.22);
    color: #fff;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
    pointer-events: none;
}

/* Small arrow pointing at the line */
.mw-sub-price-tip::after {
    content: "";
    position: absolute;
    left: 16px;
    top: 100%;
    border: 6px solid transparent;
    border-top-color: var(--mw-ink);
}

/* Invisible bridge so the pointer can move from the line onto the tip without it closing */
.mw-sub-price-tip::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
}

.mw-sub-price-tip b {
    display: block;
    margin-top: 4px;
    color: var(--mw-sky, #7fd4f5);
    font-weight: 600;
}

.mw-sub-price.is-link:hover .mw-sub-price-tip,
.mw-sub-price.is-link:focus-visible .mw-sub-price-tip {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

@media (hover: none) {
    .mw-sub-price-tip {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mw-sub-price-tip {
        transition: none;
    }
}

.mw-sub-price.is-applied {
    color: #1f8a4c;
    cursor: default;
}

/* "Subscription active" note under the vehicle search (subscribers only) */
.mw-sub-note {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0.9rem 0 0;
    padding: 0.7rem 0.75rem 0.7rem 0.7rem;
    background: rgba(31, 138, 76, 0.07);
    border: 1px solid rgba(31, 138, 76, 0.25);
    border-radius: 10px;
}

.mw-sub-note-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #1f8a4c;
    border-radius: 50%;
    color: #fff;
    font-size: 17px;
}

.mw-sub-note-text {
    flex: 1 1 auto;
    margin: 0;
    color: var(--mw-ink);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4;
}

/* Savings estimator under the vehicle search (everyone who is not a subscriber) */
.mw-finder-head > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.mw-est {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    margin-top: 1.1rem;
    background: #fff;
    border: 1px solid #cfe7f4;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(37, 169, 224, 0.1);
    overflow: hidden;
}

.mw-est-in {
    padding: 20px 22px;
}

.mw-est-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 6px;
    background: linear-gradient(135deg, var(--mw-blue), var(--mw-blue-dark));
    border-radius: 999px;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mw-est-badge i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    font-size: 9px;
}

.mw-page .mw-est-title {
    margin: 10px 0 2px;
    color: var(--mw-ink);
    font-size: 18px;
    font-weight: 600 !important;
    line-height: 1.35;
}

.mw-est-hint {
    margin: 0;
    color: var(--mw-muted);
    font-size: 13px;
}

.mw-est-range {
    margin-top: 12px;
}

.mw-est-range-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    color: var(--mw-muted);
    font-size: 13px;
}

.mw-est-range-row label {
    margin: 0;
    font-weight: 400;
}

.mw-est-range-row b {
    color: var(--mw-ink);
    font-size: 15px;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
}

.mw-est input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    margin: 12px 0 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(90deg, var(--mw-blue) 0%, var(--mw-blue) var(--fill, 10%), #dbe6ee var(--fill, 10%), #dbe6ee 100%);
}

.mw-est input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    background: #fff;
    border: 3px solid var(--mw-blue);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(16, 24, 32, 0.2);
}

.mw-est input[type=range]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #fff;
    border: 3px solid var(--mw-blue);
    border-radius: 50%;
}

.mw-est input[type=range]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(37, 169, 224, 0.3);
}

.mw-est-ticks {
    display: flex;
    justify-content: space-between;
    color: #9aa6b2;
    font-size: 11px;
}

.mw-est-basis {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    color: var(--mw-muted);
    font-size: 12.5px;
}

.mw-est-out {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 20px 24px;
    background: linear-gradient(160deg, #f2fbff 0%, #e3f4fc 100%);
    border-left: 1px solid #cfe7f4;
}

.mw-est-out-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mw-est-kicker {
    color: var(--mw-blue-dark);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mw-est-period {
    display: inline-flex;
    flex-shrink: 0;
    padding: 3px;
    background: #fff;
    border: 1px solid var(--mw-line-strong);
    border-radius: 8px;
}

.mw-est-period button {
    padding: 4px 12px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--mw-muted);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.mw-est-period button.is-on {
    background: var(--mw-ink);
    color: #fff;
}

.mw-est-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 6px 0 2px;
}

.mw-est-bar {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) 76px;
    align-items: center;
    gap: 12px;
    color: var(--mw-muted);
    font-size: 13px;
}

.mw-est-bar.is-subscriber .mw-est-bar-label {
    color: var(--mw-ink);
    font-weight: 600;
}

.mw-est-track {
    height: 12px;
    background: #fff;
    border-radius: 999px;
    overflow: hidden;
}

.mw-est-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.35s ease;
}

.mw-est-fill.is-regular {
    background: #b8c4cf;
}

.mw-est-fill.is-subscriber {
    background: linear-gradient(90deg, var(--mw-blue), var(--mw-blue-dark));
}

.mw-est-amount {
    color: var(--mw-ink);
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mw-est-keep,
.mw-est-payback {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    border-radius: 10px;
    background: var(--mw-green-soft, #e8f4ee);
    color: #1f8a4c;
}

.mw-est-keep {
    padding: 6px 12px;
    font-size: 15px;
    font-weight: 700;
}

.mw-est-payback {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}

.mw-est-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.45rem;
    height: 44px;
    margin-top: 6px;
    padding: 0 1.2rem;
    background: var(--mw-blue);
    border-radius: 8px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.mw-est-cta:hover,
.mw-est-cta:focus-visible {
    background: var(--mw-blue-dark);
    box-shadow: 0 6px 16px rgba(37, 169, 224, 0.3);
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .mw-est-fill {
        transition: none;
    }
}

@media (max-width: 767.98px) {
    .mw-est {
        grid-template-columns: minmax(0, 1fr);
    }

    .mw-est-out {
        border-left: 0;
        border-top: 1px solid #cfe7f4;
    }
}

@media (max-width: 575.98px) {
    .mw-est-in,
    .mw-est-out {
        padding: 16px;
    }

    .mw-est-out-top {
        flex-wrap: wrap;
    }

    .mw-est-bar {
        grid-template-columns: minmax(0, 1fr) 70px;
        gap: 4px 10px;
    }

    .mw-est-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .mw-est-cta {
        align-self: stretch;
        justify-content: center;
    }
}

/* One line next to the order total */
.mw-sub-strip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0.7rem 0.85rem;
    background: #eef8fd;
    border: 1px solid #bfe3f4;
    border-radius: 8px;
    color: var(--mw-ink) !important;
    font-size: 13.5px;
    line-height: 1.45;
    text-decoration: none !important;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

a.mw-sub-strip:hover,
a.mw-sub-strip:focus-visible {
    background: #e3f4fb;
    border-color: var(--mw-blue);
    outline: none;
}

.mw-sub-strip > i {
    flex-shrink: 0;
    color: var(--mw-blue-dark);
    font-size: 18px;
}

.mw-sub-strip strong {
    font-weight: 700 !important;
}

.mw-sub-strip-link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    color: var(--mw-blue-dark);
    font-weight: 600;
    white-space: nowrap;
}

.mw-sub-strip.is-applied {
    background: rgba(31, 138, 76, 0.07);
    border-color: rgba(31, 138, 76, 0.25);
}

.mw-sub-strip.is-applied > i {
    color: #1f8a4c;
}

/* Full offer card */
.mw-sub {
    margin: 0 0 1.5rem;
    background: #fff;
    border: 1px solid #bfe3f4;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(37, 169, 224, 0.12);
    overflow: hidden;
    scroll-margin-top: 100px;
}

.mw-sub-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 1.3rem;
    background: linear-gradient(135deg, #1b8ec0 0%, #25a9e0 100%);
    color: #fff;
}

.mw-sub-head-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    font-size: 22px;
}

.mw-sub .mw-sub-title {
    margin: 0;
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
}

.mw-sub .mw-sub-title strong {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mw-sub .mw-sub-subtitle {
    margin: 0.15rem 0 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13.5px;
    line-height: 1.4;
}

.mw-sub-body {
    padding: 1.15rem 1.3rem 1.3rem;
}

.mw-sub-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.mw-sub-compare-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.9rem;
    background: var(--mw-surface);
    border: 1px solid var(--mw-line);
    border-radius: 8px;
}

.mw-sub-compare-item span {
    color: var(--mw-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mw-sub .mw-sub-compare-item strong {
    color: var(--mw-ink);
    font-size: 19px;
    font-weight: 600;
}

.mw-sub-compare-item.is-subscriber {
    background: rgba(31, 138, 76, 0.07);
    border-color: rgba(31, 138, 76, 0.3);
}

.mw-sub-compare-item.is-subscriber span,
.mw-sub .mw-sub-compare-item.is-subscriber strong {
    color: #1f8a4c;
}

.mw-sub-explain {
    margin: 1rem 0;
    color: var(--mw-ink);
    font-size: 14px;
    line-height: 1.55;
}

.mw-sub-payback {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 1rem 0 0;
    color: #1f8a4c;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

.mw-sub-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.1rem;
    margin-top: 1.1rem;
}

.mw-sub-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 44px;
    padding: 0 1.15rem;
    background: #fff;
    border: 1.5px solid var(--mw-blue);
    border-radius: 6px;
    color: var(--mw-blue-dark) !important;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.mw-sub-cta:hover,
.mw-sub-cta:focus-visible {
    background: var(--mw-blue);
    color: #fff !important;
    outline: none;
}

.mw-sub-login {
    padding: 0;
    background: none;
    border: 0;
    color: var(--mw-muted);
    font-size: 13.5px;
    text-decoration: underline;
    cursor: pointer;
}

.mw-sub-login:hover {
    color: var(--mw-ink);
}

@media (max-width: 575.98px) {
    /* Phones: the strip reads as one sentence with the link inline, no icon column. */
    .mw-sub-strip {
        display: block;
        padding: 0.6rem 0.75rem;
    }

    .mw-sub-strip > i {
        display: none;
    }

    .mw-sub-strip > span {
        display: inline;
    }

    .mw-sub-strip-link {
        display: inline;
        margin-left: 0.3rem;
    }

    .mw-sub-strip.is-applied {
        display: flex;
    }

    .mw-sub-strip.is-applied > i {
        display: inline;
    }

    .mw-sub-head {
        padding: 0.95rem 1rem;
    }

    .mw-sub .mw-sub-title {
        font-size: 17px;
    }

    .mw-sub .mw-sub-title strong {
        font-size: 22px;
    }

    .mw-sub-body {
        padding: 1rem;
    }

    .mw-sub-cta {
        width: 100%;
    }
}

/* ---------- Result pages (payment success / cancel / download error) ---------- */
.mw-outcome {
    padding: 3rem 0 4.5rem;
}

.mw-outcome-card {
    max-width: 680px;
    margin: 0 auto;
    padding: 2.5rem 2.25rem 2.25rem;
    text-align: center;
}

.mw-outcome-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    font-size: 30px;
}

.mw-outcome-icon.is-success {
    background: rgba(31, 138, 76, 0.12);
    color: #1f8a4c;
}

.mw-outcome-icon.is-pending {
    background: rgba(37, 169, 224, 0.12);
    color: var(--mw-blue-dark);
}

.mw-outcome-icon.is-error {
    background: rgba(196, 43, 43, 0.1);
    color: #c42b2b;
}

.mw-outcome-title {
    margin: 0 0 0.6rem;
    color: var(--mw-ink);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
}

.mw-outcome-lead {
    margin: 0 auto;
    max-width: 52ch;
    color: var(--mw-muted);
    font-size: 15.5px;
    line-height: 1.6;
}

.mw-outcome-label {
    margin: 1.75rem 0 0.6rem;
    color: var(--mw-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mw-zip-list {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.mw-zip-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--mw-surface);
    border: 1px solid var(--mw-line);
    border-radius: 8px;
    color: var(--mw-ink);
    font-size: 14.5px;
}

.mw-zip-list li + li {
    margin-top: 0.5rem;
}

.mw-zip-list li i {
    color: var(--mw-blue-dark);
    font-size: 17px;
}

.mw-zip-list li span {
    color: var(--mw-muted);
}

.mw-outcome-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.25rem auto 0;
    max-width: 56ch;
    color: var(--mw-muted);
    font-size: 13.5px;
    line-height: 1.5;
}

.mw-outcome-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

@media (max-width: 991.98px) {
    .mw-cart-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "list"
            "summary"
            "offer";
        grid-template-rows: auto;
    }

    .mw-cart-summary {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .mw-promo {
        flex-direction: column;
        align-items: stretch;
        padding: 1.1rem;
    }

    .mw-promo .mw-btn {
        width: 100%;
    }

    .mw-cart-list {
        padding: 0.25rem 1rem;
    }

    .mw-cart-item {
        grid-template-columns: 84px minmax(0, 1fr) auto;
        grid-template-areas:
            "thumb info remove"
            "thumb price remove";
        gap: 0.35rem 0.85rem;
    }

    .mw-cart-thumb {
        grid-area: thumb;
        width: 84px;
        height: 63px;
    }

    .mw-cart-info {
        grid-area: info;
    }

    .mw-cart-price {
        grid-area: price;
        font-size: 16px;
    }

    .mw-cart-remove {
        grid-area: remove;
    }

    .mw-outcome {
        padding: 1.75rem 0 3rem;
    }

    .mw-outcome-card {
        padding: 1.75rem 1.15rem;
    }

    .mw-outcome-actions .mw-btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .mw-fields,
    .mw-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mw-grid {
        gap: 1.25rem;
    }

    .mw-card:hover {
        transform: none;
    }
}

/* Savings estimator (or subscriber note) at the top of the search box, vehicle search below it. */
.mw-finder > .mw-est,
.mw-finder > .mw-sub-note {
    margin-top: 0;
}

.mw-finder > .mw-est + .mw-finder-head,
.mw-finder > .mw-sub-note + .mw-finder-head {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mw-line);
}

.mw-page .mw-finder > .mw-est .mw-est-title {
    font-size: 20px;
}