.shops-hero{
  padding: 20px 0 18px;
  text-align: center;
}

.shops-hero h1{
  margin: 0 0 20px;
  font-family: var(--font-main);
  font-weight: 800;
  font-size: clamp(46px, 4.6vw, 76px);
  color: var(--gold-canva);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.shops-media{
  margin: 0 auto 56px;
  width: min(920px, 100%);
  height: 360px;
  border-radius: 18px;
  background: #0b0b0f;
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

.shops-hero-video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.02);
}

.shops-video-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 70% at 50% 35%,
      rgba(255,255,255,0.06),
      rgba(0,0,0,0.26) 60%,
      rgba(0,0,0,0.44) 100%
    ),
    linear-gradient(180deg,
      rgba(0,0,0,0.18),
      rgba(0,0,0,0.08) 40%,
      rgba(0,0,0,0.22)
    );
  mix-blend-mode: multiply;
}

.shops-video-grain{
  position: absolute;
  inset: -18%;
  pointer-events: none;
  opacity: 0.10;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.04) 1px,
      rgba(0,0,0,0.03) 2px,
      rgba(0,0,0,0.03) 3px
    );
  transform: rotate(8deg);
  animation: shopsGrain 6.5s steps(2,end) infinite;
}

@keyframes shopsGrain{
  0%   { transform: rotate(8deg) translate3d(0,0,0); }
  100% { transform: rotate(8deg) translate3d(-2%, 1.5%, 0); }
}

.shops-copy{
  max-width: 900px;
  margin: 0 auto 18px;
  font-family: var(--font-main);
  font-weight: 200;
  font-size: 17px;
  line-height: 1.85;
  color: #4a4a4a;
}

.featured-wrap{ overflow: visible; }

.featured-title{
  text-align: center;
  font-family: var(--font-main);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-canva);
  margin: 26px 0 18px;
}

.featured-carousel{
  position: relative;
  width: 100%;
  padding-inline: 72px;
}

.carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.92);
  cursor: pointer;
  box-shadow: var(--shadow);

  font-size: 22px;
  line-height: 0;
  display: grid;
  place-items: center;
}

.carousel-btn.left{ left: 14px; }
.carousel-btn.right{ right: 14px; }

.carousel-viewport{
  overflow: hidden;
  border-radius: 22px;
  touch-action: pan-y;
}

.carousel-track{
  display: flex;
  gap: 0;
  padding: 6px 0 18px;
  will-change: transform;
  transition: transform 700ms cubic-bezier(.22,.8,.24,1);
}

.slide{
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 6px;
}

.shop-card{
  background: var(--card);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 18px;
  padding: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.shop-card img{
  width: 100%;
  background: #fff;
  border-radius: 14px;
  display: block;
}

.shop-name{
  margin: 12px 0 2px;
  font-family: var(--font-main);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gold-canva);
  text-align: center;
}

.shop-desc{
  margin: 0 0 8px;
  font-family: var(--font-main);
  font-weight: 200;
  font-size: 15px;
  line-height: 1.6;
  color: #777;
  text-align: center;
}

.slide .shop-card{
  position: relative;
  z-index: 0;
  isolation: isolate;

  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  border-radius: 22px;
  padding: 18px;

  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.10);
}

.slide .shop-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 22px;
  pointer-events:none;
  z-index: 0;

  border: 1px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg,
      rgba(201,167,92,0.10),
      rgba(201,167,92,0.34),
      rgba(255,255,255,0.06),
      rgba(201,167,92,0.20)
    ) border-box;

  opacity: .95;
}

.slide .shop-card > *{ position: relative; z-index: 1; }

.slide .media-frame{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

.slide .media-frame::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 75% at 50% 35%,
      rgba(255,255,255,0.08),
      rgba(0,0,0,0.28) 65%,
      rgba(0,0,0,0.42) 100%
    ),
    linear-gradient(180deg,
      rgba(0,0,0,0.18),
      rgba(0,0,0,0.10) 40%,
      rgba(0,0,0,0.22)
    );
  mix-blend-mode: multiply;
  pointer-events:none;
  z-index: 2;
}

