*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:root{
  --bg:#080808;
  --card:#111;
  --card2:#151515;
  --line:#292929;
  --red:#e10600;
  --orange:#ff4b16;
  --white:#f5f5f5;
  --muted:#858585;
  --green:#16c784;
}

body{
  background:var(--bg);
  color:var(--white);
  font-family:Arial,Helvetica,sans-serif;
}

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

button{
  font-family:inherit;
  cursor:pointer;
}

input,
textarea,
select{
  font-family:inherit;
}

input,
textarea,
select{
  background:#171717;
  border:1px solid #333;
  color:white;
  padding:12px;
  border-radius:4px;
  outline:none;
}

textarea{
  min-height:100px;
  resize:vertical;
}

input:focus,
textarea:focus,
select:focus{
  border-color:var(--red);
}

.topbar{
  background:var(--red);
  padding:9px 6%;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  font-weight:bold;
}

nav{
  height:76px;
  padding:0 6%;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#0b0b0b;
  position:sticky;
  top:0;
  z-index:30;
}

.logo,
.footer-logo,
.admin-logo{
  display:flex;
  align-items:center;
  gap:8px;
}

.logo img,
.footer-logo img,
.admin-logo img{
  display:none;
  width:42px;
  height:42px;
  object-fit:contain;
}

.logo .text-logo{
  font-size:25px;
  font-weight:1000;
}

.text-logo span{
  color:var(--red);
}

.navlinks{
  display:flex;
  gap:30px;
  font-size:13px;
  font-weight:bold;
}

.navlinks a:hover{
  color:var(--orange);
}

.navright{
  display:flex;
  align-items:center;
  gap:10px;
}

.search{
  width:190px;
}

.cart-btn{
  background:white;
  color:black;
  border:0;
  padding:12px 16px;
  border-radius:4px;
  font-weight:bold;
}

