body{
	background: #fafafa !important;
}

.brand-image-card {
	background: #FFFFFF;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
}

.timer{
	color: #FE0002 !important;
	font-weight: 400 !important;
	line-height: 0.625rem !important;
	font-size: 0.875rem !important;
}

.timer-rounded{
	background: #FE0002;
	width: 28px;
	color: #fff !important;
	border-radius: 50%;
	display: inline-block;
	height: 28px;
}

.product-left-label{
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 1;
}

.product-left-label .discount{
	position: absolute;
	left: 15px; 
	right: 0; 
	top: 8px;
}

.product-left-label .premium-discount{
	position: absolute;
	left: 6px; 
	right: 0; 
	top: 7px;
}

.btn-buy, .btn-custom-order, .btn-add-to-cart{
	background: #1493BB;
	border-radius: 3px;
	color: #fff !important;
}

.hot-sale-bg{
	background: #225E9C;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
	border-radius: 10px;
	minheight: 274px;
}

.hot-sale-bg .discount{
	font-size: 2.375rem !important;
	line-height: 3.563rem !important;
	font-weight: 500 !important;
}

.pipeAndGardern{
	background: linear-gradient(108.54deg, #F5F8FF 1.19%, #CCDBFF 103.29%);
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
}

.paintAndChem{
	background: linear-gradient(107.77deg, #FFF9F4 0%, #FFE0C5 100%);
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
}

.btn-see-all{
	background: #1493BB;
	border-radius: 5px;
	color: #fff !important;
}

.showPro1Logo{
	position: absolute;
    top: 3px;
    left: 3px;
    z-index: 2;
}

.showPro1Logo img{
	width: 55px;
}

.section-title-style:after{
	content: '';
    position: absolute;
    left: 0; 
    bottom : -16px;
    height: 2px;
    width: 100%;
    background-color: #1493BB;
}

.product-des{
	font-size: 12px;
	line-height: 18px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.promotion-title:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 10%;
    background-color: #1493BB;
}

.member-previlege-title:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 15%;
    background-color: #1493BB;
}

.nearest-branch-title:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 13%;
    background-color: #1493BB;
}

.brand-carousel .owl-stage {
    padding-left: 0px !important;
}

.promotion-carousel .owl-item .widthAutoDisplayInline{
	width: auto !important;
	display: inline-block;
}

/* .promotion-carousel .owl-stage {
    padding-left: 0px !important;
    margin-left: 15px;
} */

@media(max-width: 768px){
	.hotSaleCategoryIcon{
		max-height: 20px !important;
	}
}

@media only screen and (max-width: 575px){
	.heading_tab_header {
		padding-bottom: 0px !important;
	}
	
	.TabHeaderWidthoutIcon{
		padding-bottom: 15px !important;
	}
}

/* ---------- Keyframes for smooth open/close ---------- */
@keyframes popup-scale-in {
    0% { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes popup-scale-out {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.7); opacity: 0; }
}

/* ---------- Modal Dialog ---------- */
#popupAdsModal .modal-dialog {
    max-width: 90%;       /* max width on large screens */
    margin: 0 auto;
    height: 100vh;        /* full viewport height */
    display: flex;
    align-items: center;   /* vertical centering */
}

/* Mobile adjustments */
@media (max-width: 576px) {
    #popupAdsModal .modal-dialog {
        max-width: 100%;
        height: 100vh;
        margin: 0;
    }
}

/* ---------- Modal Content ---------- */
#popupAdsModal .modal-content {
    position: relative;      /* for absolute close button */
    width: 100%;
    height: auto;            /* adapt to image height */
    max-height: 90vh;        /* do not exceed viewport height */
    border-radius: 15px;
    overflow: visible;       /* allow close button outside */
    background-color: transparent; /* no white background */
    animation: popup-scale-in 0.5s ease forwards; /* initial animation */
}

/* Mobile adjustments */
@media (max-width: 576px) {
    #popupAdsModal .modal-content {
        height: 100%;
        border-radius: 0;
    }
}

/* ---------- Modal Body ---------- */
#popupAdsModal .modal-body {
    padding: 0 !important;
    display: flex;
    justify-content: center;  /* horizontal center */
    align-items: center;      /* vertical center */
    height: 100%;
}

/* ---------- Image Styling ---------- */
#popupAdsModal img {
    max-width: 100%;      /* fit modal width */
    max-height: 100%;     /* fit modal height */
    width: auto;
    height: auto;
    object-fit: contain;  /* maintain aspect ratio */
    display: block;
}

/* ---------- Close Button Outside the Image ---------- */
#popupAdsModal .popup-close-btn {
    position: absolute;
    top: -30px;         /* completely above image */
    right: -30px;       /* completely outside right */
    background: none;    /* no background */
    border: none;
    color: #fff;         /* white �� */
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 1051;
    text-shadow: 0 2px 6px rgba(0,0,0,0.8); /* contrast on bright images */
}

/* On small screens, keep button inside so fully visible */
@media (max-width: 576px) {
    #popupAdsModal .popup-close-btn {
        top: 10px;
        right: 10px;
    }
}