/* =====================================================
   BASIC RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #ffffff;
    color: #111111;
}

button,
input {
    font-family: inherit;
}

button {
    cursor: pointer;
}

a {
    text-decoration: none;
    color: inherit;
}


/* =====================================================
   TOP BAR
===================================================== */

.top-bar {

    height: 34px;

    background: #0647a8;

    color: white;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 4%;

    font-size: 13px;

    font-weight: 600;

}

.top-left span {
    text-decoration: underline;
}

.top-middle {
    text-align: center;
}

.top-right {

    display: flex;

    gap: 25px;

}

.top-right a:hover {
    text-decoration: underline;
}


/* =====================================================
   MAIN HEADER
===================================================== */

.main-header {

    min-height: 76px;

    display: flex;

    align-items: center;

    gap: 35px;

    padding: 8px 3.6%;

    border-bottom: 1px solid #eeeeee;

    background: white;

}


/* =====================================================
   LOGO
===================================================== */

.logo-area {

    min-width: 270px;

}

.logo {

    display: inline-block;

    font-size: 39px;

    line-height: 38px;

    font-weight: 800;

    color: #0750ad;

}

.logo b {

    color: #f39b00;

}

.logo-tagline {

    font-size: 12px;

    color: #222;

    margin-top: 2px;

}


/* =====================================================
   SEARCH
===================================================== */

.search-area {

    flex: 1;

    display: flex;

    height: 43px;

    border: 1px solid #dcdcdc;

    border-radius: 7px;

    overflow: hidden;

}

.search-area input {

    flex: 1;

    border: none;

    outline: none;

    padding: 0 15px;

    font-size: 14px;

    min-width: 0;

}

.search-area button {

    width: 110px;

    border: none;

    background: #ffbd00;

    color: #111;

    font-weight: 700;

}

.search-area button:hover {

    background: #ffab00;

}


/* =====================================================
   HEADER ACTIONS
===================================================== */

.header-actions {

    display: flex;

    align-items: center;

    gap: 15px;

}

.header-action {

    position: relative;

    border: none;

    background: transparent;

    display: flex;

    align-items: center;

    gap: 8px;

    font-weight: 700;

}

.action-icon {

    font-size: 31px;

}

.cart-icon {

    font-size: 28px;

}

.cart-text {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}

.cart-text strong {

    font-size: 12px;

}

.cart-count {

    position: absolute;

    top: -9px;

    right: -7px;

    min-width: 21px;

    height: 21px;

    background: #1260ca;

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 11px;

}


/* =====================================================
   NAVIGATION
===================================================== */

.main-nav {

    min-height: 54px;

    display: flex;

    align-items: center;

    padding: 0 3.5%;

    border-bottom: 1px solid #eeeeee;

    background: white;

}

.nav-links {

    display: flex;

    align-items: center;

    gap: 7px;

}

.nav-links a {

    padding: 12px 20px;

    font-size: 15px;

    font-weight: 700;

    white-space: nowrap;

}

.nav-links a:hover {

    color: #0758c7;

}

.nav-links .active {

    background: #1260ca;

    color: white;

    border-radius: 5px;

}

.best-deals span {

    background: #e51414;

    color: white;

    border-radius: 12px;

    padding: 3px 8px;

    font-size: 9px;

    margin-left: 5px;

}


/* =====================================================
   MOBILE MENU BUTTON
===================================================== */

.mobile-menu-button {

    display: none;

    border: none;

    background: #0758c7;

    color: white;

    padding: 10px 16px;

    border-radius: 5px;

    font-weight: 700;

}


/* =====================================================
   TEST AREA
===================================================== */

.step1-test {

    min-height: 400px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 30px;

}

.step1-test h1 {

    color: #0750ad;

    font-size: 40px;

}

.step1-test p {

    margin: 12px 0 20px;

    color: #555;

}

