/*
  Pastel iOS-style theme: soft, playful, glassy
  - Pastel surfaces and gradients (pink, lavender, sky, mint, peach)
  - iOS-like glass/blur, subtle shadows, rounded shapes
  - Inter typography, gentle motion
*/

:root {
  /* Brand mapped to pastel spectrum so existing uses stay themed */
  --brand-50: #fff1f9;
  /* pastel pink 50 */
  --brand-100: #ffe4f3;
  /* pastel pink 100 */
  --brand-500: #f9a8d4;
  /* pink 300 */
  --brand-600: #f472b6;
  /* pink 400 */
  --brand-700: #fb8ac2;
  /* deeper playful pink */
  --brand-800: #fda4af;
  /* rosy accent */

  /* Inks: slightly softer, still accessible */
  --ink-900: #1f2937;
  --ink-700: #374151;
  --ink-600: #4b5563;
  --ink-500: #6b7280;
  --ink-400: #9ca3af;

  /* Surfaces */
  --surface: #ffffff;
  --surface-muted: #fff7fb;
  /* pinkish white */

  /* iOS-like glass tokens */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.65);
  --shadow-soft: 0 12px 40px rgba(2, 6, 23, 0.08), 0 2px 10px rgba(2, 6, 23, 0.04);

  /* Layout & type rhythm (UI polish) */
  --space-section-y: clamp(2.5rem, 5vw, 3.5rem);
  --space-card-pad: 1rem;
  --leading-tight: 1.22;
  --leading-normal: 1.55;
  --card-border: rgba(15, 23, 42, 0.07);
  --card-surface: rgba(255, 255, 255, 0.88);

  /* Playful pastel background blobs (more pink forward) - OLD BACKGROUND - COMMENTED */
  /* --bg:
    radial-gradient(120rem 80rem at 8% -10%, #ffe0f2 0%, #fff6fb 55%) no-repeat,
    radial-gradient(100rem 70rem at 115% -5%, #ffeaf6 0%, #ffffff 60%) no-repeat,
    radial-gradient(80rem 60rem at -10% 115%, #ffe3f3 0%, #ffffff 65%) no-repeat,
    #fff7fb; */
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

/* Aurora Background Animation */
@keyframes aurora-border {

  0%,
  100% {
    border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%;
  }

  50% {
    border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
  }
}

@keyframes aurora-1 {

  0%,
  100% {
    top: 0;
    right: 0;
  }

  50% {
    top: 50%;
    right: 50%;
  }
}

@keyframes aurora-2 {

  0%,
  100% {
    top: 0;
    left: 0;
  }

  60% {
    top: 70%;
    left: 50%;
  }
}

@keyframes aurora-3 {

  0%,
  100% {
    bottom: 0;
    left: 0;
  }

  40% {
    bottom: 50%;
    left: 30%;
  }
}

@keyframes aurora-4 {

  0%,
  100% {
    bottom: 0;
    right: 0;
  }

  50% {
    bottom: 20%;
    right: 20%;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: var(--leading-normal);
  color: var(--ink-900);

  /* ==========================================
     OLD BACKGROUND - COMMENTED OUT
     ========================================== */
  /* background: #ffffff; Remove aurora gradient to reveal canvas */

  /* ==========================================
     NEW IRIDESCENCE BACKGROUND from ReactBits.dev
     CSS implementation of iridescent gradient effect
     Reference: https://www.reactbits.dev/backgrounds/iridescence
     Creates a vibrant, multi-colored iridescent effect using radial gradients
     ========================================== */
  /* PERFORMANCE: Reduced number of gradients from 7 to 5 for better FPS */
  background:
    radial-gradient(at 40% 20%, hsla(228, 100%, 75%, 0.3) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 0.25) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 0.25) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(340, 100%, 76%, 0.25) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(22, 100%, 77%, 0.25) 0px, transparent 50%);
  background-color: #ffffff;
  /* PERFORMANCE: Changed from fixed to scroll - fixed attachment is very expensive */
  /* background-attachment: fixed; REMOVED for performance */
  min-height: 100vh;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-x: hidden;
}

/* Remove aurora pseudo-elements completely */
body::before {
  content: none !important;
  display: none !important;
}

body::after {
  content: none !important;
  display: none !important;
}

/* Hide any remaining aurora orb elements if present */
.aurora-orb,
.aurora-orb-1,
.aurora-orb-2,
.aurora-orb-3,
.aurora-orb-4 {
  display: none !important;
}


img,
video {
  max-width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  display: block;
}

/* Force product images to be visible */
.product-card img,
.product-media img,
.product-detail img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Image lazy loading optimization */
img[loading="lazy"] {
  opacity: 1;
  /* Show immediately, transition only on load */
  transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Performance: will-change - REMOVED for better performance */
/* PERFORMANCE: will-change increases memory usage and can cause issues */
/* Only use will-change when absolutely necessary and remove after animation */
/* .product-card,
.btn,
.cart-fab {
  will-change: transform;
} */

.container {
  width: min(1120px, 92vw);
  max-width: 100%;
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 24px);
  padding-right: clamp(16px, 4vw, 24px);
}

.main,
.product-detail,
.product-detail-grid,
.product-media-section,
.product-info-section {
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 768px) {
  .container {
    width: 100%;
    padding-left: clamp(14px, 4vw, 20px);
    padding-right: clamp(14px, 4vw, 20px);
  }
}

/* iOS glass utility */
.glass {
  background: var(--glass-bg);
  /* PERFORMANCE: Removed backdrop-filter - causes severe FPS drops */
  /* backdrop-filter: saturate(120%) blur(8px); REMOVED for performance */
  /* -webkit-backdrop-filter: saturate(120%) blur(8px); REMOVED for performance */
  border: 1px solid var(--glass-border);
  /* PERFORMANCE: Reduced box-shadow for better performance */
  box-shadow: 0 4px 16px rgba(2, 6, 23, .08);
  /* Single, simpler shadow */
  /* PERFORMANCE: GPU acceleration REMOVED - causes performance issues */
  /* transform: translateZ(0); REMOVED for performance */
  /* will-change: contents; REMOVED - increases memory usage */
}

