/* ============================
  Especially Yours HUB STYLES
   ============================ */
.creation-banner {
    border: 2px solid #ff00ff;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 18px;

    background: rgba(255, 0, 255, 0.12);
    box-shadow: 0 0 18px rgba(255, 0, 255, 0.3);
    backdrop-filter: blur(4px);

    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.creation-text {
    font-size: 1.05rem;
    line-height: 1.55rem;
    color: #ffdf6e;
    letter-spacing: 0.7px;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
}

.creation-banner {
    position: relative;
}

.creation-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, #ff00ff, #ff7bff, #ffa8ff);
}

.glow-banner {
    border: 2px solid #ff00ff;
    box-shadow: 0 0 12px #ff00ff;
    border-radius: 10px;
}

/* ================================
  ESPECIALLY YOURS — GLAM RISE SKIN
   ================================ */
.ey-toggle {
    background: rgba(255, 0, 255, 0.10);
    border-radius: 12px;
    padding: 12px 0;
    box-shadow: 0 0 14px rgba(255, 0, 255, 0.45);
}

.ey-skin-label {
    color: #ffb6f5;
    font-weight: 700;
    font-size: 1.05rem;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.9);
    letter-spacing: 1px;
}

/* EY Switch Glow */
.ey-switch .slider {
    background-color: #ff4de1;
    box-shadow: 0 0 12px rgba(255, 0, 255, 0.9);
}

.ey-switch input:checked + .slider {
    background-color: #ff00ff;
    box-shadow: 0 0 18px rgba(255, 0, 255, 1);
}

/* =======================================
   💖 ESPECIALLY YOURS — GLAM RISE WRAP
   ======================================= */

/* Container background */
.ey-glam-active .brand-wrapper {
  background: radial-gradient(circle at center,
    rgba(255, 0, 255, 0.18),
    rgba(0, 0, 0, 1) 70%
  ) !important;

  border: 2px solid rgba(255, 0, 255, 0.55);
  box-shadow: 0 0 22px rgba(255, 0, 255, 0.55),
              inset 0 0 12px rgba(255, 0, 255, 0.25);
  border-radius: 22px;
  padding: 20px;
  transition: background .4s ease, box-shadow .35s ease;
}

/* Title */
.ey-glam-active .page-title.gamefont {
  color: #ff66ff !important;
  text-shadow:
      0 0 14px rgba(255, 0, 255, 0.7),
      0 0 26px rgba(255, 0, 255, 0.45);
}

/* Cards */
.ey-glam-active .card {
  border: 2px solid rgba(255, 0, 255, 0.5) !important;
  box-shadow:
      0 0 18px rgba(255, 0, 255, 0.45),
      inset 0 0 10px rgba(255, 0, 255, 0.25);
  transition: .25s ease;
}

.ey-glam-active .card:hover {
  box-shadow: 0 0 30px rgba(255, 0, 255, 0.85);
}

/* Back button */
.ey-glam-active .back-button {
  border: 2px solid rgba(255,0,255,0.55) !important;
  color: #ff66ff !important;
  text-shadow: 0 0 7px rgba(255,0,255,0.65);
  box-shadow:
      0 0 18px rgba(255,0,255,0.45),
      inset 0 0 8px rgba(255,0,255,0.25);
  background: rgba(0,0,0,0.5);
  transition: .25s ease;
}

.ey-glam-active .back-button:hover {
  background: rgba(255,0,255,0.15);
  box-shadow: 0 0 26px rgba(255,0,255,0.85);
}

/* Brand Page Items */
.ey-glam-active .brand-item {
  border: 2px solid rgba(255,0,255,0.5) !important;
  box-shadow:
      0 0 20px rgba(255,0,255,0.45),
      inset 0 0 14px rgba(255,0,255,0.25);
  border-radius: 18px;
  transition: .3s ease;
}

.ey-glam-active .brand-item:hover {
  box-shadow:
      0 0 34px rgba(255,0,255,0.8),
      inset 0 0 20px rgba(255,0,255,0.35);
}