.test-button {

    border: none;

    background: #ffbd00;

    padding: 13px 28px;

    border-radius: 5px;

    font-weight: 700;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .main-header {

        gap: 15px;

    }

    .logo-area {

        min-width: 210px;

    }

    .logo {

        font-size: 30px;

    }

    .nav-links a {

        padding: 10px 11px;

        font-size: 13px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    /* TOP BAR */

    .top-bar {

        height: auto;

        min-height: 34px;

        padding: 7px 12px;

        font-size: 10px;

    }

    .top-middle {

        display: none;

    }

    .top-right {

        gap: 8px;

    }

    .top-right a:nth-child(1) {

        display: none;

    }


    /* HEADER */

    .main-header {

        min-height: auto;

        padding: 10px 12px;

        display: grid;

        grid-template-columns: 1fr auto;

        gap: 10px;

    }


    /* LOGO */

    .logo-area {

        min-width: 0;

    }

    .logo {

        font-size: 28px;

        line-height: 30px;

    }

    .logo-tagline {

        font-size: 9px;

    }


    /* ACTIONS */

    .header-actions {

        gap: 8px;

    }

    .action-text {

        display: none;

    }

    .heart {

        font-size: 25px;

    }

    .action-icon {

        font-size: 27px;

    }

    .cart-text {

        font-size: 11px;

    }


    /* SEARCH */

    .search-area {

        grid-column: 1 / -1;

        width: 100%;

        height: 40px;

    }

    .search-area button {

        width: 82px;

        font-size: 12px;

    }


    /* NAVIGATION */

    .main-nav {

        padding: 7px 12px;

        min-height: auto;

    }

    .mobile-menu-button {

        display: block;

    }

    .nav-links {

        display: none;

        width: 100%;

        flex-direction: column;

        align-items: stretch;

        margin-top: 7px;

    }

    .nav-links.show {

        display: flex;

    }

    .nav-links a {

        padding: 11px 14px;

        border-bottom: 1px solid #eeeeee;

        font-size: 14px;

    }

    .main-nav {

        flex-direction: column;

        align-items: stretch;

    }


    /* TEST */

    .step1-test {

        min-height: 300px;

    }

    .step1-test h1 {

        font-size: 32px;

    }

}
/* =====================================================
   STEP 2 — HERO SECTION
===================================================== */

.hero-section {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        300px;

    gap: 14px;

}


/* =====================================================
   HERO BUTTONS
===================================================== */

.hero-banner .hero-buttons {
    position: absolute;
    left: 28px;
    bottom: 25px;

    display: flex;
    gap: 10px;

    z-index: 20;
}


.shop-now {
    background: #0758c7;
    color: #ffffff;

    border: none;

    padding: 12px 25px;

    border-radius: 5px;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}


.best-deals-button {
    background: #ffffff;
    color: #0758c7;

    border: 1px solid #0758c7;

    padding: 11px 20px;

    border-radius: 5px;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}

.shop-now {

    background: #0758c7;

    color: white;

    border: none;

    padding: 12px 25px;

    border-radius: 5px;

    font-weight: 700;

}

.shop-now:hover {

    background: #003f99;

}

.best-deals-button {

    background: white;

    color: #0758c7;

    border: 1px solid #0758c7;

    padding: 11px 20px;

    border-radius: 5px;

    font-weight: 700;

}

.best-deals-button:hover {

    background: #0758c7;

    color: white;

}


/* =====================================================
   HERO PRODUCTS
===================================================== */

.hero-products {

    position: absolute;

    right: 15px;

    bottom: 0;

    width: 47%;

    height: 100%;

}

.hero-notebook {

    position: absolute;

    font-size: 60px;

}

.notebook-one {

    right: 130px;

    bottom: 25px;

    transform: rotate(-8deg);

}

.notebook-two {

    right: 80px;

    bottom: 45px;

    transform: rotate(7deg);

}

.notebook-three {

    right: 35px;

    bottom: 25px;

    transform: rotate(-4deg);

}

.hero-pencil {

    position: absolute;

    right: 5px;

    top: 30px;

    font-size: 35px;

    transform: rotate(-8deg);

}

.hero-pens {

    position: absolute;

    right: 10px;

    bottom: 25px;

    font-size: 42px;

}


/* =====================================================
   CART SUMMARY
===================================================== */

.cart-summary {

    background: white;

    border: 1px solid #e5e5e5;

    border-radius: 9px;

    padding: 15px;

    box-shadow:
        0 2px 8px rgba(0,0,0,.04);

}

.cart-title {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;

}

.cart-title h3 {

    margin: 0;

    font-size: 17px;

}

.cart-title span {

    color: #666;

    font-size: 12px;

}

.cart-line {

    display: flex;

    justify-content: space-between;

    padding: 7px 0;

}

.saving-line {

    color: #138c18;

}


/* =====================================================
   OFFERS
===================================================== */

.offer {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 9px;

    border-radius: 6px;

    margin-top: 8px;

}

.offer-icon {

    font-size: 23px;

}

.offer strong {

    display: block;

    font-size: 12px;

}

.offer small {

    display: block;

    margin-top: 2px;

    font-size: 10px;

}

.free-delivery {

    background: #eefaf0;

    border: 1px solid #c1e6c4;

}

.free-delivery strong {

    color: #08752a;

}

.cashback {

    background: #fff8df;

    border: 1px solid #f0d889;

}

.cashback strong {

    color: #c46b00;

}


/* =====================================================
   VIEW CART BUTTON
===================================================== */

.view-cart-button {

    width: 100%;

    border: none;

    background: #ffc000;

    color: #111;

    padding: 12px;

    margin-top: 10px;

    border-radius: 5px;

    font-weight: 700;

}

.view-cart-button:hover {

    background: #ffad00;

}


/* =====================================================
   QUICK OFFERS
===================================================== */

.quick-offers {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border: 1px solid #e5e5e5;

    border-radius: 8px;

    margin-top: 10px;

    overflow: hidden;

}

.quick-offers div {

    text-align: center;

    padding: 12px 5px;

    border-right: 1px solid #e5e5e5;

}

.quick-offers div:last-child {

    border-right: none;

}

.quick-offers strong {

    display: block;

    color: #0758c7;

    font-size: 20px;

}

.quick-offers span {

    display: block;

    font-size: 10px;

    font-weight: 700;

    margin-top: 3px;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .hero-section {

        grid-template-columns: 1fr;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .hero-section {

        display: block;

    }

    .hero-banner {

        min-height: 370px;

    }

    .hero-content {

        padding: 22px 18px;

    }

    .hero-small {

        font-size: 22px;

    }

    .hero-content h1 {

        font-size: 36px;

    }

    .hero-description {

        font-size: 13px;

        line-height: 20px;

    }

    .wholesale-badge {

        width: 105px;

        height: 105px;

        left: auto;

        right: 15px;

        top: 20px;

        font-size: 11px;

    }

    .wholesale-badge strong {

        font-size: 14px;

        line-height: 15px;

    }

    .hero-products {

        opacity: .45;

        width: 70%;

    }

    .cart-summary {

        margin-top: 10px;

    }

    .quick-offers {

        grid-template-columns:
            repeat(2, 1fr);

    }

    .quick-offers div {

        border-bottom: 1px solid #e5e5e5;

    }

    .quick-offers div:nth-child(2) {

        border-right: none;

    }

}
/* =====================================================
   STEP 3 — CATEGORY SECTION
===================================================== */

.category-section,
.products-section {

    padding: 25px 0 10px;

}


/* =====================================================
   SECTION HEADING
===================================================== */

.section-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 15px;

}

.section-label {

    color: #0758c7;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

}

.section-heading h2 {

    font-size: 25px;

    margin: 3px 0;

    color: #111;

}

.section-heading p {

    margin: 0;

    color: #666;

    font-size: 13px;

}

.view-all-button {

    background: white;

    border: 1px solid #0758c7;

    color: #0758c7;

    padding: 9px 16px;

    border-radius: 5px;

    font-weight: 700;

}

.view-all-button:hover {

    background: #0758c7;

    color: white;

}


/* =====================================================
   CATEGORY GRID
===================================================== */

.category-grid {

    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap: 10px;

}

.category-card {

    border: 1px solid #e5e5e5;

    background: white;

    border-radius: 8px;

    padding: 16px 8px;

    text-align: center;

    transition: .2s;

}

.category-card:hover {

    transform: translateY(-3px);

    border-color: #0758c7;

    box-shadow:
        0 4px 12px rgba(0,0,0,.08);

}

.category-icon {

    font-size: 38px;

    margin-bottom: 8px;

}

.category-card strong {

    display: block;

    font-size: 14px;

}

.category-card span {

    display: block;

    color: #777;

    font-size: 10px;

    margin-top: 4px;

}


/* =====================================================
   PRODUCT GRID
===================================================== */

.product-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;

}


/* =====================================================
   PRODUCT CARD
===================================================== */

.product-card {

    background: white;

    border: 1px solid #e5e5e5;

    border-radius: 8px;

    overflow: hidden;

    transition: .2s;

}

.product-card:hover {

    transform: translateY(-3px);

    box-shadow:
        0 5px 15px rgba(0,0,0,.08);

}


/* =====================================================
   PRODUCT IMAGE
===================================================== */

.product-image {

    height: 170px;

    background:
        linear-gradient(
            135deg,
            #f5f8ff,
            #fff6e8
        );

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}

.product-emoji {

    font-size: 85px;

}

.product-badge {

    position: absolute;

    left: 8px;

    top: 8px;

    background: #0758c7;

    color: white;

    font-size: 9px;

    font-weight: 700;

    padding: 5px 7px;

    border-radius: 4px;

}
/* =====================================================
   PRODUCT IMAGE PREVIEW
===================================================== */

.product-image-preview {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 15px;

    margin-top: 15px;

}


.product-image-preview-item {

    position: relative;

    border: 1px solid #ddd;

    border-radius: 10px;

    padding: 8px;

    background: #fff;

    overflow: hidden;

}


.product-image-preview-item img {

    width: 100%;

    height: 150px;

    object-fit: contain;

    display: block;

    border-radius: 8px;

}


.preview-number {

    font-size: 13px;

    font-weight: bold;

    text-align: center;

    margin-bottom: 6px;

    color: #2874f0;

}


/* MOBILE */

@media (max-width: 600px) {

    .product-image-preview {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;

    }


    .product-image-preview-item img {

        height: 120px;

    }

}

/* =====================================================
   PRODUCT INFO
===================================================== */

.product-info {

    padding: 12px;

}

.product-category {

    color: #777;

    font-size: 10px;

}

.product-info h3 {

    font-size: 14px;

    margin: 5px 0;

    min-height: 34px;

    line-height: 17px;

}

.rating {

    font-size: 11px;

    margin-bottom: 8px;

}

.rating small {

    color: #777;

}


/* =====================================================
   PRICE
===================================================== */

.price-row {

    display: flex;

    align-items: center;

    gap: 7px;

    flex-wrap: wrap;

}

.price-row strong {

    color: #0758c7;

    font-size: 21px;

}

.price-row del {

    color: #999;

    font-size: 11px;

}