/* Utility grid */
.grid {
  display: grid;
  gap: clamp(1.125rem, 2.5vw, 1.5rem);
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  /* Smaller gap in forms */
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Grid in modals - ensure no overflow */
.modal .grid-2 {
  gap: 16px;
}

/* Field containers in modals */
.modal .field {
  min-width: 0;
  width: 100%;
  overflow: visible;
}

@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {

  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* In modals, use smaller gap on tablets */
  .modal .grid-2 {
    gap: 12px;
  }
}

@media (max-width: 520px) {

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* On mobile, use reasonable gap */
  .modal .grid-2 {
    gap: 16px;
  }

  .modal .grid-2 .field {
    margin-bottom: 16px;
    width: 100%;
    min-width: 0;
    overflow: visible;
  }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  /* PERFORMANCE: Removed backdrop-filter completely for 165 FPS */
  /* backdrop-filter: saturate(120%) blur(8px); REMOVED for maximum FPS */
  /* -webkit-backdrop-filter: saturate(120%) blur(8px); REMOVED for maximum FPS */
  background: rgba(255, 255, 255, .95);
  /* Solid background instead */
  border-bottom: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 8px 24px rgba(2, 6, 23, .06);
  /* GPU acceleration */
  /* PERFORMANCE: GPU acceleration REMOVED */
  /* transform: translateZ(0); REMOVED for performance */
  /* will-change: background-color; REMOVED - increases memory usage */
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-900);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .2px;
  flex-shrink: 0;
  min-width: 0;
  justify-content: flex-start;
}

.brand-mark {
  height: auto;
  max-height: 52px;
  width: auto;
  max-width: 250px;
  object-fit: contain;
  display: block;
}

.brand-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: 0.3px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 1;
  min-width: 0;
  justify-content: flex-end;
}

.nav a {
  color: var(--ink-700);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  line-height: normal;
  display: inline-flex;
  align-items: center;
}

.nav a:hover {
  color: var(--ink-900);
}

/* Mobile Navigation - Fixed layout */
@media (max-width: 768px) {
  .header-inner {
    flex-wrap: nowrap;
    gap: 12px;
    height: 56px;
    padding: 0 12px;
  }

  .brand {
    flex-shrink: 0;
    min-width: 0;
    max-width: 60%;
  }

  .brand-mark {
    max-height: 40px;
    max-width: 180px;
    width: auto;
    height: auto;
  }

  .nav {
    flex-wrap: nowrap;
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
    justify-content: flex-end;
    overflow: visible;
  }

  .nav a {
    font-size: 0.875rem;
    white-space: nowrap;
    padding: 8px 10px 4px; /* Slight shift to lower baseline visually */
    flex-shrink: 0;
  }

  .nav a.btn {
    padding: 8px 14px;
    font-size: 0.875rem;
    min-width: auto;
    margin-top: 1px; /* Align with nav links baseline */
  }
}

/* Extra small mobile - very tight space */
@media (max-width: 480px) {
  .header-inner {
    gap: 8px;
    height: 52px;
    padding: 0 8px;
  }

  .brand {
    max-width: 55%;
  }

  .brand-mark {
    max-height: 36px;
    max-width: 150px;
  }

  .nav {
    gap: 6px;
  }

  .nav a {
    font-size: 0.8125rem;
    padding: 6px 8px;
  }

  .nav a.btn {
    padding: 7px 12px;
    font-size: 0.8125rem;
  }
}

.btn-small {
  padding: 10px 14px;
  font-size: .92rem;
  border-radius: 12px;
}

/* Buttons */
.btn {
  appearance: none;
  border: 0;
  border-radius: 16px;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease;
  box-shadow: 0 10px 24px rgba(2, 6, 23, .08);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  color: #fff;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-700) 55%, var(--brand-500));
}

/* Product card buttons specific styling */
.product-actions .btn-primary {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  color: white;
  border: none;
  font-weight: 600;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(236, 72, 153, .25);
}

.product-actions .btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-700), var(--brand-800));
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(236, 72, 153, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .35), 0 8px 24px rgba(17, 24, 39, .12);
}

.btn-cta {
  color: #fff;
  background: linear-gradient(90deg, var(--brand-700), var(--brand-500) 60%, var(--brand-600));
  padding: 14px 28px;
  font-size: 1.05rem;
}

.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(236, 72, 153, .25);
}

.btn-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 140% at 0% 0%, rgba(255, 255, 255, .45), transparent 60%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* Titles */
.section-title {
  font-weight: 800;
  text-align: center;
  font-size: clamp(2rem, 3.8vw, 3rem);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  margin: 0 0 0.5rem 0;
  background: linear-gradient(90deg, #f472b6, #a78bfa, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-subtitle {
  text-align: center;
  color: var(--ink-600);
  max-width: 38rem;
  margin: 0 auto clamp(1.25rem, 3vw, 2rem);
  font-size: clamp(0.95rem, 1.5vw, 1.0625rem);
  line-height: var(--leading-normal);
  font-weight: 500;
}

/* HERO */
.hero {
  position: relative;
  min-height: 80svh;
  display: grid;
  place-items: center;
  padding: 12px 16px 8px;
  overflow: visible;
  /* OLD HERO BACKGROUND - COMMENTED OUT */
  /* Make hero background more transparent so lentils are visible */
  /* background:
    radial-gradient(circle at 30% 70%, rgba(255,182,193,0.18) 0%, transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(255,218,185,0.12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2)); */

  /* NEW: Hero inherits iridescence background from body, just add slight overlay */
  /* PERFORMANCE: Removed backdrop-filter blur - too expensive for fullscreen */
  background: rgba(255, 255, 255, 0.35);
  /* backdrop-filter: blur(1px); REMOVED for performance */
  /* -webkit-backdrop-filter: blur(1px); REMOVED for performance */

  /* GPU acceleration and performance optimizations */
  /* PERFORMANCE: GPU acceleration REMOVED */
  /* transform: translateZ(0); REMOVED for performance */
  /* will-change: contents; REMOVED - increases memory usage */
  /* isolation: isolate; REMOVED for performance */

  z-index: 2;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 92vw);
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  width: 100%;
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 8px;
}


.hero-logo-bg {
  display: flex;
  justify-content: center;
}

.hero-bg-logo {
  width: min(400px, 40vw);
  height: auto;
  border-radius: 32px;
  /* PERFORMANCE: Reduced shadows - using only essential ones */
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.7),
    0 0 0 4px rgba(255, 255, 255, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.1);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
  position: relative;
  animation: float 6s ease-in-out infinite;
  /* GPU acceleration */
  /* PERFORMANCE: GPU acceleration REMOVED */
  /* transform: translateZ(0); REMOVED for performance */
  /* will-change: transform; REMOVED - increases memory usage */
  /* backface-visibility: hidden; REMOVED for performance */
}

