/* HOMEBRAND preview (12 Nov 2026): new Home + Order hub.
   Colours only via theme vars --primary --accent --background --card --text.
   The red Order button stays brand red on every theme. */
#view .hb{color:var(--text);padding:0 0 28px}
#view .hb .wrap{padding-left:16px;padding-right:16px}
#view .hb-head{display:flex;align-items:center;gap:12px;margin:4px 0 14px;padding:14px 14px;background:var(--card);border:1px solid color-mix(in srgb,var(--text) 14%,transparent);border-radius:16px}
#view .hb-head img.hb-lg{width:52px;height:52px;object-fit:contain;flex:0 0 auto}
#view .hb-head img.hb-lgD{display:none}
html[data-theme=dark] #view .hb-head img.hb-lgL{display:none}
html[data-theme=dark] #view .hb-head img.hb-lgD{display:block}
#view .hb-head .hbk{margin:0;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary)}
#view .hb-head h1{margin:2px 0 0;font-size:18px;line-height:1.2;color:var(--text)}
#view .hb-head p{margin:4px 0 0;font-size:12px;line-height:1.35;color:color-mix(in srgb,var(--text) 68%,transparent)}

#view .hb-grid{display:grid;gap:12px;margin:0 0 16px}
@media(min-width:720px){#view .hb-grid{grid-template-columns:1fr 1fr}}
#view .hb-card{background:var(--card);border:1px solid color-mix(in srgb,var(--text) 14%,transparent);border-radius:16px;padding:14px 14px 12px}
#view .hb-card h2{margin:0 0 8px;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--primary)}
#view .hb-card .hb-name{margin:0;font-size:17px;font-weight:800;color:var(--text)}
#view .hb-card .hb-sub,#view .hb-card .hb-meta{margin:4px 0 0;font-size:13px;color:color-mix(in srgb,var(--text) 70%,transparent)}
#view .hb-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;margin:0;font-size:13px}
#view .hb-card dt{color:color-mix(in srgb,var(--text) 62%,transparent);font-weight:650}
#view .hb-card dd{margin:0;color:var(--text);word-break:break-word}
#view .hb-card dd a{color:var(--accent);text-decoration:none;font-weight:700}
#view .hb-login{display:inline-flex;margin-top:10px;align-items:center;justify-content:center;height:40px;padding:0 14px;border-radius:12px;background:var(--primary);color:var(--card);font-weight:800;font-size:14px;text-decoration:none!important}
#view .hb-ledger{display:flex;gap:8px;margin-top:10px}
#view .hb-ledger a{flex:1;background:color-mix(in srgb,var(--primary) 10%,var(--card));border-radius:12px;padding:8px 10px;text-decoration:none!important;color:var(--text)}
#view .hb-ledger small{display:block;font-size:11px;color:color-mix(in srgb,var(--text) 62%,transparent)}
#view .hb-ledger b{display:block;margin-top:2px;font-size:16px;color:var(--text)}

#view .hb-brands{margin:0 0 18px}
#view .hb-brands .hbkick{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary);margin:0 0 4px}
#view .hb-brands h2{margin:0 0 10px;font-size:18px;color:var(--text)}
#view .hb-brandrow{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 0 8px;scroll-snap-type:x mandatory}
#view .hb-brand{flex:0 0 auto;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;gap:8px;min-width:108px;height:56px;padding:8px 12px;background:var(--card);border:1px solid color-mix(in srgb,var(--text) 14%,transparent);border-radius:14px;text-decoration:none!important;color:var(--text)}
#view .hb-brand img{max-height:28px;max-width:88px;width:auto;height:auto;object-fit:contain}
#view .hb-brand.ink{background:var(--accent)}
#view .hb-brand.ink img{max-height:22px}
#view .hb-brand b{font-size:13px;font-weight:800;color:var(--text)}
#view .hb-brand .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

#view .hb-show{margin:0 0 10px}
#view .hb-show .srhd h2{font-size:20px}
#view .hb-cats{margin:0 0 18px}
#view .hb-cats .hbkick{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary);margin:0 0 4px}
#view .hb-cats h2{margin:0 0 12px;font-size:18px;color:var(--text)}
#view .hb-catg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:720px){#view .hb-catg{grid-template-columns:repeat(3,1fr)}}
#view .hb-cat{display:flex;flex-direction:column;background:var(--card);border:1px solid color-mix(in srgb,var(--text) 14%,transparent);border-radius:16px;overflow:hidden;text-decoration:none!important;color:var(--text);min-height:168px}
#view .hb-cati{display:block;aspect-ratio:1.15/1;background:color-mix(in srgb,var(--primary) 8%,var(--card));overflow:hidden}
#view .hb-cati img{width:100%;height:100%;object-fit:contain;display:block}
#view .hb-cat b{display:block;margin:8px 10px 0;font-size:14px;line-height:1.25;color:var(--text)}
#view .hb-cat small{display:block;margin:2px 10px 10px;font-size:12px;color:color-mix(in srgb,var(--text) 64%,transparent)}

#view .hb-go,#view .hb-go:visited{
  display:flex;align-items:center;gap:12px;margin:4px 0 10px;padding:14px 16px;
  background:var(--order,#D81E27);color:var(--ordert,#FFFFFF);
  border-radius:16px;text-decoration:none!important;box-shadow:none
}
#view .hb-go .hb-goi{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ordert,#FFFFFF) 18%,transparent);font-size:20px}
#view .hb-go b{display:block;font-size:18px;line-height:1.2;color:var(--ordert,#FFFFFF)}
#view .hb-go small{display:block;margin-top:2px;font-size:12px;font-weight:650;color:color-mix(in srgb,var(--ordert,#FFFFFF) 86%,transparent)}
#view .hb-go em{margin-left:auto;font-style:normal;font-size:22px;color:var(--ordert,#FFFFFF)}

#view .hb-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 0 12px;margin:0 0 14px}
#view .hb-chip,#view .hb-chip:visited{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;
  border-radius:999px;background:var(--card);color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 16%,transparent);
  text-decoration:none!important;font-size:13px;font-weight:700;white-space:nowrap
}
#view .hb-chip b{font-weight:800}
#view button.hb-chip{font:inherit;cursor:pointer;color:var(--text);background:var(--card)}

