:root {
  --powder-blue: #88AEEA;
  --pistachio: #B9D88A;
  --champagne: #F4E8DE;
  --blush: #E9D8D1;
  --silver: #D9DDE4;
  --text-primary: #1A1510;
  --text-secondary: #6B5E52;
  --white: #FFFFFF;
  --gold: #C9922A;
  --bg-color: var(--white);
  --header-height: 120px;
}

#titan_livechat_div {
  display: none;
}

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

html {
  scroll-behavior: smooth;
} */

.wrapper {
  /* background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: 'Work Sans', sans-serif;
  overflow-x: hidden; */
  transition: background-color 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.fod-voverlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999999;
  backdrop-filter: blur(5px);
  transition: .3s ease;
}

.fod-voverlay.active {
  display: flex;
}

.fod-vcontainer {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fod-video {
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fod-video fw-player {
  aspect-ratio: 16 / 7;
  width: 100%;
}

.fod-vclose {
  font-family: "Fraunces", serif;
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
  object-fit: cover;
}

a {
  text-decoration: none;
  color: inherit;
}

/* --- Prism Effect --- */
.prism-reflection {
  position: fixed;
  top: -20%;
  left: -20%;
  right: -20%;
  bottom: -20%;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(135deg, transparent 35%, rgba(233, 216, 209, 0.45) 40%, rgba(244, 232, 222, 0.55) 45%, rgba(185, 216, 138, 0.35) 50%, rgba(136, 174, 234, 0.45) 55%, rgba(217, 221, 228, 0.35) 60%, transparent 65%),
    radial-gradient(circle at 20% 30%, rgba(244, 232, 222, 0.4) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(136, 174, 234, 0.3) 0%, transparent 40%);
  filter: blur(60px);
  opacity: 0.85;
  background-size: 100% 100%;
  animation: prismShift 15s ease-in-out infinite alternate;
}

@keyframes prismShift {
  0% {
    transform: scale(1) translate(0, 0);
  }

  100% {
    transform: scale(1.05) translate(-2%, -2%);
  }
}

/* --- 3D Interactive Hero Sequence --- */
#hero-sequence {
  position: relative;
  height: 250vh;
  /* Smooth, controlled depth */
  z-index: 0;
}

/* Pastel holographic gradient */
#hero-sequence::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(216, 180, 226, 0.4) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(136, 174, 234, 0.35) 0%, transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(244, 210, 150, 0.3) 0%, transparent 60%),
    radial-gradient(circle at 30% 70%, rgba(233, 216, 209, 0.35) 0%, transparent 60%);
  filter: blur(45px);
}

#hero-left-stack {
  position: fixed;
  top: calc(36% + var(--header-height));
  left: 3%;
  transform: translateY(-50%);
  z-index: 5;
  will-change: transform, opacity;
}

#hero-right-stack {
  position: fixed;
  top: calc(37% + var(--header-height));
  right: 3%;
  transform:
    translateY(-50%);
  z-index: 13;
  will-change: transform, opacity;
}

/* --- MASSIVE Hero Side Polaroid Stacks --- */
.left-stack-anim,
.right-stack-anim {
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s 0.6s forwards;
  width: 320px;
  /* MASSIVELY SCALED to cover the sides */
}

.polaroid-base {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--white);
  padding: 12px 12px 36px 12px;
  /* Thickened padding to match the huge scale */
  border-radius: 4px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
  width: 100%;
  pointer-events: none;
}

.polaroid-base.top {
  position: relative;
  z-index: 3;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.polaroid-base img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 2px;
}

.fake-img {
  width: 100%;
  aspect-ratio: 1;
  background: var(--champagne);
  border-radius: 2px;
}

/* Global hidden state for the crossfade image (only used on mobile) */
.crossfade-img-2 {
  display: none;
}

.hero-cta-enter {
  position: absolute;
  top: calc(18% + var(--header-height));
  /* Snaps to the bottom right of the very first viewport */
  right: 48px;
  padding: 10px 20px;
  border-radius: 40px;
  font-family: 'Work Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  z-index: 20;
  background: linear-gradient(135deg, var(--blush), var(--champagne), rgba(216, 180, 226, 0.8), var(--powder-blue), var(--blush));
  background-size: 300% 300%;
  box-shadow: 0 10px 25px rgba(136, 174, 234, 0.35);
  animation: fadeUp 1s 0.8s forwards, rainbowScroll 6s ease infinite;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

@keyframes rainbowScroll {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.hero-cta-enter:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(136, 174, 234, 0.6);
}

.hero-cta-enter::after {
  content: '→';
  font-size: 14px;
  transition: transform 0.4s ease;
}

.hero-cta-enter:hover::after {
  transform: translateX(5px);
}

.hero-title-container {
  position: fixed;
  top: calc(0% + var(--header-height));
  /* Pushed significantly higher to keep the huge logo completely clear of the ring */
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 10;
  pointer-events: none;
  will-change: transform, opacity;
}

.hero-logo {
  width: 230px;
  /* Made MASSIVE */
  max-height: 38vh;
  /* Confines height so it absolutely won't hit the ring */
  object-fit: contain;
  margin: 0 auto;
  filter: brightness(0);
  /* Forces the image to render completely black */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s 0.4s forwards;
}

.hero-subtext {
  display: none;
  /* Hidden by default on Desktop */
}

#ring-scroll-container {
  position: fixed;
  top: calc(50% + var(--header-height));
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  pointer-events: none;
  will-change: transform, opacity;
}

#ring-float-wrapper {
  /* Desktop relies primarily on scroll animation */
  pointer-events: auto;
}

#hero-ring {
  width: 330px;
  object-fit: contain;
  filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.15));
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
}

/* Pop-out hover effect */
#hero-ring:hover {
  transform: scale(1.15);
}

/* Upgraded Technique Content as a Larger Polaroid */
.technique-content {
  position: fixed;
  top: 50%;
  right: 5%;
  width: 400px;
  background: var(--white);
  padding: 16px 16px 20px 16px;
  border-radius: 6px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
  transform: translateY(-50%) rotate(4deg);
  z-index: 12;
  opacity: 0;
  /* pointer-events: none; */
  will-change: transform, opacity;
}

.technique-img-wrapper {
  width: 100%;
  aspect-ratio: 4/3;
  margin-bottom: 24px;
  overflow: hidden;
  border-radius: 4px;
}

.technique-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.technique-text {
  padding: 0 16px;
  text-align: center;
}

.technique-text h2 {
  font-family: 'Fraunces', serif;
  font-size: 25px;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.technique-text p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 6px;
}

/* Slider Code */

.technique-track {
  position: relative;
  width: 100%;
}

.technique-slide {
  display: none;
  width: 100%;
}

