/* ==========================================================
        PRIME ELECTRICAL & HARDWARE SHOP
        SHOP.CSS
        Developed by PrimeAIHub Technologies
========================================================== */

/* ================= GOOGLE FONT ================= */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Poppins:wght@300;400;500;600;700&display=swap');


/* ================= ROOT VARIABLES ================= */

:root{

--primary:#00D9FF;
--secondary:#0099FF;
--accent:#00FFC8;

--bg:#050816;
--card:#0B1224;
--card2:#111B31;

--white:#ffffff;
--text:#cfd8e6;

--border:rgba(255,255,255,.08);

--shadow:0 15px 40px rgba(0,0,0,.35);

--radius:18px;

--transition:.35s ease;

}


/* ================= RESET ================= */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;

background:var(--bg);

color:var(--white);

overflow-x:hidden;

}


/* ================= SCROLLBAR ================= */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#08101f;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(

180deg,

var(--primary),

var(--secondary)

);

border-radius:20px;

}


/* ================= LINKS ================= */

a{

text-decoration:none;

color:inherit;

}

img{

max-width:100%;

display:block;

}


/* ==================================================
                OFFER BAR
================================================== */

.offer-banner{

width:100%;

height:42px;

background:#021120;

overflow:hidden;

border-bottom:1px solid var(--border);

display:flex;

align-items:center;

}

.offer-track{

display:flex;

align-items:center;

gap:80px;

white-space:nowrap;

padding-left:100%;

animation:offerScroll 35s linear infinite;

font-size:14px;

font-weight:500;

color:#00F7FF;

}

.offer-track span{

display:flex;

align-items:center;

gap:8px;

}

@keyframes offerScroll{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-100%);

}

}


/* ==================================================
                NAVBAR
================================================== */

.navbar{

position:sticky;

top:0;

z-index:999;

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 6%;

background:rgba(8,12,24,.92);

backdrop-filter:blur(15px);

border-bottom:1px solid var(--border);

}

.logo img{

height:58px;

}

.nav-links{

display:flex;

gap:35px;

list-style:none;

}

.nav-links a{

font-size:15px;

font-weight:500;

transition:var(--transition);

position:relative;

}

.nav-links a:hover{

color:var(--primary);

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--primary);

transition:.3s;

}

.nav-links a:hover::after{

width:100%;

}

.mobile-menu{

display:none;

font-size:28px;

cursor:pointer;

color:var(--primary);

}

.cart-icon{

position:relative;

font-size:24px;

cursor:pointer;

color:var(--primary);

}

.cart-icon span{

position:absolute;

top:-10px;

right:-12px;

width:22px;

height:22px;

border-radius:50%;

background:#ff3b3b;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:12px;

font-weight:700;

}


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

.shop-hero{

min-height:340px;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

padding:90px 20px;

position:relative;

overflow:hidden;

background:

linear-gradient(

135deg,

rgba(0,217,255,.10),

rgba(0,0,0,.75)

),

url("assets/images/shop-bg.jpg")

center/cover;

}

.shop-overlay{

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

rgba(0,0,0,.2),

rgba(5,8,22,.9)

);

}

.shop-content{

position:relative;

z-index:2;

max-width:900px;

}

.shop-content h1{

font-family:'Orbitron',sans-serif;

font-size:52px;

margin-bottom:18px;

color:#fff;

}

.shop-content p{

font-size:18px;

color:var(--text);

margin-bottom:45px;

line-height:1.8;

}

.hero-stats{

display:flex;

justify-content:center;

gap:50px;

flex-wrap:wrap;

}

.hero-stats div{

background:rgba(255,255,255,.05);

padding:22px 34px;

border-radius:16px;

border:1px solid var(--border);

backdrop-filter:blur(12px);

min-width:140px;

}

.hero-stats h3{

font-size:34px;

color:var(--primary);

margin-bottom:6px;

}

.hero-stats p{

margin:0;

font-size:14px;

color:#d0d8e5;

}

/* ==========================================================
                    SEARCH & FILTER
========================================================== */

.shop-toolbar{

width:100%;

padding:45px 6%;

display:flex;

justify-content:space-between;

align-items:center;

gap:25px;

flex-wrap:wrap;

background:#07111f;

border-bottom:1px solid var(--border);

}

.search-box{

flex:1;

min-width:300px;

position:relative;

}

.search-box i{

position:absolute;

left:18px;

top:50%;

transform:translateY(-50%);

color:var(--primary);

font-size:18px;

}

.search-box input{

width:100%;

height:58px;

padding:0 20px 0 52px;

background:rgba(255,255,255,.05);

border:1px solid var(--border);

border-radius:50px;

color:#fff;

font-size:15px;

outline:none;

transition:.35s;

}

