*{margin:0;padding:0;box-sizing:border-box;}
html {
    scroll-behavior: smooth;
}

body{
    font-family:'Inter', sans-serif;
    background:#0f1113;
    color:#e5e7eb;
    line-height:1.6;
}

header{
    padding:100px 20px;
    text-align:center;
    background:linear-gradient(160deg,#0f1113 0%, #1a1d21 100%);
}

header h1{
    font-family:'Kalam', cursive;
    font-size:62px;
    font-weight:700;
    letter-spacing:1px;
    color:#ff7a00;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.4);
}

header p{
    margin-top:20px;
    font-size:18px;
    color:#9ca3af;
}

header img{
    max-height: 200px;
}

.hero-btn{
    display:inline-block;
    margin-top:35px;
    background:#ff7a00;
    color:white;
    padding:14px 28px;
    border-radius:6px;
    text-decoration:none;
    font-weight:500;
    transition:0.3s;
}

.hero-btn:hover{
    background:#e56e00;
    transform: scale(1.05);
}

nav{
    position:sticky;
    top:0;
    background:#0c0e10;
    padding:18px;
    text-align:center;
    border-bottom:1px solid #1f2937;
    z-index: 100;
}

nav a{
    font-family:'Inter', sans-serif;
    color:#ff7a00;
    text-decoration:none;
    margin:0 20px;
    font-weight:500;
    transition:0.3s;
}

nav a:hover{
    color:#e56e00;
}

section{
    max-width:1100px;
    margin:80px auto;
    padding:0 20px;
}

.card{
    background:#16191d;
    padding:40px;
    border-radius:14px;
    box-shadow:0 12px 30px rgba(0,0,0,0.4);
    margin-bottom:40px;
}

h2{
    font-family:'Inter', sans-serif;
    margin-bottom:25px;
    font-size:28px;
    color:white;
}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.service-title{
    font-family:'Inter', sans-serif;
    color:#ff7a00;
    font-weight:600;
    margin-bottom:10px;
}

.small{
    font-size:14px;
    color:#9ca3af;
    margin-top:15px;
}

footer{
    text-align:center;
    padding:50px 20px;
    background:#0c0e10;
    margin-top:80px;
    color:#9ca3af;
    border-top:1px solid #1f2937;
}

#theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 15px;
    border: none;
    border-radius: 6px;
    background: #ff7a00;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    transition: 0.3s;
}

#theme-toggle:hover {
    background: #e56e00;
}

body.light-mode {
    background: #fff;
    color: #111;
}
body.light-mode header {
    background: #f5f5f5;
}
body.light-mode nav {
    background: #eee;
}
body.light-mode .card {
    background: #fff;
    color: #111;
    box-shadow:0 12px 30px rgba(0,0,0,0.1);
}

@media(max-width:600px){
    header h1{font-size:36px;}
    header{padding:70px 20px;}
    header img{
        max-height: 120px;
    }
    section{
        margin:40px 20px;
        padding:0 10px;
    }
}

.product{
	margin-bottom:50px;
}

.gallery{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
	gap:15px;
	margin-top:20px;
}

.gallery img{
	width:100%;
	height:200px;
	object-fit:cover;
	border-radius:8px;
	cursor:pointer;
	transition:transform 0.2s;
}

.gallery img:hover{
	transform:scale(1.05);
}

.product-description{
    margin-top:10px;
    margin-bottom:20px;
    color:#9ca3af;
    font-size:14px;
    line-height:1.5;
}

.shop-button{
display:inline-flex;
align-items:center;
justify-content:center;

margin-top:10px;

padding:6px 12px;

min-height:34px;

background:rgba(255,122,0,0.08);

border:1px solid rgba(255,122,0,0.18);

border-radius:7px;

color:#ff7a00;

text-decoration:none;

font-size:12px;

font-weight:500;

line-height:1;

transition:0.2s ease;
}

.shop-button:hover{
background:rgba(255,122,0,0.14);

border-color:rgba(255,122,0,0.35);

transform:translateY(-1px);
}

/* LIGHTBOX */

