:root{--nav:#131921;--nav2:#232f3e;--accent:#ff9900;--bg:#eaeded;--card:#fff;--text:#111;--muted:#5f6368;--line:#ddd;--blue:#007185;--shadow:0 2px 8px #00000018}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}img{max-width:100%;display:block}.topbar{background:#111;color:#ddd;font-size:12px;padding:6px 4%;display:flex;justify-content:space-between}.header{background:var(--nav);color:#fff;position:sticky;top:0;z-index:1000}.headerMain{min-height:70px;display:flex;align-items:center;gap:12px;padding:8px 3%;}.brand{font-size:22px;font-weight:800;white-space:nowrap}.brand span{color:var(--accent)}.delivery{font-size:11px;color:#ddd;white-space:nowrap}.delivery b{display:block;color:#fff;font-size:13px}.searchBox{display:flex;flex:1;max-width:800px;height:42px}.searchBox input{flex:1;border:0;padding:0 13px;outline:0;min-width:0}.searchBox button{width:50px;border:0;background:var(--accent);cursor:pointer}.headerLink{font-size:12px;white-space:nowrap;padding:7px}.headerLink b{display:block;font-size:14px}.cartLink{font-weight:700}.count{background:var(--accent);color:#111;border-radius:50%;padding:1px 6px;font-size:11px;position:relative;top:-10px;left:-7px}.nav{background:var(--nav2);color:#fff;display:flex;gap:24px;padding:0 3%;height:40px;align-items:center;overflow:auto;white-space:nowrap;font-size:13px;font-weight:600}.nav a:hover{text-decoration:underline}.menuBtn{display:none;background:none;color:#fff;border:0;font-size:22px}.hero{height:500px;position:relative;overflow:hidden;background:#222}.slide{position:absolute;inset:0;opacity:0;transition:opacity .5s}.slide.active{opacity:1}.slide img{width:100%;height:100%;object-fit:cover}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000b,transparent 70%)}.heroContent{position:absolute;z-index:2;left:7%;top:90px;color:#fff;max-width:650px}.eyebrow{color:var(--accent);font-size:13px;font-weight:700;letter-spacing:2px}.hero h1{font-size:54px;line-height:1.05;margin:15px 0}.hero p{font-size:16px;color:#eee}.btn{display:inline-block;border:0;padding:12px 20px;border-radius:3px;background:var(--accent);font-weight:700;cursor:pointer}.btn.dark{background:var(--nav);color:#fff}.btn.light{background:#fff;color:#111}.wrap{max-width:1450px;margin:auto;padding:0 18px}.overlap{margin-top:-55px;position:relative;z-index:5}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{background:#fff;padding:18px;box-shadow:var(--shadow)}.categoryCard img{height:150px;width:100%;object-fit:contain;background:#f7f7f7}.categoryCard h3{font-size:17px;margin:10px 0 5px}.link{color:var(--blue);font-size:13px}.section{padding:28px 0}.sectionHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.sectionHead h2{margin:0;font-size:25px}.productGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.product{background:#fff;border:1px solid #ddd;padding:12px}.pimage{height:210px;background:#f7f7f7}.pimage img{width:100%;height:100%;object-fit:contain}.pbody h3{font-size:15px;margin:10px 0 5px}.pbody p{font-size:12px;color:#555;min-height:36px}.tag{font-size:10px;color:#e47911;font-weight:700}.price{font-size:18px;font-weight:800;display:block}.add{width:100%;border:0;background:#ffd814;border-radius:20px;padding:9px;margin-top:10px;cursor:pointer;font-size:12px}.rail{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.rail .product{border:0}.rail .pimage{height:160px}.banner{background:#fff;padding:28px;text-align:center}.pageHero{background:var(--nav2);color:#fff;padding:55px 18px}.pageHero h1{max-width:1200px;margin:auto;font-size:42px}.pageHero p{max-width:1200px;margin:10px auto;color:#ddd}.contentGrid{display:grid;grid-template-columns:2fr 1fr;gap:20px}.panel{background:#fff;padding:24px;box-shadow:var(--shadow)}.formGrid{display:grid;gap:12px}.formGrid input,.formGrid textarea,.formGrid select{width:100%;padding:12px;border:1px solid #ccc;border-radius:3px}.cartRow,.checkoutLine{background:#fff;border-bottom:1px solid #eee;padding:15px;display:grid;grid-template-columns:100px 1fr auto;gap:15px;align-items:center}.cartThumb{width:100px;height:90px;background:#f7f7f7}.cartThumb img{width:100%;height:100%;object-fit:contain}.qty{display:flex;gap:10px;align-items:center;margin-top:8px}.qty button{border:1px solid #bbb;background:#fff;width:30px;height:30px}.summary{background:#fff;padding:20px;box-shadow:var(--shadow)}.footerTop{background:#232f3e;color:#fff;padding:38px 4%}.footerGrid{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.footerGrid h3{font-size:16px}.footerGrid a,.footerGrid p{font-size:12px;color:#ddd;display:block;margin:7px 0}.footerBottom{background:#131921;color:#bbb;text-align:center;padding:18px;font-size:11px}.toast{position:fixed;right:20px;bottom:20px;background:#111;color:#fff;padding:12px 18px;z-index:3000;border-radius:4px}.adminWrap{max-width:1250px;margin:auto;padding:25px 18px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.stat,.adminPanel{background:#fff;padding:20px;border:1px solid #ddd}.stat b{font-size:25px;display:block}.adminGrid{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;margin-top:18px}.adminItem{padding:12px 0;border-bottom:1px solid #eee;display:flex;justify-content:space-between;gap:10px}.adminItem small{display:block;color:#666}.adminActions{display:flex;gap:7px}.adminActions button{padding:7px 10px;background:#fff;border:1px solid #bbb}.danger{color:#b00020}.mobileSearch{display:none}
@media(max-width:1000px){.delivery{display:none}.grid4{grid-template-columns:repeat(2,1fr)}.productGrid{grid-template-columns:repeat(3,1fr)}.rail{grid-template-columns:repeat(3,1fr)}.contentGrid,.adminGrid{grid-template-columns:1fr}.footerGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.topbar{font-size:9px;padding:5px 10px}.headerMain{min-height:58px;padding:7px 9px;gap:7px;flex-wrap:wrap}.brand{font-size:18px}.headerLink{display:none}.searchBox{order:3;flex-basis:100%;height:38px;max-width:none}.searchBox button{width:44px}.nav{height:38px;padding:0 10px;gap:18px;font-size:11px}.hero{height:430px}.heroContent{left:8%;right:8%;top:55px}.hero h1{font-size:34px}.hero p{font-size:13px}.hero img{object-position:center}.wrap{padding:0 9px}.overlap{margin-top:-25px}.grid4{grid-template-columns:1fr 1fr;gap:8px}.card{padding:11px}.categoryCard img{height:110px}.categoryCard h3{font-size:13px}.section{padding:20px 0}.sectionHead h2{font-size:19px}.productGrid{grid-template-columns:1fr 1fr;gap:8px}.pimage{height:145px}.pbody h3{font-size:12px}.pbody p{font-size:9px;min-height:30px}.price{font-size:14px}.add{padding:8px 4px;font-size:10px}.rail{display:flex;overflow:auto;gap:9px}.rail .product{min-width:155px}.rail .pimage{height:135px}.pageHero{padding:35px 12px}.pageHero h1{font-size:29px}.contentGrid{display:block}.panel,.summary{padding:15px;margin-bottom:12px}.cartRow{grid-template-columns:70px 1fr;gap:10px}.cartRow>div:last-child{grid-column:2}.cartThumb{width:70px;height:70px}.footerGrid{grid-template-columns:1fr 1fr;gap:20px}.footerTop{padding:28px 14px}.stats{grid-template-columns:1fr 1fr}.adminWrap{padding:16px 10px}.adminItem{display:block}.adminActions{margin-top:8px}.mobileSearch{display:block}}
@media(max-width:380px){.brand{font-size:16px}.hero h1{font-size:29px}.grid4,.productGrid{grid-template-columns:1fr 1fr}}


/* =========================================================
   HOME HERO - SCREENSHOT STYLE / RESPONSIVE
   ========================================================= */
.home-hero {
    position: relative;
    height: 500px;
    overflow: hidden;
    background: #111;
}

.home-hero .slider,
.home-hero .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.home-hero .slide {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.home-hero .slide.active {
    opacity: 1;
}

.home-hero .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-hero .overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.35) 52%, rgba(0,0,0,.08));
}

