/* ---- brand ----
   A TITLE, NOT A BADGE. It was a blue chip - tinted background, border, pill radius - which gave a
   plain fact about the device the same visual weight as an interactive control, and sat directly
   above the product name competing with it. It reads as a quiet eyebrow over the name now: grey,
   no background, no border. */
.brand-chip {
    display: inline-block;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: #707070;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
    margin-bottom: 6px;
}

/* The .condition-chip that lived here is gone with the pill it styled (see the note where the
   markup was, in detail.cshtml). Condition is stated in one place now - the selector in the band -
   and only when there is more than one to choose between. */

.sku-label {
    font-size: 13px;
    color: #707070;
    margin-bottom: 4px;
}

.item-description {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 12px;
}

#buy_device {
    font-family: 'DM Sans', sans-serif;
    color: #191919;
    max-width: 1283px;
    padding: 0px 18px;
}

#condition_exp {
    font-family: 'DM Sans', sans-serif;
    color: #191919;
    width: 100%;
    background-color: #f7f7f7;
}

    #condition_exp .section2 {
        padding: 24px 18px 45px;
        max-width: 1283px;
        margin: 0 auto;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 19px;
        position: relative;
    }

label.nb > span {
    color: #2FA94F;
}

label.nb {
    left: auto;
    right: 0;
    background: #fff;
    color: #191919;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    width: 120px;
    height: 32px;
    line-height: 25px;
    top: -27px;
}

.btn-wishlist {
    border-radius: 50px;
    border: 0;
    /*background: none !important;*/
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    line-height: 26px;
    position: absolute;
    top: 29px;
    right: 0;
}

/* Favorite heart placed inside the product image, top-right (matches home product card) */
.detail-gallery {
    position: relative;
}

/* Top overlay row: discount badge (left) + favourite button (right), vertically centred to each other.
   Same flex-row concept as the shop card — align-items:center does the centring, no pixel offsets. */
.detail-gallery-top {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;   /* clicks fall through to the image; re-enabled on the children */
}
/* favourite button: drop its stand-alone absolute positioning; margin-left:auto keeps it on the right
   even when the badge is hidden (single item) */
.detail-gallery-top .detail-fav-btn {
    position: static;
    top: auto;
    right: auto;
    margin-left: auto;
    pointer-events: auto;
}
/* discount badge as a flex item on the left (DOM has the button first, so order:-1 moves the badge before it) */
.detail-gallery-top .detail-discount-badge {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    order: -1;
    pointer-events: auto;
    background: #e02424;
    color: #fff;
    font-weight: 600;
    font-size: 14px;      /* desktop size */
    line-height: 1;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
}
/* mobile only: slightly smaller badge */
@media (max-width: 767.98px) {
    .detail-gallery-top .detail-discount-badge {
        font-size: 12px;
        padding: 5px 9px;
        border-radius: 5px;
    }
}

.detail-fav-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 9999px;
    border: 1px solid #E5E5E5;
    background: #fff;
    color: #191919;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}

    .detail-fav-btn:hover {
        background: #4285f4;
        border-color: #4285f4;
        color: #fff;
    }

    /* favorited state (toggled by site.js toggleFav via btn-wishlist-red) */
    .detail-fav-btn.btn-wishlist-red {
        color: #E83C3C;
        border-color: #F3C0C0;
    }

        .detail-fav-btn.btn-wishlist-red:hover {
            background: #E83C3C;
            border-color: #E83C3C;
            color: #fff;
        }

.div_btns {
    position: relative;
    border-top: 2px solid #EEEEEE;
    margin-top: 21px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #EEEEEE;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal-width columns */
    gap: 10px; /* Optional: space between buttons */
}

.section2 > h2 {
    font-size: 1.1rem;
    padding-top: 20px;
    padding-bottom: 25px;
    margin-top: 20px;
    line-height: inherit;
}

.gallery-image + h2 {
    border-top: 2px solid #EEEEEE;
    font-size: 1.1rem;
    padding-top: 20px;
    padding-bottom: 25px;
    margin-top: 20px;
    line-height: inherit;
}

.condition_header {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
    align-items: center;
    margin-bottom: 27px;
}

.info_header {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
    align-items: center;
    margin-bottom: 19px;
}

.info_body {
    color: #707070;
    font-size: 0.9rem;
    line-height: 28px;
}

    .info_body span {
        color: #191919;
    }

.div_btns .btn:nth-child(odd) {
    margin-right: 10px;
}

.product-condition, .product-info {
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #EEEEEE;
}

.condition_body .condition img {
    margin-right: 10px;
    filter: grayscale(100%);
}