.lightbox{
    display:none;
    position:fixed;
    z-index:999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.85);
    align-items:center;
    justify-content:center;
}

.lightbox-img{
    max-width:90%;
    max-height:90%;
    border-radius:10px;
}

.lightbox-close{
    position:absolute;
    top:30px;
    right:40px;
    color:white;
    font-size:40px;
    cursor:pointer;
}

.lightbox-prev,
.lightbox-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:50px;
    color:white;
    cursor:pointer;
    user-select:none;
    padding:20px;
}

.lightbox-prev{
    left:20px;
}

.lightbox-next{
    right:20px;
}

.lightbox-content{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.lightbox-caption{
    margin-top:15px;
    color:#e5e7eb;
    font-size:14px;
    text-align:center;
    max-width:80%;
}

#products-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,220px));
justify-content:center;
gap:25px;
margin-top:45px;
}

.product-card{
background:#111418;
border:1px solid rgba(255,255,255,0.05);
border-radius:14px;
overflow:hidden;
transition:0.25s ease;
cursor:pointer;
width:220px;
display:flex;
flex-direction:column;
}

.product-card:hover{
transform:translateY(-4px);
box-shadow:0 12px 28px rgba(0,0,0,0.35);
border-color:rgba(255,122,0,0.25);
}

.product-card-title{
padding:14px 14px 10px;
font-size:15px;
font-weight:600;
color:white;
line-height:1.4;
min-height:58px;
display:flex;
align-items:center;
}

.product-card img{
width:100%;
height:150px;
object-fit:cover;
display:block;
background:#0f1113;
}

.product-card-content{
padding:0 14px 14px;
display:flex;
justify-content:center;
}

.small-hero-btn{
padding:10px 22px;
font-size:14px;
border-radius:8px;
margin-top:20px;
}

.shop-info{
color:#9ca3af;
margin-bottom:10px;
}

.product-overlay{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.88);
z-index:9999;
overflow-y:auto;
padding:60px 20px;
}

.product-overlay-inner{
max-width:1200px;
margin:auto;
background:#16191d;
padding:40px;
border-radius:20px;
position:relative;
}

.overlay-close{
position:absolute;
top:20px;
right:25px;
font-size:40px;
cursor:pointer;
color:white;
}

#overlay-title{
margin-bottom:20px;
}

#overlay-description{
color:#c5cbd3;
margin-bottom:35px;
line-height:1.7;
}

.overlay-gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:20px;
}

.overlay-gallery img{
width:100%;
height:260px;
object-fit:cover;
border-radius:12px;
cursor:pointer;
transition:0.3s;
}

.overlay-gallery img:hover{
transform:scale(1.02);
}

.image-viewer{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.95);
z-index:10000;
justify-content:center;
align-items:center;
flex-direction:column;
padding:40px;
}

#viewer-image{
max-width:90%;
max-height:80vh;
border-radius:12px;
}

#viewer-caption{
margin-top:20px;
color:#e5e7eb;
max-width:900px;
text-align:center;
line-height:1.6;
}

.image-viewer-close{
position:absolute;
top:30px;
right:40px;
font-size:42px;
color:white;
cursor:pointer;
}

.legal-text{
font-size:14px;
color:#9ca3af;
line-height:1.8;
margin-top:12px;
}

.legal-section{
margin-top:38px;
margin-bottom:14px;
font-size:20px;
font-weight:600;
color:#ffffff;
}

.legal-list{
padding-left:22px;
margin-top:14px;
margin-bottom:10px;
}

.legal-list li{
margin-bottom:10px;
color:#9ca3af;
font-size:14px;
line-height:1.7;
}

.legal-list li::marker{
color:#ff7a00;
}

.card h3{
font-size:20px;
font-weight:600;
color:#ffffff;
}

.legal-highlight{
font-size:15px;
font-weight:600;
color:#ffffff;
margin-bottom:20px;
}

.legal-address{
margin-bottom:20px;
}

.legal-divider{
margin:45px 0;
border:0;
height:1px;
background:rgba(255,255,255,0.08);
}

.card h4{
font-size:18px;
font-weight:600;
color:#ffffff;
margin-bottom:14px;
}