.price-row span {

    background: #eaf8eb;

    color: #16832a;

    font-size: 9px;

    font-weight: 700;

    padding: 3px 5px;

    border-radius: 3px;

}

.saving-text {

    color: #16832a;

    font-size: 10px;

    margin: 5px 0 9px;

}


/* =====================================================
   PRODUCT BUTTONS
===================================================== */

.add-cart-button,
.buy-now-button {

    width: 100%;

    padding: 9px;

    border-radius: 5px;

    font-weight: 700;

    font-size: 11px;

}

.add-cart-button {

    background: #0758c7;

    color: white;

    border: 1px solid #0758c7;

}

.add-cart-button:hover {

    background: #00449e;

}

.buy-now-button {

    margin-top: 6px;

    background: #ffbd00;

    color: #111;

    border: 1px solid #ffbd00;

}

.buy-now-button:hover {

    background: #ffa900;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .category-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }

    .product-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .category-section,
    .products-section {

        padding: 20px 0 5px;

    }

    .section-heading {

        align-items: flex-start;

        gap: 10px;

    }

    .section-heading h2 {

        font-size: 21px;

    }

    .section-heading p {

        font-size: 11px;

    }

    .view-all-button {

        padding: 7px 10px;

        font-size: 10px;

        white-space: nowrap;

    }

    .category-grid {

        grid-template-columns:
            repeat(3, 1fr);

        gap: 7px;

    }

    .category-card {

        padding: 12px 4px;

    }

    .category-icon {

        font-size: 29px;

    }

    .category-card strong {

        font-size: 11px;

    }

    .category-card span {

        font-size: 8px;

    }

    .product-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 8px;

    }

    .product-image {

        height: 130px;

    }

    .product-emoji {

        font-size: 62px;

    }

    .product-info {

        padding: 9px;

    }

    .product-info h3 {

        font-size: 12px;

        line-height: 15px;

    }

    .price-row strong {

        font-size: 18px;

    }

}
/* =====================================================
   STEP 4 — CART PAGE
===================================================== */

.cart-page {

    padding: 35px 0 50px;

    display: none;

}


/* =====================================================
   CART HEADER
===================================================== */

.cart-page-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 20px;

}

.cart-page-header h2 {

    margin: 4px 0 0;

    font-size: 28px;

}

.continue-shopping-button {

    background: white;

    border: 1px solid #0758c7;

    color: #0758c7;

    padding: 10px 15px;

    border-radius: 5px;

    font-weight: 700;

}

.continue-shopping-button:hover {

    background: #0758c7;

    color: white;

}


/* =====================================================
   CART LAYOUT
===================================================== */

.cart-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        330px;

    gap: 18px;

}


/* =====================================================
   CART ITEMS
===================================================== */

.cart-items-container {

    min-width: 0;

}

.cart-items {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


/* =====================================================
   CART ITEM
===================================================== */

.cart-item {

    display: grid;

    grid-template-columns:
        90px
        minmax(0, 1fr)
        auto;

    gap: 15px;

    align-items: center;

    background: white;

    border: 1px solid #e5e5e5;

    border-radius: 8px;

    padding: 12px;

}

.cart-item-image {

    height: 85px;

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            #f5f8ff,
            #fff6e8
        );

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 50px;

}

.cart-item-info h3 {

    font-size: 15px;

    margin: 4px 0;

}

.cart-item-category {

    color: #777;

    font-size: 10px;

}

.cart-item-price {

    color: #0758c7;

    font-weight: 700;

    font-size: 17px;

}

.cart-item-mrp {

    color: #999;

    font-size: 11px;

    margin-left: 5px;

}


/* =====================================================
   QUANTITY
===================================================== */

.quantity-control {

    display: flex;

    align-items: center;

    border: 1px solid #ddd;

    border-radius: 5px;

    overflow: hidden;

    margin-top: 9px;

    width: fit-content;

}

.quantity-control button {

    width: 30px;

    height: 30px;

    border: none;

    background: #f5f5f5;

    font-size: 17px;

    font-weight: 700;

}

.quantity-control button:hover {

    background: #e5e5e5;

}

.quantity-control span {

    width: 35px;

    text-align: center;

    font-weight: 700;

}


/* =====================================================
   CART ITEM RIGHT
===================================================== */

.cart-item-right {

    text-align: right;

}

.cart-item-total {

    font-weight: 800;

    font-size: 17px;

}

.remove-item {

    display: block;

    margin-top: 12px;

    border: none;

    background: transparent;

    color: #d71919;

    font-size: 11px;

    font-weight: 700;

}

.remove-item:hover {

    text-decoration: underline;

}


/* =====================================================
   EMPTY CART
===================================================== */

.empty-cart {

    border: 1px dashed #ccc;

    border-radius: 8px;

    padding: 50px 20px;

    text-align: center;

    background: #fafafa;

}

.empty-cart-icon {

    font-size: 55px;

}

.empty-cart h3 {

    margin: 10px 0 5px;

}

.empty-cart p {

    color: #777;

    font-size: 13px;

}

.shop-more-button {

    margin-top: 15px;

    border: none;

    background: #0758c7;

    color: white;

    padding: 11px 20px;

    border-radius: 5px;

    font-weight: 700;

}


/* =====================================================
   ORDER SUMMARY
===================================================== */

.order-summary {

    height: fit-content;

    background: white;

    border: 1px solid #e2e2e2;

    border-radius: 9px;

    padding: 18px;

    box-shadow:
        0 3px 12px rgba(0,0,0,.05);

}

.order-summary h3 {

    font-size: 19px;

    margin-bottom: 15px;

}

.summary-row {

    display: flex;

    justify-content: space-between;

    padding: 7px 0;

    font-size: 13px;

}

.saving-summary {

    color: #16832a;

}

.summary-divider {

    height: 1px;

    background: #eeeeee;

    margin: 8px 0;

}


/* =====================================================
   DELIVERY / CASHBACK MESSAGE
===================================================== */

.cashback-summary,
.delivery-summary {

    display: flex;

    gap: 7px;

    align-items: center;

    padding: 9px;

    margin-top: 8px;

    border-radius: 5px;

    font-size: 10px;

    line-height: 15px;

}

.cashback-summary {

    background: #fff7df;

    color: #a65b00;

}

.delivery-summary {

    background: #eef9ef;

    color: #16732a;

}


/* =====================================================
   GRAND TOTAL
===================================================== */

.grand-total {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 0;

}

.grand-total span {

    font-size: 17px;

    font-weight: 700;

}

.grand-total strong {

    color: #0758c7;

    font-size: 24px;

}


/* =====================================================
   CHECKOUT
===================================================== */

.checkout-button {

    width: 100%;

    border: none;

    background: #ffbd00;

    color: #111;

    padding: 13px;

    border-radius: 5px;

    font-weight: 800;

}

.checkout-button:hover {

    background: #ffa900;

}

.secure-text {

    text-align: center;

    color: #777;

    font-size: 9px;

    margin: 10px 0 0;

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .cart-page {

        padding: 25px 0 35px;

    }

    .cart-page-header {

        align-items: flex-start;

        gap: 10px;

    }

    .cart-page-header h2 {

        font-size: 22px;

    }

    .continue-shopping-button {

        font-size: 9px;

        padding: 8px 9px;

    }

    .cart-layout {

        grid-template-columns: 1fr;

    }

    .cart-item {

        grid-template-columns:
            65px
            minmax(0, 1fr);

        gap: 9px;

        padding: 9px;

    }

    .cart-item-image {

        height: 65px;

        font-size: 38px;

    }

    .cart-item-info h3 {

        font-size: 12px;

    }

    .cart-item-price {

        font-size: 15px;

    }

    .cart-item-right {

        grid-column: 2;

        display: flex;

        justify-content: space-between;

        align-items: center;

        text-align: left;

    }

    .remove-item {

        margin-top: 0;

    }

}
/* =====================================================
   MINIMUM ORDER MESSAGE
===================================================== */

