.logo {
    width: 155px;
    height: 46px;
    background-image: url(../assets/imgs/logo.svg);
    background-repeat: no-repeat;
    margin: 0 auto;
    max-width: 100%;
    background-size: contain;
    background-position: center;
}

.gb.storage.disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
    position: relative;
}

.gb.storage {
    position: relative;
}

.gbs .gb {
    cursor:pointer
}
.phone-color-box.disabled {
cursor:not-allowed !important;
}
/* DEFECT 1 of the sold-out styling: a stale absolute offset written in PHYSICAL properties.
   `left: 0` pins the overlay to the viewer's left in every language, and this file is loaded on the
   RTL build too - the one stylesheet that is never mirrored. It survived because the product page
   hides this element outright (detail-configurator.css display:none's .gb.storage .cross-overlay,
   the red diagonal having been replaced by a dimmed row and a caption), so nobody saw it sitting on
   the wrong edge; it is still live markup on any other .cross-overlay and it is still wrong.
   Logical properties instead, so the box covers its tile in both directions. */
.cross-overlay {
    cursor: not-allowed !important;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
}



.isOutOfStock {
    border-radius: !important;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #D5DFE4;
    position: absolute;
    top: 0;
    z-index: 25;
    background-color: #FFF;
    width: 100%;
    font-size: 23px;
    color: red;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.coming-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    backdrop-filter: blur(1px);
    opacity: 1;
    transition: opacity 0.4s ease;
    border-radius: 10px !important;
    padding: 15px !important;
    text-align: center !important;
}

    .coming-overlay h5 {
        font-size: 1.5rem;
        font-weight: 600;
        letter-spacing: 1px;
        line-height: 40px;
        color: #fff;
    }

input[type=number] {
    -moz-appearance: textfield;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cursor {
    cursor: pointer
}

label.error {
    color: red !important;
}

.disabledBtn {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
    position: relative;
}

a {
    cursor: pointer !important
}

.signup {
    cursor: default !important
}

.forget {
    cursor: default !important
}

    .forget span {
        cursor: pointer !important
    }


.btn.btn-save {
    background: #4285f4 !important;
    color: #fff !important;
    border: 0 !important;
    height: 40px !important;
    line-height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.paginationjs .paginationjs-pages li.active > a {
    background: #4285f4 !important;
}

.btn.btn_blue, .flxCenter {
    display: inline-flex;
    align-items: center;
    width: auto;
}

/*.modal-content {
    background-color: #fff;
}*/


.tools .btn-wishlist.btn-wishlist-red,
.btn.btn-wishlist.btn-wishlist-red,
.tools .btn-wishlist.btn-wishlist-grey:hover {
    background: #ffffff url('../assets/imgs/template/icons/wishlist-hover.svg') no-repeat center !important;
    opacity: unset !important;
    transform: translateX(0)
}

    .tools .btn-wishlist.btn-wishlist-grey,
    .tools .btn-wishlist.btn-wishlist-red:hover {
        background: #ffffff url('../assets/imgs/template/icons/wishlist.svg') no-repeat center !important;
    }

.header .main-header .header-left .header-shop .number-item.favNumber {
    color: white !important;
}

.delete-button[disabled="disabled"] {
    pointer-events: none;
    opacity: 0.5;
}

.hidden-important {
    display: none !important;
}

.mobileFilters {
    display: none;
    /*    visibility: hidden;*/
}



/*Start Shared Classes*/
.bg-AboutHeader {
    background-color: #F7F7F7;
}

.Aboutcontainer {
    display: flex;
}

    .Aboutcontainer .box {
        flex: 1;
        margin-right: 20px;
        background-color: #FFFFFF;
        text-align: center;
        border: 1px solid #CCCCCC;
        border-radius: 6px;
    }

        .Aboutcontainer .box:last-child {
            margin-right: 0;
        }

    .aboutContainer p {
        max-width: 75%;
    }

.aboutBoxContent {
    padding: 24px 32px;
}

.how-it-works {
    text-align: center;
    padding-bottom: 77px;
}

.steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

    .steps .step img {
        position: relative;
        right: 47px;
        top: 13px;
        width: 32px;
        height: 32px;
    }

.step {
    flex: 1 1 300px;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 24px;
    width: 530px;
    height: auto; /*256px*/
    background-color: #FFF;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

    .step h2 {
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 10px;
        line-height: normal !important;
    }

    .step p {
        font-size: 1rem;
        font-weight: 500;
    }

    .step .icon {
        position: relative;
    }

        .step .icon .num {
            position: absolute;
            top: 0px;
            left: -38px;
            font-weight: 900;
            font-size: 2.5rem;
            color: #357ae8;
            width: 100%;
            text-align: center;
        }

@media (max-width: 768px) {

    .plans-header {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    body:not(.bg) .header-link {
        display: none
    }

    .steps {
        flex-direction: column;
    }

    .step h2 {
        font-size: 1rem;
    }

    .step {
        width: 100%;
        height: auto;
        flex: 0;
    }

        .step p {
            font-size: 0.8rem;
            font-weight: 500;
        }

    .form-options {
        display: block;
    }
}

@media (max-width: 480px) {
    .Aboutcontainer {
        display: block;
    }

        .Aboutcontainer .box {
            margin-right: 0px;
        }

            .Aboutcontainer .box:last-child {
                margin-top: 20px;
            }

        .aboutContainer p {
            max-width: 100%;
        }

    .listPayment {
        display: flex !important;
    }

    #guestForm .list-group.listDelivery {
        display: flex !important;
    }

    #guestForm .list-group.listPayment label {
        padding: 0 13px !important;
    }
}

/*End Shared Classes*/

@media (max-width: 767.98px) {
    .mobileFilters {
        display: inline-block;
        /*        visibility: visible;*/
    }
}

.desktopFilters {
    display: none;
}

@media (min-width: 992px) {
    .desktopFilters {
        display: block;
    }
}

.validation-error {
    border: 2px solid red !important;
    padding: 5px;
}

.div_btns {
    grid-template-columns: none !important;
}

/*.question.validation-error,
.condition_title.validation-error {
    color: red !important
}*/

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.remember-me {
    display: flex;
    color: #383838;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    margin-bottom: 14px;
}

.remember-me-input {
    margin-bottom: unset !important;
    /*transform: scale(1);*/
    transform-origin: center;
    width: unset !important
}

.promoCode-toggle {
    margin-top: 6px;
}

.promoCode-container {
    margin-bottom: 14px;
}

.promoCode-note {
    font-size: 13px;
    color: #888;
    margin: 4px 0 10px;
    line-height: 1.4;
}

.form-search .autocomplete-suggestions {
    max-width: none;
}

.grecaptcha-badge {
    bottom: 90px !important;
}

.signin.signinBtn {
    width: calc(100% - 15px) !important;
    height: 50px !important;
    border: none !important;
    padding-top: unset !important;
}

.contact-form .btn.btn-clear {
    background-color: #fff !important;
    border: 1px solid #707070 !important;
    border-radius: 4px;
}

.locationHeader {
    border-top: 2px solid #EEEEEE;
    font-size: 1.1rem;
    padding-top: 20px;
    margin-top: 20px;
    line-height: inherit;
    padding-bottom: unset !important;
}

.locationHeader {
    border-top: 2px solid #EEEEEE;
    font-size: 1.1rem;
    padding-top: 20px;
    margin-top: 20px;
    line-height: inherit;
    padding-bottom: unset !important;
}

.mapContainer {
    height: 240px
}

.seller-details {
    display: flex;
    justify-content: space-between;
}

.seller-container {
    padding-top: 15px;
    /*display: flex;*/
    justify-content: space-between;
    align-items: center;
}

.sellerDetailsHeader {
    font-size: 1.1rem;
    line-height: inherit;
}

.seller-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .seller-info .sellerImg {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #f0f0f0;
    }

.seller-text {
    gap: 4px;
    display: flex;
}

.seller-name {
    font-weight: 500;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.verified-user {
    font-size: 14px;
    color: #337AEF;
    display: flex;
    align-items: center;
    gap: 5px;
}

.reviews {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    background-color: #F7F7F7;
    border-radius: 6px;
    padding: 6px
}

    .reviews .star {
        color: #ffc107;
    }


.modalContainer {
    background-color: white
}

/* The additional-documents dialog reuses the branded #signin_poup card, whose
   "#signin_poup *" rule forces content-box. Force border-box back on its contents so the
   full-width dropzones/labels don't overflow the padded card. */
#ModalMissingDocs #signin_poup * {
    box-sizing: border-box;
}

/* The shared "#signin_poup" card fills the global 537px modal — too wide for a few doc
   slots. Cap it tighter on desktop; on phones the viewport still constrains it (max-width
   is a ceiling, so a narrow screen falls back to ~viewport width). */
#ModalMissingDocs .modal-dialog {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

#ModalMissingDocs #signin_poup {
    max-width: 100%;
}

#ModalMissingDocs #missingDocsContainer .dropzone,
#ModalMissingDocs #missingDocsContainer .DZdocumentIDTypeContainer {
    width: 100%;
    max-width: 100%;
    text-align: center;
}

