/* Layout */
/* Components */
/* Utilities */



.bpp-grid {
    column-gap: 3rem;
    display: grid;
    font-size: 16px;
    gap: 2rem;
    grid-template-columns: 3fr 7fr;
    margin: 0 auto;
    padding-top: 0;
    width: 1400px;
}

.bpp-left{
    display: flex;
    flex-direction: column;
}

.bpp-imgContainer{
    display: flex;
    flex-direction: column;
}
/* Images */
.bpp-imgWrapper {
    display: block;
    width: 100%;
    border:2px solid var(--light-grey-color);

}

.bpp-imgCover {
    width: 100%;
    height: auto;
    object-fit:contain;
}

.bpp-thumbs_nav {
    display: flex;
    gap: 2rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.bpp-thumbs_nav img {
    width: 70px;
    border: 2px solid transparent;
    cursor: pointer;
    background: white;
    scale: 1;
    transition: all;
    transition-duration: .05s;
    transition-timing-function: ease-in-out;
    border: 1px solid rgba(122, 122, 122, 0.612);
}

.bpp-thumbs_nav img:hover {
    scale: 1.2;
}

.bpp-thumbs_nav img.bpp-active-thumb {

    box-shadow: 0 0 5px 5px rgba(39, 174, 95, 0.2);
}


.bpp-discount-badge-over-image {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 500px;
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 0.3rem 0.5rem;
    position: absolute;
    right: 5px;
    top: 5px;
}

.bpp-product-single__title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.bpp-product-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    row-gap: .5rem;
    margin-bottom: .5rem;
    font-size: 1.25rem;
}

.bpp-instock {
    background: #e8f5e9;
    padding: 0.3rem .5rem;
    padding-right: .7rem;
    color: #2e7d32;
    font-size: 1.25rem;

    border-radius: 500px;
}

.bpp-instock i {
    margin-right: 5px;
}

.bpp-product-sku {
    /* background: #f1f5f9; */
    padding: 0.2rem 0.8rem;
}

.bpp-product-sku i {
    margin-left: 5px;
}

.bpp-product-info .bpp-isbn {
    margin-right: 5px;
    font-size: 1.25rem;
}

.bpp-product-info .bpp-isbn i {
    margin-right: 10px;
    color: rgb(71, 184, 201);
    font-size: 2rem;
}

.bpp-psinglePriceWr {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1rem;
    margin-bottom: -.7rem;
}

.bpp-psinglePrice.bpp-sale {
    font-size: 2rem;
    font-weight: 700;
    color: #f37920;
}

.bpp-psinglePrice:is(s) {
    font-size: 1.6rem;
    color: #7d7d7d;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: #f37920;
}

.bpp-discount-badge {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.bpp-discount-badge d {
    background: #fff0e6;
    padding: 0.3rem .8rem;
    padding-right: 30px;
    border-radius: 500px;
}

.bpp-discount-badge b {
    background: rgb(205, 205, 205);
    padding: .5rem 1rem;
    border-radius: 500px;
    display: inline-block;
    translate: -25px 0;

    background: rgba(220, 70, 234, 0.5);
    border-radius: 500px;
    color: white;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.tax-included {
    display: inline-block;
    /* font-style: italic; */
    background: #eee;
    color: #a6a6a6;
    padding: 3px 5px;
    /* border-radius: 5px; */
    font-size: 1rem;
    font-weight: 800;
    transform: skewX(-15deg);
}


.bpp-product-action {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin: 1.5rem 0;
}

.bpp-qtyField {
    display: flex;
    border: 1px solid #cbd5e1;
    background: white;
}

.bpp-qtyBtn {
    background: #f8fafc;
    border: none;
    padding: 0.6rem .6rem;
    font-size: 1.25rem;
    cursor: pointer;
}

.bpp-qtyBtn i {
    color: #bbb;
}

input[type="number"].bpp-qty::-webkit-outer-spin-button,
input[type="number"].bpp-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.bpp-qty {
    width: 30px;
    text-align: center;
    border: none;
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0.6rem 0;
}

.bpp-btn {
    background: #d4722c;
    padding: 0.8rem 1.3rem;
    border: none;
    outline: none;
    border-radius: 500px !important;
    font-weight: 600;
    color: white;
    cursor: pointer;
}

.bpp-buy-button {
    background: #019b04;
    padding: 0.8rem 1.3rem;
    font-weight: 600;
    width: max-content;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 500px !important;
}

.bpp-shippingMsg {
    background: #f1f5f9;
    padding: 0.8rem .5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}


.bpp-key-highlights-container {
    margin: 1.5rem 0;
}

.bpp-key-highlights-container h3 {
    margin-bottom: .7rem;
}

.bpp-key-highlights-container h3 .fa-info-circle:before {
    color: #2dafbb;
    margin-right: 6px;
}

.bpp-key-highlights-container ul {
    margin-bottom: 1rem;
    margin-left: 16px;
    padding-left: 32px;
}

.bpp-key-highlights-container ul li {
    margin-bottom: .5rem;
}

.bpp-btn--share,
.bpp-inLink {
    background: #f1f5f9;
    padding: 0.3rem 0.5rem;
    font-size: 1.25rem;
    text-decoration: none;
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}



#bpp-social-sharing,
#bpp-social-sharing a,
#bpp-social-sharing a img {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#bpp-social-sharing {
    display: flex;
    align-items: center;
    column-gap: 1rem;
}

#bpp-social-sharing a {
    all: unset;
    display: inline-block;
    cursor: pointer;
    scale: 1;
    transition: all;
    transition-duration: .5s;
    transition-timing-function: ease-in-out;

}

