/* =========================================================
   GADGETMOBI — iPad SUB-CATEGORY
   Same brand language as GadgetMobi, but intentionally
   different from the main Apple / Trending Collection pages.
   ========================================================= */

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

:root{
    --orange:#dc7123;
    --orange-dark:#c85f16;
    --dark:#464646;
    --dark2:#252525;
    --cream:#f4f1ea;
    --white:#fff;
    --text:#2d2d2d;
    --muted:#777;
    --border:#e8e3da;
    --shadow:0 12px 35px rgba(0,0,0,.08);
    --transition:.35s ease;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:'Poppins',sans-serif;
    color:var(--text);
    background:var(--cream);
    overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit}
.container{width:min(1200px,92%);margin:auto}

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

header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(14px);
    border-bottom:1px solid #eee;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
}

.navbar{
    min-height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.logo{
    display:flex;
    align-items:center;
    gap:2px;
    flex-shrink:0;
}
.logo img{width:65px;height:50px;object-fit:contain}
.logo-text h2{
    font-size:30px;
    line-height:1.1;
    color:var(--dark);
}
.logo-text h2 span{color:var(--orange)}
.logo-text p{font-size:15px;color:#888}

.nav-links{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    flex:1;
}
.nav-links a{
    position:relative;
    padding:12px 14px;
    color:#444;
    font-size:16px;
    font-weight:600;
    transition:.3s;
}
.nav-links a:hover,
.nav-links a.active{color:var(--orange)}
.nav-links a::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:3px;
    height:3px;
    border-radius:10px;
    background:var(--orange);
    transform:scaleX(0);
    transition:.3s;
}
.nav-links a:hover::after,
.nav-links a.active::after{transform:scaleX(1)}

.header-right{
    display:flex;
    align-items:center;
    gap:10px;
}
.call-btn,.whatsapp-btn,.login-btn,.cart-btn{
    width:46px;
    height:46px;
    border:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    position:relative;
    transition:.3s;
}
.call-btn{background:var(--dark);color:#fff}
.whatsapp-btn{background:#20c96b;color:#fff}
.login-btn{background:#f1eee8;color:var(--dark)}
.header-right .cart-btn{background:var(--orange);color:#fff}
.call-btn:hover,.whatsapp-btn:hover,.login-btn:hover,.cart-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 9px 20px rgba(0,0,0,.15);
}
.header-right .cart-btn span{
    position:absolute;
    top:-5px;
    right:-4px;
    min-width:20px;
    height:20px;
    padding:0 5px;
    border-radius:20px;
    background:#252525;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:700;
}

/* ================= UNIQUE IPAD HERO ================= */

.hero{
    position:relative;
    overflow:hidden;
    padding:72px 0 76px;
    background:
        radial-gradient(circle at 88% 20%,rgba(220,113,35,.28),transparent 28%),
        linear-gradient(120deg,#252525 0%,#3e3e3e 48%,#9b5a32 100%);
}
.hero::after{
    content:"";
    position:absolute;
    width:430px;
    height:430px;
    right:-180px;
    bottom:-260px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
}
.hero-content{
    width:min(1200px,92%);
    margin:auto;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:65px;
    position:relative;
    z-index:2;
}
.hero-left{color:#fff}
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:9px 16px;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(255,255,255,.10);
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    margin-bottom:22px;
    backdrop-filter:blur(10px);
}
.hero-badge i{color:#fff}

.hero h1{
    font-size:58px;
    line-height:1.08;
    font-weight:800;
    letter-spacing:-1.5px;
    margin-bottom:20px;
}
.hero h1 span{color:#ffab67}

.hero-subtitle{
    max-width:650px;
    color:#eee;
    font-size:17px;
    line-height:1.8;
    margin-bottom:25px;
}

.hero-highlights{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:30px;
}
.hero-highlights div{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:13px;
    color:#f5f5f5;
}
.hero-highlights i{color:#ffab67}

.hero-buttons{
    display:flex;
    gap:13px;
    flex-wrap:wrap;
}
.btn-primary,.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:14px 24px;
    border-radius:13px;
    font-weight:700;
    transition:.3s;
}
.btn-primary{
    background:#fff;
    color:var(--orange);
}
.btn-primary:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 30px rgba(0,0,0,.25);
}
.btn-secondary{
    border:1px solid rgba(255,255,255,.55);
    color:#fff;
    background:rgba(255,255,255,.06);
}
.btn-secondary:hover{
    background:#fff;
    color:var(--dark);
}

.hero-right{
    display:flex;
    justify-content:center;
}
.ipad-visual{
    width:min(470px,100%);
    padding:28px 30px 24px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:32px;
    background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
    box-shadow:0 25px 60px rgba(0,0,0,.28);
    backdrop-filter:blur(12px);
    transform:rotate(1deg);
    transition:.4s;
}
.ipad-visual:hover{
    transform:rotate(0) translateY(-7px);
}
.visual-label{
    color:#fff;
    font-size:12px;
    font-weight:600;
    letter-spacing:1px;
    margin-bottom:10px;
}
.ipad-visual img{
    width:100%;
    height:310px;
    object-fit:contain;
    filter:drop-shadow(0 25px 25px rgba(0,0,0,.38));
    animation:ipadFloat 5s ease-in-out infinite;
}
.visual-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#fff;
    border-top:1px solid rgba(255,255,255,.18);
    padding-top:15px;
    margin-top:5px;
    font-size:13px;
}
.visual-bottom i{font-size:22px}

@keyframes ipadFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-9px)}
}

/* ================= CATALOG ================= */

.catalog-section{
    background:var(--cream);
    padding:58px 0 85px;
}
.catalog-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:25px;
    margin-bottom:25px;
}
.catalog-kicker{
    color:var(--orange);
    font-size:13px;
    font-weight:700;
}
.catalog-head h2{
    color:#282828;
    font-size:34px;
    line-height:1.2;
    margin:5px 0 7px;
}
.catalog-head p{
    color:#777;
    font-size:14px;
}
.catalog-count{
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 15px;
    border:1px solid var(--border);
    border-radius:30px;
    background:#fff;
    color:#666;
    font-size:12px;
    white-space:nowrap;
}
.catalog-count i{color:var(--orange)}

.search-container{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:30px;
    padding:0;
}
.search-wrap{
    position:relative;
    flex:1;
}
.search-wrap>i{
    position:absolute;
    left:19px;
    top:50%;
    transform:translateY(-50%);
    color:var(--orange);
}
.search{
    width:100%;
    height:54px;
    padding:0 20px 0 48px;
    border:1px solid var(--border);
    outline:none;
    border-radius:15px;
    background:#fff;
    box-shadow:0 7px 22px rgba(0,0,0,.05);
    color:#333;
}
.search:focus{
    border-color:var(--orange);
    box-shadow:0 0 0 4px rgba(220,113,35,.10);
}
.cartBtn{
    height:54px;
    padding:0 20px;
    border-radius:15px;
    display:flex;
    align-items:center;
    gap:9px;
    background:var(--dark);
    color:#fff;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
    white-space:nowrap;
}
.cartBtn:hover{
    background:var(--orange);
    transform:translateY(-2px);
}

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

.products{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px;
}

.card{
    position:relative;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--border);
    border-radius:22px;
    box-shadow:var(--shadow);
    transition:.35s;
}
.card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:4px;
    background:var(--orange);
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s;
    z-index:2;
}
.card:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 45px rgba(0,0,0,.14);
}
.card:hover::before{transform:scaleX(1)}

