/* Unified first screen layout for key pages. Loaded after page-specific CSS. */

:root {
  --first-screen-bg:
    radial-gradient(circle at 18% 7%, rgba(232, 201, 200, 0.42), transparent 30%),
    radial-gradient(circle at 84% 22%, rgba(184, 183, 154, 0.28), transparent 32%),
    var(--bg);
  --first-screen-top: clamp(118px, 14svh, 168px);
  --first-screen-bottom: clamp(120px, 16svh, 168px);
  --first-screen-container: clamp(1180px, 76vw, 1480px);
}

.home-page,
.catalog-page,
.aromaty-page,
.masterclass-page {
  background: var(--first-screen-bg);
  color: var(--text);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

html {
  overflow-x: hidden !important;
}

.home-page main,
.catalog-page main,
.aromaty-page main,
.masterclass-page main {
  width: 100%;
  max-width: 100%;
  overflow-x: clip !important;
}

.home-page .hero,
.catalog-page .catalog-hero,
.aromaty-page .aromaty-hero,
.masterclass-page .mc-hero {
  min-height: 100svh !important;
  padding-top: var(--first-screen-top) !important;
  padding-bottom: var(--first-screen-bottom) !important;
  display: flex !important;
  align-items: center !important;
  background: var(--first-screen-bg) !important;
}

.home-page .hero > .container,
.catalog-page .catalog-hero > .container,
.aromaty-page .aromaty-hero > .container,
.masterclass-page .mc-hero > .container {
  width: min(calc(100% - clamp(28px, 5vw, 96px)), var(--first-screen-container)) !important;
  max-width: var(--first-screen-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  transform: none !important;
}

.catalog-page .catalog-hero-grid,
.aromaty-page .aromaty-hero-grid,
.masterclass-page .mc-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1fr) !important;
  gap: clamp(48px, 5.4vw, 68px) !important;
  align-items: center !important;
  width: 100%;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}

.aromaty-page .aromaty-hero-copy,
.catalog-page .catalog-hero-text,
.masterclass-page .mc-hero-copy {
  align-self: center !important;
  max-width: 700px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
  text-align: left !important;
}

.catalog-page .catalog-hero .eyebrow,
.aromaty-page .aromaty-hero .eyebrow,
.masterclass-page .mc-hero .eyebrow {
  margin: 0 0 18px !important;
  color: var(--accent-dark) !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.catalog-page .catalog-hero h1,
.aromaty-page .aromaty-hero-copy h1,
.masterclass-page .mc-hero h1 {
  max-width: 700px !important;
  margin: 0 0 22px !important;
  color: var(--accent-dark) !important;
  font-family: var(--sans) !important;
  font-size: clamp(54px, 7vw, 104px) !important;
  font-weight: 800 !important;
  line-height: 0.88 !important;
  letter-spacing: -0.055em !important;
}

.catalog-page .catalog-hero p:not(.eyebrow),
.aromaty-page .aromaty-hero-copy p:not(.eyebrow),
.masterclass-page .mc-lead {
  max-width: 620px !important;
  color: var(--muted) !important;
  font-family: var(--sans) !important;
  font-size: clamp(18px, 2vw, 22px) !important;
  line-height: 1.58 !important;
}

.catalog-page .catalog-hero-actions,
.aromaty-page .aromaty-hero-actions,
.masterclass-page .mc-hero-actions {
  margin-top: 28px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}

.catalog-page .hero-visual-alt,
.masterclass-page .mc-hero-visual {
  align-self: center !important;
}

.aromaty-page .aromaty-hero-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1fr) !important;
}

.catalog-page .hero-visual-alt,
.aromaty-page .hero-visual-alt {
  position: relative !important;
  min-height: clamp(500px, 48vw, 720px) !important;
  width: 100% !important;
  max-width: 680px !important;
  justify-self: end !important;
}

.catalog-page .hero-visual-alt .hero-photo-main,
.aromaty-page .hero-visual-alt .hero-photo-main {
  width: min(76%, 520px) !important;
  height: clamp(440px, 43vw, 660px) !important;
  margin-left: auto !important;
}

.catalog-page .hero-visual-alt .hero-photo-small,
.home-page .hero-photo-small,
.aromaty-page .hero-visual-alt .hero-photo-small {
  width: min(46%, 300px) !important;
  height: clamp(220px, 22vw, 320px) !important;
  border-width: 5px !important;
}

.catalog-page .hero-visual-alt .floating-card,
.aromaty-page .hero-visual-alt .floating-card {
  right: 0 !important;
  bottom: clamp(54px, 8vw, 92px) !important;
}

@media (max-width: 900px) {
  :root {
    --first-screen-top: 112px;
    --first-screen-bottom: 104px;
  }

  .catalog-page .catalog-hero-grid,
  .aromaty-page .aromaty-hero-grid,
  .masterclass-page .mc-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .catalog-page .catalog-hero h1,
  .aromaty-page .aromaty-hero-copy h1,
  .masterclass-page .mc-hero h1 {
    max-width: 760px !important;
    font-size: clamp(46px, 13vw, 76px) !important;
    line-height: 0.92 !important;
  }

  .aromaty-page .aromaty-hero-copy,
  .catalog-page .catalog-hero-text,
  .masterclass-page .mc-hero-copy {
    max-width: 760px !important;
  }

  .catalog-page .hero-visual-alt,
  .aromaty-page .hero-visual-alt {
    justify-self: center !important;
    max-width: 620px !important;
    min-height: clamp(430px, 80vw, 620px) !important;
  }
}

@media (max-width: 640px) {
  :root {
    --first-screen-top: 104px;
    --first-screen-bottom: 86px;
  }

  .catalog-page .catalog-hero-actions,
  .aromaty-page .aromaty-hero-actions,
  .masterclass-page .mc-hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .catalog-page .catalog-hero-actions .btn,
  .aromaty-page .aromaty-hero-actions .btn,
  .masterclass-page .mc-hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .catalog-page .hero-visual-alt,
  .aromaty-page .hero-visual-alt {
    min-height: 430px !important;
  }

  .catalog-page .hero-visual-alt .hero-photo-main,
  .aromaty-page .hero-visual-alt .hero-photo-main {
    width: 82% !important;
    height: 380px !important;
  }

  .catalog-page .hero-visual-alt .hero-photo-small,
  .home-page .hero-photo-small,
  .aromaty-page .hero-visual-alt .hero-photo-small {
    width: 52% !important;
    height: 190px !important;
  }

  .catalog-page .hero-visual-alt .floating-card,
  .aromaty-page .hero-visual-alt .floating-card {
    right: 8px !important;
    bottom: 38px !important;
  }
}