.new-hero-banner {
  background-color: rgba(0, 0, 0, 0.7) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-blend-mode: multiply;
}

.kitZoomModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  cursor: zoom-out;
}

.ic-product-0b489011 {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

.ic-product-86ab638e {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.ic-product-d616b7d0 {
  position: absolute;
  top: -40px;
  right: 0;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ic-product-ff9a3f78 {
  text-align: center;
  color: rgba(255, 255, 255, .7);
  font-size: .85rem;
  margin-top: .75rem;
  letter-spacing: .5px;
}

.ic-product-signup-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: .6rem;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  margin-top: .6rem;
}

.ic-product-signup-btn:hover {
  background: var(--accent2);
}


/* =========================================================
   LEGACY — OLD "v2-hero" BANNER-IMAGE HERO
   (Ye block sirf purane .v2-hero wale pages ke liye hai.
   Homepage ab .usx-v3 .hero use karta hai — neeche
   "USX-V3 → HERO SECTION" block dekho, wahi actual
   homepage hero ki styling hai jo humne update ki hai.)
   ========================================================= */

.v2-hero.new-hero-banner {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.v2-hero.new-hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, .35));
}

[data-theme="light"] .v2-page .v2-hero.new-hero-banner::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, .62), rgba(0, 0, 0, .42));
}

.v2-hero.new-hero-banner .v2-hero-content h1,
.v2-hero.new-hero-banner .v2-hero-content p {
  color: #fff !important;
}

.v2-hero.new-hero-banner .v2-hero-content p {
  color: rgba(255, 255, 255, .82) !important;
}

.v2-hero.new-hero-banner .v2-hero-eyebrow {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}

.v2-hero.new-hero-banner .v2-hero-content {
  position: relative;
  z-index: 2;
}

.v2-hero.new-hero-banner .v2-hero-quicklinks {
  position: relative;
  z-index: 2;
}

.v2-hero.new-hero-banner .v2-quicklink {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.v2-hero.new-hero-banner .v2-quicklink i {
  color: #fff;
}

.v2-hero.new-hero-banner .v2-quicklink:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.v2-hero.new-hero-banner .v2-quicklink:hover i {
  color: #fff;
}


/* =========================================================
   KIT PRICING CARD CSS
   (MRP / Detailer / Distributor tiered price box
   + Qty selector + Add to Cart row)
   — theme ke actual variables (--line, --surface2, --muted,
   --text, --accent) use kiye hain, purane --border/--card/
   --text3 fallback-only variables hata diye taaki dark/light
   dono theme me colors sahi se badlein.
   ========================================================= */

.v2-price-box {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-top: .6rem;
  min-width: 0;
}

.v2-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
  row-gap: 4px;
  padding: .5rem .65rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  background: var(--surface2);
  min-width: 0;
  position: relative;
}

.v2-price-label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--muted);
  white-space: nowrap;
}

.v2-price-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}

/* MRP row — plain */
.v2-price-mrp {
  border-left-color: var(--line);
}

.v2-price-mrp .v2-price-value {
  color: var(--accent);
  font-weight: 500;
}

/* Detailer row — blue accent */
.v2-price-row.v2-price-detailer {
  border-color: #cfd9ff;
  border-left-color: #868fbd;
  background: rgba(79, 107, 255, .06);
}

.v2-price-row.v2-price-detailer .v2-price-label,
.v2-price-row.v2-price-detailer .v2-price-value {
  color: #4f6bff;
}

/* Distributor / "Your Price" row — accent, highlighted */
.v2-price-row.v2-price-yours {
  border-color: var(--accent);
  border-left-color: var(--accent);
  background: rgba(227, 6, 19, .05);
}

.v2-price-row.v2-price-yours .v2-price-label {
  color: var(--accent);
  font-weight: 700;
}

.v2-price-row.v2-price-yours .v2-price-value {
  color: var(--accent);
  font-size: 15px;
}

/* small "Your Price" badge — stacked above the row */
.v2-price-row.v2-price-yours::before {
  content: 'Your Price';
  position: absolute;
  top: -9px;
  right: 10px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #fff;
  background: var(--accent);
  padding: .15rem .45rem;
  border-radius: 999px;
}