.slide .media-frame::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.04) 1px,
      rgba(0,0,0,0.03) 2px,
      rgba(0,0,0,0.03) 3px
    );
  opacity: 0.12;
  transform: rotate(8deg);
  pointer-events:none;
  z-index: 3;
  animation: grainMove 6.5s steps(2,end) infinite;
}

.slide .shop-card img{
  height: 280px;
  width: 100%;
  object-fit: cover;
  padding: 0;

  filter: contrast(1.08) saturate(1.06) brightness(0.98);
  transform: scale(1.06);
  will-change: transform;
  animation: kenburnsLux 9.8s ease-in-out infinite alternate;
}

.slide .shop-name{ font-size: 20px; }
.slide .shop-desc{ font-size: 16px; }

.slide .shop-card .lux-sweep{
  position:absolute;
  left: 18px;
  right: 18px;
  top: 18px;
  height: 280px;
  border-radius: 14px;
  pointer-events:none;
  z-index: 4;

  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,0.10) 35%,
    rgba(201,167,92,0.12) 50%,
    rgba(255,255,255,0.08) 60%,
    transparent 100%
  );
  transform: translateX(-60%) skewX(-12deg);
  opacity: 0;
  transition: opacity .25s ease;
}

.slide .shop-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.14);
}
.slide .shop-card:hover img{
  filter: contrast(1.10) saturate(1.10) brightness(1.01);
  transform: scale(1.09);
}
.slide .shop-card:hover .lux-sweep{
  opacity: 1;
  animation: sweep 1.6s cubic-bezier(.22,.8,.24,1) 1;
}

@keyframes kenburnsLux{
  from { transform: scale(1.06) translate3d(0,0,0); }
  to   { transform: scale(1.12) translate3d(-1.2%, -0.6%, 0); }
}
@keyframes grainMove{
  0%   { transform: rotate(8deg) translate3d(0,0,0); }
  100% { transform: rotate(8deg) translate3d(-2%, 1.5%, 0); }
}
@keyframes sweep{
  0%   { transform: translateX(-70%) skewX(-12deg); }
  100% { transform: translateX(70%) skewX(-12deg); }
}

.shops-wrap{ padding: 70px 0 60px; }

.shops-grid{
  display: grid;
  justify-content: center;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 220px));
}

.shops-grid .shop-card{
  width: 220px;
  padding: 14px;
}

.shops-grid .shop-card img{
  height: 150px;
  object-fit: contain;
  padding: 18px;
}

.shops-grid .shop-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

@media (max-width: 980px){
  .shops-media{ height: 280px; }
  .featured-carousel{ padding-inline: 62px; }
  .slide .shop-card{ max-width: 520px; }
  .slide .shop-card img{ height: 240px; }
  .slide .shop-card .lux-sweep{ height: 240px; }
}

@media (max-width: 680px){
  .shops-media{ height: 240px; }
  .featured-carousel{ padding-inline: 52px; }

  .carousel-btn{ width: 40px; height: 40px; }
  .carousel-btn.left{ left: 10px; }
  .carousel-btn.right{ right: 10px; }

  .slide .shop-card{ max-width: 360px; }
  .slide .shop-card img{ height: 200px; }
  .slide .shop-card .lux-sweep{ height: 200px; }
  .slide .shop-name{ font-size: 18px; }
  .slide .shop-desc{ font-size: 14px; }

  .shops-grid{
    grid-template-columns: repeat(2, minmax(0, 150px));
    gap: 12px;
  }

  .shops-grid .shop-card{
    width: 150px;
    padding: 10px;
  }

  .shops-grid .shop-card img{
    height: 92px;
    padding: 12px;
  }

  .shops-grid .shop-name{ font-size: 14px; }
  .shops-grid .shop-desc{
    font-size: 12.5px;
    line-height: 1.45;
  }
}

@media (max-width: 380px){
  .shops-grid{ grid-template-columns: repeat(2, 140px); }
  .shops-grid .shop-card{ width: 140px; }
}