/* ========================================================================= */
/* ASWHOLEIDEAS — MASTERPIECE HERO BANNER WITH RIGHT CONTAINER BOX           */
/* Deep Dark Concrete Wall, Top-Left Spotlight, 1-2 Products In Hero Box     */
/* ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700;800&display=swap');

:root {
  --wall-bg: #07080B;
  --text-white: #FFFFFF;
  --text-dim: #E2E8F0;
  --text-muted: #94A3B8;
  --border-subtle: rgba(255, 255, 255, 0.12);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background-color: #07080B;
  background-image: 
    /* 1. Dramatic Focused Top-Right Light Cone */
    radial-gradient(ellipse at 88% 8%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.09) 30%, transparent 65%),
    /* 2. Deeper Moody Falloff Gradient from Top-Right into Pitch Black */
    linear-gradient(220deg, rgba(255, 255, 255, 0.10) 0%, rgba(10, 11, 15, 0.75) 35%, rgba(6, 7, 9, 0.95) 75%, #050608 100%),
    /* 3. Authentic Concrete Texture */
    url('assets/gallery_wall_bg.jpg');
  background-size: 100% 100%, 100% 100%, cover;
  background-position: top right, top right, center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #FFFFFF;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  overflow-x: clip;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, span, a, button, label, div {
  color: #FFFFFF;
}

/* Explicit black text on light surfaces & badges */
#dropdownGoogleSignInBtn,
#dropdownGoogleSignInBtn span,
#dropdownGoogleSignInBtn *,
#cartCountBadge,
.btn-google,
.btn-google span,
.text-black,
.bg-white.text-black,
.bg-white .text-black {
  color: #000000 !important;
}

/* Minimalist Dark Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #050608;
}
::-webkit-scrollbar-thumb {
  background: #1C2028;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2E3442;
}

/* ========================================================================= */
/* 1. TRANSLUCENT WALL HEADER & SEARCH BAR                                   */
/* ========================================================================= */
/* 1. SOLID MONOCHROME HEADER & SUB-NAV (100% OPAQUE, TOP LAYER)            */
/* ========================================================================= */
.gallery-header, header {
  background-color: #07080B !important;
  background: #07080B !important;
  z-index: 100 !important;
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.95) !important;
}

.wall-header {
  background-color: #07080B !important;
  background: #07080B !important;
  border-bottom: 1px solid var(--border-subtle);
}

.gallery-search-box {
  background: rgba(18, 20, 26, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.2s ease;
}
.gallery-search-box:focus-within {
  border-color: #FFFFFF;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.25);
  background: rgba(22, 25, 33, 1);
}

.gallery-search-select {
  background: #181b24;
  color: #FFFFFF;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 11px;
  font-weight: 700;
  outline: none;
}

.gallery-search-input {
  background: transparent;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  outline: none;
}
.gallery-search-input::placeholder {
  color: #64748B;
}

.gallery-search-btn {
  background: #FFFFFF;
  color: #07080B;
  font-weight: 800;
  transition: all 0.2s ease;
}
.gallery-search-btn:hover {
  background: #F1F5F9;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

.gallery-subnav {
  background-color: #050608 !important;
  background: #050608 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  position: relative;
  z-index: 100 !important;
}

/* ========================================================================= */
/* 2. PINNED FILTER SIDEBAR (100% CONSTANT, FIXED & STATIONARY ON SCREEN)    */
/* ========================================================================= */
.gallery-sidebar {
  font-family: 'Inter', sans-serif;
  color: #FFFFFF;
  user-select: none;
  z-index: 20;
  overflow: visible !important;
}

@media (min-width: 1024px) {
  .gallery-sidebar {
    position: fixed !important;
    top: 110px !important;
    width: 250px !important;
  }
}

.sidebar-main-title {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  margin-bottom: 6px;
}

.sidebar-section-header {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-section-header .dash-divider {
  color: #64748B;
  font-weight: 400;
  font-size: 13px;
}

.sidebar-link-item {
  display: block;
  font-size: 12px;
  color: #CBD5E1;
  padding: 3px 0;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  text-align: left;
  line-height: 1.4;
}
.sidebar-link-item:hover, .sidebar-link-item.active {
  color: #FFFFFF !important;
  font-weight: 700;
  padding-left: 2px;
}

.sidebar-range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  outline: none;
}
.sidebar-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 1px 3px rgba(0, 0, 0, 0.6);
}

.sidebar-checkbox {
  appearance: none;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-checkbox:checked {
  background: #FFFFFF;
  border-color: #FFFFFF;
}
.sidebar-checkbox:checked::after {
  content: '✓';
  color: #0D0E12;
  font-size: 8px;
  font-weight: 900;
}

/* ========================================================================= */
/* 3. MASTERPIECE HERO BANNER (COMPACT 50% SLIMMER HEIGHT, ZERO INNER BOX)   */
/* ========================================================================= */
.hero-showcase-banner {
  background: rgba(12, 14, 19, 0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 
    0 20px 40px -10px rgba(0, 0, 0, 0.95),
    0 0 25px rgba(0, 0, 0, 0.8),
    inset 0 1px 1px rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
}

/* Atmospheric Dark River Edge Dissolve Gradient */
.hero-showcase-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
              linear-gradient(to right, rgba(0,0,0,0.85) 0%, transparent 40%, transparent 70%, rgba(0,0,0,0.9) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Layered Shadow on White Text */
.hero-river-headline {
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.95), 0 0 24px rgba(255, 255, 255, 0.15);
  animation: slideTextIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.hero-river-text {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

@keyframes slideTextIn {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Freely Floating Open Cutout / Acrylic Board (50% Slimmer Height, Soft Rounded Corners 12px) */
.hero-freely-floating-art {
  width: auto;
  height: 165px;
  max-width: 125px;
  object-fit: cover;
  border: none !important;
  outline: none !important;
  border-radius: 12px !important;
  clip-path: inset(0 round 12px) !important;
  -webkit-clip-path: inset(0 round 12px) !important;
  background: transparent !important;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 14px rgba(0, 0, 0, 0.9));
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: block;
}
.hero-freely-floating-art:hover {
  transform: scale(1.04) translateY(-3px);
}

/* Smooth Slide Transitions for Hero Banner */
.hero-slide {
  display: none;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-slide.active {
  display: flex;
  opacity: 1;
  transform: translateX(0);
}

/* ========================================================================= */
/* ========================================================================= */
/* 4. PURE CATALOG EXHIBITION UNIT (STRICT VERTICAL SINGLE-COLUMN ALIGNMENT)  */
/* ========================================================================= */
.gallery-exhibition-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 210px;
  margin: 0 auto;
  padding: 8px 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  transition: transform 0.25s ease;
  position: relative;
}
.gallery-exhibition-unit:hover {
  transform: translateY(-4px);
}

/* Product Artwork Box — Fully Preserves the Entire Sleek Curved Frame */
.gallery-product-artwork {
  width: 100%;
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.95));
  transition: transform 0.25s ease, filter 0.25s ease;
  padding: 0 !important;
  margin: 0 !important;
}

.gallery-product-artwork img {
  height: 100%;
  max-height: 270px;
  width: auto;
  max-width: 100%;
  object-fit: contain !important;
  border: none !important;
  outline: none !important;
  border-radius: 14px !important;
  clip-path: inset(0 round 14px) !important;
  -webkit-clip-path: inset(0 round 14px) !important;
  background: transparent !important;
  transition: transform 0.25s ease;
  display: block;
}

.gallery-exhibition-unit:hover .gallery-product-artwork img {
  transform: scale(1.03);
}
.gallery-exhibition-unit:hover .gallery-product-artwork {
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 1));
}

/* Details Box — Strictly Constrained to Exact Image Width */
.gallery-product-details {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 10px;
}

.gallery-product-title {
  width: 100%;
  max-width: 100%;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #CBD5E1 !important;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.gallery-exhibition-unit:hover .gallery-product-title {
  color: #FFFFFF !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.gallery-product-price {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: #FFFFFF !important;
  letter-spacing: -0.01em;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
  margin: 3px 0 0 0;
}

.gallery-product-btn {
  width: 100% !important;
  margin-top: 6px;
  display: block;
  background: #FFFFFF !important;
  border: 1px solid #FFFFFF;
  color: #07080B !important;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 0;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
}
.gallery-product-btn:hover {
  background: #E2E8F0 !important;
  transform: scale(1.02);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.5);
}

/* ========================================================================= */
/* 5. SHOWCASE CAROUSEL NAVIGATION ARROWS & COLLECTOR COLUMNS                */
/* ========================================================================= */
.showcase-nav-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 40 !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9999px !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease !important;
  will-change: background-color, border-color;
  user-select: none !important;
}

@media (min-width: 640px) {
  .showcase-nav-arrow {
    width: 2.75rem !important;
    height: 2.75rem !important;
  }
}

.showcase-nav-prev {
  left: 0.5rem !important;
}
@media (min-width: 640px) {
  .showcase-nav-prev {
    left: 1rem !important;
  }
}
@media (min-width: 1280px) {
  .showcase-nav-prev {
    left: 1.5rem !important;
  }
}

.showcase-nav-next {
  right: 0.5rem !important;
}
@media (min-width: 640px) {
  .showcase-nav-next {
    right: 1rem !important;
  }
}
@media (min-width: 1280px) {
  .showcase-nav-next {
    right: 1.5rem !important;
  }
}

.showcase-nav-arrow:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3) !important;
}

.showcase-nav-arrow:active {
  background-color: rgba(255, 255, 255, 0.12) !important;
  transform: translateY(-50%) scale(0.94) !important;
}

/* ========================================================================= */
/* 5B. SMOOTH CONTINUOUS MARQUEE GLIDING TO THE LEFT (ZERO EXTRA BOXES)      */
/* ========================================================================= */
.marquee-water-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  width: 100%;
  padding: 8px 0 16px 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
}

/* ========================================================================= */
/* 5C. 5-MAGNET MAJESTIC STAGE SHOWCASE (5 VISIBLE CARDS, ENLARGED MAGNETS)  */
/* 5 magnets visible simultaneously, enlarged presence, continuous wave-float*/
/* ========================================================================= */
#magnetStageContainer {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  user-select: none;
  perspective: 1400px;
}

.magnet-stage-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 340px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  will-change: transform, opacity, filter;
  transition: transform 1.75s cubic-bezier(0.25, 1, 0.35, 1),
              opacity 1.75s cubic-bezier(0.25, 1, 0.35, 1),
              filter 1.75s cubic-bezier(0.25, 1, 0.35, 1);
}

/* Center Stage: Crisp, in sharp focus (0px blur), zoomed forward, elevated depth */
.magnet-stage-card.stage-center {
  z-index: 25;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1.15);
  filter: blur(0px) drop-shadow(0 28px 52px rgba(0, 0, 0, 0.98));
}

/* Buy Now action transition: only visible and interactive on active center magnet */
.magnet-stage-card .magnet-buy-action {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.magnet-stage-card.stage-center .magnet-buy-action {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Left Stage (Pos -1): Soft depth of field blur, scaled down, smooth acrylic sheen */
.magnet-stage-card.stage-left {
  z-index: 18;
  opacity: 0.65;
  pointer-events: auto;
  cursor: pointer;
  transform: translate(calc(-50% - 19vw), -50%) scale(0.85);
  filter: blur(3.5px) drop-shadow(0 14px 28px rgba(0, 0, 0, 0.85));
}
.magnet-stage-card.stage-left:hover {
  opacity: 0.88;
  filter: blur(1.5px) drop-shadow(0 18px 36px rgba(0, 0, 0, 0.92));
}

/* Right Stage (Pos +1): Soft depth of field blur, scaled down, smooth acrylic sheen */
.magnet-stage-card.stage-right {
  z-index: 18;
  opacity: 0.65;
  pointer-events: auto;
  cursor: pointer;
  transform: translate(calc(-50% + 19vw), -50%) scale(0.85);
  filter: blur(3.5px) drop-shadow(0 14px 28px rgba(0, 0, 0, 0.85));
}
.magnet-stage-card.stage-right:hover {
  opacity: 0.88;
  filter: blur(1.5px) drop-shadow(0 18px 36px rgba(0, 0, 0, 0.92));
}

/* Far Left Stage (Pos -2): VISIBLE 4th card, gentle outer blur, soft atmospheric perspective */
.magnet-stage-card.stage-far-left {
  z-index: 12;
  opacity: 0.38;
  pointer-events: auto;
  cursor: pointer;
  transform: translate(calc(-50% - 36vw), -50%) scale(0.68);
  filter: blur(6.5px) drop-shadow(0 10px 22px rgba(0, 0, 0, 0.75));
}
.magnet-stage-card.stage-far-left:hover {
  opacity: 0.65;
  filter: blur(3px) drop-shadow(0 14px 28px rgba(0, 0, 0, 0.85));
}

/* Far Right Stage (Pos +2): VISIBLE 5th card, gentle outer blur, soft atmospheric perspective */
.magnet-stage-card.stage-far-right {
  z-index: 12;
  opacity: 0.38;
  pointer-events: auto;
  cursor: pointer;
  transform: translate(calc(-50% + 36vw), -50%) scale(0.68);
  filter: blur(6.5px) drop-shadow(0 10px 22px rgba(0, 0, 0, 0.75));
}
.magnet-stage-card.stage-far-right:hover {
  opacity: 0.65;
  filter: blur(3px) drop-shadow(0 14px 28px rgba(0, 0, 0, 0.85));
}

/* Continuous serene ambient water-wave floating bobbing */
@keyframes magnetWaterWave {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-5px) rotate(0.35deg);
  }
  50% {
    transform: translateY(-11px) rotate(0deg);
  }
  75% {
    transform: translateY(-5px) rotate(-0.35deg);
  }
}