.condition_body .condition {
    display: flex;
    align-items: center;
    height: 56px;
    cursor: pointer;
    border-radius: 6px;
    background: #EEEEEE;
    padding: 0 14px;
    color: #191919;
    font-weight: 500;
    font-size: 1rem;
    flex: 1;
    justify-content: center;
    max-width: 33%;
}

    .condition_body .condition.active {
        background-color: #383838;
        color: #fff;
    }

        .condition_body .condition.active img {
            filter: grayscale(0);
        }

.condition_header b, .product-info b {
    font-size: 1.1rem;
}

.condition_header a, .product-info a, .footer_report a {
    font-weight: 500;
    cursor: pointer;
    font-size: 0.8rem;
}

.condition_body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    position: relative;
    width: 100%;
}

.div_btns .btn {
    font-weight: bold;
    box-sizing: border-box;
    border: 1px solid #383838;
    color: #191919;
    font-size: 1rem;
    cursor: pointer;
    height: 51px;
    line-height: 51px;
    padding: 0 20px;
}

    .div_btns .btn:last-child {
        background: #4285f4;
        border: 1px solid #4285f4;
        color: #fff;
    }

.slider-nav-thumbnails .slick-slide.slick-active.slick-current .item-thumb, .slider-nav-thumbnails .slick-slide .item-thumb.slick-current, .slider-nav-thumbnails .slick-slide .item-thumb:hover, .slider-nav-thumbnails-2 .slick-slide .item-thumb.slick-current, .slider-nav-thumbnails-2 .slick-slide .item-thumb:hover {
    border-color: #4285f4 !important;
}

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

.box-product-price .price-line {
    display: block;
    color: #70707069 !important;
}
/* reserve the original-price line's height even when there is no discount */
.box-product-price .price-line.is-placeholder {
    visibility: hidden;
}
.box-product-price .price-line.is-placeholder::after {
    content: "\00a0";
}

.btn-wishlist svg {
    margin-left: -1px;
}

.container h6 {
    line-height: 18px;
    color: #707070;
    font-weight: normal;
    font-size: 0.875rem;
}

.container h3 {
    color: #191919 !important;
}

    .container h3.color-brand-3.mb-25 {
        padding-right: 38px;
    }

.container h6 b {
    font-weight: normal;
    color: #191919;
}

#buy_device .section2 {
    padding: 24px 0px 45px;
    max-width: 1283px;
    margin: 0 auto;
    width: 100%;
}


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

    #buy_device .page_title a {
        color: #191919;
    }

.shop-template .container {
    max-width: 100% !important;
    padding: 0 !important;
    position: relative;
}

.product-description {
    padding-top: 20px;
    padding-bottom: 22px;
    border-bottom: 2px solid #EEEEEE;
    position: relative;
    color: #191919;
}

    .product-description h7 {
        font-size: 1.1rem;
        font-weight: bold;
    }

    .product-description > div {
        position: relative;
        margin-top: 20px;
    }

    .product-description .i {
        background: #F7F7F7;
        border-radius: 28px;
        color: #191919;
        height: 23px;
        line-height: 40px;
        font-size: 1rem;
        padding: 0 20px;
        text-align: center;
        height: 40px;
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-bottom: 10px;
        margin-right: 10px;
    }

.collapsible-item {
    position: relative;
    border: 1px solid #EEEEEE;
    border-radius: 6px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.devrep .collapsible-item .header {
    line-height: 64px !important;
}

.card-grid-style-3 {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.collapsible-item .header {
    position: relative;
    background: #F7F7F7;
    font-size: 1.1rem;
    height: 67px;
    padding-left: 20px;
    color: #191919;
    font-weight: bold;
    float: inherit;
    cursor: pointer;
    line-height: 52px;
}

.collapsible-item .content {
    position: relative;
    background: #fff;
    font-size: 0.5rem;
    color: #191919;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns */
}

.collapsible-item .box {
    display: flex;
    align-items: center;
    border: 1px solid #EEEEEE;
    padding: 18px;
    margin: 10px;
    border-radius: 6px;
    font-size: 0.9rem;
}

    .collapsible-item .box ul {
        margin-top: 6px;
        margin-bottom: 6px;
        list-style-type: unset;
        margin-left: 16px;
        font-size: 0.8rem;
    }

.collapsible-container span {
    font-size: 0.7rem;
    padding-left: 21px;
    padding-bottom: 16px;
    display: block;
    width: 70%;
}

.footer_report, #devlike .head {
    display: flex;
    justify-content: space-between;
}

    .footer_report a {
        margin-right: 17px;
    }

.collapsible-item .content.double {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 10PX 25PX;
}

.collapsible-item .content.single {
    grid-template-columns: repeat(1, 1fr) !important;
    padding: 10PX 25PX;
}

.collapsible-item .line {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    color: #707070;
    position: relative;
    align-items: center;
}

    .collapsible-item .line i {
        color: #2FA94F;
        margin-right: 10px;
    }

    .collapsible-item .line span {
        padding-bottom: 6px;
        padding-top: 6px;
    }

    .collapsible-item .line:nth-child(odd) {
        margin-right: 20px;
    }

    .collapsible-item .line span:nth-child(even) {
        text-align: right;
    }

.line::before {
    content: "•";
    font-size: 20px;
    margin-right: 5px;
    color: #191919;
}

.collapsible-item .single .line:nth-child(odd) {
    margin-right: 0px;
}

.collapsible-item .single .line:last-child {
    border: 0;
}


#condition_exp .condition {
    width: 100%;
    border-radius: 6px;
    text-align: center;
}

    #condition_exp .condition .bgc {
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 113px;
        margin-bottom: 25px;
        font-weight: 500;
        border-radius: 6px;
    }

    #condition_exp .condition.active .bgc {
        background-color: #383838;
        color: #fff;
    }

