@import "theme-default.css";
@import "theme-black.css";
@import "theme-dark.css";
@import "theme-dark-gradient.css";
@import "theme-red.css";
@import "theme-blue.css";

body { 
background: var(--bg-body); 
font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 
}
#products {
    scroll-margin-top: 125px; /* adjust to your header height */
}
#page-loader {
    display: flex; /* show by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: white;*/
    background: transparent;
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
main.container {
padding-top: 120px; /* slightly more than header height */
}
@media (max-width: 991px) {
main.container {
padding-top: 190px; /* header + mobile navbar height */
}
}
h1 {
font-size: 2rem;   /* smaller than default */
font-weight: 600;  /* slightly lighter */
color: var(--h1-color);
}
h2 {
font-size: 1.5rem;
font-weight: 500;
margin-top: 0.5rem;
margin-bottom: 1rem;
color: var(--h2-color);
}
.h3-custom{
    color: var(--h1-color);
}
h6{
    color: var(--h6-color);
}
p{
    color: var(--p-color);
}
ul li{
        color: var(--p-color);
}
.nav-link{
    color: var(--nav-link-color);
}
.header-top{ background: var(--bg-header-top) !important; border-bottom:1px solid #e6e6e6; padding:10px 0; }

footer{
background-color: var(--bg-footer) !important;
}
.row-bg{
    background-color: var(--bg-row);
}
.main-color{
    color: var(--main-color) !important;
}
.navbar{
    background-color: var(--bg-navbar) !important;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active,
.navbar-nav .nav-link.show
{
color: var(--nav-link-hover-color);
background-color: var(--bg-navbar-nav-link-hover);
border-radius: 0px;
}
.sidebar{ 
background: var(--bg-sidebar); 
padding:1rem; 
border-radius:8px; 
box-shadow:0 0 10px rgba(0,0,0,0.05); 
position:sticky; 
top:110px; 
min-height: 42em;
}





#heroCarousel .carousel-item {
height: 350px; /* smaller height, adjust as needed */
}
#heroCarousel .carousel-item img {
object-fit: cover; /* crops images nicely */
width: 100%;
height: 100%;
}

.brand-img{ max-height:48px; }

.navbar-nav .dropdown-menu { min-width: 720px; padding: 1rem; }
.category-link:hover, .filter-select:hover{ background:#f1f5f9; border-radius:6px; transition:0.2s; cursor:pointer; }
.product-card { background:#fff; border:1px solid #e9ecef; padding:12px; border-radius:8px; display:flex; flex-direction:column; }
.product-card img { width:100%; height:160px; object-fit:cover; border-radius:6px; }
.modal-img-wrap{ width:100%; height:360px; overflow:hidden; border-radius:8px; background:#f5f5f5; display:flex; align-items:center; justify-content:center; position:relative; }
.modal-img-wrap img { max-width:100%; max-height:100%; }
.thumbs { display:flex; gap:8px; margin-top:10px; }
.thumbs img { width:64px; height:64px; object-fit:cover; border-radius:6px; cursor:pointer; border:1px solid #ddd; }
.thumbs img.active { outline:2px solid #0d6efd; }
.zoom-container {
position: relative;
}
#zoomResult {
position: absolute;
border: 1px solid #ddd;
width: 250px;
height: 250px;
overflow: hidden;
display: none;
top: 0;
right: -260px;
border-radius: 8px;
z-index: 10;
}
#zoomResult img {
position: absolute;
}
.zoom-hint { position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,0.45); color:#fff; padding:6px 8px; border-radius:6px; font-size:0.85rem; }
footer{ background:#fff; border-top:1px solid #e6e6e6; padding:20px; text-align:center; margin-top:30px; }
@media(max-width:991px){ 
.sidebar{ position:static; top:auto; margin-bottom:1rem; } 
.navbar-nav .dropdown-menu{ min-width:100%; } 
.modal-img-wrap{ height:260px; } 
#zoomResult { display:none !important; } /* hide zoom on small screens */
}
.header-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1030; /* higher than content so it stays on top */
background: #fff; /* ensure background is opaque */
border-bottom: 1px solid #e6e6e6;
}
/* Make navbar-toggler visible outside navbar */
/* Make toggler visible outside navbar */
/* Force hamburger icon visibility */
.navbar-toggler-icon {
background-image: var(--bs-navbar-toggler-icon-bg);
}
/* The button border */
.navbar-toggler {
border: 1px solid black;   /* makes the button border visible */
border-radius: 0.25rem; /* same as Bootstrap default */
padding: 0.25rem 0.75rem; 
}
@media (max-width: 991px) {
.navbar-toggler {
padding: 0.5rem 1rem;  /* slightly bigger tappable area */
border-radius: 0.25rem; 
}
}
.cart-table img { width:80px; height:80px; object-fit:cover; border-radius:6px; }
.cart-summary { background:#fff; padding:1rem; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,0.05); }
.checkout-summary { background:#fff; padding:1rem; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,0.05); }
.checkout-summary h4 { font-weight:600; margin-bottom:1rem; }
.btn-place-order { width:100%; font-size:1.1rem; padding:0.75rem; }