/* % OFF pill */
.v2-price-off {
  background: rgba(227, 6, 19, .1);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  margin-left: auto;
  width: 100%;
  text-align: center;
}

.v2-price-row.v2-price-detailer .v2-price-off {
  background: #e8ecff;
  color: #4f6bff;
}

/* "Save ₹X (Y%) vs MRP" line */
.v2-price-save {
  font-size: 12px;
  font-weight: 600;
  color: #1a9e4a;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: -.15rem;
}

.v2-price-save i {
  font-size: 12px;
}

/* GST note */
.v2-price-gst-note {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  font-style: italic;
}

/* ── QTY SELECTOR + ADD TO CART ROW ──
   Sizes ab index-v3.css (.usx-v3 .qty-selector) ke barabar
   rakhe hain taaki homepage aur baaki pages par form width
   same dikhe. */
.final-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.qty-selector {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.qty-selector button {
  background: var(--surface2);
  color: var(--text);
  border: none;
  width: 28px;
  height: 32px;
  cursor: pointer;
  font-size: 14px;
}

.qty-selector button:hover {
  background: var(--accent);
  color: #fff;
}

.qty-selector input {
  width: 34px;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--text);
  height: 32px;
  font-size: 12px;
  -moz-appearance: textfield;
}

.qty-selector input::-webkit-outer-spin-button,
.qty-selector input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.final-add-row .ic-product-signup-btn,
.final-add-row button.add-btn {
  flex: 1;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 10px;
  height: 34px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease;
  margin-top: 0;
}

.final-add-row .add-btn:hover {
  background: var(--accent2);
}

/* Slightly reduce label/value size pressure on small cards */
@media (max-width: 480px) {
  .v2-price-row {
    font-size: 12px;
  }

  .v2-price-value {
    font-size: 13px !important;
  }

  .v2-price-row.v2-price-yours .v2-price-value {
    font-size: 14px !important;
  }
}

.v2-brand-count {
  color: var(--accent) !important;
  background: rgba(227, 6, 19, .08);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
}

/* =========================================================
   USX-V3 DESIGN SYSTEM
   (poora naya home page design system — .usx-v3 wrapper ke
   andar scoped. login-modal ko jaan-boojh kar UNSCOPED rakha
   hai neeche, kyunki uska HTML tumhare blade template me
   .usx-v3 div ke BAHAR hai — scoped rakhte to kabhi apply hi
   nahi hota, jaisa screenshot me dikh raha tha.)
   ========================================================= */
.usx-v3 {
  --bg: #090909;
  --surface: #111111;
  --surface2: #181818;
  --line: #2a2a2a;
  --text: #ffffff;
  --muted: #a4a4a4;
  --accent: #e30613;
  --accent2: #ff2633;
  --danger: #e30613;
  --shadow: 0 25px 70px rgba(0, 0, 0, .38);
}

.usx-v3[data-theme="light"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface2: #f4f4f4;
  --line: #dddddd;
  --text: #111111;
  --muted: #666666;
  --accent: #e30613;
  --accent2: #c9000b;
  --shadow: 0 20px 55px rgba(0, 0, 0, .10);
}

.usx-v3 * {
  box-sizing: border-box
}

.usx-v3 {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  overscroll-behavior-y: contain
}

.usx-v3 a {
  text-decoration: none;
  color: inherit
}

.usx-v3 button,
.usx-v3 input,
.usx-v3 select {
  font: inherit;
  font-weight: 600
}

.usx-v3 a,
.usx-v3 button {
  -webkit-tap-highlight-color: transparent
}

.usx-v3 .container {
  width: min(1220px, calc(100% - 40px));
  margin: auto
}

.usx-v3 .topbar {
  height: 38px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase
}

.usx-v3 .topbar span {
  margin-left: 10px;
  font-weight: 600;
  opacity: .8;
  text-transform: none;
  letter-spacing: 0
}

/* =========================================================
   USX-V3 → HERO SECTION
   (Ab koi banner image use nahi ho rahi — background sirf
   theme variable --bg se aata hai. --bg light theme me
   white (#ffffff) hai aur dark theme me #090909 — isliye
   yahan ek hi rule se hero dono themes me sahi color leta
   hai, alag se light/dark override likhne ki zaroorat nahi.
   Blade file me bhi background-image inline style hata di
   gayi hai — sirf ye CSS hi hero ka background control
   karta hai ab.)
   ========================================================= */
