*,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Arial, sans-serif;
      background: #f5f7fa;
      color: #222;
    }

    .visually-hidden {
      position: absolute !important;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .hero-wrapper {
      margin: 0px 16px 8px;
      border-radius: 16px;
      overflow: hidden;
      position: relative;
  background: linear-gradient(135deg, var(--hero-c1, #e0f4f8) 0%, var(--hero-c2, #c8ebf3) 100%);
  transition: background 0.6s ease;
    }


    .carousel-track {
      display: flex;
      transition: transform 0.45s cubic-bezier(.4, 0, .2, 1);
      will-change: transform;
    }

    .slide {
      min-width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 60px 15px 60px;
      min-height: 290px;
      gap: 24px;
      position: relative;
      background-size: cover;
      background-position: center;
    }

    .slide-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(128deg, rgba(224, 244, 248, .94) 0%, rgba(224, 244, 248, .55) 55%, rgba(224, 244, 248, .15) 65%);
      z-index: 0;
    }

    .slide-content {
      max-width: 380px;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
    }

    .slide-eyebrow {
      color: #0891b2;
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.8px;
      margin-bottom: 14px;
    }

    .slide h2 {
      font-size: clamp(22px, 3vw, 36px);
      font-weight: 800;
      color: #111;
      line-height: 1.2;
      margin-bottom: 14px;
    }

    .slide p {
      font-size: 16px;
      color: #555;
      margin-bottom: 26px;
      line-height: 1.6;
    }

    .btn-primary {
      background: #0891b2;
      color: #fff;
      padding: 14px 22px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: background 0.2s;
      border: none;
      cursor: pointer;
    }

    .btn-primary:hover,
    .btn-primary:focus-visible {
      background: #0e7490;
    }

    .slide-images {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;
      flex: 1;
      overflow: hidden;
      position: relative;
      z-index: 1;
    }

    .slide-images img {
      width: 220px;
      height: 220px;
      object-fit: cover;
      border-radius: 12px;
      flex-shrink: 0;
    }

    /* Arrows */
    .carousel-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: #fff;
      border: none;
      border-radius: 50%;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.13);
      font-size: 20px;
      color: #444;
      z-index: 10;
      transition: box-shadow 0.2s;
    }

    .carousel-arrow:hover,
    .carousel-arrow:focus-visible {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
      outline: 2px solid #0891b2;
      outline-offset: 2px;
    }

    .carousel-arrow.prev { left: 14px; }
    .carousel-arrow.next { right: 14px; }

    /* Dots */
    .carousel-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
    }

    .cdot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #c5d6e0;
      border: none;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
      padding: 0;
    }

    .cdot.active { background: #0891b2; transform: scale(1.25); }
    .cdot:focus-visible { outline: 2px solid #0891b2; outline-offset: 3px; }

    .trust-bar, .stats-bar {
      background: #fff;
      margin: 10px 16px 20px;
      border-radius: 14px;
      display: flex;
      flex-wrap: wrap;
      padding: 16px 14px;
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    }
    .stats-bar { margin: 0 16px 30px; }

    .trust-item, .stat-item {
      flex: 1 1 160px;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 10px 18px;
      border-right: 1px solid #e8ecef;
    }

    .trust-item:last-child, .stat-item:last-child { border-right: none; }
    .trust-icon, .stat-icon { color: #0891b2; flex-shrink: 0; }

    .trust-item strong, .stat-item strong {
      font-size: 14px; font-weight: 700; color: #111; display: block;
    }
    .trust-item span, .stat-item span { font-size: 14px; color: #999; }

    .cards-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin: 0 16px 24px;
    }

    .card {
      background: #fff;
      border-radius: 14px;
      overflow: hidden;
      position: relative;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
      display: flex;
      flex-direction: column;
      min-height: 270px;
    }

    .card::after {
      content: '';
      position: absolute;
      bottom: 0; right: 0;
      width: 0; height: 0;
      border-style: solid;
      border-width: 0 0 170px 170px;
      border-color: transparent transparent #0891b2 transparent;
      opacity: 0.13;
      z-index: 1;
      pointer-events: none;
    }

    .card-body { padding: 20px 20px 0; position: relative; z-index: 2; }
    .card-body h3 { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 5px; }
    .card-body p { font-size: 14px; color: #777; line-height: 1.5; }

    .card-thumb {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 24px;
      position: relative;
      z-index: 2;
    }

    .card-thumb img {
      width: 100%;
      max-height: 150px;
      object-fit: contain;
    }

    .card-footer { padding: 14px 20px 18px; position: relative; z-index: 2; }

    .btn-outline {
      border: 1.5px solid #0891b2;
      color: #0891b2;
      border-radius: 8px;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 600;
      background: #fff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      text-decoration: none;
      transition: background 0.2s, color 0.2s;
      white-space: nowrap;
    }

    .btn-outline:hover, .btn-outline:focus-visible {
      background: #0891b2;
      color: #fff;
      outline: none;
    }

    .section-title { padding: 24px 16px 12px; }
    .section-title .title {
      font-size: 20px;
      font-weight: 800;
      color: #111;
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .infinite-carousel {
      position: relative;
      margin: 0 16px 24px;
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
      padding: 14px 8px;
    }

    .ic-viewport {
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
    }

    .ic-track {
      display: flex;
      list-style: none;
      width: max-content;
      animation: ic-scroll linear infinite;
      animation-duration: var(--ic-duration, 40s);
    }

    .ic-item { flex: 0 0 auto; width: 190px; padding: 0 8px; }

    .infinite-carousel:hover .ic-track,
    .infinite-carousel:focus-within .ic-track,
    .infinite-carousel.is-paused .ic-track {
      animation-play-state: paused;
    }

    @keyframes ic-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    @media (prefers-reduced-motion: reduce) {
      .ic-track { animation: none; }
      .ic-viewport { overflow-x: auto; }
    }

    .ic-toggle {
      position: absolute;
      top: 10px; right: 10px;
      z-index: 5;
      background: #fff;
      border: 1px solid #e2e8ee;
      border-radius: 50%;
      width: 30px; height: 30px;
      font-size: 13px;
      cursor: pointer;
      color: #0891b2;
    }

    .ic-toggle:hover, .ic-toggle:focus-visible {
      outline: 2px solid #0891b2;
      outline-offset: 2px;
    }

    .product { display: block; text-align: left; }

    .product-img {
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      background: #f5f7fa;
      aspect-ratio: 1 / 1;
    }

    .product-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .product-label { position: absolute; top: 8px; left: 8px; }
    .product-label .new {
      background: #0891b2;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      text-transform: uppercase;
    }

    .product-body { padding: 0px 4px 0; }
    .product-name {
      font-size: 14px;
      font-weight: 600;
      color: #222;
      line-height: 1.35;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 38px;
    }
    .product-price { font-size: 15px; font-weight: 800; color: #0891b2; margin-top: 4px; }

    .border-c { border: 1px solid #eef1f4; border-radius: 10px; padding: 6px; }

    .flex { display: flex; flex-wrap: wrap; }
    .container-fluid { padding: 0 16px; margin-bottom: 24px; }
    .col-md-3.col-xs-4 { width: 25%; padding: 8px; }

    /* ── HOT DEAL BANNER ── */
    #hot-deal {
      background-size: cover;
      background-position: center;
      border-radius: 14px;
      margin: 0 16px 24px;
      padding: 40px 16px;
    }
    .hot-deal { text-align: center; }
    .hot-deal h2 { font-size: 26px; font-weight: 800; color: #111; margin-bottom: 10px; }
    .hot-deal p { color: #333; margin-bottom: 18px; }
    .cta-btn {
      display: inline-block;
      background: #0891b2;
      color: #fff;
      padding: 12px 24px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 700;
    }
    .cta-btn:hover, .cta-btn:focus-visible { background: #0e7490; }

    @media (max-width: 900px) {
      .slide { padding: 36px 52px 36px 36px; min-height: 240px; }
      .slide-images img { width: 160px; height: 160px; }
      .cards-grid { grid-template-columns: repeat(2, 1fr); }
      .trust-item, .stat-item { border-right: none; border-bottom: 1px solid #e8ecef; }
      .trust-item:nth-child(odd), .stat-item:nth-child(odd) { border-right: 1px solid #e8ecef; }
      .trust-item:last-child, .stat-item:last-child { border-bottom: none; }
      .col-md-3.col-xs-4 { width: 50%; }
    }

    @media (max-width: 600px) {
      .hero-wrapper { margin: 10px 10px 6px; border-radius: 14px; }
      .slide { flex-direction: column; align-items: flex-start; padding: 28px 24px 24px; min-height: unset; gap: 18px; }
      .slide h2 { font-size: 22px; }
      .slide-images { justify-content: flex-start; gap: 10px; width: 100%; overflow-x: auto; scrollbar-width: none; }
      .slide-images::-webkit-scrollbar { display: none; }
      .slide-images img { width: 120px; height: 120px; border-radius: 8px; }
      .carousel-arrow { display: none; }
      .trust-bar, .stats-bar { margin: 10px 10px 14px; padding: 10px 6px; }
      .trust-item, .stat-item { flex: 1 1 100%; border-right: none; border-bottom: 1px solid #e8ecef; padding: 10px 14px; }
      .trust-item:last-child, .stat-item:last-child { border-bottom: none; }
      .cards-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 10px 16px; }
      .card { min-height: 220px; }
      .card-body h3 { font-size: 14px; }
      .card-thumb img { max-height: 100px; }
      .btn-outline { font-size: 14px; padding: 7px 14px; }
      .infinite-carousel { margin: 0 10px 16px; }
      .ic-item { width: 150px; }
      .col-md-3.col-xs-4 { width: 50%; }
    }

    #hot-deal {
	    background-size: cover;
	    background-position: center;
	    border-radius: 0px;
	    margin: 0 16px 24px;
	    padding: 40px 16px;
	    border:1px solid #1e1f2926!important;
	    border-left:transparent!important;
	    border-right:transparent!important;
	}

    .hero-wrapper { touch-action: pan-y; }