.hero{
  min-height:510px;
  padding:70px 6%;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  background:
    radial-gradient(
      circle at 80% 40%,
      #3a0904,
      #150403 22%,
      transparent 48%
    ),
    linear-gradient(120deg,#080808,#111);
  background-size:cover;
  background-position:center;
}

.kicker{
  color:var(--orange);
  font-size:12px;
  letter-spacing:3px;
  font-weight:900;
  margin-bottom:18px;
}

.hero h1{
  font-size:clamp(48px,7vw,94px);
  line-height:.87;
  letter-spacing:-6px;
}

.hero h1 span{
  color:var(--red);
}

.hero p{
  color:#aaa;
  max-width:540px;
  margin-top:25px;
  line-height:1.6;
}

.hero-buttons{
  display:flex;
  gap:10px;
  margin-top:30px;
}

.btn,
.red-btn,
.dark-btn{
  border:0;
  padding:13px 18px;
  border-radius:4px;
  font-weight:bold;
}

.primary,
.red-btn{
  background:var(--red);
  color:white;
}

.secondary{
  background:white;
  color:#111;
}

.dark-btn{
  background:#191919;
  color:white;
  border:1px solid #333;
}

.hero-bike{
  text-align:center;
  font-size:200px;
  transform:rotate(-8deg);
  filter:drop-shadow(0 20px 35px black);
}

.strip{
  display:flex;
  justify-content:space-between;
  padding:18px 6%;
  border-top:1px solid #222;
  border-bottom:1px solid #222;
  color:#888;
  font-size:12px;
  letter-spacing:1px;
}

.section{
  padding:65px 6%;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:30px;
}

.section h2{
  font-size:36px;
  letter-spacing:-2px;
}

.section-head p{
  color:#777;
  font-size:13px;
}

.categories{
  display:flex;
  gap:10px;
  overflow:auto;
  margin-bottom:30px;
}

.category-btn{
  white-space:nowrap;
  background:#141414;
  color:#aaa;
  border:1px solid #292929;
  padding:11px 17px;
  border-radius:3px;
}

.category-btn.active,
.category-btn:hover{
  background:var(--red);
  color:white;
  border-color:var(--red);
}

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

.product-card{
  background:var(--card);
  border:1px solid #222;
  border-radius:6px;
  overflow:hidden;
  transition:.2s;
}

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

.product-image{
  height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle,#292929,#111 65%);
  overflow:hidden;
}

.product-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.product-emoji{
  font-size:90px;
}

.product-info{
  padding:18px;
}

.product-tag{
  color:var(--orange);
  font-size:10px;
  font-weight:bold;
}

.product-info h3{
  margin-top:9px;
  font-size:16px;
}

.product-info small{
  display:block;
  color:#777;
  margin-top:7px;
}

.price{
  display:flex;
  gap:8px;
  margin-top:15px;
  align-items:center;
}

.price strong{
  font-size:19px;
}

.old-price{
  color:#555;
  text-decoration:line-through;
  font-size:12px;
}

.add-btn{
  width:100%;
  margin-top:15px;
  padding:12px;
  background:#191919;
  border:1px solid #333;
  color:white;
  border-radius:4px;
  font-weight:bold;
}

.add-btn:hover{
  background:var(--red);
  border-color:var(--red);
}

.banner{
  margin:10px 6% 65px;
  padding:45px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid #292929;
  background:linear-gradient(100deg,#250402,#0d0d0d);
}

.banner h2{
  font-size:40px;
}

.banner p{
  color:#888;
  margin-top:10px;
}

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

.feature{
  padding:25px;
  background:#101010;
  border:1px solid #222;
}

.feature p{
  color:#777;
  font-size:13px;
  line-height:1.6;
  margin-top:10px;
}

footer{
  padding:50px 6%;
  border-top:1px solid #222;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:30px;
}

footer h3{
  margin-bottom:15px;
}

footer p,
footer a{
  display:block;
  color:#777;
  font-size:13px;
  line-height:2;
}

.copyright{
  padding:20px 6%;
  color:#555;
  border-top:1px solid #222;
  font-size:11px;
}


/* CART */

.overlay{
  position:fixed;
  inset:0;
  background:#000b;
  z-index:40;
  display:none;
}

.overlay.show{
  display:block;
}

.cart-panel{
  position:fixed;
  right:-480px;
  top:0;
  width:460px;
  height:100vh;
  background:#101010;
  border-left:1px solid #333;
  z-index:50;
  padding:25px;
  overflow-y:auto;
  transition:.3s;
}

.cart-panel.open{
  right:0;
}

.cart-header{
  display:flex;
  justify-content:space-between;
  padding-bottom:20px;
  border-bottom:1px solid #292929;
}

.close{
  background:none;
  border:0;
  color:white;
  font-size:27px;
}

.cart-item{
  display:grid;
  grid-template-columns:55px 1fr auto;
  gap:12px;
  padding:15px 0;
  border-bottom:1px solid #222;
}

.cart-item-img{
  width:55px;
  height:55px;
  background:#222;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.cart-item-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.cart-item-info b{
  font-size:13px;
}

.cart-item-info small{
  display:block;
  color:#777;
  margin-top:4px;
}

.qty{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:8px;
}

.qty button{
  width:25px;
  height:25px;
  background:#1a1a1a;
  color:white;
  border:1px solid #333;
}

.remove-item{
  background:none;
  color:var(--red);
  border:0;
  font-size:20px;
}

.cart-summary{
  margin-top:20px;
  border-top:1px solid #333;
  padding-top:15px;
}

.cart-summary > div{
  display:flex;
  justify-content:space-between;
  padding:7px 0;
  color:#aaa;
}

.cart-summary .total{
  margin-top:10px;
  padding-top:15px;
  border-top:1px solid #333;
  color:white;
  font-size:20px;
}

.checkout-box{
  border-top:1px solid #333;
  margin-top:25px;
  padding-top:20px;
}

.checkout-box h3{
  margin-bottom:15px;
}

.checkout-box label,
.form-grid label{
  display:block;
  color:#888;
  font-size:11px;
  margin-bottom:14px;
}

.checkout-box input,
.checkout-box textarea,
.checkout-box select{
  display:block;
  width:100%;
  margin-top:6px;
}

.checkout-btn{
  width:100%;
  padding:16px;
  background:var(--red);
  color:white;
  border:0;
  font-weight:bold;
  border-radius:4px;
}


/* ADMIN */

.admin-body{
  min-height:100vh;
}

.admin-layout{
  display:grid;
  grid-template-columns:250px 1fr;
  min-height:100vh;
}

.sidebar{
  background:#0d0d0d;
  border-right:1px solid #292929;
  padding:25px;
  position:sticky;
  top:0;
  height:100vh;
}

.admin-logo{
  margin-bottom:35px;
}

.admin-logo img{
  width:45px;
  height:45px;
}

.side-btn{
  width:100%;
  display:block;
  text-align:left;
  background:none;
  color:#888;
  border:0;
  padding:13px;
  margin-bottom:6px;
  border-radius:4px;
}

.side-btn:hover,
.side-btn.active{
  background:var(--red);
  color:white;
}

.store-link{
  display:block;
  margin-top:30px;
  border:1px solid #333;
  padding:12px;
  text-align:center;
  font-size:12px;
}

.admin-main{
  padding:35px;
  max-width:1500px;
}

.owner-section{
  display:none;
}

.owner-section.active{
  display:block;
}

.admin-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:25px;
}

.admin-header h1{
  font-size:30px;
}

.admin-header p{
  color:#777;
  margin-top:5px;
}

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  margin-bottom:25px;
}