.minimum-order-message {

    margin-top: 8px;

    padding: 9px;

    border-radius: 5px;

    background: #fff1f1;

    color: #c62828;

    font-size: 10px;

    font-weight: 700;

    text-align: center;

}


/* DISABLED CHECKOUT */

.checkout-button:disabled {

    background: #d5d5d5;

    color: #888;

    cursor: not-allowed;

}
@media (max-width: 768px) {

    .shop-now {

        padding: 8px 13px;

        font-size: 11px;

    }

    .best-deals-button {

        padding: 7px 11px;

        font-size: 11px;

    }

}
/* =====================================================
   FINAL SOSTALIKHO HERO BANNER
===================================================== */

.hero-banner {
    position: relative !important;

    width: 100% !important;
    height: 345px !important;

    min-height: 345px !important;
    max-height: 345px !important;

    overflow: hidden !important;

    border-radius: 9px;
    border: 1px solid #eeeeee;

    background: #ffffff;

    padding: 0 !important;
    margin: 0 !important;
}


/* IMAGE IS INSIDE THE BANNER ONLY */

.hero-banner-image {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center 42%!important;
}


/* BUTTONS ON TOP OF IMAGE */

.hero-banner .hero-buttons {
    position: absolute !important;

    left: 28px !important;
    bottom: 25px !important;

    z-index: 100 !important;

    display: flex !important;

    align-items: center;
    gap: 10px;
}
/* =====================================================
   ADD TO CART POPUP
===================================================== */

.cart-popup {

    position: fixed;

    width: 330px;

    min-height: 70px;

    background: #ffffff;

    border-radius: 12px;

    box-shadow:
        0 10px 35px rgba(0,0,0,0.20);

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 14px;

    z-index: 999999;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(10px)
        scale(0.95);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}