.technique-slide.active {
  display: block;
  animation: fadeIn .4s ease;
}

.technique-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.technique-nav button {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  color: #000000;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* New CSS */

/* Base state for the new mobile carousel (Hidden on desktop) */
.mobile-hero-carousel-3d {
  display: none;
}

/* --- NEW EXPERT HELP SECTION STYLES (Desktop First) --- */
.expert-help-section {
  padding: 80px 5%;
  background: transparent;
  /* Makes the section inherit the rainbow page background */
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 0;
  position: relative;
}

.expert-container {
  max-width: 1200px;
  width: 100%;
}

.expert-header {
  text-align: center;
  margin-bottom: 50px;
}

.expert-header h2 {
  font-family: 'Fraunces', serif;
  font-size: 36px;
  color: #333;
  margin-bottom: 15px;
  font-weight: 400;
}

.expert-header p {
  font-family: 'Work Sans', sans-serif;
  font-size: 18px;
  color: #4A4A4A;
}

.expert-content {
  display: flex;
  gap: 60px;
  align-items: center;
  justify-content: space-between;
}

.expert-image-col {
  flex: 1;
}

.expert-image-col img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

.expert-form-col {
  flex: 1;
  max-width: 500px;
  width: 100%;
}

.expert-form .form-group {
  margin-bottom: 30px;
}

.expert-form input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #dcdcdc;
  padding: 12px 0;
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  color: #333;
  background: transparent;
  transition: border-bottom 0.3s ease;
}

.expert-form input:focus {
  outline: none;
  border-bottom: 1px solid #333;
}

.expert-form input::placeholder {
  color: #7A7A7A;
}

.expert-btn {
  width: 100%;
  /* Rainbow pill button styling matching the screenshot */
  background: linear-gradient(90deg, #e4f2eb 0%, #f8e1e5 33%, #fff3e2 66%, #dce5f6 100%);
  color: #333;
  border: none;
  border-radius: 40px;
  padding: 18px;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 15px;
  cursor: pointer;
  transition: opacity 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.expert-btn:hover {
  opacity: 0.9;
}

/* --- Generic Section Header for all sections --- */
.section-header {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}

.section-header h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.section-header p {
  font-family: 'Work Sans', sans-serif;
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 500px;
  margin: 12px auto 0 auto;
}

.hero-label {
  font-family: 'Work Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* --- Section 1: Collections (POLAROID CENTER) --- */
#collections {
  position: relative;
  height: 100vh;
  /* Constrained to exactly one viewport */
  padding: 60px 48px;
  z-index: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Prevents anything spilling over */
}

.floating-jewel {
  position: absolute;
  width: 200px;
  /* Perfectly sized to fit the empty side margins without overlapping */
  pointer-events: none;
  z-index: 15;
  /* Sits above but placed outside the tiles */
  filter: drop-shadow(0 25px 40px rgba(0, 0, 0, 0.12));
  opacity: 1;
}

.jewel-top-left {
  top: 15%;
  left: 4%;
  /* Safely tucked away on the far left side */
  animation: gentleFloat 8s ease-in-out infinite;
}

.jewel-bottom-right {
  bottom: 4%;
  /* Pushed down into the empty space below */
  right: 4%;
  /* Safely tucked away on the far right side */
  animation: gentleFloat 10s ease-in-out infinite reverse;
}

@keyframes gentleFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(2deg);
  }
}

.collection-grid {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  /* Tighter gap centers the tiles nicely */
  width: 100%;
  max-width: 950px;
  /* Constrained max-width ensures plenty of side space */
}

.collection-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--white);
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.collection-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), filter 1s ease;
  will-change: transform, filter;
}

/* --- 1. The Hero Polaroid (Rainbow - Center) --- */
.collection-card:nth-child(1) {
  order: 2;
  width: clamp(260px, 28vw, 380px);
  /* Slightly smaller to yield side space */
  aspect-ratio: 4 / 5;
  padding: 16px 16px 90px 16px;
  border-radius: 8px;
  background: #FDFCFB;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08), 0 10px 25px rgba(136, 174, 234, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.9);
  z-index: 5;
  animation: centerPolaroid 6s ease-in-out infinite;
  overflow: visible;
}

.collection-card:nth-child(1) .collection-img {
  border-radius: 6px;
  clip-path: inset(1px round 6px);
}

.collection-card:nth-child(1) .card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: none;
  color: var(--text-primary);
  transform: translateY(0);
  opacity: 1;
  padding: 0 16px;
}

.collection-card:nth-child(1) .card-title {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  letter-spacing: 0.08em;
  font-weight: 300;
}

/* --- 2. Smaller Tile (Floating - Left) --- */
.collection-card:nth-child(2) {
  order: 1;
  width: clamp(160px, 16vw, 240px);
  /* Scaled down for side margins */
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.6);
  z-index: 3;
  animation: leftTile 7s ease-in-out infinite;
}

/* --- 3. Smaller Tile (Reflecting - Right) --- */
.collection-card:nth-child(3) {
  order: 3;
  width: clamp(160px, 16vw, 240px);
  /* Scaled down for side margins */
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.6);
  z-index: 3;
  animation: rightTile 7.5s ease-in-out infinite;
}

.collection-card:nth-child(2) .collection-img,
.collection-card:nth-child(3) .collection-img {
  clip-path: inset(1px round 16px);
  border-radius: 16px;
}

.collection-card:nth-child(2) .card-content,
.collection-card:nth-child(3) .card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 16px;
  background: transparent;
  color: var(--white);
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  text-align: center;
  transform: translateY(0);
  opacity: 1;
  transition: all 0.5s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.collection-card:nth-child(2) .card-title,
.collection-card:nth-child(3) .card-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  letter-spacing: 0.1em;
  font-weight: 300;
}

.collection-card:hover {
  animation-play-state: paused;
  z-index: 10;
}

.collection-card:nth-child(1):hover {
  transform: translateY(-20px) scale(1.02) rotate(0deg) !important;
  box-shadow: 0 45px 80px rgba(0, 0, 0, 0.1), 0 15px 30px rgba(136, 174, 234, 0.25);
}

.collection-card:nth-child(2):hover,
.collection-card:nth-child(3):hover {
  transform: translateY(-16px) scale(1.03) rotate(0deg) !important;
  box-shadow: 0 35px 60px rgba(0, 0, 0, 0.1);
}

.collection-card:hover .collection-img {
  transform: scale(1.08);
  filter: url('#refraction-filter');
}

@keyframes centerPolaroid {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(1.5deg);
  }
}

@keyframes leftTile {

  0%,
  100% {
    transform: translateY(0) rotate(-6deg);
  }

  50% {
    transform: translateY(-12px) rotate(-3deg);
  }
}

