/* Ten selectable homepage directions. All variants use the same live catalog. */
.home-variant .hero .eyebrow {
  display: block;
  margin: 0 0 12px;
  color: #d9e9fb;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.home-variant .hero h1 {
  letter-spacing: 0;
}

.home-variant .tile,
.home-variant .product-card,
.home-variant .inn-panel,
.home-variant .delivery-box,
.home-variant .manager-box {
  border-radius: 0;
}

/* 1. Industrial classic: closest to the approved MC-style composition. */
.home-variant-1 {
  --blue: #075fcf;
  --blue-2: #034fae;
}

.home-variant-1 .hero {
  background:
    linear-gradient(90deg, rgba(4, 18, 33, 0.9) 0%, rgba(4, 18, 33, 0.6) 50%, rgba(4, 18, 33, 0.08) 100%),
    url("/assets/hero-metalservice-warehouse-v5.png") 48% center / cover;
}

.home-variant-1 .hero .eyebrow {
  display: none;
}

/* 2. Construction supply: stronger object-delivery signal and safety yellow. */
.home-variant-2 {
  --blue: #0d6b7d;
  --blue-2: #095463;
  --dark: #102b31;
  --dark-2: #173b42;
  --line: #d7e2e3;
  background: #f1f5f4;
}

.home-variant-2 .lab-nav {
  background: #102b31;
  border-bottom-color: #f0b429;
}

.home-variant-2 .lab-nav > a:first-child,
.home-variant-2 .hero-search button,
.home-variant-2 .primary-btn {
  background: #f0b429;
  color: #17252b;
}

.home-variant-2 .catalog-side,
.home-variant-2 .cart-panel {
  background: #123038;
}

.home-variant-2 .category-btn:hover,
.home-variant-2 .category-btn.active {
  background: #245661;
}

.home-variant-2 .hero {
  background:
    linear-gradient(90deg, rgba(9, 35, 41, 0.92) 0%, rgba(9, 35, 41, 0.62) 54%, rgba(9, 35, 41, 0.12) 100%),
    url("/assets/hero-metalservice-yard-v2.png") center / cover;
}

.home-variant-2 .stats-row svg,
.home-variant-2 .section-kicker a {
  color: #0d6b7d;
}

/* 3. Black steel: compact graphite storefront with a red commercial accent. */
.home-variant-3 {
  --blue: #c2353e;
  --blue-2: #9f242d;
  --dark: #171d22;
  --dark-2: #222b31;
  --line: #d8dde0;
  background: #eef0f1;
}

.home-variant-3 .lab-top {
  min-height: 70px;
}

.home-variant-3 .brand-mark,
.home-variant-3 .lab-nav > a:first-child,
.home-variant-3 .hero-search button,
.home-variant-3 .primary-btn {
  background: #c2353e;
}

.home-variant-3 .lab-nav {
  background: #171d22;
  border-bottom-color: #c2353e;
}

.home-variant-3 .catalog-side,
.home-variant-3 .cart-panel {
  background: #1d252b;
}

.home-variant-3 .category-btn:hover,
.home-variant-3 .category-btn.active {
  background: #3a2629;
}

.home-variant-3 .hero {
  background:
    linear-gradient(90deg, rgba(17, 22, 26, 0.94) 0%, rgba(17, 22, 26, 0.7) 48%, rgba(17, 22, 26, 0.18) 100%),
    url("/assets/hero-warehouse.png") center / cover;
}

.home-variant-3 .stats-row svg,
.home-variant-3 .section-kicker a {
  color: #c2353e;
}

/* 4. Stainless precision: a lighter catalog rail and cool technical palette. */
.home-variant-4 {
  --blue: #087c8c;
  --blue-2: #05616e;
  --dark: #25343b;
  --dark-2: #334850;
  --line: #d5dfe2;
  background: #f5f8f8;
}

.home-variant-4 .lab-nav {
  background: #26363d;
  border-bottom-color: #20a4b3;
}

.home-variant-4 .lab-nav > a:first-child,
.home-variant-4 .hero-search button,
.home-variant-4 .primary-btn {
  background: #087c8c;
}