#view .hb-hub{display:grid;gap:10px;margin:0 0 16px}
#view .hb-act,#view .hb-act:visited{
  display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);
  border:1px solid color-mix(in srgb,var(--text) 14%,transparent);border-radius:16px;
  text-decoration:none!important;color:var(--text)
}
#view .hb-act .hb-ai{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--primary) 12%,var(--card));color:var(--primary);font-size:18px}
#view .hb-act b{display:block;font-size:15px;color:var(--text)}
#view .hb-act small{display:block;margin-top:2px;font-size:12px;color:color-mix(in srgb,var(--text) 66%,transparent)}
#view .hb-act em{margin-left:auto;font-style:normal;color:var(--primary);font-size:20px}
#view button.hb-act{width:100%;text-align:left;font:inherit;cursor:pointer;border:1px solid color-mix(in srgb,var(--text) 14%,transparent);background:var(--card);color:var(--text)}
#view .hb-cartsum{display:flex;align-items:center;gap:12px;padding:14px;background:var(--card);border:1px solid color-mix(in srgb,var(--text) 14%,transparent);border-radius:16px;text-decoration:none!important;color:var(--text)}
#view .hb-cartsum .hb-tot{margin-left:auto;text-align:right}
#view .hb-cartsum .hb-tot b{display:block;font-size:18px;color:var(--text)}
#view .hb-cartsum .hb-tot small{color:var(--accent);font-weight:700}

#view .hb-track{margin:4px 0 8px}
#view .hb-hubh{margin:8px 0 8px;font-size:16px;color:var(--text)}

