:root{--gold:#b57edc;--ink:#101114;--soft:#f5f6f8;--green:#25d366;--purpl,e:#6c3df4}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff}a{text-decoration:none;color:inherit}.wrap{max-width:1160px;margin:auto;padding:0 18px}.top{background:#0d0e12;color:#fff}.nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:10px;font-weight:900}.brand img{width:72px;height:54px;object-fit:contain;border-radius:50%}.links{display:flex;gap:18px;font-weight:700}.btn{display:inline-block;padding:13px 18px;border-radius:999px;background:var(--gold);font-weight:900;color:#fff;}.btn.green{background:var(--green);color:#062b14}.hero{background:linear-gradient(135deg,#0d0e12 0%,#292139 62%,#6c3df4 100%);color:#fff;padding:78px 0}.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:35px;align-items:center}.hero h1{font-size:clamp(42px,7vw,76px);line-height:.98;margin:0 0 18px}.hero p{font-size:20px;line-height:1.55;max-width:700px}.hero-card{background:transparent;color:#111;border-radius:28px;padding:18px;box-shadow:none;.hero-card img{width:85%;height:330px;object-fit:contain}.section{padding:68px 0}.section h2{font-size:36px;margin:0 0 12px}.sub{color:#666;margin:0 0 30px;font-size:18px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:#fff;border:1px solid #e8e8ed;border-radius:22px;padding:20px;box-shadow:0 8px 24px #0000000d}.card img{width:100%;height:210px;object-fit:contain}.card h3{margin:12px 0 8px;font-size:22px}.soft{background:var(--soft)}.cat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.pill{background:#fff;border-radius:18px;padding:22px;border:1px solid #e5e6eb;font-weight:800;text-align:center}.delivery{background:#111;color:#fff;border-radius:30px;padding:36px;display:grid;grid-template-columns:1fr 1fr;gap:24px}.footer{background:#0d0e12;color:#fff;padding:30px 0;text-align:center}.note{font-size:14px;color:#777}.mobilebar{display:none}
@media(max-width:780px){.links{display:none}.hero-grid{display:block!important;grid-template-columns:1fr!important;}.delivery{grid-template-columns:1fr}.hero{padding:48px 0}.grid{grid-template-columns:1fr 1fr}.cat{grid-template-columns:1fr 1fr}.hero-card img{height:250px}.mobilebar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;background:transparent;border-radius:999px;padding:8px;box-shadow:0 8px 30px #0003}.mobilebar a{flex:1;text-align:center;padding:12px;font-weight:900}.mobilebar a:last-child{background:var(--green);border-radius:999px}}@media(max-width:500px){.grid{grid-template-columns:1fr}}
#heroImage{
width:100%;
height:330px;
object-fit:contain;
object-position:center;
}

.hero-card h3 {
    font-weight: 900;
}

.hero-card p {
    font-weight: 700;
}
#tools-home .card img{
    width:auto !important;
    max-width: 180px !important;
display:block;
margin:0 auto;
    height:130px !important;
    object-fit: contain;
}

@media (max-width: 768px) {

  .wrap {
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
    box-sizing: border-box;
  }

  .nav {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }

  .links {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .links a {
    font-size: 15px;
    white-space: nowrap;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .hero h1 {
    font-size: 42px;
    line-height: 1.05;
  }

  .hero p {
    font-size: 18px;
    line-height: 1.5;
  }

  .hero-card {
    width: 100%;
  }

  #heroImage {
    width: 100%;
    height: 260px;
    object-fit: contain;
  }

  .hero-card h3,
  .hero-card p {
    text-align: center;
  }

  .hero .btn {
    display: inline-block;
    margin-bottom: 10px;
  }
}
@media (max-width: 600px) {

  section.hero .wrap.hero-grid {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  section.hero .wrap.hero-grid > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  section.hero .hero-card {
    display: block !important;
    width: 100% !important;
    margin-top: 25px !important;
  }

  section.hero #heroImage {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 240px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  section.hero h1 {
    font-size: 40px !important;
    line-height: 1.05 !important;
  }

  section.hero p {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }
}
/* Mobile launch cleanup — Electronics header only */
@media (max-width: 780px) {
  header.top .wrap.nav {
    min-height:auto;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding-top:10px;
    padding-bottom:10px;
    overflow:visible;
  }
  header.top .brand { min-width:0; gap:7px; }
  header.top .brand img { width:52px; height:44px; flex:0 0 auto; }
  header.top .brand span { font-size:.95rem; line-height:1.08; white-space:normal; }

  header.top .links {
    width:100%;
    min-width:0;
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    gap:14px !important;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  header.top .links::-webkit-scrollbar { display:none; }
  header.top .links a {
    display:block !important;
    flex:0 0 auto;
    font-size:14px !important;
    white-space:nowrap;
  }

  header.top > .wrap.nav > .btn.green { display:none; }
  header.top #cartButton { display:none !important; }
}

@media (max-width: 480px) {
  header.top .wrap.nav { grid-template-columns:auto minmax(0,1fr); }
  header.top .brand span { font-size:.88rem; }
  header.top .links a { font-size:13px !important; }
}


/* ===== Centered desktop storefront =====
   Keeps the site content in a comfortable desktop width with clean white
   gutters on both sides. Mobile remains full width. */
@media (min-width: 1100px) {
  html {
    background: #fff !important;
  }

  body {
    background: #fff !important;
  }

  body > header,
  body > .promo-banner,
  body > main,
  body > footer,
  body > .footer {
    width: calc(100% - 96px) !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body > header {
    overflow: hidden;
  }
}

@media (max-width: 1099px) {
  body > header,
  body > .promo-banner,
  body > main,
  body > footer,
  body > .footer {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}