/* Black Elegance: desktop = centered mobile column */
@media (min-width: 768px) {
  html.be-black-elegance {
    background-color: #070707;
  }

  body.be-black-elegance {
    margin: 0;
    min-height: 100vh;
    background-color: #070707;
    background-image:
      radial-gradient(ellipse 70% 42% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 58%),
      linear-gradient(180deg, #141414 0%, #070707 42%, #050505 100%);
  }

  body.be-black-elegance #app {
    width: 430px;
    max-width: 430px;
    margin: 0 auto;
    background: #000;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 0 120px rgba(0, 0, 0, 0.5),
      0 32px 72px rgba(0, 0, 0, 0.45);
    overflow-x: hidden;
    min-height: 100vh;
  }

  body.be-black-elegance .h-pengantin,
  body.be-black-elegance .event-img,
  body.be-black-elegance #cover,
  body.be-black-elegance .background-slideshow {
    height: 100vh !important;
  }

  body.be-black-elegance .gallery-item {
    flex: 1 1 calc(33.333% - 8px) !important;
    max-width: calc(33.333% - 8px);
    box-sizing: border-box;
  }

  /* Keep mobile stacking inside the 430px column */
  body.be-black-elegance #app .md\:grid {
    display: block;
  }

  body.be-black-elegance #app .md\:grid-cols-2,
  body.be-black-elegance #app .md\:grid-cols-3 {
    grid-template-columns: none;
  }

  body.be-black-elegance #app .md\:hidden {
    display: block;
  }

  body.be-black-elegance #app .md\:h-screen {
    height: 24rem;
  }

  body.be-black-elegance #app .md\:h-full {
    height: 12rem;
  }

  body.be-black-elegance #app .md\:bottom-1\/3,
  body.be-black-elegance #app .lg\:bottom-1\/3 {
    bottom: 4rem;
  }

  body.be-black-elegance #app .md\:px-16,
  body.be-black-elegance #app .md\:px-20,
  body.be-black-elegance #app .lg\:px-16,
  body.be-black-elegance #app .lg\:px-20,
  body.be-black-elegance #app .lg\:px-24,
  body.be-black-elegance #app .lg\:px-32,
  body.be-black-elegance #app .lg\:px-48,
  body.be-black-elegance #app .lg\:px-64 {
    padding-left: 0;
    padding-right: 0;
  }

  body.be-black-elegance #app .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  body.be-black-elegance #app .px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  body.be-black-elegance #app .px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  body.be-black-elegance #app .p-4 {
    padding: 1rem;
  }

  body.be-black-elegance #app .md\:pb-48,
  body.be-black-elegance #app .md\:pb-20 {
    padding-bottom: 3rem;
  }

  body.be-black-elegance #app .md\:w-1\/3,
  body.be-black-elegance #app .md\:w-1\/2 {
    width: 66.666667%;
  }

  body.be-black-elegance #app .md\:w-48,
  body.be-black-elegance #app .lg\:w-80 {
    width: 4rem;
  }

  body.be-black-elegance .audio-control {
    left: calc(50% - 215px + 1rem) !important;
  }

  body.be-black-elegance .voice-comment-fab {
    right: calc(50% - 215px + 1.25rem) !important;
  }

  body.be-black-elegance #app .be-countdown .md\:text-4xl {
    font-size: 1.125rem;
    line-height: 1.25rem;
  }

  body.be-black-elegance #app .be-countdown .md\:text-xl {
    font-size: 0.6rem;
    line-height: 1.5rem;
  }
}