/* ======================================
PEHRAWA — style.css
Luxury Premium UI + Backend Components
====================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

html{
scroll-behavior:smooth;
overflow-x:hidden;
width:100%;
}

body{
background:#050505;
color:#fff;
overflow-x:hidden;
width:100%;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

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

ul{list-style:none}

img{
display:block;
max-width:100%;
}

.container{
width:94%;
max-width:1700px;
margin:auto;
}

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

.top-bar{
height:24px;
background:#0a0a0a;
border-bottom:1px solid #181818;
display:flex;
align-items:center;
justify-content:center;
font-size:11px;
letter-spacing:1px;
color:#e0e0e0;
}

/* =======================
ANNOUNCEMENT BAR
======================= */

.announcement-bar{
background:#f0f0f0;
padding:6px 0;
text-align:center;
overflow:hidden;
position:sticky;
top:0;
z-index:1001;
}

.announcement-bar p{
color:#000;
font-size:13px;
font-weight:600;
}

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

header{
height:72px;
position:sticky;
top:0;
z-index:999;
background:rgba(4,4,4,.92);
backdrop-filter:blur(14px);
border-bottom:1px solid #121212;
}

.nav{
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
}

.logo img{height:50px;}

nav ul{
display:flex;
gap:54px;
list-style:none;
}

nav a{
font-size:13px;
font-weight:500;
letter-spacing:1px;
opacity:.8;
transition:.35s;
}