#bpp-social-sharing a:hover {
    scale: 1.2;
}

#bpp-social-sharing a img {
    display: block;
    width: 36px;
}

/* TABS - pure CSS, no JS */
.bpp-product-tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin: 2rem 0 1rem 0;
    list-style: none;
}

.bpp-product-tabs li {
    margin-right: 2px;
}

.bpp-product-tabs li a {
    display: block;
    padding: 0.8rem 1.5rem;
    background: #f5f5f5;
    font-weight: 600;
    font-size: 1.25rem;
    text-decoration: none;
    color: #111;
    border: 1px solid #ddd;
    border-bottom: none;
}

.bpp-product-tabs li.bpp-active a {
    background: white;
    border-bottom: 1px solid white;
    margin-bottom: -1px;
}

.bpp-tab-content {
    padding: 1.2rem 0;
    display: none;
}

.bpp-tab-content:target {
    display: block;
}

/* For default open tab (specifications) */
#bpp-specs {
    display: block;
}

/* mobile accordion using details/summary - no JS */
.bpp-mobile-accordion {
    display: none;
}



table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #e2e8f0;
    padding: 0.75rem;
    text-align: left;
    vertical-align: top;
}

.bpp-trow1 {
    font-weight: 600;
    width: 30%;
    background: #f9fafb;
}

.bpp-complementary-grid {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: #fef9f0;
    padding: .5rem;
    border: 1px solid #ffe4cc;
    margin: 2rem 0;
}

.bpp-comp-img {
    width: auto;
    background: #fff;
    padding: 0.3rem;
}

.bpp-comp-img img {
    width: 100%;
    aspect-ratio: 1/1.2;
    object-fit: contain;
}

.bpp-comp-detail a {
    font-weight: 600;
    color: #0f172a;
    text-decoration: none;
}

.bpp-comp-price s {
    color: #94a3b8;
    margin-right: 0.5rem;
}

.bpp-comp-price span {
    color: #f37920;
    font-weight: 700;
}

hr {
    margin: 1rem 0;
}

.bpp-rte ul {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
}

.bpp-rte img {
    max-width: 100%;
    margin: 0.5rem 0;
}

.bpp-mb20 {
    margin-bottom: 1.25rem;
}











@media (max-width: 1400px) {
    .bpp-grid {
        margin: 0;
        width: 100%;
        padding: 0 2rem;
    }
}


@media (max-width: 992px) {
    .bpp-grid{
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }
    .bpp-left{
        display: flex;
        flex-direction: row;
        margin: 0 auto;
        justify-content: center;
        gap: 2rem
    }

    .bpp-imgContainer{
        display: flex;
        flex-direction: row;
        gap: 2rem;
        justify-content: center;
    }



    .bpp-imgWrapper{
        /* min-width: 350px;
        max-width: 70%; */
    }

    .bpp-thumbs_nav {
        flex-direction: column  ;
        margin:0;
    }
    #bpp-social-sharing{
        flex-direction: column;
        gap: 1rem;
        justify-content: center;
    }

    #bpp-social-sharing a img {
        width: 40px !important;
    }

    .bpp-right{
        padding: 1rem;
    }

    /* .bpp- */

}


@media (max-width: 576px) {
    .bpp-left{
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        justify-content: center;
        gap: 1.5rem
    }
    
    .bpp-grid {
        
        padding: 1.2rem;
    }
    .bpp-grid #bpp-social-sharing{
        flex-direction: row;
        gap: 1rem;
        /* padding-left: ; */
        justify-content: center;
    }
    .bpp-grid #bpp-social-sharing a img {
        width: 36px !important;
    }
    tag-bplp-book-card-book-title{
        font-size: 1.5rem !important;
    }


    .bpp-product-action .cart-drawer-open-btn.bpp-btn i, .bpp-product-action .bpp-buy-button i{
        display: none;
    }
    .bpp-product-info {
        display: block;
    }
    .bpp-product-info .bpp-instock {
        display: block;
        width: fit-content;
        margin-bottom: 1rem;
    }

    .bpp-key-highlights-container ul li {
        font-size: 1.25rem;
    }
}





@media (max-width: 500px) {

    .bpp-imgContainer{
        flex-direction: column;
        margin: 0 auto;
    }
    .bpp-imgWrapper{
        margin: 0 auto;
    }
    .bpp-grid #bpp-social-sharing{
        flex-direction: row;
        gap: 1rem;
        margin-top: 1rem;
    }
    .bpp-grid #bpp-social-sharing a img {
        width: 36px;
    }
    .bpp-thumbs_nav {
        flex-direction: row  ;
        margin:0 auto;
    }

}
