/* ====== base ====== */




.bb-breadcrumb,
.bb-qtyBox,
.bb-shareBox {
   /* border: 4px solid var(--blueBorder);
    background: var(--boxBg);
    border-radius: 6px;*/
}

/* ====== 1) breadcrumb ====== */
.bb-breadcrumb {
    width: 60%; /* % width like image */
    padding: 3.2% 2%;
    display: flex;
    align-items: center;
    gap: 2%;
    font-family: Arial, sans-serif;
    font-size: 0.95rem;
    color: var(--text);
}

.bb-crumbIcon {
    font-size: 1rem;
    opacity: .65;
}
.crumbIcon-image{
    width: 22%;
}
.bb-sep {
    opacity: .5;
}

.bb-crumbLink {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .02em;
}

.bb-crumbCurrent {
    font-weight: 700;
    letter-spacing: .02em;
}

/* ====== 2) quantity ====== */
.qtyBox {
    width: 100%;
    height: auto;
   
    float: left;
    margin-top: 10px;
}

.bb-qtyLabel {
    width: 13%;
    height: 34px;
}

.bb-qtyControl {
    width: 40%; /* control not full width (like image) */
    display: flex;
    align-items: center;
    gap: 3%;
}

.qtyBtn {
    width: 18%;
    padding: 4% 0;
    border: 1px solid #e2e2e2;
    background: #f5f5f5;
    border-radius: 4px;
    font-size: 1.1rem;
    cursor: pointer;
}

.bb-qtyInput {
    width: 28%;
    text-align: center;
    padding: 4% 0;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    font-weight: 700;
    outline: none;
}

/* ====== 3) share ====== */
.bb-shareBox {
    width: 55%;
    margin-top: 10px;
    font-family: Arial, sans-serif;
    float: left;
}

/* title aligned */
.bb-shareTitle {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 3%;
    width: 43%;
    
}
.icon-image{
    max-width: 59%;
    height: auto;
}
/* icons row aligned left like screenshot */
.bb-shareRow {
    width: 100%; /* ✅ important */
    display: flex;
    justify-content: flex-start; /* ✅ align left */
    align-items: center;
    gap: 4%; /* ✅ consistent spacing */
    margin-bottom: 4%;
}

/* all icons same size */
.bb-shareIcon {
    width: 14%; /* % width */
    aspect-ratio: 1 / 1; /* ✅ equal square buttons */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #f7f7f7;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    text-decoration: none;
    color: #111;
    font-weight: 800;
    line-height: 1;
}

/* Tag line aligned */
.bb-tagRow {
    width: 10%;
    margin-top: 2%;
}

.bb-tagLabel {
    font-size: 0.9rem;
    color: #1a1a1a;
    font-weight: 700;
}



/* MAIN WRAPPER */
.productimagewrapper {
    width: 100%;
    height: auto;
  
}

/* SMALL IMAGE CONTAINER */
.thumbnail-wrapper {
    width: 21%;
    height: 110px;
   
    float: left;
    /*border: 2px solid #2daae1;*/ /* blue highlight like your screenshot */
    /*border-radius: 8px;
    overflow: hidden;*/
   /* margin-bottom: 15px;*/
    cursor: pointer;
    transition: 0.3s ease;
}

/* SMALL IMAGE */
.imgThumbnail {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    margin-left: 14%;
}

/* Hover effect */
.thumbnail-wrapper:hover {
    transform: scale(1.05);
}

/* BIG IMAGE CONTAINER */
.main-image-wrapper {
    width: 79%;
    float: left;
    height: auto;
  /*  border-radius: 10px;*/
    overflow: hidden;
    
}

.desme {
    width: 100%;
    height: 40px;
    
    float: left;
}
/* BIG IMAGE */
/* ====== mobile responsiveness ====== */
@media (max-width: 1024px) {

    .bb-breadcrumb {
        width: 92%;
        font-size: 0.9rem;
        padding: 3% 4%;
        gap: 3%;
    }
    .description3{
        color: brown;
    }
    .productimagewrapper {
        margin-left: 10%;
    }

    .bb-qtyBox,
    .bb-shareBox {
        width: 64%;
    }

    .bb-qtyControl {
        width: 90%;
    }

    .bb-shareTitle {
        width: 66%;
    }

    .bb-qtyBtn {
        width: 20%;
        padding: 6% 0;
    }

    .bb-qtyInput {
        width: 30%;
        padding: 6% 0;
    }

    .bb-shareRow {
        width: 80%;
        gap: 7%;
    }

    .bb-shareIcon {
        width: 24%;
    }
}
@media (max-width: 1024px) {

    .product-image-wrapper {
        max-width: 100%;
    }
    .imgThumbnail {
        margin-left: -10%;
    }
    .thumbnail-wrapper {
        width: 28%;
        height: 90px;
        margin-bottom: 10px;
        float: left;
        margin-left: -7%;
    }
    .main-image-wrapper {
        width: 65%;
        float: left;
    }
    .imgProfile2 {
        width: 100%;
    }
}