/* Shoe detail card */
.ey-glam-active .shoe-info-card {
  border-top: 1px solid rgba(255,0,255,0.35) !important;
}

.ey-glam-active .shoe-info-card .brand {
  color: #ff66ff !important;
  text-shadow: 0 0 10px rgba(255,0,255,0.55);
}

/* =======================================
  💖 Glam Rise Floating Particles
   ======================================= */

.glam-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 1;
}

.ey-glam-active .glam-particles {
  opacity: 1;
}

.glam-dot {
  position: absolute;
  background: radial-gradient(circle, #ff66ff 0%, rgba(255,0,255,0.15) 70%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  opacity: 0;
  animation: glamFloat 6s linear infinite;
}

.gd1 { left: 12%; animation-delay: 0s; }
.gd2 { left: 30%; animation-delay: 1.2s; }
.gd3 { left: 48%; animation-delay: 0.7s; }
.gd4 { left: 63%; animation-delay: 2s; }
.gd5 { left: 77%; animation-delay: 0.3s; }
.gd6 { left: 89%; animation-delay: 1.6s; }

@keyframes glamFloat {
  0% { transform: translateY(40px); opacity: 0; }
  20% { opacity: .75; }
  80% { opacity: .75; }
  100% { transform: translateY(-180px); opacity: 0; }
}

/* ================================
  ESPECIALLY YOURS — GLAM SURGE (HUB)
   ================================ */

.ey-rose-toggle {
    background: linear-gradient(
        135deg,
        rgba(255, 200, 210, 0.10),
        rgba(180, 120, 95, 0.12)
    );
    border-radius: 14px;
    padding: 14px 0;
    box-shadow:
        0 0 10px rgba(255, 180, 190, 0.35),
        inset 0 0 8px rgba(255, 210, 220, 0.18);
}

/* Label */
.ey-rose-label {
    color: #f4c4b8;
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: 1px;
    text-shadow:
        0 0 6px rgba(255, 200, 210, 0.55);
}

/* Switch base */
.ey-rose-toggle .slider {
    background-color: #c89b8c;
    box-shadow: 0 0 8px rgba(255, 190, 200, 0.6);
}

/* Switch ON */
.ey-rose-toggle input:checked + .slider {
    background-color: #e6b7a6;
    box-shadow:
        0 0 12px rgba(255, 210, 220, 0.9);
}

/* ======================================
   EY — GLAM SURGE (ROSE GOLD) WRAP
   ====================================== */

.ey-glam-rose-active .brand-wrapper {
    background: radial-gradient(circle at center,
        rgba(255, 220, 215, 0.16),
        rgba(0, 0, 0, 1) 72%
    ) !important;

    border: 2px solid rgba(230, 180, 165, 0.55);
    box-shadow:
        0 0 18px rgba(255, 210, 200, 0.35),
        inset 0 0 10px rgba(255, 220, 210, 0.18);
}

/* Titles */
.ey-glam-rose-active .page-title.gamefont {
    color: #f2c1b3 !important;
    text-shadow:
        0 0 10px rgba(255, 210, 200, 0.6),
        0 0 18px rgba(230, 170, 155, 0.35);
}

/* Cards */
.ey-glam-rose-active .card {
    border: 1px solid rgba(230, 180, 165, 0.45) !important;
    box-shadow:
        0 0 12px rgba(255, 210, 200, 0.3),
        inset 0 0 8px rgba(255, 225, 215, 0.18);
}

.ey-glam-rose-active .card:hover {
    box-shadow: 0 0 20px rgba(255, 220, 210, 0.55);
}

/* =======================================
   🌹 ESPECIALLY YOURS — GLAM SURGE WRAP
   ======================================= */

/* Container background */
.ey-glam-rose-active .brand-wrapper {
  background:
    linear-gradient(
      135deg,
      rgba(255, 215, 205, 0.10),
      rgba(230, 180, 165, 0.18),
      rgba(255, 215, 205, 0.10)
    ),
    radial-gradient(circle at center,
      rgba(255, 200, 190, 0.18),
      rgba(0, 0, 0, 1) 72%
    ) !important;

  border: 2px solid rgba(230, 170, 155, 0.55);
  box-shadow:
      0 0 20px rgba(255, 210, 200, 0.35),
      inset 0 0 14px rgba(255, 230, 220, 0.25);

  border-radius: 22px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: background .45s ease, box-shadow .35s ease;
}

/* Subtle moving sheen (luxury polish) */
.ey-glam-rose-active .brand-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(255, 235, 225, 0.12) 50%,
    transparent 60%
  );
  pointer-events: none;
}
/* =======================================
   TITLE
   ======================================= */