.magnet-float-bob {
  animation: magnetWaterWave 6s ease-in-out infinite;
  will-change: transform;
}

/* Out-of-phase wave oscillations across all 5 visible cards */
.magnet-stage-card.stage-far-left .magnet-float-bob {
  animation-duration: 6.2s;
  animation-delay: -1.2s;
}

.magnet-stage-card.stage-left .magnet-float-bob {
  animation-duration: 5.7s;
  animation-delay: -2.8s;
}

.magnet-stage-card.stage-center .magnet-float-bob {
  animation-duration: 6.5s;
  animation-delay: 0s;
}

.magnet-stage-card.stage-right .magnet-float-bob {
  animation-duration: 5.9s;
  animation-delay: -4.2s;
}

.magnet-stage-card.stage-far-right .magnet-float-bob {
  animation-duration: 6.4s;
  animation-delay: -2.1s;
}

/* Responsive Desktop Sizing (1536px+) */
@media (min-width: 1536px) {
  .magnet-stage-card {
    width: 380px;
  }
  .magnet-stage-card.stage-center {
    transform: translate(-50%, -50%) scale(1.16);
  }
  .magnet-stage-card.stage-left {
    transform: translate(calc(-50% - 280px), -50%) scale(0.86);
  }
  .magnet-stage-card.stage-right {
    transform: translate(calc(-50% + 280px), -50%) scale(0.86);
  }
  .magnet-stage-card.stage-far-left {
    transform: translate(calc(-50% - 530px), -50%) scale(0.70);
  }
  .magnet-stage-card.stage-far-right {
    transform: translate(calc(-50% + 530px), -50%) scale(0.70);
  }
}

/* Responsive Laptop / Large Tablet (1024px - 1535px) */
@media (min-width: 1024px) and (max-width: 1535px) {
  .magnet-stage-card {
    width: 340px;
  }
  .magnet-stage-card.stage-center {
    transform: translate(-50%, -50%) scale(1.14);
  }
  .magnet-stage-card.stage-left {
    transform: translate(calc(-50% - 18.5vw), -50%) scale(0.84);
  }
  .magnet-stage-card.stage-right {
    transform: translate(calc(-50% + 18.5vw), -50%) scale(0.84);
  }
  .magnet-stage-card.stage-far-left {
    transform: translate(calc(-50% - 35.5vw), -50%) scale(0.68);
  }
  .magnet-stage-card.stage-far-right {
    transform: translate(calc(-50% + 35.5vw), -50%) scale(0.68);
  }
}

/* Responsive Tablet (641px - 1023px) */
@media (max-width: 1023px) and (min-width: 641px) {
  .magnet-stage-card {
    width: 290px;
  }
  .magnet-stage-card.stage-center {
    transform: translate(-50%, -50%) scale(1.10);
  }
  .magnet-stage-card.stage-left {
    transform: translate(calc(-50% - 24vw), -50%) scale(0.78);
    opacity: 0.55;
  }
  .magnet-stage-card.stage-right {
    transform: translate(calc(-50% + 24vw), -50%) scale(0.78);
    opacity: 0.55;
  }
  .magnet-stage-card.stage-far-left {
    transform: translate(calc(-50% - 41vw), -50%) scale(0.60);
    opacity: 0.28;
  }
  .magnet-stage-card.stage-far-right {
    transform: translate(calc(-50% + 41vw), -50%) scale(0.60);
    opacity: 0.28;
  }
}

/* Responsive Mobile (<= 640px) */
@media (max-width: 640px) {
  .magnet-stage-card {
    width: 250px;
  }
  .magnet-stage-card.stage-center {
    transform: translate(-50%, -50%) scale(1.05);
  }
  .magnet-stage-card.stage-left {
    transform: translate(calc(-50% - 48vw), -50%) scale(0.74);
    opacity: 0.40;
  }
  .magnet-stage-card.stage-right {
    transform: translate(calc(-50% + 48vw), -50%) scale(0.74);
    opacity: 0.40;
  }
  .magnet-stage-card.stage-far-left {
    transform: translate(calc(-50% - 84vw), -50%) scale(0.55);
    opacity: 0.18;
  }
  .magnet-stage-card.stage-far-right {
    transform: translate(calc(-50% + 84vw), -50%) scale(0.55);
    opacity: 0.18;
  }
}

/* Hidden off-stage buffer cards */
.magnet-stage-card.stage-hidden {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.4);
  transition: none !important;
}

/* Magnet Stage Dot Styling */
.magnet-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.25);
  transition: all 0.35s ease;
  cursor: pointer;
}
.magnet-dot.active {
  width: 28px;
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.magnet-dot:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.6);
}

/* ========================================================================= */
/* MAJESTIC 5-BLOG WATER-FLOW STAGE (IDENTICAL SOOTHING MOTION AS MAGNETS)    */
/* Strictly 5 blog cards in view: Far-Left, Left, Center (Crisp), Right, Far-Right */
/* Center card is prominent & unblurred, side cards have subtle elegant blur */
/* Fluid 1.75s water-air transitions and gentle ambient water bobbing         */
/* ========================================================================= */

.blog-stage-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  max-width: 88vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  will-change: transform, opacity, filter;
  transition: transform 1.75s cubic-bezier(0.25, 1, 0.35, 1),
              opacity 1.75s cubic-bezier(0.25, 1, 0.35, 1),
              filter 1.75s cubic-bezier(0.25, 1, 0.35, 1);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Center Stage: Crisp (0px blur), prominent, zoomed forward, full clarity */
.blog-stage-card.blog-stage-center {
  z-index: 25;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1.08);
  filter: blur(0px) drop-shadow(0 26px 52px rgba(0, 0, 0, 0.98));
}

/* Left Stage (Pos -1): Subtle depth-of-field blur (3.5px), scaled down, soft translucency */
.blog-stage-card.blog-stage-left {
  z-index: 18;
  opacity: 0.62;
  pointer-events: auto;
  cursor: pointer;
  transform: translate(calc(-50% - 21.5vw), -50%) scale(0.85);
  filter: blur(3.5px) drop-shadow(0 14px 28px rgba(0, 0, 0, 0.85));
}
.blog-stage-card.blog-stage-left:hover {
  opacity: 0.88;
  filter: blur(1.5px) drop-shadow(0 18px 36px rgba(0, 0, 0, 0.92));
}

/* Right Stage (Pos +1): Subtle depth-of-field blur (3.5px), scaled down, soft translucency */
.blog-stage-card.blog-stage-right {
  z-index: 18;
  opacity: 0.62;
  pointer-events: auto;
  cursor: pointer;
  transform: translate(calc(-50% + 21.5vw), -50%) scale(0.85);
  filter: blur(3.5px) drop-shadow(0 14px 28px rgba(0, 0, 0, 0.85));
}
.blog-stage-card.blog-stage-right:hover {
  opacity: 0.88;
  filter: blur(1.5px) drop-shadow(0 18px 36px rgba(0, 0, 0, 0.92));
}

/* Far Left Stage (Pos -2): Soft atmospheric perspective blur (6.5px) */
.blog-stage-card.blog-stage-far-left {
  z-index: 12;
  opacity: 0.35;
  pointer-events: auto;
  cursor: pointer;
  transform: translate(calc(-50% - 39.5vw), -50%) scale(0.68);
  filter: blur(6.5px) drop-shadow(0 10px 22px rgba(0, 0, 0, 0.75));
}
.blog-stage-card.blog-stage-far-left:hover {
  opacity: 0.65;
  filter: blur(3px) drop-shadow(0 14px 28px rgba(0, 0, 0, 0.85));
}

/* Far Right Stage (Pos +2): Soft atmospheric perspective blur (6.5px) */
.blog-stage-card.blog-stage-far-right {
  z-index: 12;
  opacity: 0.35;
  pointer-events: auto;
  cursor: pointer;
  transform: translate(calc(-50% + 39.5vw), -50%) scale(0.68);
  filter: blur(6.5px) drop-shadow(0 10px 22px rgba(0, 0, 0, 0.75));
}
.blog-stage-card.blog-stage-far-right:hover {
  opacity: 0.65;
  filter: blur(3px) drop-shadow(0 14px 28px rgba(0, 0, 0, 0.85));
}

/* Offscreen Left Exit Point for smooth unidirectional glide */
.blog-stage-card.blog-stage-exit-left {
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(-50% - 58vw), -50%) scale(0.55);
  filter: blur(10px);
}

/* Offscreen Right Entry Point for smooth unidirectional glide */
.blog-stage-card.blog-stage-enter-right {
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(-50% + 58vw), -50%) scale(0.55);
  filter: blur(10px);
}

.blog-stage-card.blog-stage-hidden {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.4);
  transition: none !important;
}

/* Continuous serene ambient water-wave floating bobbing */
@keyframes blogWaterWave {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-5px) rotate(0.25deg);
  }
  50% {
    transform: translateY(-11px) rotate(0deg);
  }
  75% {
    transform: translateY(-5px) rotate(-0.25deg);
  }
}

.blog-float-bob {
  animation: blogWaterWave 6s ease-in-out infinite;
  will-change: transform;
}

/* Out-of-phase wave oscillations across visible cards */
.blog-stage-card.blog-stage-far-left .blog-float-bob {
  animation-duration: 6.3s;
  animation-delay: -1.3s;
}

.blog-stage-card.blog-stage-left .blog-float-bob {
  animation-duration: 5.8s;
  animation-delay: -2.9s;
}

.blog-stage-card.blog-stage-center .blog-float-bob {
  animation-duration: 6.6s;
  animation-delay: 0s;
}

.blog-stage-card.blog-stage-right .blog-float-bob {
  animation-duration: 5.9s;
  animation-delay: -4.3s;
}

.blog-stage-card.blog-stage-far-right .blog-float-bob {
  animation-duration: 6.4s;
  animation-delay: -2.2s;
}

/* Blog Stage Dot Styling */
.blog-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.25);
  transition: all 0.35s ease;
  cursor: pointer;
}
.blog-dot.active {
  width: 28px;
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.blog-dot:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.6);
}

/* Responsive Desktop Sizing (1536px+) */
@media (min-width: 1536px) {
  .blog-stage-card {
    width: 420px;
  }
  .blog-stage-card.blog-stage-center {
    transform: translate(-50%, -50%) scale(1.10);
  }
  .blog-stage-card.blog-stage-left {
    transform: translate(calc(-50% - 325px), -50%) scale(0.86);
  }
  .blog-stage-card.blog-stage-right {
    transform: translate(calc(-50% + 325px), -50%) scale(0.86);
  }
  .blog-stage-card.blog-stage-far-left {
    transform: translate(calc(-50% - 620px), -50%) scale(0.70);
  }
  .blog-stage-card.blog-stage-far-right {
    transform: translate(calc(-50% + 620px), -50%) scale(0.70);
  }
  .blog-stage-card.blog-stage-exit-left {
    transform: translate(calc(-50% - 880px), -50%) scale(0.55);
  }
  .blog-stage-card.blog-stage-enter-right {
    transform: translate(calc(-50% + 880px), -50%) scale(0.55);
  }
}

