.logoBg {background-color: #e91e63;}
.pinkBg{background-color: #e91e63;}
.border_rad_min_all{ border-radius:10px; }
.bg-pink-badge{background-color: #E91E63;}
.box_fourty{width: 40px; height: 40px;}

.mt_top_sm { margin-top: 2px !important; }
.mt_top_min { margin-top: 15px !important; }
.margin_top_min { margin-top: 10px; }
.margin_top_med { margin-top: 20px; }
.margin_top_mini_high { margin-top: 35px; }
.margin_top_large { margin-top: 45px; }
.margin_bottom_med { margin-bottom: 20px; }

.padding_bottom_min { padding-bottom: 15px !important; }
.padding_bottom_med { padding-bottom: 25px !important; }

.full_width { width: 100% !important; }
.max_width_full { max-width: 100% !important; }
.border_radius_min {border-radius: 10px;}
.text_justify { text-align: justify; }

.chip_img {max-width: 80px !important;}

.bg_white { background-color: #fff !important; }
.bg_orange { background-color: #D4AF37 !important; }

.text_white{color: white !important;}
.text_black{color: #000 !important;}
.text_orange{color: #D4AF37 !important;}

.logo-white-update{
    filter: brightness(0) invert(1);
}

.hridaya_footer {
    background: linear-gradient(to right, #4b1c1c, #801f1f, #a83232);
    color: white;
    padding: 20px;
    text-align: center;
}

/* Slideshow zoom - STARTS */
    .slideshow {
        position: relative;
        width: 100%;
        height: 600px;
        overflow: hidden;
    }

    .slideshow .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transform: scale(1);
        transition: opacity 1s ease-in-out, transform 10s ease-in-out;
        z-index: 0;
    }

    .slideshow .slide.active {
        opacity: 1;
        transform: scale(1.1); /* zoom-in effect */
        z-index: 1;
    }
    .slideshow .slide .container,
    .slideshow .slide .container .row {
        height: 100%;
    }

    .slideshow .slide .container .row > div {
        display: flex;
        align-items: center; /* Vertically center the content */
        height: 100%;
    }
    .slideshow .slide.prepare {
        opacity: 0;
        transform: scale(1);
        z-index: 0;
    }
/* Slideshow zoom - ENDS */

/* Upload try me photo - STARTS */
    .trymeWidth{width: 30rem !important;}
    @media (max-width: 767px) {
        .trymeWidth {
            width: 100%; /* or any smaller value like 20rem */
        }
    }
    #uploadPhoto { display: none; }
    .photo-preview {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 675px;
        border: 2px dashed #ccc;
        display: flex;
        justify-content: center;       /* Keep image centered horizontally */
        align-items: flex-start;       /* Align image to top vertically */
        overflow: hidden;
        background-color: #f9f9f9;
        padding-top: 0;                /* Ensure no padding on top */
    }

    .photo-preview img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .resizable {
        z-index: 10;
        position: absolute;
        top: 20px;
        left: 20px;
        display: inline-block;
        resize: none; /* We'll handle resizing manually with handles */
    }

    .resizable img {
        display: block;
        width: 100%;
        height: auto;
        pointer-events: none;
    }

    /* Resize handles on all four corners */
    .resizable::before,
    .resizable::after,
    .resizable .handle-top,
    .resizable .handle-bottom,
    .resizable .handle-left,
    .resizable .handle-right {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        background: #007bff;
        z-index: 100;
        cursor: pointer;
    }

    .resizable .handle-top { top: -5px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
    .resizable .handle-bottom { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
    .resizable .handle-left { left: -5px; top: 50%; transform: translateY(-50%); cursor: w-resize; }
    .resizable .handle-right { right: -5px; top: 50%; transform: translateY(-50%); cursor: e-resize; }

    #userPhoto {
        position: relative;
        z-index: 1;
        pointer-events: none;
        max-height: 400px;
    }
/* Upload try me photo - ENDS */


/* New update - STARTS */
    .title_main {font-size: 30px !important;}
    .icon_confidence{max-width: 72px; filter: brightness(0);}
    .confidence_bg{background-color: #fefaf5;}
    .text_bold_mild{font-weight: 600;}
    .stop_img_zoom{transform: none !important;}

    .scroll-row {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        cursor: pointer;
        user-select: none;
        gap: 20px;
        padding-bottom: 10px;
        scroll-snap-type: x mandatory;
    }

    /* Optional: Desktop vs mobile scrollbar */
    @media (min-width: 769px) {
        .scroll-row::-webkit-scrollbar { display: none; }
        .scroll-row { scrollbar-width: none; justify-content: center; }
    }

    @media (max-width: 768px) {
        .scroll-row::-webkit-scrollbar {
            height: 2px;
            display: block;
        }
        .scroll-row::-webkit-scrollbar-thumb {
            background: #000;
            border-radius: 1px;
        }
        .scroll-row::-webkit-scrollbar-track { background: transparent; }
        .scroll-row {
            scrollbar-width: thin;
            scrollbar-color: #000 transparent;
        }
    }

    .category {
        flex: 0 0 auto;
        width: 192px !important;
        height: 250px !important;
        border-radius: 10px;
        scroll-snap-align: start;
    }

    .category-card {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 10px;
        position: relative;
    }

    /* Text below the image, centered */
    .category-text {
        position: absolute;
        bottom: 8px; /* distance from bottom */
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        color: #000; /* change color as needed */
        background: rgba(255, 255, 255, 0.7); /* optional semi-transparent bg */
        padding: 2px 6px;
        border-radius: 4px;
        pointer-events: none;
    }

    .category-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        pointer-events: none;
    }

    /* Celebrity slider - STARTS */
    .custom-swiper-container {
        width: 100%;
        max-width: 100vw; /* Ensure it doesn't exceed viewport */
        overflow: hidden;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

    .custom-swiper-container .swiper-slide {
        width: 507px; /* Fixed width for desktop */
        display: flex;
        justify-content: center;
    }

    .custom-swiper-container .swiper-slide img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* Navigation buttons */
    .swiper-button-next,
    .swiper-button-prev {
        background-color: white;       /* Ivory/white background */
        color: black;                  /* Arrow color */
        width: 50px !important;        /* Button width */
        height: 50px !important;       /* Button height */
        border-radius: 50%;            /* Makes it perfectly round */
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Optional shadow */
        transition: all 0.3s ease;     /* Smooth hover transition */
    }

    .swiper-button-next { right: 20px !important; }
    .swiper-button-prev { left: 20px !important; }

    /* Adjust the arrow size */
    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 14px !important;   /* Smaller arrow */
        color: black;                 /* Arrow color */
        transition: color 0.3s ease;  /* Smooth color transition */
    }

    /* Hover effect: background black, arrow white */
    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        background-color: black;
    }

    .swiper-button-next:hover::after,
    .swiper-button-prev:hover::after {
        color: white;
    }

    /* Pagination bullets */
    .swiper-pagination-bullet {
        background-color: white;       
        opacity: 0.8;
    }

    .swiper-pagination-bullet-active {
        background-color: black;       
    }

    /* Celebrity slider - ENDS */

    .celebBox{max-width: 90%; margin-left:5%; margin-right:5%;}
    .celeb_scroll_images {max-width: 90%; margin-left: 5%; margin-right: 5%;}
/* New update - ENDS */

/* Our products slider - STARTS */
    .font_products{font-size: 20px; color: #897575 !important;}

    .product-slider {
        position: relative;
        overflow: hidden;
    }

    .product-container {
        display: flex;
        gap: 10px;
        overflow-x: hidden;
        scroll-behavior: auto; /* disable native jump scroll */
    }

    .product-item {
        width: 32%; /* 3 visible items */
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .product-img {
        width: 100%;
        transition: opacity 0.3s ease;
    }

    .product-info {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #EEE4E4;
        color: #fff;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .product-item:hover .product-img {
        opacity: 0;
    }

    .product-item:hover .product-info {
        opacity: 1;
    }

    .arrow-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.8);
        border: none;
        font-size: 14px;
        cursor: pointer;
        padding: 5px 10px;
        z-index: 5;
        border-radius: 50%;
        transition: background 0.3s ease;
    }

    .arrow-btn:hover {
        background: rgba(255, 255, 255, 1);
    }

    .left-arrow {
        left: 5px;
    }

    .right-arrow {
        right: 5px;
    }
/* Our products slider - ENDS */

/* Cart quantity input styles - STARTS */
    .input-step-cart {
        background: #f5f5f5;
        padding: 2px 5px;
    }
    .input-step-cart button {
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        width: 24px;
        height: 24px;
        line-height: 1;
    }
    .input-step-cart .cart-qty {
        width: 40px;
        text-align: center;
        background: transparent;
        font-size: 13px;
    }
    .cart-item {
        transition: all 0.3s ease;
    }
    .cart-item:hover {
        background-color: #fafafa;
    }
    .remove-cart-item:hover {
        transform: scale(1.1);
    }
/* Cart quantity input styles - ENDS */