.usx-v3 .hero {
  position: relative;
  min-height: 690px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  background-color: var(--bg);
}

.usx-v3 .hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 85%)
}

.usx-v3 .hero-glow {
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  right: -120px;
  top: 40px;
  background: radial-gradient(circle, rgba(227, 6, 19, .20), transparent 68%);
  filter: blur(10px)
}

.usx-v3 .hero-orbit {
  position: absolute;
  right: -70px;
  top: 80px;
  width: 620px;
  height: 500px;
  border: 1px solid rgba(227, 6, 19, .22);
  border-radius: 50%;
  transform: rotate(-17deg)
}

.usx-v3 .hero-orbit:after {
  content: "";
  position: absolute;
  inset: 55px 90px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%
}

.usx-v3 .hero-content {
  position: relative;
  z-index: 2;
  width: min(1280px, calc(100% - 40px));
  margin: auto;
  padding: 95px 0 80px
}

.usx-v3 .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(227, 6, 19, .40);
  background: rgba(227, 6, 19, .08);
  color: var(--accent);
  padding: 8px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase
}

.usx-v3 .kicker i {
  font-size: 12px
}

/* h1 / copy color hardcoded NAHI hai — var(--text) aur
   var(--muted) use ho rahe hain, jo .usx-v3[data-theme]
   se aate hain. Isliye theme-toggle click par ye text
   apne aap black ↔ white ho jayega, koi extra JS/CSS
   override ki zaroorat nahi. */
.usx-v3 .hero h1 {
  font-size: clamp(40px, 6vw, 60px);
  line-height: .95;
  letter-spacing: -.045em;
  margin: 24px 0 22px;
  max-width: 850px;
  font-weight: 700;
  color: var(--text)
}

.usx-v3 .hero-copy {
  max-width: 600px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 34px
}
.usx-v3 .finder select option{
  color :black;
}
.usx-v3 .finder {
  width: min(760px, 100%);
  background: rgba(16, 18, 22, .92);
  border: 1px solid #353940;
  border-radius: 14px;
  padding: 8px;
  display: flex;
  box-shadow: var(--shadow)
}

.usx-v3[data-theme="light"] .finder {
  background: rgba(255, 255, 255, .95)
}

.usx-v3 .finder select {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  height: 54px;
  width: 155px;
  padding: 0 14px;
  border-right: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700
}

.usx-v3 .finder-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  min-width: 0;
  color: var(--muted)
}

.usx-v3 .finder-input-wrap input {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  height: 54px;
  width: 100%;
  font-size: 14px
}

.usx-v3 .finder button {
  height: 54px;
  border: 0;
  background: var(--accent);
  color: #fff;
  border-radius: 9px;
  padding: 0 23px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px
}

.usx-v3 .search-results {
  display: none;
  width: min(760px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 7px;
  position: absolute;
  z-index: 20;
  box-shadow: var(--shadow);
  overflow: hidden
}

.usx-v3 .search-results.open {
  display: block
}

.usx-v3 .sd-label {
  padding: 11px 15px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  border-bottom: 1px solid var(--line)
}

.usx-v3 .sd-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line)
}

.usx-v3 .sd-item:hover {
  background: var(--surface2)
}

.usx-v3 .sd-thumb {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  background: var(--surface2);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 11px;
  font-weight: 800
}

.usx-v3 .sd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.usx-v3 .sd-name {
  font-size: 13px;
  font-weight: 800
}

.usx-v3 .sd-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px
}

.usx-v3 .hero-links {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 22px
}

.usx-v3 .hero-links a {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 9px 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.usx-v3 .hero-links a:hover {
  border-color: var(--accent);
  color: var(--text)
}

.usx-v3 .hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 30px
}

.usx-v3 .hero-stat {
  display: flex;
  flex-direction: column;
  color: inherit
}

.usx-v3 .hero-stat-num {
  font: 700 26px 'Axiforma', 'Plus Jakarta Sans', sans-serif;
  color: var(--text)
}

