﻿.phone-color-box {
    box-shadow: inset 1px 3px rgb(18,18,18, .1);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    border: 1px solid #00000014;
}


.Shop .card-grid-style-3 .card-grid-inner {
    border-radius: 10px !important;
    padding: 10px !important;
    text-align: center !important;
    height: auto;
}

.card-grid-style-3 {
    margin-bottom: 20px !important;
}

.card-grid {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.card-grid-style-3 .card-grid-inner .price-info {
    height: auto !important
}

.Shop .shopmain .card-grid-style-3 .card-grid-inner {
    min-height: auto !important;
}

.carousel-slide {
    min-height: auto !important;
}

.card-grid-style-3 .info-right {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: flex-start;
    flex-direction: column;
    text-align: start;
    padding: 0px;
}



.Shop .usability {
    margin-left: 8px;
    margin-right: 8px;
    width: 50px !important;
    height: 20px !important;
    border-radius: 5px !important;
    font-size: 11px !important;
    font-weight: 500;
    padding: 0px 6px;
    background-color: #53C572;
    color: #fff;
    text-align: center;
}

#buy_device {
    overflow: hidden;
    position: relative;
}


.font-lg-bold {
    line-height: 12px;
    display: inline-block;
}

.circle-deco {
}

.price-info {
    padding: 0px !important;
}

.card-grid-style-3 .card-grid-inner .price-info {
    margin: 0px;
}

    .card-grid-style-3 .card-grid-inner .price-info .price-main {
        font-size: 10px !important;
        margin-right: 0px
    }

.card-product-storage {
    margin: 0px !important;
}

/* Multi-storage row: HARD-CAPPED to exactly 2 rows. Chip = 16px (border-box, incl.
   its 1px border), row-gap = 4px => 2 rows = 16 + 4 + 16 = 36px content; height 38px
   gives 2px slack so row 2 never clips. overflow:hidden is the guarantee — no matter
   the screen size or how many chips wrap, a 3rd row (needs +20px) can never be visible.
   JS then collapses whatever spills past row 2 into a "+N more" badge. */
.Shop .card-product-storage:not(.card-product-storage-seller) {
    display: block !important;
    position: relative;
    height: 38px !important;
    overflow: hidden !important;
}

.Shop .card-product-storage:not(.card-product-storage-seller) .storage-container {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    align-items: flex-start;
    gap: 4px;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
    min-width: 0;
    height: 38px;
    overflow: hidden;
}

/* Spacing is handled solely by the container `gap` — kill site.css's per-li margin
   so wrap math stays predictable. */
.Shop .card-product-storage:not(.card-product-storage-seller) .storage-container > li {
    margin: 0 !important;
}

.storage-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 16px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    padding: 0 6px;
    white-space: nowrap;
    background-color: #1971E4 !important;
    color: #fff !important;
    border: 1px solid #1971E4;
    cursor: default;
}


.card-grid-style-3 .card-grid-inner .image-box {
    margin-bottom: 2px !important;
    height: 200px !important;
    background-color: #ffffff !important;
}

.itemName {
    color: #191919;
    height: auto !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    align-items: center;
    justify-content: center;
    display: flex;
    margin: 0px !important;
}


.verifiedUser,
.nameDataContainer {
    display: none;
    justify-content: center;
    align-items: center;
}


.Shop .card-grid-style-3 .card-grid-inner .card-product-storage .mainStorage {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #f2f3f5 !important;
    border: 1px solid #e2e5ea !important;
    width: auto !important;
    height: 16px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    border-radius: 4px !important;
    font-size: 9px !important;
    font-weight: 500;
    padding: 0 6px;
    color: #191919 !important;
    white-space: nowrap;
}

/* site.css forces 12px via the higher-specificity `.shopmain` selector — override
   it here so chips actually shrink on the shop grid. */
.Shop .shopmain .card-grid-style-3 .card-grid-inner .card-product-storage .mainStorage {
    font-size: 9px !important;
}




@media (max-width:767px) {
    .carousel-slide {
        margin: 0 10px 0 0;
    }


    /*
    .Shop .shopmain .card-grid-style-3 .card-grid-inner {
        min-height: 470px;
    }*/

    .itemName {
        font-size: 14px !important;
    }

    .card-grid-style-3 .card-grid-inner .image-box {
        height: 150px !important;
    }
}

.card-grid-style-3 .card-grid-inner .image-box .label.isVerified {
    width: 30px !important;
}

    .card-grid-style-3 .card-grid-inner .image-box .label.isVerified.isPreorder {
        width: 68px !important;
    }
/*.slick-list {
overflow:visible;
}*/

#buy_device .box-product-price {
    display: none !important;
}

#buy_device .div_btns {
    border-top: 0 !important;
    margin-top: -23px !important;
    padding-top: 0 !important;
}

.plans-header .plan-button.btn-1 {
    display: none !important;
}

#buy_device #bundlesRow {
    margin-top: -15px !important;
}