@keyframes float {

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

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

.hero-bg-logo:hover {
  transform: scale(1.02);
}

.hero-text {
  text-align: center;
  max-width: clamp(500px, 90vw, 700px);
  margin: 0 auto;
  position: relative;
  z-index: 10;
  margin-top: 8px;
}

.hero-title {
  font-weight: 800;
  font-size: clamp(2.4rem, 5.6vw, 4.2rem);
  line-height: 1.08;
  color: var(--ink-900);
  margin: 0 0 12px 0;
}

.hero-logo {
  margin: 0 0 12px 0;
  display: flex;
  justify-content: flex-start;
}

.hero-logo-img {
  height: clamp(3rem, 6vw, 4.5rem);
  width: auto;
  max-width: 100%;
}

.hero-subtitle {
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--ink-600);
  margin: 0 0 12px 0;
  line-height: 1.6;
  font-weight: 500;
}

.hero-actions {
  display: flex;
  gap: clamp(16px, 3vw, 24px);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
}

.btn-secondary {
  color: var(--ink-700);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(15, 23, 42, .12);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(2, 6, 23, .15);
}

.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-photo {
  position: relative;
  width: min(600px, 90vw);
  height: auto;
  max-height: 40vh;
  border-radius: 40px;
  overflow: visible;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-portrait {
  width: 100%;
  height: auto;
  max-height: 40vh;
  object-fit: contain;
  object-position: center center;
  border-radius: 40px;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  z-index: 2;
  position: relative;
  background: white;
  animation: float 8s ease-in-out infinite reverse;
}

.photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(249, 168, 212, .2), rgba(216, 180, 254, .2));
  color: var(--ink-600);
  text-align: center;
  padding: 32px;
}

.lentilka-icon {
  font-size: 4rem;
  margin-bottom: 16px;
  opacity: 0.7;
}

.photo-placeholder p {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

/* VIDEO */
.video-section {
  min-height: auto;
  display: grid;
  place-items: center;
  padding: clamp(64px, 10vw, 96px) 16px;
  transition: opacity 0.4s ease;
}

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 14px;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(2, 6, 23, .12);
  border: 2px solid rgba(244, 114, 182, 0.2);
  background: rgba(255, 255, 255, 0.95);
  /* Removed heavy backdrop-filter for better performance */
  /* PERFORMANCE: GPU acceleration REMOVED */
  /* transform: translateZ(0); REMOVED for performance */
  /* backface-visibility: hidden; REMOVED for performance */
  /* isolation: isolate; REMOVED for performance */
}

.video-wrapper::before {
  content: '';
  display: block;
  padding-top: 56.25%;
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Performance optimizations */
  /* PERFORMANCE: GPU acceleration REMOVED */
  /* transform: translateZ(0); REMOVED for performance */
  /* backface-visibility: hidden; REMOVED for performance */
}

.video-note {
  text-align: center;
  color: var(--ink-500);
}

/* Microinteractions */
.nav a {
  position: relative;
}

.nav a::after {
  display: none !important;
}

.nav a:hover::after {
  display: none !important;
}

/* PERFORMANCE: will-change REMOVED */
/* .btn { will-change: transform, box-shadow; } REMOVED - increases memory usage */
/* .btn:active transform removed for cleaner header */

.site-header {
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
  backdrop-filter: none !important;
  animation: none !important;
  transform: none !important;
}

.site-header.scrolled {
  background: rgba(255, 255, 255, .85);
  border-color: rgba(15, 23, 42, .12);
}

/* ABOUT */
.about-section {
  padding: 48px 0;
  /* OLD BACKGROUND - COMMENTED OUT */
  /* background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,247,251,1)); */

  /* NEW: Transparent to show iridescence background */
  /* PERFORMANCE: Removed backdrop-filter - causes severe FPS drops */
  background: rgba(255, 255, 255, 0.6);
  /* Increased opacity for better visibility */
  /* backdrop-filter: blur(2px); REMOVED for performance */
  /* -webkit-backdrop-filter: blur(2px); REMOVED for performance */
}

.about-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: start;
}

.about-intro {
  font-size: 1.2rem;
  color: var(--ink-700);
  margin-bottom: 32px;
  line-height: 1.6;
}

.about-features {
  display: grid;
  gap: 24px;
}

.feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  /* PERFORMANCE: Removed backdrop-filter and increased background opacity */
  background: rgba(255, 255, 255, 0.95);
  /* Increased opacity instead of backdrop-filter */
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .08);
  /* Changed to simpler border */
  /* PERFORMANCE: backdrop-filter REMOVED - causes severe FPS drops */
  /* backdrop-filter: blur(6px); REMOVED for performance */
  /* -webkit-backdrop-filter: blur(6px); REMOVED for performance */
  /* PERFORMANCE: GPU acceleration REMOVED - causes performance issues */
  /* transform: translateZ(0); REMOVED for performance */
  /* will-change: contents; REMOVED - increases memory usage */
  /* PERFORMANCE: Reduced box-shadow for better performance */
  box-shadow: 0 4px 16px rgba(2, 6, 23, .08);
  /* Single, simpler shadow */
}

.feature-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.feature h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 8px 0;
}

.feature p {
  font-size: 0.95rem;
  color: var(--ink-600);
  margin: 0;
  line-height: 1.5;
}

.about-stats {
  display: grid;
  gap: 24px;
}

.stat {
  text-align: center;
  padding: 24px;
  /* PERFORMANCE: Removed backdrop-filter and increased background opacity */
  background: rgba(255, 255, 255, 0.95);
  /* Increased opacity instead of backdrop-filter */
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .08);
  /* Changed to simpler border */
  /* PERFORMANCE: backdrop-filter REMOVED - causes severe FPS drops */
  /* backdrop-filter: blur(6px); REMOVED for performance */
  /* -webkit-backdrop-filter: blur(6px); REMOVED for performance */
  /* PERFORMANCE: Reduced box-shadow for better performance */
  box-shadow: 0 4px 16px rgba(2, 6, 23, .08);
  /* Single, simpler shadow */
  /* PERFORMANCE: GPU acceleration REMOVED - causes performance issues */
  /* transform: translateZ(0); REMOVED for performance */
  /* will-change: contents; REMOVED - increases memory usage */
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--brand-600);
  margin-bottom: 8px;
}

.stat-label {
  font-size: 0.95rem;
  color: var(--ink-600);
  font-weight: 600;
}

/* SONGS */
.songs-section {
  padding: 48px 0;
  /* OLD BACKGROUND - COMMENTED OUT */
  /* background: linear-gradient(180deg, rgba(255,247,251,1), rgba(255,255,255,1)); */

  /* NEW: Transparent to show iridescence background */
  /* PERFORMANCE: Removed backdrop-filter - causes severe FPS drops */
  background: rgba(255, 255, 255, 0.6);
  /* Increased opacity for better visibility */
  /* backdrop-filter: blur(2px); REMOVED for performance */
  /* -webkit-backdrop-filter: blur(2px); REMOVED for performance */
}