.usx-v3 .hero-stat-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em
}

.usx-v3 .hero-side {
  position: absolute;
  right: 5%;
  bottom: 48px;
  z-index: 2;
  width: 320px
}

.usx-v3 .tech-card {
  background: rgba(16, 18, 22, .82);
  border: 1px solid #32363d;
  border-radius: 15px;
  padding: 20px;
  backdrop-filter: blur(15px)
}

.usx-v3[data-theme="light"] .tech-card {
  background: rgba(255, 255, 255, .82)
}

.usx-v3 .tech-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px
}

.usx-v3 .tech-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em
}

.usx-v3 .live {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800
}

.usx-v3 .tech-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text)
}

.usx-v3 .tech-sub {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5
}

.usx-v3 .tech-line {
  height: 1px;
  background: var(--line);
  margin: 18px 0
}

.usx-v3 .tech-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px
}

.usx-v3 .tech-stat strong {
  display: block;
  font: 700 20px 'Axiforma', 'Plus Jakarta Sans', sans-serif;
  color: var(--text)
}

.usx-v3 .tech-stat span {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase
}

/* =========================================================
   USX-V3 → CAPABILITIES STRIP
   ========================================================= */
.usx-v3 .capabilities {
  border-bottom: 1px solid var(--line);
  background: var(--surface)
}

.usx-v3 .cap-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr)
}

.usx-v3 .cap {
  padding: 24px 16px;
  border-right: 1px solid var(--line);
  display: flex;
  gap: 12px;
  align-items: center
}

.usx-v3 .cap:last-child {
  border: 0
}

.usx-v3 .cap i {
  font-size: 20px;
  color: var(--accent)
}

.usx-v3 .cap b {
  display: block;
  font-size: 12px;
  color: var(--text)
}

.usx-v3 .cap span {
  font-size: 10px;
  color: var(--muted)
}

.usx-v3 .section {
  padding: 70px 0
}

.usx-v3 .section-surface {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.usx-v3 .section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 34px
}

.usx-v3 .eyebrow {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 9px
}

.usx-v3 .title {
  font: 700 clamp(26px, 3.4vw, 42px)/1.05 'Axiforma', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -.03em;
  color: var(--text)
}

.usx-v3 .sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 10px;
  max-width: 550px;
  line-height: 1.6
}

.usx-v3 .view {
  font-size: 11px;
  font-weight: 700;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 5px;
  white-space: nowrap;
  color: var(--text)
}

/* =========================================================
   USX-V3 → CATEGORIES GRID (Exterior / Interior / Sunroof...)
   ========================================================= */
.usx-v3 .category-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 190px 190px;
  gap: 12px
}

.usx-v3 .category {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  isolation: isolate;
  color: var(--text)
}

.usx-v3 .category:first-child {
  grid-row: span 2;
  background: linear-gradient(145deg, var(--surface2), var(--surface))
}

.usx-v3 .category:before {
  content: "";
  position: absolute;
  inset: auto -30px -100px auto;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 6, 19, .13), transparent 68%);
  z-index: -1
}

.usx-v3 .category:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  transition: .25s
}

.usx-v3 .cat-icon {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 45px;
  height: 45px;
  border: 1px solid var(--line);
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 19px
}

.usx-v3 .category h3 {
  font: 700 26px 'Axiforma', 'Plus Jakarta Sans', sans-serif;
  margin: 0;
  color:white;
}

.usx-v3 .category p {
  color: rgba(255, 255, 255, 0.486);
  font-size: 11px;
  max-width: 310px;
  line-height: 1.5;
  margin: 6px 0 0
}

.usx-v3 .cat-arrow {
  margin-top: 15px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800
}

/* =========================================================
   USX-V3 → NEW ARRIVALS CARDS (price box, add-to-cart etc.)
   ========================================================= */
.usx-v3 .arrival-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column
}

.usx-v3 .arrival-card:hover {
  border-color: var(--accent)
}

.usx-v3 .arrival-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--accent);
  color: #fff;
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px
}

.usx-v3 .arrival-img {
  height: 190px;
  background: var(--surface2);
  overflow: hidden
}

.usx-v3 .arrival-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer
}