.home-variant-4 .catalog-side {
  border-right: 1px solid #d5dfe2;
  background: #f7fafb;
}

.home-variant-4 .category-btn {
  border-bottom-color: #e0e7e9;
  color: #243e49;
}

.home-variant-4 .category-btn span svg,
.home-variant-4 .category-btn > svg {
  color: #69818a;
}

.home-variant-4 .category-btn:hover,
.home-variant-4 .category-btn.active {
  background: #e5f2f3;
  color: #075f6b;
}

.home-variant-4 .hero {
  background:
    linear-gradient(90deg, rgba(18, 37, 44, 0.9) 0%, rgba(18, 37, 44, 0.58) 52%, rgba(18, 37, 44, 0.1) 100%),
    url("/assets/products/sheet-stainless.png") center / cover;
}

.home-variant-4 .cart-panel {
  border: 1px solid #d5dfe2;
  background: #f8fbfb;
  color: #18333e;
}

.home-variant-4 .cart-line {
  border-bottom-color: #dce5e7;
}

.home-variant-4 .cart-line strong,
.home-variant-4 .cart-panel .summary dd {
  color: #18333e;
}

.home-variant-4 .cart-line span,
.home-variant-4 .cart-panel .summary dt,
.home-variant-4 .cart-panel .empty {
  color: #6b7e86;
}

.home-variant-4 .cart-panel .summary,
.home-variant-4 .cart-panel .summary div:last-child {
  border-color: #dce5e7;
}

/* 5. Project supply: wide hero, category navigation moves into the content. */
.home-variant-5 {
  --blue: #176b4d;
  --blue-2: #0f543b;
  --dark: #172b26;
  --dark-2: #234238;
  --line: #d8e1dc;
  background: #f3f6f4;
}

.home-variant-5 .lab-nav {
  background: #172b26;
  border-bottom-color: #d79a2b;
}

.home-variant-5 .lab-nav > a:first-child,
.home-variant-5 .hero-search button,
.home-variant-5 .primary-btn {
  background: #176b4d;
}

.home-variant-5 .hero {
  background:
    linear-gradient(90deg, rgba(12, 34, 28, 0.92) 0%, rgba(12, 34, 28, 0.56) 50%, rgba(12, 34, 28, 0.08) 100%),
    url("/assets/hero-metalservice-yard-v2.png") center / cover;
}

.home-variant-5 .cart-panel {
  background: #19362d;
}

/* 6. Weight calculator storefront: dense and deliberately compact. */
.home-variant-6 {
  --blue: #275dad;
  --blue-2: #1d4788;
  --dark: #17273a;
  --dark-2: #223a54;
  --line: #d9e1ea;
  background: #f4f6f8;
}

.home-variant-6 .lab-nav {
  background: #17273a;
  border-bottom-color: #f2a900;
}

.home-variant-6 .hero {
  background:
    linear-gradient(90deg, rgba(14, 31, 50, 0.92) 0%, rgba(14, 31, 50, 0.62) 48%, rgba(14, 31, 50, 0.14) 100%),
    url("/assets/hero-metalservice-warehouse-v5.png") center / cover;
}

.home-variant-6 .hero-search button,
.home-variant-6 .primary-btn {
  background: #275dad;
}

.home-variant-6 .cart-panel {
  background: #172d45;
}

/* 7. Marketplace: products arrive immediately after the compact search hero. */
.home-variant-7 {
  --blue: #006d77;
  --blue-2: #00545c;
  --dark: #102f34;
  --dark-2: #17434a;
  --line: #d7e1e2;
  background: #f4f7f7;
}

.home-variant-7 .lab-nav {
  background: #102f34;
  border-bottom-color: #e76f51;
}

.home-variant-7 .lab-nav > a:first-child,
.home-variant-7 .hero-search button,
.home-variant-7 .primary-btn {
  background: #e76f51;
}

.home-variant-7 .hero {
  background:
    linear-gradient(90deg, rgba(8, 42, 47, 0.92) 0%, rgba(8, 42, 47, 0.62) 55%, rgba(8, 42, 47, 0.12) 100%),
    url("/assets/hero-warehouse.png") center / cover;
}