.songs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.song-card {
  /* PERFORMANCE: Removed backdrop-filter and increased background opacity */
  background: rgba(255, 255, 255, 0.95);
  /* Increased opacity instead of backdrop-filter */
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .08);
  /* Changed to simpler border */
  /* PERFORMANCE: backdrop-filter REMOVED - causes severe FPS drops */
  /* backdrop-filter: blur(6px); REMOVED for performance */
  /* -webkit-backdrop-filter: blur(6px); REMOVED for performance */
  /* PERFORMANCE: Faster transition */
  transition: box-shadow 0.2s ease;
  /* PERFORMANCE: GPU acceleration REMOVED */
  /* transform: translateZ(0); REMOVED for performance */
  /* will-change: transform; REMOVED - increases memory usage */
  /* PERFORMANCE: Reduced box-shadow for better performance */
  box-shadow: 0 4px 16px rgba(2, 6, 23, .08);
  /* Single, simpler shadow */
}

.song-card:hover {
  /* PERFORMANCE: Removed transform - too expensive */
  /* transform: translateY(-4px); REMOVED for performance */
  box-shadow: 0 12px 28px rgba(2, 6, 23, .12);
  /* Reduced shadow */
}

.song-cover {
  position: relative;
  height: 160px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.play-button {
  font-size: 3rem;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.song-card:hover .play-button {
  opacity: 1;
}

.song-title {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  font-weight: 700;
  font-size: 1.1rem;
}

.song-info {
  padding: 20px;
}

.song-info h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 8px 0;
}

.song-info p {
  font-size: 0.9rem;
  color: var(--ink-600);
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.song-actions {
  display: flex;
  gap: 8px;
}

.songs-cta {
  text-align: center;
}

/* GALLERY */
.gallery-section {
  padding: 48px 0;
  /* OLD BACKGROUND - COMMENTED OUT */
  /* background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,247,251,1)); */

  /* NEW: Transparent to show iridescence background */
  /* PERFORMANCE: Removed backdrop-filter - causes severe FPS drops */
  background: rgba(255, 255, 255, 0.6);
  /* Increased opacity for better visibility */
  /* backdrop-filter: blur(2px); REMOVED for performance */
  /* -webkit-backdrop-filter: blur(2px); REMOVED for performance */
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.gallery-item {
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  /* PERFORMANCE: Removed backdrop-filter and increased background opacity */
  background: rgba(255, 255, 255, 0.95);
  /* Increased opacity instead of backdrop-filter */
  border: 1px solid rgba(15, 23, 42, .08);
  /* Changed to simpler border */
  /* PERFORMANCE: backdrop-filter REMOVED - causes severe FPS drops */
  /* backdrop-filter: blur(6px); REMOVED for performance */
  /* -webkit-backdrop-filter: blur(6px); REMOVED for performance */
  /* PERFORMANCE: Faster transition */
  transition: box-shadow 0.2s ease;
  /* PERFORMANCE: GPU acceleration REMOVED */
  /* transform: translateZ(0); REMOVED for performance */
  /* will-change: transform; REMOVED - increases memory usage */
  /* PERFORMANCE: Reduced box-shadow for better performance */
  box-shadow: 0 4px 16px rgba(2, 6, 23, .08);
  /* Single, simpler shadow */
}

.gallery-item:hover {
  /* PERFORMANCE: Removed transform - too expensive */
  /* transform: scale(1.02); REMOVED for performance */
  box-shadow: 0 12px 28px rgba(2, 6, 23, .12);
  /* Reduced shadow */
}

.gallery-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(249, 168, 212, .2), rgba(216, 180, 254, .2));
  color: var(--ink-600);
  text-align: center;
  padding: 24px;
}

.gallery-icon {
  font-size: 3rem;
  margin-bottom: 12px;
  opacity: 0.7;
}

.gallery-placeholder p {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

/* TESTIMONIALS */
.testimonials-section {
  padding: var(--space-section-y) 0;
  /* OLD BACKGROUND - COMMENTED OUT */
  /* background: linear-gradient(180deg, rgba(255,247,251,1), rgba(255,255,255,1)); */

  /* NEW: Transparent to show iridescence background */
  /* PERFORMANCE: Removed backdrop-filter - causes severe FPS drops */
  background: rgba(255, 255, 255, 0.6);
  /* Increased opacity for better visibility */
  /* backdrop-filter: blur(2px); REMOVED for performance */
  /* -webkit-backdrop-filter: blur(2px); REMOVED for performance */
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.25rem, 3vw, 1.75rem);
}

.testimonial {
  /* PERFORMANCE: Removed backdrop-filter and increased background opacity */
  background: rgba(255, 255, 255, 0.95);
  /* Increased opacity instead of backdrop-filter */
  border-radius: 16px;
  padding: 1.375rem 1.5rem;
  border: 1px solid var(--card-border);
  /* Changed to simpler border */
  /* PERFORMANCE: backdrop-filter REMOVED - causes severe FPS drops */
  /* backdrop-filter: blur(6px); REMOVED for performance */
  /* -webkit-backdrop-filter: blur(6px); REMOVED for performance */
  /* PERFORMANCE: Faster transition */
  transition: box-shadow 0.2s ease;
  /* PERFORMANCE: GPU acceleration REMOVED */
  /* transform: translateZ(0); REMOVED for performance */
  /* will-change: transform; REMOVED - increases memory usage */
  /* PERFORMANCE: Reduced box-shadow for better performance */
  box-shadow: 0 4px 16px rgba(2, 6, 23, .08);
  /* Single, simpler shadow */
}

.testimonial:hover {
  /* PERFORMANCE: Removed transform - too expensive */
  /* transform: translateY(-2px); REMOVED for performance */
  box-shadow: 0 12px 28px rgba(2, 6, 23, .12);
  /* Reduced shadow */
}

.testimonial-content p {
  font-size: 1rem;
  color: var(--ink-700);
  margin: 0 0 20px 0;
  line-height: 1.6;
  font-style: italic;
}

.testimonial-author {
  border-top: 1px solid rgba(15, 23, 42, .1);
  padding-top: 16px;
}

.author-name {
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 4px;
}

.author-role {
  font-size: 0.9rem;
  color: var(--ink-600);
}

/* NEWSLETTER */
.events-section {
  padding: var(--space-section-y) 0;
  /* OLD BACKGROUND - COMMENTED OUT */
  /* background: linear-gradient(135deg, var(--brand-50), rgba(255,255,255,1)); */

  /* NEW: Transparent to show iridescence background */
  /* PERFORMANCE: Removed backdrop-filter for better FPS */
  background: rgba(255, 255, 255, 0.45);
  /* backdrop-filter: blur(2px); REMOVED for performance */
  /* -webkit-backdrop-filter: blur(2px); REMOVED for performance */
  /* PERFORMANCE: GPU acceleration REMOVED - causes performance issues */
  /* transform: translateZ(0); REMOVED for performance */
  /* will-change: contents; REMOVED - increases memory usage */
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.25rem, 3vw, 1.75rem);
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.event-card {
  background: var(--card-surface);
  border-radius: 16px;
  padding: 0;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-soft);
  /* PERFORMANCE: No transitions needed */
  transition: none;
  display: block;
  overflow: hidden;
}

