*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#111827;background:#f6f7fb}.top{background:#111827;color:#fff;text-align:center;padding:8px;font-size:13px}nav{height:76px;background:#fff;display:flex;align-items:center;gap:28px;padding:0 6%;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:5}.logo{font-size:25px;font-weight:800;white-space:nowrap}.logo span{color:#2563eb}.search{display:flex;flex:1;max-width:650px}.search input{width:100%;padding:13px 15px;border:1px solid #d1d5db;border-radius:10px 0 0 10px;outline:none}.search button{border:0;background:#2563eb;color:#fff;padding:0 20px;border-radius:0 10px 10px 0}.nav-actions button,.section-head select{background:#fff;border:1px solid #d1d5db;padding:11px 14px;border-radius:9px}.hero{margin:30px 6%;padding:55px 6%;background:linear-gradient(120deg,#eaf1ff,#fff);border-radius:24px;display:flex;justify-content:space-between;align-items:center;min-height:390px}.eyebrow{color:#2563eb;font-weight:700;letter-spacing:2px}.hero h1{font-size:58px;line-height:1.02;margin:12px 0}.hero h1 span{color:#2563eb}.hero p{font-size:18px;color:#4b5563;max-width:540px}.primary{background:#2563eb;color:#fff;border:0;border-radius:10px;padding:14px 24px;font-weight:700;cursor:pointer}.hero-card{width:280px;height:280px;border-radius:30px;background:#fff;box-shadow:0 15px 45px #cfd8ea;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:90px}.hero-card strong{font-size:18px;margin-top:12px}.hero-card small{font-size:13px;color:#6b7280;margin-top:6px}.section{margin:40px 6%}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.section-head h2{font-size:28px}.categories{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}.cat{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px 8px;text-align:center;cursor:pointer}.cat:hover{border-color:#2563eb;transform:translateY(-2px)}.cat .icon{font-size:28px;display:block;margin-bottom:8px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.product{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:15px}.pic{height:190px;border-radius:12px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;font-size:70px}.product h3{font-size:16px;margin:14px 0 8px}.price{font-size:20px;font-weight:800}.muted{color:#6b7280;font-size:13px}.add{width:100%;margin-top:12px;padding:11px;border:0;border-radius:9px;background:#111827;color:#fff;cursor:pointer}.cart-panel{position:fixed;right:-420px;top:0;width:400px;max-width:92%;height:100%;background:#fff;z-index:20;padding:24px;transition:.25s;box-shadow:-10px 0 30px #0002}.cart-panel.open{right:0}.overlay{display:none;position:fixed;inset:0;background:#0007;z-index:15}.overlay.open{display:block}.cart-head{display:flex;justify-content:space-between}.cart-head button{border:0;background:none;font-size:20px}.cart-row{display:flex;gap:12px;padding:15px 0;border-bottom:1px solid #eee}.cart-row .mini{font-size:35px;width:55px}.cart-total{display:flex;justify-content:space-between;padding:20px 0;font-size:18px}.full{width:100%}footer{background:#111827;color:#fff;padding:40px 6%;margin-top:60px}footer p{color:#cbd5e1}@media(max-width:900px){.categories{grid-template-columns:repeat(4,1fr)}.grid{grid-template-columns:repeat(2,1fr)}.hero-card{display:none}}@media(max-width:600px){nav{padding:0 4%;gap:10px}.search{order:3;flex-basis:100%;max-width:none}nav{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}.hero{margin:20px 4%;padding:35px 8%}.hero h1{font-size:42px}.section{margin:30px 4%}.categories{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}}

