/* ============================================
   Bellus — style.css
   Pixel-perfect по Figma CSS от Лизы
   ============================================ */

@font-face {
  font-family: 'Gilroy';
  src: url('Gilroy-UltraLight.ttf') format('truetype');
  font-weight: 200;
}
@font-face {
  font-family: 'Gilroy';
  src: url('Gilroy-Light.ttf') format('truetype');
  font-weight: 300;
}
@font-face {
  font-family: 'Gilroy';
  src: url('Gilroy-Medium.ttf') format('truetype');
  font-weight: 500;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: #F5F4F0; }

body {
  font-family: 'Gilroy', -apple-system, sans-serif;
  background: #F5F4F0;
  color: #000;
  opacity: 0;
  transition: opacity 0.3s ease;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.loaded { opacity: 1; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ===== NAV ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 52px;
  background: rgba(245, 244, 240, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 0.5px solid #E0DED8;
}
.nav-wrap {
  position: relative;
  width: 100%;
  height: 52px;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}

/* BELLUS — Gilroy-Medium 12px letter-spacing 8% */
.nav-brand {
  font-family: 'Gilroy', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #000;
}

/* Nav links — Gilroy-Medium 12px letter-spacing 6% color #6B6B6B */
.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav-links a {
  font-family: 'Gilroy', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #6B6B6B;
  transition: color 0.2s;
}
.nav-links a:hover { color: #000; }

/* Lang switch — Gilroy-Medium 12px letter-spacing 6% */
.lang-switch {
  display: flex;
  gap: 16px;
}
.lang-btn {
  font-family: 'Gilroy', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #6B6B6B;
  transition: color 0.2s;
  padding: 0;
}
.lang-btn.active { color: #000; }
.lang-btn:hover { color: #000; }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 24px;
}
.menu-toggle span {
  height: 1px;
  background: #000;
  width: 100%;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Гамбургер → крестик, когда меню открыто */
.menu-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ===== HERO ===== */
/* Hero: 1440×900, background #F5F4F0 */
.hero {
  position: relative;
  width: 100%;
  height: 848px; /* 900 - 52px nav */
  background: #F5F4F0;
  overflow: hidden;
}

/* Vertical line: left 721px from content start */
.hero::after {
  content: '';
  position: absolute;
  left: calc(50% - 1440px/2 + 721px);
  top: 0;
  width: 0;
  height: 100%;
  border-left: 0.5px solid #E0DED8;
}

/* Sticker: "Barcelona Made of Chocolate" — 614×261, left 54, top 218 */
.hero-sticker {
  position: absolute;
  left: calc(50% - 720px + 54px);
  top: 218px;
  width: 614px;
  height: 261px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* VIEW COLLECTION: left 80, top 801, Gilroy-UltraLight 15px ls 6% */
.view-collection {
  position: absolute;
  left: calc(50% - 1440px/2 + 80px);
  top: 801px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 200;
  font-size: 15px;
  line-height: 100%;
  letter-spacing: 0.06em;
  color: #000;
  text-decoration: underline;
  text-decoration-color: #000;
  text-underline-offset: 3px;
}

/* Line under VIEW COLLECTION: left 82, top 818, width 141 */
.view-collection::after {
  display: none; /* уже есть text-decoration */
}

/* Cake image: 651×900, left 766 from content */
.hero-img {
  position: absolute;
  width: 651px;
  height: 900px;
  left: calc(50% - 1440px/2 + 766px);
  top: calc(50% - 450px);
}
.hero-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Мобильная промо-карточка (GET IN TOUCH + стикер + VIEW COLLECTION) —
   на десктопе невидима, элементы внутри остаются позиционированы как раньше
   (display:contents убирает обёртку из потока, не мешая .hero-sticker/.view-collection) */
.hero-card-bg-mobile { display: contents; }
.hero-eyebrow-mobile { display: none; }

/* Разделитель и нижняя строка (языки + Instagram) полноэкранного мобильного меню —
   на десктопе не нужны, показываются только в @media(max-width:960px) ниже */
.mobile-menu-divider, .mobile-menu-bottom-row { display: none; }

/* ===== CATALOGUE ===== */
/* Catalogue: 1440×800, background #FFFFFF */
.catalogue-wrapper {
  width: 100%;
  background: #FFFFFF;
}
.catalogue {
  position: relative;
  width: 100%;
  max-width: 1440px;
  height: 800px;
  margin: 0 auto;
  background: #FFFFFF;
}

/* MONUMENTS label: left 80, top 60, Gilroy-UltraLight 11px ls 8% */
.cat-label {
  position: absolute;
  left: 80px;
  top: 60px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 200;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.08em;
  color: #000;
}

/* VIEW ALL: left 1296, top 60, Gilroy-UltraLight 11px ls 6% */
.view-all {
  position: absolute;
  left: 1296px;
  top: 60px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 200;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.06em;
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Cards grid — точные позиции из Figma */
/* Card 1: left 80, Card 2: left 520, Card 3: left 960 */
/* Each: 400×620, top 121, bg #F5F4F0, border 1px #E0DED8 */
.home-grid {
  position: absolute;
  top: 121px;
  left: 80px;
  right: 80px;
  display: grid;
  grid-template-columns: 400px 400px 400px;
  gap: 40px;
}
.home-card {
  width: 400px;
  height: 620px;
  background: #E0DED8;
  border: 1px solid #E0DED8;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.home-card.placeholder {
  animation: shimmer 1.8s infinite;
}
@keyframes shimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.home-card-img {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0 103px;
  overflow: hidden;
}
.home-card-img img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); transform: scale(1.15);
}
.home-card:hover .home-card-img img { transform: scale(1.2); }

/* Card info: left 120 (relative to card), top 674 (absolute in frame = 674-121=553 from card top) */
/* Figma: Group 6 left 120, top 674. Card top is 121. So inside card: top = 674-121 = 553px */
.home-card-info {
  position: absolute;
  left: 40px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* CAKE / PRICE row label — reuses .cat-card-type from Monuments/Caprichos for consistent alignment */
.home-card-name {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.06em;
  color: #1A1A1A;
}
.home-card-price {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.06em;
  color: #1A1A1A;
}

/* ===== ABOUT BELLUS ===== */
/* About: 1440×440, #009A44 */
.about-section {
  position: relative;
  width: 100%;
  height: 440px;
  background: #009A44;
  overflow: hidden;
}
/* ABOUT BELLUS label: left 80, top 59, Gilroy-Light 11px ls 8% */
.about-label {
  position: absolute;
  left: calc(50% - 720px + 80px);
  top: 59px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.08em;
  color: #F5F4F0;
  text-transform: uppercase;
}
/* "Inspired by the beauty of Barcelona": left 80, top 117, width 652, 64px */
.about-title {
  position: absolute;
  left: calc(50% - 720px + 80px);
  top: 117px;
  width: 652px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 64px;
  line-height: 100%;
  color: #F5F4F0;
  margin: 0;
}
/* Paragraph 1: left 829, top 120, width 393, 16px lh 108% */
.about-text1 {
  position: absolute;
  left: calc(50% - 720px + 829px);
  top: 120px;
  width: 393px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 108%;
  color: #FFFFFF;
  margin: 0;
}
/* Paragraph 2: left 829, top 256, width 383, 16px lh 108% */
.about-text2 {
  position: absolute;
  left: calc(50% - 720px + 829px);
  top: 256px;
  width: 383px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 108%;
  color: #FFFFFF;
  margin: 0;
}

/* ===== FOOTER ===== */
/* Footer: 1440×200, background #009A44 */
.site-footer {
  width: 100%;
  background: #009A44;
  flex-shrink: 0;
}
.footer-inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  height: 200px;
  margin: 0 auto;
}

/* Logo white: 80×59, left 59, top 63 */
.footer-logo-wrap {
  position: absolute;
  left: 59px;
  top: 63px;
  width: 80px;
  height: 59px;
  display: block;
}
.footer-logo-wrap img {
  width: 80px;
  height: 59px;
  object-fit: contain;
}

/* Footer nav: MONUMENTS 557 / CAPRICHOS 667 / FAQ 770 / CONTACT 829 — по Figma */
.footer-nav {
  position: absolute;
  left: 557px;
  top: 94px;
  display: flex;
  gap: 0;
}
.footer-nav a {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  transition: opacity 0.2s;
}
/* Footer nav позиции по Figma: 557 / 667 / 770 / 829px от края страницы */
.footer-nav a:nth-child(1) { width: 74px; }
.footer-nav a:nth-child(2) { width: 67px; margin-left: 36px; }
.footer-nav a:nth-child(3) { width: 23px; margin-left: 36px; }
.footer-nav a:nth-child(4) { width: 55px; margin-left: 36px; }
.footer-nav a:hover { opacity: 0.8; }

/* Copyright: left 1216, top 94, Gilroy-Light 11px ls 6% */
.footer-copy {
  position: absolute;
  left: 1216px;
  top: 94px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  white-space: nowrap;
}

/* ===== SIDE PANEL ===== */
/* Panel: 480×717, bg #FFFFFF */
.panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  display: flex;
  justify-content: flex-end;
}
.panel-overlay.open { opacity: 1; visibility: visible; }

.panel {
  width: 480px;
  max-width: 100vw;
  height: 100%;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
  overflow-y: auto;
}
.panel-overlay.open .panel { transform: translateX(0); }

/* Header: 480×57, bg #009A44 */
/* width:100% (не 480px!) — на мобиле .panel сужается до 100vw через max-width, но фикс-ширина
   480px здесь заставляла хедер вылезать за экран вправо, и кнопка X (justify-content:space-between)
   уезжала за пределы видимой области — закрыть панель было нечем без перезагрузки страницы. */
.panel-header {
  width: 100%;
  height: 57px;
  background: #009A44;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  flex-shrink: 0;
  border-bottom: 0.5px solid #6B6B6B;
}
/* Title: Gilroy-Light 11px ls 8% white, left 26, top 24 */
.panel-title {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  text-transform: uppercase;
}
/* X: Gilroy-Light 11px ls 8% white, left 453 */
.panel-close {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  cursor: pointer;
}

/* Body */
.panel-body {
  flex: 1;
  padding: 0 0 80px;
  overflow-y: auto;
}

/* Image: 290×337, left 96, top 110 */
.panel-gallery {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 50px 0px;
  height: auto;
}
.panel-gallery-media {
  width: 460px;
  height: 535px;
  display: flex;
flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.panel-gallery-media img,
.panel-gallery-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #FFFFFF;
}
.panel-gallery-media iframe {
  width: 100%;
  height: 260px;
  border: 0;
}
.panel-gallery-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #1A1A1A;
  text-decoration: underline;
  text-align: center;
}
.panel-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.9);
  border: 0.5px solid #6B6B6B;
  border-radius: 50%;
  cursor: pointer;
  font-family: 'Gilroy', sans-serif;
  font-size: 15px;
  color: #1A1A1A;
  z-index: 2;
}
.panel-gallery-arrow.prev { left: 12px; }
.panel-gallery-arrow.next { right: 12px; }
.panel-gallery-arrow:hover { background: #FFFFFF; }
.panel-gallery.single .panel-gallery-arrow,
.panel-gallery.single .panel-gallery-dots { display: none; }

.panel-gallery-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.panel-gallery-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D8D6D0;
  cursor: pointer;
}
.panel-gallery-dot.active { background: #1A1A1A; }

/* COMPOSITION: Gilroy-Medium 11px ls 6%, left 24, top 464 */
.panel-section { padding: 0 24px; margin-bottom: 16px; }
.panel-label {
  font-family: 'Gilroy', sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.06em;
  color: #1A1A1A;
  margin-bottom: 8px;
}
/* Description/composition text: Gilroy-Light 10px ls 6% lh 120%, left 24 */
.panel-text {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 10px;
  line-height: 120%;
  letter-spacing: 0.06em;
  color: #1A1A1A;
  width: 370px;
}
/* Storage & Travel text: Gilroy-Light 12px ls 6% lh 120% (крупнее description) */
#modal-storage {
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* Weight/Serves cards: 130×56, border 0.5px #6B6B6B, radius 4, bg #F5F4F0 */
.panel-cards {
  display: flex;
  gap: 27px;
  padding: 0 24px;
  margin-bottom: 16px;
}
.panel-card {
  width: 130px;
  height: 56px;
  background: #F5F4F0;
  border: 0.5px solid #6B6B6B;
  border-radius: 4px;
  padding: 10px 10px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* WEIGHT/SERVES label: Gilroy-Medium 9px ls 8% */
.panel-card .panel-label {
  font-family: 'Gilroy', sans-serif;
  font-weight: 500;
  font-size: 9px;
  line-height: 100%;
  letter-spacing: 0.08em;
  color: #1A1A1A;
  margin-bottom: 0;
}
/* Value: Gilroy-Light 9px ls 8% */
.panel-card-value {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 9px;
  line-height: 100%;
  letter-spacing: 0.08em;
  color: #1A1A1A;
}
/* Multi-line weight/price (Caprichos: "1 pcs X €\n5 pcs Y €") */
.panel-multiline {
  white-space: pre-line;
  line-height: 150%;
}
/* Расширяем карточку если две строки */
.panel-card:has(.panel-multiline) {
  height: auto;
  min-height: 56px;
}
/* FLAVOURS: как panel-text но с pre-line */
.panel-flavours {
  white-space: pre-line;
}

/* ALLERGENS: Gilroy-Medium 11px ls 6%, left 24, top 605 */
/* Tags: 60×20, bg #009A44, radius 20 */
.panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
}
/* Gilroy-Medium 10px ls 8% white */
.allergen-tag {
  height: 20px;
  background: #009A44;
  border-radius: 20px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  font-family: 'Gilroy', sans-serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 100%;
  letter-spacing: 0.08em;
  color: #FFFFFF;
}

/* Footer CTA: 480×48, bg #009A44 */
.panel-footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 48px;
  background: #009A44;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* ORDER THIS CAKE: Gilroy-Medium 11px ls 6% white */
.panel-cta {
  font-family: 'Gilroy', sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  text-decoration: none;
  text-transform: uppercase;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1440px) {
  .hero-img { left: calc(50% + 46px); }
  .view-all { left: auto; right: 80px; }
  .footer-copy { left: auto; right: 80px; }
}

@media (max-width: 960px) {
  /* ===== HERO (мобильный порядок: фото торта сверху, потом промо-карточка) ===== */
  .hero {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 20px 40px;
    gap: 24px;
  }
  .hero::after { display: none; }

  .hero-img {
    position: relative; left: auto; top: auto;
    order: -1;
    /* z-index:1 — torт должен быть ПОД плашкой в зоне нахлёста (плашка перекрывает низ торта,
       не наоборот). Раньше это держалось только на flex `order` (спека говорит, что порядок
       покраски флекс-айтемов следует order-modified document order — торт с order:-1 красится
       первым/ниже), но как минимум на iOS Safari это не соблюдается: торт оказывался ПОВЕРХ
       плашки. Явный z-index надёжнее и не зависит от трактовки order разными движками. */
    z-index: 1;
    /* было 74% — считалось от урезанной паддингами ширины .hero (~350px), давало ~259px
       вместо 287px по Figma. 100% + тот же max-width сразу упирается в кэп. */
    width: 100%;
    max-width: 287px;
    height: auto;
    margin: 0 auto;
  }
  .hero-img img { width: 100%; height: auto; object-fit: contain; }

  /* Промо-карточка: становится видимым блоком-контейнером (176px по Figma) */
  /* По Figma плашка заходит внахлёст на низ торта (~176px) и чуть-чуть на зелёный About снизу —
     тянем её вверх отрицательным margin-top поверх торта; position:relative уже даёт ей
     стек-контекст выше статичного .about-section, так что нахлёст на зелёный тоже сработает. */
  .hero-card-bg-mobile {
    display: block;
    position: relative;
    z-index: 2; /* выше торта (z-index:1) — плашка должна перекрывать низ торта, не наоборот */
    width: 100%;
    max-width: 350px;
    /* Измерил напрямую на живом сайте: реальное фото торта (Supabase, залито через админку)
       имеет соотношение высота/ширина = 1.25 (naturalHeight/naturalWidth), а не 900/651=1.383,
       как давал десктопный бокс в Figma. При 287px ширины реальная высота ≈359px, а не 397px —
       из-за этого -56px давали почти нулевой/положительный зазор вместо нахлёста. Пересчитано. */
    margin: -80px auto 0;
    height: 176px;
    background: #E0DED8;
    border-radius: 16px;
  }
  .hero-eyebrow-mobile {
    display: block;
    position: absolute;
    left: 20px;
    top: 20px;
    font-family: 'Gilroy', sans-serif;
    font-weight: 300;
    font-size: 9px;
    letter-spacing: 0.06em;
    color: #6B6B6B;
  }
  .hero-sticker {
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    width: 84%;
    max-width: 292px;
    height: auto;
  }
  .view-collection {
    position: absolute;
    left: 20px;
    top: auto;
    bottom: 20px;
    margin-top: 0;
    display: inline-block;
    font-size: 10px;
  }

  /* ===== ABOUT (в поток, без абсолютных координат) ===== */
  .about-section {
    /* Десктопная база даёт position:relative — на мобиле сбрасываем в static, иначе
       .about-section (positioned, z-index:auto, позже в DOM) перебьёт по стеку .hero-card-bg-mobile
       (тоже positioned, z-index:auto) и зелёный окажется ПОВЕРХ плашки, а нужно наоборот. */
    position: static;
    height: auto;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    /* margin-top: 0 — нахлёст на зелёный убран по вашему решению (было -71px).
       overflow:visible оставляем как есть — десктопная база даёт overflow:hidden, а он
       и не нужен на мобиле, и раньше резал текст при отрицательном margin-top. */
    overflow: visible;
    margin-top: 0px;
  }
  .about-label,
  .about-title,
  .about-text1 {
    position: relative; left: auto; top: auto; width: auto;
  }
  .about-label { margin-bottom: 12px; font-size: 10px; }
  .about-title { font-size: 24px; line-height: 110%; margin-bottom: 16px; }
  .about-text1 { font-size: 10px; line-height: 108%; }
  /* В мобильном макете Figma второй абзац отсутствует */
  .about-text2 { display: none; }

  /* ===== CATALOGUE ===== */
  .catalogue { height: auto; padding: 40px 20px 60px; }
  .cat-label, .view-all {
    position: relative; left: auto; right: auto; top: auto;
  }
  .cat-label { display: inline-block; }
  .view-all { float: right; }
  .home-grid { position: relative; top: auto; left: auto; right: auto; clear: both; margin-top: 20px; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0; }
  .home-card { width: 100%; height: auto; aspect-ratio: 400/620; }

  .footer-inner { height: auto; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .footer-logo-wrap, .footer-nav, .footer-copy { position: relative; left: auto; top: auto; right: auto; }
  .footer-nav { gap: 20px; }
  .footer-nav a { width: auto !important; margin-left: 0 !important; }

  /* Гамбургер слева, BELLUS по центру, языковой переключатель скрыт (как в Figma-мобилке) */
  /* z-index:101 — обязателен: .nav-links лежит внутри того же .site-header и имеет z-index:99,
     сравнение идёт между СОСЕДЯМИ (menu-toggle vs nav-links), а не с их предком — z-index:100
     самого .site-header тут не спасает. Без этого открытая панель перекрывала бургер,
     и закрыть меню было нечем (нужна была перезагрузка). */
  .menu-toggle {
    display: flex;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 101;
    transition: left 0.2s, right 0.2s;
  }
  .nav-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    transition: left 0.2s;
  }
  /* При открытом меню (по Figma "Mobile Menu Open"): BELLUS уходит влево (left:13px),
     крестик — вправо (было слева при закрытом меню). .menu-open вешается на .site-header
     из shared.js вместе с .open на .nav-links/.menu-toggle. */
  .site-header.menu-open .nav-brand {
    left: 13px;
    transform: translateY(-50%);
  }
  .site-header.menu-open .menu-toggle {
    left: auto;
    right: 16px;
  }
  .lang-switch { display: none; }

  /* ===== Полноэкранное тёмное меню (Figma "Mobile Menu Open") ===== */
  .nav-links {
    position: fixed;
    top: 52px; left: 0; right: 0; bottom: 0;
    background: #1A1A1A;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 20px 32px;
    gap: 8px;
    overflow-y: auto;
    transform: translateY(-100%); /* ровно своя высота — гарантированно полностью за экраном */
    transition: transform 0.3s;
    z-index: 99;
  }
  .nav-links.open { transform: translateY(0); }
  /* Крупные пункты меню — 32px Gilroy-Light, CONTACT выделен зелёным (по Figma) */
  .nav-links a {
    font-family: 'Gilroy', sans-serif;
    font-weight: 300;
    font-size: 32px;
    line-height: 110%;
    letter-spacing: 0.08em;
    color: #F5F4F0;
  }
  .nav-links a:hover { color: #F5F4F0; }
  .nav-links a[href="contact.html"] { color: #009A44; }

  .mobile-menu-divider {
    display: block;
    width: 100%;
    height: 0;
    margin-top: 11px;
    border-top: 0.5px solid rgba(245, 244, 240, 0.57);
  }
  .mobile-menu-bottom-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
  }
  .mobile-menu-lang {
    display: flex;
    gap: 16px;
  }
  .mobile-menu-lang .lang-btn {
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: rgba(245, 244, 240, 0.57);
    padding: 0;
  }
  .mobile-menu-lang .lang-btn.active { color: #F5F4F0; }
  .mobile-menu-instagram {
    font-family: 'Gilroy', sans-serif;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #F5F4F0;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

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

/* ===== MONUMENTS / CAPRICHOS PAGE ===== */
/* Page: 1440×2205, bg #F5F4F0 */
.monuments-page, .caprichos-page {
  width: 100%;
  background: #F5F4F0;
  padding-bottom: 80px;
}

/* Label wrap: MONUMENTS left:75 top:36 (Figma: y=88abs - 52nav = 36) */
.page-label-wrap {
  padding: 36px 0 0 75px;
  max-width: 1440px;
  margin: 0 auto;
}

/* MONUMENTS — Gilroy-UltraLight 11px ls 8% */
.page-label {
  display: block;
  font-family: 'Gilroy', sans-serif;
  font-weight: 200;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.08em;
  color: #000;
}

/* Line under label: width 73px, 2px below label */
.page-label-line {
  width: 73px;
  height: 0;
  border-bottom: 0.5px solid #000;
  margin-top: 2px;
}

/* Subtitle: Figma y=124abs-52nav=72, so 72-(36+9+2)=25px margin from line */
.page-subtitle {
  margin-top: 25px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 16px;
  color: #6B6B6B;
}

/* Grid: Figma first row y=176abs-52nav=124 from content top; subtitle ends at 88px; margin=36px */
.cat-grid {
  display: grid;
  grid-template-columns: 400px 400px 400px;
  column-gap: 40px;
  row-gap: 36px;
  padding: 0 75px;
  margin-top: 36px;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* Card: 400×620, bg #E0DED8, border 1px #E0DED8 */
.cat-card {
  width: 100%;       /* заполняет колонку грида, не распирает её */
  min-width: 0;      /* предотвращает overflow из grid-item */
  height: 620px;
  background: #E0DED8;
  border: 1px solid #E0DED8;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.cat-card.placeholder {
  animation: shimmer 1.8s infinite;
}
.cat-card-img {
  flex: 1;
  min-height: 0;     /* предотвращает flex-item overflow */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0 103px;
  overflow: hidden;
}
.cat-card-img img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
transform: scale(1.15);
}
.cat-card:hover .cat-card-img img { transform: scale(1.2); }

/* Card info: left 40px inside card, bottom 30px */
/* Figma: info at left:115 inside card starting at left:75. So 115-75=40px */
.cat-card-info {
  position: absolute;
  left: 40px;
  bottom: 37px; /* Figma: card 620, info top 553, info h 30 → 620-553-30=37 */
  display: flex;
  flex-direction: column;
  gap: 10px; /* Figma: line2 at y=18, line1 h=8 → gap=18-8=10px */
}
.cat-card-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
/* CAKE/PRICE/PRODUCT type label — Gilroy-Light 11px ls 6% #1A1A1A */
.cat-card-type {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.06em;
  color: #1A1A1A;
  min-width: 65px; /* достаточно для "PRODUCT" — самого широкого лейбла */
  flex-shrink: 0;
}
.cat-card-name,
.cat-card-price {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.06em;
  color: #1A1A1A;
}

.empty-state {
  padding: 40px 0;
  font-size: 13px;
  color: #6B6B6B;
  grid-column: 1/-1;
}

@media (max-width: 1300px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); padding: 0 40px; }
  .cat-card { width: 100%; }
}
@media (max-width: 900px) {
  .page-label-wrap { padding: 20px 20px 0; }
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 20px;
    column-gap: 16px;
    row-gap: 24px;
    margin-top: 20px;
  }
  .cat-card { height: auto; aspect-ratio: 400/620; }
  /* Мобильные карточки 169×262 (Figma "Monuments Mobile") — десктопные px были рассчитаны под 400×620,
     на узкой карточке текст/картинка съезжали. Ниже — пропорциональные (в %) версии тех же чисел. */
  /* Длинные названия (напр. "FLAVOURED BUTTER COLLECTION") переносятся на 2 строки —
     .cat-card-info абсолютно спозиционирован и растёт вверх, залезая на фото, если снизу
     не оставлено запаса. Увеличил нижний паддинг картинки (было 16%) под 2-строчные названия. */
  .cat-card-img { padding: 2% 0 34%; }
  .cat-card-info {
    left: 9%;
    right: 9%;
    bottom: 6%;
    gap: 4px;
  }
  .cat-card-row { gap: 8px; }
  .cat-card-type { font-size: 7px; min-width: 34px; }
  .cat-card-name,
  .cat-card-price { font-size: 7px; line-height: 130%; }
}

/* ===== CONTACT PAGE ===== */
/* Новый дизайн: левый контент + фото справа */
/* Figma frame #60:66: 1440×659, nav 52px → content 607px */
.contact-page {
  width: 100%;
  min-height: 607px;
  background: #F5F4F0;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto; /* забирает остаток высоты экрана внутри body, вместо футера */
}

/* Центрированный контейнер 1440px — фото позиционируется внутри него */
.contact-inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  min-height: 607px;
  margin: 0 auto;
  overflow: hidden;
  flex: 1 0 auto; /* растягивается вместе с .contact-page */
}

/* Фото справа: по Figma (node 60:67 → IMG_8864 1, #67:107).
   Раньше был фикс-пиксельный блок 991×1238 — обрезался жёстко и не умел тянуться
   под высоту экрана (отсюда были все истории с зазором под футером).
   Теперь блок растягивается на всю доступную высоту (top:0;bottom:0),
   а object-fit:cover сам подбирает нужный кроп под любую высоту без искажений. */
/* Контейнер: задаем ему стабильный фиксированный размер (чуть меньше, чем в Figma) */
/* ===== CONTACT PAGE — ФИНАЛЬНЫЙ ФИКС ===== */
.contact-photo-wrap {
  position: absolute;
  left: 650px;
  
  /* Возвращаем фиксированный top, чтобы игнорировать высоту экрана */
  top: -13px;          
  
  /* Жёсткие размеры, которые вам подошли по масштабу */
  width: 750px;         
  height: 1037px;        
  overflow: hidden;
  pointer-events: none;
  transform: none; 
}

.contact-photo-img {
  width: 100%;
  height: 100%;
  
  /* Возвращаем cover, чтобы картинка плотно заполняла рамку */
  object-fit: cover;    
  
  /* Центрируем её по горизонтали и прижимаем к самому низу внутри рамки */
  object-position: center bottom; 
  
  display: block;
  box-shadow: 0px 6px 10.9px rgba(0, 0, 0, 0.31);
}

/* Левый контент */
.contact-content {
  position: relative;
  z-index: 1;
}

/* GET IN TOUCH: x=78, y=81 (133abs-52nav), Gilroy-Light 11px ls 8% */
.contact-eyebrow {
  position: absolute;
  left: 78px;
  top: 81px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.08em;
  color: #000;
}

/* Headline: x=79, y=120 (172-52), width=650, Gilroy-Light 64px LEFT */
.contact-headline {
  position: absolute;
  width: 650px;
  left: 79px;
  top: 120px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 64px;
  line-height: 100%;
  text-align: left;
  color: #1A1A1A;
}

/* Subtitle: x=81, y=263 (315-52), width=567, Gilroy-Light 14px LEFT ls 8% */
.contact-sub {
  position: absolute;
  width: 567px;
  left: 81px;
  top: 263px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 100%;
  text-align: left;
  letter-spacing: 0.08em;
  color: #1E1E1E;
}

/* Email: x=77, y=370 (422-52), Gilroy-MEDIUM 40px GREEN #009A44 + underline */
.contact-email {
  position: absolute;
  left: 77px;
  top: 370px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 100%;
  text-align: left;
  letter-spacing: 0.06em;
  color: #009A44;
  text-decoration: underline;
  text-decoration-color: #009A44;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* INSTAGRAM: x=80, y=442 (494-52), Gilroy-Light 12px + underline */
.contact-instagram {
  position: absolute;
  left: 80px;
  top: 442px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.06em;
  color: #1E1E1E;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Address: x=80, y=481 (533-52) */
.contact-location {
  position: absolute;
  left: 80px;
  top: 481px;
  white-space: nowrap;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.06em;
  color: #1E1E1E;
}

/* Phone · Hours: x=79, y=504 (556-52) */
.contact-phone-row {
  position: absolute;
  left: 79px;
  top: 504px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.contact-separator {
  font-family: 'Gilroy', sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: #6B6B6B;
}
.contact-phone {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #6B6B6B;
  white-space: nowrap;
}
.contact-hours {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #6B6B6B;
  white-space: nowrap;
}

@media (max-width: 960px) {
  .contact-page { min-height: auto; padding: 40px 20px 60px; overflow: visible; }
  .contact-photo-wrap { display: none; }
  .contact-eyebrow,
  .contact-headline,
  .contact-sub,
  .contact-email,
  .contact-instagram,
  .contact-location,
  .contact-phone-row { position: relative; left: auto; top: auto; transform: none; display: block; }
  .contact-eyebrow { margin-bottom: 20px; font-size: 10px; color: #6B6B6B; }
  .contact-headline { font-size: clamp(28px, 8vw, 48px); margin-bottom: 20px; width: 100%; }
  .contact-sub { width: 100%; margin-bottom: 24px; font-size: 13px; }
  .contact-email { font-size: clamp(18px, 5vw, 28px); margin-bottom: 20px; }
  .contact-instagram { margin-bottom: 14px; }
  .contact-location { white-space: normal; margin-bottom: 8px; }
}

/* ===================================================
   FAQ PAGE
   =================================================== */

.faq-page {
  position: relative;
  width: 100%;
  min-height: calc(1198px - 52px);
  background: #F5F4F0;
  overflow: hidden;
}

/* Monogram watermark */
.faq-watermark {
  position: absolute;
  width: 259px;
  height: 603px;
  left: calc(50% - 129.5px);
  top: calc(50% - 301.5px);
  pointer-events: none;
  z-index: 0;
}
.faq-watermark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.06;
}

/* FAQ label: left 79, top 87, Gilroy-UltraLight 11px ls 8% */
.faq-label {
  position: absolute;
  left: calc(50% - 720px + 79px);
  top: 87px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 200;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.08em;
  color: #000;
  z-index: 1;
}
.faq-label::after {
  content: '';
  display: block;
  width: 22px;
  height: 0;
  border-top: 0.5px solid #000;
  margin-top: 8px;
}

/* "COMMON QUESTIONS": left 75, top 128, Gilroy-Light 64px lh 105% */
.faq-title {
  position: absolute;
  left: calc(50% - 720px + 75px);
  top: 128px;
  width: 601px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 64px;
  line-height: 105%;
  color: #1A1A1A;
  margin: 0;
  z-index: 1;
}

/* Accordion list: left 80, starts at top 326 */
.faq-list {
  position: absolute;
  left: calc(50% - 720px + 80px);
  top: 326px;
  width: 600px;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

/* Single FAQ item */
.faq-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: 0.5px solid #6B6B6B;
}

/* Question row: question text + icon */
.faq-question {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0 12px;
  cursor: pointer;
  user-select: none;
}

.faq-question-text {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.08em;
  color: #000;
  flex: 1;
}

/* + icon, rotates to × when open */
.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
  color: #000;
  transition: transform 250ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq-item.open .faq-icon {
  transform: rotate(-45deg);
}

/* Answer: collapses with smooth height animation */
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 250ms ease, padding 250ms ease;
}
.faq-item.open .faq-answer {
  max-height: 400px; /* достаточно для любого ответа */
}

.faq-answer-text {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 10px;
  line-height: 120%;
  letter-spacing: 0.06em;
  color: #1A1A1A;
  padding-bottom: 16px;
}

@media (max-width: 960px) {
  .faq-page { min-height: auto; padding: 60px 24px 80px; }
  .faq-label, .faq-title, .faq-list { position: relative; left: auto; top: auto; }
  .faq-label { margin-bottom: 16px; }
  .faq-title { font-size: clamp(36px, 8vw, 64px); margin-bottom: 32px; width: 100%; }
  .faq-list { width: 100%; }
  .faq-watermark { display: none; }
}