.usx-v3 .arrival-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1
}

.usx-v3 .arrival-meta {
  font-size: 10px;
  color: var(--muted)
}

.usx-v3 .arrival-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 4px
}

.usx-v3 .price-box {
  margin-top: 6px
}

.usx-v3 .price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  padding: 3px 0
}

.usx-v3 .price-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--line);
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase
}

.usx-v3 .price-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text)
}

.usx-v3 .price-off {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(227, 6, 19, .1);
  padding: 2px 6px;
  border-radius: 4px
}

.usx-v3 .price-save {
  font-size: 10px;
  color: var(--accent);
  font-weight: 700;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px
}

.usx-v3 .price-gst-note {
  font-size: 9px;
  color: var(--muted);
  margin-top: 2px
}

.usx-v3 .arrival-cta {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  display: inline-flex;
  gap: 6px;
  align-items: center
}

.usx-v3 .arrival-cta:hover {
  color: var(--accent2)
}

.usx-v3 .final-add-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: center
}

.usx-v3 .qty-selector {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden
}

.usx-v3 .qty-selector button {
  width: 28px;
  height: 32px;
  border: 0;
  background: var(--surface2);
  color: var(--text);
  font-size: 14px;
  cursor: pointer
}

.usx-v3 .qty-selector input {
  width: 34px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: center;
  font-size: 12px
}

.usx-v3 .add-btn {
  flex: 1;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer
}

.usx-v3 .add-btn:hover {
  background: var(--accent2)
}

.usx-v3 .ic-product-signup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  height: 34px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none
}

.usx-v3 .ic-product-signup-btn:hover {
  background: var(--accent2)
}

/* =========================================================
   USX-V3 → POPULAR BRANDS GRID
   ========================================================= */
.usx-v3 .brand-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px
}

.usx-v3 .brand-card {
  min-height: 110px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  color: var(--text)
}

.usx-v3 .brand-card:hover {
  border-color: var(--accent);
  background: var(--surface2)
}

.usx-v3 .brand-logo {
  width: 100px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 7px
}

.usx-v3 .brand-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain
}

.usx-v3 .brand-name {
  font-size: 11px;
  font-weight: 800
}

.usx-v3 .brand-count {
  font-size: 9px;
  color: var(--muted);
  margin-top: 3px
}

/* =========================================================
   USX-V3 → FEATURED TABS + KIT CARDS (Best Sellers / Soon)
   ========================================================= */
.usx-v3 .tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
  gap: 4px
}

.usx-v3 .tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 13px 18px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 2px solid transparent
}

.usx-v3 .tab.active {
  color: var(--text);
  border-color: var(--accent)
}

.usx-v3 .tab-count {
  margin-left: 6px;
  font-size: 10px;
  background: var(--surface2);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 20px
}

.usx-v3 .kit-card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column
}

.usx-v3 .kit-card:hover {
  border-color: var(--accent)
}

.usx-v3 .kit-img {
  height: 180px;
  background: var(--surface2);
  position: relative
}

.usx-v3 .kit-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer
}

.usx-v3 .kit-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--accent);
  color: #fff;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 4px
}

.usx-v3 .kit-soon-overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 9, 9, .55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em
}

.usx-v3 .kit-soon-overlay i {
  font-size: 22px;
  color: var(--accent)
}

.usx-v3 .kit-body {
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column
}

.usx-v3 .kit-meta {
  font-size: 10px;
  color: var(--muted)
}

.usx-v3 .kit-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  margin: 5px 0 8px;
  color: var(--text)
}

/* =========================================================
   USX-V3 → PROCESS STEPS (01-04)
   ========================================================= */
.usx-v3 .process {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.usx-v3 .process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0
}

.usx-v3 .step {
  padding: 32px 25px;
  border-right: 1px solid var(--line)
}

.usx-v3 .step:last-child {
  border: 0
}

.usx-v3 .step-no {
  font: 700 40px 'Axiforma', 'Plus Jakarta Sans', sans-serif;
  color: var(--accent);
  line-height: 1
}

.usx-v3 .step h3 {
  font: 700 17px 'Axiforma', 'Plus Jakarta Sans', sans-serif;
  margin: 15px 0 7px;
  color: var(--text)
}