.search-box input:focus{

border-color:var(--primary);

box-shadow:0 0 20px rgba(0,217,255,.25);

}

.search-box input::placeholder{

color:#9ca8bb;

}


/* ================= FILTERS ================= */

.filters{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.filters select{

height:58px;

padding:0 18px;

min-width:190px;

background:#111b31;

color:#fff;

border:1px solid var(--border);

border-radius:12px;

font-size:15px;

cursor:pointer;

outline:none;

transition:.3s;

}

.filters select:hover{

border-color:var(--primary);

}

.filters select:focus{

border-color:var(--primary);

box-shadow:0 0 18px rgba(0,217,255,.25);

}


/* ==========================================================
                    PRODUCT SECTION
========================================================== */

.products-section{

padding:80px 6%;

background:#050816;

}

.section-title{

text-align:center;

margin-bottom:55px;

}

.section-title h2{

font-family:'Orbitron',sans-serif;

font-size:40px;

margin-bottom:15px;

color:#fff;

}

.section-title p{

max-width:650px;

margin:auto;

color:#bfc7d7;

font-size:16px;

line-height:1.8;

}


/* ==========================================================
                    PRODUCT GRID
========================================================== */

.product-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:30px;

align-items:stretch;

}


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

.category-heading{

font-family:'Orbitron',sans-serif;

font-size:28px;

margin:70px 0 30px;

color:var(--primary);

border-left:5px solid var(--primary);

padding-left:15px;

}


/* ==========================================================
                    EMPTY SEARCH
========================================================== */

.no-products{

grid-column:1/-1;

padding:80px 20px;

text-align:center;

background:#0b1224;

border:1px solid var(--border);

border-radius:18px;

}

.no-products i{

font-size:70px;

color:var(--primary);

margin-bottom:20px;

}

.no-products h3{

font-size:28px;

margin-bottom:10px;

}

.no-products p{

color:#bfc7d7;

}


/* ==========================================================
                    SECTION SPACING
========================================================== */

.shop-products{

margin-top:30px;

}

.shop-products:last-child{

padding-bottom:100px;

}

/* ==========================================================
                    PRODUCT CARD
========================================================== */

.product-card{

background:linear-gradient(180deg,#0d172c,#08111f);

border:1px solid rgba(255,255,255,.08);

border-radius:20px;

overflow:hidden;

transition:.35s;

position:relative;

box-shadow:0 15px 35px rgba(0,0,0,.35);

display:flex;

flex-direction:column;

}

.product-card:hover{

transform:translateY(-10px);

border-color:var(--primary);

box-shadow:

0 15px 40px rgba(0,217,255,.20),

0 0 25px rgba(0,217,255,.15);

}


/* ================= PRODUCT IMAGE ================= */

.product-card img{

width:100%;

height:240px;

object-fit:contain;

padding:25px;

background:#fff;

transition:.35s;

}

.product-card:hover img{

transform:scale(1.06);

}


/* ================= BADGE ================= */

.product-badge{

position:absolute;

top:15px;

left:15px;

padding:7px 14px;

border-radius:30px;

font-size:12px;

font-weight:600;

background:linear-gradient(135deg,#00D9FF,#008CFF);

color:#fff;

z-index:5;

box-shadow:0 5px 20px rgba(0,217,255,.4);

}


/* ================= PRODUCT INFO ================= */

.product-info{

padding:22px;

display:flex;

flex-direction:column;

flex:1;

}

.product-info .brand{

font-size:13px;

color:#00D9FF;

font-weight:600;

margin-bottom:8px;

text-transform:uppercase;

letter-spacing:1px;

}

.product-info h3{

font-size:21px;

font-weight:600;

line-height:1.4;

margin-bottom:12px;

color:#fff;

min-height:55px;

}

.product-info h4{

font-size:28px;

font-weight:700;

color:#00FFC8;

margin-bottom:22px;

}


/* ================= STOCK ================= */

.stock{

display:inline-flex;

align-items:center;

gap:6px;

font-size:14px;

color:#82ff82;

margin-bottom:20px;

font-weight:500;

}

.stock i{

font-size:12px;

}


/* ================= QUANTITY ================= */

.quantity{

display:flex;

align-items:center;

justify-content:center;

margin-bottom:22px;

border:1px solid rgba(255,255,255,.08);

border-radius:50px;

overflow:hidden;

height:50px;

background:#111b31;

}

.quantity button{

width:52px;

height:50px;

border:none;

background:transparent;

color:#fff;

font-size:24px;

cursor:pointer;

transition:.3s;

}

.quantity button:hover{

background:var(--primary);

color:#05101c;

}

.quantity input{

width:70px;

height:50px;

border:none;

background:transparent;

text-align:center;

font-size:18px;

color:#fff;

font-weight:600;

outline:none;

}


/* Remove arrows */

.quantity input::-webkit-inner-spin-button,

.quantity input::-webkit-outer-spin-button{

-webkit-appearance:none;

margin:0;

}


/* ================= BUTTON ================= */

.add-cart{

width:100%;

height:54px;

border:none;

border-radius:12px;

background:linear-gradient(

135deg,

#00D9FF,

#008CFF

);

color:#fff;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.35s;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

margin-top:auto;

}

.add-cart:hover{

transform:translateY(-3px);

box-shadow:

0 10px 25px rgba(0,217,255,.45);

}

.add-cart i{

font-size:17px;

}


/* ================= QUICK ACTIONS ================= */

.product-card::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:4px;

background:linear-gradient(

90deg,

#00D9FF,

#00FFC8

);

transform:scaleX(0);

transition:.35s;

transform-origin:left;

}

.product-card:hover::after{

transform:scaleX(1);

}


/* ================= IMAGE HOVER ================= */

.product-card:hover .product-info h3{

color:#00D9FF;

transition:.35s;

}


/* ================= PRICE ANIMATION ================= */

.product-card:hover h4{

transform:scale(1.05);

transition:.35s;

}

/* ==========================================================
                    CART DRAWER
========================================================== */

.cart-drawer{

position:fixed;

top:0;

right:-420px;

width:400px;

max-width:100%;

height:100vh;

background:#08111f;

box-shadow:-10px 0 40px rgba(0,0,0,.45);

z-index:9999;

display:flex;

flex-direction:column;

transition:.4s ease;

overflow:hidden;

}

.cart-drawer.active{

right:0;

}


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

.cart-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:22px;

border-bottom:1px solid rgba(255,255,255,.08);

background:#0d172c;

}