.ey-glam-rose-active .page-title.gamefont {
  color: #f2c1b3 !important;
  text-shadow:
      0 0 12px rgba(255, 210, 200, 0.65),
      0 0 22px rgba(230, 170, 155, 0.35);
}

/* =======================================
   CARDS
   ======================================= */

.ey-glam-rose-active .card {
  border: 2px solid rgba(230, 180, 165, 0.45) !important;
  box-shadow:
      0 0 14px rgba(255, 210, 200, 0.35),
      inset 0 0 10px rgba(255, 230, 220, 0.22);
  transition: .25s ease;
}

.ey-glam-rose-active .card:hover {
  box-shadow:
      0 0 26px rgba(255, 220, 210, 0.6),
      inset 0 0 14px rgba(255, 240, 235, 0.35);
}

/* =======================================
   BACK BUTTON
   ======================================= */

.ey-glam-rose-active .back-button {
  border: 2px solid rgba(230,170,155,0.55) !important;
  color: #f2c1b3 !important;
  text-shadow: 0 0 6px rgba(255,210,200,0.55);
  box-shadow:
      0 0 16px rgba(255,210,200,0.45),
      inset 0 0 8px rgba(255,230,220,0.25);
  background: rgba(0,0,0,0.5);
  transition: .25s ease;
}

.ey-glam-rose-active .back-button:hover {
  background: rgba(255,220,210,0.18);
  box-shadow: 0 0 26px rgba(255,220,210,0.8);
}

/* =======================================
   BRAND ITEMS
   ======================================= */

.ey-glam-rose-active .brand-item {
  border: 2px solid rgba(230,170,155,0.5) !important;
  box-shadow:
      0 0 18px rgba(255,210,200,0.45),
      inset 0 0 12px rgba(255,230,220,0.25);
  border-radius: 18px;
  transition: .3s ease;
}

.ey-glam-rose-active .brand-item:hover {
  box-shadow:
      0 0 30px rgba(255,220,210,0.75),
      inset 0 0 18px rgba(255,240,235,0.35);
}

/* =======================================
   SHOE DETAIL CARD
   ======================================= */

.ey-glam-rose-active .shoe-info-card {
  border-top: 1px solid rgba(230,170,155,0.35) !important;
}

.ey-glam-rose-active .shoe-info-card .brand {
  color: #f2c1b3 !important;
  text-shadow: 0 0 8px rgba(255,210,200,0.55);
}

/* =======================================
   🌹 EY GLAM SURGE — ROSE PARTICLES
   ======================================= */

.rose-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  z-index: 1;
  transition: opacity .4s ease;
}

/* Activate only for rose skin */
.ey-glam-rose-active .rose-particles {
  opacity: 1;
}

/* Rose-shaped particle */
.rose-petal {
  position: absolute;
  width: 14px;
  height: 14px;
  background: linear-gradient(
    135deg,
    rgba(255, 215, 200, 0.9),
    rgba(255, 185, 170, 0.6)
  );

  transform: rotate(45deg);
  opacity: 0;

  box-shadow:
    0 0 10px rgba(255, 205, 190, 0.6),
    inset 0 0 6px rgba(255, 235, 225, 0.35);

  animation: roseFloat 7s linear infinite;
}

