:root{
  --blue:#0b3b5c; --blue-2:#103a57; --orange:#ff6a00; --muted:#6b7280;
  --bg:#f6f7fb; --card:#ffffff; --ring:#e5e7eb; --shadow:0 6px 20px rgba(0,0,0,.06);
  --radius:14px; --success:#16a34a;
}

/* ---------- Base / reset ---------- */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.45; color:#1f2937; background:var(--bg);
}
img,svg,video{ display:block; max-width:100%; height:auto }
a{ text-decoration:none; color:inherit }

/* ---------- Top bar ---------- */
header.topbar{
  background:var(--blue); color:#fff;
  position:sticky; top:0; z-index:50;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}
.topbar .wrap{
  max-width:1200px; margin:auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px 18px;
}
.brand{ font-weight:800; letter-spacing:.3px }
.brand span{ color:var(--orange) }
.nav{ display:flex; gap:18px; font-size:14px; opacity:.95 }
.nav a{ padding:6px 8px; border-radius:8px }
.nav a:hover{ background:rgba(255,255,255,.08) }

/* ---------- Hero ---------- */
.hero{ background:linear-gradient(135deg,var(--blue),var(--blue-2)); color:#fff }
.hero .wrap{
  max-width:1200px; margin:auto;
  padding:34px 18px; display:grid; grid-template-columns:1fr; gap:12px;
}
.hero h1{ margin:0 0 4px }
.searchbar{
  display:flex; background:#fff; border-radius:12px; padding:6px; gap:8px;
  box-shadow:var(--shadow); max-width:760px;
}
.searchbar input{
  flex:1; border:0; outline:0; padding:12px 12px; border-radius:10px; font-size:14px;
}
.searchbar button{
  background:var(--orange); border:0; color:#fff; border-radius:10px;
  padding:12px 16px; font-weight:700; cursor:pointer;
}
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
.pill{
  background:#eef2f7; color:#334155;
  border:1px solid #e5e7eb; border-radius:999px; padding:8px 12px; font-size:13px;
}

/* ---------- Main ---------- */
.wrap-main{ max-width:1200px; margin:auto; padding:20px 18px }

/* ======= PRODUCT GRID (Chrome/Firefox/Edge consistent) ======= */
#grid, .grid, .th-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:16px;
  align-items:stretch;
}
#grid > *, .grid > *, .th-grid > *{ min-width:0 }

/* emergency override in case older .grid rules win */
.wrap-main > #grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) !important;
  gap:16px !important;
}