.home-variant-7 .catalog-side,
.home-variant-7 .cart-panel {
  background: #12363c;
}

/* 8. Technical procurement: restrained, high-density B2B presentation. */
.home-variant-8 {
  --blue: #2056a0;
  --blue-2: #173f77;
  --dark: #202a33;
  --dark-2: #2f3c47;
  --line: #d4dbe2;
  background: #edf1f4;
}

.home-variant-8 .lab-nav {
  background: #202a33;
  border-bottom-color: #90a4b7;
}

.home-variant-8 .hero {
  background:
    linear-gradient(90deg, rgba(22, 31, 39, 0.94) 0%, rgba(22, 31, 39, 0.64) 50%, rgba(22, 31, 39, 0.12) 100%),
    url("/assets/hero-metalservice-warehouse-v5.png") 58% center / cover;
}

.home-variant-8 .catalog-side {
  background: #26333e;
}

.home-variant-8 .cart-panel {
  background: #273640;
}

.home-variant-8 .stats-row {
  background: #f7f9fb;
}

/* 9. Logistics first: the cart and delivery tools become a full-width band. */
.home-variant-9 {
  --blue: #075fcf;
  --blue-2: #034fae;
  --dark: #071728;
  --dark-2: #0b2238;
  --line: #dbe3ed;
  background: #f2f5f9;
}

.home-variant-9 .lab-nav {
  background: #07182b;
  border-bottom-color: #1167c7;
}

.home-variant-9 .hero {
  background:
    linear-gradient(90deg, rgba(9, 32, 45, 0.9) 0%, rgba(9, 32, 45, 0.55) 50%, rgba(9, 32, 45, 0.06) 100%),
    url("/assets/hero-metalservice-yard-v2.png") center / cover;
}

.home-variant-9 .catalog-side,
.home-variant-9 .cart-panel {
  background: #0a2238;
}

/* 10. Clean commerce: white working surfaces with a blue/red identity. */
.home-variant-10 {
  --blue: #1261a0;
  --blue-2: #0b497c;
  --dark: #1f2e3b;
  --dark-2: #304455;
  --line: #d6dee5;
  background: #f6f8fa;
}

.home-variant-10 .lab-nav {
  border-top: 1px solid #d6dee5;
  border-bottom: 3px solid #d3424a;
  background: #fff;
  color: #233b50;
}

.home-variant-10 .lab-nav > a:first-child {
  background: #1261a0;
  color: #fff;
}

.home-variant-10 .lab-nav > a:hover,
.home-variant-10 .lab-nav > a.active {
  background: #edf3f7;
  color: #1261a0;
}

.home-variant-10 .hero {
  background:
    linear-gradient(90deg, rgba(13, 35, 52, 0.91) 0%, rgba(13, 35, 52, 0.57) 52%, rgba(13, 35, 52, 0.08) 100%),
    url("/assets/hero-warehouse.png") center / cover;
}

.home-variant-10 .catalog-side {
  border-right: 1px solid #d6dee5;
  background: #fff;
}

.home-variant-10 .category-btn {
  border-bottom-color: #e4e9ed;
  color: #253f55;
}

.home-variant-10 .category-btn span svg,
.home-variant-10 .category-btn > svg {
  color: #6a8092;
}

.home-variant-10 .category-btn:hover,
.home-variant-10 .category-btn.active {
  background: #edf3f7;
  color: #1261a0;
}

.home-variant-10 .cart-panel {
  border-top: 4px solid #d3424a;
  background: #24394a;
}