@keyframes rightTile {

  0%,
  100% {
    transform: translateY(0) rotate(5deg);
  }

  50% {
    transform: translateY(-10px) rotate(2deg);
  }
}

.collection-mobile-nav {
  display: none;
}

/* --- NEW: Desktop-hidden Mobile Header --- */
.sisterhood-mobile-header {
  display: none;
}

/* --- Section 2: Sisterhood Polaroids --- */
#sisterhood {
  padding: 100px 48px 140px 48px;
  background: transparent;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.sisterhood-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
}

.polaroid-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 340px;
  flex: 1;
}

.sisterhood-content {
  flex: 1.2;
  text-align: center;
  padding: 0 20px;
  z-index: 15;
}

.sisterhood-content h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 24px;
}

.sisterhood-content p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 400px;
  margin: 0 auto 40px auto;
}

.polaroid {
  background: var(--white);
  padding: 12px 12px 40px 12px;
  border-radius: 4px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s ease;
  position: relative;
  width: 90%;
  cursor: pointer;
}

.polaroid img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 2px;
}

.polaroid.landscape img {
  aspect-ratio: 4/3;
}

.polaroid-col.left .p1 {
  transform: rotate(-8deg) translateX(20px);
  z-index: 2;
}

.polaroid-col.left .p2 {
  transform: rotate(6deg) translateX(-15px) translateY(-40px);
  z-index: 1;
}

.polaroid-col.right .p3 {
  transform: rotate(10deg) translateX(-20px);
  z-index: 1;
}

.polaroid-col.right .p4 {
  transform: rotate(-5deg) translateX(15px) translateY(-30px);
  z-index: 2;
}

.polaroid:hover {
  transform: rotate(0deg) translateY(-20px) scale(1.08) !important;
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.15);
  z-index: 20 !important;
}

.sisterhood-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* UPDATED CTA Primary styling with rainbow animation */
.cta-primary,
.cta-secondary {
  padding: 12px 20px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 40px;
  font-weight: 400;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.cta-primary {
  background: linear-gradient(135deg, var(--powder-blue), var(--blush), rgba(216, 180, 226, 0.6), var(--champagne), var(--powder-blue));
  background-size: 300% 300%;
  animation: rainbowScroll 6s ease infinite;
  color: var(--text-primary);
  border: none;
  box-shadow: 0 10px 25px rgba(136, 174, 234, 0.35);
  margin-top: 6px;
}

.cta-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(136, 174, 234, 0.5);
}

.cta-secondary {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  color: var(--text-primary);
  border: 1px solid var(--powder-blue);
}

.cta-secondary:hover {
  background: var(--powder-blue);
  color: var(--white);
  border-color: var(--powder-blue);
  transform: translateY(-3px);
}

/* --- Section 3: Curated Edits --- */
.curated-edit {
  padding: 60px 48px 0;
  background: transparent;
  position: relative;
  z-index: 0;
}

.curated-block {
  margin-bottom: 100px;
}

.curated-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: stretch;
}

.curated-banner {
  flex: 1;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.curated-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease;
}

.curated-banner:hover img {
  transform: scale(1.05);
}

.curated-products {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 24px;
}

.curated-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.curated-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.08);
}

.curated-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  mix-blend-mode: multiply;
}

.curated-card:hover img {
  transform: scale(1.03);
}

.curated-name {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  color: var(--text-primary);
  margin-top: 12px;
  text-align: center;
  font-weight: 300;
}

/* .curated-view-details {
  display: none;
} */

.curated-view-details {
  /* display: block !important; */
  font-family: 'Work Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  color: var(--text-primary) !important;
  text-align: center !important;
  margin-top: 12px;
}

.curated-cta-wrapper {
  text-align: center;
  margin-top: 40px;
  width: 100%;
}

.curated-cta-wrapper .cta-primary {
  padding: 18px 48px;
  font-size: 12px;
  letter-spacing: 0.15em;
  box-shadow: 0 12px 30px rgba(136, 174, 234, 0.25);
}

.curated-cta-wrapper .cta-primary:hover {
  box-shadow: 0 18px 40px rgba(136, 174, 234, 0.4);
  transform: translateY(-4px);
}

/* --- Interactive Discovery Tabs --- */
#discovery-tabs {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
  padding: 40px 48px 0 48px;
}

.tabs-wrapper {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  padding: 8px;
  border-radius: 100px;
  display: inline-flex;
  gap: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  animation: floatTabMenu 6s ease-in-out infinite;
}

@keyframes floatTabMenu {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.tab-item {
  padding: 16px 40px;
  border-radius: 50px;
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.tab-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--powder-blue), var(--blush));
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -2;
}

.tab-item:hover {
  color: var(--text-primary);
  transform: scale(1.05);
}

.tab-item.active {
  color: var(--text-primary);
  box-shadow: 0 10px 25px rgba(136, 174, 234, 0.35);
}

.tab-item.active::before {
  opacity: 1;
}

/* --- NEW Section 3.5: Ananya's Favourites --- */
#ananyas-favourites {
  padding: 60px 48px 100px 48px;
  background: transparent;
  position: relative;
  z-index: 0;
}

/* The main Flex layout that handles the side-by-side positioning and shifting */
.ananya-split-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* The Model Image side (Polaroid style) */
.ananya-model-wrapper {
  width: 520px;
  /* Much bigger initially */
  background: var(--white);
  padding: 16px 16px 60px 16px;
  border-radius: 6px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  position: relative;
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  animation: ananyaPolaroidFloat 7s ease-in-out infinite;
  flex-shrink: 0;
}

.ananya-model-wrapper img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 4px;
  transition: transform 0.6s ease;
}

@keyframes ananyaPolaroidFloat {

  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-15px) rotate(1.5deg);
  }
}

.ananya-model-wrapper:hover {
  transform: translateY(-5px) scale(1.02) rotate(0deg);
  box-shadow: 0 35px 60px rgba(0, 0, 0, 0.15);
  animation-play-state: paused;
}

/* The CTA & Text side (Initial state) */
.ananya-cta-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* Editorial left-align */
  gap: 32px;
  opacity: 1;
  transition: opacity 0.5s ease;
  padding-right: 20px;
}

.ananya-intro-text h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.ananya-intro-text p {
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 400px;
}

/* Exactly matching the provided screenshot design */
.ananya-cta-btn {
  padding: 16px 40px;
  border-radius: 50px;
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: linear-gradient(90deg, var(--powder-blue) 0%, var(--blush) 100%);
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(136, 174, 234, 0.25);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.ananya-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(136, 174, 234, 0.4);
}