/* Responsive Laptop / Large Tablet (1024px - 1535px) */
@media (min-width: 1024px) and (max-width: 1535px) {
  .blog-stage-card {
    width: 380px;
  }
  .blog-stage-card.blog-stage-center {
    transform: translate(-50%, -50%) scale(1.08);
  }
  .blog-stage-card.blog-stage-left {
    transform: translate(calc(-50% - 22vw), -50%) scale(0.85);
  }
  .blog-stage-card.blog-stage-right {
    transform: translate(calc(-50% + 22vw), -50%) scale(0.85);
  }
  .blog-stage-card.blog-stage-far-left {
    transform: translate(calc(-50% - 40vw), -50%) scale(0.68);
  }
  .blog-stage-card.blog-stage-far-right {
    transform: translate(calc(-50% + 40vw), -50%) scale(0.68);
  }
  .blog-stage-card.blog-stage-exit-left {
    transform: translate(calc(-50% - 58vw), -50%) scale(0.55);
  }
  .blog-stage-card.blog-stage-enter-right {
    transform: translate(calc(-50% + 58vw), -50%) scale(0.55);
  }
}

/* Responsive Tablet (641px - 1023px) */
@media (max-width: 1023px) and (min-width: 641px) {
  .blog-stage-card {
    width: 320px;
  }
  .blog-stage-card.blog-stage-center {
    transform: translate(-50%, -50%) scale(1.05);
  }
  .blog-stage-card.blog-stage-left {
    transform: translate(calc(-50% - 26vw), -50%) scale(0.78);
    opacity: 0.52;
  }
  .blog-stage-card.blog-stage-right {
    transform: translate(calc(-50% + 26vw), -50%) scale(0.78);
    opacity: 0.52;
  }
  .blog-stage-card.blog-stage-far-left {
    transform: translate(calc(-50% - 45vw), -50%) scale(0.60);
    opacity: 0.28;
  }
  .blog-stage-card.blog-stage-far-right {
    transform: translate(calc(-50% + 45vw), -50%) scale(0.60);
    opacity: 0.28;
  }
  .blog-stage-card.blog-stage-exit-left {
    transform: translate(calc(-50% - 64vw), -50%) scale(0.50);
  }
  .blog-stage-card.blog-stage-enter-right {
    transform: translate(calc(-50% + 64vw), -50%) scale(0.50);
  }
}

/* Responsive Mobile (<= 640px) */
@media (max-width: 640px) {
  .blog-stage-card {
    width: 280px;
  }
  .blog-stage-card.blog-stage-center {
    transform: translate(-50%, -50%) scale(1.02);
  }
  .blog-stage-card.blog-stage-left {
    transform: translate(calc(-50% - 50vw), -50%) scale(0.72);
    opacity: 0.38;
  }
  .blog-stage-card.blog-stage-right {
    transform: translate(calc(-50% + 50vw), -50%) scale(0.72);
    opacity: 0.38;
  }
  .blog-stage-card.blog-stage-far-left {
    transform: translate(calc(-50% - 88vw), -50%) scale(0.55);
    opacity: 0.15;
  }
  .blog-stage-card.blog-stage-far-right {
    transform: translate(calc(-50% + 88vw), -50%) scale(0.55);
    opacity: 0.15;
  }
  .blog-stage-card.blog-stage-exit-left {
    transform: translate(calc(-50% - 110vw), -50%) scale(0.45);
  }
  .blog-stage-card.blog-stage-enter-right {
    transform: translate(calc(-50% + 110vw), -50%) scale(0.45);
  }
}

.marquee-water-track-horizontal {
  display: flex;
  width: max-content;
  align-items: flex-start;
  gap: 0 !important;
  animation: glideWaterLeft 160s linear infinite;
  animation-play-state: paused; /* Static by default */
  will-change: transform;
}

/* Hover-triggered slow gentle glide on the specific row only */
.marquee-water-viewport:hover .marquee-water-track,
.marquee-water-viewport:hover .marquee-water-track-horizontal {
  animation-play-state: running;
}

/* Gliding smoothly like water to the left in infinite seamless loop */
@keyframes glideWaterLeft {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.marquee-item {
  width: 250px;
  box-sizing: border-box;
  padding: 0 14px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  user-select: none;
}

.marquee-item-horizontal {
  width: 350px;
  box-sizing: border-box;
  padding: 0 14px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  user-select: none;
}

/* ========================================================================= */
/* 6. HOUSEHOLD SWITCHBOARD & AMBIENT LED BACKLIGHT ILLUMINATION             */
/* ========================================================================= */

#pdpLightingContainer, #showcaseGridContainer, #showcaseSliderTrack, #showcaseSliderTrack > div, #secondaryShowcaseGrid, .water-wave-item, .water-wave-viewport, .group\/carousel, .marquee-water-viewport, .marquee-water-track, .marquee-water-track-horizontal, .marquee-item, .marquee-item-horizontal {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* Soft Ambient Diffusion Halo (Disabled - Zero Box Artifacts) */
.showcase-ambient-halo, .pdp-backlight-halo, .translit-frame-aura {
  display: none !important;
}

/* Product Artwork Lighting State — Pure Floating Translit Artwork (Zero Extra Boxes) */
#pdpMainImg, .showcase-art-img, #widgetProductImage {
  position: relative;
  z-index: 2;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transition: filter 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease;
}

#pdpMainImg.backlight-active, .showcase-art-img.backlight-active, #widgetProductImage.backlight-active {
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  filter: 
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.75))
    drop-shadow(0 0 35px rgba(255, 255, 255, 0.45))
    brightness(1.22)
    contrast(1.15)
    saturate(1.25) !important;
}

#hero3dCanvas.backlight-active, #customizer3dCanvas.backlight-active {
  filter:
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 32px rgba(255, 255, 255, 0.50)) !important;
}

/* Guard: Opaque lifestyle & angle JPGs must NEVER get outer rectangular drop-shadow box halos */
#pdpMainImg:not([src$=".png"]).backlight-active {
  filter: brightness(1.0) contrast(1.0) !important;
}

#pdpMainImg:not([src$=".png"]).backlight-inactive {
  filter: brightness(1.0) contrast(1.0) !important;
}

#pdpMainImg.backlight-inactive, .showcase-art-img.backlight-inactive, #widgetProductImage.backlight-inactive {
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  filter: brightness(0.94) contrast(0.98) !important;
}

/* Miniature Household Switchboard Faceplate */
.pdp-switchboard-plate {
  background: linear-gradient(145deg, #20242f, #121419);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 7px;
  box-shadow: 
    0 16px 32px rgba(0, 0, 0, 0.9),
    0 4px 10px rgba(0, 0, 0, 0.7),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.28),
    inset 0 -2px 3px rgba(0, 0, 0, 0.6);
  user-select: none;
}

/* Deep Recessed Socket Well with 3D Perspective */
.pdp-rocker-well {
  background: #08090c;
  border-radius: 7px;
  padding: 3px;
  box-shadow: 
    inset 0 6px 12px rgba(0, 0, 0, 0.95),
    inset 0 -2px 4px rgba(0, 0, 0, 0.8),
    inset 0 0 2px rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  perspective: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Realistic 3D Tactile Rocker Switch (Top OFF / Bottom ON) */
.pdp-rocker-btn {
  width: 44px;
  height: 74px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.75);
  position: relative;
  cursor: pointer;
  outline: none;
  transform-style: preserve-3d;
  transform-origin: center center;
  transition: transform 0.18s cubic-bezier(0.2, 1.3, 0.3, 1), box-shadow 0.18s ease, background 0.18s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 6px 3px;
}