.cart-header h2{

font-size:24px;

color:#fff;

}

.close-cart{

width:42px;

height:42px;

border:none;

border-radius:50%;

background:#111b31;

color:#fff;

cursor:pointer;

font-size:18px;

transition:.3s;

}

.close-cart:hover{

background:#ff4040;

}


/* ================= CART ITEMS ================= */

.cart-items{

flex:1;

overflow-y:auto;

padding:20px;

}

.cart-item{

display:flex;

gap:15px;

padding:15px;

margin-bottom:15px;

background:#111b31;

border-radius:15px;

border:1px solid rgba(255,255,255,.06);

}

.cart-item img{

width:75px;

height:75px;

object-fit:contain;

background:#fff;

border-radius:10px;

padding:6px;

}

.cart-details{

flex:1;

}

.cart-details h4{

font-size:16px;

margin-bottom:5px;

color:#fff;

}

.cart-details p{

font-size:14px;

color:#9fb0c5;

margin-bottom:5px;

}

.cart-price{

font-size:18px;

font-weight:700;

color:#00FFC8;

}


/* ================= REMOVE BUTTON ================= */

.remove-item{

margin-top:10px;

background:#ff4444;

border:none;

color:#fff;

padding:7px 14px;

border-radius:8px;

cursor:pointer;

font-size:13px;

transition:.3s;

}

.remove-item:hover{

background:#ff0000;

}


/* ================= CART TOTAL ================= */

.cart-total{

padding:20px;

border-top:1px solid rgba(255,255,255,.08);

background:#0d172c;

}

.cart-total h3{

display:flex;

justify-content:space-between;

font-size:24px;

color:#00FFC8;

}


/* ================= CUSTOMER FORM ================= */

.customer-form{

padding:20px;

display:flex;

flex-direction:column;

gap:15px;

background:#08111f;

}

.customer-form input,

.customer-form textarea{

width:100%;

padding:14px 16px;

border-radius:12px;

border:1px solid rgba(255,255,255,.08);

background:#111b31;

color:#fff;

font-size:15px;

outline:none;

transition:.3s;

}

.customer-form textarea{

resize:none;

height:100px;

}

.customer-form input:focus,

.customer-form textarea:focus{

border-color:#00D9FF;

box-shadow:0 0 15px rgba(0,217,255,.2);

}


/* ================= CHECKOUT BUTTON ================= */

.checkout-btn{

width:100%;

height:56px;

border:none;

border-radius:12px;

background:#25D366;

color:#fff;

font-size:17px;

font-weight:600;

cursor:pointer;

display:flex;

justify-content:center;

align-items:center;

gap:12px;

transition:.35s;

}

.checkout-btn:hover{

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(37,211,102,.35);

}


/* ================= CART OVERLAY ================= */

.cart-overlay{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,.65);

backdrop-filter:blur(4px);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:9998;

}

.cart-overlay.active{

opacity:1;

visibility:visible;

}


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