.card img{
    width:100%;
    height:235px;
    object-fit:contain;
    padding:22px;
    background:#faf9f6;
    transition:.35s;
}
.card:hover img{transform:scale(1.045)}

.cardContent{padding:18px}
.card h3{
    color:#333;
    font-size:17px;
    line-height:1.45;
    margin-bottom:9px;
}
.card del{color:#999;font-size:13px}
.card .sale{
    color:var(--orange);
    font-size:21px;
    font-weight:700;
    margin:8px 0 13px;
}
.card button.eye{
    width:100%;
    padding:12px;
    border:0;
    border-radius:12px;
    background:linear-gradient(135deg,#2d2d2d,#464646);
    color:#fff;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}
.card button.eye:hover{
    background:linear-gradient(135deg,var(--orange),#f58a2d);
}
.badge,.saleBadge{
    position:absolute;
    top:13px;
    padding:6px 10px;
    border-radius:30px;
    color:#fff;
    font-size:10px;
    font-weight:600;
    z-index:3;
}
.badge{left:13px;background:#464646}
.saleBadge{
    right:13px;
    background:var(--orange);
    box-shadow:0 6px 15px rgba(220,113,35,.28);
}

/* ================= POPUPS / EXISTING FUNCTIONALITY ================= */

.popup,.cartPopup,.checkoutPopup,.installmentPopup,.orderPopup,.installmentOrderPopup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    backdrop-filter:blur(5px);
}
.popup-box,.install-box,.orderBox{
    background:#fff;
    width:90%;
    max-width:950px;
    border-radius:25px;
    padding:25px;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
    overflow-y:auto;
    max-height:90vh;
}
.popup .gallery{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.popup .gallery img{
    width:80px;
    height:80px;
    object-fit:cover;
    border-radius:14px;
    cursor:pointer;
    border:2px solid transparent;
    transition:.3s;
}
.popup .gallery img:hover{
    border-color:var(--orange);
    transform:scale(1.05);
}
.imgWrapper{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    overflow:hidden;
    border-radius:20px;
    background:#fff;
}
#mainImg{
    max-width:100%;
    max-height:450px;
    object-fit:contain;
    transition:transform .35s ease;
}
.imgWrapper:hover #mainImg{transform:scale(1.7)}
.imgWrapper::after{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
    transition:.7s;
}
.imgWrapper:hover::after{left:100%}

.actions button,.installBtn,.whatsappBtn{
    padding:14px 20px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    transition:.3s;
}
.actions button:first-child{
    background:#252525;
    color:#fff;
}
.actions button:first-child:hover{
    background:var(--orange);
    transform:translateY(-2px);
}
.installBtn{
    background:linear-gradient(135deg,var(--orange),#f58a2d);
    color:#fff;
}
.installBtn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(220,113,35,.25);
}

.cartPopup .popup-box{max-width:1100px}
.cartPopup table{
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
}
.cartPopup th{
    background:#252525;
    color:#fff;
    padding:15px;
    text-align:left;
}
.cartPopup td{
    padding:15px;
    border-bottom:1px solid #eee;
}
.deleteBtn{
    background:#ff4444;
    color:#fff;
    border:0;
    width:35px;
    height:35px;
    border-radius:50%;
    cursor:pointer;
}
#grandTotal{
    margin-top:20px;
    text-align:right;
    font-size:24px;
    font-weight:700;
    color:var(--orange);
}
.cartPopup .installBtn{margin-top:15px;margin-right:10px}
.cartPopup button{padding:12px 18px;border:0;border-radius:12px}

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

.footer{
    background:#292929;
    color:#ddd;
    padding:70px 0 25px;
}
.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.3fr;
    gap:45px;
}
.footer-logo{
    font-size:30px;
    color:#fff;
    margin-bottom:18px;
}
.footer-logo span{color:var(--orange)}
.footer-col p{
    color:#bbb;
    line-height:1.9;
    margin-bottom:25px;
}
.footer-col h3{
    color:#fff;
    font-size:18px;
    margin-bottom:22px;
    position:relative;
}
.footer-col h3::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:42px;
    height:3px;
    background:var(--orange);
    border-radius:20px;
}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col ul li{margin-bottom:12px}
.footer-col ul li a{
    color:#aaa;
    transition:.3s;
}
.footer-col ul li a:hover{
    color:var(--orange);
    padding-left:5px;
}
.footer-col ul li i{color:var(--orange);margin-right:9px}
.footer-social{display:flex;gap:10px}
.footer-social a{
    width:40px;
    height:40px;
    border-radius:50%;
    background:#373737;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:.3s;
}
.footer-social a:hover{
    background:var(--orange);
    transform:translateY(-4px);
}
.footer hr{
    margin:45px 0 22px;
    border:0;
    height:1px;
    background:#444;
}
.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}
.footer-bottom p{color:#999}
.footer-links{display:flex;gap:24px}
.footer-links a{
    color:#999;
    position:relative;
    transition:.3s;
}
.footer-links a:hover{color:var(--orange)}
.footer-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0;
    height:2px;
    background:var(--orange);
    transition:.3s;
}
.footer-links a:hover::after{width:100%}

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

