:root {
      --primary: #ff4d00;
      --dark: #101820;
      --light: #f6f7f9;
    }

    body {
      font-family: Arial, sans-serif;
      background: var(--light);
      color: #222;
    }

    .top-bar {
      background: var(--primary);
      color: #fff;
      font-size: 14px;
      padding: 8px 0;
    }

    .navbar {
      background: #fff;
      box-shadow: 0 5px 18px rgba(0,0,0,.08);
    }

    .navbar-brand {
      font-weight: 900;
      font-size: 26px;
      color: var(--dark);
    }

    .navbar-brand span {
      color: var(--primary);
    }

    .nav-link {
      color: #222;
      font-weight: 600;
      margin: 0 6px;
    }

    .nav-link:hover {
      color: var(--primary);
    }

    .nav-icons a {
      color: #222;
      font-size: 20px;
      margin-left: 15px;
      text-decoration: none;
    }

    .hero {
      min-height: 560px;
      background:
        linear-gradient(rgba(0,0,0,.58), rgba(0,0,0,.58)),
        url("https://images.unsplash.com/photo-1517649763962-0c623066013b?auto=format&fit=crop&w=1600&q=80");
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      color: #fff;
    }

    .hero h1 {
      font-size: 58px;
      font-weight: 900;
      line-height: 1.1;
    }

    .btn-orange {
      background: var(--primary);
      color: #fff;
      border-radius: 30px;
      padding: 11px 28px;
      font-weight: 700;
      border: none;
    }

    .btn-orange:hover {
      background: #df4300;
      color: #fff;
    }

    .section-title {
      text-align: center;
      margin-bottom: 40px;
    }

    .section-title h2 {
      font-weight: 900;
      text-transform: uppercase;
    }

    .section-heading-row {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 34px;
    }

    .section-heading-row h2 {
      margin: 4px 0 7px;
      color: var(--dark);
      font-size: clamp(28px, 3vw, 40px);
      font-weight: 900;
      text-transform: uppercase;
    }

    .section-heading-row p {
      color: #6c757d;
      margin: 0;
    }

    .section-kicker {
      color: var(--primary);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 1.8px;
      text-transform: uppercase;
    }

    .section-link {
      color: var(--dark);
      font-weight: 800;
      text-decoration: none;
      white-space: nowrap;
    }

    .section-link:hover {
      color: var(--primary);
    }

    .dynamic-category-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }

    .dynamic-category-card {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px;
      color: var(--dark);
      background: #fff;
      border: 1px solid #e9edf1;
      border-radius: 18px;
      box-shadow: 0 9px 26px rgba(16, 24, 32, .06);
      text-decoration: none;
      transition: .3s;
    }

    .dynamic-category-card:hover {
      color: var(--dark);
      border-color: rgba(255, 77, 0, .35);
      box-shadow: 0 14px 30px rgba(16, 24, 32, .1);
      transform: translateY(-4px);
    }

    .dynamic-category-image {
      width: 84px;
      height: 84px;
      flex: 0 0 84px;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: #f3f5f7;
      border-radius: 14px;
    }

    .dynamic-category-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .dynamic-category-card strong,
    .dynamic-category-card small {
      display: block;
    }

    .dynamic-category-card strong {
      font-size: 17px;
    }

    .dynamic-category-card small {
      color: #7b858e;
      margin-top: 7px;
    }

    .home-featured-products {
      background: linear-gradient(180deg, #f6f7f9, #eef1f4);
    }

    .home-product-image {
      height: 245px;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: #fff;
      position: relative;
    }

    .product-card .home-product-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 12px;
    }

    .price-request {
      color: #59636d;
      font-weight: 800;
    }

    .service-box,
    .category-small,
    .product-card,
    .blog-card,
    .mini-section {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }

    .service-box {
      padding: 26px 16px;
      text-align: center;
      height: 100%;
    }

    .service-box i,
    .category-small i {
      font-size: 42px;
      color: var(--primary);
    }

    .category-banner {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      color: #fff;
    }

    .category-banner img {
      width: 100%;
      height: 310px;
      object-fit: cover;
      filter: brightness(50%);
      transition: .4s;
    }

    .category-banner:hover img {
      transform: scale(1.08);
    }

    .category-content {
      position: absolute;
      left: 30px;
      right: 30px;
      bottom: 30px;
      z-index: 2;
    }

    .category-small {
      text-align: center;
      padding: 26px 14px;
      transition: .3s;
      height: 100%;
    }

    .category-small:hover,
    .product-card:hover {
      transform: translateY(-7px);
    }

    .product-card {
      overflow: hidden;
      transition: .3s;
      position: relative;
      height: 100%;
    }

    .product-card img {
      width: 100%;
      height: 245px;
      object-fit: cover;
    }

    .discount-badge {
      position: absolute;
      top: 14px;
      left: 14px;
      background: var(--primary);
      color: #fff;
      padding: 6px 12px;
      border-radius: 30px;
      font-size: 12px;
      font-weight: 800;
      z-index: 2;
    }

    .price {
      color: var(--primary);
      font-size: 20px;
      font-weight: 800;
    }

    .rating {
      color: #ffc107;
      font-size: 14px;
    }

    .trending-section {
      background:
        radial-gradient(circle at top left, rgba(255,77,0,.20), transparent 35%),
        linear-gradient(135deg, #101820, #172331);
      color: #fff;
    }

    .trending-label {
      background: rgba(255,255,255,.12);
      color: #ffb08a;
      padding: 8px 18px;
      border-radius: 30px;
      font-weight: 800;
      display: inline-block;
      margin-bottom: 12px;
    }

    .trending-header h2 {
      font-size: 42px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .trending-header p {
      color: #cfd6df;
    }

    .trending-card {
      position: relative;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 26px;
      overflow: hidden;
      backdrop-filter: blur(10px);
      transition: .35s;
      height: 100%;
    }

    .trending-card:hover {
      transform: translateY(-10px);
      background: rgba(255,255,255,.13);
    }

    .trending-img {
      padding: 18px;
    }

    .trending-img img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      border-radius: 20px;
    }

    .trending-body {
      padding: 20px;
    }

    .trending-body h5 {
      font-weight: 800;
    }

    .trending-body p {
      color: #cfd6df;
      font-size: 14px;
    }

    .hot-badge {
      position: absolute;
      top: 18px;
      right: 18px;
      background: var(--primary);
      color: #fff;
      padding: 7px 13px;
      border-radius: 30px;
      font-size: 12px;
      font-weight: 900;
      z-index: 3;
    }

    .trend-cart {
      width: 42px;
      height: 42px;
      background: var(--primary);
      color: #fff;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      font-size: 20px;
    }

    .trend-cart:hover {
      background: #fff;
      color: var(--primary);
    }

    .offer-box {
      background:
        linear-gradient(rgba(16,24,32,.88), rgba(16,24,32,.88)),
        url("https://images.unsplash.com/photo-1571019613914-85f342c1d8ef?auto=format&fit=crop&w=1200&q=80");
      background-size: cover;
      background-position: center;
      color: #fff;
      border-radius: 24px;
      padding: 60px 40px;
    }

    .mini-section {
      padding: 28px;
      height: 100%;
    }

    .mini-product {
      display: flex;
      gap: 15px;
      align-items: center;
      border-bottom: 1px solid #eee;
      padding: 16px 0;
    }

    .mini-product img {
      width: 90px;
      height: 90px;
      border-radius: 14px;
      object-fit: cover;
    }

    .blog-card {
      overflow: hidden;
      height: 100%;
    }

    .blog-card img {
      width: 100%;
      height: 220px;
      object-fit: cover;
    }

    .blog-card a {
      color: var(--primary);
      font-weight: 700;
      text-decoration: none;
    }

    .newsletter {
      background: var(--dark);
      color: #fff;
      border-radius: 24px;
      padding: 45px 25px;
    }

    footer {
      background: var(--dark);
      color: #ccc;
      padding: 55px 0 18px;
    }

    footer h5 {
      color: #fff;
      font-weight: 800;
      margin-bottom: 18px;
    }

    footer a {
      color: #ccc;
      text-decoration: none;
      display: block;
      margin-bottom: 9px;
    }

    footer a:hover {
      color: var(--primary);
    }


    .dropdown-menu {
      border: 0;
      border-radius: 16px;
      padding: 12px;
      box-shadow: 0 12px 30px rgba(0,0,0,.12);
    }

    .dropdown-item {
      font-weight: 600;
      border-radius: 10px;
      padding: 9px 14px;
    }

    .dropdown-item:hover {
      background: rgba(255,77,0,.10);
      color: var(--primary);
    }

    .exclusive-collection {
      background:
        radial-gradient(circle at 15% 10%, rgba(255,77,0,.12), transparent 28%),
        linear-gradient(180deg, #ffffff, #f6f7f9);
    }

    .collection-card {
      position: relative;
      overflow: hidden;
      border-radius: 26px;
      background: #fff;
      box-shadow: 0 12px 32px rgba(0,0,0,.10);
      height: 100%;
      transition: .35s;
    }

    .collection-card:hover {
      transform: translateY(-8px);
    }

    .collection-card img {
      width: 100%;
      height: 310px;
      object-fit: cover;
    }

    .collection-body {
      padding: 22px;
    }

    .collection-tag {
      position: absolute;
      top: 18px;
      left: 18px;
      background: var(--dark);
      color: #fff;
      padding: 7px 14px;
      border-radius: 30px;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .5px;
    }

    .jersey-section {
      background:
        linear-gradient(rgba(16,24,32,.92), rgba(16,24,32,.92)),
        url("https://images.unsplash.com/photo-1522778119026-d647f0596c20?auto=format&fit=crop&w=1600&q=80");
      background-size: cover;
      background-position: center;
      color: #fff;
    }

    .jersey-card {
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 24px;
      overflow: hidden;
      height: 100%;
      transition: .35s;
    }

    .jersey-card:hover {
      transform: translateY(-8px);
      background: rgba(255,255,255,.13);
    }

    .jersey-card img {
      width: 100%;
      height: 280px;
      object-fit: cover;
    }

    .jersey-card .card-body {
      padding: 22px;
    }

    .jersey-card p {
      color: #cfd6df;
    }

    @media (max-width: 991px) {
      .dynamic-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .hero {
        min-height: 480px;
        text-align: center;
      }

      .hero h1 {
        font-size: 42px;
      }

      .nav-icons {
        margin-top: 15px;
      }
    }

    @media (max-width: 576px) {
      .section-heading-row {
        align-items: start;
        flex-direction: column;
        margin-bottom: 24px;
      }

      .dynamic-category-grid {
        grid-template-columns: 1fr;
      }

      .top-bar {
        text-align: center;
        font-size: 12px;
      }

      .navbar-brand {
        font-size: 22px;
      }

      .hero {
        min-height: 420px;
      }

      .hero h1 {
        font-size: 32px;
      }

      .hero p {
        font-size: 15px;
      }

      .category-banner img {
        height: 250px;
      }

      .category-content {
        left: 20px;
        right: 20px;
        bottom: 20px;
      }

      .product-card img,
      .trending-img img {
        height: 200px;
      }

      .trending-header h2 {
        font-size: 30px;
      }

      .offer-box {
        padding: 35px 22px;
        text-align: center;
      }

      .collection-card img,
      .jersey-card img {
        height: 220px;
      }

      .newsletter {
        padding: 32px 18px;
      }
    }


    /* Homepage hero carousel */
    .hero-carousel,
    .hero-carousel .carousel-inner,
    .hero-carousel .carousel-item {
      width: 100%;
    }

    .hero-carousel .carousel-item {
      height: clamp(320px, 47vw, 760px);
      background: #07131f;
      overflow: hidden;
    }

    .hero-carousel .hero-slide-content {
      height: 100%;
      min-height: 100%;
      background:
        linear-gradient(rgba(0,0,0,.58), rgba(0,0,0,.58)),
        url("https://images.unsplash.com/photo-1517649763962-0c623066013b?auto=format&fit=crop&w=1600&q=80");
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      color: #fff;
    }

    .hero-carousel .hero-slide-content h1 {
      font-size: clamp(32px, 4vw, 58px);
      font-weight: 900;
      line-height: 1.1;
    }

    .hero-carousel .banner-slide {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    .hero-carousel .carousel-control-prev,
    .hero-carousel .carousel-control-next {
      width: 7%;
    }

    .hero-carousel .carousel-control-prev-icon,
    .hero-carousel .carousel-control-next-icon {
      width: 46px;
      height: 46px;
      padding: 12px;
      border-radius: 50%;
      background-color: rgba(0,0,0,.5);
      background-size: 45%;
    }

    .hero-carousel .carousel-indicators {
      margin-bottom: 1rem;
    }

    .hero-carousel .carousel-indicators [data-bs-target] {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 0;
      margin: 0 5px;
    }

    @media (max-width: 991px) {
      .hero-carousel .carousel-item {
        height: clamp(300px, 56vw, 520px);
      }

      .hero-carousel .hero-slide-content {
        text-align: center;
      }

      .hero-carousel .hero-slide-content .col-lg-7 {
        margin-inline: auto;
      }
    }

    @media (max-width: 576px) {
      .hero-carousel .carousel-item {
        height: 300px;
      }

      .hero-carousel .hero-slide-content {
        padding: 30px 28px;
      }

      .hero-carousel .hero-slide-content h1 {
        font-size: 30px;
      }

      .hero-carousel .hero-slide-content p {
        font-size: 14px;
      }

      .hero-carousel .banner-slide {
        object-fit: cover;
      }

      .hero-carousel .carousel-control-prev,
      .hero-carousel .carousel-control-next {
        width: 12%;
      }

      .hero-carousel .carousel-control-prev-icon,
      .hero-carousel .carousel-control-next-icon {
        width: 36px;
        height: 36px;
      }
    }