.stat,
.panel{
  background:#111;
  border:1px solid #292929;
  border-radius:6px;
}

.stat{
  padding:22px;
}

.stat small{
  color:#777;
  display:block;
  margin-bottom:8px;
}

.stat strong{
  font-size:27px;
}

.panel{
  padding:25px;
  margin-bottom:20px;
}

.panel h2{
  margin-bottom:18px;
}

.admin-product-list{
  display:grid;
  gap:10px;
}

.admin-product{
  display:grid;
  grid-template-columns:80px 1fr auto;
  gap:15px;
  align-items:center;
  padding:12px;
  background:#151515;
  border:1px solid #292929;
}

.admin-thumb{
  width:80px;
  height:70px;
  background:#222;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  font-size:35px;
}

.admin-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.admin-product p{
  color:#777;
  font-size:12px;
  margin-top:5px;
}

.admin-actions{
  display:flex;
  gap:7px;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
}

.form-grid .full{
  grid-column:1/-1;
}

.form-grid small,
.file-note{
  color:#666;
  display:block;
  margin-top:6px;
}

.image-preview{
  width:170px;
  height:130px;
  background:#181818;
  border:1px dashed #444;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-bottom:15px;
}

.image-preview img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.form-buttons{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.text-btn{
  background:none;
  border:0;
  color:#aaa;
  padding:15px 0;
}

.full-btn{
  width:100%;
}

.danger-panel{
  border-color:#501818;
}

.order-card,
.helper-card{
  background:#151515;
  border:1px solid #292929;
  padding:18px;
  margin-bottom:12px;
  border-radius:5px;
}

.order-head,
.helper-head{
  display:flex;
  justify-content:space-between;
  gap:15px;
}

.order-id{
  color:var(--red);
  font-weight:bold;
}

.status{
  padding:5px 9px;
  border-radius:20px;
  background:#302400;
  color:#ffc107;
  font-size:11px;
}

.order-details,
.helper-details{
  color:#aaa;
  font-size:13px;
  line-height:1.7;
  margin-top:12px;
}

.order-items{
  margin-top:15px;
  padding-top:12px;
  border-top:1px solid #292929;
}

.order-line{
  display:flex;
  justify-content:space-between;
  color:#aaa;
  padding:4px 0;
}

.order-total{
  display:flex;
  justify-content:space-between;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #333;
  font-weight:bold;
}

.credit-control{
  display:flex;
  gap:7px;
  margin-top:12px;
}

.credit-control input{
  width:120px;
}

.muted{
  color:#777;
  font-size:13px;
}

.empty{
  padding:25px;
  color:#666;
  text-align:center;
}


/* DELIVERY */

.delivery-header{
  height:75px;
  padding:0 6%;
  border-bottom:1px solid #292929;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.delivery-main{
  max-width:1100px;
  margin:auto;
  padding:40px 20px;
}

.delivery-auth{
  min-height:80vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

.auth-card{
  width:420px;
  max-width:100%;
  background:#111;
  border:1px solid #292929;
  padding:30px;
  border-radius:7px;
}

.auth-card h1{
  font-size:35px;
  margin-bottom:10px;
}

.auth-card > p{
  color:#777;
  margin-bottom:25px;
}

.auth-card label{
  display:block;
  color:#888;
  font-size:11px;
  margin-bottom:15px;
}

.auth-card input{
  width:100%;
  display:block;
  margin-top:6px;
}

.delivery-welcome{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:25px;
}

.delivery-welcome h1{
  font-size:42px;
}

.delivery-welcome p{
  color:#888;
  margin-top:8px;
}

.credit-card{
  min-width:160px;
  background:linear-gradient(135deg,#e10600,#7c0500);
  padding:22px;
  border-radius:7px;
}

.credit-card small{
  display:block;
  opacity:.7;
}

.credit-card strong{
  display:block;
  font-size:34px;
  margin-top:5px;
}

.delivery-actions{
  display:flex;
  gap:10px;
  margin-bottom:20px;
}

.available-order{
  background:#151515;
  border:1px solid #292929;
  padding:18px;
  margin-top:12px;
  border-radius:5px;
}

.available-order h3{
  margin-bottom:7px;
}

.available-order p{
  color:#888;
  font-size:13px;
  line-height:1.7;
}

.accept-btn{
  margin-top:15px;
  background:var(--red);
  border:0;
  color:white;
  padding:11px 16px;
  border-radius:4px;
  font-weight:bold;
}

.delivery-status-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}

@media(max-width:900px){

  .navlinks{
    display:none;
  }

  .product-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .admin-layout{
    grid-template-columns:1fr;
  }

  .sidebar{
    position:relative;
    height:auto;
  }

  .stats{
    grid-template-columns:repeat(2,1fr);
  }

  .features{
    grid-template-columns:1fr;
  }

  footer{
    grid-template-columns:1fr 1fr;
  }

}

@media(max-width:600px){

  .topbar{
    display:none;
  }

  nav{
    height:65px;
  }

  .search{
    display:none;
  }

  .hero{
    grid-template-columns:1fr;
    padding:50px 6%;
  }

  .hero-bike{
    font-size:100px;
  }

  .hero h1{
    letter-spacing:-3px;
  }

  .strip{
    display:none;
  }

  .section{
    padding:45px 6%;
  }

  .product-grid{
    grid-template-columns:1fr;
  }

  .banner{
    display:block;
    padding:28px;
  }

  .banner h2{
    font-size:30px;
  }

  footer{
    grid-template-columns:1fr;
  }

  .cart-panel{
    width:100%;
    right:-100%;
  }

  .admin-main{
    padding:20px;
  }

  .stats{
    grid-template-columns:1fr;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .form-grid .full{
    grid-column:auto;
  }

  .admin-product{
    grid-template-columns:60px 1fr;
  }

  .admin-thumb{
    width:60px;
    height:60px;
  }

  .admin-actions{
    grid-column:1/-1;
  }

  .delivery-welcome{
    display:block;
  }

  .credit-card{
    margin-top:20px;
  }

  .delivery-actions{
    flex-direction:column;
  }

}