@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800;0,6..12,900&family=Inter:wght@400;500;600;700;800&display=swap");

/* ===========================================================================
   Tred India B2B (B2B Compact Business) — generated Tier-B section CSS
   Uploaded to the store's dedicated generated-CSS file (site_settings.sx_css_location).
   It cascades globally, so EVERY selector is namespaced under .sx / .sx-<section>.
   No bare element selectors, no body/html/:root, no *, no @import.
   =========================================================================== */

/* BEGIN shoopy-gen:base */
.sx {
  /* brand comes from the theme so the sections re-skin with the store */
  --sx-brand: var(--secondary-main, #014EC2);
  --sx-deep: #012E83;
  --sx-deal: #FD5701;          /* offer / discount only */
  --sx-deal-ink: #B03C00;      /* orange as TEXT on light (AA: 6.0:1) */
  --sx-go: #0F7A40;            /* success / enquiry (AA on white text: 5.4:1) */
  --sx-ink: #14161A;
  --sx-muted: #5B6470;
  --sx-line: #E4E8EF;
  --sx-bg: #F4F7FC;
  --sx-surface: #ffffff;
  --sx-tint: #E8F0FD;
  --sx-warm: #FFF1E6;
  --sx-r-sm: 8px;
  --sx-r-md: 12px;
  --sx-r-lg: 18px;
  --sx-r-pill: 999px;
  --sx-gap: 16px;
  --sx-max: 1240px;
  --sx-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --sx-shadow-md: 0 8px 24px rgba(8, 30, 80, .08);

  width: 100%;
  color: var(--sx-ink);
  font-family: inherit;
  box-sizing: border-box;
}
.sx *,
.sx *::before,
.sx *::after { box-sizing: border-box; }

.sx .sx-wrap {
  width: 100%;
  max-width: var(--sx-max);
  margin: 0 auto;
  padding: 0 16px;
}

/* section heading — matches the theme's own section headings */
.sx .sx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.sx .sx-head-t { font-size: 21px; font-weight: 800; letter-spacing: -.3px; line-height: 1.15; margin: 0; }
.sx .sx-head-s { font-size: 13px; color: var(--sx-muted); margin: 4px 0 0; }
.sx .sx-head-link { font-size: 13px; font-weight: 700; color: var(--sx-brand); white-space: nowrap; text-decoration: none; }

.sx .sx-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--sx-deal-ink);
}
.sx .sx-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sx-deal); }

/* buttons — one colour per job: blue = buy, green = enquire, white = secondary */
.sx .sx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--sx-r-pill);
  font-size: 14px; font-weight: 800; line-height: 1;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.sx .sx-btn:hover { transform: translateY(-1px); box-shadow: var(--sx-shadow-md); }