.event-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.event-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem 1.375rem 1.375rem;
}

.event-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 0;
  display: block;
  /* PERFORMANCE: Minimal shadow for better FPS */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.15s ease;
}

.event-image:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.event-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 12px 0;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
}

.event-description {
  color: var(--ink-600);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 16px 0;
}

.event-dates {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(244, 114, 182, 0.1);
}

.event-date {
  font-size: 0.9rem;
  color: var(--ink-600);
}

.event-date strong {
  color: var(--ink-700);
}

.event-countdown {
  margin-top: 16px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.08);
  color: #312e81;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.event-countdown--soon {
  background: rgba(251, 191, 36, 0.18);
  color: #92400e;
}

.event-countdown--completed {
  background: rgba(16, 185, 129, 0.18);
  color: #047857;
}

.event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.event-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(244, 114, 182, 0.12);
  color: #be1250;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.event-action-button:hover {
  /* PERFORMANCE: Removed transform - too expensive */
  /* transform: translateY(-2px); REMOVED for performance */
  box-shadow: 0 8px 20px rgba(244, 114, 182, 0.15);
  /* Reduced shadow */
  background: rgba(244, 114, 182, 0.2);
}

.event-action-button--primary {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  color: white;
}

.event-action-button--primary:hover {
  box-shadow: 0 12px 30px rgba(99, 102, 241, 0.25);
}

@media (max-width: 768px) {
  .events-grid {
    grid-template-columns: 1fr;
  }
}

.newsletter-section {
  padding: clamp(64px, 10vw, 96px) 0;
  /* OLD BACKGROUND - COMMENTED OUT */
  /* background: linear-gradient(135deg, var(--brand-100), var(--brand-50)); */

  /* NEW: Transparent to show iridescence background */
  /* PERFORMANCE: Removed backdrop-filter - causes FPS drops */
  background: rgba(255, 255, 255, 0.5);
  /* Increased opacity for better visibility */
  /* backdrop-filter: blur(2px); REMOVED for performance */
  /* -webkit-backdrop-filter: blur(2px); REMOVED for performance */
  transition: opacity 0.4s ease;
}

.newsletter-form {
  max-width: 500px;
  margin: 0 auto;
}

.form-group {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.form-group .input {
  flex: 1;
}

.newsletter-note {
  font-size: 0.9rem;
  color: var(--ink-500);
  text-align: center;
  margin: 0;
}

/* CONTACT */
.contact-section {
  padding: clamp(64px, 10vw, 96px) 0;
  /* OLD BACKGROUND - COMMENTED OUT */
  /* background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,247,251,1)); */

  /* NEW: Transparent to show iridescence background */
  /* PERFORMANCE: Removed backdrop-filter - causes severe FPS drops */
  background: rgba(255, 255, 255, 0.6);
  /* Increased opacity for better visibility */
  /* backdrop-filter: blur(2px); REMOVED for performance */
  /* -webkit-backdrop-filter: blur(2px); REMOVED for performance */
  transition: opacity 0.4s ease;
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 64px);
}

@media (max-width: 768px) {
  .contact-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.contact-info h3,
.contact-form h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 16px 0;
}

.contact-info {
  /* PERFORMANCE: Removed backdrop-filter and increased background opacity */
  background: rgba(255, 255, 255, 0.95);
  /* Increased opacity instead of backdrop-filter */
  border-radius: 16px;
  padding: 32px;
  border: 1px solid rgba(15, 23, 42, .08);
  /* Changed to simpler border */
  /* PERFORMANCE: backdrop-filter REMOVED - causes severe FPS drops */
  /* backdrop-filter: blur(6px); REMOVED for performance */
  /* -webkit-backdrop-filter: blur(6px); REMOVED for performance */
  /* PERFORMANCE: Reduced box-shadow for better performance */
  box-shadow: 0 4px 16px rgba(2, 6, 23, .08);
  /* Single, simpler shadow */
}

.contact-info p {
  color: var(--ink-600);
  margin: 0 0 32px 0;
  line-height: 1.6;
}

.contact-details {
  display: grid;
  gap: 20px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

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

.contact-text strong {
  font-weight: 700;
  color: var(--ink-900);
  font-size: 0.95rem;
}

.contact-text span {
  color: var(--ink-600);
  font-size: 0.9rem;
}

.contact-text a.mailto-address {
  color: var(--ink-600);
  font-size: 0.9rem;
  text-decoration: underline;
  text-decoration-color: rgba(15, 23, 42, 0.25);
}

.contact-text a.mailto-address:hover {
  color: var(--brand-600);
  text-decoration-color: var(--brand-500);
}

.contact-form {
  /* PERFORMANCE: Removed backdrop-filter and increased background opacity */
  background: rgba(255, 255, 255, 0.95);
  /* Increased opacity instead of backdrop-filter */
  border-radius: 16px;
  padding: 32px;
  border: 1px solid rgba(15, 23, 42, .08);
  /* Changed to simpler border */
  /* PERFORMANCE: backdrop-filter REMOVED - causes severe FPS drops */
  /* backdrop-filter: blur(6px); REMOVED for performance */
  /* -webkit-backdrop-filter: blur(6px); REMOVED for performance */
  /* PERFORMANCE: GPU acceleration REMOVED - causes performance issues */
  /* transform: translateZ(0); REMOVED for performance */
  /* will-change: contents; REMOVED - increases memory usage */
  /* PERFORMANCE: Reduced box-shadow for better performance */
  box-shadow: 0 4px 16px rgba(2, 6, 23, .08);
  /* Single, simpler shadow */
}

.form-group {
  margin-bottom: 20px;
}

.textarea {
  resize: vertical;
  min-height: 120px;
}

/* FOOTER */
.footer {
  padding: clamp(64px, 10vw, 96px) 0 48px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      rgba(244, 114, 182, 0.3),
      rgba(236, 72, 153, 0.3),
      transparent);
}

