/* Munawar Computers V3 — wide, responsive storefront. */
/* The old 1240px cap left unusually large empty gutters on wide displays. */
.wrap {
  width: calc(100% - 2 * clamp(18px, 3.6vw, 64px));
  max-width: 1840px;
  padding-left: 0;
  padding-right: 0;
  margin-inline: auto;
}

/* Keep the hero's artwork visually centered inside its larger column. */
@media (min-width: 1101px) {
  .hero-card {
    grid-template-columns: 47% 53%;
    min-height: 575px;
  }
  .hero-text {
    padding: clamp(100px, 6vw, 132px) 24px 86px clamp(48px, 5vw, 92px);
  }
  .hero-visual { min-height: 575px; }
  .hero-visual .laptop {
    left: calc(50% - 250px);
    top: 138px;
  }
  .hero-visual .phone {
    right: 11%;
    top: 253px;
  }
  .hero-visual .halo {
    left: 50%;
    transform: translateX(-50%);
  }
  .hero-visual .h2 { left: 50%; }
  .hero-visual .tag1 { right: 7%; }
  .hero-visual .tag2 { left: 16%; }
  .slide-counter { left: clamp(48px, 5vw, 92px); }

  /* Proportionate category/product cards on wide desktop screens. */
  .categories { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cat-card { height: 247px; }
  .cat-card .artbox { height: 147px; }
  .cat-card svg { width: min(84%, 182px); height: 138px; }
  .products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .product-visual { height: clamp(235px, 17vw, 290px); }
  .product-info { padding: 21px 21px 20px; }
  .product-info h3 { font-size: 14px; }
}

/* Medium screens retain balanced gutters rather than overshrinking content. */
@media (min-width: 851px) and (max-width: 1100px) {
  .wrap { width: calc(100% - 48px); }
}

/* On tablets and phones, preserve the V2 horizontal category carousel. */
@media (max-width: 850px) {
  .wrap { width: calc(100% - 36px); }
}

@media (max-width: 550px) {
  .wrap { width: calc(100% - 28px); }
}