/* State: OFF (Top Pressed In / Bottom Tilted Outward - Clear Tactile Angle) */
.pdp-rocker-btn.is-off {
  transform: rotateX(18deg) translateZ(3px);
  background: linear-gradient(180deg, #15171e 0%, #20242e 45%, #2c313e 55%, #242833 100%);
  box-shadow: 
    0 8px 14px -2px rgba(0, 0, 0, 0.95),
    0 3px 6px rgba(0, 0, 0, 0.8),
    inset 0 5px 6px -2px rgba(0, 0, 0, 0.95),
    inset 0 -2px 3px rgba(255, 255, 255, 0.18);
}

.pdp-rocker-btn.is-off .rocker-label-on {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 600;
}

.pdp-rocker-btn.is-off .rocker-label-off {
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  font-weight: 900;
}

.pdp-rocker-btn.is-off .rocker-led-indicator {
  background: #333844;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.8);
}

/* State: ON (Bottom Pressed In / Top Tilted Outward - Clear Tactile Angle) */
.pdp-rocker-btn.is-on {
  transform: rotateX(-18deg) translateZ(3px);
  background: linear-gradient(180deg, #2c313e 0%, #252a35 45%, #1b1e26 55%, #14161c 100%);
  box-shadow: 
    0 -4px 10px -2px rgba(0, 0, 0, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.6),
    inset 0 -5px 6px -2px rgba(0, 0, 0, 0.95),
    inset 0 3px 4px rgba(255, 255, 255, 0.28);
}

.pdp-rocker-btn.is-on .rocker-label-on {
  color: #FFFFFF;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.95);
  font-weight: 900;
}

.pdp-rocker-btn.is-on .rocker-label-off {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 600;
}

.pdp-rocker-btn.is-on .rocker-led-indicator {
  background: #FFFFFF;
  box-shadow: 0 0 8px #FFFFFF, 0 0 14px rgba(255, 255, 255, 0.9);
}

/* LED Indicator Dot */
.rocker-led-indicator {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

#footer-section {
  position: relative !important;
  z-index: 50 !important;
  border-top: none !important;
  box-shadow: none !important;
  background: linear-gradient(180deg, 
    transparent 0%, 
    rgba(7, 8, 11, 0.05) 12%, 
    rgba(7, 8, 11, 0.18) 28%, 
    rgba(7, 8, 11, 0.42) 48%, 
    rgba(7, 8, 11, 0.70) 68%, 
    rgba(6, 7, 10, 0.90) 86%, 
    #07080B 100%
  ) !important;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeInSlide 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Fluid Water Flow Slide Transitions */
@keyframes waterFlowSlideNext {
  0% {
    opacity: 0;
    transform: translateX(45px) scale(0.97);
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes waterFlowSlidePrev {
  0% {
    opacity: 0;
    transform: translateX(-45px) scale(0.97);
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.animate-waterFlowNext {
  animation: waterFlowSlideNext 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-waterFlowPrev {
  animation: waterFlowSlidePrev 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ========================================================================= */
/* 7. HIGH-GLOSS PIANO-BLACK FRAME & REALISTIC ACRYLIC GLASS SHEEN MOCKUP    */
/* ========================================================================= */
.custom-mockup-frame {
  position: relative;
  z-index: 2;
  width: 260px;
  height: 372px;
  border-radius: 18px;
  background: #000000;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.95);
  transition: all 0.35s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

/* Base Artwork Container (Seated safely 4px inside to guarantee 100% sealed corners) */
.custom-mockup-artwork-wrap {
  position: absolute;
  inset: 4px;
  border-radius: 13px;
  overflow: hidden;
  background: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.custom-mockup-artwork-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.4s ease;
}

/* Master 1:1 Translit Frame & Glass Bezel Overlay */
.custom-frame-overlay-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 10;
}

/* Light Active State on Custom Mockup — Pure Rear/Edge Casting with Subtle Backlit Enhancement */
.custom-mockup-frame.backlight-active {
  box-shadow: 
    0 0 22px rgba(255, 255, 255, 0.95),
    0 0 52px rgba(255, 255, 255, 0.60),
    0 0 95px rgba(255, 255, 255, 0.28),
    0 22px 50px rgba(0, 0, 0, 0.98) !important;
}

.custom-mockup-frame.backlight-active .custom-mockup-artwork-wrap img {
  filter: brightness(1.08) contrast(1.04) saturate(1.06) !important;
}

/* Horizontal Panoramic Custom Mockup Frame */
.custom-mockup-frame-horizontal {
  position: relative;
  z-index: 2;
  width: 372px;
  max-width: 100%;
  height: 260px;
  border-radius: 18px;
  background: #000000;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.95);
  transition: all 0.35s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.custom-mockup-frame-horizontal.backlight-active {
  box-shadow: 
    0 0 22px rgba(255, 255, 255, 0.95),
    0 0 52px rgba(255, 255, 255, 0.60),
    0 0 95px rgba(255, 255, 255, 0.28),
    0 22px 50px rgba(0, 0, 0, 0.98) !important;
}

.custom-mockup-frame-horizontal.backlight-active .custom-mockup-artwork-wrap img {
  filter: brightness(1.08) contrast(1.04) saturate(1.06) !important;
}

/* ========================================================================= */
/* 8. SECTION 4: 'EXPERIENCE THE GLOW' ATMOSPHERIC STUDIO                    */
/* ========================================================================= */
.bg-radial-studio {
  background: radial-gradient(circle at 50% 25%, rgba(28, 20, 56, 0.75) 0%, rgba(10, 12, 18, 0.95) 60%, #050608 100%);
}

.glow-mirror-card {
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glow-mirror-reflection {
  -webkit-box-reflect: below 2px linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.35) 100%);
}

.bg-samurai-wave-studio {
  background-color: #0c0e14;
  background-image: 
    url('assets/japanese-wave-samurai-bg.svg'),
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.05) 0%, rgba(12, 14, 20, 0.96) 70%, #050608 100%);
  background-size: cover, auto;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ========================================================================= */
/* 9. 3D REFRACTIVE GLASS ORIGINAL MASCOT BADGE (ASWHOLE IDEAS)               */
/* ========================================================================= */
.brand-logo-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  padding: 2px;
  user-select: none;
  position: relative;
  box-shadow: none !important;
  filter: none !important;
  transform-origin: center center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* In-place zoom forward: Stays centered in front of viewer, ZERO vertical offset */
.brand-logo-container:hover {
  transform: scale(1.10) translate(0, 0);
  box-shadow: none !important;
  filter: none !important;
}

.brand-logo-container:active {
  transform: scale(1.20) translate(0, 0) !important;
  transition-duration: 0.15s;
}

.brand-logo-container:focus {
  outline: none;
}

/* 3D Refractive Glass Mascot Badge Container */
.aswhole-glass-mascot-badge {
  position: relative;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: 
    0 4px 25px rgba(0, 0, 0, 0.95), 
    0 0 18px rgba(56, 189, 248, 0.3),
    inset 0 0 0 1.5px rgba(80, 160, 255, 0.3);
  transform-origin: center center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  will-change: transform, box-shadow;
}

@media (max-width: 640px) {
  .aswhole-glass-mascot-badge {
    width: 66px;
    height: 66px;
  }
}

.mascot-core-glass {
  width: 170%;
  height: 170%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  display: block;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: contrast(1.15) brightness(1.1);
  transform: scale(1.02);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  will-change: transform, filter;
}

.aswhole-logo-video {
  width: 170%;
  height: 170%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  display: block;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: contrast(1.15) brightness(1.1);
}

@keyframes glassMascotFloat {
  0%, 100% {
    transform: scale(1.02) translateY(0px);
  }
  50% {
    transform: scale(1.04) translateY(-2px);
  }
}

/* Specular Living Glass Gleam Sweep */
.mascot-glass-gleam {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(
    115deg, 
    transparent 35%, 
    rgba(255, 255, 255, 0.05) 44%, 
    rgba(255, 255, 255, 0.5) 50%, 
    rgba(255, 230, 0, 0.35) 54%,
    rgba(56, 189, 248, 0.25) 57%,
    transparent 65%
  );
  transform: translateX(-100%) translateY(-100%) rotate(25deg);
  animation: mascotGleamSweep 5.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes mascotGleamSweep {
  0%, 65% {
    transform: translateX(-120%) translateY(-120%) rotate(25deg);
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  90%, 100% {
    transform: translateX(120%) translateY(120%) rotate(25deg);
    opacity: 0;
  }
}

/* Prismatic Optic Rim Bevel Overlay */
.mascot-optic-bezel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.02) 50%, transparent 70%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 12px rgba(255, 230, 0, 0.12);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* --- Interactive Hover Enhancements --- */
.brand-logo-container:hover .aswhole-glass-mascot-badge {
  box-shadow: 
    0 0 35px rgba(255, 230, 0, 0.45), 
    0 0 55px rgba(56, 189, 248, 0.25),
    0 8px 30px rgba(0, 0, 0, 0.98), 
    inset 0 0 0 1.8px rgba(255, 255, 255, 0.5);
}

.brand-logo-container:hover .mascot-core-glass {
  transform: scale(1.08);
  filter: contrast(1.18) brightness(1.14);
}

.brand-logo-container:hover .mascot-glass-gleam {
  animation: mascotGleamFast 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes mascotGleamFast {
  0% {
    transform: translateX(-120%) translateY(-120%) rotate(25deg);
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(120%) translateY(120%) rotate(25deg);
    opacity: 0;
  }
}

.brand-logo-container:hover .mascot-optic-bezel {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 0 16px rgba(255, 230, 0, 0.35), inset 0 0 8px rgba(56, 189, 248, 0.25);
}

/* 3D Frosted Glass Container (SVG Mode) */
.logo-bear-badge {
  position: relative;
  width: 82px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: none !important;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.95)) !important;
  animation: glassSubtleFloat 4.2s ease-in-out infinite;
  transform-origin: center center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

@media (max-width: 640px) {
  .logo-bear-badge {
    width: 66px;
    height: 66px;
  }
}

@keyframes glassSubtleFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-1.5px);
  }
}

.logo-core-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* --- 1. BASE GLASSMORPHIC BEAR FORM --- */
.glass-bear-form {
  opacity: 1;
  transform: scale(1);
  transform-origin: 70px 70px;
  filter: blur(0px);
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
  will-change: opacity, transform, filter;
}

/* On hover: Instant glass fracture & dissolution as fragments break out */
.brand-logo-container:hover .glass-bear-form {
  opacity: 0;
  transform: scale(1.06);
  filter: blur(5px);
  pointer-events: none;
}

/* --- 2. SCULPTED 3D GLASS 'AS' MONOGRAM --- */
.glass-as-monogram {
  opacity: 0;
  transform: scale(0.92);
  transform-origin: 70px 70px;
  filter: blur(4px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
  pointer-events: none;
  will-change: opacity, transform, filter;
}

/* Solidifies gracefully as the circular vortex collapses into letter shapes (~0.95s to 1.35s) */
.brand-logo-container:hover .glass-as-monogram {
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.85s, transform 0.8s cubic-bezier(0.34, 1.3, 0.64, 1) 0.85s, filter 0.65s ease 0.85s;
}

/* --- 3. CIRCULAR ORBITAL VORTEX LIGHT RINGS --- */
.orbital-vortex-rings {
  pointer-events: none;
  transform-origin: 70px 70px;
}

.vortex-ring-outer {
  opacity: 0;
  transform-origin: 70px 70px;
  transition: opacity 0.3s ease;
}

.vortex-ring-inner {
  opacity: 0;
  transform-origin: 70px 70px;
  transition: opacity 0.3s ease;
}

.brand-logo-container:hover .vortex-ring-outer {
  animation: vortexSpinOuter 1.35s cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}

.brand-logo-container:hover .vortex-ring-inner {
  animation: vortexSpinInner 1.35s cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}

@keyframes vortexSpinOuter {
  0% { opacity: 0; transform: rotate(0deg) scale(0.7); stroke-dashoffset: 0; }
  18% { opacity: 0.85; transform: rotate(120deg) scale(1.08); stroke-dashoffset: -50; }
  65% { opacity: 0.75; transform: rotate(380deg) scale(1); stroke-dashoffset: -160; }
  90% { opacity: 0.2; transform: rotate(500deg) scale(0.85); stroke-dashoffset: -240; }
  100% { opacity: 0; transform: rotate(540deg) scale(0.7); stroke-dashoffset: -280; }
}

@keyframes vortexSpinInner {
  0% { opacity: 0; transform: rotate(0deg) scale(0.7); stroke-dashoffset: 0; }
  18% { opacity: 0.95; transform: rotate(-140deg) scale(1.1); stroke-dashoffset: 40; }
  65% { opacity: 0.8; transform: rotate(-420deg) scale(1); stroke-dashoffset: 140; }
  90% { opacity: 0.2; transform: rotate(-540deg) scale(0.85); stroke-dashoffset: 210; }
  100% { opacity: 0; transform: rotate(-600deg) scale(0.7); stroke-dashoffset: 250; }
}

/* --- 4. DYNAMIC GLASS MORPH PARTICLES (SHATTER -> ORBITAL SWIRL -> REASSEMBLY) --- */
.glass-morph-particles {
  pointer-events: none;
}

.morph-p {
  opacity: 0;
  transform-origin: 70px 70px;
  will-change: transform, opacity;
  transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1.35s Complete Shatter + Orbital Swirl + Reassembly Sequence */
.brand-logo-container:hover .p1-ear-left {
  animation: orbitP1Glide 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.brand-logo-container:hover .p2-ear-right {
  animation: orbitP2Glide 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.brand-logo-container:hover .p3-crown {
  animation: orbitP3Glide 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.brand-logo-container:hover .p4-eye-left {
  animation: orbitP4Glide 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.brand-logo-container:hover .p5-eye-right {
  animation: orbitP5Glide 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.brand-logo-container:hover .p6-snout {
  animation: orbitP6Glide 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.brand-logo-container:hover .p7-nose {
  animation: orbitP7Glide 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.brand-logo-container:hover .p8-tongue {
  animation: orbitP8Glide 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.brand-logo-container:hover .p9-cheek-l {
  animation: orbitP9Glide 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.brand-logo-container:hover .p10-cheek-r {
  animation: orbitP10Glide 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.brand-logo-container:hover .p11-jaw-l {
  animation: orbitP11Glide 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.brand-logo-container:hover .p12-jaw-r {
  animation: orbitP12Glide 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.brand-logo-container:hover .p13-chin {
  animation: orbitP13Glide 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.brand-logo-container:hover .p14-base-r {
  animation: orbitP14Glide 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* --- PRECISE CIRCULAR ORBITAL SWIRL KEYFRAMES FOR EACH FRAGMENT --- */

/* P1: Crown Apex (70, 16) -> Shatters UP -> Orbits Clockwise 360° -> Locks at 'A' Apex (46, 32) */
@keyframes orbitP1Glide {
  0% { opacity: 0; transform: translate(0, 0) scale(1) rotate(0deg); }
  10% { opacity: 1; transform: translate(0px, -14px) scale(1.22) rotate(25deg); }
  34% { opacity: 0.95; transform: translate(52px, 54px) scale(1.08) rotate(115deg); }
  58% { opacity: 0.95; transform: translate(0px, 98px) scale(0.96) rotate(205deg); }
  80% { opacity: 0.9; transform: translate(-32px, 54px) scale(0.96) rotate(295deg); }
  100% { opacity: 0.85; transform: translate(-24px, 16px) scale(1) rotate(360deg); }
}

/* P2: Right Ear (114, 18) -> Shatters UP-RIGHT -> Orbits Clockwise -> Locks at 'S' Top Loop (98, 32) */
@keyframes orbitP2Glide {
  0% { opacity: 0; transform: translate(0, 0) scale(1) rotate(0deg); }
  10% { opacity: 1; transform: translate(16px, -12px) scale(1.22) rotate(35deg); }
  34% { opacity: 0.95; transform: translate(-7px, 89px) scale(1.08) rotate(125deg); }
  58% { opacity: 0.95; transform: translate(-75px, 83px) scale(0.96) rotate(215deg); }
  80% { opacity: 0.9; transform: translate(-67px, 29px) scale(0.96) rotate(305deg); }
  100% { opacity: 0.85; transform: translate(-16px, 14px) scale(1) rotate(360deg); }
}

/* P3: Right Cheek (116, 52) -> Shatters RIGHT -> Orbits Clockwise -> Locks at 'S' Spine (105, 56) */
@keyframes orbitP3Glide {
  0% { opacity: 0; transform: translate(0, 0) scale(1) rotate(0deg); }
  10% { opacity: 1; transform: translate(18px, 4px) scale(1.2) rotate(30deg); }
  34% { opacity: 0.95; transform: translate(-46px, 70px) scale(1.08) rotate(120deg); }
  58% { opacity: 0.95; transform: translate(-90px, 18px) scale(0.96) rotate(210deg); }
  80% { opacity: 0.9; transform: translate(-46px, -14px) scale(0.96) rotate(300deg); }
  100% { opacity: 0.85; transform: translate(-11px, 4px) scale(1) rotate(360deg); }
}

/* P4: Left Eye (44, 36) -> Liquid Squish -> Inner Orbital Vortex -> Seats at 'A' Crossbar Core (46, 72) */
@keyframes orbitP4Glide {
  0% { opacity: 0; transform: translate(0, 0) scale(1) rotate(0deg); }
  12% { opacity: 1; transform: translate(-14px, -8px) scale(1.32) rotate(20deg); }
  36% { opacity: 1; transform: translate(53px, 11px) scale(1.15) rotate(110deg); }
  60% { opacity: 1; transform: translate(48px, 61px) scale(1.05) rotate(200deg); }
  82% { opacity: 1; transform: translate(5px, 52px) scale(1.02) rotate(290deg); }
  100% { opacity: 0.95; transform: translate(2px, 36px) scale(1) rotate(360deg); }
}

/* P5: Right Eye (96, 36) -> Liquid Squish -> Inner Orbital Vortex -> Seats at 'S' Nexus Core (96, 68) */
@keyframes orbitP5Glide {
  0% { opacity: 0; transform: translate(0, 0) scale(1) rotate(0deg); }
  12% { opacity: 1; transform: translate(14px, -8px) scale(1.32) rotate(-20deg); }
  36% { opacity: 1; transform: translate(1px, 57px) scale(1.15) rotate(70deg); }
  60% { opacity: 1; transform: translate(-48px, 61px) scale(1.05) rotate(160deg); }
  82% { opacity: 1; transform: translate(-47px, 16px) scale(1.02) rotate(250deg); }
  100% { opacity: 0.95; transform: translate(0px, 32px) scale(1) rotate(360deg); }
}

/* P6: Snout (70, 34) -> Inner Crystal Orbit -> Locks at 'A' Crossbar Left (36, 72) */
@keyframes orbitP6Glide {
  0% { opacity: 0; transform: translate(0, 0) scale(1) rotate(0deg); }
  12% { opacity: 1; transform: translate(0px, -10px) scale(1.18) rotate(22deg); }
  36% { opacity: 0.95; transform: translate(34px, 36px) scale(1.08) rotate(112deg); }
  60% { opacity: 0.95; transform: translate(-6px, 64px) scale(0.98) rotate(202deg); }
  82% { opacity: 0.92; transform: translate(-38px, 42px) scale(0.98) rotate(292deg); }
  100% { opacity: 0.85; transform: translate(-34px, 38px) scale(1) rotate(360deg); }
}

/* P7: Nose (70, 42) -> Inner Obsidian Orbit -> Locks at 'A' Right Leg Mid (54, 72) */
@keyframes orbitP7Glide {
  0% { opacity: 0; transform: translate(0, 0) scale(1) rotate(0deg); }
  12% { opacity: 1; transform: translate(-6px, -8px) scale(1.18) rotate(-22deg); }
  36% { opacity: 0.95; transform: translate(30px, 26px) scale(1.08) rotate(68deg); }
  60% { opacity: 0.95; transform: translate(4px, 50px) scale(0.98) rotate(158deg); }
  82% { opacity: 0.92; transform: translate(-24px, 30px) scale(0.98) rotate(248deg); }
  100% { opacity: 0.85; transform: translate(-16px, 30px) scale(1) rotate(360deg); }
}

/* P8: Tongue (70, 68) -> Inner Pink Droplet Orbit -> Locks at 'S' Top Return (80, 44) */
@keyframes orbitP8Glide {
  0% { opacity: 0; transform: translate(0, 0) scale(1) rotate(0deg); }
  12% { opacity: 1; transform: translate(0px, 12px) scale(1.22) rotate(25deg); }
  36% { opacity: 0.95; transform: translate(-28px, 12px) scale(1.08) rotate(115deg); }
  60% { opacity: 0.95; transform: translate(-8px, -36px) scale(0.98) rotate(205deg); }
  82% { opacity: 0.92; transform: translate(24px, -18px) scale(0.98) rotate(295deg); }
  100% { opacity: 0.85; transform: translate(10px, -24px) scale(1) rotate(360deg); }
}

/* P9: Left Cheek (24, 52) -> Shatters LEFT -> Orbits Clockwise -> Locks at 'A' Left Leg (38, 70) */
@keyframes orbitP9Glide {
  0% { opacity: 0; transform: translate(0, 0) scale(1) rotate(0deg); }
  10% { opacity: 1; transform: translate(-16px, 2px) scale(1.2) rotate(-35deg); }
  34% { opacity: 0.95; transform: translate(46px, -34px) scale(1.08) rotate(55deg); }
  58% { opacity: 0.95; transform: translate(90px, 18px) scale(0.96) rotate(145deg); }
  80% { opacity: 0.9; transform: translate(46px, 50px) scale(0.96) rotate(235deg); }
  100% { opacity: 0.85; transform: translate(14px, 18px) scale(1) rotate(360deg); }
}

/* P10: Left Ear (26, 18) -> Shatters UP-LEFT -> Orbits Clockwise -> Locks at 'A' Right Foot (64, 104) */
@keyframes orbitP10Glide {
  0% { opacity: 0; transform: translate(0, 0) scale(1) rotate(0deg); }
  10% { opacity: 1; transform: translate(-16px, -12px) scale(1.22) rotate(-35deg); }
  34% { opacity: 0.95; transform: translate(81px, 15px) scale(1.08) rotate(55deg); }
  58% { opacity: 0.95; transform: translate(75px, 83px) scale(0.96) rotate(145deg); }
  80% { opacity: 0.9; transform: translate(21px, 75px) scale(0.96) rotate(235deg); }
  100% { opacity: 0.85; transform: translate(38px, 86px) scale(1) rotate(360deg); }
}

/* P11: Left Jaw (36, 96) -> Shatters DOWN-LEFT -> Orbits Clockwise -> Locks at 'A' Left Foot (24, 104) */
@keyframes orbitP11Glide {
  0% { opacity: 0; transform: translate(0, 0) scale(1) rotate(0deg); }
  10% { opacity: 1; transform: translate(-16px, 14px) scale(1.2) rotate(-25deg); }
  34% { opacity: 0.95; transform: translate(-3px, -63px) scale(1.08) rotate(65deg); }
  58% { opacity: 0.95; transform: translate(65px, -57px) scale(0.96) rotate(155deg); }
  80% { opacity: 0.9; transform: translate(57px, -3px) scale(0.96) rotate(245deg); }
  100% { opacity: 0.85; transform: translate(-12px, 8px) scale(1) rotate(360deg); }
}

/* P12: Right Jaw (104, 96) -> Shatters DOWN-RIGHT -> Orbits Clockwise -> Locks at 'S' Bottom Floor (96, 98) */
@keyframes orbitP12Glide {
  0% { opacity: 0; transform: translate(0, 0) scale(1) rotate(0deg); }
  10% { opacity: 1; transform: translate(16px, 14px) scale(1.2) rotate(25deg); }
  34% { opacity: 0.95; transform: translate(-71px, 11px) scale(1.08) rotate(115deg); }
  58% { opacity: 0.95; transform: translate(-65px, -57px) scale(0.96) rotate(205deg); }
  80% { opacity: 0.9; transform: translate(-11px, -49px) scale(0.96) rotate(295deg); }
  100% { opacity: 0.85; transform: translate(-8px, 2px) scale(1) rotate(360deg); }
}

/* P13: Chin Base (70, 124) -> Shatters DOWN -> Orbits Clockwise -> Locks at 'S' Lower Hook (78, 88) */
@keyframes orbitP13Glide {
  0% { opacity: 0; transform: translate(0, 0) scale(1) rotate(0deg); }
  10% { opacity: 1; transform: translate(0px, 16px) scale(1.2) rotate(30deg); }
  34% { opacity: 0.95; transform: translate(-52px, -54px) scale(1.08) rotate(120deg); }
  58% { opacity: 0.95; transform: translate(0px, -98px) scale(0.96) rotate(210deg); }
  80% { opacity: 0.9; transform: translate(32px, -54px) scale(0.96) rotate(300deg); }
  100% { opacity: 0.85; transform: translate(8px, -36px) scale(1) rotate(360deg); }
}

/* P14: Base Right Foot (82, 110) -> Shatters -> Orbits Clockwise -> Locks at 'S' Swell (112, 84) */
@keyframes orbitP14Glide {
  0% { opacity: 0; transform: translate(0, 0) scale(1) rotate(0deg); }
  10% { opacity: 1; transform: translate(14px, 10px) scale(1.2) rotate(-25deg); }
  34% { opacity: 0.95; transform: translate(-44px, -14px) scale(1.08) rotate(65deg); }
  58% { opacity: 0.95; transform: translate(-18px, -64px) scale(0.96) rotate(155deg); }
  80% { opacity: 0.9; transform: translate(20px, -42px) scale(0.96) rotate(245deg); }
  100% { opacity: 0.85; transform: translate(30px, -26px) scale(1) rotate(360deg); }
}

/* --- BEAR IDLE NATURAL ANIMATIONS (ACTIVE WHEN NOT HOVERED) --- */
.bear-ear-left {
  transform-origin: 26px 18px;
  animation: earGlassTwitchLeft 4.5s ease-in-out infinite;
}

@keyframes earGlassTwitchLeft {
  0%, 86%, 100% { transform: rotate(-25deg); }
  89% { transform: rotate(-36deg) scale(1.08); }
  93% { transform: rotate(-18deg) scale(0.96); }
  97% { transform: rotate(-28deg); }
}

.bear-ear-right {
  transform-origin: 114px 18px;
  animation: earGlassTwitchRight 4.5s ease-in-out infinite;
}

@keyframes earGlassTwitchRight {
  0%, 82%, 100% { transform: rotate(25deg); }
  85% { transform: rotate(36deg) scale(1.08); }
  89% { transform: rotate(18deg) scale(0.96); }
  93% { transform: rotate(28deg); }
}

.bear-eyes-group {
  transition: transform 0.4s ease;
  animation: eyeGlassBreathe 3.6s ease-in-out infinite;
  transform-origin: 70px 36px;
}

@keyframes eyeGlassBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03, 0.97); }
}

.bear-eye-left-normal, .bear-eye-right-normal {
  animation: bearGlassEyeBlink 4.2s infinite;
  transform-origin: 70px 36px;
}

@keyframes bearGlassEyeBlink {
  0%, 93%, 97%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.08); }
}

.bear-snout-group {
  animation: bearGlassSnoutSniff 3s ease-in-out infinite;
  transform-origin: 70px 52px;
}

@keyframes bearGlassSnoutSniff {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.02, 0.98); }
  50% { transform: scale(0.98, 1.02); }
}

.bear-tongue-anim {
  animation: bearGlassTongueIdle 2.6s ease-in-out infinite;
  transform-origin: 70px 58px;
}

@keyframes bearGlassTongueIdle {
  0%, 100% { transform: scale(0.85) translateY(-1px); opacity: 0.7; }
  50% { transform: scale(1.05) translateY(1.5px); opacity: 1; }
}

/* Light beam gleam sweep across 'AS' */
.as-glass-beam {
  animation: asGlassSweep 2.8s ease-in-out infinite;
}

@keyframes asGlassSweep {
  0%, 100% { opacity: 0.4; transform: translateX(-6px); }
  50% { opacity: 0.95; transform: translateX(6px); }
}

/* ========================================================================= */
/* 10. 100% AUTHENTIC SOLID GLASSMORPHIC UI SYSTEM (REFERENCE 1-TO-1 MATCH)  */
/* ========================================================================= */

/* Base Authentic Solid Glass Capsule */
.neon-glass-pill, .glass-capsule {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.15rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.08) 100%), rgba(14, 18, 26, 0.55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  box-shadow: 
    0 10px 28px -4px rgba(0, 0, 0, 0.75),
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1.5px 2px 0 rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: #FFFFFF !important;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  cursor: pointer;
}

.neon-glass-pill:hover, .glass-capsule:hover {
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.14) 100%), rgba(20, 26, 38, 0.65);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 
    0 14px 34px -4px rgba(0, 0, 0, 0.85),
    0 0 16px rgba(255, 255, 255, 0.15),
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 1),
    inset 0 -1.5px 2px 0 rgba(0, 0, 0, 0.6);
  color: #FFFFFF !important;
}

.neon-glass-pill.active, .glass-capsule.active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.18) 100%), rgba(25, 32, 46, 0.75);
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 
    0 12px 30px -4px rgba(0, 0, 0, 0.8),
    0 0 20px rgba(255, 255, 255, 0.2),
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 1);
  color: #FFFFFF !important;
}

/* Subtle, Muted Color Underglow Variants (Authentic Ambient Floor Shadows) */
.neon-glass-cyan {
  border-color: rgba(255, 255, 255, 0.32);
}
.neon-glass-cyan:hover, .neon-glass-cyan.active {
  border-color: rgba(186, 230, 253, 0.6);
  box-shadow: 
    0 14px 34px -4px rgba(0, 0, 0, 0.85),
    0 6px 18px rgba(56, 189, 248, 0.22),
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 1);
}

.neon-glass-amber {
  border-color: rgba(255, 255, 255, 0.32);
}
.neon-glass-amber:hover, .neon-glass-amber.active {
  border-color: rgba(254, 240, 138, 0.6);
  box-shadow: 
    0 14px 34px -4px rgba(0, 0, 0, 0.85),
    0 6px 18px rgba(245, 158, 11, 0.22),
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 1);
}

.neon-glass-magenta {
  border-color: rgba(255, 255, 255, 0.32);
}
.neon-glass-magenta:hover, .neon-glass-magenta.active {
  border-color: rgba(251, 207, 232, 0.6);
  box-shadow: 
    0 14px 34px -4px rgba(0, 0, 0, 0.85),
    0 6px 18px rgba(244, 114, 182, 0.22),
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 1);
}

.neon-glass-emerald {
  border-color: rgba(255, 255, 255, 0.32);
}
.neon-glass-emerald:hover, .neon-glass-emerald.active {
  border-color: rgba(167, 243, 208, 0.6);
  box-shadow: 
    0 14px 34px -4px rgba(0, 0, 0, 0.85),
    0 6px 18px rgba(52, 211, 153, 0.22),
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 1);
}

/* Authentic Solid Glass Search Capsule (Matches 'Text field' in Reference) */
.neon-glass-searchbar, .glass-textfield-container {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.12) 100%), rgba(12, 15, 22, 0.65);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.36);
  box-shadow: 
    0 12px 32px -4px rgba(0, 0, 0, 0.8),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1.5px 2px 0 rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  padding: 4px 6px;
  transition: all 0.3s ease;
}
.neon-glass-searchbar:focus-within {
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 
    0 16px 40px -2px rgba(0, 0, 0, 0.9),
    0 0 20px rgba(255, 255, 255, 0.25),
    inset 0 1.5px 2.5px 0 rgba(255, 255, 255, 1);
}

.neon-glass-search-select {
  background: transparent;
  color: #E2E8F0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  border: none;
  outline: none;
  padding: 0.35rem 0.6rem;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
}

.neon-glass-search-input {
  background: rgba(8, 10, 16, 0.6);
  color: #FFFFFF;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
  font-size: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  outline: none;
  padding: 0.4rem 0.9rem;
  flex: 1;
  margin: 0 4px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}
.neon-glass-search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.neon-glass-search-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.12) 100%), rgba(25, 30, 42, 0.8);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 9999px;
  padding: 0.45rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.85);
  transition: all 0.25s ease;
}
.neon-glass-search-btn:hover {
  transform: scale(1.06);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.2) 100%), rgba(35, 42, 58, 0.9);
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.35), inset 0 1.5px 2px rgba(255, 255, 255, 1);
}