.bgc img {
    margin-bottom: 6px;
    filter: grayscale(100%);
}

#condition_exp .condition.active .bgc img {
    filter: grayscale(0);
}

#condition_exp h2, #devlike {
    max-width: 1283px;
    width: 100%;
    margin: 0 auto;
    padding: 0 18px;
    font-size: 1.1rem;
}

    #devlike h2 {
        font-size: 1.1rem;
        color: #191919;
    }

    #devlike .head a {
        font-size: 0.8rem;
        color: #191919;
        text-decoration: underline;
        cursor: pointer;
        font-weight: 500;
    }

#condition_exp ul {
    margin-top: 6px;
    margin-bottom: 6px;
    list-style-type: unset;
    margin-left: 22px;
    text-align: left;
    font-size: 0.8rem;
}

#devlike .head {
    align-items: center;
    padding-top: 34px;
    height: 51px;
    position: relative;
}

#devlike .image-box .label {
    border-radius: 4px;
    color: #191919;
    font-size: 11px;
    background: #fff !important;
}

    #devlike .image-box .label > span {
        color: #2FA94F;
    }

#devlike .image-box > a {
    border-radius: 4px;
    overflow: hidden;
    /*width: 100%;*/
    display: block;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.card-grid-style-3 .card-grid-inner .image-box {
    display: flex;
    justify-content: center;
    width: unset !important;
}

.listinggrid .info-right a:hover, .listinggrid .info-right a {
    color: #191919 !important;
    min-height: 44px;
    display: block;
    padding-right: 40px;
}

#devlike {
    padding-bottom: 85px;
}

    #devlike .card-grid-style-3 .card-grid-inner .tools {
        top: 166px;
    }

.info-right .color-brand-3, .info-right .font-xs {
    color: #191919 !important;
}

.info-right .font-xs {
    min-height: inherit !important;
}

.btn-quickview {
    display: none !important;
}

#faq_div {
    font-family: 'DM Sans', sans-serif;
    color: #191919;
    width: 100%;
    background-color: #f7f7f7;
}

.price-line {
    color: #707070;
}

#faq_div .container {
    position: relative;
    padding: 0 18px 120px;
    margin: 0 auto;
    max-width: 1283px;
}

#faq_div .btn {
    background-color: #4285f4;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    margin: 0 auto;
}

#faq_div .box-btn-cart {
    text-align: center;
}

#faq_div .card-header {
    border: 0;
    color: #191919;
    font-size: 0.9rem;
    padding-left: 0;
    cursor: pointer;
    background: transparent;
}

#faq_div h2 {
    color: #191919;
    font-size: 1.1rem;
    padding: 30px 0 5px;
    margin: 0;
    line-height: inherit;
}

#faq_div .card {
    border: 0;
    background: transparent;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
}

#faq_div .collapse {
    color: #383838;
    font-weight: normal;
}

#faq_div h6 a {
    color: #191919;
    font-weight: 500;
}

#faq_div h6 svg {
    position: absolute;
    top: 15px;
    right: 0;
}

#faq_div .card:last-child {
    border: 0;
}

.accordion .card-body {
    padding: 0px 0 10px !important;
    font-size: 0.75rem;
}

.card-grid-style-3 .card-grid-inner .image-box img {
    visibility: hidden !important;
}

.collapsible-item .content.single:not(.show) {
    display: none !important;
}