.hero-content {
    position: absolute;
    z-index: 3;
    left: 7%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 680px;
    color: #fff;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ff9900;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.hero-tag i {
    font-style: normal;
    font-size: 12px;
}

.hero-content h1 {
    margin: 16px 0 12px;
    font-size: 54px;
    line-height: 1.05;
    letter-spacing: -1px;
}

.hero-content h1 span {
    color: #ff9900;
}

.hero-content p {
    max-width: 600px;
    margin: 0 0 24px;
    color: #eee;
    font-size: 16px;
}

.hero-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-buttons .btn {
    min-width: 135px;
    text-align: center;
}

.hero-buttons .btn.primary {
    background: #ff9900;
    color: #111;
}

.heroArrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 48px;
    height: 70px;
    border: 1px solid rgba(255,255,255,.55);
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: 38px;
    line-height: 1;
    cursor: pointer;
    transition: .2s ease;
}

.heroArrow:hover {
    background: rgba(0,0,0,.75);
}

.heroArrow.prev { left: 14px; }
.heroArrow.next { right: 14px; }

@media (max-width: 900px) {
    .delivery,
    .headerLink { display: none; }

    .headerMain {
        flex-wrap: wrap;
    }

    .searchBox {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }

    .home-hero {
        height: 460px;
    }

    .hero-content {
        left: 5%;
        right: 5%;
    }

    .hero-content h1 {
        font-size: 42px;
    }
}

@media (max-width: 600px) {
    .topbar span:last-child { display: none; }

    .brand { font-size: 18px; }

    .nav {
        gap: 16px;
        font-size: 12px;
    }

    .home-hero {
        height: 430px;
    }

    .home-hero .slide img {
        object-fit: cover;
    }

    .hero-content {
        top: 52%;
    }

    .hero-tag {
        font-size: 10px;
        letter-spacing: 1.3px;
    }

    .hero-content h1 {
        margin: 12px 0 10px;
        font-size: 32px;
    }

    .hero-content p {
        font-size: 13px;
        line-height: 1.55;
        margin-bottom: 18px;
    }

    .hero-buttons .btn {
        padding: 10px 14px;
        min-width: 120px;
    }

    .heroArrow {
        width: 36px;
        height: 55px;
        font-size: 30px;
    }

    .heroArrow.prev { left: 6px; }
    .heroArrow.next { right: 6px; }
}