/* .signin.signinBtn is width:calc(100% - 15px); center it so the 15px gap splits evenly. */
#ModalMissingDocs #submitMissingDocsBtn {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.optional {
    font-style: italic;
}

.disclaimerTxt {
    /*font-weight: 600;*/
    font-size: 13px;
    line-height: 16.93px;
    color: #707070
}

.btn-home-bs {
    white-space: nowrap;
}

/*begin otp*/
#ModalVerifyMobile input {
    width: calc(100% - 32px);
    height: 50px;
    padding: 12px 16px 12px 16px;
    border-radius: 6px;
    border: 1px solid #EEE;
    background-color: #F7F7F7;
    color: #000;
    margin-bottom: 25px;
    font-size: 0.938rem;
    outline: none;
}

#ModalVerifyMobile .signin {
    height: 39px;
    background-color: #4285f4;
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 30px;
    border-radius: 6px;
    padding-top: 12px;
    line-height: 29px;
    color: #fff;
}

#validationOtpForm.loading .signin, #confirmationOtpForm.loading .signin {
    opacity: 0.6;
    pointer-events: none;
}

#ModalVerifyMobile h5 {
    text-align: center;
    padding-bottom: 25px;
}

.confirmation-otp .msg {
    text-align: center;
    padding-bottom: 20px;
}

#kt_otp_send_mobile.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.digit-inputs {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .digit-inputs input[type="text"], .digit-inputs input[type="number"] {
        width: 51px;
        line-height: 51px;
        outline: none;
        height: 51px;
        text-align: center;
        border-radius: 12px;
        border: 1px solid #E3EBEF;
        margin-right: 5px;
    }

#validationOtpForm.loading input {
    pointer-events: none;
}


.phoneBatterySell input {
    width: 100%;
    padding: 12px 16px 12px 16px;
    border-radius: 6px;
    border: 1px solid #EEE;
    /*background-color: #F7F7F7;*/
    color: #000;
    margin-bottom: 14px;
    font-size: 0.938rem;
}

.choose_text_title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 10px
}

.ListingStatus {
    content: '';
    height: 10px;
    width: 10px;
    /*background-color: green;*/
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}


.no-data-message {
    width: 196.93px;
    height: 181px;
    margin: 0 auto;
    max-width: 100%;
}

    .no-data-message.purchases {
        background-image: url(../assets/imgs/MyPurchases.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    .no-data-message.listing {
        background-image: url(../assets/imgs/Listing.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

.infoText {
    text-align: center
}


.map {
    margin-bottom: 14px;
}
/*header icons if affect other divs same name check this*/
.forceRelativeSVG svg {
    position: relative !important;
    top: 0px !important;
    right: 0 !important;
}

.ColorMy191919 {
    color: #191919;
}

.NoDataDesc {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
}

.devicefooter a, .btnDeviceHeader {
    text-align: center;
    background-color: #357ae8;
    color: #FFF !important;
    border-radius: 6px;
    padding: 14px 24px;
    font-size: 18px;
    font-weight: 700;
    line-height: 23px
}

.section-box .list-9-col li {
    width: 14.2% !important;
}

@media (min-width: 1200px) {
    .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 100%;
    }
}

@media (min-width: 992px) {
    .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 100%;
    }
}

@media (min-width: 576px) {
    .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 100%;
    }
}

.signin.signinBtn.guest_mode {
    background-color: black !important
}


.paymentMethodContainer {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px !important;
}

.cardConainer {
    cursor: pointer;
}

    .cardConainer.disabled {
        cursor: unset;
        pointer-events: none;
        opacity: 0.5
    }

    .cardConainer .card {
        padding: 5px;
        border-radius: 10px !important;
    }

        .cardConainer .card .card-body {
            padding: 8px;
        }

            .cardConainer .card .card-body h6 {
                margin: unset;
            }

.filter-menu {
    padding: 10px 0px;
    margin: 0px 0 27px;
}

    .filter-menu .swiper-container {
        /*overflow-x: hidden !important;*/
    }

    .filter-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 10px;
    }

    .filter-menu .filter-item {
        cursor: pointer;
        padding: 0px 10px;
        border-radius: 5px;
        color: #191919;
        font-size: 0.8rem;
        height: 30px;
        line-height: 30px;
        border: 1px solid #707070;
        transition: background-color 0.3s ease;
        margin-right: 15px;
    }

    .filter-menu .swiper-slide {
        max-width: 130px;
        text-align: center;
    }

    .filter-menu .filter-item:hover, .filter-menu .filter-item.active {
        background-color: #357ae8;
        border-color: transparent;
        color: #fff;
    }

.header {
    z-index: 2
}

.modal-dialog-scrollable {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
}

.zoomContainer {
    z-index: unset !important;
}


.password-container {
    position: relative;
    /*display: flex;*/
    align-items: center;
}

    .password-container input {
        width: 100%;
        padding-right: 40px; /* Space for the icon */
    }

    /* Edge draws its own "reveal password" eye inside every password field. These
       fields carry their own toggle, so the browser's eye sat right beside ours
       (two eyes), and clicking it left our icon out of step with the field. */
    .password-container input::-ms-reveal {
        display: none;
    }

/* The popups style every input as `#signin_poup input` / `#signup_poup input`
   (common.css: 16px side padding, width calc(100% - 32px), content-box). The ID
   beats `.password-container input`, so its 40px icon space never applied and a
   long password ran under the eye. Re-apply it, and shrink the width by the same
   24px so the field keeps its outer size. RTL swaps the sides in custom-rtl.css. */
#signin_poup .password-container input,
#signup_poup .password-container input {
    width: calc(100% - 56px);
    padding-right: 40px;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 16px;
    cursor: pointer;
    user-select: none;
}

.passwordIcon {
    color: black
}

.toggle-password.contactForm {
    right: 40px;
}

.select2-results__option {
    padding: 10px !important;
    color: black
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #357ae8;
    color: #fff;
}


.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #357ae8;
    color: #fff;
}

span.select2-selection.select2-selection--single {
    height: 40px;
    border: 1px solid #EEE;
    border-radius: 6px;
    /*margin-bottom: 14px;*/
    background-color: #F7F7F7;
}

.MyProfile span.select2-selection.select2-selection--single {
    height: 48px !important;
    border: 1px solid #ccc;
    background-color: transparent !important;
    margin-bottom: 0px;
}

span.select2.select2-container.select2-container--default {
    width: 100% !important;
}

.MyProfile #profileForm span.select2.select2-container.select2-container--default {
    width: calc(100% - 38px) !important;
}

.error .select2-selection select2-selection--single {
    border-color: red !important;
}

.checkout.shop-template {
    font-family: 'DM Sans', sans-serif;
    color: #191919;
    width: 100%;
    padding: 0 18px;
}

    .checkout.shop-template .container {
        padding: 24px 0px 45px;
        max-width: 1280px;
        margin: 0 auto;
        width: 100%;
        min-height: calc(100vh - 75px);
        padding-bottom: 111px;
    }

.checkout .page-content img {
    width: 100%;
}

.checkout.shop-template .page_title {
    color: #707070;
    font-weight: 400;
    font-size: 0.875rem;
    margin-bottom: 20px;
}

.checkout.shop-template .mb_48 {
    font-weight: bold;
    font-size: 1.4rem;
    margin-bottom: 25px;
    margin-top: 8px;
}

.checkout.shop-template .page_title a, .shop-template .card a {
    color: #191919;
}


