/* =========================================================
   Brand header
========================================================= */

.brand-header {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-bottom: 18px;
}

.brand-logo {
  width: 165px;
  height: 165px;
  object-fit: contain;

  margin-bottom: 10px;

  filter:
    drop-shadow(
      0 12px 18px rgba(72, 47, 64, 0.08)
    );
}

.brand-logo--small {
  width: 130px;
  height: 130px;

  margin: 0 auto 12px;
}

.brand-title {
  position: relative;
  left: 50%;

  width: max-content;
  max-width: none;

  margin: -2px 0 2px;

  color: var(--color-brown);

  font-family: var(--font-brand);
  font-size: clamp(3.1rem, 10vw, 5.1rem);
  font-weight: 400;
  line-height: 0.95;
  white-space: nowrap;

  transform: translateX(-50%);
}

.brand-tagline {
  margin: 8px 0 0;

  color: var(--color-muted);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}


/* =========================================================
   Social links
========================================================= */

.social-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin: 18px 0 34px;
}

.social-links__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 14px;
}

.social-links__row--actions {
  gap: 14px;
}

.social-link {
  width: 52px;
  height: 52px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;

  color: var(--color-white);
  background: var(--color-purple);

  border-radius: 50%;

  font-size: 1.25rem;
  text-decoration: none;

  box-shadow:
    0 11px 22px rgba(51, 38, 48, 0.13);

  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    filter var(--transition-fast);
}

.social-link:hover {
  transform: translateY(-4px);

  box-shadow:
    0 16px 28px rgba(51, 38, 48, 0.18);

  filter: brightness(1.04);
}

.social-link:active {
  transform: translateY(-1px);
}

.social-link:focus-visible {
  outline: 4px solid var(--color-purple-soft);
  outline-offset: 4px;
}

.social-link--facebook {
  background: var(--color-facebook);
}

.social-link--instagram {
  background:
    linear-gradient(
      135deg,
      #833ab4,
      #e1306c,
      #f77737
    );
}

.social-link--tiktok {
  background: var(--color-tiktok);
}

.social-link--email {
  background: var(--color-email);
}

.social-link--venmo {
  background:
    linear-gradient(
      135deg,
      #3d95ce,
      #2784bc
    );
}

.social-link--directions {
  background:
    linear-gradient(
      135deg,
      #4285f4,
      #34a853
    );
}

/* =========================================================
   Section dividers
========================================================= */

.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  margin-bottom: 18px;

  color: var(--color-purple);
}

.section-divider span {
  width: 86px;
  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(150, 87, 191, 0.65)
    );
}

.section-divider span:last-child {
  background:
    linear-gradient(
      to left,
      transparent,
      rgba(150, 87, 191, 0.65)
    );
}

.section-divider i {
  font-size: 0.95rem;
}


/* =========================================================
   Quick links
========================================================= */

.quick-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;

  margin: -14px 0 34px;
}

.quick-links a {
  min-height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 9px 16px;

  color: var(--color-purple-dark);
  background: var(--color-purple-soft);

  border: 1px solid var(--color-purple-border);
  border-radius: var(--radius-pill);

  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;

  transition:
    transform var(--transition-fast),
    background var(--transition-fast);
}

.quick-links a:hover {
  transform: translateY(-1px);
  background: rgba(150, 87, 191, 0.18);
}

.quick-links a:focus-visible {
  outline: 3px solid rgba(150, 87, 191, 0.28);
  outline-offset: 4px;
}


/* =========================================================
   Shared page sections
========================================================= */

.payment-section {
  width: min(100%, var(--content-width));
  margin-inline: auto;
}