.cart-popup.show {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


.popup-product-icon {

    width: 48px;

    height: 48px;

    background: #f5f7fa;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 27px;

    flex-shrink: 0;
}


.popup-product-info {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.popup-product-info strong {

    font-size: 14px;

    color: #222;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.popup-product-info span {

    font-size: 12px;

    color: #16803c;
}


.popup-check {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: #16803c;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;
}


/* =====================================================
   FLY TO CART
===================================================== */

.cart-popup.fly-to-cart {

    animation:
        popupFlyToCart
        0.75s
        ease-in
        forwards;
}


@keyframes popupFlyToCart {

    0% {

        opacity: 1;

        transform:
            translate(0, 0)
            scale(1);

    }


    100% {

        opacity: 0;

        transform:
            translate(
                var(--fly-x),
                var(--fly-y)
            )
            scale(0.15);

    }

}


/* =====================================================
   CART BOUNCE
===================================================== */

.cart-button.cart-bounce {

    animation:
        cartBounce
        0.45s
        ease;
}


@keyframes cartBounce {

    0% {

        transform: scale(1);
    }

    40% {

        transform: scale(1.12);
    }

    70% {

        transform: scale(0.96);
    }

    100% {

        transform: scale(1);
    }
}


/* =====================================================
   PRODUCT DETAILS
===================================================== */

.product-details {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin: 8px 0;

    font-size: 12px;

    color: #555;
}


.product-details span {

    background: #f5f7fa;

    padding: 4px 7px;

    border-radius: 5px;
}


.weight-info {

    margin-top: 5px;

    font-size: 12px;

    color: #555;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .cart-popup {

        top: 75px;

        left: 10px;

        right: 10px;

        width: auto;

        min-height: 66px;
    }


    .popup-product-icon {

        width: 42px;

        height: 42px;

        font-size: 24px;
    }


    .popup-product-info strong {

        font-size: 13px;
    }


    .popup-product-info span {

        font-size: 11px;
    }


    @keyframes popupFlyToCart {

        0% {

            opacity: 1;

            transform:
                translate(0, 0)
                scale(1);
        }

        45% {

            opacity: 1;

            transform:
                translate(0, -10px)
                scale(0.9);
        }

        100% {

            opacity: 0;

            transform:
                translate(150px, -70px)
                scale(0.15);
        }
    }

}
/* =====================================================
   MOBILE CART POPUP
===================================================== */

@media (max-width: 600px) {

    .cart-popup {

        max-width: calc(100vw - 20px);

        min-height: 65px;

        padding: 10px 12px;

        border-radius: 10px;

        z-index: 999999;

    }


    .cart-popup .popup-product-name {

        font-size: 13px;

    }


    .cart-popup .popup-product-price {

        font-size: 12px;

    }


    .cart-popup .popup-product-icon {

        font-size: 25px;

    }

}
/* =====================================================
   SOSTALIKHO MOBILE FINAL LAYOUT
   DESKTOP WILL NOT CHANGE
===================================================== */

@media (max-width: 700px) {

    /* =================================================
       1. MAIN HEADER
       Logo
       Search
       Wishlist + Cart
    ================================================= */

    .main-header {
        position: relative !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        grid-template-rows: auto auto auto !important;

        gap: 8px !important;

        padding: 10px 24px !important;

        min-height: auto !important;
    }


    /* LOGO */

    .logo-area {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 100% !important;

        min-width: 0 !important;
    }


    .logo {
        font-size: 28px !important;

        line-height: 31px !important;
    }


    .logo-tagline {
        font-size: 10px !important;
    }


    /* =================================================
       SEARCH
    ================================================= */

    .search-area {
        grid-column: 1 !important;
        grid-row: 2 !important;

        width: 100% !important;

        height: 44px !important;

        min-width: 0 !important;

        margin: 0 !important;
    }


    .search-area input {
        min-width: 0 !important;

        width: 100% !important;

        font-size: 14px !important;

        padding-left: 14px !important;
    }


    .search-area button {
        width: 85px !important;

        flex-shrink: 0 !important;

        font-size: 12px !important;
    }


    /* =================================================
       2. WISHLIST + CART
       SAME LINE
    ================================================= */

    .header-actions {
        grid-column: 1 !important;
        grid-row: 3 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: flex-start !important;

        width: 100% !important;

        height: 62px !important;

        gap: 18px !important;

        padding-left: 0 !important;

        padding-right: 150px !important;

        box-sizing: border-box !important;
    }


    .header-action {
        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        white-space: nowrap !important;

        flex-shrink: 0 !important;
    }


    /* WISHLIST */

    .header-action:first-child {
        width: 62px !important;

        flex-direction: column !important;

        gap: 2px !important;
    }


    .header-action:first-child .action-icon {
        font-size: 32px !important;

        line-height: 32px !important;
    }


    .header-action:first-child .action-text {
        display: block !important;

        font-size: 10px !important;

        line-height: 12px !important;
    }


    /* CART */

    .cart-button {
        position: relative !important;

        width: 85px !important;

        flex-direction: row !important;

        gap: 5px !important;
    }


    .cart-icon {
        font-size: 31px !important;

        line-height: 31px !important;
    }


    .cart-text {
        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        font-size: 11px !important;

        line-height: 14px !important;
    }


    .cart-text strong {
        font-size: 12px !important;
    }


    .cart-count {
        position: absolute !important;

        top: -7px !important;

        right: 3px !important;

        width: 21px !important;

        height: 21px !important;

        min-width: 21px !important;

        font-size: 11px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;
    }


    /* =================================================
       3. MOBILE MENU
       RIGHT SIDE OF SAME LINE
    ================================================= */

    .main-nav {
        position: relative !important;

        height: 0 !important;

        min-height: 0 !important;

        padding: 0 !important;

        margin: 0 !important;

        border: 0 !important;

        z-index: 50 !important;
    }


    .mobile-menu-button {
        display: block !important;

        position: absolute !important;

        right: 24px !important;

        top: -68px !important;

        width: 125px !important;

        height: 50px !important;

        padding: 0 !important;

        margin: 0 !important;

        border-radius: 8px !important;

        font-size: 16px !important;

        font-weight: 700 !important;

        z-index: 100 !important;
    }


    /* MENU OPEN LINKS */

    .nav-links {
        display: none !important;
    }


    .nav-links.show {
        display: flex !important;

        position: relative !important;

        top: 0 !important;

        width: 100% !important;

        margin-top: 0 !important;

        flex-direction: column !important;
    }


    /* =================================================
       4. HERO IMAGE
       SHOW COMPLETE IMAGE
       NO CROPPING
    ================================================= */

    .hero-banner {
        position: relative !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        overflow: hidden !important;

        padding: 0 !important;

        margin: 0 !important;

        background: #ffffff !important;
    }


    .hero-banner-image {
        position: relative !important;

        top: auto !important;

        left: auto !important;

        width: 100% !important;

        height: auto !important;

        max-width: 100% !important;

        max-height: none !important;

        display: block !important;

        object-fit: contain !important;

        object-position: center !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* =================================================
       HERO BUTTONS
    ================================================= */

    .hero-buttons {
        position: absolute !important;

        left: 10px !important;

        bottom: 10px !important;

        right: 10px !important;

        z-index: 20 !important;

        display: flex !important;

        align-items: center !important;

        gap: 8px !important;
    }


    .shop-now {
        padding: 8px 13px !important;

        font-size: 11px !important;
    }


    .best-deals-button {
        padding: 7px 11px !important;

        font-size: 11px !important;
    }


    /* =================================================
       CART SUMMARY
    ================================================= */

    .cart-summary {
        margin-top: 10px !important;
    }

}
/* =====================================================
   MOBILE FLIPKART STYLE
===================================================== */

@media (max-width: 700px) {

    /* OLD MOBILE NAV HIDE */

    .main-nav {
        display: none !important;
    }


    /* =================================================
       MOBILE CATEGORY BAR
    ================================================= */

    .mobile-category-bar {

        display: flex !important;

        width: 100% !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        white-space: nowrap !important;

        gap: 22px !important;

        padding: 10px 12px 8px !important;

        background: #ffffff !important;

        border-bottom: 1px solid #eeeeee !important;

        scrollbar-width: none !important;

        -webkit-overflow-scrolling: touch !important;
    }


    .mobile-category-bar::-webkit-scrollbar {
        display: none !important;
    }


    .mobile-category {

        flex: 0 0 auto !important;

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        position: relative !important;

        padding: 4px 2px 9px !important;

        color: #333333 !important;

        text-decoration: none !important;

        font-size: 13px !important;

        font-weight: 600 !important;
    }


    .mobile-category.active {
        color: #0758c7 !important;
    }


    .mobile-category.active::after {

        content: "" !important;

        position: absolute !important;

        left: 0 !important;

        right: 0 !important;

        bottom: 0 !important;

        height: 3px !important;

        border-radius: 3px !important;

        background: #0758c7 !important;
    }

}
/* =====================================================
   MOBILE CATEGORY - TRUE TWO WAY HORIZONTAL SCROLL
===================================================== */

.mobile-category-bar {
    display: none;
}

@media (max-width: 700px) {

    .mobile-category-bar {

        display: flex !important;

        width: 100% !important;

        height: 82px !important;

        box-sizing: border-box !important;

        padding: 7px 12px 5px !important;

        gap: 16px !important;

        background: #ffffff !important;

        border-bottom: 1px solid #eeeeee !important;

        /* IMPORTANT */

        overflow-x: scroll !important;

        overflow-y: hidden !important;

        white-space: nowrap !important;

        flex-wrap: nowrap !important;

        justify-content: flex-start !important;

        align-items: center !important;

        /* MOBILE SWIPE */

        touch-action: pan-x !important;

        -webkit-overflow-scrolling: touch !important;

        overscroll-behavior-x: contain !important;

        scrollbar-width: none !important;
    }


    .mobile-category-bar::-webkit-scrollbar {
        display: none !important;
    }


    /* EVERY CATEGORY MUST KEEP ITS OWN WIDTH */

    .mobile-category {

        flex: 0 0 65px !important;

        width: 65px !important;

        min-width: 65px !important;

        max-width: 65px !important;

        height: 68px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 3px !important;

        padding: 0 !important;

        margin: 0 !important;

        text-decoration: none !important;

        color: #333333 !important;

        background: transparent !important;

        border: 0 !important;

        white-space: normal !important;

        flex-shrink: 0 !important;

        touch-action: pan-x !important;
    }


    /* ICON */

    .category-icon {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 40px !important;

        height: 40px !important;

        font-size: 27px !important;

        line-height: 40px !important;

        flex-shrink: 0 !important;
    }


    /* CATEGORY NAME */

    .category-name {

        display: block !important;

        width: 65px !important;

        max-width: 65px !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

        white-space: nowrap !important;

        text-align: center !important;

        font-size: 10px !important;

        line-height: 13px !important;

        font-weight: 600 !important;
    }


    /* ACTIVE */

    .mobile-category.active {

        color: #0758c7 !important;
    }


    /* OLD NAV HIDE */

    .main-nav {

        display: none !important;
    }

}
/* =====================================================
   SOSTALIKHO — MOBILE PRODUCT VISIBILITY FINAL FIX
===================================================== */

@media (max-width: 700px) {

    /* PRODUCT SECTION MUST ALWAYS BE VISIBLE */

    .products-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 100% !important;

        padding-left: 12px !important;
        padding-right: 12px !important;

        overflow: visible !important;
    }


    /* PRODUCT GRID */

    .products-section .product-grid,
    #productGrid {

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        width: 100% !important;

        max-width: 100% !important;

        gap: 8px !important;

        visibility: visible !important;

        opacity: 1 !important;

        overflow: visible !important;
    }


    /* PRODUCT CARD */

    .products-section .product-card,
    #productGrid .product-card {

        display: block !important;

        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        visibility: visible !important;

        opacity: 1 !important;

        overflow: hidden !important;
    }


    /* PRODUCT IMAGE */

    #productGrid .product-image {

        width: 100% !important;

        height: 130px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        visibility: visible !important;
    }


    /* PRODUCT INFO */

    #productGrid .product-info {

        width: 100% !important;

        padding: 9px !important;

        display: block !important;

        visibility: visible !important;
    }


    /* PRODUCT NAME */

    #productGrid .product-info h3 {

        display: block !important;

        visibility: visible !important;

        color: #111111 !important;
    }


    /* PRICE */

    #productGrid .price-row {

        display: flex !important;

        visibility: visible !important;

        flex-wrap: wrap !important;
    }


    /* BUTTONS */

    #productGrid .add-cart-button,
    #productGrid .buy-now-button {

        display: block !important;

        width: 100% !important;

        visibility: visible !important;

    }

}
/* =====================================================
   SOSTALIKHO
   FINAL FEATURED PRODUCT CARD
===================================================== */