.clickable{cursor:pointer}.clickable:hover{color:#2563eb}.product-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.details{padding:11px;border:1px solid #d1d5db;border-radius:9px;background:#fff;font-weight:700;cursor:pointer}.product .add{margin-top:0}@media(max-width:600px){.product-actions{grid-template-columns:1fr}}

.brand-link{text-decoration:none;color:inherit}.product-page{max-width:1200px;margin:35px auto;padding:0 20px}.back{display:inline-block;margin-bottom:18px;color:#2563eb;text-decoration:none;font-weight:700}.detail-wrap{background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:30px;display:grid;grid-template-columns:1fr 1.1fr;gap:40px}.detail-media{min-height:520px;background:#f3f4f6;border-radius:18px;display:flex;align-items:center;justify-content:center}.detail-icon{font-size:180px}.detail-info h1{font-size:42px;line-height:1.1;margin:8px 0 14px}.detail-price{font-size:34px;font-weight:900;margin:8px 0}.stock{font-weight:800;margin:12px 0}.stock.in{color:#15803d}.stock.out{color:#b91c1c}.detail-desc{font-size:17px;color:#4b5563;line-height:1.6}.spec-box{margin:25px 0;border-top:1px solid #e5e7eb}.spec-box h2{font-size:20px}.spec-row{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid #eee}.spec-row span{color:#4b5563;text-align:right}.detail-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.detail-actions button{padding:14px;border-radius:10px;font-weight:800;cursor:pointer}.detail-actions button:disabled{opacity:.5;cursor:not-allowed}.secondary{border:1px solid #d1d5db;background:#fff}.whatsapp{border:0;background:#15803d;color:#fff}.small-note{font-size:12px;color:#6b7280;margin-top:15px}.empty-detail{text-align:center;padding:70px 20px}.link-btn{display:inline-block;text-decoration:none;margin-top:15px}@media(max-width:800px){.detail-wrap{grid-template-columns:1fr}.detail-media{min-height:300px}.detail-icon{font-size:120px}.detail-info h1{font-size:32px}.detail-actions{grid-template-columns:1fr}.spec-row{flex-direction:column;gap:5px}.spec-row span{text-align:left}}

/* EASYLO branding */
.brand-logo{display:flex;align-items:center;gap:7px;white-space:nowrap}
.brand-logo img{width:28px;height:34px;object-fit:contain;display:block}
.brand-logo span{font-weight:800}

/* =========================================================
   EASYLO — PHASE 9 RESPONSIVE / MOBILE POLISH
   UI-only changes. Existing functionality preserved.
   ========================================================= */

html{scroll-behavior:smooth}
img{max-width:100%}
button,input,select,textarea{font:inherit}
button{touch-action:manipulation}

@media (max-width: 900px){
  body{overflow-x:hidden}
  header nav{padding-left:18px!important;padding-right:18px!important;gap:12px!important}
  main{max-width:100%!important}
  .product-grid,.products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .grid{grid-template-columns:1fr!important}
  .detail-wrap{grid-template-columns:1fr!important}
  .detail-media{min-height:300px!important}
}

@media (max-width: 650px){
  body{font-size:14px}
  .top{padding:7px 12px!important;font-size:11px!important;text-align:center}
  header nav{
    flex-wrap:wrap!important;
    padding:10px 12px!important;
    gap:8px!important;
  }
  .brand-logo{font-size:16px!important}
  .brand-logo img{width:24px!important;height:30px!important}
  .search{
    order:3!important;
    width:100%!important;
    display:flex!important;
  }
  .search input{min-width:0!important;flex:1!important}
  .nav-actions{margin-left:auto!important}
  .nav-actions button,.nav-btn{padding:9px 11px!important}

  main,.page,.product-page{
    width:auto!important;
    margin-left:12px!important;
    margin-right:12px!important;
  }

  .hero{
    padding:26px 18px!important;
    min-height:auto!important;
  }
  .hero h1{font-size:30px!important;line-height:1.05!important}
  .hero p{font-size:13px!important}
  .hero-actions{flex-wrap:wrap!important}

  .category-grid,.categories,.category-list{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .product-grid,.products-grid{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .product-card{min-width:0!important}
  .product-card img,.product-image{height:auto!important;max-height:220px!important}
  .product-card button{min-height:42px!important}

  .detail-wrap{gap:18px!important}
  .detail-media{min-height:230px!important}
  .detail-info h1{font-size:28px!important}
  .detail-actions{display:grid!important;grid-template-columns:1fr!important}
  .detail-actions button{width:100%!important;min-height:44px!important}

  .cart-panel{
    width:min(100%,390px)!important;
    max-width:100%!important;
  }

  .admin-card{overflow:hidden!important}
  .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .products-table{min-width:760px!important}
  .order-stats{grid-template-columns:1fr!important}

  .timeline{grid-template-columns:1fr!important}
  .stage{flex-direction:row!important;justify-content:flex-start!important}

  footer{
    padding-left:18px!important;
    padding-right:18px!important;
    text-align:center!important;
  }

  input,select,textarea{font-size:16px!important}
}

@media (max-width: 420px){
  .category-grid,.categories,.category-list{grid-template-columns:1fr!important}
  .hero h1{font-size:26px!important}
  .logo{font-size:15px!important}
  .nav-actions button{font-size:12px!important}
  .detail-price{font-size:24px!important}
}

/* Make keyboard focus visible without changing the existing theme. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}
.product-image{width:100%;height:190px;object-fit:contain;display:block}.detail-media img{background:#f3f4f6}.pic:has(.product-image){padding:8px}.product .pic{overflow:hidden}


/* Home page order tracking */
.track-nav{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;border:1px solid #d1d5db;border-radius:9px;text-decoration:none;color:#111827;font-weight:700;background:#fff}
.track-nav:hover{border-color:#2563eb;color:#2563eb}
.track-home-card{background:#fff;border:1px solid #dbe3f0;border-radius:20px;padding:26px;box-shadow:0 10px 30px #1118270d;display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:center}
.track-home-card h2{margin:4px 0 8px;font-size:28px}.track-home-form{display:flex;gap:10px}.track-home-form input{flex:1;padding:14px 15px;border:1px solid #d1d5db;border-radius:10px;min-width:0}.home-track-result{grid-column:1/-1;min-height:20px;color:#4b5563}.track-home-result-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px;background:#f6f8fc;border-radius:12px}.track-home-result-box a{color:#2563eb;font-weight:700;text-decoration:none}.status-pill{display:inline-block;padding:5px 10px;border-radius:999px;background:#eaf1ff;color:#2563eb;font-weight:800}.track-error{color:#b91c1c;font-weight:700}@media(max-width:650px){.track-nav{padding:8px 9px;font-size:12px}.track-home-card{grid-template-columns:1fr;padding:20px}.track-home-form{flex-direction:column}.track-home-form .primary{width:100%}}


/* =========================================================
   EASYLO V2 VISUAL REFRESH — palette supplied by owner
   UI-only styling; existing layout/functionality preserved.
   ========================================================= */
:root{--easylo-navy:#0A2463;--easylo-blue:#2563EB;--easylo-cyan:#00C6FF;--easylo-aqua:#00E5CC;--easylo-soft:#F1F5F9;--easylo-ink:#0f1f3d}
body{background:var(--easylo-soft);color:var(--easylo-ink)}
.top{background:linear-gradient(90deg,var(--easylo-navy),#123b86);letter-spacing:.15px}
header{background:rgba(255,255,255,.96)}
nav{box-shadow:0 8px 24px rgba(10,36,99,.06);border-bottom-color:#dbe5f2}
.logo span{color:var(--easylo-blue)}
.brand-logo img{width:30px;height:34px;object-fit:contain}
.search input{border-color:#cbd8ea;background:#fff}.search input:focus{border-color:var(--easylo-cyan);box-shadow:0 0 0 3px rgba(0,198,255,.12)}
.search button,.primary{background:linear-gradient(135deg,var(--easylo-blue),var(--easylo-cyan));box-shadow:0 8px 18px rgba(37,99,235,.18)}
.search button:hover,.primary:hover{filter:brightness(.98);transform:translateY(-1px)}
.nav-actions button,.track-nav,.account-link{border-color:#cbd8ea!important;color:var(--easylo-ink)!important;background:#fff}.track-nav:hover,.account-link:hover,.nav-actions button:hover{border-color:var(--easylo-cyan)!important;box-shadow:0 5px 15px rgba(0,198,255,.12)}
.nav-icon{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:4px;border-radius:7px;background:linear-gradient(135deg,var(--easylo-navy),var(--easylo-cyan));color:#fff;font-size:12px;font-weight:900;box-shadow:0 4px 10px rgba(10,36,99,.18)}
.hero{background:linear-gradient(125deg,#e8f4ff 0%,#f7fbff 48%,#ecfffc 100%);border:1px solid #d8e7f7;box-shadow:0 18px 45px rgba(10,36,99,.07)}
.eyebrow{color:var(--easylo-blue)}
.hero h1 span{color:var(--easylo-blue)}
.hero-card{border:1px solid #dce8f6;box-shadow:0 18px 45px rgba(10,36,99,.12);background:linear-gradient(145deg,#fff,#f5fbff)}
.cat:hover{border-color:var(--easylo-cyan);box-shadow:0 8px 20px rgba(0,198,255,.12)}
.product{border-color:#dce5f0;box-shadow:0 8px 22px rgba(10,36,99,.045);transition:.2s}.product:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(10,36,99,.09)}
.add{background:linear-gradient(135deg,var(--easylo-navy),#153b8f)}.details{border-color:#cbd8ea;color:var(--easylo-navy)}
.track-home-card{border-color:#d5e3f2;box-shadow:0 14px 35px rgba(10,36,99,.07)}
.track-home-form input{border-color:#cbd8ea}.track-home-form input:focus{border-color:var(--easylo-cyan);box-shadow:0 0 0 3px rgba(0,198,255,.12);outline:0}
.status-pill{background:#e6fbf8;color:#078d82}.track-home-result-box{background:linear-gradient(90deg,#f5f9ff,#f0fffc)}
footer{background:linear-gradient(135deg,var(--easylo-navy),#071943);border-top:4px solid var(--easylo-aqua)}
.footer-brand{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.footer-lockup{width:220px;max-height:105px;object-fit:contain;background:#fff;border-radius:12px;padding:7px;box-shadow:0 8px 22px rgba(0,0,0,.14)}.company-name{color:#fff!important;font-weight:800;letter-spacing:.4px}
@media(max-width:650px){.footer-brand{justify-content:center}.footer-lockup{width:190px}.nav-icon{width:21px;height:21px}}