/* Authentic Solid Glass Cards */
.neon-glass-card, .glass-card-pro {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.06) 100%), rgba(12, 16, 24, 0.6);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.24);
  box-shadow: 
    0 16px 36px -6px rgba(0, 0, 0, 0.8),
    inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1.5px 2px 0 rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.neon-glass-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 
    0 22px 46px -4px rgba(0, 0, 0, 0.9),
    0 0 20px rgba(255, 255, 255, 0.15),
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.95);
}

/* Elevated Back to Top Glass Capsule */
.neon-glass-backtotop {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.7rem 2.25rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.1) 100%), rgba(16, 20, 30, 0.65);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.34);
  box-shadow: 
    0 12px 30px -4px rgba(0, 0, 0, 0.8),
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1.5px 2px 0 rgba(0, 0, 0, 0.6);
  color: #FFFFFF !important;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 0.8rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.neon-glass-backtotop:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 
    0 16px 38px -2px rgba(0, 0, 0, 0.9),
    0 0 20px rgba(255, 255, 255, 0.25),
    inset 0 1.5px 2.5px 0 rgba(255, 255, 255, 1);
  color: #FFFFFF !important;
}

/* Clean, Muted Typography Accents (No heavy neon text-shadows) */
.neon-text-glow-cyan {
  color: #E0F2FE;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.neon-text-glow-amber {
  color: #FEF08A;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.neon-text-glow-magenta {
  color: #FDF4FF;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ========================================================================= */
/* 11. HYPER-REALISTIC GLASS MORPHISM UI — CORNER FLARE EDITION             */
/* Modeled from reference: transparent glass panels with brilliant blue      */
/* corner flares, luminous edge borders, and glass refraction depth.         */
/* ========================================================================= */

/* ── Core Glass Material System ──────────────────────────────────────────── */

.smart-dash-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none !important;
  box-shadow: none !important;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}