.sx .sx-btn-primary { background: var(--sx-brand); color: #fff; }
.sx .sx-btn-go { background: var(--sx-go); color: #fff; }
.sx .sx-btn-ghost { background: transparent; color: var(--sx-brand); border-color: rgba(1, 78, 194, .35); }
.sx .sx-btn-light { background: #fff; color: var(--sx-deep); }
.sx .sx-btn-sm { padding: 9px 16px; font-size: 13px; }

.sx .sx-card {
  background: var(--sx-surface);
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-lg);
  box-shadow: var(--sx-shadow);
}

.sx .sx-badge {
  display: inline-block; padding: 3px 8px; border-radius: var(--sx-r-sm);
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
}
.sx .sx-badge-deal { background: var(--sx-deal); color: #14161A; }
.sx .sx-badge-soft { background: var(--sx-tint); color: var(--sx-deep); }

.sx .sx-moq {
  display: inline-block; font-size: 11px; font-weight: 700; color: var(--sx-deep);
  background: var(--sx-tint); border-radius: var(--sx-r-sm); padding: 2px 7px;
}

.sx .sx-ico { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; }

.sx .sx-scroller {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding-bottom: 6px;
  scrollbar-width: thin;
}
.sx .sx-scroller > * { scroll-snap-align: start; flex: 0 0 auto; }
/* END shoopy-gen:base */


/* BEGIN shoopy-gen:usp-strip */
.sx-usp { padding: 14px 0 2px; }
.sx-usp .sx-usp-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  list-style: none; margin: 0; padding: 0;
}
.sx-usp .sx-usp-item {
  display: flex; align-items: center; gap: 11px;
  background: var(--sx-surface); border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-md); padding: 12px 13px;
}
.sx-usp .sx-usp-ico {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; background: var(--sx-tint); color: var(--sx-deep);
}
.sx-usp .sx-usp-t { font-size: 13.5px; font-weight: 800; line-height: 1.25; }
.sx-usp .sx-usp-d { font-size: 11.5px; color: var(--sx-muted); line-height: 1.35; margin-top: 2px; }
@media (min-width: 768px) {
  .sx-usp .sx-usp-list { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .sx-usp .sx-usp-item { padding: 14px 16px; }
  .sx-usp .sx-usp-t { font-size: 14px; }
}
/* END shoopy-gen:usp-strip */


/* BEGIN shoopy-gen:watch-buy */
.sx-reels { padding: 26px 0 6px; }
.sx-reels .sx-reel {
  width: 168px; background: var(--sx-surface);
  border: 1px solid var(--sx-line); border-radius: var(--sx-r-lg); overflow: hidden;
  box-shadow: var(--sx-shadow); text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
}
.sx-reels .sx-reel-media { position: relative; aspect-ratio: 9 / 16; background: var(--sx-tint); overflow: hidden; }
.sx-reels .sx-reel-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-reels .sx-reel-live {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(10, 16, 32, .72); color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--sx-r-pill); backdrop-filter: blur(4px);
}
.sx-reels .sx-reel-live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sx-deal);
  animation: sx-reel-pulse 1.6s ease-in-out infinite;
}
@keyframes sx-reel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.sx-reels .sx-reel-mute {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(10, 16, 32, .55); color: #fff; display: grid; place-items: center;
}
.sx-reels .sx-reel-mute .sx-ico { width: 13px; height: 13px; stroke-width: 2.2; }
.sx-reels .sx-reel-body { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.sx-reels .sx-reel-brand { font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--sx-muted); text-transform: uppercase; }
.sx-reels .sx-reel-t {
  font-size: 12.5px; font-weight: 700; line-height: 1.3; min-height: 32px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sx-reels .sx-reel-p { font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.sx-reels .sx-reel-p span { font-size: 11px; font-weight: 600; color: var(--sx-muted); }
.sx-reels .sx-reel-cta { margin-top: auto; width: 100%; }
@media (min-width: 768px) { .sx-reels .sx-reel { width: 192px; } }
@media (min-width: 1024px) {
  .sx-reels .sx-scroller { display: grid; grid-template-columns: repeat(6, 1fr); overflow: visible; }
  .sx-reels .sx-reel { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-reels .sx-reel-live::before { animation: none; }
}
/* END shoopy-gen:watch-buy */


/* BEGIN shoopy-gen:rate-card */
.sx-rate { padding: 28px 0 6px; }
.sx-rate .sx-rate-panel {
  background: var(--sx-surface); border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-lg); overflow: hidden; box-shadow: var(--sx-shadow);
}
.sx-rate .sx-rate-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 18px; background: var(--sx-deep); color: #fff;
}
.sx-rate .sx-rate-top h3 { font-size: 16px; font-weight: 800; margin: 0; }
.sx-rate .sx-rate-top p { font-size: 12px; margin: 3px 0 0; color: #BCD1F3; }
.sx-rate .sx-rows { display: block; }
.sx-rate .sx-row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  padding: 13px 18px; border-top: 1px solid var(--sx-line); align-items: center;
}
.sx-rate .sx-row-n { font-size: 13.5px; font-weight: 700; }
.sx-rate .sx-row-b { font-size: 11.5px; color: var(--sx-muted); grid-column: 1; }
.sx-rate .sx-row-p { font-size: 15px; font-weight: 800; text-align: right; grid-row: 1; grid-column: 2; white-space: nowrap; }
.sx-rate .sx-row-p em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--sx-muted); }
.sx-rate .sx-row-m { grid-row: 2; grid-column: 2; text-align: right; }
.sx-rate .sx-rate-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 14px 18px; border-top: 1px solid var(--sx-line); background: var(--sx-bg);
}
.sx-rate .sx-rate-note { font-size: 11.5px; color: var(--sx-muted); flex: 1 1 220px; }
.sx-rate .sx-brands { display: grid; gap: 10px; margin-top: 14px; }
.sx-rate .sx-brand-grp {
  background: var(--sx-surface); border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-md); padding: 13px 15px;
}
.sx-rate .sx-brand-grp h4 { font-size: 12px; font-weight: 800; margin: 0 0 9px; letter-spacing: .2px; }
.sx-rate .sx-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sx-rate .sx-chip {
  font-size: 12px; font-weight: 700; color: var(--sx-deep);
  border: 1px solid var(--sx-line); background: var(--sx-bg);
  border-radius: var(--sx-r-pill); padding: 6px 12px; text-decoration: none;
}
.sx-rate .sx-chip:hover { border-color: var(--sx-brand); background: var(--sx-tint); }
.sx-rate .sx-chip-more { color: var(--sx-muted); border-style: dashed; }
@media (min-width: 768px) {
  .sx-rate .sx-row { grid-template-columns: 1.4fr 1fr auto auto; padding: 14px 20px; }
  .sx-rate .sx-row-b { grid-column: 2; grid-row: 1; font-size: 12px; }
  .sx-rate .sx-row-p { grid-column: 3; }
  .sx-rate .sx-row-m { grid-column: 4; grid-row: 1; min-width: 96px; }
  .sx-rate .sx-brands { grid-template-columns: 1fr 1fr; }
}
/* END shoopy-gen:rate-card */