.payment-section h2,
.preorder-page h1,
.gallery-page h1 {
  margin: 0;

  color: var(--color-brown);

  font-family: var(--font-brand);
  font-size: clamp(3.2rem, 9vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
}

.payment-intro {
  max-width: 480px;
  margin: 12px auto 24px;

  color: var(--color-muted);
  font-size: 0.98rem;
  line-height: 1.65;
}


/* =========================================================
   Interior pages
========================================================= */

.preorder-page,
.gallery-page {
  width: min(100%, 560px);

  margin-inline: auto;
  padding: 34px;

  background:
    linear-gradient(
      160deg,
      var(--color-surface),
      var(--color-surface-soft)
    );

  border: 1px solid var(--color-purple-border);
  border-radius: var(--radius-large);

  box-shadow: var(--shadow-card);
}

.preorder-page p,
.gallery-page p {
  color: var(--color-muted);
}

.preorder-page__note {
  margin: 22px 0;
  text-align: left;
}

/* QUICK LINK ICON POLISH START */

.quick-links i,
.quick-link__symbol {
  width: 1em;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 1em;

  color: currentColor;

  font-size: 0.92rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 420px) {
  .quick-links {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    width: min(100%, 340px);
    margin-inline: auto;
    margin-bottom: 34px;
  }

  .quick-links a {
    width: 100%;
    padding-inline: 12px;
  }
}

/* QUICK LINK ICON POLISH END */

/* FLOATING QUICK LINKS START */

/* =========================================================
   Floating vertical quick-link rail
========================================================= */

.quick-links {
  position: fixed;

  top: 50%;
  right: max(
    18px,
    env(safe-area-inset-right)
  );
  bottom: auto;
  left: auto;

  z-index: 700;

  width: 132px;
  max-width: none;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 8px;

  margin: 0;
  padding: 8px;

  background:
    rgba(255, 250, 253, 0.92);

  border:
    1px solid
    var(--color-purple-border);

  border-radius: var(--radius-large);

  box-shadow:
    0 18px 48px
    rgba(53, 38, 47, 0.22);

  transform: translateY(-50%);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  transition:
    opacity var(--transition-medium),
    visibility var(--transition-medium),
    transform var(--transition-medium);
}


/* Each quick link becomes one row in the vertical rail. */
.quick-links a {
  width: 100%;
  min-width: 0;
  min-height: 46px;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;

  padding: 10px 13px;

  white-space: nowrap;
  text-align: left;
}


/* Keep icons aligned in one clean column. */
.quick-links i,
.quick-link__symbol {
  width: 18px;

  flex: 0 0 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* Small lift toward the page on hover. */
.quick-links a:hover {
  transform: translateX(-3px);
}


/* Hide the rail while a modal is open. */
body.modal-open .quick-links {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translateY(-50%)
    translateX(14px);
}


/* =========================================================
   Medium screens
========================================================= */

/*
 * Below this width, the side rail could overlap the main
 * cards, so it becomes a bottom dock instead.
 */
@media (max-width: 1100px) {
  body {
    padding-bottom: 108px;
  }

  .quick-links {
    top: auto;
    right: auto;
    bottom: max(
      14px,
      env(safe-area-inset-bottom)
    );
    left: 50%;

    width: max-content;
    max-width: calc(100vw - 24px);

    flex-direction: row;
    align-items: center;

    border-radius: var(--radius-pill);

    transform: translateX(-50%);
  }

  .quick-links a {
    width: auto;

    justify-content: center;

    padding-inline: 14px;
  }

  .quick-links a:hover {
    transform: translateY(-2px);
  }

  body.modal-open .quick-links {
    transform:
      translateX(-50%)
      translateY(14px);
  }
}


/* =========================================================
   Phones
========================================================= */

@media (max-width: 520px) {
  body {
    padding-bottom: 150px;
  }

  .quick-links {
    width: min(
      calc(100vw - 24px),
      360px
    );

    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 7px;

    border-radius: var(--radius-large);
  }

  .quick-links a {
    width: 100%;
    min-width: 0;

    justify-content: flex-start;

    padding-inline: 12px;
  }
}


@media (max-width: 350px) {
  .quick-links {
    gap: 6px;
    padding: 6px;
  }

  .quick-links a {
    min-height: 42px;

    padding-inline: 9px;

    font-size: 0.76rem;
  }
}

/* FLOATING QUICK LINKS END */