/* Placement + stagger */
.rp1 { left: 12%; animation-delay: 0s; }
.rp2 { left: 28%; animation-delay: 1.6s; }
.rp3 { left: 46%; animation-delay: 0.9s; }
.rp4 { left: 62%; animation-delay: 2.8s; }
.rp5 { left: 78%; animation-delay: 0.4s; }
.rp6 { left: 90%; animation-delay: 1.9s; }

/* Float behavior (gentle, readable) */
@keyframes roseFloat {
  0% {
    transform: translateY(40px) rotate(45deg) scale(0.9);
    opacity: 0;
  }
  20% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-180px) rotate(65deg) scale(1.05);
    opacity: 0;
  }
}

/* EY Rose — Edge Glow Only */
.ey-glam-rose-active .brand-wrapper {
  box-shadow:
    0 0 18px rgba(255, 210, 200, 0.35),
    inset 0 0 10px rgba(255, 230, 220, 0.18);
}

/* Optional stronger focus on hover */
.ey-glam-rose-active .brand-wrapper:hover {
  box-shadow:
    0 0 26px rgba(255, 220, 210, 0.55),
    inset 0 0 14px rgba(255, 240, 235, 0.25);
}

/* ================================
   ESPECIALLY YOURS — GLAM ELITE (HUB)
   Turquoise / Aqua Variant
   ================================ */

.ey-elite-toggle {
    background: linear-gradient(
        135deg,
        rgba(0, 255, 255, 0.10),
        rgba(0, 120, 130, 0.12)
    );

    border-radius: 14px;
    padding: 14px 0;

    box-shadow:
        0 0 10px rgba(0, 255, 255, 0.35),
        inset 0 0 8px rgba(150, 255, 255, 0.18);
}

/* Label — clean aqua glow */
.ey-elite-label {
    color: #8efaff; 
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: 1px;

    text-shadow:
        0 0 8px rgba(0, 255, 255, 0.55),
        0 0 12px rgba(0, 180, 200, 0.45);
}

/* Switch base */
.ey-elite-toggle .slider {
    background-color: #1d7177;
    box-shadow:
        0 0 8px rgba(0, 255, 255, 0.55);
}

/* Switch ON */
.ey-elite-toggle input:checked + .slider {
    background-color: #29aab5;
    box-shadow:
        0 0 12px rgba(100, 255, 255, 0.9);
}

/* ==========================================
   ESPECIALLY YOURS – HUB TITLE STYLE
   ========================================== */

.ey-hub-title {
    color: #f7d7c8 !important; /* Champagne tone */
    font-size: 2rem;
    letter-spacing: 1.5px;

    text-shadow:
        0 0 6px rgba(255, 210, 200, 0.55),
        0 0 12px rgba(240, 195, 180, 0.35);

    margin-bottom: 1rem;
}

/* =======================================
   👑 ELITE WRAP — TURQUOISE GLOW
   ======================================= */

.ey-elite-active .brand-wrapper {
  background: radial-gradient(circle at center,
    rgba(0, 255, 255, 0.14),
    rgba(0, 0, 0, 1) 72%
  ) !important;

  border: 2px solid rgba(0, 200, 200, 0.55);
  box-shadow:
      0 0 16px rgba(0, 200, 200, 0.45),
      inset 0 0 12px rgba(0, 255, 255, 0.20);

  border-radius: 22px;
  padding: 20px;
}

/* Title */
.ey-elite-active .page-title.gamefont {
  color: #a8feff !important;
  text-shadow:
      0 0 10px rgba(0, 255, 255, 0.5),
      0 0 20px rgba(0, 180, 200, 0.35);
}

/* Cards */
.ey-elite-active .card {
  border: 1px solid rgba(0, 200, 200, 0.45) !important;
  box-shadow:
      0 0 12px rgba(0, 200, 200, 0.25),
      inset 0 0 8px rgba(0, 255, 255, 0.18);
}

.ey-elite-active .card:hover {
  box-shadow:
      0 0 20px rgba(0, 255, 255, 0.55);
}