.product-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.2s ease,
                box-shadow 0.2s ease;
}


.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.10);
}


/* =====================================================
   IMAGE
===================================================== */

.product-image {
    width: 100%;
    height: 210px;
    background: #f8f9fa;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


.product-real-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}


.product-emoji {
    font-size: 70px;
}


/* DEAL BADGE */

.product-badge {
    position: absolute;
    top: 8px;
    left: 8px;

    background: #ff6161;
    color: #fff;

    font-size: 11px;
    font-weight: 700;

    padding: 4px 8px;
    border-radius: 4px;

    z-index: 2;
}


/* =====================================================
   INFORMATION
===================================================== */

.product-info {
    padding: 12px;
}


/* TITLE */

.product-title {
    margin: 0 0 8px;

    font-size: 17px;
    line-height: 1.3;

    color: #212121;

    font-weight: 600;

    min-height: 22px;
}


/* =====================================================
   WHOLESALE RATE
===================================================== */

.wholesale-rate {
    margin-bottom: 9px;

    font-size: 13px;
    font-weight: 700;

    color: #2874f0;

    background: #eef4ff;

    border-radius: 5px;

    padding: 6px 8px;

    display: inline-block;
}


/* =====================================================
   FINAL PRICE
===================================================== */

.final-price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;

    margin-bottom: 7px;
}


.final-price-row .selling-price {
    font-size: 24px;
    line-height: 1;

    color: #111;

    font-weight: 800;
}


.price-unit {
    font-size: 13px;
    color: #555;
    font-weight: 600;
}


.mrp-price {
    font-size: 13px;
    color: #777;
}


.discount-percent {
    font-size: 12px;
    font-weight: 700;

    color: #087f23;

    background: #e7f6ea;

    padding: 3px 5px;

    border-radius: 3px;
}


/* =====================================================
   PRODUCT DETAILS
===================================================== */

.product-details {
    font-size: 12px;

    color: #555;

    margin-top: 6px;
    margin-bottom: 7px;

    line-height: 1.4;
}


/* =====================================================
   SAVING
===================================================== */

.saving-line {
    color: #087f23;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 7px;
}


/* =====================================================
   SUPER EXPRESS
===================================================== */

.express-delivery {
    background: #fff7e6;

    color: #b45f00;

    border-radius: 5px;

    padding: 7px 8px;

    font-size: 12px;

    font-weight: 700;

    margin-bottom: 10px;
}


/* =====================================================
   BUTTONS
===================================================== */

.add-cart-button,
.buy-now-button {
    width: 100%;

    border: none;

    border-radius: 5px;

    padding: 10px 8px;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    margin-top: 6px;
}


.add-cart-button {
    background: #ff9f00;
    color: #fff;
}


.add-cart-button:hover {
    background: #e68f00;
}


.buy-now-button {
    background: #2874f0;
    color: #fff;
}


.buy-now-button:hover {
    background: #125bd3;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .product-image {
        height: 175px;
    }


    .product-info {
        padding: 10px;
    }


    .product-title {
        font-size: 15px;
    }


    .final-price-row .selling-price {
        font-size: 21px;
    }


    .wholesale-rate {
        font-size: 11px;
    }


    .mrp-price {
        font-size: 11px;
    }


    .discount-percent {
        font-size: 10px;
    }


    .product-details {
        font-size: 11px;
    }


    .express-delivery {
        font-size: 11px;
    }


    .add-cart-button,
    .buy-now-button {
        font-size: 12px;
        padding: 9px 6px;
    }

}
/* =====================================================
   PRODUCT DETAILS VIEW
===================================================== */

.product-details-modal-container {
    position: fixed;
    inset: 0;
    z-index: 99999;
}


/* =====================================================
   OVERLAY
===================================================== */

.details-overlay {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background:
        rgba(0, 0, 0, 0.65);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    overflow-y: auto;

}


/* =====================================================
   DETAILS CONTAINER
===================================================== */

.details-container {

    position: relative;

    width: 100%;

    max-width: 1100px;

    background: #fff;

    border-radius: 12px;

    overflow: hidden;

    display: grid;

    grid-template-columns:
        48% 52%;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,0.30);

}


/* =====================================================
   CLOSE
===================================================== */

.details-close-button {

    position: absolute;

    top: 12px;

    right: 12px;

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 50%;

    background: #f1f1f1;

    color: #222;

    font-size: 30px;

    line-height: 1;

    cursor: pointer;

    z-index: 10;

}


.details-close-button:hover {

    background: #ddd;

}


/* =====================================================
   IMAGE AREA
===================================================== */

.details-image-area {

    min-height: 600px;

    background: #f8f9fa;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

}


.details-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: pan-y;
}


.details-product-icon {

    font-size: 160px;

}


/* =====================================================
   CONTENT
===================================================== */

.details-content {

    padding: 45px 38px;

}


/* =====================================================
   BADGE
===================================================== */

.details-deal-badge {

    display: inline-block;

    background: #ff6161;

    color: #fff;

    font-size: 12px;

    font-weight: 800;

    padding: 6px 10px;

    border-radius: 4px;

    margin-bottom: 12px;

}


/* =====================================================
   PRODUCT NAME
===================================================== */

.details-product-name {

    margin: 0 0 16px;

    font-size: 32px;

    line-height: 1.25;

    color: #212121;

}


/* =====================================================
   WHOLESALE
===================================================== */

.details-wholesale-rate {

    display: inline-block;

    background: #eef4ff;

    color: #2874f0;

    font-size: 16px;

    font-weight: 800;

    padding: 10px 13px;

    border-radius: 6px;

    margin-bottom: 16px;

}


/* =====================================================
   PRICE
===================================================== */

.details-price {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 14px;

}


.details-price strong {

    font-size: 40px;

    font-weight: 900;

    color: #111;

}


.details-price span {

    font-size: 16px;

    color: #555;

    font-weight: 700;

}


.details-price del {

    font-size: 15px;

    color: #777;

}


.details-price b {

    font-size: 13px;

    color: #087f23;

    background: #e7f6ea;

    padding: 5px 7px;

    border-radius: 4px;

}


/* =====================================================
   META
===================================================== */

.details-meta {

    font-size: 15px;

    color: #555;

    margin-bottom: 12px;

}


/* =====================================================
   SAVING
===================================================== */

.details-saving {

    font-size: 17px;

    font-weight: 800;

    color: #087f23;

    margin-bottom: 15px;

}


/* =====================================================
   DELIVERY
===================================================== */

.details-delivery {

    background: #fff7e6;

    color: #b45f00;

    padding: 12px;

    border-radius: 6px;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 13px;

}


/* =====================================================
   STOCK
===================================================== */

.details-stock {

    font-size: 15px;

    font-weight: 700;

    margin-bottom: 22px;

}


.details-stock.available {

    color: #087f23;

}


.details-stock.out {

    color: #d32f2f;

}


/* =====================================================
   DESCRIPTION
===================================================== */

.details-description {

    border-top: 1px solid #eee;

    padding-top: 18px;

    margin-bottom: 24px;

}


.details-description h2 {

    margin: 0 0 10px;

    font-size: 19px;

    color: #212121;

}


.details-description p {

    margin: 0;

    font-size: 15px;

    line-height: 1.7;

    color: #555;

    white-space: pre-line;

}

.details-section-title {
    display: block !important;
    margin: 0 0 12px 0;
    padding: 0;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: #222;
    visibility: visible !important;
}


/* =====================================================
   BUTTONS
===================================================== */

.details-buttons {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

}


