.mobile-compare-picker[hidden] {
    display: none !important;
}

@media (max-width: 768px) {
    body.mobile-compare-picker-open {
        overflow: hidden;
    }

    .mobile-compare-picker {
        position: fixed;
        inset: 0;
        z-index: 10010;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding-top: 16px;
    }

    .mobile-compare-picker__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(7, 24, 39, .68);
    }

    .mobile-compare-picker__dialog {
        position: relative;
        z-index: 1;
        display: flex;
        width: 100%;
        max-width: 560px;
        max-height: calc(100dvh - 16px);
        flex-direction: column;
        overflow: hidden;
        border: 1px solid #cbdce4;
        border-bottom: 0;
        border-radius: 8px 8px 0 0;
        background: #fff;
        box-shadow: 0 -18px 45px rgba(7, 24, 39, .24);
    }

    .mobile-compare-picker__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        border-bottom: 3px solid #15a4bc;
        background: #0b3558;
    }

    .mobile-compare-picker__heading {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 11px;
    }

    .mobile-compare-picker__heading-icon {
        display: inline-flex;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 6px;
        background: rgba(255, 255, 255, .1);
        color: #fff;
        font-size: 17px;
    }

    .mobile-compare-picker__heading h2 {
        margin: 0 0 2px;
        color: #fff;
        font-size: 17px;
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: 0;
    }

    .mobile-compare-picker__heading span {
        color: rgba(255, 255, 255, .72);
        font-size: 11px;
        font-weight: 650;
    }

    .mobile-compare-picker__heading b {
        color: #8ee5ed;
    }

    .mobile-compare-picker__close {
        display: inline-flex;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 6px;
        background: rgba(255, 255, 255, .1);
        color: #fff;
    }

    .mobile-compare-picker__body {
        min-height: 0;
        flex: 1;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 14px 14px 18px;
        background: #f5f8fa;
    }

    .mobile-compare-picker__section-head {
        margin-bottom: 8px;
    }

    .mobile-compare-picker__section-head h3 {
        margin: 0;
        color: #10243a;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .mobile-compare-picker__selected-list {
        display: grid;
        gap: 7px;
    }

    .mobile-compare-picker__selected-empty {
        padding: 11px 12px;
        border: 1px dashed #bdcdd5;
        border-radius: 6px;
        background: #fff;
        color: #657789;
        font-size: 12px;
        text-align: center;
    }

    .mobile-compare-picker__selected-item {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 34px;
        align-items: center;
        gap: 9px;
        padding: 7px;
        border: 1px solid #d5e1e7;
        border-radius: 6px;
        background: #fff;
    }

    .mobile-compare-picker__selected-item img {
        width: 42px;
        height: 42px;
        object-fit: contain;
        border-radius: 4px;
    }

    .mobile-compare-picker__selected-item strong {
        display: -webkit-box;
        overflow: hidden;
        color: #18324b;
        font-size: 12px;
        font-weight: 750;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .mobile-compare-picker__remove {
        display: inline-flex;
        width: 34px;
        height: 34px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid #f1c8c8;
        border-radius: 6px;
        background: #fff5f5;
        color: #b42318;
    }

    .mobile-compare-picker__filters {
        display: grid;
        gap: 10px;
        margin-top: 15px;
        padding-top: 14px;
        border-top: 1px solid #d7e3e8;
    }

    .mobile-compare-picker__field > span:first-child {
        display: block;
        margin-bottom: 5px;
        color: #31485d;
        font-size: 12px;
        font-weight: 800;
    }

    .mobile-compare-picker__field select,
    .mobile-compare-picker__field input {
        width: 100%;
        height: 45px;
        margin: 0;
        border: 1px solid #c5d5dd;
        border-radius: 6px;
        background-color: #fff;
        color: #10243a;
        font-size: 14px;
        font-weight: 650;
    }

    .mobile-compare-picker__field select {
        padding: 0 38px 0 12px;
    }

    .mobile-compare-picker__field input {
        padding: 0 12px 0 39px;
    }

    .mobile-compare-picker__field select:focus,
    .mobile-compare-picker__field input:focus {
        border-color: #0f7895;
        outline: 3px solid rgba(15, 120, 149, .12);
    }

    .mobile-compare-picker__search-wrap {
        position: relative;
        display: block;
    }

    .mobile-compare-picker__search-wrap > i {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 13px;
        color: #6a7d8d;
        transform: translateY(-50%);
    }

    .mobile-compare-picker__status {
        min-height: 18px;
        margin: 9px 0 5px;
        color: #66798a;
        font-size: 11px;
        font-weight: 700;
    }

    .mobile-compare-picker__status.is-error {
        color: #b42318;
    }

    .mobile-compare-picker__products {
        display: grid;
        gap: 8px;
    }

    .mobile-compare-picker__message {
        padding: 24px 12px;
        border: 1px solid #d8e4e9;
        border-radius: 6px;
        background: #fff;
        color: #657789;
        font-size: 13px;
        text-align: center;
    }

    .mobile-compare-picker__product {
        display: grid;
        grid-template-columns: 62px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        min-height: 82px;
        padding: 9px;
        border: 1px solid #d5e1e7;
        border-radius: 6px;
        background: #fff;
    }

    .mobile-compare-picker__product img {
        width: 62px;
        height: 62px;
        object-fit: contain;
        border-radius: 4px;
    }

    .mobile-compare-picker__product-copy {
        min-width: 0;
    }

    .mobile-compare-picker__product-copy strong {
        display: -webkit-box;
        overflow: hidden;
        color: #10243a;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .mobile-compare-picker__product-copy span,
    .mobile-compare-picker__product-copy b {
        display: block;
        margin-top: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-compare-picker__product-copy span {
        color: #718292;
        font-size: 10px;
    }

    .mobile-compare-picker__product-copy b {
        color: #0f7895;
        font-size: 12px;
    }

    .mobile-compare-picker__toggle {
        display: inline-flex;
        min-width: 68px;
        height: 36px;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0 9px;
        border: 1px solid #0f7895;
        border-radius: 6px;
        background: #fff;
        color: #0f7895;
        font-size: 11px;
        font-weight: 800;
    }

    .mobile-compare-picker__toggle.is-selected {
        border-color: #efc4c4;
        background: #fff5f5;
        color: #b42318;
    }

    .mobile-compare-picker__more {
        display: inline-flex;
        width: 100%;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 12px;
        border: 1px solid #b9ccd5;
        border-radius: 6px;
        background: #fff;
        color: #173f63;
        font-size: 12px;
        font-weight: 800;
    }

    .mobile-compare-picker__footer {
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid #d4e0e6;
        background: #fff;
    }

    .mobile-compare-picker__continue {
        display: flex;
        min-height: 46px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 6px;
        background: #0b3558;
        color: #fff !important;
        font-size: 13px;
        font-weight: 800;
        text-decoration: none !important;
    }

    .mobile-compare-picker__continue b {
        display: inline-flex;
        min-width: 22px;
        height: 22px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #15a4bc;
        color: #fff;
        font-size: 11px;
    }

    .mobile-compare-picker__continue[aria-disabled="true"] {
        background: #9aaab5;
        pointer-events: none;
    }
}

@media (min-width: 769px) {
    .mobile-compare-picker {
        display: none !important;
    }
}