.usx-v3 .step p {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0
}

/* ---- CTA (naya box design — image reference ke mutabik) ---- */
.usx-v3 .cta-strip {
  padding: 70px 0
}

.usx-v3 .cta-box {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(227, 6, 19, .35);
  border-radius: 18px;
  padding: 50px 65px;
  background: linear-gradient(120deg, #1b080a, var(--surface));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 35px;
  flex-wrap: wrap
}

.usx-v3[data-theme="light"] .cta-box {
  background: linear-gradient(120deg, #fdeaea, var(--surface))
}

.usx-v3 .cta-box:after {
  /* content: "USX"; */
  position: absolute;
  right: -10px;
  bottom: -70px;
  font: 700 200px 'Axiforma', 'Plus Jakarta Sans', sans-serif;
  color: rgba(227, 6, 19, .06);
  pointer-events: none;
  line-height: 1
}

.usx-v3 .cta-eyebrow {
  position: relative;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px
}

.usx-v3 .cta-title {
  position: relative;
  z-index: 2;
  font: 700 clamp(28px, 4vw, 44px)/1.1 'Axiforma', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -.03em;
  color: white;
  margin: 0;
  text-align: left
}

.usx-v3 .cta-sub {
  position: relative;
  z-index: 2;
  color: var(--muted);
  font-size: 13px;
  margin: 10px 0 0;
  max-width: 480px;
  text-align: left
}

.usx-v3 .btn-mono {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  border-radius: 9px;
  padding: 14px 22px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0
}

.usx-v3 .btn-mono:hover {
  background: var(--accent2)
}

/* ---- Bottom nav ki styling ab footer.css me global/unscoped hai
   (kyunki bottom-nav ka HTML .usx-v3 wrapper ke bahar hai) ---- */
.usx-v3 .bottom-nav {
  display: none
}

/* =========================================================
   USX-V3 → RESPONSIVE (≤1000px / ≤650px)
   ========================================================= */
@media(max-width:1000px) {
  .usx-v3 .hero-side {
    display: none
  }

  .usx-v3 .cap-row {
    grid-template-columns: repeat(3, 1fr)
  }

  .usx-v3 .cap:nth-child(3) {
    border-right: 0
  }

  .usx-v3 .cap:nth-child(n+4) {
    border-top: 1px solid var(--line)
  }

  .usx-v3 .brand-grid {
    grid-template-columns: repeat(4, 1fr)
  }

  .usx-v3 .kit-img {
    height: 160px
  }

}

@media(max-width:650px) {

  .usx-v3 .container,
  .usx-v3 .hero-content {
    width: min(100% - 24px, 1220px)
  }

  .usx-v3 .topbar {
    font-size: 9px
  }

  .usx-v3 .topbar span {
    display: none
  }

  .usx-v3 .hero {
    min-height: auto
  }

  .usx-v3 .hero-content {
    padding: 50px 0
  }

  .usx-v3 .hero h1 {
    font-size: 40px
  }

  .usx-v3 .hero-copy {
    font-size: 13px
  }

  .usx-v3 .finder {
    display: grid;
    grid-template-columns: 1fr
  }

  .usx-v3 .finder select {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    height: 45px
  }

  .usx-v3 .finder-input-wrap input {
    height: 45px
  }

  .usx-v3 .finder button {
    height: 48px
  }

  .usx-v3 .cap-row {
    grid-template-columns: 1fr 1fr
  }

  .usx-v3 .cap {
    padding: 17px 12px
  }

  .usx-v3 .cap:nth-child(2),
  .usx-v3 .cap:nth-child(4) {
    border-right: 0
  }

  .usx-v3 .cap:nth-child(3) {
    border-right: 1px solid var(--line);
    border-top: 0
  }

  .usx-v3 .cap:nth-child(4) {
    border-top: 1px solid var(--line)
  }

  .usx-v3 .cap:nth-child(5) {
    border-top: 1px solid var(--line)
  }

  .usx-v3 .section {
    padding: 44px 0
  }

  .usx-v3 .section-head {
    align-items: start;
    flex-direction: column
  }

  .usx-v3 .category-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(170px, auto) minmax(170px, auto) minmax(170px, auto)
  }

  .usx-v3 .category:first-child {
    grid-row: span 1;
    grid-column: span 2
  }

  .usx-v3 .category h3 {
    font-size: 20px
  }

  .usx-v3 .cat-icon {
    position: static;
    margin: 0 0 .6rem;
    width: 38px;
    height: 38px;
    font-size: 16px
  }

  .usx-v3 .brand-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .usx-v3 .process-grid {
    grid-template-columns: 1fr 1fr
  }

  .usx-v3 .step {
    padding: 24px 15px
  }

  .usx-v3 .step:nth-child(2) {
    border-right: 0
  }

  .usx-v3 .step:nth-child(n+3) {
    border-top: 1px solid var(--line)
  }

  .usx-v3 .cta-box {
    padding: 34px 24px;
    flex-direction: column;
    align-items: flex-start
  }

  .usx-v3 .cta-box:after {
    font-size: 130px;
    right: -20px;
    bottom: -40px
  }

  .usx-v3 .btn-mono {
    margin-top: 6px
  }

  .usx-v3 {
    padding-bottom: 62px
  }

}

/* =========================================================
   LOGIN MODAL — jaan-boojh kar UNSCOPED (bina .usx-v3 prefix).
   Blade template me is modal ka HTML .usx-v3 wrapper ke bahar
   hai, isliye variables ko :root (header.css) se resolve
   karwaya hai — theme toggle bhi is se automatically kaam
   karega kyunki <html> ka data-theme already sync ho raha hai.
   ========================================================= */
.login-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px
}