.details-cart-button,
.details-buy-button {

    width: 100%;

    border: none;

    border-radius: 6px;

    padding: 15px 10px;

    font-size: 15px;

    font-weight: 800;

    cursor: pointer;

}


.details-cart-button {

    background: #ff9f00;

    color: #fff;

}


.details-cart-button:hover {

    background: #e68f00;

}


.details-buy-button {

    background: #2874f0;

    color: #fff;

}


.details-buy-button:hover {

    background: #125bd3;

}


.details-cart-button:disabled,
.details-buy-button:disabled {

    background: #aaa;

    cursor: not-allowed;

}


/* =====================================================
   BACK
===================================================== */

.details-back-button {

    width: 100%;

    margin-top: 12px;

    padding: 12px;

    border: 1px solid #ddd;

    background: #fff;

    color: #333;

    border-radius: 6px;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

}


.details-back-button:hover {

    background: #f5f5f5;

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .details-overlay {

        padding: 0;

        align-items: flex-start;

    }


    .details-container {

        width: 100%;

        min-height: 100vh;

        border-radius: 0;

        display: block;

    }


    .details-image-area {

        min-height: 330px;

        height: 330px;

        padding: 20px;

    }


    .details-main-image {

        height: 300px;

    }


    .details-product-icon {

        font-size: 100px;

    }


    .details-content {

        padding: 25px 18px 35px;

    }


    .details-product-name {

        font-size: 24px;

    }


    .details-wholesale-rate {

        font-size: 13px;

    }


    .details-price strong {

        font-size: 32px;

    }


    .details-price span {

        font-size: 13px;

    }


    .details-price del {

        font-size: 13px;

    }


    .details-price b {

        font-size: 11px;

    }


    .details-meta {

        font-size: 13px;

    }


    .details-description p {

        font-size: 14px;

    }


    .details-buttons {

        grid-template-columns: 1fr;

    }


    .details-cart-button,
    .details-buy-button {

        padding: 14px;

        font-size: 14px;

    }

}
/* =====================================================
   PRODUCT DETAILS GALLERY
===================================================== */

.details-main-image-box {
    width: 100%;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
}


.details-main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}


.details-product-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 100px;
}


.details-gallery-wrapper {
    width: 100%;
    display: block;
    clear: both;
    margin-top: 15px;
    overflow: hidden;
    position: relative;
}

.details-gallery {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 5px 3px 10px;

    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
    touch-action: pan-x;

    box-sizing: border-box;
}

.details-thumbnail {
    position: relative;

    flex: 0 0 78px;
    width: 78px;
    height: 82px;

    display: flex;
    flex-direction: column;

    padding: 3px;

    border: 2px solid #ddd;
    border-radius: 10px;

    background: #fff;

    cursor: pointer;
    overflow: hidden;

    box-sizing: border-box;

    transition: border-color 0.2s ease,
                transform 0.2s ease;
}

.details-thumbnail.active {
    border-color: #2874f0;
    box-shadow: 0 0 0 1px #2874f0;
}

.details-thumbnail img {
    width: 100%;
    height: 58px;

    object-fit: cover;

    display: block;

    flex-shrink: 0;
}

.details-thumbnail span {
    display: block;

    width: 100%;

    font-size: 10px;
    font-weight: 700;

    text-align: center;

    margin-top: 2px;

    color: #555;

    line-height: 14px;
}


/* =====================================================
   IMG 1 / IMG 2 TEXT
===================================================== */

.details-thumbnail span {
    display: block;

    font-size: 10px;

    font-weight: 700;

    text-align: center;

    margin-top: 2px;

    color: #555;
}


/* =====================================================
   IMAGE COUNT
===================================================== */

.details-image-count {
    text-align: center;

    font-size: 12px;

    color: #777;

    margin-top: 2px;
}


/* =====================================================
   QUANTITY
===================================================== */

.details-quantity-section {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 18px;

    padding: 12px;

    border-radius: 10px;

    background: #f7f7f7;
}


.details-quantity-label {
    font-size: 13px;

    font-weight: 700;

    color: #444;
}


.details-quantity-control {
    display: flex;

    align-items: center;

    border: 1px solid #ccc;

    border-radius: 8px;

    overflow: hidden;

    background: #fff;
}


.details-quantity-control button {
    width: 40px;

    height: 38px;

    border: 0;

    background: #fff;

    font-size: 22px;

    font-weight: 700;

    cursor: pointer;
}


.details-quantity-control button:hover {
    background: #f0f0f0;
}


.details-quantity-control button:disabled {
    opacity: 0.5;

    cursor: not-allowed;
}


.details-quantity-control span {
    min-width: 42px;

    text-align: center;

    font-size: 17px;

    font-weight: 700;
}


.details-quantity-section small {
    margin-left: auto;

    color: #777;

    font-size: 11px;
}


/* =====================================================
   SELECTED TOTAL
===================================================== */

.details-selected-total {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 12px;

    padding: 12px 14px;

    background: #f1f8ff;

    border-radius: 8px;

    font-weight: 700;
}


.details-selected-total strong {
    font-size: 20px;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

   .details-main-image-box {
    width: 100%;
    height: 430px;

    display: block;

    background: #fff;

    border-radius: 14px;

    overflow: hidden;

    position: relative;

    touch-action: pan-y;

    box-sizing: border-box;

    margin-bottom: 0;
}

.details-main-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    user-select: none;
    -webkit-user-drag: none;

    touch-action: pan-y;
}




    .details-gallery {

        gap: 8px;

        padding-bottom: 8px;

        overflow-x: auto;

        overflow-y: hidden;

    }


    .details-thumbnail {

        flex: 0 0 68px;

        width: 68px;

        height: 74px;

    }


    .details-thumbnail img {

        height: 50px;

    }


    .details-thumbnail span {

        font-size: 9px;

    }


    .details-quantity-section {

        gap: 8px;

        padding: 10px;

    }


    .details-quantity-control button {

        width: 36px;

        height: 36px;

    }


    .details-quantity-control span {

        min-width: 38px;

    }

}
/* =====================================================
   PRODUCT DETAILS
   BIG IMAGE TOP + 6 SMALL IMAGES BELOW
===================================================== */