.checkout .item-wishlist .wishlist-price {
    width: 24%;
    text-align: right;
}

.checkout span.select2-selection.select2-selection--single {
    height: 33px;
    border: 1px solid #DDE4F0 !important;
    border-radius: .25rem;
    background-color: #fff;
}

.checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #a4b5c4;
    font-weight: 500;
}

form-control {
    background-color: #ffffff;
}


.product-wishlist .product-image {
    min-width: 115px;
    max-width: 115px;
}

@media (max-width: 449.98px) {
    .listCheckout .product-wishlist .product-image {
        min-width: 90px;
        max-width: 90px;
    }
}

.deviceAvailabilityContainer .listCheckout .item-wishlist .wishlist-product {
    width: 100%
}

.deviceAvailabilityContainer .color-brand-3 {
    color: black !important
}

.deviceAvailabilityContainer .response {
    display: flex;
    gap: 14px;
    justify-content: center;
}

    .deviceAvailabilityContainer .response .answer_opt {
        padding: 7px 24px;
        text-align: center;
        border-radius: 6px;
        display: inline-flex;
        cursor: pointer;
        font-size: 0.9rem;
        border: 1px solid #707070;
    }


        .deviceAvailabilityContainer .response .answer_opt.selected,
        .deviceAvailabilityContainer .response .answer_opt:hover {
            border: 1px solid #1f1f1f;
            color: #FFF;
            background-color: #1f1f1f;
        }

        .deviceAvailabilityContainer .response .answer_opt.disabled {
            cursor: unset;
            opacity: 0.5;
            pointer-events: none
        }


/*.input_form[data-select2-id] label.error {
    position: absolute;
    bottom: -9px;
}*/

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 46px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
}

/*.select2-selection.select2-selection--single {
    margin-bottom: 0px !important;
}*/

.btn.btn-verify {
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    color: #ffffff;
    border: 1px solid #e54255;
    width: auto;
    text-align: center;
    padding: 2px 15px;
    background-color: #e54255;
}

    .btn.btn-verify:hover {
        border: 1px solid #e54255;
        background-color: #ffffff;
        color: #e54255;
    }

.content_poup .select2Input label.error {
    position: absolute;
    bottom: 356px;
}

.select2Input {
    /*margin-bottom: 20px*/
}

#signUpForm .select2Input.error {
    margin-bottom: unset
}

#signUpForm .select2Input {
    margin-bottom: 20px
}

#signUpForm .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 41px !important;
}

#signUpForm .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 41px !important;
}

.guestContainer .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
}

.guestContainer .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
}

/*.guestContainer .select2Input label.error {
    position: absolute;
    bottom: 544px;
}*/

.btn.btn-buy {
    color: #ffffff;
    border: 1px solid #4285f4;
    background-color: #4285f4;
}

    .btn.btn-buy:hover {
        border: 1px solid #4285f4;
        background-color: #ffffff;
        color: #4285f4;
    }

.color-brand-3 {
    color: black !important;
}

.form-control:disabled, .form-control[readonly] {
    color: grey;
}

.preloader-dots {
    --uib-size: 60px !important;
    --uib-color: #1971e4 !important;
}

.preloader img {
    max-width: 60px !important;
}

.btn.loading {
    pointer-events: none;
}

    button.disabledBtn::after,
    .btn.disabledBtn::after,
    .btn.loading::after {
        content: "";
        background-image: url(../assets/imgs/loader.gif);
        position: absolute;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-color: #4285f4ad;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

.error span.select2-selection.select2-selection--single {
    border-color: red !important;
}


/* The popups style bare `input` (see common.css #signup_poup/#signin_poup input:
   height 23px + 12px padding, under box-sizing: content-box), which also lands on
   checkboxes. WebKit scales a native checkbox to fill that ~49px box, so iOS Safari
   draws it huge while Blink leaves the padding as dead space -- looks fine on
   desktop/Android, broken on iPhone. Reset the box back to intrinsic size.
   Not scoped to .remember-me on the signup side so any checkbox added to that
   form (e.g. #promoCodeChk) is covered. */
#signin_poup .remember-me input[type="checkbox"],
#signup_poup input[type="checkbox"] {
    width: unset !important;
    height: unset !important;
    padding: unset !important;
}

/* Modern scrollbar */
.swiper-container {
    scrollbar-width: thin;
    /*scrollbar-color: #888 transparent;*/
    scrollbar-color: #F1F1F4 transparent;
    padding-bottom: 10px;
}

    .swiper-container::-webkit-scrollbar {
        height: 6px;
    }

    .swiper-container::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 10px;
    }

        .swiper-container::-webkit-scrollbar-thumb:hover {
            background-color: #555;
        }

.swiper-wrapper {
    display: flex;
    gap: 10px; /* Adds spacing between items */
}

.swiper-slide {
    flex-shrink: 0;
    text-align: center;
    padding: 10px 20px;
    border-radius: 8px;
    background: #f8f9fa;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, background 0.3s ease;
    white-space: nowrap;
}

    .swiper-slide:hover {
        transform: scale(1.05);
        background: #ddd;
    }

    .swiper-slide.active {
        background: #007bff;
        color: white;
    }

.Shop .card-grid-style-3 .card-grid-inner .image-box .label.deviceStatus {
    background: #c90f0f !important;
}

    .Shop .card-grid-style-3 .card-grid-inner .image-box .label.deviceStatus.deviceStatusPosition {
        top: 35px;
        left: 6px;
    }

.dz-preview.dz-complete.dz-image-preview {
    text-align: center
}

.gbs .gb.error {
    border: 1.5px solid red !important;
}

.disabledSpan {
    pointer-events: none !important;
    opacity: 0.5 !important;
    cursor: not-allowed;
}

@media (max-width: 768px) {

    .wishlist-overview {
        width: 100% !important;
    }

    .item-wishlist .wishlist-status {
        width: 100% !important;
        direction: unset !important;
        text-align: center !important;
    }

        .item-wishlist .wishlist-status .status {
            display: block;
            margin-bottom: 10px;
            margin-right: unset !important;
            text-align: right !important;
        }

        .item-wishlist .wishlist-status .btn-cart {
            display: inline-block !important;
            margin-top: unset !important;
            margin-bottom: 5px !important;
        }
}


.rightModal.modal .modal-dialog {
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.rightModal.modal.drawer {
    display: flex !important;
    pointer-events: none;
}

    .rightModal.modal.drawer * {
        pointer-events: none;
    }

    .rightModal.modal.drawer .modal-dialog {
        margin: 0px;
        display: flex;
        flex: auto;
        transform: translate(25%, 0);
    }

        .rightModal.modal.drawer .modal-dialog .modal-content {
            border: none;
            border-radius: 0px;
        }

            .rightModal.modal.drawer .modal-dialog .modal-content .modal-body {
                overflow: auto;
            }

    /* When modal is shown */
    .rightModal.modal.drawer.show {
        pointer-events: auto;
    }

        .rightModal.modal.drawer.show * {
            pointer-events: auto;
        }

        .rightModal.modal.drawer.show .close_popup * {
            cursor: pointer;
        }

        .rightModal.modal.drawer.show .modal-dialog {
            transform: translate(0, 0);
        }

    /* Align modal from right */
    .rightModal.modal.drawer.right-align {
        flex-direction: row-reverse;
    }


.evalSummary .overall_condition {
    color: #191919;
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 8px;
}

.evalSummary ul {
    color: #707070;
    font-weight: 500;
    font-size: 0.875rem;
    margin-left: 22px;
    margin-bottom: 15px;
    list-style-type: disc;
}


.no-data-message {
    text-align: center
}
/* styles for phone input*/

.iti__flag {
    background-image: url('../assets/imgs/flags@2x.png') !important;
    /*background-size: cover !important;*/
}


.iti__flag {
    transform: scale(1.9);
    border-radius: 2px;
}

.iti__selected-country {
    margin: 0 45px 0 10px;
}

.iti__arrow {
    margin-left: 15px;
}

.iti__tel-input {
    padding-left: 105px !important;
    /* v29 fit: neutralize v29's min-width:100% (which overrode per-field widths and pushed
       the field past its container). Do NOT force width:100% here — let each page's own
       input-width rule apply so the phone field matches its sibling fields
       (e.g. MyProfile uses calc(100% - 38px)); signup sets its own width:100% below. */
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.iti__selected-dial-code {
    color: #191919;
    font-weight: 500;
    font-size: 15px;
    line-height: 22.5px;
}

.iti {
    width: 100% !important;
    display: block !important;
    max-width: 100% !important;
}
/* end styles for phone input*/


.langContainer select {
    padding: 5px;
    font-size: 0.8rem;
    border: none;
    background-color: transparent;
    outline: none;
    border-radius: 4px;
    color: #323335;
    padding-left: 0;
    font-weight: bold;
    cursor: pointer;
}


.iti__country-name {
    margin-left: 10px !important;
}

.phoneSignUp_Container {
    margin-bottom: 14px;
}

    .phoneSignUp_Container input {
        /* v29 fit: was calc(100% - 120px). separateDialCode + padding-left already reserves
           the dial-code space, so the shrink is obsolete and caused overflow with v29's min-width. */
        width: 100% !important;
        /* Match the 56px height of the other login/signup modal inputs (same value the
           addAccount/phoneVerif phone inputs use); v29 reset the height on the wrapped input. */
        height: 56px !important;
        box-sizing: border-box !important;
    }

.addPhoneContainer {
    margin-bottom: 0;
}

    .addPhoneContainer .iti {
        display: block;
        width: 100%;
    }

#signin_step3 input#phone_addAccount,
#phoneVerif_step1 input#phone_phoneVerif {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 56px !important;
}

#signin_step3 #submitAddPhoneBtn,
#phoneVerif_step1 #submitPhoneVerifBtn {
    margin-top: 28px;
    margin-bottom: 0;
}