/* BEGIN shoopy-gen:why-us */
.sx-why { padding: 30px 0 8px; }
.sx-why .sx-why-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.sx-why .sx-why-card {
  background: var(--sx-surface); border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-lg); padding: 18px; box-shadow: var(--sx-shadow);
}
.sx-why .sx-why-ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--sx-tint); color: var(--sx-deep); margin-bottom: 12px;
}
.sx-why .sx-why-ico .sx-ico { width: 21px; height: 21px; }
.sx-why .sx-why-t { font-size: 15px; font-weight: 800; margin: 0 0 6px; }
.sx-why .sx-why-d { font-size: 13px; color: var(--sx-muted); line-height: 1.5; margin: 0; }

.sx-why .sx-steps {
  margin-top: 14px; background: var(--sx-deep); border-radius: var(--sx-r-lg);
  padding: 20px 18px; color: #fff;
}
.sx-why .sx-steps-h { font-size: 16px; font-weight: 800; margin: 0 0 4px; }
.sx-why .sx-steps-s { font-size: 12.5px; color: #BCD1F3; margin: 0 0 16px; }
.sx-why .sx-steps-list { display: grid; grid-template-columns: 1fr; gap: 14px; list-style: none; margin: 0; padding: 0; }
.sx-why .sx-step { display: flex; gap: 12px; align-items: flex-start; }
.sx-why .sx-step-n {
  flex: none; width: 27px; height: 27px; border-radius: 50%; background: var(--sx-deal);
  color: #14161A; font-size: 12.5px; font-weight: 900; display: grid; place-items: center;
}
.sx-why .sx-step-t { font-size: 13.5px; font-weight: 800; }
.sx-why .sx-step-d { font-size: 12px; color: #BCD1F3; line-height: 1.45; margin-top: 2px; }
.sx-why .sx-steps-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (min-width: 640px) { .sx-why .sx-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .sx-why .sx-why-grid { grid-template-columns: repeat(4, 1fr); }
  .sx-why .sx-steps { padding: 26px 28px; }
  .sx-why .sx-steps-list { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}
/* END shoopy-gen:why-us */

/* =========================================================================
   THEME SIMULATION — Zippy base, re-skinned with the logo palette.
   This block stands in for what the Shoopy THEME already renders (chrome +
   native Tier-A sections). It is NOT published; only theme.css is.
   ========================================================================= */
:root{
  --secondary-main:#014EC2;      /* logo blue — brand + primary CTA */
  --secondary-dark:#012E83;      /* logo deep blue */
  --secondary-soft:#E8F0FD;
  --deal:#FD5701;                /* logo orange — offers/discount ONLY */
  --deal-ink:#B03C00;            /* orange as text on light (AA 6.0:1) */
  --go:#0F7A40;                  /* success / bulk-enquiry (AA 5.4:1) */
  --ink:#14161A; --ink-2:#333A45;
  --muted:#5B6470; --muted-2:#828C9A;
  --line:#E4E8EF; --line-2:#EEF1F6;
  --bg:#F4F7FC; --surface:#ffffff; --warm:#FFF1E6;
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;
  --container:1240px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow-md:0 8px 24px rgba(8,30,80,.08);
  --shadow-lg:0 18px 44px rgba(8,30,80,.14);
  --font-head:"Nunito Sans", system-ui, -apple-system, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.45;-webkit-font-smoothing:antialiased;padding-bottom:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.14}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 16px}
.icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sx{font-family:var(--font-body)}
.sx h1,.sx h2,.sx h3,.sx h4{font-family:var(--font-head)}

/* ---------- 1. NOTICE BAR (Tier C) ---------- */
.notice{background:var(--secondary-dark);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.15px}
.notice .container{display:flex;align-items:center;justify-content:center;gap:16px;height:36px;overflow:hidden;white-space:nowrap}
.notice .n-item{display:inline-flex;align-items:center;gap:7px}
.notice .n-item svg{width:14px;height:14px;stroke:var(--deal);flex:none}
.notice b{color:#FFB37A;font-weight:800}
.notice .dot{width:4px;height:4px;border-radius:50%;background:var(--deal);flex:none}
@media (max-width:900px){.notice .n-item:nth-child(n+6){display:none}.notice .dot:nth-child(n+6){display:none}}
@media (max-width:620px){
  .notice{font-size:11px}
  .notice .container{gap:10px}
  /* keep only 'B2B & bulk orders only' + the free-shipping promise */
  .notice .n-item:nth-child(3),.notice .n-item:nth-child(7),.notice .n-item:nth-child(9),
  .notice .dot:nth-child(2),.notice .dot:nth-child(6),.notice .dot:nth-child(8){display:none}
}

/* ---------- 2. HEADER (Tier C) ---------- */
.header{position:sticky;top:0;z-index:60;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)}
.header-main{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:20px;height:72px}
.brand img{height:40px;width:auto}
.ships{display:flex;align-items:flex-start;gap:8px;padding:6px 12px 6px 8px;border-radius:var(--r-md);max-width:236px}
.ships .pin{color:var(--secondary-main);margin-top:2px}
.ships .pin svg{width:19px;height:19px}
.ships .s-top{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.ships .s-eta{display:inline-flex;align-items:center;gap:4px;background:var(--secondary-soft);color:var(--secondary-dark);font-size:10px;font-weight:800;padding:1px 7px;border-radius:var(--r-pill);letter-spacing:0;text-transform:none}
.ships .s-eta i{width:5px;height:5px;border-radius:50%;background:var(--secondary-main);display:block}
.ships .s-bottom{font-size:13.5px;font-weight:800;color:var(--ink);white-space:nowrap}
.search{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:0 14px;height:44px;transition:.15s}
.search:focus-within{border-color:var(--secondary-main);background:#fff;box-shadow:0 0 0 3px rgba(1,78,194,.12)}
.search svg{width:19px;height:19px;color:var(--muted);flex:none}
.search input{flex:1;border:none;outline:none;background:none;font-family:inherit;font-size:14px;color:var(--ink);min-width:0}
.search input::placeholder{color:var(--muted-2)}
.search kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-size:11px;color:var(--muted);font-family:inherit;background:#fff}
.h-actions{display:flex;align-items:center;gap:8px}
.btn-wa{display:inline-flex;align-items:center;gap:8px;background:var(--go);color:#fff;font-size:13.5px;font-weight:800;padding:10px 16px;border-radius:var(--r-pill);white-space:nowrap}
.btn-wa svg{width:17px;height:17px;stroke-width:2}
.h-icon{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 9px;border-radius:var(--r-sm);color:var(--ink-2);font-size:10.5px;font-weight:700;position:relative}
.h-icon:hover{background:var(--bg)}
.h-icon .count{position:absolute;top:1px;right:3px;background:var(--deal);color:#14161A;font-size:9.5px;font-weight:900;min-width:16px;height:16px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
.navbar{border-top:1px solid var(--line-2);background:var(--surface);position:relative}
.navbar::after{content:"";position:absolute;right:0;top:0;bottom:0;width:48px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 72%)}
.navbar .container{display:flex;align-items:center;gap:6px;height:46px;overflow-x:auto;scrollbar-width:none}
.navbar .container::-webkit-scrollbar{display:none}
.nav-chip{font-size:13px;font-weight:700;color:var(--ink-2);padding:7px 13px;border-radius:var(--r-pill);white-space:nowrap;border:1px solid transparent}
.nav-chip:hover{background:var(--bg);border-color:var(--line)}
.nav-chip.is-all{background:var(--secondary-main);color:#fff;display:inline-flex;align-items:center;gap:7px}
.nav-chip.is-all svg{width:14px;height:14px;stroke-width:2.4}
.h-mobile{display:none}
@media (max-width:1080px){
  .header-main{grid-template-columns:auto 1fr auto;gap:14px;height:64px}
  .ships{display:none}
}
@media (max-width:760px){
  .header-main{grid-template-columns:auto 1fr auto;height:58px;gap:10px}
  .brand img{height:32px}
  .header-search-row{padding-bottom:10px}
  .h-actions .btn-wa span,.h-icon span{display:none}
  .btn-wa{padding:9px 11px}
  .h-icon{padding:6px}
  .search{height:42px}
  .search kbd{display:none}
}
@media (min-width:761px){.header-search-row{display:none}}
@media (max-width:760px){.header-main .search{display:none}}

/* ---------- 3. HERO — StoreBanner (Tier A) ---------- */
.hero{padding:16px 0 4px}
.hero-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--secondary-dark)}
.hero-track{display:flex;transition:transform .55s cubic-bezier(.45,.05,.2,1)}
.hero-slide{position:relative;flex:0 0 100%;min-width:100%}
.hero-slide img{width:100%;height:100%;object-fit:cover;aspect-ratio:1920/620}
/* Scrim — guarantees the white headline reads over ANY photo dropped into
   assets/source/, not just the flat procedural panels. Measured, not guessed:
   the supplied warehouse shots put a mid-blue wall and a bright reflective floor
   under the copy (~3.7:1 bare). Desktop darkens left->right; mobile top->bottom. */
.hero-slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(2,18,56,.90) 0%,rgba(2,18,56,.78) 34%,rgba(2,18,56,.42) 56%,rgba(2,18,56,0) 74%)}
.hero-copy{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0 clamp(20px,5vw,64px);max-width:660px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);color:#fff;font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill)}
.hero-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--deal);display:block}
.hero-copy h1{color:#fff;font-size:clamp(26px,3.5vw,46px);font-weight:900;letter-spacing:-1px}
.hero-copy h1 em{font-style:normal;color:#FFB37A;display:block}
.hero-brands{display:flex;flex-wrap:wrap;gap:7px}
.hero-brands span{font-size:10.5px;font-weight:800;letter-spacing:.8px;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);padding:4px 10px;border-radius:var(--r-sm)}
.hero-copy p{color:#D5E3FA;font-size:clamp(13px,1.15vw,15.5px);max-width:440px}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:var(--r-pill);font-size:14px;font-weight:800;line-height:1;border:1.5px solid transparent;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-primary{background:#fff;color:var(--secondary-dark)}
.btn-outline{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.45)}
.btn svg{width:15px;height:15px;stroke-width:2.4}
.hero-dots{position:absolute;left:clamp(20px,5vw,64px);bottom:18px;display:flex;gap:7px;z-index:3}
.hero-dots button{width:9px;height:9px;border-radius:var(--r-pill);background:rgba(255,255,255,.4);transition:.25s}
.hero-dots button[aria-current="true"]{width:26px;background:#fff}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--secondary-dark);display:grid;place-items:center;box-shadow:var(--shadow-md);z-index:3}
.hero-arrow.prev{left:14px}.hero-arrow.next{right:14px}
@media (max-width:1023px){.hero-arrow{display:none}}
.hero-arrow svg{width:17px;height:17px;stroke-width:2.6}
@media (max-width:760px){
  .hero{padding:10px 0 2px}
  .hero-slide img{aspect-ratio:900/1400}
  .hero-slide::after{background:linear-gradient(180deg,rgba(2,18,56,.90) 0%,rgba(2,18,56,.80) 30%,rgba(2,18,56,.44) 48%,rgba(2,18,56,0) 64%)}
  .hero-copy{justify-content:flex-start;padding:26px 22px 0;gap:11px;max-width:100%}
  .hero-copy p{font-size:13px;max-width:100%;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hero-arrow{display:none}
  .hero-dots{bottom:14px;left:22px}
  /* keep both hero CTAs on ONE row so they never land on the product card */
  .hero-cta{flex-wrap:nowrap}
  .btn{padding:10px 14px;font-size:12.5px;white-space:nowrap}
}

/* ---------- section shell ---------- */
.sec{padding:26px 0 6px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.sec-head h2{font-size:21px;font-weight:800;letter-spacing:-.3px}
.sec-head p{font-size:13px;color:var(--muted);margin-top:4px}
.sec-head a{font-size:13px;font-weight:700;color:var(--secondary-main);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.sec-head a svg{width:13px;height:13px;stroke-width:2.6}
@media (min-width:1024px){.sec{padding:34px 0 6px}.sec-head h2{font-size:25px}}

/* ---------- 5. CATEGORIES — ProductCategoriesV2 (Tier A) ---------- */
.cats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.cat{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.cat-thumb{width:100%;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;background:var(--secondary-soft);border:1px solid var(--line);transition:.15s}
.cat:hover .cat-thumb{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(1,78,194,.3)}
.cat-thumb img{width:100%;height:100%;object-fit:cover}
.cat span{font-size:11px;font-weight:700;line-height:1.25;color:var(--ink-2);min-height:2.5em;display:block}
@media (min-width:768px){.cats-grid{grid-template-columns:repeat(5,1fr);gap:14px}.cat span{font-size:12.5px}}
@media (min-width:1024px){.cats-grid{grid-template-columns:repeat(10,1fr);gap:12px}.cat span{font-size:11.5px}}

/* ---------- 6/7/12. BANNER COLLECTION (Tier A) ---------- */
.promo-row{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:1024px){.promo-row{grid-template-columns:1fr 1fr}}
.promo{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);display:block;border:1px solid var(--line)}
.promo img{width:100%;height:100%;object-fit:cover;aspect-ratio:1200/520}
/* content_position = top-left (a value BannerCollection actually supports) —
   the artwork keeps its product mass right (desktop) / low (mobile) to suit it */
.promo .p-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;gap:10px;padding:clamp(18px,3.4vw,34px);max-width:64%}
.promo .p-kicker{font-size:10.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--deal-ink)}
.promo h3{font-size:clamp(17px,2vw,25px);font-weight:900;letter-spacing:-.5px;color:var(--secondary-dark)}
.promo p{font-size:12.5px;color:var(--ink-2);max-width:270px}
.promo .p-btn{align-self:flex-start;background:var(--secondary-main);color:#fff;font-size:13px;font-weight:800;padding:10px 18px;border-radius:var(--r-pill);margin-top:2px}
.promo.is-dark h3,.promo.is-dark .p-kicker{color:#fff}
.promo.is-dark .p-kicker{color:#FFB37A}
.promo.is-dark p{color:#D5E3FA}
.promo.is-dark .p-btn{background:#fff;color:var(--secondary-dark)}
.promo.is-wide img{aspect-ratio:1560/460}
.promo.is-wide .p-copy{max-width:58%}
@media (max-width:767px){
  .promo img,.promo.is-wide img{aspect-ratio:900/950}
  .promo .p-copy,.promo.is-wide .p-copy{max-width:84%}
  .promo h3{font-size:22px}
  .promo p{max-width:100%}
}

/* ---------- 9. PRODUCT CARDS — ProductGridCollection (Tier A, Zippy card) ---------- */
.prod-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.prod-row.is-swipe{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
.prod-row.is-swipe>*{flex:0 0 46%;scroll-snap-align:start}
@media (min-width:640px){.prod-row{grid-template-columns:repeat(3,1fr);gap:12px}.prod-row.is-swipe>*{flex:0 0 31%}}
@media (min-width:1024px){.prod-row{grid-template-columns:repeat(6,1fr)}.prod-row.is-swipe{display:grid;overflow:visible}.prod-row.is-swipe>*{flex:none}}
@media (min-width:640px) and (max-width:1023px){}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;transition:.15s}
.pcard:hover{box-shadow:var(--shadow-md);border-color:rgba(1,78,194,.26)}
.pcard-media{position:relative;aspect-ratio:1;background:#fff;overflow:hidden}
.pcard-media img{width:100%;height:100%;object-fit:contain}
.pcard-off{position:absolute;top:7px;right:7px;background:var(--deal);color:#14161A;font-size:10px;font-weight:900;padding:3px 7px;border-radius:var(--r-xs)}
.pcard-body{padding:9px 10px 11px;display:flex;flex-direction:column;gap:5px;flex:1}
.pcard-brand{font-size:9.5px;font-weight:900;letter-spacing:.6px;color:var(--secondary-main);text-transform:uppercase}
.pcard-title{font-size:12.5px;font-weight:600;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:33px}
.pcard-meta{font-size:10.5px;color:var(--muted);font-weight:600}
.pcard-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto;padding-top:5px}
.pcard-price{font-size:15px;font-weight:900;letter-spacing:-.3px}
.pcard-price small{display:block;font-size:10.5px;font-weight:600;color:var(--muted-2);text-decoration:line-through;letter-spacing:0}
.pcard-add{border:1.5px solid var(--secondary-main);color:var(--secondary-main);background:#fff;font-size:12px;font-weight:900;letter-spacing:.4px;padding:7px 14px;border-radius:var(--r-sm)}
.pcard-add:hover{background:var(--secondary-main);color:#fff}
.pcard-step{display:inline-flex;align-items:center;gap:8px;background:var(--secondary-main);color:#fff;border-radius:var(--r-sm);padding:5px 8px;font-size:12px;font-weight:900}
.pcard-step button{color:#fff;font-size:14px;line-height:1;width:14px}

/* ---------- FOOTER (Tier C) ---------- */
.footer{background:#081733;color:#C6D4EC;margin-top:34px;padding:34px 0 0}
.f-grid{display:grid;grid-template-columns:1fr;gap:26px;padding-bottom:28px}
.f-about img{height:46px;width:auto;margin-bottom:12px}
.f-about p{font-size:12.5px;line-height:1.6;max-width:330px}
.f-contact{display:grid;gap:8px;margin-top:14px}
.f-contact a,.f-contact span{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:#DCE6F8}
.f-contact svg{width:15px;height:15px;stroke:var(--deal);flex:none;margin-top:2px}
.f-col h4{color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;margin-bottom:12px}
.f-col li{margin-bottom:8px}
.f-col a{font-size:12.5px}
.f-col a:hover{color:#fff}
.f-links{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.f-social{display:flex;gap:9px;margin-top:16px}
.f-social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.09);display:grid;place-items:center;color:#fff}
.f-social a:hover{background:var(--secondary-main)}
.f-social svg{width:16px;height:16px;fill:currentColor;stroke:none}
.f-bar{border-top:1px solid rgba(255,255,255,.1);padding:15px 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;font-size:11.5px}
.f-pay{display:flex;gap:7px;flex-wrap:wrap}
.f-pay span{background:rgba(255,255,255,.1);border-radius:5px;padding:4px 9px;font-size:10px;font-weight:800;letter-spacing:.4px;color:#fff}
@media (min-width:768px){.f-grid{grid-template-columns:1.25fr 1fr;gap:40px}.f-links{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.f-grid{grid-template-columns:1.3fr 2fr}}

/* ---------- mobile bottom nav + floating enquiry (Zippy chrome) ---------- */
.bottomnav{display:none}
.fab{position:fixed;right:16px;bottom:86px;z-index:70;display:inline-flex;align-items:center;gap:8px;background:var(--go);color:#fff;font-size:13.5px;font-weight:800;padding:12px 18px;border-radius:var(--r-pill);box-shadow:var(--shadow-lg)}
.fab svg{width:18px;height:18px;stroke-width:2}
@media (max-width:760px){
  body{padding-bottom:64px}
  .bottomnav{display:block;position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(8,30,80,.07)}
  .bottomnav ul{display:grid;grid-template-columns:repeat(5,1fr);height:62px}
  .bottomnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:700;color:var(--muted);position:relative}
  .bottomnav a.is-on{color:var(--secondary-main)}
  .bottomnav svg{width:20px;height:20px}
  .bottomnav .count{position:absolute;top:8px;right:22%;background:var(--deal);color:#14161A;font-size:9px;font-weight:900;min-width:15px;height:15px;border-radius:8px;display:grid;place-items:center;padding:0 3px}
}
@media (min-width:761px){.fab{bottom:24px}}