/* The Carousel side (Active state) */
.ananya-carousel-view {
  display: none;
  /* hidden initially */
  flex: 1.5;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
  perspective: 1000px;
  height: 50vh;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* Layout shift logic applied to parent when activated */
.ananya-split-layout.is-active {
  gap: 40px;
}

.ananya-split-layout.is-active .ananya-model-wrapper {
  width: 360px;
  /* Shrinks and shifts naturally to make room for carousel */
  padding: 12px 12px 40px 12px;
  /* Adjust inner padding slightly for smaller scale */
  animation: none;
  /* Stops floating */
  cursor: pointer;
  transform: translateY(0) rotate(0deg);
  /* Remove hover transforms */
}

.ananya-track {
  position: relative;
  width: clamp(200px, 22vw, 300px);
  aspect-ratio: 1;
  /* Forced to 1:1 as requested */
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
}

.ananya-card {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.ananya-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

/* Carousel Logic Classes specifically scaled for side-by-side */
.ananya-active {
  transform: translateX(0) scale(1) translateZ(0);
  z-index: 5;
  opacity: 1;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 10px 30px rgba(136, 174, 234, 0.2);
}

.ananya-prev-1 {
  transform: translateX(-65%) scale(0.85) translateZ(-100px);
  z-index: 4;
  opacity: 0.8;
}

.ananya-next-1 {
  transform: translateX(65%) scale(0.85) translateZ(-100px);
  z-index: 4;
  opacity: 0.8;
}

.ananya-prev-2 {
  transform: translateX(-110%) scale(0.7) translateZ(-200px);
  z-index: 3;
  opacity: 0.4;
}

.ananya-next-2 {
  transform: translateX(110%) scale(0.7) translateZ(-200px);
  z-index: 3;
  opacity: 0.4;
}

.ananya-hidden-left {
  transform: translateX(-150%) scale(0.4) translateZ(-300px);
  z-index: 1;
  opacity: 0;
}

.ananya-hidden-right {
  transform: translateX(150%) scale(0.4) translateZ(-300px);
  z-index: 1;
  opacity: 0;
}

/* --- Section 4: A Gift for Every Bond (Categories) --- */
#shop {
  padding: 80px 48px 120px 48px;
  background: transparent;
  position: relative;
  z-index: 0;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.product-card {
  background: var(--white);
  border-radius: 12px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.product-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.product-visuals {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--silver);
  margin-bottom: 20px;
}

.product-visuals img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s ease;
}

.img-lifestyle {
  opacity: 0;
}

.product-card:hover .img-product {
  opacity: 0;
}

.product-card:hover .img-lifestyle {
  opacity: 1;
}

.quick-add {
  position: absolute;
  bottom: -50px;
  left: 16px;
  right: 16px;
  background: var(--text-primary);
  color: var(--white);
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: bottom 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 10;
}

.product-card:hover .quick-add {
  bottom: 16px;
}

.product-meta {
  text-align: center;
}

.product-name {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 300;
}

/* --- Desktop Hidden Arrows for Mobile #shop --- */
.shop-arrows-container {
  display: none;
}

/* --- Section 5: Shop the Look --- */
#shop-the-look {
  padding: 80px 48px 120px 48px;
  background: transparent;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

#shop-the-look::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -30%;
  right: -30%;
  bottom: -30%;
  z-index: -2;
  background:
    radial-gradient(circle at 10% 20%, rgba(136, 174, 234, 0.6) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(136, 174, 234, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(233, 216, 209, 0.35) 0%, transparent 45%),
    radial-gradient(circle at 30% 70%, rgba(185, 216, 138, 0.2) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(244, 232, 222, 0.3) 0%, transparent 50%);
  filter: blur(50px);
  opacity: 0.7;
  animation: stlRainbowShift 14s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes stlRainbowShift {
  0% {
    transform: scale(1) translate(0, 0) rotate(0deg);
  }

  100% {
    transform: scale(1.15) translate(-3%, 4%) rotate(3deg);
  }
}

.stl-glass-container {
  max-width: 1000px;
  margin: 0 auto;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  padding: 40px;
  display: flex;
  gap: 60px;
  align-items: center;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.06);
}

.stl-left {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stl-main-img-container {
  width: 100%;
  aspect-ratio: 4/5;
  max-height: 80vh;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.stl-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.stl-thumbnails {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.stl-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--text-secondary);
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 5;
}

.stl-nav-btn:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.5);
}

.stl-thumb {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  opacity: 0.5;
}

.stl-thumb:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.stl-thumb.active {
  border-color: var(--powder-blue);
  opacity: 1;
  box-shadow: 0 8px 20px rgba(136, 174, 234, 0.3);
}

.stl-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.stl-carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 3/4;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.stl-product-tile {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  background: var(--white);
  cursor: pointer;
}

.stl-product-tile.active {
  opacity: 1;
  pointer-events: auto;
}

.stl-product-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.stl-product-tile:hover img {
  transform: scale(1.05);
}

.stl-product-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 24px 24px 24px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
  color: var(--white);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.stl-product-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stl-product-title {
  font-size: 18px;
  font-family: 'Fraunces', serif;
  letter-spacing: 0.05em;
  font-weight: 300;
}

.stl-product-price {
  font-size: 13px;
  font-family: 'Work Sans', sans-serif;
  opacity: 0.9;
}

.stl-add-btn {
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
}

.stl-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.stl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
}

.stl-dot.active {
  background: var(--powder-blue);
  transform: scale(1.4);
}

/* --- NEW SECTION: REELS COVERFLOW --- */
#reels {
  padding: 80px 48px 120px 48px;
  background: transparent;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.reels-carousel-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 60px;
  position: relative;
  perspective: 1200px;
  height: 65vh;
  max-height: 800px;
}

.reels-track {
  position: relative;
  width: clamp(260px, 25vw, 340px);
  /* Keeps the vertical aspect ratio looking right */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
}

.reel-card {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
  background: var(--white);
}

.reel-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Reel Carousel Logic Classes */
.reel-active {
  transform: translateX(0) scale(1) translateZ(0);
  z-index: 5;
  opacity: 1;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
}

.reel-prev-1 {
  transform: translateX(-65%) scale(0.85) translateZ(-100px);
  z-index: 4;
  opacity: 0.8;
}

.reel-next-1 {
  transform: translateX(65%) scale(0.85) translateZ(-100px);
  z-index: 4;
  opacity: 0.8;
}

.reel-prev-2 {
  transform: translateX(-120%) scale(0.7) translateZ(-200px);
  z-index: 3;
  opacity: 0.4;
}

.reel-next-2 {
  transform: translateX(120%) scale(0.7) translateZ(-200px);
  z-index: 3;
  opacity: 0.4;
}