/* Bottom nav: primary Home · Order · Cart · My Orders · Account */
html .bnav a[data-nav=order]{display:flex}
html.hbnav .bnav a[data-nav=shop],
html.hbnav .bnav #bSearch,
html.hbnav .bnav .bnml,
html.hbnav .bnav .bwa{display:none!important}
html.hbnav .bnav{grid-template-columns:repeat(5,minmax(0,1fr))}
html.hbnav:not(.hxin) .bnav{grid-template-columns:repeat(4,minmax(0,1fr))}
html.hbnav.appx .bnav a[data-nav=account],
html.hbnav.appx.hxin .bnav a[data-nav=account]{display:flex!important}
html.hbnav.hxin.hxyq .bnav a[data-nav=account]{display:none!important}
html.hbnav.hxin.hxyq .bnav{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Keep horizontal chip / brand / showroom rows inside the 360px viewport */
#view .hb,#view .hb .wrap{max-width:100%;overflow-x:hidden}
#view .hb-brandrow,#view .hb-chips{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
#view .hb-brand{position:relative}
#view .hb-show,#view .hb .srsec,#view .hb .srtrack{max-width:100%;overflow-x:auto}
/* Guest marketing hero stays on the old home; the new first page starts with the company header */
html.hbnav #lxFront{display:none!important}

/* ---- typography: Amit Trading Company + customer firm (all 10 themes) ---- */
html.hbnav .hdr .lgt b,
html.hbnav .hdr .apt b{
  font-weight:750;
  letter-spacing:-.02em;
  line-height:1.15;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
html.hbnav .hdr .apt small,
html.hbnav .hdr .lgt small{
  display:block;
  margin-top:1px;
  font-weight:650;
  letter-spacing:.01em;
  line-height:1.3
}
#view .hb-head{
  align-items:flex-start;
  gap:14px;
  padding:16px 16px 14px
}
#view .hb-head .hb-co-tx{min-width:0;flex:1}
#view .hb-head .hbk{
  margin:0;
  font-size:11px;
  font-weight:750;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--primary)
}
#view .hb-head h1,
#view .hb-head .hb-coname{
  margin:3px 0 0;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.15;
  color:var(--text);
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
#view .hb-head .hb-tagline{
  margin:6px 0 0;
  font-size:13px;
  font-weight:650;
  letter-spacing:.01em;
  line-height:1.35;
  color:color-mix(in srgb,var(--text) 72%,transparent)
}
#view .hb-head .hb-place{
  margin:3px 0 0;
  font-size:12px;
  line-height:1.35;
  color:color-mix(in srgb,var(--text) 62%,transparent)
}
#view .hb-firmrow{display:flex;align-items:flex-start;gap:12px;min-width:0}
#view .hb-ini{
  flex:0 0 auto;
  width:44px;height:44px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--primary) 14%,var(--card));
  color:var(--primary);
  font-weight:800;font-size:15px;letter-spacing:.02em
}
#view .hb-hello{margin:0;font-size:12px;font-weight:700;color:color-mix(in srgb,var(--text) 64%,transparent)}
#view .hb-card .hb-name,
#view .hb-card .hb-firm{
  margin:1px 0 0;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.2;
  color:var(--text);
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
#view .hb-card .hb-tagline{
  margin:4px 0 0;
  font-size:13px;
  font-weight:650;
  line-height:1.35;
  color:color-mix(in srgb,var(--text) 70%,transparent)
}

/* ---- industry showcase ---- */
#view .hb-hero{
  margin:0 0 16px;
  padding:16px 16px 14px;
  background:var(--card);
  border:1px solid color-mix(in srgb,var(--text) 14%,transparent);
  border-radius:18px;
  border-left:5px solid var(--primary)
}
#view .hb-hero .hbk{margin:0;font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
#view .hb-hero h2{margin:4px 0 0;font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.2;color:var(--text)}
#view .hb-hero p{margin:6px 0 0;font-size:14px;line-height:1.45;color:color-mix(in srgb,var(--text) 72%,transparent)}
#view .hb-work{margin:0 0 18px}
#view .hb-work .hbkick{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary);margin:0 0 4px}
#view .hb-work h2{margin:0 0 4px;font-size:18px;color:var(--text)}
#view .hb-worksub{margin:0 0 12px;font-size:13px;line-height:1.4;color:color-mix(in srgb,var(--text) 70%,transparent)}
#view .hb-pg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:720px){#view .hb-pg{grid-template-columns:repeat(3,1fr)}}
#view .hb-pc{
  display:flex;flex-direction:column;
  background:var(--card);
  border:1px solid color-mix(in srgb,var(--text) 14%,transparent);
  border-radius:16px;overflow:hidden;
  text-decoration:none!important;color:var(--text);min-width:0
}
#view .hb-pci{display:block;aspect-ratio:1;background:color-mix(in srgb,var(--primary) 8%,var(--card));overflow:hidden}
#view .hb-pci img{width:100%;height:100%;object-fit:contain;display:block}
#view .hb-pc small{display:block;margin:8px 10px 0;font-size:11px;font-weight:700;color:color-mix(in srgb,var(--text) 64%,transparent);letter-spacing:.02em}
#view .hb-pc b{display:block;margin:2px 10px 0;font-size:13px;line-height:1.3;color:var(--text);
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#view .hb-ppr{margin:6px 10px 10px;font-size:13px;font-weight:750;color:var(--text)}
#view .hb-ppr a{color:var(--accent);font-weight:700;text-decoration:none}
#view .hb-sw{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:0 0 12px;padding:8px 10px;
  background:var(--card);
  border:1px dashed color-mix(in srgb,var(--text) 22%,transparent);
  border-radius:12px;font-size:12px;color:color-mix(in srgb,var(--text) 70%,transparent)
}
#view .hb-sw b{color:var(--text);font-weight:800;margin-right:4px}
#view .hb-sw a,#view .hb-sw a:visited{
  display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;
  background:color-mix(in srgb,var(--primary) 10%,var(--card));
  color:var(--text);text-decoration:none!important;font-weight:700
}
#view .hb-sw a.on{background:var(--primary);color:var(--card)}