.phone-input {
    margin-bottom: 10px
}


.see-more-btn {
    color: #357ae8;
}


.paymentMethodImg {
    height: 60px;
}


.totalPrice span {
    color: #E83C3C !important
}

#guestForm .list-group label[aria-disabled="true"] {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}


.product-wishlist .product-info {
    align-content: unset !important
}

#new_address_Modle {
    padding: unset !important;
    /*overflow-x: hidden;
    overflow-y: auto;*/
}

    #new_address_Modle #new_address_Modle_poup {
        border-radius: 20px;
        display: block;
        background-color: white;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 9999;
        font-family: 'DM Sans', sans-serif;
        max-width: 92vw;
        margin: 0px auto;
        position: relative;
        padding: 48px;
    }

    #new_address_Modle .modal-content .close_popup {
        position: absolute;
        top: 15px;
        right: 15px;
        cursor: pointer;
    }



span.select2.select2-container.select2-container--default.select2-container--disabled span.select2-selection.select2-selection--single {
    background-color: #e9ecef;
    opacity: 1;
}


.btn-placeOrder {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

#guestForm .list-group.listPayment label.error {
    border: 1px solid red;
}

.paymentMethodDisclaimerCheckbox {
    height: 13px !important;
}

.editIcon {
    padding-right: 10px !important;
    cursor: pointer
}

.deleteIcon {
    padding-right: 10px !important;
    cursor: pointer
}


#addresses_Modle .modal-dialog {
    max-width: 700px;
}

#new_address_Modle #signup_poup input, #signup_poup select {
    background-color: transparent !important;
}

#new_address_Modle #signup_poup {
    max-width: 700px;
    /*margin: 1.75rem auto;*/
}


#new_address_Modle span.select2-selection.select2-selection--single {
    background-color: transparent !important;
}

#new_address_Modle .modal-content,
#addresses_Modle .modal-content {
    color: black !important;
    border-radius: 20px
}

#new_address_Modle .modal-header {
    text-align: center !important;
    border-bottom: unset !important;
    padding-bottom: unset !important;
}

#new_address_Modle #new_address_Modle_poup {
    padding: 20px 48px 48px 48px;
}


.borderc {
    padding-bottom: 20px;
}

.color-brand-1 {
    color: #1971E4 !important;
}

.color-brand-grey {
    color: #707070 !important;
}


/*#loggedInUserForm input, #guestForm select {
    border-radius: 6px;
    height: 47px;
}
*/

#addresses_Modle #signin_poup * {
    box-sizing: border-box !important
}


#new_address_Modle .overlay.modal-dialog .overlay-layer.bg-light {
    background-color: #ffffff !important
}

#addresses_Modle .overlay .overlay-layer,
#new_address_Modle .overlay .overlay-layer {
    display: flex;
    position: absolute;
    z-index: 10000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: center;
    align-items: center;
    background-color: var(--bs-overlay-bg);
    transition: all .3s ease;
    border-radius: 20px;
    max-width: 700px;
}


#new_address_Modle .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px !important;
}

#new_address_Modle .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
}

#new_address_Modle .select2Input.error {
    margin-bottom: 5px !important;
}

#new_address_Modle span.select2-selection.select2-selection--single {
    height: 46px !important;
}

@media screen and (max-width: 600px) {
    #addresses_Modle .font-md-bold,
    #defalutShippingLocationContainer .font-md-bold {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /*  #addresses_Modle .editIcon,
    #addresses_Modle .deleteIcon {
        height: 45px;
    }*/
}

.paymentStatusBk {
    display: block;
    width: fit-content;
    height: 33px;
    border-radius: 21px;
    padding: 6px 15px;
    color: #FFFFFF
}

.item-wishlist .wishlist-status.paymentStatus {
    width: 15% !important;
    align-self: flex-start !important;
}

@media (max-width: 768px) {
    #addresses_Modle #signin_poup {
        padding-right: 20px;
        padding-left: 20px;
    }

    #new_address_Modle #new_address_Modle_poup {
        padding-right: 20px;
        padding-left: 20px;
    }

    .checkOut_imgIcons {
        display: inline-grid;
    }

    #new_address_Modle .rowSm {
        box-sizing: border-box;
        width: 100%;
    }
}

.checkOut_imgIcons {
    text-align: right;
    min-width: 40px;
}

.phone-color-box {
    box-shadow: inset 1px 3px rgb(18,18,18, .1);
    width: 13.17px;
    height: 13.17px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    border: 1px solid #00000014;
}

.bundle-Checkout {
    color: #E83C3C;
    font-size: 12px;
    font-weight: 700
}
.card-product-colors-details .phone-color-box {
    width: 30px;
    height: 30px;
}

.listCheckout .card-product-colors-details .phone-color-box {
    width: 20px;
    height: 20px;
}

.add_new_address_Btn {
    box-sizing: border-box !important;
}

.mob_nb {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 47px !important;
}

#relatedItemBundle {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

    #relatedItemBundle .choose_text_title {
        font-weight: bold;
        font-size: 16px;
    }

    #relatedItemBundle .choose_text_title-extraPrice {
        color: green;
        font-weight: bold;
        margin-left: 20px;
    }

#bundleGroupsRow {
    display: flex;
    align-items: center;
    gap: 20px;
}

    #bundleGroupsRow img {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        padding: 6px;
        border: 3px solid #F4F4F4;
        cursor: pointer;
        object-fit: contain;
        background-color: #fff;
    }

#bundlesRow {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
}

    #bundlesRow img {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        padding: 15px;
        border: 3px solid #F4F4F4;
        background-color: #fff;
        cursor: pointer;
        object-fit: contain;
    }
        
        #bundleGroupsRow img.active {
            border: 3px solid #4285f4;
            background-color: #e6f0ff;
        }
 
 
.bundle-wrapper {
    position: relative;
    display: inline-block;
}

.bundle-check {
    position: absolute;
    top: 5px;
    right: 5px;
    transform: scale(1.2);
    cursor: pointer;
    z-index: 2;
}

.bundle-item {
    width: 120px;  
    height: auto;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}

  

#buy_device .div_btns .btn {
    width: 100%
}

    #buy_device .div_btns .btn:hover {
        color: black;
        background: #CCCCCC;
        border: 1px solid #CCCCCC !important;
    }


/*
@media (max-width: 768px) {
    .slick-dots {
        left: 50% !important;
        transform: translateX(-50%);
        bottom: 150px !important;
    }
}

.slick-dots {
    display: flex;
    position: absolute;
    bottom: 26px;
    left: 255px;
    align-items: center;
    background-color: #F4F4F4;
    border-radius: 32px;
}

    .slick-dots li {
        list-style: none;
    }

        .slick-dots li button {
            font-size: 0;
            width: 10px;
            height: 12px;
            background-color: #8f8f8f;
            border-radius: 50%;
            border: none;
            margin: 5px;
            cursor: pointer;
        }

        .slick-dots li.slick-active button {
            background-color: #4285f4;
        }*/