.details-image-area {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* BIG IMAGE */
.details-main-image-box {
    width: 100% !important;
    height: 430px !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 0 !important;
}

/* MAIN IMAGE */
.details-main-image-box .details-main-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* SMALL IMAGE AREA */
.details-gallery-wrapper {
    width: 100% !important;
    display: block !important;
    margin-top: 12px !important;
    overflow: hidden !important;
    position: relative !important;
}

/* SMALL IMAGE ROW */
.details-gallery {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 4px 2px 8px !important;
    box-sizing: border-box !important;

    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    touch-action: pan-x !important;
}

.details-gallery::-webkit-scrollbar {
    display: none !important;
}

/* EACH SMALL IMAGE */
.details-thumbnail {
    flex: 0 0 70px !important;
    width: 70px !important;
    min-width: 70px !important;
    height: 78px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    padding: 3px !important;
    margin: 0 !important;

    border: 2px solid #ddd !important;
    border-radius: 8px !important;

    background: #fff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* SMALL IMAGE */
.details-thumbnail img {
    width: 100% !important;
    height: 52px !important;

    object-fit: cover !important;
    display: block !important;

    border-radius: 5px !important;
}

/* IMG 1 / IMG 2 TEXT */
.details-thumbnail span {
    width: 100% !important;
    height: 16px !important;

    display: block !important;

    text-align: center !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 14px !important;

    margin-top: 2px !important;
    color: #555 !important;
}

/* SELECTED IMAGE */
.details-thumbnail.active {
    border-color: #2874f0 !important;
    box-shadow: 0 0 0 1px #2874f0 !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .details-image-area {
        width: 100% !important;
        padding: 12px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* বড় ছবি */
    .details-main-image-box {
        width: 100% !important;
        height: 320px !important;
        flex: none !important;

        border-radius: 10px !important;
    }

   .details-main-image-box .details-main-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}

    /* ছোট ছবির row */
    .details-gallery-wrapper {
        width: 100% !important;
        margin-top: 10px !important;

        display: block !important;
        overflow: hidden !important;
    }

    .details-gallery {
        width: 100% !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        gap: 7px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        touch-action: pan-x !important;
        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;
    }

    .details-gallery::-webkit-scrollbar {
        display: none !important;
    }

    /* ছোট thumbnail */
    .details-thumbnail {
        flex: 0 0 62px !important;
        width: 62px !important;
        min-width: 62px !important;

        height: 68px !important;
        min-height: 68px !important;

        padding: 3px !important;
    }

    .details-thumbnail img {
        width: 100% !important;
        height: 45px !important;
    }

    .details-thumbnail span {
        font-size: 8px !important;
        height: 13px !important;
        line-height: 12px !important;
    }
}
/* =====================================================
   FINAL PRODUCT DETAILS GALLERY
   BIG IMAGE
   ↓
   IMG 1 - IMG 6
===================================================== */

.details-image-area {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;
    justify-content: flex-start !important;

    padding: 20px !important;
    box-sizing: border-box !important;

    background: #f8f9fa !important;

    overflow: visible !important;
}


/* =====================================================
   BIG IMAGE BOX
===================================================== */

.details-main-image-box {
    width: 100% !important;

    height: 380px !important;
    min-height: 380px !important;
    max-height: 380px !important;

    flex: 0 0 380px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    background: #ffffff !important;

    border-radius: 12px !important;

    overflow: hidden !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    position: relative !important;

    touch-action: pan-y !important;
}


/* =====================================================
   BIG PRODUCT IMAGE
   পুরো ছবি দেখাবে
   ছবি কাটবে না
===================================================== */

.details-main-image-box .details-main-image {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    display: block !important;

    padding: 8px !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    user-select: none !important;

    -webkit-user-drag: none !important;

    touch-action: pan-y !important;
}


/* =====================================================
   THUMBNAIL WRAPPER
===================================================== */

.details-gallery-wrapper {
    width: 100% !important;

    display: block !important;

    margin-top: 12px !important;

    padding: 0 !important;

    clear: both !important;

    position: relative !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    flex: none !important;
}


/* =====================================================
   THUMBNAIL ROW
===================================================== */

.details-gallery {
    width: 100% !important;

    height: 82px !important;

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    align-items: flex-start !important;

    justify-content: flex-start !important;

    gap: 8px !important;

    overflow-x: auto !important;

    overflow-y: hidden !important;

    padding: 3px 2px 8px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    -webkit-overflow-scrolling: touch !important;

    scrollbar-width: none !important;

    touch-action: pan-x !important;
}

.details-gallery::-webkit-scrollbar {
    display: none !important;
}


/* =====================================================
   EACH THUMBNAIL
===================================================== */

.details-thumbnail {
    position: relative !important;

    flex: 0 0 68px !important;

    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;

    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: flex-start !important;

    padding: 3px !important;
    margin: 0 !important;

    border: 2px solid #ddd !important;

    border-radius: 8px !important;

    background: #fff !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    cursor: pointer !important;

    flex-shrink: 0 !important;
}


/* =====================================================
   THUMBNAIL IMAGE
===================================================== */

.details-thumbnail img {
    width: 100% !important;

    height: 45px !important;

    min-height: 45px !important;
    max-height: 45px !important;

    display: block !important;

    object-fit: cover !important;

    border-radius: 5px !important;

    flex-shrink: 0 !important;
}


/* =====================================================
   IMG 1 / IMG 2 / ... TEXT
===================================================== */

.details-thumbnail span {
    width: 100% !important;

    height: 14px !important;

    display: block !important;

    text-align: center !important;

    font-size: 9px !important;

    line-height: 12px !important;

    font-weight: 700 !important;

    color: #555 !important;

    margin: 2px 0 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =====================================================
   ACTIVE THUMBNAIL
===================================================== */

.details-thumbnail.active {
    border-color: #2874f0 !important;

    box-shadow:
        0 0 0 1px #2874f0 !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .details-image-area {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        justify-content: flex-start !important;

        padding: 12px !important;

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    /* BIG IMAGE MOBILE */

    .details-main-image-box {
        width: 100% !important;

        height: 280px !important;

        min-height: 280px !important;

        max-height: 280px !important;

        flex: 0 0 280px !important;

        margin: 0 !important;

        padding: 0 !important;

        border-radius: 10px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        overflow: hidden !important;
    }


    .details-main-image-box .details-main-image {
        width: 100% !important;

        height: 100% !important;

        object-fit: contain !important;

        object-position: center center !important;

        padding: 6px !important;

        box-sizing: border-box !important;
    }


    /* THUMBNAILS DIRECTLY BELOW */

    .details-gallery-wrapper {
        width: 100% !important;

        display: block !important;

        margin-top: 10px !important;

        padding: 0 !important;

        overflow: hidden !important;

        position: relative !important;

        flex: none !important;
    }


    .details-gallery {
        width: 100% !important;

        height: 76px !important;

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        align-items: flex-start !important;

        justify-content: flex-start !important;

        gap: 7px !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        padding: 2px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        touch-action: pan-x !important;

        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;
    }


    .details-gallery::-webkit-scrollbar {
        display: none !important;
    }


    /* MOBILE THUMBNAILS */

    .details-thumbnail {
        flex: 0 0 62px !important;

        width: 62px !important;

        min-width: 62px !important;

        max-width: 62px !important;

        height: 66px !important;

        min-height: 66px !important;

        max-height: 66px !important;

        padding: 3px !important;

        margin: 0 !important;

        flex-shrink: 0 !important;

        border-radius: 7px !important;
    }


    .details-thumbnail img {
        width: 100% !important;

        height: 42px !important;

        min-height: 42px !important;

        max-height: 42px !important;

        object-fit: cover !important;
    }


    .details-thumbnail span {
        height: 13px !important;

        font-size: 8px !important;

        line-height: 11px !important;

        margin-top: 2px !important;
    }
}
/* =====================================================
   PRODUCT DESCRIPTION
   4 LINES + MORE / LESS
===================================================== */

.details-description-box {
    width: 100%;
    margin-top: 15px;
    box-sizing: border-box;
}

.details-description {
    width: 100%;
    margin: 0;
    padding: 0;

    font-size: 14px;
    line-height: 1.6;
    color: #444;

    word-wrap: break-word;
    overflow-wrap: break-word;
}

.details-description.collapsed {
    max-height: 90px;
    overflow: hidden;
}

/* More / Less Button */
.details-more-button {
    display: inline-block;

    margin-top: 6px;
    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #2874f0;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
    text-decoration: none;
}

.details-more-button:hover {
    text-decoration: underline;
}

/* =====================================================
   MOBILE
===================================================== */

@media screen and (max-width: 700px) {

    .details-description-box {
        width: 100%;
        margin-top: 12px;
    }

    .details-description {
        font-size: 13px;
        line-height: 1.55;
    }

    .details-more-button {
        font-size: 13px;
        margin-top: 5px;
    }
}