.reel-hidden-left {
  transform: translateX(-160%) scale(0.5) translateZ(-300px);
  z-index: 1;
  opacity: 0;
}

.reel-hidden-right {
  transform: translateX(160%) scale(0.5) translateZ(-300px);
  z-index: 1;
  opacity: 0;
}

/* Play Button Overlay */
.reel-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

/* Play triangle */
.reel-play-btn::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--white);
  margin-left: 4px;
  /* optical centering */
}

.reel-active:hover .reel-play-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Added globally to hide them on desktop */
.stl-mobile-overlay,
.stl-mobile-pagination {
  display: none;
}

#fodErrorName, #fodErrorPhone, #fodErrorPincode {
    color: #b91c1c;
    font-size: 0.8rem;
    margin: 0;
    text-align: left;
}

#screen-two {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 40px;
}

#screen-two p {
  font-family: 'Work Sans', sans-serif;
  font-size: 18px;
  color: #4A4A4A;
}

.disabled-button {
    opacity: .75;
    pointer-events: none;
}

@media (min-width: 1400px) {
  .hero-title-container {
    top: calc(2% + var(--header-height));
  }

  /* #hero-left-stack, #hero-right-stack {
    top: calc(37% + var(--header-height));
  } */

  .left-stack-anim,
  .right-stack-anim {
    width: 400px;
  }

  .hero-logo {
    width: 270px;
  }

  #hero-ring {
    width: 400px;
  }

  .hero-cta-enter {
    top: calc(21% + var(--header-height));
  }

  .hero-cta-enter {
    padding: 16px 32px;
  }

  .technique-content {
    width: 560px;
  }

  .technique-text h2 {
    font-size: 38px;
    margin-bottom: 12px;
  }

  .hero-label {
    margin-bottom: 6px;
  }

  .technique-text p {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .technique-img-wrapper {
    height: 350px;
  }

  .cta-primary {
    margin-top: 16px;
  }

  .cta-primary,
  .cta-secondary {
    padding: 16px 32px;
  }

  .floating-jewel {
    width: 260px;
  }
}

/* Responsive */
@media (max-width: 968px) {
  .sisterhood-container {
    flex-direction: column;
    gap: 40px;
  }

  .sisterhood-content {
    padding: 0 20px;
    margin: 40px 0;
  }

  .polaroid-col {
    flex-direction: row;
    gap: 20px;
    width: 100%;
    justify-content: center;
  }

  .polaroid {
    width: 45%;
    max-width: none;
  }

  .polaroid-col.left .p2 {
    transform: rotate(4deg) translateY(-20px) translateX(10px);
  }

  .polaroid-col.right .p4 {
    transform: rotate(-4deg) translateY(-20px) translateX(-10px);
  }

  .curated-container {
    flex-direction: column;
  }

  .curated-banner {
    height: 60vh;
  }

  .tabs-wrapper {
    flex-direction: column;
    width: 100%;
    border-radius: 24px;
    padding: 16px;
  }

  .tab-item {
    width: 100%;
  }
}