.toast{

position:fixed;

bottom:25px;

left:50%;

transform:translateX(-50%);

padding:15px 25px;

background:#00D9FF;

color:#05101c;

font-weight:600;

border-radius:50px;

box-shadow:0 15px 35px rgba(0,217,255,.35);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:99999;

}

.toast.show{

opacity:1;

visibility:visible;

transform:translate(-50%,-10px);

}

/* ==========================================================
                    FLOATING BUTTONS
========================================================== */

.floating-whatsapp,
.floating-call,
.scroll-top{

position:fixed;

right:25px;

width:60px;

height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:26px;

color:#fff;

text-decoration:none;

cursor:pointer;

border:none;

z-index:999;

transition:.35s;

box-shadow:0 10px 30px rgba(0,0,0,.35);

}

.floating-whatsapp{

bottom:30px;

background:#25D366;

}

.floating-call{

bottom:105px;

background:#008CFF;

}

.scroll-top{

bottom:180px;

background:#00D9FF;

color:#05101c;

}

.floating-whatsapp:hover,
.floating-call:hover,
.scroll-top:hover{

transform:translateY(-6px) scale(1.08);

}


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

.footer{

margin-top:80px;

padding:60px 6% 30px;

background:#07111f;

border-top:1px solid rgba(255,255,255,.08);

text-align:center;

}

.footer-logo{

height:70px;

margin:auto;

margin-bottom:20px;

}

.footer h3{

font-size:24px;

margin-bottom:10px;

color:#fff;

}

.footer p{

color:#bfc7d7;

margin-bottom:8px;

line-height:1.8;

}

.footer strong{

color:#00D9FF;

}

.footer-links{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

margin:25px 0;

}

.footer-links a{

color:#d6dce8;

transition:.3s;

}

.footer-links a:hover{

color:#00D9FF;

}


/* ==========================================================
                    LOADER
========================================================== */

.loader{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:#050816;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

transition:.4s;

}

.loader.hide{

opacity:0;

visibility:hidden;

}

.loader-circle{

width:70px;

height:70px;

border-radius:50%;

border:5px solid rgba(255,255,255,.15);

border-top-color:#00D9FF;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}


/* ==========================================================
                    MOBILE MENU
========================================================== */

.mobile-menu{

display:none;

cursor:pointer;

font-size:28px;

color:#00D9FF;

}


/* ==========================================================
                    TABLET
========================================================== */

@media(max-width:992px){

.shop-content h1{

font-size:42px;

}

.hero-stats{

gap:25px;

}

.product-grid{

grid-template-columns:

repeat(2,1fr);

}

.nav-links{

gap:18px;

}

}


/* ==========================================================
                    MOBILE
========================================================== */

@media(max-width:768px){

.navbar{

padding:16px 20px;

}

.nav-links{

display:none;

}

.mobile-menu{

display:block;

}

.shop-hero{

padding:80px 20px;

min-height:280px;

}

.shop-content h1{

font-size:32px;

line-height:1.3;

}

.shop-content p{

font-size:15px;

}

.hero-stats{

flex-direction:column;

gap:15px;

}

.shop-toolbar{

padding:30px 20px;

}

.search-box{

min-width:100%;

}

.filters{

width:100%;

flex-direction:column;

}

.filters select{

width:100%;

}

.product-grid{

grid-template-columns:1fr;

gap:22px;

}

.product-card img{

height:220px;

}

.cart-drawer{

width:100%;

right:-100%;

}

.footer{

padding:50px 20px;

}

.floating-whatsapp,
.floating-call,
.scroll-top{

right:18px;

width:55px;

height:55px;

font-size:22px;

}

.scroll-top{

bottom:165px;

}

.floating-call{

bottom:95px;

}

.floating-whatsapp{

bottom:25px;

}

}


/* ==========================================================
                SMALL MOBILE
========================================================== */

@media(max-width:480px){

.shop-content h1{

font-size:27px;

}

.section-title h2{

font-size:30px;

}

.product-info h3{

font-size:18px;

min-height:auto;

}

.product-info h4{

font-size:24px;

}

.quantity{

height:46px;

}

.quantity button{

width:46px;

height:46px;

}

.quantity input{

height:46px;

}

.add-cart{

height:50px;

font-size:15px;

}

}

.cart-qty{

display:flex;
align-items:center;
gap:12px;
margin:10px 0;

}

.cart-qty button{

width:32px;
height:32px;
border:none;
background:#00D9FF;
color:#05101c;
font-size:18px;
font-weight:bold;
border-radius:8px;
cursor:pointer;
transition:.3s;

}

.cart-qty button:hover{

transform:scale(1.08);

}

.cart-qty span{

min-width:24px;
text-align:center;
font-size:18px;
font-weight:600;
}