/* ---- IMGFIX (12 Nov 2026, Krishna t1993u "sare images strech ho rahe hai") ----
   The showroom slider (srHero: .srsec/.srtrack/.srbig/.srph) was styled only under the old dashboard (.db, ordersshow.css).
   On the new Home (.hb) it had no rules, so each <img width=640 height=640> was squeezed to the card width (max-width:100%)
   while keeping height:640px -> stretched. CSS only: natural aspect ratio, object-fit:contain, never cropped. */
#view .hb img{object-fit:contain}
#view .hb .srsec{margin:6px 0 18px}
#view .hb .srhd{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;margin:0 0 12px}
#view .hb .srkick{flex-basis:100%;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary)}
#view .hb .srhd h2{margin:0;font-size:18px;color:var(--text)}
#view .hb .srhd a{margin-left:auto;font-size:12px;font-weight:700;color:var(--accent);text-decoration:none}
#view .hb .srtrack{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:2px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
#view .hb .srtrack::-webkit-scrollbar{display:none}
#view .hb .srbig{flex:0 0 74%;max-width:280px;min-width:0;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--card);border:1px solid color-mix(in srgb,var(--text) 14%,transparent);border-radius:16px;overflow:hidden}
#view .hb .srph{position:relative;display:flex;align-items:center;justify-content:center;height:200px;padding:10px;box-sizing:border-box;background:#fff;overflow:hidden}
#view .hb .srph img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center}
#view .hb .srbd{position:absolute;left:10px;top:10px;z-index:1;font-size:10.5px;font-weight:800;border-radius:999px;padding:4px 9px}
#view .hb .srbd.in{background:#e8f7f0;color:#0d8a5c}
#view .hb .srbd.low{background:#fff4dc;color:#b45309}
#view .hb .srtx{padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
#view .hb .srbr{min-height:18px;display:flex;align-items:center;font-size:11px;font-weight:700;color:color-mix(in srgb,var(--text) 64%,transparent)}
#view .hb .srbr img{max-height:17px;width:auto;height:auto;max-width:110px}
#view .hb .srnm{font-size:14.5px;font-weight:800;line-height:1.25;color:var(--text);text-decoration:none!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
#view .hb .srwr{font-size:11px;color:color-mix(in srgb,var(--text) 64%,transparent);font-weight:600}
#view .hb .srrow{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;min-width:0}
#view .hb .srrow .srpr{flex:1;min-width:0}
#view .hb .srend{flex:0 0 46%;max-width:180px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:14px;text-align:center;background:var(--card);border:1px dashed color-mix(in srgb,var(--text) 22%,transparent);border-radius:16px;color:var(--text);text-decoration:none!important}
#view .hb .srend span{font-size:26px}
#view .hb .srend small{font-size:11px;color:color-mix(in srgb,var(--text) 64%,transparent)}
#view .hb .srend em{font-style:normal;font-size:20px;color:var(--accent)}
/* shelves / mini cards, if they ever render on the new Home */
#view .hb .srmph{display:flex;align-items:center;justify-content:center;height:118px;padding:6px;box-sizing:border-box;border-radius:14px;background:#fff;overflow:hidden}
#view .hb .srmph img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
/* old home brand chips: TDK logo was 6% off its ratio */
#view img.brl{object-fit:contain}