.login-modal-overlay.open {
  display: flex
}

.login-modal {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  position: relative;
  box-shadow: var(--shadow);
  color: var(--text);
}

.login-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center
}

.login-modal-close:hover {
  background: var(--surface2);
  color: var(--text)
}

.login-modal-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px
}

.login-modal-sub {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 20px;
  line-height: 1.5
}

.login-modal-form input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
  outline: none
}

.login-modal-form input:focus {
  border-color: var(--accent)
}

.login-modal-form button {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  margin-top: 4px
}

.login-modal-form button:hover {
  background: var(--accent2)
}

.login-modal-switch {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px
}

.login-modal-switch a {
  color: var(--accent);
  font-weight: 700


}



@media (max-width: 600px) {
  .usx-v3 .brand-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .usx-v3 .brand-card {
    min-height: 95px;
    padding: 10px;
  }

  .usx-v3 .brand-logo {
    width: 80px;
    height: 38px;
  }

  .usx-v3 .brand-name {
    font-size: 10px;
  }

  .usx-v3 .brand-count {
    font-size: 8px;
  }
}


/* ========================================
   BEST CARD IMAGES TAG CSS
======================================== */

/* Category Card */
.category {
    position: relative;
    overflow: hidden;
}

/* Card Image */
.category-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;

    /* Image visibility */
    opacity: 0.88;
}

/* Light Dark Overlay */
.category::after {
    content: "";
    position: absolute;
    inset: 0;
       background: rgb(0 0 0 / 72%);
    z-index: 1;
}


/* ========================================
   CATEGORY ICON - TOP RIGHT
======================================== */

.category .cat-icon {
    position: absolute !important;
    top: 28px;
    right: 28px;

    z-index: 3;
}


/* ========================================
   CARD CONTENT
======================================== */

.category .category-content {
    position: relative;
    z-index: 2;
}

.category-content {
    margin-top: auto;
}


/* Make text clearly visible */
.category h3,
.category p,
.category .cat-arrow {
    position: relative;
    z-index: 2;
}


/* ========================================
   CTA BOX IMAGE
======================================== */

.cta-box {
    position: relative;
    overflow: hidden;
}


/* CTA Image */
.cta-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;

    /* Image visibility */
    opacity: 0.88;
}


/* Light Dark Overlay */
.cta-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.651);
    z-index: 1;
}


/* ========================================
   CTA CONTENT
======================================== */

.cta-content,
.cta-box .btn-mono {
    position: relative;
    z-index: 2;
}


/* ========================================
   STRONGER TEXT VISIBILITY
======================================== */

.category h3,
.cta-title {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.25);
}

.category p,
.cta-sub {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.20);
}