/* =========================================================
   THEME: Luxury Tables Webshop
   (only overrides)
   ========================================================= */

.theme-table-shop {
  /* optional: slightly warmer luxury tone */
  --accent-cyan: #4be3ff; /* keep modern but refined */
  --accent-cyan-soft: rgba(75, 227, 255, 0.14);
}

/* ✅ only keep this for hero-media-inner (if you want) */
.theme-table-shop .hero-media-inner {
  background:
    radial-gradient(900px circle at 30% 25%, rgba(255,255,255,0.22), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.02));
}

/* Optional: make the kicker feel more premium */
.theme-table-shop .kicker {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* Make hero video fit the existing container */
.hero-media-inner {
  position: relative;
  overflow: hidden;
  border-radius: inherit; /* keeps your rounded corners */
}

.hero-media-inner .hero-video {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;     /* fills container, crops nicely */
  object-position: center;

  border-radius: inherit;
}

.gallery-main {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.gallery-main::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(900px circle at 30% 25%, rgba(255,255,255,0.22), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.02));
}

.gallery-main-media{
  width:100%;
  min-height: 420px;            /* adjust */
  border-radius: var(--radius);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  transition: opacity 220ms var(--ease-liquid), transform 220ms var(--ease-liquid);
}

.thumb-media {
  width: 100%;
  height: 92px;
  border-radius: 14px;

  background-size: cover;       /* or contain if you prefer */
  background-position: center;
  background-repeat: no-repeat;

  position: relative;
  overflow: hidden;
}

.thumb-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(500px circle at 30% 25%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.02));
}