@media (min-width: 1101px) {
  .home-variant-2 .layout {
    grid-template-columns: 260px minmax(0, 1fr) 320px;
  }

  .home-variant-3 .layout {
    grid-template-columns: 260px minmax(0, 1fr) 320px;
  }

  .home-variant-3 .hero,
  .home-variant-3 .catalog-side {
    min-height: 460px;
    height: 460px;
  }

  .home-variant-3 .cart-panel {
    min-height: 460px;
  }

  .home-variant-4 .layout {
    grid-template-columns: 225px minmax(0, 1fr) 330px;
  }

  .home-variant-5 .layout {
    grid-template-columns: minmax(0, 1fr) 350px;
    max-width: 1540px;
  }

  .home-variant-5 .catalog-side {
    display: none;
  }

  .home-variant-5 .hero {
    min-height: 520px;
  }

  .home-variant-6 .layout {
    grid-template-columns: 265px minmax(0, 1fr) 300px;
  }

  .home-variant-6 .hero,
  .home-variant-6 .catalog-side {
    min-height: 320px;
    height: 320px;
  }

  .home-variant-6 .hero-inner {
    padding: 38px 34px 24px;
  }

  .home-variant-6 .hero h1 {
    max-width: 650px;
    margin-bottom: 10px;
    font-size: 31px;
  }

  .home-variant-6 .hero p:not(.eyebrow) {
    margin-bottom: 15px;
  }

  .home-variant-6 .hero-play {
    display: none;
  }

  .home-variant-6 .cart-panel {
    min-height: 320px;
  }

  .home-variant-6 .cart-lines {
    max-height: 132px;
  }

  .home-variant-6 .tiles .tile,
  .home-variant-6 .tiles .tile a {
    min-height: 122px;
  }

  .home-variant-6 .product-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .home-variant-7 .layout {
    grid-template-columns: 230px minmax(0, 1fr) 325px;
  }

  .home-variant-7 .main-flow {
    display: flex;
    flex-direction: column;
  }

  .home-variant-7 .hero {
    order: 1;
    min-height: 280px;
  }

  .home-variant-7 .hero-inner {
    padding: 34px 36px 22px;
  }

  .home-variant-7 .hero h1 {
    margin-bottom: 9px;
    font-size: 31px;
  }

  .home-variant-7 .hero p:not(.eyebrow) {
    margin-bottom: 14px;
  }

  .home-variant-7 .hero-play {
    display: none;
  }

  .home-variant-7 .stats-row {
    order: 2;
  }

  .home-variant-7 #catalogView {
    order: 3;
  }

  .home-variant-7 .section-kicker {
    order: 4;
  }

  .home-variant-7 .tiles {
    order: 5;
  }

  .home-variant-7 .shipment-section {
    order: 6;
  }

  .home-variant-7 .service-strip {
    order: 7;
  }

  .home-variant-7 .seo-content {
    order: 8;
  }

  .home-variant-7 .site-footer {
    order: 9;
  }

  .home-variant-7 .catalog-side {
    height: 280px;
  }

  .home-variant-7 .cart-panel {
    min-height: 430px;
  }

  .home-variant-8 .layout {
    grid-template-columns: 215px minmax(0, 1fr) 310px;
  }

  .home-variant-8 .hero-inner {
    padding-left: 52px;
  }

  .home-variant-8 .product-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .home-variant-9 .layout {
    grid-template-columns: 240px minmax(0, 1fr) 380px;
    max-width: 1560px;
  }

  .home-variant-9 .right-side {
    grid-column: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 0 0 14px;
  }

  .home-variant-9 .cart-panel {
    min-height: 470px;
  }

  .home-variant-9 .cart-lines {
    max-height: 275px;
  }

  .home-variant-9 .hero,
  .home-variant-9 .catalog-side {
    min-height: 470px;
    height: 470px;
  }

  .home-variant-10 .layout {
    grid-template-columns: 230px minmax(0, 1fr) 330px;
  }

  .home-variant-10 .hero,
  .home-variant-10 .catalog-side {
    min-height: 430px;
    height: 430px;
  }

  .home-variant-10 .cart-panel {
    min-height: 430px;
  }
}

@media (max-width: 1100px) {
  .home-variant .main-flow {
    display: block;
  }

  .home-variant-5 .catalog-side {
    display: block;
  }
}

@media (max-width: 680px) {
  .home-variant .hero {
    min-height: 520px;
    height: auto;
  }

  .home-variant .hero .eyebrow {
    margin-bottom: 10px;
    font-size: 10px;
  }
}