/* Soften color transitions between sections - OPTIMIZED for performance */
.about-section,
.songs-section,
.gallery-section,
.testimonials-section,
.newsletter-section,
.contact-section,
.footer {
  position: relative;
}

/* PERFORMANCE: Removed ALL pseudo-elements for 165 FPS */
/* All section pseudo-elements removed for maximum scroll performance */
/* .about-section::before, REMOVED for 165 FPS */
/* .songs-section::before, REMOVED for 165 FPS */
/* .gallery-section::before, REMOVED for 165 FPS */
/* .testimonials-section::before, REMOVED for 165 FPS */
/* .newsletter-section::before, REMOVED for 165 FPS */
/* .contact-section::before, REMOVED for performance */
/* .footer::before REMOVED for 165 FPS */

/* .about-section::after, REMOVED for 165 FPS */
/* .songs-section::after, REMOVED for 165 FPS */
/* .gallery-section::after, REMOVED for 165 FPS */
/* .testimonials-section::after, REMOVED for 165 FPS */
/* .newsletter-section::after, REMOVED for 165 FPS */
/* .contact-section::after, REMOVED for performance */
/* .footer::after REMOVED for 165 FPS */

.footer-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(32px, 6vw, 64px);
  margin-bottom: clamp(24px, 4vw, 40px);
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 48px);
    text-align: center;
    justify-items: center;
  }
  .footer-brand {
    max-width: 100%;
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
}

.footer-brand {
  max-width: 300px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.footer-logo-img {
  width: 40px;
  height: 40px;
}

.footer-brand-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink-900);
}

.footer-tagline {
  color: var(--ink-600);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.footer-column h4 {
  color: var(--ink-900);
  margin-bottom: 24px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  position: relative;
  display: inline-block;
}

.footer-column h4::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 24px;
  height: 3px;
  background: var(--brand-500);
  border-radius: 99px;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-column li {
  margin-bottom: 0;
}

.footer-column a {
  color: var(--ink-600);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-column a:hover {
  color: var(--brand-600);
  transform: translateX(4px);
}

.social-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  text-decoration: none;
  color: var(--ink-700);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
  box-shadow: 0 4px 16px rgba(2, 6, 23, .1);
  border: 2px solid transparent;
  position: relative;
  overflow: visible;
  /* Changed from hidden to visible for spotlight effect */
}

.social-link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(200px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(244, 114, 182, 0.15),
      transparent 40%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
  /* Changed from 0 to 1 to be above background but below SVG */
}

.social-link:hover::before {
  opacity: 1;
}

.social-link svg {
  width: 36px !important;
  height: 36px !important;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 2;
  /* Above spotlight effect */
  /* Ensure crisp rendering */
  shape-rendering: geometricPrecision;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* Prevent clipping of SVG content */
  overflow: visible !important;
  pointer-events: none;
}

.social-link:hover {
  transform: translateY(-4px) scale(1.08);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 12px 28px rgba(2, 6, 23, .15);
  border-color: rgba(244, 114, 182, 0.2);
  color: var(--brand-600);
}

.social-link:hover svg {
  transform: scale(1.1);
}

.social-link:active {
  transform: translateY(-2px) scale(1.04);
}

/* Facebook specific color */
.social-link[aria-label="Facebook"]:hover {
  color: #1877F2;
  border-color: rgba(24, 119, 242, 0.2);
}

/* Instagram specific color */
.social-link[aria-label="Instagram"]:hover {
  color: #E4405F;
  border-color: rgba(228, 64, 95, 0.2);
}

/* YouTube specific color */
.social-link[aria-label="YouTube"]:hover {
  color: #FF0000;
  border-color: rgba(255, 0, 0, 0.2);
}


/* Center 'Sledujte nás' icons in the last footer column */
.footer-links .footer-column:last-child {
  display: grid;
  justify-items: center;
}

.footer-links .footer-column:last-child .social-links {
  justify-content: center;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(15, 23, 42, .06);
  flex-wrap: wrap;
  gap: 16px;
}

.footer-bottom small {
  color: var(--ink-600);
  font-size: 1rem;
  font-weight: 500;
}

.footer-legal {
  display: flex;
  gap: 20px;
}

.footer-legal a {
  color: var(--ink-600);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.footer-legal a:hover {
  color: var(--ink-700);
}

/* SHOP CTA */
.shop-section {
  padding: clamp(64px, 10vw, 120px) 0;
  text-align: center;
  /* OLD BACKGROUND - COMMENTED OUT */
  /* background: linear-gradient(180deg, rgba(255,247,251,1), rgba(255,255,255,1)); */

  /* NEW: Transparent to show iridescence background */
  /* PERFORMANCE: Removed backdrop-filter - causes severe FPS drops */
  background: rgba(255, 255, 255, 0.6);
  /* Increased opacity for better visibility */
  /* backdrop-filter: blur(2px); REMOVED for performance */
  /* -webkit-backdrop-filter: blur(2px); REMOVED for performance */
  transition: opacity 0.4s ease;
}

/* (Smarties gallery removed) */

/* FORMS */
.form {
  width: min(720px, 100%);
  margin: 0 auto;
}

.field {
  margin-bottom: 16px;
  min-width: 0;
  /* Prevent grid overflow */
  overflow: visible;
  /* Allow content to show */
}

.label {
  display: block;
  font-weight: 600;
  color: var(--ink-700);
  margin: 0 0 6px 0;
}

.control {
  position: relative;
}

.input,
.select,
.textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* Ensure padding is included in width */
  border: 1px solid rgba(15, 23, 42, .12);
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  color: var(--ink-900);
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
  min-width: 0;
  /* Prevent overflow in grid */
}

/* Additional fixes for modal inputs */
.modal .input,
.modal .select,
.modal .textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--ink-400);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .20);
}

.help {
  margin-top: 6px;
  font-size: .9rem;
  color: var(--ink-500);
}

.error {
  color: #b91c1c;
}

.success {
  color: #065f46;
}

/* Inline validations */
.is-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .15) !important;
}

.is-success {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .15) !important;
}

/* FOOTER */
/* Footer duplicate definition - keeping consistent with above */
/* .footer { padding: 32px 0; text-align: center; color: var(--ink-500); border-top: 1px solid rgba(15,23,42,.06); background: linear-gradient(0deg, #ffffff, #fff7fb); } */