@media (max-width:768px) {
    .product-description > div {
        display: block;
    }

    #devlike {
        padding-bottom: 12px;
    }

    .product-description .i {
        font-size: 0.8rem;
        padding: 11px 12px;
        line-height: inherit !important;
        min-width: 127px;
        display: inline-block;
        margin-bottom: 15px;
    }

    .condition_body .condition {
        font-size: 0.8rem;
    }

        .condition_body .condition img {
            margin-right: 10px;
            max-width: 22px;
        }

    .div_btns .btn {
        font-size: 0.7rem;
        height: 51px;
        line-height: 51px;
        padding: 0 10px;
    }

    .container h3.color-brand-3.mb-25 {
        font-size: 15px;
    }

    .map {
        margin-bottom: 20px;
    }

    .collapsible-item .content {
        grid-template-columns: repeat(1, 1fr);
    }

    .footer_report {
        display: block;
    }

    .collapsible-container span {
        font-size: 0.7rem;
        padding-left: 18px;
        padding-right: 18px;
        width: 100%;
    }

    .collapsible-item .box {
        padding: 10px;
        font-size: 0.9rem;
    }

    .footer_report a {
        margin-left: 18px;
        margin-bottom: 6px;
        display: block;
    }

    .collapsible-item .content.double {
        grid-template-columns: repeat(1, 1fr) !important;
        padding: 10PX 16PX;
    }

    .collapsible-item .line:nth-child(odd) {
        margin-right: 0px;
    }

    .collapsible-container span {
        padding-right: 0px;
    }

    #condition_exp h2 {
        padding-top: 20px;
    }

    #devlike .image-box > a {
        background-size: contain;
        background-position: center;
    }
}


@media (max-width:530px) {
    #condition_exp .section2 {
        display: block;
    }

    #condition_exp .condition {
        margin-bottom: 36px;
    }
}

/* =============================================================================
   Product gallery on phones: every frame is the SAME fixed square
   -----------------------------------------------------------------------------
   style.css (max-width: 449.98px) meant the slides and thumbnails to be squares
   (height:auto + aspect-ratio:1/1), but the picture stayed IN FLOW with
   height:100% / max-height:90%. iOS Safari does not resolve those percentages
   against a height that only comes from aspect-ratio, so the picture fell back
   to its own height and the frame grew or shrank to fit it. A 0-byte picture
   (ImgGet answers 200 + 0 bytes for a missing file) has no height at all, and
   Safari < 15 ignores aspect-ratio outright. Result: every slide a different
   size.

   The fix takes the picture OUT of flow. The frame's height then depends on
   its width alone (aspect-ratio, or the padding-bottom:100% box on browsers
   without it), and the picture is contained inside a box of known size. That
   holds for any picture: portrait, landscape, tiny or broken.

   Same breakpoint as the style.css rules it replaces. From 450px up, the frame
   is a fixed 500px-tall box (style.css) that the vertical thumbnail rail is
   sized against, so it already never changes with the picture and is left
   alone. Keyed on the gallery's IDs, which exist only on this page, and matches
   both the server-rendered slides and the ones detail.js rebuilds on a colour
   change (same figure > img / .item-thumb > img markup). Scoped to
   .slick-initialized like the style.css rules it replaces (they needed
   .slick-slider / .slick-slide), so the page before Slick runs is unchanged.
   ============================================================================= */
@media (max-width: 449.98px) {
    /* ---- main slides ---- */
    #productImageSlider.slick-initialized figure {
        position: relative;
        display: block;             /* was flex: nothing is left in flow to align */
        height: auto;
        aspect-ratio: 1 / 1;
        padding: 0;
        margin: 0;
        background-color: #fff;
    }

    #productImageSlider.slick-initialized figure > img {
        position: absolute;
        /* the 20px top/bottom breathing room style.css gave the frame, kept */
        top: 20px;
        left: 0;
        width: 100%;
        height: calc(100% - 40px);
        max-width: none;
        max-height: none;
        margin: 0;
        object-fit: contain;
        object-position: center;
    }

    /* ---- thumbnails ---- */
    #sliderNavThumbnails.slick-initialized .item-thumb {
        position: relative;
        height: auto;
        aspect-ratio: 1 / 1;
        padding: 0;
        line-height: normal;
        background-color: #fff;
    }

    #sliderNavThumbnails.slick-initialized .item-thumb > img {
        position: absolute;
        top: 10%;
        left: 10%;
        width: 80%;
        height: 80%;
        max-width: none;
        max-height: none;
        margin: 0;
        object-fit: contain;
        object-position: center;
    }
}

/* Browsers without aspect-ratio (Safari < 15): an in-flow box whose padding is
   100% of the frame's WIDTH makes it square. It sits on a ::before inside the
   frame, not on the frame itself, because the frame is a Slick slide and its
   own percentage padding would resolve against the whole track's width. */
@supports not (aspect-ratio: 1 / 1) {
    @media (max-width: 449.98px) {
        #productImageSlider.slick-initialized figure::before,
        #sliderNavThumbnails.slick-initialized .item-thumb::before {
            content: "";
            display: block;
            padding-bottom: 100%;
        }
    }
}