.whatsapp-icon {
    position: fixed;
    bottom: 60px;
    right: 20px;
    z-index: 999;
}

.btn-payInstallment {
    font-size: 14px !important;
    background-color: #4285F4 !important;
    color: #FFF !important;
    border-radius: 4px !important;
    padding: 5px !important
}

.signin.signinBtn.verifyDocs_next {
    background-color: #4285F4 !important;
    color: #FFF !important;
    border-radius: 4px !important;
    width: calc(100% - 55px) !important;
}


.installmentItem {
    width: 33.33%
}

.documentTypeContainer {
    display: flex;
    justify-content: space-evenly
}

#ModalVerifyDocs .modal-header {
    border-bottom: unset !important
}

#ModalVerifyDocs .modal-content {
    border-radius: 8px;
}

#ModalVerifyDocs .modal-body {
    border-radius: 8px;
}

#ModalVerifyDocs .modal-body {
    padding: 0 1rem 1rem;
}

.imgPosition {
    text-align: left
}

.dropzone-error {
    border: 1px solid red !important;
}


.modal-title {
    color: black
}

#installmentsDataContainer .item-wishlist {
    cursor: auto !important;
}

#ModalVerifyDocsAgreementContainer p {
    color: black
}

/* --- Agreement PDF viewer states --- */
/* The three panes (loading / error / iframe) share this box so swapping between
   them never changes the modal height and makes the dialog jump. */
.agrPdf-wrapper {
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

.agrPdf-frame {
    flex: 1;
    border: 1px solid #e8edf2;
    border-radius: 8px;
}

.agrPdf-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 20px;
}

.agrPdf-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e8edf2;
    border-top-color: #4285F4;
    border-radius: 50%;
    animation: agrPdfSpin 0.8s linear infinite;
}

@keyframes agrPdfSpin {
    to { transform: rotate(360deg); }
}

.agrPdf-error-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fef3c7;
    color: #d97706;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

#ModalVerifyDocsAgreementContainer .agrPdf-state-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

#ModalVerifyDocsAgreementContainer .agrPdf-state-text {
    color: #6b7280;
    font-size: 14px;
    margin: 16px 0 0;
}

#ModalVerifyDocsAgreementContainer #agreementPdf_errorText {
    margin: 0 0 16px;
}

.agrPdf-retry-btn {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.agrPdf-retry-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

#ModalVerifyDocsAgreementContainer .agrPdf-blocked-notice {
    color: #6b7280 !important;
    font-size: 13px;
    text-align: center;
    margin: 0 0 12px;
}

/* --- Documents Upload Modal --- */
.docUpload-modal {
    border-radius: 16px !important;
    overflow: hidden;
    border: none !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

.docUpload-header {
    background: linear-gradient(135deg, #4285F4 0%, #1a5cc8 100%);
    border-bottom: none !important;
    padding: 24px 28px !important;
    align-items: flex-start !important;
}

.docUpload-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

.docUpload-header .btn-close:hover {
    opacity: 1;
}

.docUpload-header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
}

.docUpload-icon-circle {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.docUpload-title {
    color: #fff !important;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.docUpload-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 13px;
    margin: 0;
}

.docUpload-body {
    padding: 28px !important;
    max-height: 60vh;
    overflow-y: auto;
    background: #fafbfc;
}

/* States */
.docUpload-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
}

.docUpload-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e8edf2;
    border-top-color: #4285F4;
    border-radius: 50%;
    animation: docUploadSpin 0.8s linear infinite;
}

@keyframes docUploadSpin {
    to { transform: rotate(360deg); }
}

.docUpload-state-text {
    color: #6b7280;
    margin-top: 16px;
    font-size: 14px;
}

.docUpload-error-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fef2f2;
    color: #ef4444;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.docUpload-error-text {
    color: #ef4444;
    font-size: 14px;
    margin-bottom: 16px;
}

.docUpload-retry-btn {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.docUpload-retry-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.docUpload-success-title {
    color: #166534 !important;
    font-size: 18px;
    font-weight: 600;
    margin: 16px 0 6px;
}

.docUpload-success-sub {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}

/* Document list */
.docUpload-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.docUpload-list .DZdocumentIDTypeContainer {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 0 !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.docUpload-list .DZdocumentIDTypeContainer:hover {
    border-color: #4285F4;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.08);
}

.docUpload-list h6 {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px !important;
}

.docUpload-list .text-muted {
    font-size: 13px;
    color: #9ca3af !important;
}

.docUpload-list .dropzone {
    min-height: 120px !important;
    border: 2px dashed #d1d5db !important;
    border-radius: 10px !important;
    background: #f9fafb !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-bottom: 0 !important;
}

.docUpload-list .dropzone:hover {
    border-color: #4285F4 !important;
    background: #eff6ff !important;
}

.docUpload-list .dropzone .dz-message h3 {
    font-size: 14px !important;
    font-weight: 500;
    color: #6b7280;
}

.docUpload-list .dropzone.dz-drag-hover {
    border-color: #4285F4 !important;
    background: #eff6ff !important;
}

.docUpload-list .dropzone.dropzone-error {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
}

/* Footer */
.docUpload-footer {
    background: #fff;
    border-top: 1px solid #e5e7eb !important;
    padding: 16px 28px !important;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.docUpload-cancel-btn {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.docUpload-cancel-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.docUpload-submit-btn {
    background: linear-gradient(135deg, #4285F4 0%, #1a5cc8 100%);
    border: none;
    border-radius: 8px;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3);
}

.docUpload-submit-btn:hover {
    box-shadow: 0 4px 16px rgba(66, 133, 244, 0.4);
    transform: translateY(-1px);
}

.docUpload-submit-btn:disabled,
.docUpload-submit-btn.disabledBtn {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 768px) {
    .docUpload-header {
        padding: 18px 20px !important;
    }
    .docUpload-body {
        padding: 20px !important;
    }
    .docUpload-footer {
        padding: 14px 20px !important;
    }
    .docUpload-list .DZdocumentIDTypeContainer {
        padding: 16px;
    }
    .docUpload-list .dropzone {
        min-height: 100px !important;
    }
}
.docUpload-list .dz-progress {
    display: none !important;
}
/* --- End Documents Upload Modal --- */

.aboutContainer {
    color: black
}


.plan-button.plan-buttonWithIcon span {
    /*padding: 0 5px 0 19px;*/
}

.plan-button.plan-buttonWithIcon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    /*padding: 0px !important*/
}

    .plan-button.plan-buttonWithIcon.active svg {
        color: #1971E4;
    }

    .plan-button.plan-buttonWithIcon svg {
        width: 30px;
        height: 30px;
        margin-right: 5px;
        color: #707070;
    }

#customInstallment_modal {
    color: #383838;
}

.asterisk-required {
    color: red;
    font-weight: bold;
    margin-left: 4px; /* Adds spacing between text and asterisk */
}

#customInstallment_modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px !important;
}

#customInstallment_modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
}

#customInstallment_modal span.select2-selection.select2-selection--single {
    background-color: #f7f7f700 !important;
    height: 47px;
}

.selectedInstallmentDetails {
    background-color: #F7F7F7
}

.vertical-line {
    width: 1px;
    background-color: #CCCCCC;
    margin: 0 20px 0 20px;
}


#customInstallment_modal .modal-dialog {
    max-width: 660px;
}

#customInstallment_modal input {
    background-color: #f7f7f700 !important;
}

#customInstallment_modal .select2Input.form-group.error {
    margin-bottom: 5px !important;
}

.btn-buyDeviceWithInstallment {
    min-width: 720px !important;
}

    .btn-buyDeviceWithInstallment .btn-home-bs {
        text-transform: none !important
    }

.withEasyInstallmets {
    line-height: 30px;
}

    .withEasyInstallmets .withEasyInstallmets-btn {
        text-transform: none !important;
        font-size: 21px;
    }

@media (max-width: 991.98px) {
    .mobileFilters {
        display: inline-block;
        /*        visibility: visible;*/
    }
}

