@import url('https://fonts.googleapis.com/css2?family=Geom:ital,wght@0,300..900;1,300..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


body{background:#fff;}


main{margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:transparent;color:#111}
.container{max-width:100vw;margin:20px auto;padding:0 16px;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
a{color:#ff3b30;text-decoration:none}
.grid-app{display:flex;gap:20px;align-items:flex-start}

/* sidebar */
.sidebar{width:320px;background:#fff;padding:16px;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,0.06);height:100%;position:sticky;top:72px;overflow:auto;border:1px solid #eee;}
.cat-head{font-weight:700;margin-bottom:8px}
.sidebar::-webkit-scrollbar {
  width: 4px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #002455c4;
  border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #fc312f;
}
/* main */
.main{flex:1}
.controls{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.search{flex:1}
.search input{width:100%;padding:12px;border-radius:10px;border:1px solid #e9e9e9}
.controls .btn, .controls select {padding:9px 12px;border-radius:8px;border:1px solid #eee;background:#fff}
.grid-switch{display:flex;gap:6px}

/* products grid */
.products{display:grid;gap:18px;grid-template-columns:repeat(4,1fr)}
@media(max-width:1200px){ .products{grid-template-columns:repeat(3,1fr)} .sidebar{display:none} .mobile-filter-btn{display:block} }
@media(max-width:820px){ .products{grid-template-columns:repeat(2,1fr)} }
@media(max-width:480px){ .products{grid-template-columns:repeat(1,1fr)} .container{padding:0 10px} }

/* card */
.card{background:#fff;border-radius:12px;padding:12px;box-shadow:0 6px 18px rgba(0,0,0,0.06);display:flex;flex-direction:column;justify-content:space-between;transition:transform .18s}
.card:hover{transform:translateY(-6px)}
.card strong{color:#002455;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.img-square{width:100%;padding-bottom:100%;position:relative;border-radius:10px;background:#fafafa;overflow:hidden}
.img-square img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s}
.img-hover{opacity:0}
.card:hover .img-base{opacity:0}
.card:hover .img-hover{opacity:1}
.card h3{color:#002455;margin:10px 0 4px;font-size:16px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.meta{color:#0024556b;font-size:16px;margin:4px auto;display:-webkit-box;-webkit-line-clamp: 1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
.sku{font-size:12px;color:#0024556b;margin-top:8px}
.actions{display:flex;gap:8px;margin-top:12px}
.btn{padding:11px;border-radius:10px;border:none;cursor:pointer;font-weight:700}
.btn-chat{width:25%;background:#002455;color:#fff;transition:linear 0.2s all}
.btn-chat:hover{width:30;background:#fc312f;color:#fff}
.btn-inq{width:75%;background:transparent;color:#fc312f;border:1px solid #002455;transition:linear 0.3s all}
.btn-inq:hover{width:80%;background:#fc312f;color:#fff;border:1.5px solid #002455;}




/* ===== Mobile Filter Button ===== */
.mobile-filter-btn {
  display: none;
  padding: 10px 14px;
  border-radius: 8px;
  background: #111;
  color: #fff;
  border: none;
  cursor: pointer;
}

/* ===== Overlay ===== */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 998;
}

.sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ===== Mobile Sidebar ===== */
@media (max-width: 1100px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background: #fff;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform .3s ease;
    border-radius: 0;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .mobile-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
}





/* pagination */
.pagination{display:flex;justify-content:center;gap:6px;margin-top:18px}
.pagination button{padding:8px 10px;border-radius:8px;border:1px solid #eee;background:#fff}

/* product detail */
.product-wrap{display:flex;gap:28px;align-items:flex-start; max-width: 1200px; margin: 2vw auto auto auto;}
.left{width:46%}
.right{flex:1}
.right h1{color:#002455;font-size: 32px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.detail-frame{background:transparent;padding:12px;border-radius:12px; border: 1px solid #eee;}
.main-image{width:100%;padding-bottom:100%;position:relative;border-radius:12px;overflow:hidden;background:transparent; border: 1px solid #eee;}
.main-image img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain}
.thumbs{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
.thumb{width:72px;height:72px;border-radius:8px;overflow:hidden;border:1px solid #eee;cursor:pointer}
.thumb.active{border:1.5px solid #fc312f}
.section{padding:18px;background: transparent;border-radius:12px; max-width: 1300px; margin: 4vw auto;border:1px solid #eee;}
.section h2{margin:0 0 12px 0;padding-left:12px;border-left:6px solid #fc312f}
#longDesc h2{margin:22px 0 22px 0;padding-left:4px;border:0px solid red;color:#fc312fc4;}
#longDesc h3{margin:18px 0 18px 0;padding-left:4px;border:0px solid red;color:#fc312fc4;}
#longDesc ul{margin:12px 0 12px 0;padding-left:12px;color:#002455;list-style:circle;}
#longDesc p{margin:2vw 0 2vw 0;padding-left:12px;border:0px solid red;color:#002455c4;}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
@media(max-width:900px){ .product-wrap{flex-direction:column} .left{width:100%} .related-grid{grid-template-columns:repeat(2,1fr)} }

/* chat */
.chat-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:end;justify-content:flex-end;z-index:999}
.chatbox{width:360px;background:#fff;border-radius:12px;margin:20px;box-shadow:0 12px 40px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden}
.chat-header{padding:12px 14px;background:linear-gradient(90deg,#ff3b30,#ff6b5b);color:#fff;display:flex;align-items:center;justify-content:space-between}
.chat-body{padding:12px;max-height:360px;overflow:auto}
.msg{padding:8px 10px;border-radius:10px;margin-bottom:8px;max-width:85%}
.msg.bot{background:#f2f2f2;color:#111;align-self:flex-start}
.msg.user{background:#ff3b30;color:#fff;align-self:flex-end}
.chat-input{display:flex;gap:8px;padding:10px;border-top:1px solid #eee}
.chat-input input{flex:1;padding:10px;border-radius:10px;border:1px solid #eee}

/* breadcrumb */
.breadcrumb{padding:2vw 2vw;background:transparent;border-radius:8px;margin-bottom:12px; border: 1px solid #eee;}

/* accordion */
.cat-wrap { margin-bottom: 8px;color:#002455; }


.cat-head-btn {width:100%;display:flex;align-items:center;justify-content:space-between;background:transparent;color:#002455;border:none;padding:8px 6px;font-weight:700;cursor:pointer;border-radius:8px;}
.cat-head-btn[aria-expanded="true"] { background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.05); }
.cat-head-btn .caret { transition: transform .18s ease; }
.cat-head-btn[aria-expanded="true"] .caret { transform: rotate(90deg); }

.sub-list-wrap { padding-left:8px; margin-top:8px; }
.sub-item { margin-bottom:6px; }
.sub-head-btn {
  width:100%;display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:transparent;border:none;cursor:pointer;border-radius:8px;
}
.sub-head-btn[aria-expanded="true"] { background:#f9f9f9; }
.sub-head-btn .caret-small { transition: transform .15s ease; }
.sub-head-btn[aria-expanded="true"] .caret-small { transform: rotate(90deg); }
.subsub-list { padding-left:10px; margin-top:6px; display:flex; flex-direction:column; gap:6px; }
.subsub-link { padding:6px 8px; display:block; border-radius:8px; text-decoration:none; color:#6b6b6b; font-size:14px; background:transparent; }
.subsub-link:hover { background:#f2f2f2; color:#111; }

/* suggestions */
#searchWrapper { position:relative; width:100%; }
#suggestionsContainer {
  position:absolute; left:0; right:0; top:48px; z-index:60; pointer-events:auto;
}
.suggestions-list { background:#fff; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.08); overflow:hidden; }
.suggestion-item { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; }
.suggestion-item:hover, .suggestion-item.active { background:#f6f6f6; }
.s-left { min-width:85px; font-size:12px; text-transform:uppercase; color:#6b6b6b; }
.s-main { flex:1; font-weight:600; }
.s-right { font-size:12px; color:#999; }

/* helpers */
.hidden{display:none}
































.suggestions-panel{
  background:#fff;
  border:1px solid #ddd;
  max-height:420px;
  overflow:auto;
}

.suggestion-title{
  padding:8px 10px;
  font-weight:600;
  background:#f7f7f7;
  border-bottom:1px solid #eee;
}

.suggestion-product{
  display:flex;
  gap:10px;
  padding:8px;
  cursor:pointer;
  border-bottom:1px solid #eee;
}

.suggestion-product:hover,
.suggestion-row:hover{
  background:#f2f2f2;
}

.s-img{
  width:48px;
  height:48px;
  object-fit:cover;
  border-radius:6px;
}

.s-info{
  font-size:13px;
}

.s-name{ font-weight:600; }
.s-sku{ color:#777; font-size:12px; }
.s-rating{ color:#f5a623; }

.suggestion-row{
  padding:8px 10px;
  cursor:pointer;
  display:flex;
  gap:8px;
  align-items:center;
}








.grid-item{
  width: calc(100% / 4 - 10px); /* 4 items per row default */
  display:inline-block;
  margin:5px;
}
.grid-item.row-1{ width:100%; }
.grid-item.row-2{ width:calc(50% - 10px); }
.grid-item.row-3{ width:calc(33.33% - 10px); }
.grid-item.row-4{ width:calc(25% - 10px); }

.list-item{ width:100%; display:flex; margin-bottom:10px; }