/* When sticky scrolled down: seamless dark smoke vignette fade */
.smart-dash-header.scrolled {
  background: linear-gradient(180deg, 
    #07080B 0%, 
    rgba(7, 8, 11, 0.98) 45%, 
    rgba(7, 8, 11, 0.90) 75%, 
    rgba(7, 8, 11, 0.70) 90%, 
    rgba(7, 8, 11, 0.50) 100%
  ) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.85) !important;
}
/* Smoke gradient shadow plume extending seamlessly below the header */
.smart-dash-header.scrolled::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 60px;
  background: linear-gradient(180deg, 
    rgba(7, 8, 11, 0.50) 0%, 
    rgba(7, 8, 11, 0.28) 35%, 
    rgba(7, 8, 11, 0.10) 70%, 
    transparent 100%
  );
  pointer-events: none;
  display: block !important;
  z-index: -1;
}
.smart-dash-header:not(.scrolled)::after {
  display: none !important;
}

/* ── Glass Pill / Tile (Header Action Capsules) ──────────────────────────── */

.smart-dash-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #D1D5DB;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}
/* Inner specular highlight sweep */
.smart-dash-pill::before {
  content: '';
  position: absolute;
  top: 0; left: -20%; right: -20%;
  height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
  border-radius: 10px 10px 50% 50%;
  pointer-events: none;
}

