:root {
  --brand-blue: #00BEFD;
  --nav-blue: #00BEFD;
  --nav-dark: #111111;
  --red: #EB1C23;
  --green: #C8F170;
  --text: #111111;
  --muted: #111111;
  --line: #F5F7FA;
  --soft: #F5F7FA;
  --white: #FFFFFF;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "IBM Plex Sans", Inter, Arial, sans-serif; color: var(--text); background: #FFFFFF; letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }

.contact-strip {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 8px 5vw;
  background: var(--red);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
}
.contact-strip i, .contact-strip strong { color: var(--green); }
.location-strip {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 7px 5vw;
  background: #00BEFD;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}
.location-strip i { color: #FFFFFF; }

.store-header {
  min-height: 82px;
  display: grid;
  grid-template-columns: 210px minmax(280px, 1fr) auto auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 9.4vw;
  background: #FFFFFF;
}
.brand { display: inline-flex; align-items: center; justify-content: center; }
.brand img {
  width: 124px;
  height: 66px;
  object-fit: contain;
  transform: scale(1.2);
}
.search-bar {
  display: grid;
  grid-template-columns: 1fr 72px;
  min-height: 48px;
  border: 1px solid #F5F7FA;
  border-radius: 9px;
  overflow: hidden;
  background: #FFFFFF;
}
.search-bar input { min-width: 0; border: 0; padding: 0 20px; outline: 0; font-size: 15px; color: #111111; }
.search-bar input::placeholder { color: #111111; }
.search-bar button { border: 0; background: #00BEFD; color: #FFFFFF; font-size: 18px; cursor: pointer; }
.quote-action {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 20px;
  border-radius: 9px;
  background: var(--nav-dark);
  color: #FFFFFF;
  font-weight: 800;
  white-space: nowrap;
}
.quote-action b, .cart-action b {
  position: absolute;
  top: -12px;
  right: -9px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #EB1C23;
  color: #FFFFFF;
  font-size: 14px;
}
.account-action { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.account-action .fa-circle-user { font-size: 26px; color: var(--nav-dark); }
.cart-action { position: relative; width: 48px; height: 48px; display: grid; place-items: center; color: var(--nav-dark); font-size: 28px; }
.cart-action b { background: var(--brand-blue); }
.mobile-toggle { display: none; }

.category-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 10.4vw;
  overflow-x: auto;
  background: var(--nav-dark);
  color: #FFFFFF;
  box-shadow: 0 8px 18px rgba(17, 17, 17, .18);
  scrollbar-width: none;
}
.category-nav::-webkit-scrollbar { display: none; }
.category-nav a {
  height: 54px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 3px solid transparent;
}
.category-nav a.active, .category-nav a:hover { color: var(--brand-blue); border-bottom-color: #07BBFF; }

.eca-hero { background: #F5F7FA; }
.hero-slide {
  position: relative;
  min-height: 640px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #111111;
}
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(17, 17, 17, .74), rgba(17, 17, 17, .66)),
    url("../images/products/fiber-optic-distribution-box1-removebg-preview.png") center left 8% / 620px no-repeat,
    #111111;
}
.hero-slide img {
  position: absolute;
  left: 5%;
  bottom: 4%;
  width: 36vw;
  max-width: 620px;
  opacity: .28;
  filter: saturate(.8);
}
.hero-overlay {
  position: relative;
  z-index: 1;
  width: min(980px, 90vw);
  text-align: center;
  color: #FFFFFF;
}
.hero-overlay h1 { margin: 0 0 16px; font-size: clamp(42px, 4.8vw, 72px); line-height: 1.05; font-weight: 800; }
.hero-overlay p { margin: 0 auto 40px; max-width: 780px; font-size: 20px; }
.hero-overlay a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 222px;
  min-height: 58px;
  border-radius: 10px;
  background: #00BEFD;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 800;
}
.hero-dots { height: 0; position: relative; bottom: 42px; display: flex; justify-content: center; gap: 9px; }
.hero-dots span { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.55); }
.hero-dots span.active { width: 42px; border-radius: 20px; background: var(--brand-blue); }

.category-section {
  padding: 42px 9.4vw 72px;
  background: #F5F7FA;
  text-align: center;
}
.category-section h2 { margin: 0 0 36px; font-size: 34px; line-height: 1.1; }
.round-categories {
  display: grid;
  grid-template-columns: repeat(8, minmax(120px, 1fr));
  gap: 28px;
  align-items: start;
}
.round-categories a { display: grid; justify-items: center; gap: 10px; color: #111111; font-size: 14px; font-weight: 800; }
.round-categories span {
  width: 124px;
  height: 124px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 8px #FFFFFF, 0 8px 18px rgba(17, 17, 17, .05);
  overflow: hidden;
}
.round-categories img { width: 92px; height: 92px; object-fit: contain; }
.browse-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 44px;
  color: #00BEFD;
  font-size: 15px;
  font-weight: 800;
}

.product-rail {
  padding: 52px 9.4vw;
  background: #FFFFFF;
}
.product-rail:nth-of-type(even) { background: #F5F7FA; }
.rail-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 30px;
}
.rail-head h2 { margin: 0 0 6px; font-size: 28px; line-height: 1.1; }
.rail-head p { margin: 0; color: var(--muted); font-size: 16px; }
.rail-head a { color: #00BEFD; font-size: 15px; font-weight: 800; }
.eca-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.product-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #F5F7FA;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(17, 17, 17, .04);
}
.product-media {
  position: relative;
  height: 318px;
  display: grid;
  place-items: center;
  background: #F5F7FA;
  overflow: hidden;
}
.product-media img {
  width: 90%;
  height: 250px;
  object-fit: contain;
  transition: transform .18s ease;
}
.product-media:hover img { transform: scale(1.04); }
.badges {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 2;
  display: grid;
  gap: 5px;
  justify-items: start;
}
.badges span {
  min-width: 90px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #00BEFD;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
}
.badges .sale { background: #EB1C23; }
.product-body { padding: 18px 20px 18px; }
.category-link { display: inline-block; margin-bottom: 8px; color: #00BEFD; font-size: 14px; font-weight: 600; }
.product-body h3 {
  min-height: 58px;
  margin: 0 0 14px;
  color: #111111;
  font-size: 16px;
  line-height: 1.28;
  font-weight: 800;
}
.rating { margin-bottom: 12px; color: #C8F170; font-size: 14px; letter-spacing: 0; }
.rating em { color: #111111; font-style: normal; }
.price {
  min-height: 34px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.price strong { color: #00BEFD; font-size: 22px; font-weight: 800; }
.price del { color: #111111; font-size: 14px; }
.btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 10px; font-weight: 800; cursor: pointer; }
.btn.full { width: 100%; }
.cart-btn { background: var(--nav-dark); color: #FFFFFF; font-size: 16px; }
.btn.primary { background: #00BEFD; color: #FFFFFF; padding: 0 22px; }
.btn.dark { background: var(--nav-dark); color: #FFFFFF; padding: 0 22px; }
.btn.red { background: var(--red); color: #FFFFFF; padding: 0 22px; }
.btn.outline {
  background: #FFFFFF;
  color: var(--nav-dark);
  border: 1px solid var(--nav-dark);
  padding: 0 22px;
}
.quote-btn {
  box-sizing: border-box;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  border: 1px solid var(--nav-dark);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--nav-dark);
  font-weight: 800;
  font-family: inherit;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  padding: 0 14px;
}
.quote-btn.full {
  width: 100%;
}
.product-body form {
  margin: 0;
}

.special-offer {
  margin: 42px 8.4vw 18px;
  min-height: 226px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 36px 42px;
  border-radius: 14px;
  background: linear-gradient(110deg, #00BEFD 0%, #07BBFF 100%);
  color: #FFFFFF;
}
.special-offer h2 { margin: 0 0 8px; font-size: 34px; }
.special-offer p { margin: 8px 0; color: rgba(255,255,255,.82); font-size: 16px; }
.special-offer .offer-sub { font-size: 20px; }
.special-offer a {
  min-width: 204px;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 10px;
  background: #FFFFFF;
  color: #111111;
  font-size: 16px;
  font-weight: 800;
}

.newsletter-band {
  min-height: 360px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 18px;
  padding: 54px 5vw;
  background: var(--nav-dark);
  color: #FFFFFF;
  text-align: center;
}
.newsletter-band > i { color: #00BEFD; font-size: 38px; }
.newsletter-band h2 { margin: 0; font-size: 32px; }
.newsletter-band p { margin: 0; color: #F5F7FA; font-size: 18px; }
.newsletter-band form {
  width: min(560px, 92vw);
  display: grid;
  grid-template-columns: 1fr 158px;
  gap: 14px;
  margin-top: 10px;
}
.newsletter-band input {
  min-height: 56px;
  border: 0;
  border-radius: 10px;
  padding: 0 20px;
  font-size: 16px;
}
.newsletter-band button {
  border: 0;
  border-radius: 10px;
  background: #00BEFD;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
}
.newsletter-band small { color: #F5F7FA; font-size: 16px; }

.footer {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1.2fr 1.35fr;
  gap: 58px;
  padding: 72px 9.4vw 76px;
  background: var(--nav-dark);
  color: #FFFFFF;
}
.footer img {
  width: 108px;
  height: 68px;
  object-fit: contain;
  margin-bottom: 22px;
  border-radius: 10px;
  background: #FFFFFF;
  transform: scale(1.2);
  transform-origin: left center;
}
.footer p { font-size: 15px; line-height: 1.55; }
.footer h3 { margin: 0 0 20px; color: #FFFFFF; font-size: 18px; }
.footer a { display: block; margin: 12px 0; color: #FFFFFF; font-size: 15px; }
.footer a::before { content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 10px; color: var(--brand-blue); }
.footer-about a::before, .socials a::before { content: none; }
.socials { display: flex; gap: 12px; margin-top: 20px; }
.socials a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #111111; margin: 0; }
.footer .copyright {
  position: absolute;
  left: 9.4vw;
  right: 9.4vw;
  bottom: 0;
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  color: #F5F7FA;
}
.whatsapp-float {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 40;
  min-width: 176px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  background: var(--green);
  color: #111111;
  box-shadow: 0 10px 28px rgba(17, 24, 39, .18);
  font-size: 15px;
  font-weight: 800;
}
.whatsapp-float i { font-size: 28px; }

.section { padding: 52px 9.4vw; background: #FFFFFF; }
.section-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 28px; }
.section-head h2 { margin: 4px 0 0; font-size: 28px; }
.eyebrow { color: var(--brand-blue); text-transform: uppercase; font-size: 12px; font-weight: 800; letter-spacing: 0; }
.page-title { padding: 38px 9.4vw 22px; background: var(--soft); }
.page-title h1 { margin: 6px 0; font-size: clamp(30px, 3vw, 42px); }
.page-title p { max-width: 780px; margin: 0; font-size: 15px; line-height: 1.6; }
.catalog { display: grid; grid-template-columns: 280px 1fr; gap: 28px; padding: 32px 9.4vw 56px; background: #FFFFFF; }
.filters { border: 1px solid var(--line); border-radius: 14px; padding: 18px; align-self: start; background: #FFFFFF; }
.filters label, .checkout-form label { display: grid; gap: 8px; margin-bottom: 14px; font-weight: 700; }
.filters input, .filters select, .checkout-form input, .checkout-form textarea, .admin-panel input, .admin-panel textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}
.catalog-toolbar { display: flex; justify-content: space-between; margin-bottom: 16px; }
.product-grid, .product-grid.compact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }

.product-detail { padding: 44px 9.4vw; display: grid; grid-template-columns: minmax(320px, 500px) 1fr; gap: 42px; background: #FFFFFF; }
.gallery { min-height: 480px; display: grid; place-items: center; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.gallery img { width: 82%; max-height: 390px; object-fit: contain; transition: transform .2s ease; }
.gallery:hover img { transform: scale(1.06); }
.detail-copy { max-width: 820px; }
.detail-copy h1 { margin: 10px 0; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; }
.detail-copy > p { font-size: 16px; line-height: 1.65; margin: 0 0 14px; }
.breadcrumbs { color: var(--muted); margin-bottom: 16px; font-size: 14px; }
.detail-price { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 10px; }
.detail-price strong { color: var(--brand-blue); font-size: 28px; font-weight: 800; }
.detail-price del { color: var(--text); font-size: 15px; }
.stock { margin: 12px 0 18px; font-size: 14px; font-weight: 800; }
.buy-box { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.buy-box input { width: 78px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; }
.tabs { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; }
.tabs h2 { margin: 0 0 12px; font-size: 22px; }
.tabs pre { white-space: pre-wrap; background: var(--soft); padding: 18px; border-radius: 10px; font-size: 14px; line-height: 1.7; }
.stock.in { color: #111111; }
.stock.out { color: var(--red); }

.cart-layout, .checkout-grid { padding: 32px 9.4vw 56px; display: grid; grid-template-columns: 1fr 360px; gap: 28px; background: #FFFFFF; }
.cart-items, .checkout-form, .summary { background: #FFFFFF; }
.cart-line { display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-line img { width: 100px; height: 80px; object-fit: contain; background: var(--soft); }
.cart-line h3 { margin: 0 0 6px; font-size: 16px; }
.cart-line p { margin: 0 0 6px; font-size: 14px; }
.cart-line a { color: var(--red); font-size: 14px; font-weight: 700; }
.summary { border: 1px solid var(--line); border-radius: 12px; padding: 20px; align-self: start; }
.summary h2 { margin: 0 0 14px; font-size: 22px; }
.summary > div:not(.cart-actions-stack) { display: flex; justify-content: space-between; margin: 12px 0; }
.checkout-form { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.checkout-form h2 { margin: 8px 0 2px; font-size: 22px; }
.checkout-form label { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; }
.checkout-form input[type="radio"] { width: auto; min-height: 0; }
.auth-card { width: min(420px, 92vw); margin: 62px auto; border: 1px solid var(--line); border-radius: 12px; padding: 26px; background: #FFFFFF; }
.auth-card h1 { margin: 0 0 18px; font-size: 28px; }
.auth-card form { display: grid; gap: 12px; }
.auth-card input { min-height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; }
.alert { background: #F5F7FA; border-left: 4px solid var(--red); padding: 12px; }

.admin-body { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; background: var(--soft); }
.admin-sidebar { padding: 22px; background: var(--nav-dark); color: #FFFFFF; display: flex; flex-direction: column; gap: 10px; }
.admin-sidebar img { width: 76px; background: #FFFFFF; margin-bottom: 16px; }
.admin-sidebar a { padding: 10px; border: 1px solid rgba(255,255,255,.12); }
.admin-main { padding: 30px; }
.admin-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.metrics div, .admin-panel { background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.metrics span { display: block; color: var(--muted); }
.metrics strong { font-size: 28px; }
.admin-grid { display: grid; grid-template-columns: 360px 1fr; gap: 22px; }
.admin-panel form, .admin-panel { display: grid; gap: 12px; }
.admin-panel label { display: grid; gap: 8px; font-weight: 800; }
.admin-panel select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #FFFFFF;
}
.admin-link {
  color: var(--brand-blue);
  font-weight: 800;
}
.order-admin-grid {
  grid-template-columns: 360px 1fr;
  align-items: start;
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; border-bottom: 1px solid var(--line); padding: 10px; }

@media (max-width: 1280px) {
  .store-header { padding-inline: 5vw; grid-template-columns: 160px minmax(260px, 1fr) auto auto auto auto; }
  .category-nav, .product-rail, .category-section, .catalog, .page-title, .product-detail, .cart-layout, .checkout-grid { padding-inline: 5vw; }
  .round-categories { grid-template-columns: repeat(4, 1fr); }
  .eca-product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
  .contact-strip, .location-strip { font-size: 14px; flex-wrap: wrap; }
  .store-header { grid-template-columns: 140px 1fr auto; }
  .quote-action, .account-action, .cart-action { display: none; }
  .mobile-toggle { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: var(--nav-dark); color: #FFFFFF; }
  .category-nav { display: none; position: static; padding: 8px 5vw; flex-direction: column; align-items: stretch; gap: 0; }
  .category-nav.open { display: flex; }
  .category-nav a { height: 44px; }
  .hero-slide { min-height: 560px; }
  .eca-product-grid, .product-grid, .product-grid.compact { grid-template-columns: repeat(2, 1fr); }
  .product-detail, .cart-layout, .checkout-grid, .catalog, .admin-grid { grid-template-columns: 1fr; }
  .footer { grid-template-columns: repeat(2, 1fr); padding-inline: 5vw; }
}

@media (max-width: 640px) {
  .contact-strip {
    min-height: 58px;
    flex-direction: column;
    gap: 4px;
    padding: 8px 14px;
    text-align: center;
    font-size: 13px;
    line-height: 1.25;
  }
  .contact-strip span {
    display: block;
  }
  .location-strip {
    min-height: 74px;
    flex-direction: column;
    gap: 6px;
    padding: 9px 18px;
    text-align: left;
    align-items: flex-start;
    font-size: 12px;
    line-height: 1.25;
  }
  .store-header {
    min-height: 110px;
    grid-template-columns: 44px 1fr 44px 44px;
    grid-template-rows: 42px 44px;
    gap: 10px 12px;
    padding: 14px 18px 12px;
    box-shadow: 0 8px 18px rgba(17, 17, 17, .1);
  }
  .mobile-toggle {
    order: 1;
    grid-column: 1;
    grid-row: 1;
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-self: center;
    justify-self: start;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--nav-dark);
    font-size: 20px;
  }
  .brand {
    order: 2;
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
    align-self: center;
  }
  .brand img {
    width: 112px;
    height: 48px;
    transform: scale(1.08);
  }
  .account-action {
    order: 3;
    grid-column: 3;
    grid-row: 1;
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-self: center;
    justify-self: center;
    justify-content: center;
    overflow: hidden;
    color: transparent;
    gap: 0;
    font-size: 0;
  }
  .account-action .fa-circle-user {
    color: var(--nav-dark);
    font-size: 22px;
  }
  .account-action .fa-chevron-down {
    display: none;
  }
  .cart-action {
    order: 4;
    grid-column: 4;
    grid-row: 1;
    width: 36px;
    height: 36px;
    align-self: center;
    justify-self: end;
    font-size: 24px;
    display: grid;
    color: var(--nav-dark);
    overflow: visible;
  }
  .cart-action .fa-cart-shopping {
    display: inline-block;
    color: var(--nav-dark);
  }
  .cart-action b {
    top: -8px;
    right: -7px;
    width: 19px;
    height: 19px;
    font-size: 11px;
  }
  .search-bar {
    order: 5;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: 1fr 44px;
    min-height: 38px;
    border: 1px solid #dfe6ee;
    border-radius: 6px;
    box-shadow: 0 8px 18px rgba(17, 17, 17, .08);
  }
  .search-bar input {
    padding: 0 12px;
    font-size: 13px;
  }
  .search-bar button {
    font-size: 15px;
  }
  .category-nav {
    position: static;
    padding: 0 18px 12px;
    background: #FFFFFF;
    box-shadow: 0 8px 18px rgba(17, 17, 17, .1);
  }
  .category-nav.open {
    display: flex;
  }
  .category-nav a {
    height: 40px;
    color: var(--nav-dark);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
  }
  .category-nav a.active,
  .category-nav a:hover {
    color: var(--brand-blue);
    border-bottom-color: var(--line);
  }
  .hero-slide { min-height: 460px; }
  .hero-overlay h1 { font-size: 36px; }
  .hero-overlay p { font-size: 15px; }
  .round-categories { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .eca-product-grid, .product-grid, .product-grid.compact, .footer, .metrics { grid-template-columns: 1fr; }
  .product-media { height: 290px; }
  .product-media img { height: 230px; }
  .rail-head, .special-offer { flex-direction: column; align-items: flex-start; }
  .newsletter-band form { grid-template-columns: 1fr; }
  .newsletter-band input,
  .newsletter-band button {
    min-height: 46px;
    height: 46px;
    border-radius: 8px;
    font-size: 14px;
  }
  .newsletter-band button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .whatsapp-float { min-width: 58px; width: 58px; height: 58px; right: 16px; bottom: 16px; }
  .whatsapp-float span { display: none; }
  .cart-drawer {
    width: 67vw;
    min-width: 270px;
  }
  .cart-drawer header {
    min-height: 64px;
    padding: 16px 14px;
  }
  .cart-drawer h2 {
    font-size: 18px;
  }
  .cart-drawer button {
    font-size: 13px;
  }
  .mini-cart-lines,
  .mini-cart-footer {
    padding-inline: 14px;
  }
  .mini-cart-line {
    grid-template-columns: 58px 1fr auto;
    gap: 10px;
  }
  .mini-cart-line img {
    width: 58px;
    height: 68px;
  }
  .mini-cart-line h3 {
    font-size: 13px;
  }
  .mini-cart-footer div {
    font-size: 16px;
  }
}

/* Compact ecommerce refinements */
.eca-product-grid,
.product-grid,
.product-grid.compact {
  gap: 22px;
}
.product-media {
  height: 270px;
}
.product-media img {
  height: 210px;
  width: 86%;
}
.product-body {
  padding: 16px 18px 18px;
}
.product-body h3 {
  min-height: 46px;
  font-size: 16px;
}
.badges span {
  min-width: 76px;
  height: 24px;
  font-size: 13px;
}
.price {
  margin-bottom: 14px;
}
.cart-btn,
.quote-btn {
  min-height: 42px;
  font-size: 15px;
}

.newsletter-band {
  background: var(--brand-blue);
  color: #111111;
}
.newsletter-band > i,
.newsletter-band h2,
.newsletter-band p,
.newsletter-band small {
  color: #111111;
}
.newsletter-band input {
  border: 1px solid #FFFFFF;
  background: #FFFFFF;
}
.newsletter-band button {
  background: #111111;
  color: #FFFFFF;
  border: 1px solid #111111;
}
.footer {
  background: #111111;
  border-top: 6px solid var(--red);
}

.cart-actions-stack {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.summary .cart-actions-stack {
  display: grid;
}
.cart-actions-stack form,
.cart-actions-stack button {
  width: 100%;
}
.summary .btn + .btn,
.mini-cart-footer a + a {
  margin-top: 10px;
}
.payment-options {
  display: grid;
  gap: 10px;
  padding: 10px 0;
}
.payment-options label {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #FFFFFF;
}
.mpesa-phone {
  padding: 14px;
  border: 1px solid var(--brand-blue);
  border-radius: 10px;
  background: var(--soft);
}
.mpesa-phone label {
  display: grid;
  gap: 8px;
}
.mpesa-phone small {
  display: block;
  margin-top: 8px;
  font-size: 13px;
}
.quote-mini-form {
  display: grid;
  grid-template-columns: 90px minmax(180px, 1fr) auto;
  gap: 10px;
  margin-top: 12px;
}
.quote-mini-form input {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
}
.confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.quote-confirmation-grid {
  align-items: start;
}
.quote-confirmation-grid .summary .btn + .btn {
  margin-top: 10px;
}
.confirm-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cart-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(17, 17, 17, .62);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.cart-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 90;
  width: min(424px, 94vw);
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #FFFFFF;
  transform: translateX(100%);
  transition: transform .22s ease;
  box-shadow: -18px 0 34px rgba(17, 17, 17, .2);
}
.cart-drawer.open {
  transform: translateX(0);
}
.cart-drawer header {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 20px;
  border-bottom: 1px solid var(--line);
}
.cart-drawer h2 {
  margin: 0;
  font-size: 23px;
}
.cart-drawer button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: #111111;
  font-weight: 800;
  cursor: pointer;
}
.cart-drawer-body {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 0;
}
.mini-cart-lines {
  overflow-y: auto;
  padding: 18px 20px;
}
.mini-cart-line {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.mini-cart-line img {
  width: 74px;
  height: 86px;
  object-fit: contain;
  background: var(--soft);
}
.mini-cart-line h3 {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.35;
}
.mini-cart-line p {
  margin: 0;
  color: var(--brand-blue);
  font-weight: 800;
}
.mini-cart-line a {
  color: #111111;
}
.mini-cart-footer {
  align-self: end;
  padding: 20px;
  border-top: 1px solid var(--line);
}
.mini-cart-footer div {
  display: flex;
  justify-content: space-between;
  font-size: 21px;
  margin-bottom: 14px;
}
.mini-cart-footer p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
}
.mini-outline,
.mini-primary {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: 800;
}
.mini-outline {
  background: var(--soft);
  color: #111111;
}
.mini-primary {
  background: var(--brand-blue);
  color: #111111;
}
.mini-cart-empty {
  padding: 20px;
  font-weight: 700;
}

@media (min-width: 1200px) {
  .eca-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .product-rail {
    padding: 34px 12px;
  }
  .eca-product-grid,
  .product-grid,
  .product-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .product-card {
    border-radius: 10px;
  }
  .product-media {
    height: 164px;
  }
  .product-media img {
    height: 132px;
    width: 92%;
  }
  .product-body {
    padding: 12px;
  }
  .category-link {
    font-size: 11px;
  }
  .product-body h3 {
    min-height: 43px;
    font-size: 13px;
    line-height: 1.25;
  }
  .rating {
    font-size: 12px;
    margin-bottom: 8px;
  }
  .price strong {
    font-size: 17px;
  }
  .badges {
    top: 7px;
    left: 8px;
  }
  .badges span {
    min-width: 62px;
    height: 20px;
    font-size: 10px;
  }
  .cart-btn,
  .quote-btn {
    min-height: 36px;
    border-radius: 8px;
    font-size: 12px;
  }
  .quote-btn {
    margin-top: 7px;
  }
  .quote-mini-form {
    grid-template-columns: 1fr;
  }
  .quote-confirmation-grid .btn {
    width: 100%;
  }
  .rail-head {
    margin-bottom: 18px;
  }
  .rail-head h2 {
    font-size: 23px;
  }
  .rail-head p,
  .rail-head a {
    font-size: 13px;
  }
  .round-categories {
    grid-template-columns: repeat(3, 1fr);
  }
  .round-categories span {
    width: 92px;
    height: 92px;
  }
  .round-categories img {
    width: 68px;
    height: 68px;
  }
  .round-categories a {
    font-size: 12px;
  }
  .newsletter-band {
    min-height: 290px;
  }
}

.checkout-summary .checkout-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.checkout-summary .checkout-line span {
  display: block;
  font-size: 14px;
}
.checkout-summary small {
  color: var(--brand-blue);
  font-weight: 800;
}
.grand-total {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  font-size: 18px;
}
.order-success strong {
  color: var(--brand-blue);
}
.confirmation-box h2 {
  margin: 8px 0 14px;
}
.confirm-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.confirm-grid span {
  font-weight: 700;
}
.confirmation-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.confirmation-line h3 {
  margin: 0 0 6px;
  font-size: 16px;
}
.confirmation-line p {
  margin: 0;
  font-size: 14px;
}