/* ---------- Product card ---------- */
.card{
  background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow); position:relative;
  display:flex; flex-direction:column; gap:10px;
  cursor:pointer; transition:transform .05s ease;
  padding:14px; min-height:240px;
}
.card:hover{ transform:translateY(-2px) }
.card .like{ position:absolute; top:12px; right:12px; opacity:.55 }
.badge{
  position:absolute; top:10px; left:10px; background:#ff8a00; color:#fff;
  border-radius:999px; padding:4px 8px; font-size:12px; box-shadow:0 2px 10px rgba(0,0,0,.1);
}
.badge.new{ background:#16a34a }
.badge.hot{ background:#ef4444 }
.card .cat{ font-size:12px; color:#64748b }
.card .thumb{ font-size:42px; margin-top:8px }
.card .title{ font-weight:800; line-height:1.2 }
.card .rating{ font-size:12px; color:#475569 }
.card .price{ font-weight:800; font-size:18px }
.actions{ display:flex; gap:8px; margin-top:auto }

.btn{
  border:1px solid var(--ring); padding:10px 12px; border-radius:12px;
  background:#fff; cursor:pointer; font-weight:700; font-size:14px
}
.btn.primary{ background:var(--orange); border-color:var(--orange); color:#fff }
.btn.ghost{ background:var(--blue); border-color:var(--blue); color:#fff }
.note{ background:#fff; border-radius:12px; border:1px dashed #e2e8f0; padding:14px }

/* ---------- CTA banner ---------- */
.cta-banner{
  background: linear-gradient(0deg,#fff 70%,#ffe3d0);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom: 12px;
}
.cta-title{ font-weight:800; font-size:18px }
.cta-sub{ color:#334155 }
.cta-actions{ display:flex; gap:8px }

/* ---------- Compare tray ---------- */
.compare-bar{
  position:fixed; left:0; right:0; bottom:0; background:var(--blue); color:#fff;
  padding:10px 16px; display:none; align-items:center; justify-content:space-between; gap:12px;
}
.compare-pill{ background:rgba(255,255,255,.12); padding:8px 12px; border-radius:999px }

/* ---------- Footer (legacy generic) ---------- */
footer{ background:var(--blue); color:#d1e7ff; margin-top:40px }
footer .wrap{
  max-width:1200px; margin:auto;
  padding:60px 18px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px;
}
footer h4{ margin:0 0 8px; color:#fff }
footer input[type=email]{ width:100%; padding:10px; border-radius:8px; border:1px solid #cbd5e1; margin:6px 0 }

/* ---------- Inputs (shared) ---------- */
.label{ font-size:12px; color:#6b7280; margin:4px 0 }
.input,.select,.textarea{
  width:100%; padding:12px 12px; border:1px solid var(--ring); border-radius:12px;
  background:#fff; outline:none; font-size:14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus,.select:focus,.textarea:focus{
  border-color:#cbd5e1; box-shadow:0 0 0 3px rgba(255,106,0,.15);
}

/* ---------- Combobox helpers ---------- */
.select-look{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'><path d='M6 8l4 4 4-4' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  padding-right:40px;
}
.select-look::-ms-expand{ display:none }
.select-look::placeholder{ color:#94a3b8 }

.combo{ position:relative }
.combo .combo-list{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:#fff; border:1px solid var(--ring); border-radius:12px;
  box-shadow:var(--shadow); max-height:260px; overflow:auto; display:none; z-index:1000; padding:4px 0;
}
.combo.open .combo-list{ display:block }
.combo .opt{ padding:10px 12px; cursor:pointer; font-size:14px; display:flex; flex-direction:column; gap:2px }
.combo .opt .name{ font-weight:700; color:#0f172a }
.combo .opt .site{ font-size:12px; color:#64748b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.combo .opt:hover, .combo .opt.active{ background:#f1f5f9 }

/* ---------- PRODUCT PAGE (two-column layout; sticky right) ---------- */
.breadcrumb{ font-size:12px; color:#64748b }

.product-area{
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px; /* FF-safe: left can shrink */
  gap:20px; margin-top:12px;
}

/* Viewer (left) */
.viewer{ background:#fff; border-radius:12px; box-shadow:var(--shadow); padding:12px; min-width:0 }
.viewer .stage{
  height:320px; border:1px solid #e5e7eb; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:56px; background:#fbfbfe; overflow:hidden;
}
.viewer .thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap }
.viewer .thumb{
  height:54px; width:54px; border:1px solid #e5e7eb; border-radius:12px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; background:#fff;
}
.viewer .thumb.active{ outline:2px solid #ff6a00 }

/* Sidecard (right) – avoid overflow ancestors; FF sticky works */
.sidecard{
  background:#fff; border-radius:12px; box-shadow:var(--shadow);
  padding:14px; position:sticky; top:84px; align-self:start;
  max-width:420px; width:100%; min-width:0;
}
.sku{ font-size:12px; color:#64748b; margin-bottom:8px }
.p-title{ font-size:20px; font-weight:800; line-height:1.2; margin:4px 0 }
.pricebox{ border:1px solid #e5e7eb; border-radius:12px; padding:12px; margin:10px 0; background:#fff }
.pricebox .price{ font-size:26px; font-weight:800 }
.pricebox .note{ margin-top:6px; font-size:12px; border:none; padding:0; color:#475569 }
.badge-flag{ background:#f97316; color:#fff; border-radius:999px; padding:4px 8px; font-size:12px; display:inline-block }

/* KV meta grid */
.meta{
  display:grid;
  grid-template-columns:120px minmax(0,1fr) 120px minmax(0,1fr); /* FF-safe */
  gap:12px 16px; margin-top:8px;
}
.meta .row{ display:contents }
.meta .key{ color:#6b7280 }
.meta .val{ font-weight:700; min-width:0; overflow-wrap:break-word }
.meta .ok{ color:var(--success); font-weight:700 }

.supplier{
  background:#fff; border-radius:12px; box-shadow:var(--shadow); padding:14px;
  margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:10px;
}

/* Tabs + sections */
.tabs{ display:flex; gap:8px; margin-top:18px; border-bottom:1px solid #e5e7eb; overflow:auto }
.tab{ padding:10px 14px; border-radius:10px 10px 0 0; font-weight:700; color:#475569; cursor:pointer; white-space:nowrap }
.tab.active{ color:#ff6a00; border-bottom:3px solid #ff6a00 }
.section{ background:#fff; border-radius:12px; box-shadow:var(--shadow); padding:14px; margin-top:16px }
.h3{ font-weight:800; margin:8px 0 }
.ul{ margin:6px 0 0 16px }
.ul li{ margin:4px 0 }
.tile{ display:flex; align-items:center; gap:10px; background:#f3f4f6; border-radius:10px; padding:10px }
.tile .icon{ font-size:18px }
.small{ font-size:12px; color:#6b7280 }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .product-area{ grid-template-columns:minmax(0,1fr) }
  .sidecard{ position:static; max-width:none }
  .meta{ grid-template-columns:120px minmax(0,1fr) }
}
@media (max-width:768px){
  #grid, .grid, .th-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:480px){
  #grid, .grid, .th-grid{ grid-template-columns:1fr }
}

/* ===== REGISTER PAGE DESKTOP TWO-COLUMN ===== */
.form-grid .form-block{
  background:#fff;
  border:1px solid var(--ring);
  border-radius:12px;
  padding:14px;
  margin-bottom:12px;
  box-shadow:var(--shadow);
}
.form-grid .grid-2{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  column-gap:16px;
  row-gap:12px;
  align-items:start;
}
.form-grid .grid-2 > *{ min-width:0 }
.input,.select,.textarea,.combo{ min-width:0; width:100% }

.input,.select,.textarea{
  padding:12px 12px; border:1px solid var(--ring); border-radius:12px;
  background:#fff; outline:none; font-size:14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus,.select:focus,.textarea:focus{
  border-color:#cbd5e1; box-shadow:0 0 0 3px rgba(255,106,0,.15);
}

.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px }
.chips label{
  background:#f1f5f9; border:1px solid #e5e7eb; border-radius:999px; padding:8px 12px;
  display:flex; align-items:center; gap:8px; cursor:pointer;
}
.chips input{ accent-color: var(--orange) }

.combo{ position:relative }
.combo .combo-list{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:#fff; border:1px solid var(--ring); border-radius:12px;
  box-shadow:var(--shadow); max-height:260px; overflow:auto; display:none; z-index:1000; padding:4px 0;
}
.combo.open .combo-list{ display:block }
.combo .opt{ padding:10px 12px; cursor:pointer; font-size:14px }
.combo .opt:hover,.combo .opt.active{ background:#f1f5f9 }

.select-look{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'><path d='M6 8l4 4 4-4' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  padding-right:40px;
}
.select-look::-ms-expand{ display:none }
.select-look::placeholder{ color:#94a3b8 }

@media (max-width:900px){
  .form-grid .grid-2{ grid-template-columns:1fr !important; }
}

/* ===== Compare page ===== */
.compare-card{
  background:#fff; border:1px solid var(--ring); border-radius:12px;
  box-shadow:var(--shadow); padding:14px;
}
.compare-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.compare-scroller{ overflow:auto; border-radius:10px; }

.compare-table{
  width:100%; border-collapse:separate; border-spacing:0;
  min-width:720px; font-size:14px; color:#0f172a;
}
.compare-table th,.compare-table td{
  padding:12px 14px; border-bottom:1px solid #eef2f7; vertical-align:top;
}
.compare-table thead th{
  position:sticky; top:0; z-index:2; background:#f8fafc; color:#0f172a;
  font-weight:800; white-space:nowrap; box-shadow:inset 0 -1px 0 #e5e7eb;
}
.compare-table :is(thead tr, tbody tr) :is(th, td):first-child{
  position:sticky; left:0; z-index:3; background:#fff;
  width:180px; min-width:180px; color:#475569; font-weight:700;
}
.compare-table tbody tr:nth-child(odd) td,
.compare-table tbody tr:nth-child(odd) th:first-child{ background:#fbfdff; }
.compare-table tbody tr:hover td,
.compare-table tbody tr:hover th:first-child{ background:#f6fafe; }
.compare-table td + td, .compare-table th + th{ border-left:1px solid #f1f5f9; }
.compare-table .price-row td{ font-weight:800; color:#111827; }
.compare-table .price-row th{ color:#334155; }
.compare-table td.best{ background:rgba(22,163,74,.08); outline:2px solid rgba(22,163,74,.25); border-radius:6px; }

@media (max-width:900px){ .compare-card{ padding:10px } .compare-table{ min-width:640px } }
@media (max-width:600px){ .compare-table{ min-width:560px } }

/* ===== RFQ Modal (Firefox-safe) ===== */
body.modal-open { overflow:hidden }

.rfq-overlay{
  position:fixed;
  top:0; right:0; bottom:0; left:0;
  display:none;
  align-items:center; justify-content:center;
  z-index:9999;
  background:rgba(2,8,23,.55);
  -webkit-backdrop-filter:saturate(130%) blur(2px);
  backdrop-filter:saturate(130%) blur(2px);
}
.rfq-overlay.show{ display:flex }
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .rfq-overlay{ background:rgba(2,8,23,.65) }
}
.rfq-modal{
  width:min(760px, calc(100vw - 32px));
  max-height:min(86vh, 780px);
  background:#fff; border-radius:16px;
  box-shadow:var(--shadow), 0 40px 80px rgba(0,0,0,.20);
  display:flex; flex-direction:column; overflow:hidden;
}
.rfq-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; border-bottom:1px solid #eef2f7; position:sticky; top:0; background:#fff; z-index:1
}
.rfq-title{ font-weight:800 }
.rfq-body{ padding:16px 18px; overflow:auto }
.rfq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.rfq-grid .full{ grid-column:1 / -1 }
.rfq-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; border-top:1px solid #eef2f7; background:#fff; position:sticky; bottom:0
}
.rfq-x{ border:0; background:#f1f5f9; width:36px; height:36px; border-radius:10px; cursor:pointer; font-weight:800 }
.input,.select,.textarea,.combo{ min-width:0 }
@media (max-width:720px){ .rfq-grid{ grid-template-columns:1fr } }

/* hard overrides */
.rfq-overlay{
  position:fixed;
  top:0; right:0; bottom:0; left:0;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(2,8,23,.55);
  -webkit-backdrop-filter:saturate(130%) blur(2px);
  backdrop-filter:saturate(130%) blur(2px);
  z-index:2147483647;
}
.rfq-overlay.show{ display:flex !important; }
.rfq-modal{ isolation:isolate; }

/* ===== Seller Dashboard ===== */
.layout{
  max-width:1200px;
  margin:auto;
  padding:20px 18px;
  display:grid;
  grid-template-columns: 240px minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.sidebar{
  position:sticky; top:76px;
  background:#fff;
  border:1px solid var(--ring);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:12px;
  height:fit-content;
}
.menu{ display:flex; flex-direction:column; gap:4px }
.menu a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  color:#0f172a; font-weight:600; cursor:pointer;
}
.menu a:hover{ background:#f3f4f6 }
.menu a.active{ background:#eef2f7 }
.avatar{
  width:32px; height:32px; border-radius:999px;
  display:grid; place-items:center;
  background:#1f2937; color:#fff; font-weight:800;
  border:2px solid rgba(255,255,255,.2);
}
.kpis{
  display:grid;
  grid-template-columns: repeat(4, minmax(180px,1fr));
  gap:16px;
}
.kpis .card{
  background:#fff; border:1px solid var(--ring);
  border-radius:14px; box-shadow:var(--shadow);
  padding:18px; display:flex; flex-direction:column; gap:6px;
  min-width:0;
}
.kpis .card .title{ font-size:22px; font-weight:800 }
.kpis .muted{ color:#6b7280 }
.quick{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap:16px;
}
.quick .card{
  background:#fff; border:1px solid var(--ring);
  border-radius:14px; box-shadow:var(--shadow);
  padding:18px; display:flex; flex-direction:column; gap:6px;
  min-height:96px; min-width:0;
}
.table{
  width:100%;
  border-collapse:separate; border-spacing:0;
  background:#fff; border:1px solid var(--ring);
  border-radius:12px; box-shadow:var(--shadow);
  overflow:hidden; margin-top:10px; min-width:0;
}
.table thead th{
  text-align:left; font-weight:800; font-size:14px;
  background:#f8fafc; color:#0f172a;
  padding:12px 14px; border-bottom:1px solid #eef2f7;
}
.table tbody td{
  padding:12px 14px; border-bottom:1px solid #eef2f7; vertical-align:top;
}
.table tbody tr:nth-child(odd) td{ background:#fbfdff }
.table tbody tr:hover td{ background:#f6fafe }
@media (max-width:1024px){
  .kpis{ grid-template-columns: repeat(2, minmax(180px,1fr)) }
}
@media (max-width:840px){
  .layout{ grid-template-columns: 1fr }
  .sidebar{ position:static }
}
@media (max-width:540px){
  .kpis{ grid-template-columns: 1fr }
}

/* ===== NEW Professional Footer (scoped to .site-footer) ===== */
.site-footer{ background:var(--blue); color:#d1e7ff; margin-top:40px }
.site-footer a{ color:#dbeafe }
.site-footer a:hover{ color:#fff; text-decoration:underline; text-underline-offset:2px }
.site-footer .footer-top{
  max-width:1200px; margin:auto;
  padding:46px 18px;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1.2fr;
  gap:20px; align-items:start;
}
@media (max-width:1024px){
  .site-footer .footer-top{ grid-template-columns: repeat(2, minmax(0,1fr)) }
}
@media (max-width:640px){
  .site-footer .footer-top{ grid-template-columns: 1fr }
}
.site-footer h4{ margin:0 0 10px; color:#fff; font-weight:800 }
.foot-brand .brand{ font-size:20px; margin-bottom:8px }
.foot-brand .brand span{ color:var(--orange) }
.foot-brand p{ margin:0; color:#cbe1ff }
.foot-icons{ display:flex; gap:8px; margin-top:12px }
.foot-icon{
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:999px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  transition:background .15s ease, transform .05s ease;
}
.foot-icon:hover{ background:rgba(255,255,255,.18); transform:translateY(-1px) }
.foot-icon svg{ width:18px; height:18px; fill:#dbeafe }
.foot-list{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:8px }
.foot-news small{ color:#cbe1ff }
.foot-news-form{ display:flex; align-items:center; gap:8px; margin-top:8px }
.foot-news-form input[type=email]{
  flex:1; min-width:0; background:#fff; color:#0f172a;
  border:1px solid #cbd5e1; border-radius:10px; padding:10px 12px; outline:none;
}
.foot-news-form button.btn{ padding:10px 14px; border-radius:10px }
.footer-bottom{ background:var(--blue-2); border-top:1px solid rgba(255,255,255,.08) }
.foot-bottom-wrap{
  max-width:1200px; margin:auto;
  padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
}
.foot-mini-links{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:13px }
.foot-copy-mini{ font-size:13px; opacity:.95 }
.site-footer .input{ background:#fff; color:#0f172a }