.box-header-mobile-search {
    width: 340px;
    height: 42px;
    border-radius: 10px !important;
    border: 1px solid #EEEEEE !important;
    background-color: #F7F7F7;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    padding: 4px 15px !important;
    /*margin: 0 auto 10px auto;*/
}

.btn-mobile-search {
    height: fit-content;
    padding: 8px 9px;
    border: none;
    border-radius: 4px;
    margin-left: 5px
}

.mobile-search-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px
}


.customizeReset {
    text-decoration: underline;
    color: #4285f4
}

.deliveryMethodsContainer .listDelivery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

    .deliveryMethodsContainer .listDelivery label {
        padding: 21px 16px !important;
        /*margin-right: 10px;*/
    }

    .deliveryMethodsContainer .listDelivery span {
        font-weight: bold;
        color: black
    }

.listPayment span {
    font-weight: bold;
    color: black
}

.listPayment label:has(input:checked) {
    background-color: #1971E414;
}

.listDelivery label:has(input:checked) {
    background-color: #1971E414;
}


.listPayment {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.homeAlert {
    text-align: left !important
}

body.modal-open:has(#signup_modal.show) {
    overflow: auto !important;
}

.deviceRelatedItemsContainer .gbs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}


    .deviceRelatedItemsContainer .gbs .gb {
        height: 38px;
        text-align: center;
        border: 1px solid #70707052;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 0.75rem;
        border-radius: 6px;
        padding: 0 15px;
        color: #707070;
        line-height: 38px;
    }

        .deviceRelatedItemsContainer .gbs .gb:hover, .deviceRelatedItemsContainer .gbs .gb.selected {
            background-color: #4285f4;
            color: #FFF;
        }


@media (max-width: 768px) {

    .deviceRelatedItemsContainer .gbs {
        justify-content: space-between;
    }

        .deviceRelatedItemsContainer .gbs .gb {
            flex: 1;
        }

        .deviceRelatedItemsContainer .gbs .gb {
            font-size: 0.7rem;
            padding: 0 2px;
        }
}


.phone-color-box.selected {
    box-shadow: 0 0 15px #4285f4;
}

/* REMOVED: `.deviceRelatedItemsContainer .choose_text_title { font-weight: unset !important; }`
   It existed to cancel the bold that .choose_text_title (line ~695 of this file) sets globally.
   The capacity and colour headings are now deliberately bold - "Color - Space Black" is meant to
   read as one bold line, label and value at the same weight - so this override was fighting the
   design, and being !important it won against every attempt to set the weight in
   detail-configurator.css.
   The weight for these two headings is owned by
   `#buy_device .deviceRelatedItemsContainer .choose_text_title` in assets/css/detail-configurator.css.
   This selector matches nothing outside the product details page, so nothing else is affected. */

/*#buy_device .plans-header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);*/
/*gap: 10px;*/
/*border-radius: 16px !important;
}*/

.card-product-storage li {
    margin-right: 5px;
}

.Shop .card-grid-style-3 {
    border-radius: 10px !important;
}

    .Shop .card-grid-style-3 .card-grid-inner {
        border-radius: 10px !important;
        padding: 15px !important;
        text-align: center !important;
    }

        .Shop .card-grid-style-3 .card-grid-inner .card-product-colors,
        .Shop .card-grid-style-3 .card-grid-inner .card-product-storage {
            display: flex;
            justify-content: center;
            align-content: center;
        }

            .Shop .card-grid-style-3 .card-grid-inner .card-product-storage .mainStorage {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 73px !important;
                height: 30px !important;
                border-radius: 5px !important;
                background-color: #D8E8FF !important;
                font-size: 13px !important;
                font-weight: 500;
                color: #1971E4 !important;
            }

.card-grid-inner .btn.btn-wishlist,
.card-grid-inner {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}


.verifiedUser,
.nameDataContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.itemName {
    color: #191919;
    margin-top: 10px !important;
    height: 26px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    align-items: center;
    justify-content: center;
    display: flex;
}

    .itemName p {
        line-height: 1.3
    }

.card-grid-style-3 .card-grid-inner .price-info {
    color: #1971E4 !important;
    width: auto;
    height: 24px !important;
}

/*.card-grid {
    width: 393px;
    height: 485px;
    border-radius: 21.96px;*/
/*gap: 10px;*/
/*padding: 15px;
}*/

.dropdownFilterBtn {
    color: #383838 !important;
    width: 148px;
    height: 45px;
    border-radius: 10px;
    border-width: 1px;
    padding-top: 8px;
    padding-right: 12px;
    padding-bottom: 8px;
    padding-left: 12px;
    border-color: #E6E6E6 !important;
}

.scrollable-dropdown {
    max-height: 250px;
    overflow-y: auto;
}

#idBrand.dropdownFilterBtn {
    width: 160px !important;
}

#dropdownSort.dropdownFilterBtn {
    width: 200px !important;
}

.priceInput-dd {
    width: 94px;
    height: 45px;
    border: 1px solid #E6E6E6;
    border-radius: 10px;
    margin-left: 2px;
    margin-right: 2px;
    /*padding: 0 20px;*/
    padding: 8px 15px;
}

.sorting-container {
    vertical-align: top;
}

.sorting-text {
    vertical-align: -webkit-baseline-middle;
}

.line-height {
    line-height: normal;
}

.storage-container {
    place-content: center;
}

.pagination-info {
    white-space: nowrap;
}

.pagination-container {
    align-content: center;
}

.price-header {
    color: #383838;
    font-weight: 500;
    font-size: 14px;
    margin: 10px 10px 10px 0 !important;
}

.Shop .usability {
    margin-left: 10px;
    margin-right: 10px;
    width: 73px !important;
    height: 30px !important;
    border-radius: 5px !important;
    font-size: 13px !important;
    font-weight: 500;
    padding-top: 5.2px;
    padding-right: 12.13px;
    padding-bottom: 5.2px;
    padding-left: 12.13px;
    background-color: #53C572;
    color: #fff;
}

.card-product-storage-seller {
    justify-content: space-between !important;
}

.seller-name {
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    color: #191919;
    margin-left: 10px;
    margin-right: 10px;
}

#devlike h5{position:relative;}

.vall {
    position: relative;
    font-size: 15px;
    float: right;
    color: #6c757d!important;
}



.Shop .shopmain .card-grid-style-3 .card-grid-inner .card-product-storage .mainStorage {
    font-size: 12px !important;
}


.category-carousel {
    margin: 0;
    padding: 0;
}


.carousel-slide {
    min-height: 450px;
    display: flex;
    margin:0 22px 0 0;
    margin-bottom: 30px;
}

    /* 3. Ensure the inner card takes full width of the slide */
    .carousel-slide .card-grid-style-3 {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column; /* Stack children vertically */
        height: 100%;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    }




.carousel-header-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #D5DFE4;
    padding-bottom: 16px;
    color: #000;
    position: relative;
}

    .carousel-header-controls h5 {
        display: flex;
        align-items: center;
        margin: 0;
    }


        .carousel-header-controls .slick-prev:hover,
        .carousel-header-controls .slick-next:hover {
            background: #000000;
        }

        .carousel-header-controls .slick-prev:before,
        .carousel-header-controls .slick-next:before {
            color: #ffffff;
            font-size: 14px;
            line-height: 28px;
            opacity: 1;
        }

    .carousel-header-controls .slick-prev {
        margin-right: 5px;
    }



.card-grid-style-3 .info-right {
    display: flex;
    flex-direction: column; /* Arrange content inside vertically */
    flex-grow: 1; /* CRITICAL: This makes the info-right section expand and fill all available vertical space */
    justify-content: flex-end; /* Push the final content block (price) to the bottom */
    padding-top: 10px; /* Add some space between the image box and text */
}

    /* 4. Ensure the Price is always at the bottom edge */
    .card-grid-style-3 .info-right a.price-info {
        /* This ensures the price-info element is what aligns itself to the end of the flex container (info-right) */
        margin-top: auto;
        padding-top: 5px;
    }

.shopmain  .carousel-slide .card-grid-style-3:hover {
    transform: translateY(0px);
}
.shopmain .category-carousel .slick-slide {
    justify-content: flex-start !important;
    left: 0 !important;
    transform: translate3d(0, 0, 0) !important;
}


.slick-track {
    margin-left: 0; 
    margin-right: 0;
}