@media (max-width: 768px) {

  /* New CSS */

  /* Push background layer behind everything */
  .prism-reflection {
    z-index: -1 !important;
    pointer-events: none !important;
    opacity: 0.3 !important;
  }

  /* Completely kill the floating ring and animations */
  #ring-scroll-container,
  #ring-float-wrapper,
  .floating-jewel {
    display: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Hide the desktop polaroid stacks */
  #hero-left-stack,
  #hero-right-stack {
    display: none !important;
  }

  /* Restructure the Hero Section to flow cleanly on mobile */
  #hero-sequence {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 20px !important;
    min-height: auto !important;
    height: auto !important;
    position: relative !important;
    z-index: 8 !important;
  }

  /* Reset absolute positioning for the title and raise z-index over backgrounds */
  #hero-title-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-bottom: 25px !important;
    z-index: 20 !important;
  }

  /* EXACT Souls in Symphony 3D Stacked Carousel */
  .mobile-hero-carousel-3d {
    display: flex;
    position: relative;
    width: 100vw;
    height: 450px;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    z-index: 30;
    /* High z-index to ensure it captures touches */
    overflow: hidden;
    touch-action: pan-y;
    /* Important: Allows browser vertical scroll, lets JS handle horizontal swipe */
  }

  .carousel-3d-card {
    position: absolute;
    width: 70vw;
    height: 100%;
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    will-change: transform, opacity, z-index;
    pointer-events: auto;
    /* Ensures tap works */
  }

  .carousel-3d-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
    pointer-events: none;
    /* Prevents image dragging from interfering with swipes */
  }

  /* The states injected by JS */
  .carousel-3d-card.prev {
    transform: translateX(-60%) scale(0.85);
    z-index: 1;
    opacity: 0.5;
  }

  .carousel-3d-card.active {
    transform: translateX(0) scale(1);
    z-index: 5;
    opacity: 1;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
  }

  .carousel-3d-card.next {
    transform: translateX(60%) scale(0.85);
    z-index: 1;
    opacity: 0.5;
  }

  /* Reposition Play Video Button */
  .hero-cta-enter {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-bottom: 30px !important;
    display: inline-block !important;
    z-index: 20 !important;
  }

  /* Pull the Technique Content up closely and perfectly center it */
  #technique-content {
    position: relative !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 92% !important;
    z-index: 20 !important;
    display: block !important;
  }

  /* Expert Help Mobile Fixes */
  .expert-help-section {
    padding: 50px 20px;
  }

  .expert-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center alignment */
    text-align: center;
    /* Center text alignment */
  }

  .expert-content {
    flex-direction: column;
    gap: 30px;
    width: 100%;
  }

  .expert-header h2 {
    font-size: 28px;
  }

  .expert-header p {
    font-size: 16px;
  }

  .expert-form-col {
    max-width: 100%;
  }

  .expert-form input {
    text-align: left;
    /* Maintains readability for the user typing */
  }

  #screen-two p {
    font-size: 16px;
  }

  .fod-vcontainer {
    margin: 0.8rem;
  }

  /* --- NEW MOBILE POLAROID CAROUSEL FOR "THE EDIT" --- */
  #collections {
    height: auto;
    padding: 60px 24px 10px 24px !important;
    /* Drastically reduced bottom padding to remove huge space */
    min-height: auto !important;
    overflow: hidden;
  }

  .collection-grid {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 65vh !important;
    /* Adjusted container height for taller cards */
    perspective: 1000px;
    gap: 0 !important;
    width: 100%;
  }

  .collection-card:nth-child(1),
  .collection-card:nth-child(2),
  .collection-card:nth-child(3) {
    position: absolute;
    width: auto;
    height: auto;
    aspect-ratio: auto !important;
    /* Taller frame aspect ratio */
    padding: 16px 16px 120px 16px !important;
    /* Taller polaroid base bottom */
    background: var(--white) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    order: initial;
    cursor: pointer;
  }

  .collection-card .collection-img {
    clip-path: inset(0 round 4px) !important;
    border-radius: 4px !important;
    transform: scale(1) !important;
    filter: none !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .collection-card .card-content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 120px !important;
    /* Taller content area to match new padding */
    background: none !important;
    color: var(--text-primary) !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 16px !important;
    text-align: center;
    text-shadow: none !important;
  }

  .collection-card .card-title {
    font-family: 'Fraunces', serif !important;
    font-size: 36px !important;
    font-weight: 300 !important;
    letter-spacing: 0.05em !important;
    color: var(--text-primary) !important;
    margin-bottom: 0 !important;
  }

  /* Mobile overrides for card content text color to match the white base */
  .collection-card:nth-child(1) .card-title,
  .collection-card:nth-child(2) .card-title,
  .collection-card:nth-child(3) .card-title {
    color: var(--text-primary) !important;
  }

  /* Prominent Floating Animations specifically decoupled from static transform styles */
  @keyframes mobFloatActive {

    0%,
    100% {
      transform: translateX(0) scale(1) translateZ(0) translateY(0);
    }

    50% {
      transform: translateX(0) scale(1) translateZ(0) translateY(-24px);
    }

    /* Prominent rise */
  }

  @keyframes mobFloatPrev {

    0%,
    100% {
      transform: translateX(-65%) scale(0.85) translateZ(-100px) rotate(-4deg) translateY(0);
    }

    50% {
      transform: translateX(-65%) scale(0.85) translateZ(-100px) rotate(-4deg) translateY(-18px);
    }

    /* Prominent rise */
  }

  @keyframes mobFloatNext {

    0%,
    100% {
      transform: translateX(65%) scale(0.85) translateZ(-100px) rotate(4deg) translateY(0);
    }

    50% {
      transform: translateX(65%) scale(0.85) translateZ(-100px) rotate(4deg) translateY(-18px);
    }

    /* Prominent rise */
  }

  .col-mob-active {
    z-index: 5 !important;
    opacity: 1 !important;
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.18), 0 10px 25px rgba(136, 174, 234, 0.15) !important;
    animation: mobFloatActive 6s ease-in-out infinite !important;
  }

  .col-mob-prev {
    z-index: 3 !important;
    opacity: 0.6 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06) !important;
    animation: mobFloatPrev 6.5s ease-in-out infinite !important;
  }

  .col-mob-next {
    z-index: 3 !important;
    opacity: 0.6 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06) !important;
    animation: mobFloatNext 7s ease-in-out infinite !important;
  }

  .collection-mobile-nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
    margin-top: 20px;
    position: absolute;
    top: 60%;
    z-index: 5;
  }

  .collection-arrow {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    transition: transform .2s ease;
  }

  .collection-arrow:active {
    transform: scale(0.95);
  }

  /* --- THE CAMPAIGN: Mobile Scrapbook (2 Floating Polaroids) --- */
  #sisterhood {
    height: auto !important;
    min-height: 0 !important;
    padding: 40px 16px 0px 16px !important;
    display: flex;
    flex-direction: column;
  }

  .sisterhood-container {
    gap: 0 !important;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start !important;
    height: auto !important;
    padding: 10px 0 !important;
  }

  /* Reorder so both polaroids sit above the heading, none below */
  .polaroid-col.left {
    order: 1;
  }

  .sisterhood-mobile-header {
    order: 2;
    margin-top: 24px !important;
  }

  .sisterhood-content {
    order: 3;
  }

  .polaroid-col.right {
    display: none !important;
  }

  .sisterhood-mobile-header {
    display: block !important;
    text-align: center;
    margin-bottom: 0px;
    position: relative;
    z-index: 3;
  }

  .sisterhood-mobile-header .hero-label {
    font-family: 'Work Sans', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
  }

  .sisterhood-mobile-header h2 {
    font-family: 'Fraunces', serif;
    font-size: 34px;
    font-weight: 300;
    margin: 0;
  }

  .sisterhood-content .hero-label,
  .sisterhood-content h2 {
    display: none !important;
  }

  .sisterhood-content {
    margin: 0 !important;
    padding: 18px 14px 0 14px !important;
    position: relative;
    z-index: 3;
    text-align: center;
  }

  .sisterhood-content p {
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }

  /* Polaroid rows configured for a two-image scrapbook layout */
  .polaroid-col {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 2;
  }

  .polaroid-col.left {
    justify-content: center !important;
    padding: 0 10px !important;
    margin-bottom: 24px !important;
  }

  /* Keep only p1 and p2 (both on top) for mobile */
  .polaroid.p3,
  .polaroid.p4 {
    display: none !important;
  }

  .polaroid.p2 {
    display: block !important;
  }

  .polaroid {
    width: 50% !important;
    max-width: 240px;
    padding: 8px 8px 36px 8px !important;
    background: #ffffff !important;
    border-radius: 6px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14), 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  }

  /* Ensure aspect ratio is strictly uniform for the side-by-side scrapbook look */
  .polaroid img {
    aspect-ratio: 1 !important;
    object-fit: cover !important;
  }

  .polaroid-col.left .p1 {
    transform: rotate(-8deg) translateY(0px) translateX(15px) !important;
    z-index: 3 !important;
  }

  .polaroid-col.left .p2 {
    transform: rotate(6deg) translateY(15px) translateX(-15px) !important;
    z-index: 1 !important;
  }

  /* Mobile-only image swap for the two visible polaroids */
  .polaroid.p1 img {
    content: url("https://staticimg.tanishq.co.in/microsites-test/fod/images/hero-section/potrait-right.jpg") !important;
  }

  .polaroid.p2 img {
    content: url("https://staticimg.tanishq.co.in/microsites-test/fod/images/hero-section/potrait-left.jpg") !important;
  }

  .polaroid:hover {
    transform: scale(1.02) !important;
  }

  /* --- MOBILE HERO SECTION LOGIC (Kept Exact as Original) --- */

  .hero-title-container {
    top: calc(2% + var(--header-height));
    /* Pinned safely at the top */
  }

  .hero-logo {
    width: 150px !important;
    /* Made significantly larger */
    max-height: 15vh !important;
    margin-bottom: 0px !important;
  }

  .hero-subtext {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: clamp(14px, 4vw, 18px);
    color: var(--text-primary);
    margin-top: -15px !important;
    /* Drastically reduced space between logo and text */
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0;
    animation: fadeUp 1s 0.8s forwards;
    position: relative;
    z-index: 10;
  }

  /* Hidden Left Polaroid */
  /* #hero-left-stack {
    display: none !important;
  } */

  /* Right Polaroid MOVED TO MIDDLE-LEFT */
  /* #hero-right-stack {
    display: block !important;
    right: auto !important;
    left: 4% !important;
    top: calc(33% + var(--header-height));
    z-index: 13 !important;
  } */

  .right-stack-anim {
    width: clamp(180px, 50vw, 280px) !important;
    /* Size optimized for left side */
    animation: fadeUp 1s 0.8s forwards, mobFloatRight 5s 1.6s ease-in-out infinite !important;
  }

  @keyframes mobFloatRight {

    0%,
    100% {
      transform: translateY(0) rotate(-4deg);
    }

    50% {
      transform: translateY(-12px) rotate(-2deg);
    }
  }

  /* Bracelet MOVED TO BOTTOM-RIGHT */
  #ring-scroll-container {
    top: 76% !important;
    /* Moved down to the bottom */
    left: 68% !important;
    /* Shifted over to the right side */
    z-index: 15 !important;
    /* Moved ABOVE the polaroid */
  }

  #hero-ring {
    width: 280px !important;
    /* Large, but constrained perfectly for the right side */
    max-width: 400px !important;
    transform: rotate(-15deg) !important;
  }

  #hero-ring:hover {
    transform: rotate(-15deg) scale(1.05) !important;
  }

  #ring-float-wrapper {
    animation: mobFloatTurnRing 7s ease-in-out infinite !important;
  }

  @keyframes mobFloatTurnRing {

    0%,
    100% {
      transform: translateY(0) rotate(0deg) scale(1);
    }

    50% {
      transform: translateY(-15px) rotate(12deg) scale(1.02);
    }
  }

  /* Elegant Crossfade Image Animation inside the remaining Polaroid */
  .crossfade-img-2 {
    display: block !important;
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    width: calc(100% - 24px) !important;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 2px;
    animation: heroCrossfade 6s infinite alternate ease-in-out;
  }

  @keyframes heroCrossfade {

    0%,
    35% {
      opacity: 0;
    }

    65%,
    100% {
      opacity: 1;
    }
  }

  /* CTA Button - Bottom Left (Kept perfectly clear of the bracelet on the right) */
  /* .hero-cta-enter {
    position: absolute !important;
    left: 5% !important;
    right: auto !important;
    top: calc(21% + var(--header-height)) !important;
    bottom: auto !important;
    transform: none !important;
    padding: 14px 28px !important;
    font-size: 11px !important;
    width: max-content !important;
    max-width: fit-content !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    z-index: 20 !important;
  } */

  /* .hero-cta-enter:hover {
    transform: translateY(calc(-50% - 3px)) !important;
  } */

  .technique-content {
    top: 66%;
    /* Raised slightly so CTA doesn't get cut off at the bottom and leaves space above */
    left: 5%;
    right: 5%;
    width: 90%;
    text-align: center;
    transform: translateY(0);
  }

  #reels,
  #ananyas-favourites {
    padding: 20px 24px;
  }

  .curated-edit {
    padding: 40px 16px 20px 16px !important;
  }

  /* Restored side padding */
  .floating-jewel {
    display: none;
  }

  /* MOBILE TABS OVERRIDE */
  #discovery-tabs {
    padding: 40px 16px 20px 16px !important;
  }

  .tabs-wrapper {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    border-radius: 100px !important;
    padding: 6px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    justify-content: space-between !important;
    gap: 2px !important;
  }

  .tabs-wrapper::-webkit-scrollbar {
    display: none;
  }

  .tab-item {
    flex: 1 1 0px !important;
    width: auto !important;
    padding: 12px 2px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  /* MOBILE CURATED EDITS OVERRIDE */
  .curated-block {
    margin-bottom: 0px !important;
  }

  .curated-cta-wrapper {
    margin: 0 !important;
    padding: 24px !important;
  }

  .curated-banner {
    height: auto !important;
    aspect-ratio: auto !important;
    border-radius: 16px !important;
    /* Rounded corners for banner */
    margin-bottom: 24px !important;
    /* Space between banner and products */
  }

  .curated-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Ensure banner is always on top for all blocks on mobile */
  .curated-banner {
    order: 1 !important;
  }

  .curated-products {
    order: 2 !important;
  }

  .curated-products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    /* Added gap */
    border: none !important;
    margin-top: 0px !important;
  }

  .curated-card {
    padding: 20px 12px 16px 12px !important;
    /* Inheriting desktop background, border, border-radius, and box-shadow */
    justify-content: center !important;
    align-items: center !important;
  }

  .curated-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    object-fit: cover !important;
    /* Restored to cover like desktop */
    /* Inheriting desktop border-radius and mix-blend-mode */
  }

  .curated-name {
    font-size: 15px !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
    text-align: center !important;
  }

  .curated-view-details {
    font-size: 9px !important;
  }

  /* --- NEW MOBILE 3D COVERFLOW CAROUSEL FOR "A GIFT FOR EVERY BOND" (#shop) --- */
  #shop {
    padding: 0px 16px !important;
    overflow: hidden !important;
  }

  #shop .product-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    height: 350px !important;
    margin-top: 32px !important;
    gap: 0 !important;
    width: 100% !important;
    perspective: 1200px !important;
  }

  #shop .product-card {
    position: absolute !important;
    width: 75vw !important;
    max-width: 280px !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    padding: 0 !important;
    border-radius: 16px !important;
    /* Standard rectangular look for the 3D coverflow */
    background: var(--white) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    overflow: hidden !important;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    cursor: pointer !important;
  }

  #shop .product-visuals {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: var(--champagne) !important;
  }

  #shop .product-visuals img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #shop .product-meta {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10 !important;
    background: linear-gradient(to top, rgba(26, 21, 16, 0.85) 0%, rgba(26, 21, 16, 0.5) 60%, transparent 100%) !important;
    padding: 60px 20px 24px 20px !important;
    pointer-events: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    height: 50% !important;
  }

  #shop .product-name {
    color: var(--white) !important;
    font-size: 26px !important;
    text-align: center !important;
    margin-top: auto !important;
    margin-bottom: 40px !important;
  }

  #shop .quick-add {
    position: absolute !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    background: var(--white) !important;
    color: var(--text-primary) !important;
    border-radius: 50px !important;
    padding: 12px 28px !important;
    font-size: 11px !important;
    pointer-events: auto !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    opacity: 1 !important;
  }

  .shop-mob-active {
    z-index: 5 !important;
    opacity: 1 !important;
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.25) !important;
    transform: translateX(0) scale(1) translateY(0) translateZ(0) rotateY(0deg) !important;
  }

  .shop-mob-next {
    transform: translateX(60%) scale(0.85) translateY(0) rotateY(-40deg) translateZ(-150px) !important;
    z-index: 3 !important;
    opacity: 0.65 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
  }

  .shop-mob-prev {
    transform: translateX(-60%) scale(0.85) translateY(0) rotateY(40deg) translateZ(-150px) !important;
    z-index: 3 !important;
    opacity: 0.65 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
  }

  .shop-arrows-container {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateZ(200px) translateY(-50%) !important;
    /* sit above the 3D cards */
    justify-content: space-between !important;
    z-index: 20 !important;
    pointer-events: none !important;
    padding: 0 8px !important;
  }

  .shop-arrow {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 1) !important;
    color: var(--text-secondary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    font-size: 16px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
  }

  .shop-arrow:active {
    transform: scale(0.9) !important;
  }

  /* Reels Mobile Tighten */
  .reels-carousel-container {
    gap: 16px;
    height: 50vh;
  }

  .reels-track {
    width: 220px;
  }

  .reel-prev-1 {
    transform: translateX(-50%) scale(0.85) translateZ(-100px);
  }

  .reel-next-1 {
    transform: translateX(50%) scale(0.85) translateZ(-100px);
  }

  .reel-prev-2 {
    transform: translateX(-90%) scale(0.7) translateZ(-200px);
    opacity: 0;
    pointer-events: none;
  }

  .reel-next-2 {
    transform: translateX(90%) scale(0.7) translateZ(-200px);
    opacity: 0;
    pointer-events: none;
  }

  /* Ananya Mobile */
  .ananya-split-layout {
    flex-direction: column;
    gap: 30px;
  }

  .ananya-model-wrapper {
    width: 90%;
    max-width: 450px;
  }

  .ananya-cta-wrapper {
    width: 100%;
    align-items: center;
    text-align: center;
    padding-right: 0;
  }

  .ananya-intro-text p {
    margin: 0 auto;
  }

  .ananya-carousel-view {
    width: 100%;
    gap: 16px;
    height: 50vh !important;
  }

  .ananya-split-layout.is-active .ananya-model-wrapper {
    width: 70%;
    max-width: 320px;
  }

  .ananya-track {
    width: 65vw !important;
    max-width: 280px !important;
  }

  .ananya-active {
    transform: translateX(0) scale(1) translateZ(0) !important;
  }

  .ananya-prev-1 {
    transform: translateX(-65%) scale(0.85) translateZ(-100px) !important;
    opacity: 0.8 !important;
  }

  .ananya-next-1 {
    transform: translateX(65%) scale(0.85) translateZ(-100px) !important;
    opacity: 0.8 !important;
  }

  .ananya-prev-2 {
    transform: translateX(-100%) scale(0.6) translateZ(-200px) !important;
    opacity: 0 !important;
    pointer-events: none;
  }

  .ananya-next-2 {
    transform: translateX(100%) scale(0.6) translateZ(-200px) !important;
    opacity: 0 !important;
    pointer-events: none;
  }

  /* --- NEW MOBILE SHOP THE LOOK OVERRIDE --- */
  #shop-the-look {
    padding: 0px 0 60px 0 !important;
  }

  #shop-the-look::before {
    display: none !important;
    /* Remove background blur on mobile for clean look */
  }

  .stl-glass-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .stl-left {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
  }

  .stl-thumbnails {
    order: 1 !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 0 24px 0 !important;
    gap: 16px !important;
  }

  /* .stl-nav-btn {
    display: none !important;
  } */

  .stl-thumb {
    width: 64px !important;
    height: 64px !important;
    border-radius: 0 !important;
    /* Squares, not circles */
    border: 2px solid transparent !important;
    opacity: 1 !important;
    object-fit: cover !important;
  }

  .stl-thumb.active {
    border-color: #1a365d !important;
    box-shadow: none !important;
  }

  .stl-mobile-pagination {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    /* margin-left: auto !important; */
    font-family: 'Work Sans', sans-serif !important;
    font-size: 14px !important;
    color: var(--text-secondary) !important;
    letter-spacing: 0.2em !important;
  }

  .stl-mobile-pagination span {
    margin: 2px 0;
  }

  .stl-mobile-pagination .line {
    width: 12px;
    height: 1px;
    background: var(--text-secondary);
    margin: 4px 0;
  }

  .stl-main-img-container {
    order: 2 !important;
    border-radius: 0 !important;
    max-height: none !important;
    height: 60vh !important;
    width: 100% !important;
    box-shadow: none !important;
  }

  .stl-mobile-overlay {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    color: #FFFFFF !important;
    z-index: 10 !important;
    background: #00000054;
    width: 100%;
    padding: 10px 20px;
  }

  .stl-mobile-overlay .look-num {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase !important;
    margin-bottom: 0px !important;
  }

  .stl-mobile-overlay .look-title {
    font-family: 'Fraunces', serif !important;
    font-size: 34px !important;
    font-weight: 300 !important;
    margin: 0 !important;
  }

  .stl-right {
    width: 100% !important;
    padding: 32px 0 0 24px !important;
  }

  .stl-carousel-wrapper {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding-bottom: 24px !important;
    padding-right: 24px !important;
    /* So last item doesn't stick to edge */
  }

  .stl-carousel-wrapper::-webkit-scrollbar {
    display: none !important;
  }

  .stl-product-tile {
    position: relative !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: 0 0 75% !important;
    scroll-snap-align: start !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
  }

  .stl-product-tile img {
    width: 100% !important;
    aspect-ratio: 4/4.5 !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    background: #f8f8f8 !important;
    mix-blend-mode: normal !important;
    border: 1px solid #dcdcdc;
  }

  .stl-product-info {
    position: static !important;
    background: none !important;
    padding: 16px 0 0 0 !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }

  .stl-product-text {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .stl-product-title {
    color: var(--text-primary) !important;
    font-family: 'Work Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
  }

  .stl-product-price {
    display: none !important;
  }

  .stl-add-btn {
    font-size: 0 !important;
    border: 1px solid #1a365d !important;
    border-radius: 40px !important;
    padding: 8px 16px !important;
    margin-left: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .stl-add-btn::before {
    content: "SIMILAR";
    font-size: 9px !important;
    font-family: 'Work Sans', sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.1em !important;
    color: #1a365d !important;
  }

  .stl-carousel-dots {
    display: none !important;
  }

  .fod-video fw-player {
    aspect-ratio: 1;
    width: 100%;
  }

  @media (hover: none),
  (pointer: coarse) {
    .img-product {
      opacity: 1 !important;
    }

    .img-lifestyle {
      opacity: 0 !important;
    }
  }

}