.carousel-wrapper {
      max-width: 900px;
      margin: 60px auto;
      padding: 0 20px;
    }

    .carousel {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .carousel-btn {
      border: none;
      background: darkslategrey;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      font-size: 20px;
    }

    .carousel-track {
      overflow-x: auto;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      display: grid;
      grid-auto-flow: column;
      grid-template-rows: repeat(3, 160px); /* Three rows */
      gap: 16px;
      padding: 10px 0;
    }

    .carousel-track::-webkit-scrollbar {
      height: 8px;
    }
    .carousel-track::-webkit-scrollbar-thumb {
      background: #bbb;
      border-radius: 4px;
    }

    .carousel-item, .carousel-item-locked {
      width: 160px;
      height: 160px;
      border-radius: 12px;
      overflow: hidden;
      scroll-snap-align: start;
      position: relative;
      cursor: pointer;
      background: #eee;
      box-shadow: 0 4px 10px rgba(0,0,0,0.12);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .carousel-item:hover, .carousel-item-locked:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    }

    .carousel-item img, .carousel-item-locked img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .carousel-item-label {
      position: absolute;
      bottom: 0;
      left: 0; right: 0;
      padding: 6px 8px;
      font-size: 0.8rem;
      background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
      color: white;
    }

    /* Overlay */
    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 1000;
    }

    .overlay.visible {
      opacity: 1;
      pointer-events: auto;
    }

    .overlay-content {
      background: darkslategrey;
      padding: 20px;
      border-radius: 14px;
      width: 50%;
      position: relative;
      display: flex;
      gap: 14px;
    }

    .overlay-image-wrapper {
      border-radius: 10px;
    }

    .overlay-image-wrapper img {
      width: 400px;
      object-fit: cover;
    }

    .overlay-close {
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 22px;
      cursor: pointer;
      background: none;
      border: none;
    }