/* Responsive */
@media (max-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .hero-text {
    text-align: center;
  }

  .hero-image {
    order: -1;
  }

  .about-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hero-photo {
    width: min(90vw, 400px);
    height: min(70vw, 500px);
  }

  .hero-portrait {
    width: min(90vw, 400px) !important;
    height: min(70vw, 500px) !important;
  }

  .hero-actions {
    justify-content: center;
  }

  .songs-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .form-group {
    flex-direction: column;
  }

  .footer-links {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .social-link {
    width: 72px;
    height: 72px;
  }

  .social-link svg {
    width: 36px !important;
    height: 36px !important;
    overflow: visible !important;
  }
}

@media (max-width: 480px) {
  .hero-photo {
    width: min(85vw, 350px);
    height: min(65vw, 450px);
  }

  .hero-portrait {
    width: min(85vw, 350px) !important;
    height: min(65vw, 450px) !important;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .hero-actions .btn {
    width: 100%;
    max-width: 280px;
  }

  .about-features {
    gap: 16px;
  }

  .feature {
    padding: 16px;
  }

  .feature-icon {
    font-size: 1.5rem;
  }

  .songs-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .contact-form {
    padding: 24px;
  }

  .newsletter-form {
    padding: 0 16px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }

  .btn-cta::after {
    display: none;
  }

  .aurora-orb {
    display: none;
  }

  body::after {
    animation: none;
  }
}

/* Falling lentils canvas overlay - DISABLED for performance */
/* PERFORMANCE: Canvas animation causes severe FPS drops, especially on scroll */
.falling-lentils {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  /* Hidden - performance optimization */
  display: none !important;
  /* Hidden - performance optimization */
  visibility: hidden !important;
  /* Hidden - performance optimization */
  background: transparent;
  transition: none;
  /* Removed transition for performance */
}

.falling-lentils.active {
  opacity: 0;
  display: none !important;
}

/* Disabled */

/* Ensure content layers above the falling lentils background */
.main,
.footer {
  position: relative;
  z-index: 2;
}

/* ===================== */
/* SHOP PAGE (Shopify vibe)
/* ===================== */

/* a11y helper */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 1px, 1px);
  white-space: nowrap;
  border: 0;
}

.shop-hero {
  padding: clamp(2rem, 5vw, 3rem) 0 clamp(1rem, 3vw, 1.5rem);
  /* OLD BACKGROUND - COMMENTED OUT */
  /* background: linear-gradient(180deg, rgba(255,247,251,1), rgba(255,255,255,1)); */

  /* NEW: Transparent to show iridescence background */
  /* PERFORMANCE: Removed backdrop-filter for consistency */
  background: rgba(255, 255, 255, 0.5);
  /* backdrop-filter: blur(1px); REMOVED for performance */
  /* -webkit-backdrop-filter: blur(1px); REMOVED for performance */
  transition: opacity 0.4s ease;
}

.shop-hero-inner {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
  justify-items: center;
  text-align: center;
}

.products-section {
  padding: clamp(1rem, 3vw, 1.75rem) 0 var(--space-section-y);
  transition: opacity 0.4s ease;
}

.promo-strip {
  padding: 8px 0 0;
}

.promo-strip-inner {
  display: grid;
  gap: 10px;
}

.promo-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 12px rgba(2, 6, 23, 0.05);
}

.promo-thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
}

.promo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-title {
  font-weight: 700;
  color: var(--ink-900);
}

.promo-desc {
  color: var(--ink-600);
  font-size: .92rem;
}

.shop-toolbar {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 16px);
  margin: clamp(16px, 3vw, 24px) 0 clamp(24px, 4vw, 32px);
  flex-wrap: wrap;
}

.sort-label {
  color: var(--ink-600);
  font-size: clamp(0.875rem, 1.5vw, 0.95rem);
  font-weight: 600;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 25vw, 280px), 1fr));
  gap: clamp(1.125rem, 3vw, 1.75rem);
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  overflow: visible;
  /* Changed from hidden to visible for spotlight effect */
  box-shadow: var(--shadow-soft);
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  /* Spotlight effect (like reactbits.dev) */
}

/* Inner container for content that can have overflow hidden */
.product-card>*:not(::before):not(::after) {
  overflow: hidden;
  border-radius: 16px;
}

/* Ensure product media doesn't overflow */
.product-media {
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}

.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.3), rgba(236, 72, 153, 0.3), rgba(219, 39, 119, 0.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.product-card:hover::before {
  opacity: 1;
}

.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(244, 114, 182, 0.08),
      transparent 40%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
  /* Changed from 0 to 1 to be above content */
}

.product-card:hover::after {
  opacity: 1;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(2, 6, 23, .12);
}

.product-media {
  aspect-ratio: 1/1;
  background: #ffffff;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative;
  z-index: 1;
  background: transparent;
}

.product-info {
  padding: 1rem 1.125rem 1.25rem;
  display: grid;
  gap: 0.625rem;
}

.product-title {
  font-weight: 700;
  color: var(--ink-900);
  font-size: 1.0625rem;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
}

.product-price {
  font-weight: 700;
  color: var(--brand-600);
}

.product-desc {
  color: var(--ink-600);
  font-size: .92rem;
  line-height: 1.45;
}

.product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(244, 114, 182, .12);
  color: var(--brand-700);
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .82rem;
}

.product-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: stretch;
}

.product-actions .btn {
  width: 100%;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Add to cart button - primary style */
.product-actions .btn-primary.add-btn {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  color: white;
  border: none;
}

/* Quick checkout button - different color/style */
.product-actions .btn-quick-checkout {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  font-size: 0.95rem;
}

.product-actions .btn-quick-checkout:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(16, 185, 129, 0.25);
}

/* Emoji icons in buttons - smaller */
.product-actions .btn::before,
.product-actions .btn-quick-checkout::before {
  content: none;
}

.product-actions .btn .emoji-icon {
  font-size: 1rem;
  line-height: 1;
}

/* Skeletons */
@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

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

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.8;
  }
}

.skeleton {
  pointer-events: none;
  user-select: none;
}