@media(max-width:1050px){
    .products{grid-template-columns:repeat(3,minmax(0,1fr))}
    .hero-content{grid-template-columns:1fr  .8fr;gap:35px}
    .hero h1{font-size:48px}
    .nav-links{gap:0}
    .nav-links a{padding:12px 9px}
}

@media(max-width:850px){
    .navbar{min-height:78px}
    .logo img{width:55px}
    .logo-text h2{font-size:25px}
    .logo-text p{font-size:12px}
    .header-right{gap:6px}
    .call-btn,.whatsapp-btn,.login-btn,.cart-btn{width:42px;height:42px}
    .hero-content{grid-template-columns:1fr;text-align:center}
    .hero-left{display:flex;flex-direction:column;align-items:center}
    .hero-right{order:-1}
    .ipad-visual{max-width:420px}
    .hero-highlights{justify-content:center}
    .catalog-head{align-items:flex-start;flex-direction:column}
    .catalog-count{align-self:flex-start}
    .products{grid-template-columns:repeat(2,minmax(0,1fr))}
    .footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:650px){
    .container{width:min(94%,1200px);padding:0}
    .nav-links{display:none}
    .logo-text h2{font-size:22px}
    .logo-text p{font-size:10px}
    .hero{padding:50px 0 55px}
    .hero h1{font-size:38px}
    .hero-subtitle{font-size:14px}
    .hero-highlights{gap:12px}
    .hero-highlights div{font-size:11px}
    .hero-buttons{width:100%;justify-content:center}
    .btn-primary,.btn-secondary{padding:12px 18px}
    .ipad-visual{padding:20px}
    .ipad-visual img{height:240px}
    .catalog-section{padding:42px 0 60px}
    .catalog-head h2{font-size:28px}
    .search-container{flex-direction:column}
    .search-wrap,.cartBtn{width:100%}
    .cartBtn{justify-content:center}
    .products{grid-template-columns:1fr;gap:18px}
    .card img{height:250px}
    .footer-grid{grid-template-columns:1fr}
    .footer-bottom{flex-direction:column;text-align:center}
    .footer-links{flex-wrap:wrap;justify-content:center;gap:15px}
}