nav a:hover{color:#ffffff;opacity:1;}

.active{color:#ffffff;}

.nav-right{
display:flex;
gap:24px;
font-size:21px;
}

.nav-right i{cursor:pointer;}

/* Search Wrapper */
.search-wrapper{
position:relative;
display:flex;
align-items:center;
flex:0 0 auto;
}

.search-icon{
font-size:18px;
cursor:pointer;
z-index:2;
color:#fff;
flex-shrink:0;
}

.search-input{
width:0;
opacity:0;
padding:8px 14px;
margin-left:10px;
background:#111;
border:1px solid #333;
color:#fff;
border-radius:30px;
transition:.35s ease;
outline:none;
flex:0 0 0;
}

.search-wrapper:hover .search-input,
.search-wrapper:focus-within .search-input{
width:220px;
opacity:1;
flex:0 0 220px;
border-color:#555;
}

.search-input:focus{border-color:#ff6b00;}

.login-btn{
display:flex;
align-items:center;
gap:8px;
padding:10px 18px;
background:#ffffff;
color:#000;
border-radius:30px;
font-size:14px;
font-weight:600;
transition:.3s;
}

.login-btn:hover{
background:#e0e0e0;
transform:translateY(-2px);
}

.login-text{
position:static !important;
background:none !important;
width:auto !important;
height:auto !important;
font-size:13px !important;
color:#000 !important;
}

.nav-icons{
display:flex;
align-items:center;
gap:24px;
flex-shrink:0;
}

.nav-icons a{
display:inline-flex;
color:#fff;
font-size:17px;
position:relative;
white-space:nowrap;
line-height:1;
transition:color .3s,transform .25s;
}

.nav-icons a:hover{color:#ffffff;transform:scale(1.15);}

.nav-icons span{
position:absolute;
top:-8px;
right:-10px;
width:18px;
height:18px;
border-radius:50%;
background:#e53935;
color:#fff;
font-size:10px;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
}

.menu-btn{
display:none;
color:#fff;
font-size:22px;
cursor:pointer;
}

/* Mobile nav */
.navbar.active{
display:block;
position:absolute;
top:80px;
left:0;
width:100%;
background:#050505;
padding:20px;
z-index:999;
border-bottom:1px solid rgba(255,255,255,.1);
}

.navbar.active .nav-links{
flex-direction:column;
align-items:center;
gap:18px;
}

.navbar.active .nav-links a{
font-size:15px;
padding:8px 0;
}

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

.hero{
height:980px;
position:relative;
background:#050505;
overflow:hidden;
}
.hero-img{
position:absolute;
inset:0;
background:url("../images/Hero-Image.png") no-repeat center 30%/contain, linear-gradient(180deg,#060606,#030303);
}
.hero-img .overlay{
position:absolute;
inset:0;
background:radial-gradient(circle at center,rgba(255,255,255,.09),transparent 60%);
}
.hero-content{
position:relative;
z-index:2;
height:100%;
}

.overlay{
position:absolute;
inset:0;
background:radial-gradient(circle at center,rgba(255,255,255,.09),transparent 60%);
}

.hero-wrap{
height:100%;
display:grid;
grid-template-columns:1fr;
position:relative;
z-index:20;
}

.hero-left{
display:flex;
flex-direction:column;
justify-content:center;
padding-left:40px;
}

.mini{
font-size:13px;
letter-spacing:6px;
opacity:.8;
margin-bottom:30px;
}

.hero h1{
font-size:64px;
line-height:1.1;
font-weight:700;
max-width:500px;
margin-bottom:24px;
}

.hero h1 span{display:block;}

.sub{
font-size:20px;
line-height:1.8;
opacity:.85;
max-width:520px;
}

.hero-btns{
display:flex;
gap:18px;
margin-top:40px;
}

.hero-btns a{
height:64px;
padding:0 36px;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
border-radius:3px;
transition:.35s;
}

.hero-btns a:first-child{
background:white;
color:black;
}

.hero-btns a:last-child{
border:1px solid #444;
}

.hero-btns a:hover{transform:translateY(-4px);}

.hm{
margin-top:90px;
display:flex;
align-items:center;
gap:24px;
}
.hm::before{
content:"";
width:80px;
height:1px;
background:#444;
}
.hm-img{
height:36px;
width:auto;
}
.hm-by{
font-size:16px;
color:#888;
letter-spacing:4px;
text-transform:uppercase;
font-weight:500;
}
.hm-logo{
height:34px;
opacity:.95;
}

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

.category{padding:70px 0;}

.category h2{
text-align:center;
font-size:18px;
letter-spacing:8px;
font-weight:500;
margin-bottom:50px;
}

.grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}
@media(max-width:991px){
.grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:768px){
.grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){
.grid{grid-template-columns:repeat(1,1fr);}
}

.card{
background:#080808;
border:1px solid #121212;
overflow:hidden;
transition:.4s;
}

.card:hover{
transform:translateY(-8px);
border-color:#242424;
}

.card img{
height:260px;
width:100%;
object-fit:cover;
}

.card div{
padding:18px;
font-size:18px;
font-weight:500;
}

.card small{
display:block;
margin-top:12px;
opacity:.6;
}

/* =======================
BENEFITS
======================= */

.benefits{
padding:40px 0;
border-top:1px solid #121212;
border-bottom:1px solid #121212;
}

.benefits .container{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.benefit{
display:flex;
align-items:center;
gap:18px;
}

.benefit i{font-size:38px;}

.benefit h4{
font-size:15px;
margin-bottom:6px;
}

.benefit p{opacity:.55;}

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

.products{padding:90px 0;}

.title{
display:flex;
justify-content:space-between;
margin-bottom:40px;
}

.title h2{
font-size:18px;
letter-spacing:7px;
}

.title a{color:#ddd;}

.product-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:18px;
}

.product{
transition:.35s;
}

.product:hover{transform:translateY(-6px);}

.product img{
height:340px;
width:100%;
object-fit:cover;
border-radius:4px;
}

.product h3{
font-size:18px;
margin-top:18px;
font-weight:500;
}

.product span{
display:block;
margin-top:12px;
font-size:22px;
}

.product button{
margin-top:12px;
padding:10px 0;
width:100%;
background:transparent;
border:1px solid #ffffff;
color:#ffffff;
font-size:12px;
font-weight:600;
letter-spacing:1px;
cursor:pointer;
transition:.35s;
border-radius:3px;
}

.product button:hover{
background:#ffffff;
color:#000;
}

.shop-state{
grid-column:1 / -1;
min-height:220px;
display:flex;
align-items:center;
justify-content:center;
background:#0a0a0a;
border:1px solid rgba(255,255,255,.25);
color:#bbb;
font-weight:600;
text-align:center;
padding:30px;
}

/* =======================
PRODUCT CARDS (Shop page)
======================= */

.product-card{
background:#080808;
border:1px solid #121212;
overflow:hidden;
transition:.35s;
}

.product-card:hover{
transform:translateY(-6px);
border-color:#ffffff;
}

.product-image{
position:relative;
overflow:hidden;
background:#080808;
}

.product-image img{
width:100%;
height:260px;
object-fit:cover;
transition:transform .5s;
display:block;
}

.product-card:hover img{transform:scale(1.05);}

.product-badge{
  position:absolute;
  top:12px;
  left:12px;
  background:#ffffff;
  color:#000;
  font-size:10px;
  font-weight:700;
  padding:4px 10px;
  letter-spacing:1px;
  z-index:2;
}

.p-status{
  position:absolute;
  font-size:9px;
  font-weight:700;
  padding:3px 8px;
  letter-spacing:0.5px;
  z-index:2;
  border-radius:3px;
  white-space:nowrap;
}
.p-out-of-stock{background:#ff3f3f;color:#fff;top:12px;right:12px;}
.p-limited{background:#ffc107;color:#000;top:12px;right:12px;}
.p-new{background:#38d27a;color:#000;bottom:12px;left:12px;}
.p-trending{background:#ffffff;color:#000;bottom:40px;left:12px;}
.p-hot{background:#ff3f3f;color:#fff;bottom:12px;left:12px;}
.p-trending + .p-hot{bottom:12px;left:80px;}

.product-content{
padding:14px 14px 16px;
}

.sku{display:none;}

.product-content h3{
font-size:14px;
font-weight:500;
margin-bottom:8px;
color:#e0e0e0;
line-height:1.4;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}

.price{
font-size:18px;
font-weight:700;
color:#ffffff;
margin-bottom:6px;
}

.price .orig{
font-size:13px;
font-weight:400;
color:#555;
text-decoration:line-through;
margin-left:8px;
}

.price .discount{
font-size:11px;
font-weight:600;
color:#36b37e;
margin-left:6px;
}

.product-actions{
display:flex;
gap:10px;
margin-bottom:15px;
}

.product-actions button{
flex:1;
padding:12px;
background:#0d0d0d;
border:none;
color:#fff;
cursor:pointer;
font-size:16px;
}

.product-actions button:hover{background:#ffffff;color:#000;}

.buy-now-btn{
flex:1;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
background:transparent;
color:#ffffff;
padding:11px;
font-size:11px;
font-weight:600;
border:1px solid rgba(255,255,255,.3);
letter-spacing:1px;
cursor:pointer;
transition:.3s;
text-transform:uppercase;
}

.buy-now-btn:hover{
background:#ffffff;
color:#000;
border-color:#ffffff;
}

.shop-btn-group{display:flex;gap:6px;margin-top:6px;}
.shop-btn-group .add-cart-btn{
flex:1;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
background:#ffffff;
color:#000;
padding:11px;
font-size:11px;
font-weight:700;
border:none;
letter-spacing:1px;
cursor:pointer;
transition:.3s;
text-transform:uppercase;
}
.shop-btn-group .add-cart-btn:hover{background:#e8e8e8;transform:translateY(-2px);}

/* =======================
FOOTER
======================= */

footer{
padding:80px 0;
border-top:1px solid #111;
}

.foot{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:50px;
}

.foot img{
height:48px;
margin-bottom:20px;
}

.foot h4{margin-bottom:20px;}

.foot a{
display:block;
margin-bottom:12px;
opacity:.6;
}

.foot a:hover{color:#ffffff;}

.footer p{
color:#aaa;
line-height:1.8;
margin-bottom:8px;
}

.footer-logo{
width:170px;
margin-bottom:20px;
}

.socials{
margin-top:20px;
display:flex;
gap:15px;
}

.socials a{
width:42px;
height:42px;
background:#111;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
}

.socials a:hover{background:#ffffff;}

.copyright{
text-align:center;
padding:20px;
margin-top:40px;
border-top:1px solid rgba(255,255,255,.1);
color:#777;
font-size:13px;
}

/* =======================
WHATSAPP
======================= */

.whatsapp{
position:fixed;
right:24px;
bottom:24px;
height:64px;
width:64px;
border-radius:50%;
background:#0dc143;
display:flex;
align-items:center;
justify-content:center;
font-size:32px;
z-index:999;
}

.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #25d366 0%, #128C7E 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font-size: 28px;
  z-index: 9999;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.35);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: visible;
}

.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.15);
  animation: waRipple 2.5s ease-out infinite;
}

.whatsapp-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 60%);
  pointer-events: none;
}

.whatsapp-float i {
  position: relative;
  z-index: 1;
  color: #25d366;
  font-size: 32px;
  background: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  animation: waIconPulse 2.5s ease-in-out infinite;
}

.whatsapp-float .wa-tooltip {
  position: absolute;
  right: 68px;
  background: #1a1a1a;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s ease;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.whatsapp-float .wa-tooltip::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 6px solid #1a1a1a;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.whatsapp-float .wa-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  background: #25d366;
  border-radius: 50%;
  border: 2px solid #000;
  z-index: 2;
  animation: waBadgePulse 1.5s ease-in-out infinite;
}

.whatsapp-float .wa-badge::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
}

.whatsapp-float{cursor:pointer;}
.whatsapp-float:hover {
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 10px 40px rgba(37, 211, 102, 0.45);
}

.whatsapp-float:hover i {
  animation: none;
  transform: scale(1.1);
}

.whatsapp-float:hover .wa-tooltip {
  opacity: 1;
  transform: translateX(0);
}

/* =======================
SHOP PAGE
======================= */

.shop-hero{
height:420px;
background:linear-gradient(90deg,#050505,#090909);
display:flex;
align-items:center;
border-bottom:1px solid #111;
}

.shop-text{padding-top:40px;}

.shop-text p{
color:#ffffff;
letter-spacing:2px;
margin-bottom:20px;
}

.shop-text h1{
font-size:92px;
font-weight:800;
margin-bottom:18px;
}

.shop-text span{
max-width:650px;
display:block;
font-size:20px;
opacity:.75;
line-height:1.8;
}

/* SHOP MAIN */
.shop-main{padding:90px 0;}

.shop-layout{
display:grid;
grid-template-columns:320px 1fr;
gap:50px;
}

/* FILTER */
.filters{
border:1px solid #151515;
padding:30px;
height:max-content;
position:sticky;
top:120px;
background:#070707;
}

.filters h3{
margin-bottom:40px;
font-size:28px;
}

.filters div{margin-bottom:50px;}

.filters h4{
margin-bottom:20px;
color:#ffffff;
}

.filters label{
display:block;
margin-bottom:14px;
opacity:.8;
cursor:pointer;
transition:.3s;
}

.filters label:hover{opacity:1;color:#ffffff;}

.filters input{margin-right:10px;}

/* SHOP PRODUCTS */
.shop-products{width:100%;}

.shop-head{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:40px;
}

.shop-head select{
height:48px;
background:#111;
color:white;
border:none;
padding:0 20px;
cursor:pointer;
transition:.3s;
}

.shop-head select:hover{background:#222;}

.shop-head-right{display:flex;align-items:center;gap:12px;}

.filter-toggle{
display:none;
align-items:center;
gap:6px;
height:48px;
padding:0 18px;
background:#111;
color:#fff;
border:none;
border-radius:6px;
font-size:13px;
font-weight:600;
cursor:pointer;
transition:.3s;
letter-spacing:0.5px;
}

.filter-toggle:hover{background:#222;}

.filters-panel{display:none;}

.filters-panel.open{
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:10000;
background:rgba(0,0,0,0.95);
padding:80px 24px 40px;
overflow-y:auto;
}

.filters-panel-head{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
}

.filters-panel-head h3{color:#fff;font-size:20px;}

.filters-close{
background:none;
border:none;
color:#fff;
font-size:36px;
cursor:pointer;
line-height:1;
padding:0;
}

.filters-panel-body .filters{display:block !important;}

.shop-products .product-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}

.related-products .product-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}

/* PAGINATION */
.pagination{
display:flex;
gap:16px;
margin-top:60px;
justify-content:center;
}

.pagination button{
height:55px;
width:55px;
background:#090909;
border:1px solid #222;
color:white;
cursor:pointer;
transition:.3s;
}

.pagination button:hover{background:#ffffff;}

/* =======================
COLLECTIONS PAGE
======================= */

.collection-hero{
height:520px;
display:flex;
align-items:center;
background:linear-gradient(180deg,#050505,#080808);
border-bottom:1px solid #121212;
}

.collection-hero p{
color:#ffffff;
letter-spacing:4px;
margin-bottom:26px;
}
.collection-brand{
display:flex !important;
align-items:center;
gap:16px;
letter-spacing:0 !important;
}
.coll-pehrawa{
height:30px;
}
.coll-x{
color:#ffffff;
font-size:20px;
font-weight:600;
}
.coll-hm{
height:28px;
}

.collection-hero h1{
font-size:92px;
line-height:0.95;
margin-bottom:24px;
}

.collection-hero span{
display:block;
max-width:650px;
font-size:20px;
opacity:.75;
line-height:1.8;
}

.collections-page{padding:110px 0;}

.collection-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}

.collection-box{
position:relative;
overflow:hidden;
background:#080808;
border-radius:6px;
border:1px solid #151515;
cursor:pointer;
}

.collection-box img{
height:760px;
width:100%;
object-fit:cover;
transition:.7s;
}

.collection-box:hover img{transform:scale(1.05);}

.overlay-box{
position:absolute;
left:0;
right:0;
bottom:0;
padding:50px;
background:linear-gradient(transparent,rgba(0,0,0,.92));
}

.overlay-box h3{
font-size:36px;
margin-bottom:18px;
}

.overlay-box a{
display:inline-flex;
align-items:center;
justify-content:center;
height:54px;
padding:0 32px;
border:1px solid #444;
transition:.35s;
}

.overlay-box a:hover{
background:white;
color:black;
}

.collection-cta{
padding:140px 0;
text-align:center;
border-top:1px solid #111;
}

.collection-cta h2{
font-size:70px;
margin-bottom:40px;
}

.collection-cta a{
display:inline-flex;
align-items:center;
justify-content:center;
height:68px;
padding:0 48px;
background:#ffffff;
color:#000;
font-weight:700;
transition:.35s;
}

.collection-cta a:hover{
transform:translateY(-4px);
box-shadow:0 12px 40px rgba(255,255,255,0.2);
}

/* =======================
ABOUT PAGE
======================= */

.about-hero{
height:900px;
display:flex;
align-items:center;
position:relative;
background:url("../images/about-image.png") no-repeat center/contain, linear-gradient(180deg,#050505,#080808);
border-bottom:1px solid #121212;
}
.about-caption{
position:absolute;
bottom:60px;
left:120px;
text-align:left;
font-size:16px;
color:#999;
max-width:600px;
letter-spacing:1px;
line-height:1.6;
}

.about-wrap{
display:grid;
grid-template-columns:1fr;
gap:60px;
align-items:center;
}

.about-left p{
color:#ffffff;
letter-spacing:4px;
margin-bottom:28px;
}

.about-left h1{
font-size:88px;
line-height:1;
font-weight:800;
margin-bottom:34px;
}

.about-left span{
display:block;
max-width:620px;
font-size:20px;
line-height:1.9;
opacity:.78;
}

/* STORY */
.story{padding:120px 0;}

.story-box{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
border-top:1px solid #161616;
padding-top:70px;
}

.story h2{font-size:64px;}

.story p{
font-size:20px;
line-height:2;
opacity:.8;
max-width:700px;
}

/* VALUES */
.values{padding:40px 0 120px;}

.values .container{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}

.value{
background:#080808;
padding:60px;
border:1px solid #161616;
transition:.35s;
}

.value:hover{transform:translateY(-10px);}

.value h3{
font-size:90px;
color:#ffffff;
margin-bottom:24px;
}

.value h4{
font-size:30px;
margin-bottom:18px;
}

.value p{
font-size:18px;
opacity:.7;
line-height:1.8;
}

.about-cta{
padding:140px 0;
text-align:center;
border-top:1px solid #111;
}

.about-cta h2{
font-size:72px;
margin-bottom:40px;
}

.about-cta a{
display:inline-flex;
align-items:center;
justify-content:center;
height:70px;
padding:0 48px;
background:#ffffff;
color:#000;
font-weight:700;
transition:.35s;
}

.about-cta a:hover{transform:translateY(-6px);}

/* =======================
CONTACT PAGE
======================= */

.contact-hero{
height:500px;
display:flex;
align-items:center;
background:linear-gradient(180deg,#050505,#080808);
border-bottom:1px solid #111;
}

.contact-hero p{
color:#ffffff;
letter-spacing:4px;
margin-bottom:26px;
}

.contact-hero h1{
font-size:96px;
font-weight:800;
margin-bottom:18px;
}

.contact-hero span{
display:block;
max-width:620px;
font-size:20px;
line-height:1.8;
opacity:.75;
}

.contact-section{padding:120px 0;}

.contact-grid{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:80px;
align-items:start;
}

.contact-left h2{
font-size:70px;
margin-bottom:22px;
}

.contact-left p{
font-size:18px;
opacity:.7;
line-height:1.8;
margin-bottom:60px;
}

.contact-item{
display:flex;
gap:22px;
margin-bottom:36px;
align-items:flex-start;
}

.contact-item i{
font-size:28px;
color:#ffffff;
width:42px;
}

.contact-item h4{
margin-bottom:10px;
letter-spacing:1px;
}

.contact-item span{opacity:.65;}

.contact-right{
background:#070707;
padding:60px;
border:1px solid #161616;
}

.contact-right form{
display:flex;
flex-direction:column;
gap:22px;
}

.contact-right input,
.contact-right textarea{
width:100%;
background:#0d0d0d;
border:1px solid #181818;
color:white;
padding:20px;
font-size:15px;
outline:none;
}

.contact-right input{height:64px;}

.contact-right textarea{
height:220px;
resize:none;
}

.contact-right input:focus,
.contact-right textarea:focus{border-color:#ffffff;}

.contact-right button{
height:60px;
background:#ffffff;
border:none;
color:#000;
font-weight:700;
cursor:pointer;
transition:.35s;
}

.contact-right button:hover{background:#e8e8e8;transform:translateY(-2px);}

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

.checkout-overlay{
    display:none;
    position:fixed;
    top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,.7);
    z-index:9999;
    justify-content:center;
    align-items:center;
}
.checkout-overlay.active{display:flex;}
.checkout-modal{
    background:#101010;
    border:1px solid #333;
    border-radius:10px;
    padding:30px;
    width:90%;
    max-width:420px;
    max-height:90vh;
    overflow-y:auto;
    overflow-x:hidden;
    position:relative;
    box-sizing:border-box;
}
.checkout-close{
    position:absolute;
    top:12px;right:16px;
    font-size:28px;
    color:#888;
    cursor:pointer;
}
.checkout-close:hover{color:#ffffff;}
.checkout-modal h3{
    font-size:22px;
    margin-bottom:8px;
    color:#ffffff;
}
.checkout-product{
    color:#aaa;
    font-size:14px;
    margin-bottom:16px;
    padding-bottom:12px;
    border-bottom:1px solid #222;
}
.checkout-modal form{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.checkout-modal input,
.checkout-modal select,
.checkout-modal textarea{
    padding:12px 14px;
    background:#0b0b0b;
    border:1px solid #333;
    color:#fff;
    border-radius:6px;
    font-size:14px;
    outline:none;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
}
.checkout-modal textarea{
    min-height:70px;
    resize:vertical;
}
.checkout-modal input:focus,
.checkout-modal select:focus,
.checkout-modal textarea:focus{border-color:#ffffff;}
.checkout-row{
    display:flex;
    gap:12px;
}
.checkout-row select,
.checkout-row input{flex:1;}
.checkout-submit{
    padding:14px;
    background:#ffffff;
    color:#000;
    border:none;
    border-radius:6px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}
.checkout-submit:hover{background:#d0d0d0;}

@media(max-width:480px){
  .checkout-modal{padding:20px 16px;}
  .checkout-row{flex-direction:column;gap:8px;}
}

/* =======================
BUY CHECKOUT STEPS
======================= */
.buy-summary{
    font-size:14px;
    color:#ccc;
}
.buy-summary-row{
    display:flex;
    justify-content:space-between;
    padding:4px 0;
    gap:12px;
}
.buy-summary-row span:first-child{color:#888;}
.buy-summary-row span:last-child{text-align:right;}

/* =======================
TOAST
======================= */

.toast{
position:fixed;
bottom:30px;
right:30px;
background:#ffffff;
color:#000;
padding:15px 20px;
border-radius:6px;
opacity:0;
transform:translateY(20px);
transition:.3s;
z-index:9999;
}

.toast.show{
opacity:1;
transform:translateY(0);
}

/* =======================
PROFILE
======================= */

.profile-container{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  margin-left:4px;
  align-self:center;
}
.profile-container>.profile-avatar{
  width:34px!important;
  height:34px!important;
  border-radius:50%!important;
  background:linear-gradient(135deg,#e0e0e0,#d0d0d0)!important;
  color:#fff!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  font-size:14px!important;
  font-weight:700!important;
  letter-spacing:0.5px;
  flex-shrink:0;
  position:static!important;
  top:auto!important;
  right:auto!important;
  object-fit:cover;
  margin-top:-10px;
}
.profile-container .dropdown-item{
  font-size:14px!important;
  position:static!important;
  color:#ccc!important;
}

/* =======================
ANIMATIONS
======================= */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 15px rgba(255,255,255,0.3), 0 0 30px rgba(255,255,255,0.1); }
  50%      { box-shadow: 0 0 30px rgba(255,255,255,0.5), 0 0 60px rgba(255,255,255,0.2); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-14px); }
}

@keyframes borderGlow {
  0%, 100% { border-color: rgba(255,255,255,0.15); }
  50%      { border-color: rgba(255,255,255,0.6); }
}

@keyframes gradientBg {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes textShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes neonPulse {
  0%, 100% { text-shadow: 0 0 7px rgba(255,255,255,0.3), 0 0 15px rgba(255,255,255,0.1); }
  50%      { text-shadow: 0 0 15px rgba(255,255,255,0.6), 0 0 30px rgba(255,255,255,0.3), 0 0 60px rgba(255,255,255,0.1); }
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
  25%      { transform: translateY(-30px) scale(1.1); opacity: 0.4; }
  50%      { transform: translateY(-15px) scale(0.95); opacity: 0.25; }
  75%      { transform: translateY(-40px) scale(1.05); opacity: 0.35; }
}

@keyframes waRipple {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

@keyframes waIconPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.08); opacity: 1; }
}

@keyframes waBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
}

/* =======================
RESPONSIVE
======================= */

/* =======================
RESPONSIVE
======================= */

/* === TABLET / SMALL LAPTOP === */
@media(max-width:1100px){
  nav{display:none;}
  .navbar{display:none;}
  .menu-btn{display:flex !important;}

  .hero{height:auto;}
  .hero-img{position:static;height:500px;background-size:cover;background-position:center;}
  .hero-content{padding:60px 0;}
  .hero-wrap{grid-template-columns:1fr;}
  .hero-left{padding:0 40px;align-items:flex-start;}
  .hero h1{font-size:48px;}
  .hm::before{width:50px;}
  .hm{margin-top:40px;}

  .product-grid,.benefits .container,.foot{grid-template-columns:repeat(3,1fr);}
  .shop-products .product-grid{grid-template-columns:repeat(3,1fr);}
  .product-image img{height:220px;}

  .about-wrap{grid-template-columns:1fr;}
  .about-hero{height:auto;min-height:500px;padding:80px 0;background-size:cover;background-position:center;}
  .about-left{text-align:center;align-items:center;padding:40px 20px;}
  .about-left h1{font-size:56px;}
  .about-left span{max-width:100%;}
  .about-caption{position:static;padding:20px 20px 0;text-align:center;}
  .story-box{grid-template-columns:1fr;gap:40px;}
  .story h2{font-size:42px;}
  .story{text-align:center;}
  .values .container{grid-template-columns:1fr;}
  .value{padding:40px;text-align:center;}
  .about-cta h2{font-size:40px;}

  .collection-hero{height:auto;padding:120px 0 80px;text-align:center;}
  .collection-hero h1{font-size:64px;}
  .collection-brand{justify-content:center;}
  .collection-grid{grid-template-columns:repeat(2,1fr);}
  .collection-box img{height:400px;}

  .contact-hero{height:auto;padding:120px 0 80px;text-align:center;}
  .contact-hero h1{font-size:64px;}
  .contact-grid{grid-template-columns:1fr;}

  .shop-hero{height:auto;padding:120px 0 60px;text-align:center;}
  .shop-text h1{font-size:64px;}
  .shop-layout{grid-template-columns:1fr;}
  .filters{display:none;}
  .filter-toggle{display:flex !important;}
  .filters-panel{display:none;}
  .filters-panel.open{display:block;position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;background:rgba(0,0,0,0.9);padding:80px 24px;overflow-y:auto;}

  .custom-print-hero{height:auto;padding:120px 0 60px;text-align:center;}
  .custom-print-wrap{grid-template-columns:1fr;}

  .grid{grid-template-columns:repeat(2,1fr);}
  .card img{height:200px;}

  .about-cta{padding:80px 0;}
  .collection-cta{padding:80px 0;}

  .category{padding:50px 0;}
  .category h2{margin-bottom:30px;}

  .login-wrap{grid-template-columns:1fr;}
}

/* === MOBILE LARGE === */
@media(max-width:991px){
  .logo img{width:130px;}
  .search-wrapper .search-input{display:none;}
  .search-wrapper.search-open{width:240px;}
  .search-wrapper.search-open .search-input{
    display:block;width:190px;opacity:1;margin-left:8px;
    position:static;padding:6px 12px;font-size:12px;
    background:#111;border:1px solid #555;color:#fff;border-radius:30px;outline:none;
  }
  .search-wrapper.search-open .search-icon{color:#ffffff;}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .shop-products .product-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .product-image img{height:200px;}
  .collection-grid{grid-template-columns:repeat(2,1fr);}
  .collection-box img{height:350px;}
  .grid{grid-template-columns:repeat(2,1fr);}
  .card img{height:180px;}
}

/* === MOBILE MEDIUM === */
@media(max-width:768px){
  header{padding:10px 0;}
  .nav-right{gap:12px;}
  .nav-right a,.nav-icons a{font-size:16px;}
  .nav-icons{gap:14px;}
  .logo img{width:110px;}

  .hero h1{font-size:36px;}
  .hero-img{height:360px;}
  .hero-content{padding:40px 0;}
  .hero-left{padding:0 24px;}
  .hero-btns a{height:50px;padding:0 22px;font-size:13px;}

  .hm{margin-top:36px;}
  .hm-img{height:36px;}
  .hm-by{font-size:13px;}
  .hm-logo{height:26px;}

  .grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .card img{height:160px;}
  .card div{padding:14px;font-size:15px;}
  .card small{margin-top:8px;}

  .product-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .product-image img{height:160px;}

  .shop-products .product-grid{grid-template-columns:repeat(2,1fr);}
  .shop-text h1{font-size:48px;}

  .collection-hero h1{font-size:48px;}
  .collection-grid{grid-template-columns:1fr;}
  .collection-box img{height:400px;}
  .collection-cta h2{font-size:36px;}
  .collection-cta a{height:56px;padding:0 32px;}

  .contact-hero h1{font-size:48px;}

  .benefits .container{grid-template-columns:1fr;}
  .benefit{flex-direction:column;text-align:center;padding:20px;}
  .benefit i{margin-bottom:12px;}

  .hero-btns{flex-direction:column;}
  .hero-btns a{width:100%;}
  .btn{width:100%;}

  .about-hero{min-height:400px;padding:60px 0;}
  .about-left h1{font-size:40px;}
  .about-cta h2{font-size:32px;}

  .whatsapp-float{width:48px;height:48px;font-size:22px;bottom:20px;right:20px;border-radius:14px;z-index:9999;}
  .whatsapp-float .wa-tooltip{display:none;}
  .whatsapp-float .wa-badge{width:14px;height:14px;top:-3px;right:-3px;}

  footer{padding:40px 0 20px;}
  .foot{grid-template-columns:1fr;gap:30px;}
  .foot div{padding:0;}
  .copyright{margin-top:30px;font-size:12px;}

  .custom-print-wrap{grid-template-columns:1fr;padding:0;}
  .custom-print-left{text-align:center;padding:30px;}
  .custom-print-left h1{font-size:40px;}
  .steps{grid-template-columns:1fr;}

  .shop-section{padding:40px 0;}
  .shop-head{flex-direction:column;gap:12px;align-items:flex-start;}
  .shop-head-right{width:100%;}
  .shop-head select{flex:1;}
}

/* === MOBILE SMALL === */
@media(max-width:480px){
  .shop-head{flex-direction:column;gap:8px;align-items:flex-start;}
  .shop-head-right{width:100%;flex-direction:column;gap:8px;}
  .shop-head select{width:100%;}

  .logo img{width:85px;}
  .nav-right{gap:10px;}
  .nav-right a{font-size:14px;}
  .nav-right a span,.nav-icons span{width:14px;height:14px;font-size:8px;top:-4px;right:-5px;}
  .nav-icons{gap:10px;}
  .login-btn{padding:4px 10px;font-size:11px;}
  .login-text{display:none;}
  .menu-btn{font-size:18px;}

  .hero h1{font-size:28px;}
  .hero-img{height:260px;}
  .hero-content{padding:30px 0;}
  .hero-left{padding:0 16px;}
  .mini{font-size:11px;letter-spacing:4px;margin-bottom:14px;}
  .sub{font-size:15px;line-height:1.6;}
  .hero-btns{margin-top:20px;flex-direction:column;}
  .hero-btns a{height:44px;padding:0 18px;font-size:12px;width:100%;}
  .hm{margin-top:28px;gap:12px;}
  .hm::before{width:30px;}
  .hm-img{height:22px;}
  .hm-by{font-size:10px;letter-spacing:2px;}
  .hm-logo{height:16px;}

  .category{padding:30px 0;}
  .category h2{font-size:15px;letter-spacing:5px;margin-bottom:24px;}
  .grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .card img{height:120px;}
  .card div{padding:10px;font-size:13px;}
  .card small{font-size:11px;margin-top:4px;}

  .product-grid{gap:8px;}
  .product-image img{height:140px;}
  .product-content{padding:8px 10px 10px;}
  .product-content h3{font-size:12px;margin-bottom:4px;}
  .price{font-size:14px;}
  .price .orig{font-size:11px;}
  .product-badge{font-size:9px;padding:3px 8px;}

  .shop-text h1{font-size:36px;}

  .shop-products .product-grid{grid-template-columns:repeat(2,1fr);gap:6px;}
  .product-image img{height:160px;}

  .collection-hero h1{font-size:36px;}
  .collection-box img{height:280px;}
  .collection-cta h2{font-size:28px;}
  .overlay-box{padding:24px;}
  .overlay-box h3{font-size:24px;}
  .overlay-box a{height:44px;padding:0 20px;font-size:13px;}

  .contact-hero h1{font-size:36px;}

  .about-left h1{font-size:32px;}
  .about-cta h2{font-size:24px;}
  .about-cta a{height:52px;padding:0 28px;font-size:14px;}

  .story{padding:30px 0;}
  .story h2{font-size:30px;}

  .collection-cta{padding:50px 0;}
  .about-cta{padding:50px 0;}

  .whatsapp-float{width:42px;height:42px;font-size:18px;bottom:14px;right:14px;z-index:9999;}
  .whatsapp-float .wa-badge{width:12px;height:12px;top:-2px;right:-2px;}

  .custom-print-left{padding:20px;}
  .custom-print-left h1{font-size:32px;}
  .custom-print-left p{font-size:15px;}
  .step{padding:16px;}
  .step .num{width:36px;height:36px;font-size:14px;}

  .shop-section{padding:24px 0;}
  .pagination{gap:6px;}
  .pagination button{width:32px;height:32px;font-size:12px;}

  .custom-grid{grid-template-columns:1fr !important;gap:30px !important;}
  .custom-left{flex-direction:column;text-align:center;align-items:center;}
  .custom-right .step{flex-direction:column !important;align-items:center !important;text-align:center !important;gap:10px !important;margin-bottom:18px !important;}
  .custom-right .step span{width:42px !important;height:42px !important;min-width:42px !important;font-size:16px;}
}

.custom-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
}

/* Mobile Slide Menu */
.mobile-menu-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  z-index:9997;
}
.mobile-menu-overlay.open{display:block;}
.mobile-menu{
  position:fixed;
  top:0;
  left:-300px;
  width:280px;
  height:100vh;
  background:rgba(10,10,10,0.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:80px 30px;
  transition:.4s;
  z-index:9998;
  border-right:1px solid rgba(255,255,255,0.08);
}
.mobile-menu.open{left:0;}
.mobile-menu ul{list-style:none;display:flex;flex-direction:column;gap:24px;}
.mobile-menu ul li a{color:#fff;font-size:16px;font-weight:500;letter-spacing:2px;}
.mobile-menu ul li a:hover{color:#ffffff;padding-left:8px;}
.mobile-menu-close{
  position:absolute;
  top:24px;right:24px;
  font-size:28px;
  color:#fff;
  cursor:pointer;
  background:none;border:none;
}
.mobile-menu-close:hover{color:#ffffff;}

/* =======================
SCROLL PROGRESS
======================= */
.scroll-progress{
    position:fixed;
    top:0;left:0;
    height:3px;
    background:linear-gradient(90deg,#ffffff,#e0e0e0);
    z-index:99999;
    width:0;
    transition:width .1s linear;
}

/* =======================
PAGE TRANSITION
======================= */
.page-exit{
    opacity:0;
    transform: scale(0.98);
    filter: blur(2px);
    transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
}

/* =======================
GRADIENT TEXT
======================= */
.gradient-text {
  background: linear-gradient(135deg, #ffffff, #e0e0e0, #f0f0f0, #ffffff);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 4s linear infinite;
}

/* =======================
HEADER GLASS
======================= */
.header-glass {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.4s;
}

/* =======================
REVEAL
======================= */
.card,.product,.benefit,.value,.collection-box,.product-card,
.feature-box,.step,.process-card,.custom-left,.custom-right,
.shop-banner,.category-head,.footer-col,.why-card,
.custom-hero,.custom-form-box,.about-content,.contact-content{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.revealed{
  opacity:1 !important;
  transform:translateY(0) !important;
}
.nav-disabled{
  color:#555 !important;
  cursor:default !important;
  pointer-events:none;
  position:relative;
}
.nav-disabled .cs-badge{
  font-size:9px;
  background:#ffffff;
  color:#000;
  padding:1px 5px;
  border-radius:3px;
  font-style:normal;
  font-weight:600;
  margin-left:4px;
  vertical-align:middle;
}
.cs-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.85);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}
.cs-overlay h2{
  font-size:64px;
  font-weight:800;
  color:#ffffff;
  margin-bottom:12px;
}
.cs-overlay p{
  color:#aaa;
  font-size:18px;
}