.smart-dash-pill:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.smart-dash-pill.active {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  color: #FFFFFF !important;
  font-weight: 700;
  box-shadow:
    0 2px 12px rgba(255, 255, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.smart-dash-pill.active,
.smart-dash-pill.active *,
.smart-dash-pill.active span,
.smart-dash-pill.active i,
.smart-dash-pill.active svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}
.smart-dash-pill.active::after {
  content: none;
}

/* ── Corner Flare Light Utility ──────────────────────────────────────────── */

.glass-flare {
  position: relative;
  overflow: visible;
}
/* Top-left corner flare */
.glass-flare::before {
  content: '';
  position: absolute;
  top: -3px; left: -3px;
  width: 14px; height: 14px;
  background: radial-gradient(circle at center, rgba(80, 160, 255, 0.95) 0%, rgba(80, 160, 255, 0.4) 35%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  filter: blur(0.5px);
}
/* Top-right corner flare */
.glass-flare::after {
  content: '';
  position: absolute;
  top: -3px; right: -3px;
  width: 14px; height: 14px;
  background: radial-gradient(circle at center, rgba(80, 160, 255, 0.95) 0%, rgba(80, 160, 255, 0.4) 35%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  filter: blur(0.5px);
}

/* Extra flares on bottom corners via child spans */
.glass-flare-bottom {
  position: relative;
}
.glass-flare-bottom::before {
  content: '';
  position: absolute;
  bottom: -3px; left: -3px;
  width: 14px; height: 14px;
  background: radial-gradient(circle at center, rgba(80, 160, 255, 0.85) 0%, rgba(80, 160, 255, 0.3) 35%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  filter: blur(0.5px);
}
.glass-flare-bottom::after {
  content: '';
  position: absolute;
  bottom: -3px; right: -3px;
  width: 14px; height: 14px;
  background: radial-gradient(circle at center, rgba(80, 160, 255, 0.85) 0%, rgba(80, 160, 255, 0.3) 35%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  filter: blur(0.5px);
}

/* ── Pulsing IoT Status Dot ──────────────────────────────────────────────── */

.smart-pulse-dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px #10B981;
  flex-shrink: 0;
}
.smart-pulse-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid #10B981;
  opacity: 0.7;
  animation: smartPulse 2s ease-out infinite;
}
@keyframes smartPulse {
  0%   { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(2.4);  opacity: 0;   }
}
.smart-pulse-dot.cyan { background: #38BDF8; box-shadow: 0 0 6px #38BDF8; }
.smart-pulse-dot.cyan::after { border-color: #38BDF8; }

/* ── Smart Search Cockpit ────────────────────────────────────────────────── */

.smart-search-cockpit {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(14, 16, 22, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 1px 4px !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  overflow: hidden;
}
.smart-search-cockpit input,
.smart-search-cockpit select {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
.smart-search-cockpit button {
  padding: 5px 8px !important;
}
/* Top specular sweep on search bar */
.smart-search-cockpit::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
  border-radius: 14px 14px 50% 50%;
  pointer-events: none;
}
.smart-search-cockpit:focus-within {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.7),
    0 0 16px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ── Smart Sub-Nav Strip ─────────────────────────────────────────────────── */

.smart-subnav-strip {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none !important;
  position: relative;
  z-index: 40;
  overflow: visible !important;
}

/* Minimalist Sub-Nav Pills - Thin, Sleek, Directly under Search Cockpit */
.smart-subnav-strip .smart-dash-pill {
  padding: 0.2rem 0.6rem !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  border-radius: 7px !important;
  gap: 0.3rem !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.smart-subnav-strip .smart-dash-pill:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

.smart-subnav-strip .smart-dash-pill.active {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
  color: #FFFFFF !important;
}

.smart-subnav-strip .smart-dash-pill i,
.smart-subnav-strip .smart-dash-pill svg {
  width: 12px !important;
  height: 12px !important;
}

/* Header Action Buttons (Collector Hub & Collection) - Ultra-sleek and Minimalist */
#headerAccountBtn,
#headerCartBtn {
  padding: 0.28rem 0.65rem !important;
  border-radius: 8px !important;
  gap: 0.45rem !important;
}

/* Drawer & Modal Z-Index Lock — Ensures Cart Drawer floats above sticky header */
#cartDrawerBackdrop,
#addedToCartDrawerBackdrop,
#amazonSideMenuBackdrop,
#authModalBackdrop {
  z-index: 9998 !important;
}

#cartDrawer,
#addedToCartDrawer,
#amazonSideMenu,
#authModalCard {
  z-index: 9999 !important;
}

/* Products Nav Dropdown Menu & Click-Only Interactions */
.nav-products-dropdown {
  position: relative;
  display: inline-flex;
}

.nav-products-menu {
  display: none;
  pointer-events: auto;
}

/* Invisible bridge so mouse cursor never leaves hit area */
.nav-products-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
  pointer-events: auto;
}

/* Strictly Click-Only: .is-open is toggled only on button click, NOT hover */
.nav-products-dropdown.is-open .nav-products-menu {
  display: block !important;
  animation: navMenuFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.nav-products-dropdown.is-open #navProductsChevron,
.nav-products-dropdown.is-open .nav-products-chevron {
  transform: rotate(180deg);
}

@keyframes navMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Footer: Glass Dashboard Deck ────────────────────────────────────────── */

.smart-dash-footer {
  position: relative;
  background: radial-gradient(ellipse at 50% 0%, rgba(20, 35, 65, 0.45) 0%, rgba(8, 11, 18, 0.98) 60%, #04060A 100%);
  border-top: 1px solid rgba(80, 140, 255, 0.18);
  overflow: hidden;
}
/* Top-edge specular gleam on footer */
.smart-dash-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(80, 160, 255, 0.5) 25%, rgba(255, 255, 255, 0.4) 50%, rgba(80, 160, 255, 0.5) 75%, transparent 100%);
  pointer-events: none;
}

/* ── Back to Top Bar ─────────────────────────────────────────────────────── */

.smart-dash-backtotop-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.85rem 1.5rem;
  background: rgba(12, 18, 28, 0.7);
  border-bottom: 1px solid rgba(80, 140, 255, 0.12);
  color: rgba(160, 180, 210, 0.9);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer; text-decoration: none;
}
.smart-dash-backtotop-bar:hover {
  background: rgba(22, 34, 58, 0.9);
  color: #FFFFFF;
  border-bottom-color: rgba(80, 160, 255, 0.3);
}

/* ── Confidence Value Cards (Apple / Nike Standard) ───────────────────────── */

.footer-value-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.15rem;
  border-radius: 1rem;
  background: rgba(14, 20, 32, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.footer-value-card:hover {
  background: rgba(20, 30, 48, 0.65);
  border-color: rgba(80, 160, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 189, 248, 0.1);
}

/* ── VIP Drop Newsletter Dock ────────────────────────────────────────────── */

.footer-newsletter-dock {
  background: radial-gradient(ellipse at 20% 50%, rgba(56, 189, 248, 0.12) 0%, rgba(168, 85, 247, 0.08) 50%, rgba(8, 12, 20, 0.7) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ── Social Media Icon Buttons (Crisp Vectors with Brand Color Glow) ─────── */

/* ── Social Media Icon Buttons (Real Brand Colors by Default in 1 Row) ─── */

.social-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.social-btn:hover {
  transform: translateY(-2px) scale(1.08);
}

.social-insta {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  box-shadow: 0 3px 10px rgba(220, 39, 67, 0.35);
}
.social-insta:hover {
  box-shadow: 0 5px 18px rgba(220, 39, 67, 0.65);
}

.social-fb {
  background: #1877F2;
  box-shadow: 0 3px 10px rgba(24, 119, 242, 0.35);
}
.social-fb:hover {
  box-shadow: 0 5px 18px rgba(24, 119, 242, 0.65);
}

.social-x {
  background: #000000;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
}
.social-x:hover {
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 5px 18px rgba(255, 255, 255, 0.25);
}

.social-yt {
  background: #FF0000;
  box-shadow: 0 3px 10px rgba(255, 0, 0, 0.35);
}
.social-yt:hover {
  box-shadow: 0 5px 18px rgba(255, 0, 0, 0.65);
}

.social-pin {
  background: #E60023;
  box-shadow: 0 3px 10px rgba(230, 0, 35, 0.35);
}
.social-pin:hover {
  box-shadow: 0 5px 18px rgba(230, 0, 35, 0.65);
}

.social-wa {
  background: #25D366;
  box-shadow: 0 3px 10px rgba(37, 211, 102, 0.35);
}
.social-wa:hover {
  box-shadow: 0 5px 18px rgba(37, 211, 102, 0.65);
}

/* Backwards compatibility aliases */
.social-icon-btn { composes: social-btn; }
.social-icon-btn.instagram-btn { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; color: #fff !important; }
.social-icon-btn.facebook-btn { background: #1877F2 !important; color: #fff !important; }
.social-icon-btn.x-btn { background: #000000 !important; color: #fff !important; }
.social-icon-btn.youtube-btn { background: #FF0000 !important; color: #fff !important; }
.social-icon-btn.pinterest-btn { background: #E60023 !important; color: #fff !important; }
.social-icon-btn.whatsapp-btn { background: #25D366 !important; color: #fff !important; }

/* ── Footer Nav Links ────────────────────────────────────────────────────── */

.footer-nav-link {
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
  text-decoration: none;
}
.footer-nav-link:hover {
  color: #38bdf8;
  transform: translateX(4px);
}

/* ── Authentic Payment Cards (Crisp High-Contrast Official Logos) ────────── */

.pay-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 7px;
  border-radius: 4px;
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  cursor: default;
}
.pay-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(255, 255, 255, 0.25);
}
.pay-card svg {
  height: 13px;
  width: auto;
  display: block;
}

/* ========================================================================= */
/* 12. ANIMATED ORIGINAL BRAND LOGO (TRANSPARENT CIRCULAR BADGE - WOW EDITION)*/
/* ========================================================================= */

.aswhole-animated-logo-badge {
  position: relative;
  width: 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  user-select: none;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 640px) {
  .aswhole-animated-logo-badge {
    width: 56px;
    height: 56px;
  }
}

.aswhole-logo-canvas {
  width: 74px;
  height: 74px;
  display: block;
  pointer-events: none;
  background: transparent !important;
  /* Clean realistic shadow with NO background light/halo */
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.75));
  transition: filter 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 640px) {
  .aswhole-logo-canvas {
    width: 56px;
    height: 56px;
  }
}

.brand-logo-container:hover .aswhole-animated-logo-badge {
  transform: scale(1.08) rotate(-2deg);
}

.brand-logo-container:hover .aswhole-logo-canvas {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.9)) !important;
}

.brand-logo-container:active .aswhole-animated-logo-badge {
  transform: scale(0.96);
}

/* ========================================================================= */
/* BLACK STONE DESIGN SYSTEM & STONE-ENGRAVED TYPOGRAPHY                     */
/* Tactile stone carving, geometric uppercase, minimalist floating exhibits   */
/* ========================================================================= */

.stone-wall-bg {
  background-color: #07080B !important;
  background-image: 
    radial-gradient(ellipse at 88% 8%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.09) 30%, transparent 65%),
    linear-gradient(220deg, rgba(255, 255, 255, 0.10) 0%, rgba(10, 11, 15, 0.75) 35%, rgba(6, 7, 9, 0.95) 75%, #050608 100%),
    url('assets/gallery_wall_bg.jpg') !important;
  background-size: 100% 100%, 100% 100%, cover !important;
  background-position: top right, top right, center top !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* Debossed / Carved Black Stone Typography (Matches User's Reference Screenshot) */
.font-black-stone {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}

/* Authentic Carved Stone Inset Effect */
.stone-engraved-text {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #111317;
  text-shadow: 
    -2px -2px 3px rgba(0, 0, 0, 0.95),
    -1px -1px 1px rgba(0, 0, 0, 0.98),
     1px 1px 1.5px rgba(255, 255, 255, 0.24),
     2px 2px 2px rgba(255, 255, 255, 0.08);
}

/* Luminous Stone Headline (Crisp Architectural Elegance on Dark Concrete) */
.stone-headline {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #F8FAFC !important;
  text-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.95),
    0 4px 20px rgba(0, 0, 0, 0.8) !important;
}

.stone-subhead {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #94A3B8 !important;
}

/* Tactile Stone Debossed Badge / Filter Pill */
.stone-pill {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  background: rgba(15, 17, 23, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    inset 0 -1px 2px rgba(0, 0, 0, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.6);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.stone-pill:hover {
  background: rgba(26, 29, 38, 0.95);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.stone-pill.active {
  background: #FFFFFF !important;
  color: #07080B !important;
  border-color: #FFFFFF !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.45) !important;
}

/* Floating Magnet Exhibit (Directly on Concrete Wall - Zero Cluttered Boxes) */
.magnet-floating-exhibit {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.magnet-floating-exhibit:hover {
  transform: translateY(-6px);
}

/* Deep Carved Grey Stone Slab & 3D Debossed Lettering (Matches User Screenshot) */
.grey-stone-slab {
  background: radial-gradient(ellipse at 35% 25%, #2c2f38 0%, #1e2027 60%, #14151a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 
    inset 0 1px 1.5px rgba(255, 255, 255, 0.16),
    inset 0 -3px 8px rgba(0, 0, 0, 0.9),
    0 16px 36px rgba(0, 0, 0, 0.85) !important;
}

.stone-carved-heading {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: #121418 !important;
  text-shadow: 
    -2px -2px 3px rgba(0, 0, 0, 0.95),
    -1px -1px 1px rgba(0, 0, 0, 1),
     1px 1px 1.5px rgba(255, 255, 255, 0.30),
     2px 2px 2px rgba(255, 255, 255, 0.12) !important;
}

.stone-carved-badge {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: #121418 !important;
  background: #23262f !important;
  padding: 6px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 
    inset 1.5px 1.5px 3px rgba(0, 0, 0, 0.9),
    inset -1px -1px 2px rgba(255, 255, 255, 0.15),
    0 4px 10px rgba(0, 0, 0, 0.5) !important;
  text-shadow: 
    -1.5px -1.5px 2px rgba(0, 0, 0, 0.95),
     1px 1px 1px rgba(255, 255, 255, 0.25) !important;
}

/* ========================================================================= */
/* TACTILE CHISELED / DEBOSSED STONE TYPOGRAPHY ("BLACK STONE" & "THE END") */
/* ========================================================================= */

.stone-chiseled-heading {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #F1F5F9 !important;
  text-shadow: 
    -1px -1px 0px rgba(255, 255, 255, 0.25),
     1px 1px 2px rgba(0, 0, 0, 0.95),
     3px 4px 8px rgba(0, 0, 0, 0.95),
     5px 8px 16px rgba(0, 0, 0, 0.85) !important;
}

.stone-chiseled-subhead {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: #94A3B8 !important;
  text-shadow: 
    -1px -1px 0px rgba(0, 0, 0, 0.9),
     1px 1px 2px rgba(0, 0, 0, 0.95),
     2px 3px 6px rgba(0, 0, 0, 0.85) !important;
}

/* Product Titles (Under Magnets & Frames - "THE END" & "BLACK STONE" Inspired) */
.stone-product-title {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #E2E8F0 !important;
  text-shadow: 
    -1px -1px 0.5px rgba(255, 255, 255, 0.15),
     1px 1px 2px rgba(0, 0, 0, 0.95),
     2px 3px 6px rgba(0, 0, 0, 0.9) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.group:hover .stone-product-title,
.stone-product-title:hover {
  color: #FFFFFF !important;
  text-shadow: 
    -1px -1px 1px rgba(255, 255, 255, 0.35),
     1px 1px 3px rgba(0, 0, 0, 1),
     3px 5px 10px rgba(0, 0, 0, 1),
     0 0 16px rgba(255, 255, 255, 0.3) !important;
}








/* =========================================================================
   ASWHOLE WORDMARK (header logo)
   The letters, rings and "IDEAS" are the original artwork
   (assets/logo-letters.png) with the orb cut out. The original ball
   (assets/logo-orb.png) sits on top and turns continuously in one direction.
   The ball is 10% smaller than in the artwork and stays centred on the same
   point. In the 630 x 302 px artwork the orb is at left 207px, top 3px,
   size 296px (centre 355px, 151px). At 90% size it is 266.4px, so:
     left = (355 - 133.2) / 630 = 35.206%
     top  = (151 - 133.2) / 302 = 5.894%
     size = 266.4 / 630        = 42.286% of the width
   ========================================================================= */
.asw-wordmark {
  --asw-wm-h: 108px;
  position: relative;
  display: inline-block;
  height: var(--asw-wm-h);
  aspect-ratio: 630 / 302;
  margin-block: -6px;             /* slightly taller than the header row; uses part of the header's padding */
  line-height: 0;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.asw-wordmark .asw-wm-letters {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
  transition: filter 0.35s ease;
  pointer-events: none;
}
.asw-wordmark .asw-wm-orb {
  position: absolute;
  left: 35.206%;
  top: 5.894%;
  width: 42.286%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: url('assets/logo-orb.png') center / 100% 100% no-repeat;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.3);
  animation: aswWmSpin 20s linear infinite;
  transition: box-shadow 0.35s ease, scale 0.35s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
.asw-wordmark:hover .asw-wm-orb {
  scale: 1.06;
  box-shadow: 0 0 28px rgba(192, 132, 252, 0.6);
}
.asw-wordmark:hover .asw-wm-letters {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 8px rgba(192, 132, 252, 0.35));
}
.asw-wordmark:focus-visible { outline: none; border-radius: 12px; box-shadow: 0 0 0 2px rgba(192, 132, 252, 0.6); }
/* One direction only, never reverses */
@keyframes aswWmSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .asw-wordmark { --asw-wm-h: 72px; margin-block: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .asw-wordmark .asw-wm-orb { animation: none; }
}

/* Footer variant of animated wordmark */
.asw-wordmark-footer {
  --asw-wm-h: 52px;
  margin-block: 0;
}
@media (max-width: 640px) {
  .asw-wordmark-footer {
    --asw-wm-h: 42px;
    margin-block: 0;
  }
}

/* ========================================================================= */
/* HERO STONE ENGRAVED TYPOGRAPHY ("DESIGN YOUR UNIVERSE")                   */
/* Matches Deep Chiseled "BLACK STONE" Reference with Realistic 3D Inset     */
/* ========================================================================= */
.stone-engraved-hero,
.stone-engraved-hero span {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.035em !important;
  line-height: 0.94 !important;
  color: #222530 !important;
  text-shadow:
    0px -1px 0.5px rgba(0, 0, 0, 0.95),
    -1px 0px 1px rgba(0, 0, 0, 0.9),
    0px 2px 2px rgba(0, 0, 0, 1),
    0px 4px 6px rgba(0, 0, 0, 0.95),
    0px 8px 14px rgba(0, 0, 0, 0.9),
    0px 1px 0px rgba(255, 255, 255, 0.18),
    1px 1px 0px rgba(255, 255, 255, 0.12) !important;
  user-select: none;
  transition: all 0.3s ease;
}

/* ========================================================================= */
/* LUMA A2 - CONTINUOUS LIQUID WATER FLOW GRADIENT                           */
/* Exact Color Palette & Fluid Motion from the Rotating ASWHOLE IDEAS Orb     */
/* ========================================================================= */
.luma-liquid-hero {
  font-family: 'Space Grotesk', 'Archivo Black', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  display: inline-flex !important;
  align-items: center !important;
  /* Seamless looping liquid gradient in the exact orb palette */
  background: linear-gradient(
    90deg,
    #a855f7 0%,
    #38bdf8 15%,
    #e0f2fe 25%,
    #06b6d4 38%,
    #c084fc 50%,
    #ffffff 58%,
    #38bdf8 68%,
    #f59e0b 80%,
    #9333ea 92%,
    #a855f7 100%
  ) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: lumaWaterContinuous 4s linear infinite !important;
  filter: drop-shadow(0 0 18px rgba(168, 85, 247, 0.75))
          drop-shadow(0 0 36px rgba(56, 189, 248, 0.55)) !important;
  position: relative;
  user-select: none;
}

@keyframes lumaWaterContinuous {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* 4X Enlarged Hero 3D Showcase Container - Topmost Layer (z-50) */
#hero3dContainer {
  width: min(640px, 56vh) !important;
  height: min(640px, 56vh) !important;
  max-width: 90vw !important;
  aspect-ratio: 1 / 1 !important;
  position: relative !important;
  z-index: 50 !important;
  isolation: isolate !important;
  overflow: visible !important;
}

/* Immediate Zero-Delay Static Product Poster (Instantly visible on first HTML paint) */
.hero-3d-poster {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  height: 87.0% !important;
  aspect-ratio: 2.68 / 3.80 !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 10 !important;
  opacity: 1;
  transition: opacity 0.35s ease-out;
}

/* Extended 3D Canvas - Zero Clipping at any mouse rotation, overlays top and floor on topmost layer */
#hero3dCanvas {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(760px, 94vw) !important;
  height: min(820px, 78vh) !important;
  display: block !important;
  pointer-events: auto !important;
  z-index: 20 !important;
  opacity: 0;
  transition: opacity 0.35s ease-in;
}

#hero3dCanvas.is-ready {
  opacity: 1 !important;
}

/* ========================================================================= */
/* HERO FEATURE SYMBOLS DOCK (RIGHT SIDE)                                    */
/* Subtle, compact floating minimal frosted icons matching website theme      */
/* ========================================================================= */
.hero-feature-dock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

/* Hero Mini Rocker Switch (LED POWER) */
.hero-switchboard-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
  z-index: 30;
}

.hero-switchboard-wrap .pdp-switchboard-plate {
  transform: scale(0.60);
  transform-origin: center center;
  margin: -10px 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.hero-switchboard-wrap:hover .pdp-switchboard-plate {
  transform: scale(0.65);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.hero-switchboard-wrap:hover .hero-feature-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.hero-feature-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 639px) {
  .hero-feature-dock {
    gap: 0.5rem;
  }
  .hero-feature-btn {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
}

.hero-feature-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8), 0 0 14px rgba(255, 255, 255, 0.15);
}

.hero-feature-btn:active {
  transform: scale(0.94);
}

/* Tooltip Badge (pops out to the left towards the frame with a pointer arrow) */
.hero-feature-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  opacity: 0;
  pointer-events: none;
  background: rgba(14, 16, 22, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #f1f5f9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 5px 11px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.9), 0 0 12px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 60;
}

@media (max-width: 639px) {
  .hero-feature-tooltip {
    font-size: 10px;
    padding: 4px 8px;
    right: calc(100% + 8px);
  }
}

/* Little pointer arrow on tooltip pointing to the icon */
.hero-feature-tooltip::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  background: rgba(14, 16, 22, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  border-right: 1px solid rgba(255, 255, 255, 0.20);
}

.hero-feature-btn:hover .hero-feature-tooltip,
.hero-feature-btn:focus .hero-feature-tooltip,
.hero-feature-tooltip.tooltip-force-show {
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) !important;
}

/* 3D Hero Mouse Interaction & Spin Control Widget (Theme-matched, positioned right side) */
.hero-rotation-widget {
  position: absolute;
  bottom: 24px;
  right: -130px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 5px 4px 10px;
  border-radius: 9999px;
  background: linear-gradient(145deg, rgba(24, 27, 36, 0.88), rgba(12, 14, 20, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 55;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-rotation-widget:hover {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.hero-rotation-cue {
  display: inline-flex;
  align-items: center;
  gap: 5.5px;
}

.hero-rotation-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.hero-rotation-widget:hover .hero-rotation-text {
  color: #f1f5f9;
}

.hero-rotation-divider {
  width: 1px;
  height: 11px;
  background: rgba(255, 255, 255, 0.14);
  margin: 0 1px;
}

.hero-spin-toggle-btn {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  cursor: pointer;
  outline: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-spin-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}

.hero-spin-toggle-btn:active {
  transform: scale(0.92);
}

.hero-spin-toggle-btn.is-stopped {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.40);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.18);
}

.hero-spin-toggle-btn.is-stopped .spin-icon-pause {
  display: none !important;
}

.hero-spin-toggle-btn.is-stopped .spin-icon-play {
  display: block !important;
}

.hero-spin-toggle-btn.is-playing .spin-icon-pause {
  display: block !important;
}

.hero-spin-toggle-btn.is-playing .spin-icon-play {
  display: none !important;
}

@media (min-width: 1280px) {
  .hero-rotation-widget {
    right: -155px;
  }
}

@media (max-width: 1024px) {
  .hero-rotation-widget {
    right: -30px;
    bottom: 16px;
  }
}

@media (max-width: 768px) {
  .hero-rotation-widget {
    right: 8px;
    bottom: 8px;
  }
}

/* Hero 'See More' Discreet Link (Small, subtle, zero distraction, matches Intro typography) */
.hero-see-more-link {
  text-decoration: none;
  user-select: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.20em;
  opacity: 0.85;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-see-more-link:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}

.hero-see-more-link:active {
  transform: translateY(0) scale(0.97);
}





/* ========================================================================= */
/* FLIPKART OFFICIAL ARCHITECTURE FOOTER STYLING                            */
/* ========================================================================= */
.flipkart-official-footer {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  user-select: none;
}

/* ========================================================================= */
/* GOLD-STANDARD E-COMMERCE FOOTER (STONE WALL INTEGRATED ARCHITECTURE)       */
/* ========================================================================= */
.flipkart-official-footer {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  user-select: none;
  position: relative;
  background: linear-gradient(180deg, 
    transparent 0%, 
    rgba(7, 8, 11, 0.05) 12%, 
    rgba(7, 8, 11, 0.18) 28%, 
    rgba(7, 8, 11, 0.42) 48%, 
    rgba(7, 8, 11, 0.70) 68%, 
    rgba(6, 7, 10, 0.90) 86%, 
    #07080B 100%
  ) !important;
  border-top: none !important;
}

.asw-wordmark-footer-hero {
  --asw-wm-h: 136px !important;
  margin-block: 0 !important;
}

@media (max-width: 640px) {
  .asw-wordmark-footer-hero {
    --asw-wm-h: 92px !important;
    margin-block: 0 !important;
  }
}

.flipkart-studio-topbar {
  background: transparent !important;
  border-bottom: none !important;
}

.flipkart-deck-bg {
  background: transparent !important;
}

.flipkart-column-title {
  color: #9ca3af;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  margin-top: 0;
}

.flipkart-link {
  color: #e5e7eb;
  font-size: 12px;
  line-height: 22px;
  display: block;
  text-decoration: none;
  font-weight: 400;
  transition: color 0.15s ease;
}

.flipkart-link:hover {
  text-decoration: underline;
  color: #ffffff;
}

.flipkart-address-text {
  color: #d1d5db;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
}


/* Position site guide orb cleanly above the gold-standard footer bar */
#aswGuideOrb {
  bottom: 84px !important;
}

/* ========================================================================= */
/* KINETIC 3D MOUNTAIN TYPOGRAPHY (WALLPAPER INTEGRATED, ZERO-BOX)           */
/* ========================================================================= */
.asw-kinetic-typography-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  user-select: none;
  overflow: hidden;
}

.asw-kinetic-canvas {
  display: block;
  width: 100%;
  max-width: 1360px;
  height: auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ========================================================================= */
/* COMPREHENSIVE MOBILE RESPONSIVE LAYOUT (< 768px)                          */
/* Ensures 100% of header, hero, studio, and catalog elements are visible    */
/* ========================================================================= */
@media (max-width: 767px) {
  /* 1. Sticky Header: 2-tier layout so Logo, Cart, Sign In, Search & Nav all fit 100% */
  header.smart-dash-header {
    background: linear-gradient(180deg, rgba(7, 8, 11, 0.98) 0%, rgba(7, 8, 11, 0.94) 88%, rgba(7, 8, 11, 0.86) 100%) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  header.smart-dash-header > div {
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 10px 8px 10px !important;
    gap: 6px 8px !important;
  }

  /* Top-Left: Brand Wordmark Logo */
  header.smart-dash-header > div > div:first-child {
    order: 1 !important;
    flex: 0 0 auto !important;
  }

  header.smart-dash-header .asw-wordmark {
    --asw-wm-h: 50px !important;
    margin-block: -2px !important;
  }

  /* Top-Right: Cart & Collector Hub (Sign In) Actions */
  header.smart-dash-header > div > div:last-child {
    order: 2 !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Make "Collector Hub / Sign In" text visible on mobile too */
  #headerAccountBtn > div.hidden {
    display: block !important;
  }
  #headerAccountBtn > div.hidden > span:first-child {
    font-size: 7px !important;
    line-height: 1.1 !important;
  }
  #headerAccountBtn > div.hidden > span:last-child {
    font-size: 10.5px !important;
    line-height: 1.15 !important;
  }

  #userAccountDropdown {
    right: 0 !important;
    left: auto !important;
    width: min(280px, 92vw) !important;
  }

  /* Row 2 & 3: Full-Width Search Bar + Compact Wrapped Navigation Pills */
  header.smart-dash-header > div > div:nth-child(2) {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
  }

  .smart-search-cockpit {
    width: 100% !important;
  }

  #searchCategorySelect {
    max-width: 98px !important;
    font-size: 11px !important;
    padding-left: 6px !important;
    padding-right: 4px !important;
  }

  #globalSearchInput {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    font-size: 12px !important;
    padding: 5px 8px !important;
  }

  .smart-subnav-strip {
    width: 100% !important;
  }

  .smart-subnav-strip > div {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .smart-subnav-strip .smart-dash-pill {
    padding: 3px 7px !important;
    font-size: 10.5px !important;
  }

  .nav-products-menu {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(250px, 90vw) !important;
  }

  /* 2. Hero Section on Main Hub (#heroStageCanvas): Unobstructed Intro, 3D Frame, Switch & Floor */
  #heroStageCanvas {
    min-height: auto !important;
    padding-top: 6px !important;
    padding-bottom: 18px !important;
  }

  #heroIntroLumaStage {
    position: relative !important;
    top: auto !important;
    inset: auto !important;
    width: 100% !important;
    padding: 4px 6px 8px 6px !important;
    z-index: 40 !important;
  }

  #heroIntroLumaStage > div {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  #heroIntroLumaStage h1 {
    font-size: 2rem !important;
    margin-top: 2px !important;
  }

  #heroIntroLumaStage > div > div.mt-3 {
    margin-top: 0 !important;
  }

  #hero3dContainer {
    width: min(265px, 68vw) !important;
    height: min(335px, 44vh) !important;
    aspect-ratio: auto !important;
    margin-left: 8px !important;
    margin-right: auto !important;
    transform: none !important;
  }

  #hero3dCanvas {
    width: min(295px, 75vw) !important;
    height: min(365px, 48vh) !important;
  }

  #heroFeaturesStage {
    position: absolute !important;
    top: 68px !important;
    right: 6px !important;
    left: auto !important;
    width: auto !important;
    padding: 0 !important;
    z-index: 60 !important;
  }

  .hero-rotation-widget {
    left: 50% !important;
    right: auto !important;
    bottom: -12px !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important;
  }

  #heroFloorStage {
    margin-top: 22px !important;
    padding: 0 2px !important;
  }

  /* 3. Customizer 3D Container & PDP Studio Bars on Mobile */
  #customizer3dContainer {
    width: 100% !important;
    max-width: 100% !important;
    height: 360px !important;
  }

  #customizer3dCanvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  #backlightStudioBar,
  #magnetStudioBar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  #backlightStudioBar > div:last-child,
  #magnetStudioBar > div:last-child {
    width: 100% !important;
    display: flex !important;
  }

  #backlightStudioBar > div:last-child > button,
  #magnetStudioBar > div:last-child > button {
    flex: 1 1 50% !important;
    text-align: center !important;
  }
}