.slick-arrow {
    position: absolute;
    top: -3px;
    right: 0;
    width: 33px !important;
    height: 33px !important;
    background: #6c757d36 !important;
    cursor: pointer;
    border-radius: 24px;
    color: #666666d4;
    text-align: center;
    line-height: 34px;
    z-index: 2;
}

    .slick-arrow:after {
        content: "";
    }



.slick-prev {
    right: 74px;
    display:none;
    
}


.Shop .shopmain .last .card-grid-style-3 .card-grid-inner {
    display: flex;
    align-items: center;
}
.slick-disabled{
    opacity:0.5!important;
}

.Shop .shopmain  .category-carousel .slick-slide.last {
    width: 180px !important;
}
.Shop .shopmain .card-grid-style-3 .card-grid-inner {
    min-height: 500px;
}
.Shop .shopmain .last .card-grid-style-3 .card-grid-inner {
    border:0!important;
}
.Shop .shopmain .last .card-grid-style-3 {
    box-shadow: none !important;
}
.last .slick-arrow {
    position: relative;
    top: auto !important;
    right: auto !important;
    margin-right: 6px;
    display:block!important;
}

@media (max-width:767px) {
    .Shop .shopmain .usability {
        margin: 8px auto !important;
        display:block;
    }
     

    .shopmain .gotToDetails {
        display: block;
        width: 100%;
    }
    .shopmain .card-grid-style-3 .card-grid-inner .price-info {
        min-height: 24px;
        height: auto !important;
    }

    .Shop .shopmain .card-grid-style-3 .card-grid-inner {
        min-height: 583px;
    }
    .shopmain .card-product-storage {
        margin-top: 0px !important;
    }
}

/* ============================================================
   Home page (MainPageV2): subtle image zoom on hover.
   Kept in this static, site-wide stylesheet (scoped to .mainpage-v2 so it only
   affects the home page) instead of the components' inline <style>, so it loads on
   a plain refresh — the inline <style> in a .cshtml needs a rebuild+restart, which
   is why the earlier hover rule appeared not to work.
   ============================================================ */
/* NOTE: MainPageV2.cshtml has a blanket `.mainpage-v2 img:hover { transform: none !important }`
   (added to kill a legacy swiper-slide/image hover scale). These rules need `!important`
   + higher specificity to beat it, otherwise the hover zoom is silently cancelled. */

/* Category thumbnails */
.mainpage-v2 .nm-cat-thumb { overflow: hidden; }
.mainpage-v2 .nm-cat-thumb img { transition: transform .3s ease; }
.mainpage-v2 .group:hover .nm-cat-thumb img,
.mainpage-v2 .nm-cat-thumb:hover img { transform: scale(1.08) !important; }

/* Showcase product cards (featured AND product showcase — both use _ShowcaseCard,
   so NOT scoped to .nm-featured-section). Direct media:hover added as a fallback
   trigger in case the card-level :hover is intercepted. */
.mainpage-v2 .showcase-card__media img { transition: transform .3s ease; }
.mainpage-v2 .showcase-card:hover .showcase-card__media img,
.mainpage-v2 .showcase-card__media:hover img { transform: scale(1.05) !important; }

/* Hero side-banner image. Also targeted via the banner that contains the overlay link
   (`:has(> .nm-banner-overlay)`) so it works on a plain refresh WITHOUT the markup
   rebuild; the `.nm-side-banner` class (added in _HeroSection.cshtml) matches too once
   rebuilt. overflow:hidden keeps the zoom inside the rounded banner. */
.mainpage-v2 .nm-side-banner,
.mainpage-v2 .nm-hero-section div:has(> .nm-banner-overlay) { overflow: hidden; }
.mainpage-v2 .nm-side-banner img,
.mainpage-v2 .nm-hero-section div:has(> .nm-banner-overlay) img { transition: transform .3s ease; }
.mainpage-v2 .nm-side-banner:hover img,
.mainpage-v2 .nm-hero-section div:has(> .nm-banner-overlay):hover img { transform: scale(1.06) !important; }

/* Promo banner images — large feature banner + the two promo cards (both containers
   already have overflow:hidden). */
.mainpage-v2 .promo-main__img,
.mainpage-v2 .promo-card__img { transition: transform .3s ease; }
.mainpage-v2 .promo-card:hover .promo-card__img { transform: scale(1.06) !important; }
/* The large banner's image is only inset from the banner edges from 1024px up (below that
   it is deliberately full-bleed), so its zoom is limited to that range — and kept at 1.04
   so it stays within the clearance reserved in _PromoBanner.cshtml and never overflows
   the banner's rounded border. */
@media (min-width: 1024px) {
    .mainpage-v2 .promo-main:hover .promo-main__img { transform: scale(1.04) !important; }
}

/* Showcase cards: hide the "Add to favorite" tooltip label below desktop (mobile /
   tablet / fold) — only the icon shows. Desktop (>=1280) keeps the hover label. */
@media (max-width: 1279.98px) {
    .mainpage-v2 .showcase-tooltip { display: none !important; }
}

/* ============================================================
   Force LIGHT mode regardless of OS / browser theme.
   Loaded by both _Layout and _Layout-old, so it applies on every page (and on a plain
   refresh). `only light` opts the page out of Chrome's auto-dark and keeps UA controls
   (inputs, selects, scrollbars, pickers) rendered light.
   ============================================================ */
:root,
html,
:root, html, body {
    color-scheme: only light !important;
}

/* ============================================================
   Reserve the vertical-scrollbar gutter so the page's content width is CONSTANT whether or
   not the scrollbar is present. Without this, the first paint (preloader up / images not yet
   loaded → page short → no scrollbar → full viewport width) lays the centered header + content
   out wide/left, then re-centers with a visible shift once the page grows tall enough for the
   scrollbar to appear (around when images finish / you scroll). Stable gutter = no reflow.
   `overflow-y: scroll` is the universal fallback for browsers without scrollbar-gutter.
   ============================================================ */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}
/* ===========================================================================
   NO LATCHED HOVER ON TOUCH (owner, 2026-09-18:
   "in all pages mobile size when i add / remove to favorite the card is kept
   focused")
   ---------------------------------------------------------------------------
   A touch screen has no pointer that can leave an element, so :hover sticks
   after a tap and stays until something else is tapped. Three things then latch
   on a product card and together read as "the card is stuck focused":

     1. .card-grid-style-3:hover lifts the card (translateY(-2px)) and changes
        its border colour,
     2. .Shop .card-grid-style-3:hover .image-box .shopImg scales the image 1.05,
     3. and worst of all, .btn-wishlist.btn-wishlist-red:hover swaps the icon to
        the OUTLINE wishlist.svg - so the heart the visitor just tapped shows the
        UN-favourited picture. Not merely stuck: wrong.

   All of it is pointer affordance. Under (hover: none) there is no pointer, so
   none of it should apply. Desktop is untouched: the query simply does not match
   a device with a real hover pointer.

   The focus half is handled in JS (site.js blurs the heart on click, and
   myfavorite.js does the same for its own remove button), because a tap also
   leaves the element focused and CSS cannot distinguish that from keyboard focus
   in older engines.
   =========================================================================== */
@media (hover: none) {
    /* 1 + 2: the card stops reacting to a tap it cannot un-hover. */
    .card-grid-style-3:hover { transform: none !important; }
    .card-grid-style-3:hover .card-grid-inner { border-color: inherit !important; }
    .Shop .card-grid-style-3:hover .image-box .shopImg { transform: none !important; }
    .showcase-card:hover { transform: none !important; }

    /* 3: the heart keeps showing the state it is actually in, tapped or not.
       Both directions matter - a red heart must stay red, and a grey one must
       stay grey until the script actually changes its class. */
    .tools .btn-wishlist.btn-wishlist-red:hover,
    .tools .btn-wishlist.btn-wishlist-red:focus,
    .tools .btn-wishlist.btn-wishlist-red:active,
    .btn.btn-wishlist.btn-wishlist-red:hover,
    .btn.btn-wishlist.btn-wishlist-red:focus,
    .btn.btn-wishlist.btn-wishlist-red:active {
        background: #ffffff url('../assets/imgs/template/icons/wishlist-hover.svg') no-repeat center !important;
    }
    .tools .btn-wishlist.btn-wishlist-grey:hover,
    .tools .btn-wishlist.btn-wishlist-grey:focus,
    .tools .btn-wishlist.btn-wishlist-grey:active,
    .btn.btn-wishlist.btn-wishlist-grey:hover,
    .btn.btn-wishlist.btn-wishlist-grey:focus,
    .btn.btn-wishlist.btn-wishlist-grey:active {
        background: #ffffff url('../assets/imgs/template/icons/wishlist.svg') no-repeat center !important;
    }

    /* No lingering ring or tap highlight on any heart. */
    .btn-wishlist { -webkit-tap-highlight-color: transparent; }
    .btn-wishlist:focus { outline: none !important; }
}