.skeleton .product-media {
  background: linear-gradient(90deg, #f3f4f6, #ffffff, #f3f4f6);
  background-size: 200% 100%;
  animation: skeleton-loading 1.2s infinite linear;
}

.skeleton .sk-line {
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f3f4f6, #ffffff, #f3f4f6);
  background-size: 200% 100%;
  animation: skeleton-loading 1.2s infinite linear;
}

.skeleton .sk-btn {
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f3f4f6, #ffffff, #f3f4f6);
  background-size: 200% 100%;
  animation: skeleton-loading 1.2s infinite linear;
}

.empty {
  text-align: center;
  color: var(--ink-500);
  padding: 24px 0;
}

/* Floating Cart Button */
.cart-fab {
  position: fixed;
  right: clamp(16px, 3vw, 24px);
  bottom: clamp(16px, 3vw, 24px);
  z-index: 45;
  width: clamp(52px, 8vw, 64px);
  height: clamp(52px, 8vw, 64px);
  border-radius: clamp(14px, 2vw, 18px);
  background: linear-gradient(90deg, var(--brand-700), var(--brand-500));
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 16px 36px rgba(236, 72, 153, .28);
  border: 0;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cart-fab:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 40px rgba(236, 72, 153, .35);
}

/* Counter animation for cart badge and quantity (like reactbits.dev) */
.cart-badge.counter-updated,
.qty.counter-updated {
  animation: counterPulse 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
  /* Optimize animation performance */
}

@keyframes counterPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #111827;
  color: #fff;
  border-radius: 12px;
  font-size: 12px;
  padding: 2px 6px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .25);
}

/* Cart Drawer */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, .45);
  transition: opacity 0.3s ease;
  /* PERFORMANCE: Removed backdrop-filter for better FPS */
  /* backdrop-filter: blur(1px); REMOVED for performance */
  /* -webkit-backdrop-filter: blur(1px); REMOVED for performance */
  /* PERFORMANCE: GPU acceleration REMOVED */
  /* transform: translateZ(0); REMOVED for performance */
  /* will-change: opacity; REMOVED - increases memory usage */
  z-index: 49;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 92vw);
  background: var(--surface);
  border-left: 1px solid rgba(15, 23, 42, .06);
  box-shadow: -24px 0 48px rgba(2, 6, 23, .14);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 50;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* PERFORMANCE: Ensure proper stacking without GPU acceleration */
  /* transform: translateZ(0); REMOVED for performance */
}

.cart-drawer.open {
  transform: translateX(0);
  /* PERFORMANCE: Ensure it's visible */
  visibility: visible;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}

.icon-btn {
  background: transparent;
  border: 0;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--ink-700);
}

.cart-items {
  padding: 12px 12px 0;
  overflow: auto;
}

.cart-item {
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  padding: 12px 4px;
}

.cart-item-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.cart-item-info {
  display: grid;
  gap: 4px;
}

.cart-item-title {
  font-weight: 600;
  color: var(--ink-900);
}

.cart-item-price {
  color: var(--ink-600);
  font-size: .95rem;
}

.cart-item-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qty-btn,
.remove-btn {
  background: rgba(15, 23, 42, .06);
  border: 0;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
}

.qty {
  min-width: 20px;
  text-align: center;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Counter animation for quantity in cart is defined above with .cart-badge.counter-updated */
.cart-footer {
  padding: 16px;
  border-top: 1px solid rgba(15, 23, 42, .06);
  display: grid;
  gap: 12px;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.05rem;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(255, 250, 252, 0.88);
  display: grid;
  place-items: center;
  z-index: 60;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

/* Modal display states */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  /* Changed from flex to none - will be shown via .open class */
  align-items: center;
  justify-content: center;
  z-index: 1000;
  background: rgba(255, 250, 252, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 16px;
  overflow-y: auto;
  visibility: hidden;
}

.modal[hidden] {
  display: none !important;
  visibility: hidden !important;
}

.modal.open {
  display: flex !important;
  visibility: visible !important;
}

.modal-content {
  width: min(720px, calc(100vw - 32px));
  max-width: 100%;
  max-height: calc(100vh - 32px);
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .06);
  box-shadow: 0 24px 56px rgba(2, 6, 23, .2);
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1001;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  margin-bottom: 16px;
  flex-shrink: 0;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.5rem;
}

.modal form {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.payment-options {
  display: flex;
  align-items: center;
  gap: 16px;
}

.radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink-700);
}

.radio-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.radio input {
  accent-color: var(--brand-600);
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  /* PERFORMANCE: Reduced backdrop-filter blur for better FPS */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* PERFORMANCE: will-change REMOVED */
  /* will-change: transform, opacity; REMOVED - increases memory usage */
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 12px 32px rgba(244, 114, 182, 0.35),
    0 4px 16px rgba(244, 114, 182, 0.25);
  border-radius: 16px;
  padding: 14px 20px;
  z-index: 10000;
  /* Higher z-index to ensure it's above modals */
  color: white;
  font-weight: 600;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Toast hidden state - ensure it's properly hidden */
.toast[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.bank-instructions {
  white-space: pre-wrap;
  background: #f9fafb;
  border: 1px dashed rgba(15, 23, 42, .12);
  padding: 10px;
  border-radius: 10px;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .hero {
    min-height: auto !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

@media (max-width: 520px) {
  .cart-fab {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }

  .cart-drawer {
    width: 100%;
  }

  /* Mobile modal improvements */
  .modal {
    padding: 8px;
    align-items: flex-start;
  }

  .modal-content {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    padding: 16px;
    border-radius: 12px;
    margin: auto 0;
  }

  /* Toast in mobile - ensure proper display and hiding */
  .toast {
    bottom: 100px;
    /* Higher position in mobile to avoid cart button */
    z-index: 10000;
    /* Ensure it's above everything in mobile */
    padding: 12px 16px;
    font-size: 0.875rem;
    max-width: calc(100vw - 32px);
    white-space: normal;
    word-wrap: break-word;
  }

  .toast[hidden] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .modal-header {
    padding: 0 0 12px;
    margin-bottom: 12px;
  }

  .modal-header h3 {
    font-size: 1.25rem;
  }

  .modal-actions {
    flex-direction: column-reverse;
    gap: 8px;
    margin-top: 16px;
  }

  .modal-actions .btn {
    width: 100%;
  }

  .field {
    margin-bottom: 12px;
  }

  .radio-group {
    flex-direction: column;
    gap: 12px;
  }

  .radio {
    padding: 10px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background: var(--surface-muted);
  }

  .input,
  .select,
  .textarea {
    padding: 12px;
    font-size: 16px;
    /* Prevents zoom on iOS */
    width: 100%;
    box-sizing: border-box;
    /* Ensure full width is used */
    min-width: 0;
    /* Prevent overflow */
  }

  /* Ensure fields in grid are not cropped - more aggressive fixes */
  .modal .grid-2 {
    gap: 16px !important;
  }

  .modal .grid-2 .field {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    margin-bottom: 16px;
  }

  .modal .grid-2 .field .input,
  .modal .grid-2 .field .select,
  .modal .grid-2 .field .textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 14px !important;
  }

  /* Single column fields */
  .modal .field {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 16px;
  }

  .modal .field .input,
  .modal .field .select,
  .modal .field .textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px !important;
  }
}