/* Back button */
.ey-elite-active .back-button {
  border: 2px solid rgba(0,200,200,0.55) !important;
  color: #a8feff !important;
  text-shadow: 0 0 6px rgba(0,255,255,0.55);
  box-shadow:
      0 0 16px rgba(0,200,200,0.45),
      inset 0 0 8px rgba(0,255,255,0.20);
  background: rgba(0,0,0,0.5);
}

.ey-elite-active .back-button:hover {
  background: rgba(0,255,255,0.12);
  box-shadow: 0 0 26px rgba(0,255,255,0.55);
}

/* Brand items */
.ey-elite-active .brand-item {
  border: 2px solid rgba(0,200,200,0.45) !important;
  box-shadow:
      0 0 16px rgba(0,200,200,0.35),
      inset 0 0 10px rgba(0,255,255,0.22);
}

.ey-elite-active .brand-item:hover {
  box-shadow:
      0 0 28px rgba(0,255,255,0.55),
      inset 0 0 14px rgba(0,255,255,0.28);
}

/* Shoe detail */
.ey-elite-active .shoe-info-card {
  border-top: 1px solid rgba(0,200,200,0.35) !important;
}

.ey-elite-active .shoe-info-card .brand {
  color: #a8feff !important;
  text-shadow: 0 0 8px rgba(0,255,255,0.55);
}

/* =======================================
   ELITE PARTICLES — AQUA DIAMONDS
   ======================================= */

.elite-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  z-index: 1;
  transition: opacity .4s ease;
}

.ey-elite-active .elite-particles {
  opacity: 1;
}

/* Diamond particles */
.elite-diamond {
  position: absolute;
  width: 11px;
  height: 11px;

  background: linear-gradient(
    135deg,
    rgba(150, 255, 255, 0.9),
    rgba(80, 200, 200, 0.6)
  );

  transform: rotate(45deg);
  opacity: 0;

  box-shadow:
    0 0 10px rgba(0, 255, 255, 0.55),
    inset 0 0 4px rgba(200, 255, 255, 0.35);

  animation: eliteFloat 9s linear infinite;
}

/* Spread */
.ed1 { left: 10%; animation-delay: 0s; }
.ed2 { left: 22%; animation-delay: 1.4s; }
.ed3 { left: 34%; animation-delay: 0.8s; }
.ed4 { left: 46%; animation-delay: 2.2s; }
.ed5 { left: 58%; animation-delay: 0.5s; }
.ed6 { left: 70%; animation-delay: 1.9s; }
.ed7 { left: 82%; animation-delay: 1.1s; }
.ed8 { left: 92%; animation-delay: 2.6s; }

@keyframes eliteFloat {
  0% { transform: translateY(50px) rotate(45deg) scale(0.95); opacity: 0; }
  20% { opacity: 0.45; }
  80% { opacity: 0.45; }
  100% { transform: translateY(-160px) rotate(85deg) scale(1.05); opacity: 0; }
}

/* =======================================
   ELITE SHADER RING (subtle)
   ======================================= */

.ey-elite-active .brand-wrapper::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 30px;
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.15);
  pointer-events: none;
}

/* Responsive affiliate banners (landscape + portrait safe) */
.ey-banner-container img.ey-banner-img {
    width: 100%;
    max-width: 650px;          /* desktop limit */
    height: auto;              /* preserve aspect ratio */

    border-radius: 14px;
    box-shadow: 0 0 20px rgba(255,0,255,0.45);

    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ================================
   EY HUB AFFILIATE BANNER (BASE)
   ================================ */

/* Banner container */
.ey-banner-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  z-index: 5; /* sits above particles */
}

/* Anchor behaves as a block container */
.ey-banner-link {
  display: block;
  text-decoration: none;
  line-height: 0; /* prevents text overlay */
}

/* Image baseline */
.ey-banner-img {
  display: block;
  width: 100%;
  max-width: 650px;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.45);
}

/* 🔑 FIX: ensure height resolves inside HUB overlay */
.ey-banner-fixed {
  aspect-ratio: 624 / 131;
}