/* Keyboard users keep a visible ring everywhere - :focus-visible never matches a
   pointer tap, so this does not bring the stuck highlight back. */
.btn-wishlist:focus-visible {
    outline: 2px solid #4285f4 !important;
    outline-offset: 2px;
}

/* ===========================================================================
   THE HEART ON TOUCH: VISIBLE, AND BIG ENOUGH TO HIT (owner, 2026-09-18)
   ---------------------------------------------------------------------------
   style.css gives .btn.btn-wishlist `opacity: 0` and `translateX(10px)`, and only
   `.card-grid-inner:hover .btn.btn-wishlist` brings it back. site.css then forces
   `opacity: unset !important` for .btn-wishlist-red, so a card that is ALREADY a
   favourite shows its heart while one that is not stays invisible until hover.

   On a touch screen there is no hover, so on a phone the un-favourited heart never
   appears at all - you cannot add a favourite from the shop or home grid. The
   favourites page looked "inconsistent" for the same reason from the other side:
   every heart there is red, so every heart there was visible, while the same heart
   elsewhere was not.

   Under (hover: none) the reveal-on-hover idea simply does not work, so the heart
   is always shown, and sized for a thumb rather than a mouse: 38px with a 20px
   icon is close to the 44px guidance without looking oversized on a small card.
   Desktop keeps the reveal-on-hover behaviour exactly as it was.
   =========================================================================== */
@media (hover: none) {
    .card-grid-inner .btn.btn-wishlist,
    .tools .btn.btn-wishlist,
    .showcase-action-btn {
        opacity: 1 !important;
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }

    .card-grid-style-3 .card-grid-inner .tools { width: auto; }

    .tools .btn.btn-wishlist,
    .card-grid-inner .btn.btn-wishlist {
        height: 38px !important;
        width: 38px !important;
        background-size: 20px 20px !important;
    }
}

/* The showcase favourite widget on a touch screen (owner, 2026-09-18).
   .showcase-action-btn:hover fills the button red and inverts the icon, and
   .showcase-action-row:hover reveals the tooltip. Both latch after a tap on a
   touch screen, so the button stays filled and the tooltip stays open until
   something else is tapped. Under (hover: none) neither should react at all -
   and the button is sized for a thumb, matching the .btn-wishlist bump above. */
@media (hover: none) {
    .showcase-action-btn:hover,
    .showcase-action-btn:focus,
    .showcase-action-btn:active { background: transparent !important; }

    .showcase-action-btn.btn-wishlist-red:hover,
    .showcase-action-btn.btn-wishlist-red:focus,
    .showcase-action-btn.btn-wishlist-red:active {
        background: transparent !important;
        color: #E83C3C !important;
        border-color: #F3C0C0 !important;
    }

    /* A tooltip that needs hover cannot be shown or dismissed by touch. */
    .showcase-action-row:hover .showcase-tooltip { opacity: 0 !important; }

    .showcase-action-btn {
        width: 38px !important;
        height: 38px !important;
        -webkit-tap-highlight-color: transparent;
    }
    .showcase-action-btn svg { width: 20px !important; height: 20px !important; }
    .showcase-action-btn:focus { outline: none !important; }
}
.showcase-action-btn:focus-visible {
    outline: 2px solid #4285f4 !important;
    outline-offset: 2px;
}

/* ===========================================================================
   FAVOURITE WIDGET ON A PHONE-SIZED SCREEN - HOME AND SHOP
   (owner, 2026-09-18: "make the button a little bigger for mobile screen only"
    and "stop focusing the widget whenever i press it on phone")
   ---------------------------------------------------------------------------
   The blocks above are gated on @media (hover: none), which is the CORRECT test
   for "this device cannot hover" - but it does not match a resized desktop
   window or Chrome's device toolbar, which keep reporting hover:hover. So the
   same fixes are repeated here keyed on WIDTH, which is what the owner actually
   asked for ("mobile screen only") and also makes the behaviour visible while
   testing on a laptop.

   Width is the right test for the SIZE anyway: a 38px target is about the thumb,
   and a narrow viewport is where thumbs are.

   Both hearts are covered because home and shop use different ones:
     home (MainPageV2 -> _ShowcaseCard) : <button class="showcase-action-btn">, inline SVG
     shop (shop.js)                     : <a class="btn btn-wishlist">, background-image
   =========================================================================== */
@media (max-width: 767.98px) {

    /* Shop's heart is sized in Views/Shop/Index.cshtml's own <style> block, which is
       inline in the page and therefore loads after every stylesheet - a size set here
       could never win, and two sources for one number is how it drifted in the first
       place. Sizing for the shop heart stays there; only the anti-latch rules below,
       which that block does not set, live here. */


    .showcase-action-btn {
        width: 38px !important;
        height: 38px !important;
        aspect-ratio: 1 / 1;
        border-radius: 50% !important;
        box-sizing: border-box;
        flex: 0 0 auto;
    }
    .showcase-action-btn svg { width: 20px !important; height: 20px !important; }

    /* ---- nothing latches after a tap ----
       A press leaves :hover and :focus applied with no pointer to move away, so
       the widget keeps the pressed look until something else is tapped. The
       icon/fill must show the state the item is actually IN, not the state of
       having been touched. */
    .showcase-action-btn:hover,
    .showcase-action-btn:focus,
    .showcase-action-btn:active {
        background: #fff !important;
        color: var(--color-dark, #191919) !important;
        border-color: var(--color-gray-2, #e5e7eb) !important;
    }
    .showcase-action-btn.btn-wishlist-red:hover,
    .showcase-action-btn.btn-wishlist-red:focus,
    .showcase-action-btn.btn-wishlist-red:active {
        background: #fff !important;
        color: #E83C3C !important;
        border-color: #F3C0C0 !important;
    }

    /* The .btn-wishlist heart swaps its background image on hover, which would
       show the OPPOSITE state after a tap - a red heart turning into the outline
       one. Pin each state to its own icon. */
    .tools .btn-wishlist.btn-wishlist-red:hover,
    .tools .btn-wishlist.btn-wishlist-red:focus,
    .tools .btn-wishlist.btn-wishlist-red:active,
    .btn.btn-wishlist.btn-wishlist-red:hover,
    .btn.btn-wishlist.btn-wishlist-red:focus,
    .btn.btn-wishlist.btn-wishlist-red:active {
        background: #ffffff url('../assets/imgs/template/icons/wishlist-hover.svg') no-repeat center !important;
    }
    .tools .btn-wishlist.btn-wishlist-grey:hover,
    .tools .btn-wishlist.btn-wishlist-grey:focus,
    .tools .btn-wishlist.btn-wishlist-grey:active,
    .btn.btn-wishlist.btn-wishlist-grey:hover,
    .btn.btn-wishlist.btn-wishlist-grey:focus,
    .btn.btn-wishlist.btn-wishlist-grey:active {
        background: #ffffff url('../assets/imgs/template/icons/wishlist.svg') no-repeat center !important;
    }

    /* A hover tooltip can be neither opened nor dismissed by touch. */
    .showcase-action-row:hover .showcase-tooltip { opacity: 0 !important; }

    /* No ring, no grey tap flash, on either heart. */
    .showcase-action-btn:focus,
    .btn.btn-wishlist:focus { outline: none !important; box-shadow: none !important; }
    .showcase-action-btn,
    .btn.btn-wishlist { -webkit-tap-highlight-color: transparent; }

    /* And the card itself stops reacting to a tap it cannot un-hover. */
    .card-grid-style-3:hover { transform: none !important; }
    .Shop .card-grid-style-3:hover .image-box .shopImg { transform: none !important; }
    .showcase-card:hover,
    .group:hover .showcase-card__frame { transform: none !important; }
}