﻿/* ══════════════════════════════════════════════════════
   index.css — Homepage (index.html) specific styles.
   Load order: styles.css → index.css → mobile.css.

   ⚠ TRAP: most HOME *content* sections (dark-strip, feature, wine,
   services, quote, testimonial, gift-banner) live in styles.css
   (grep "HOME:"), NOT here. This file = homepage extras + overrides.

   NAVIGATION — grep "=== " for these top-level anchors:
     === HOME PAGE (index) ===             base / shared
     === GIFT CARD MODAL (base) ===        gc-modal, all widths  (~L15)
     === MOBILE: HOME ===                  @media ≤767px          (~L365)
     === DESKTOP: HOME (>=768px) ===       @media ≥768px          (~L1494)
     === DESKTOP WIDE: HOME (>=1100px) === @media ≥1100px         (~L1962)
   (line hints approximate — grep the anchor text, not the number)
   Map: PROJECT_MAP.md · Rules: CLAUDE.md
══════════════════════════════════════════════════════ */


/* === HOME PAGE (index) === */

/* Accordion is mobile-only — hidden by default, shown inside mobile @media */
.experiences-accordion { display: none; }

/* Hero title has two versions: "Wine Bar & Kitchen" on desktop, "Europa"
   on mobile. Desktop is the default; the mobile spans are hidden until ≤767px
   (shown in mobile.css → MOBILE: HOME). */
.page-home .hero h1 .hero-title-mobile { display: none; }

/* === GIFT CARD MODAL (base) === */
/* ════════════════════════════════════════════
   GIFT CARD MODAL — global base styles
   (applies to all viewport sizes; responsive
   overrides live in the media query blocks below)
════════════════════════════════════════════ */

/* Buy Now button: strip <button> defaults, inherit the .button styles */
button.gift-learn-more { cursor: pointer; }

/* BUY NOW — без золотой обводки (десктоп) */
@media (min-width: 768px) {
  .page-home .gift-learn-more {
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(90,17,26,0.45);
  }
}

/* Backdrop */
.gc-overlay {
  position: fixed;
  inset: 0;
  z-index: 510;
  background: rgba(6, 1, 2, 0.82);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: flex-end;        /* default: bottom-sheet (mobile) */
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.gc-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Modal shell — mobile bottom-sheet by default */
.gc-modal {
  position: relative;
  width: 100%;
  background: linear-gradient(160deg, #1c0507 0%, #0e0204 50%, #080102 100%);
  border: 1px solid rgba(201,169,110,0.16);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -12px 60px rgba(0,0,0,0.70);
  overflow: hidden;
  max-height: 92svh;
  display: flex;
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(0.32, 0, 0.14, 1);
}
.gc-overlay.is-open .gc-modal {
  transform: translateY(0);
}

/* Close button */
.gc-close {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  z-index: 10;
  background: rgba(14,3,7,0.80);
  border: 1px solid rgba(201,169,110,0.22);
  border-radius: 50%;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(201,169,110,0.72);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms, color 180ms, border-color 180ms;
}
.gc-close:hover {
  background: rgba(201,169,110,0.14);
  color: var(--cream, #EFE2CF);
  border-color: rgba(201,169,110,0.42);
}

/* Scrollable content area */
.gc-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.gc-scroll {
  padding: 2.25rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
}

/* Typography */
.gc-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(201,169,110,0.65);
  margin-bottom: 0.65rem;
}
.gc-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.1rem, 8vw, 3.0rem);
  font-weight: 400;
  line-height: 0.97;
  letter-spacing: -0.01em;
  color: var(--cream, #EFE2CF);
  margin-bottom: 1.0rem;
}
.gc-body {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  line-height: 1.70;
  color: rgba(239,226,207,0.50);
  margin-bottom: 1.65rem;
}
.gc-section-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(201,169,110,0.55);
  margin-bottom: 0.7rem;
}

/* Amount selector */
.gc-amounts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.gc-amount-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,169,110,0.18);
  border-radius: 8px;
  color: rgba(239,226,207,0.70);
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.65rem 0.5rem;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background 170ms, border-color 170ms, color 170ms, box-shadow 170ms;
}
.gc-amount-btn:hover {
  background: rgba(201,169,110,0.07);
  border-color: rgba(201,169,110,0.34);
  color: var(--cream, #EFE2CF);
}
.gc-amount-btn.is-selected {
  background: linear-gradient(135deg, #5a1120 0%, #7a1d30 100%);
  border-color: rgba(122,29,48,0.65);
  color: var(--cream, #EFE2CF);
  box-shadow: 0 4px 18px rgba(90,17,32,0.48);
}
.gc-custom-wrap {
  margin-bottom: 0.85rem;
}

/* Delivery method */
.gc-delivery-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.65rem;
}
.gc-delivery-btn {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(201,169,110,0.12);
  border-radius: 10px;
  padding: 0.85rem 1.0rem;
  cursor: pointer;
  text-align: left;
  transition: background 170ms, border-color 170ms;
}
.gc-delivery-btn:hover {
  background: rgba(201,169,110,0.05);
  border-color: rgba(201,169,110,0.22);
}
.gc-delivery-btn.is-selected {
  background: rgba(90,17,32,0.22);
  border-color: rgba(122,29,48,0.55);
}
.gc-delivery-icon {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(201,169,110,0.50);
  transition: color 170ms;
}
.gc-delivery-btn.is-selected .gc-delivery-icon { color: rgba(201,169,110,0.88); }
.gc-delivery-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.gc-delivery-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(239,226,207,0.75);
  transition: color 170ms;
}
.gc-delivery-btn.is-selected .gc-delivery-title { color: var(--cream, #EFE2CF); }
.gc-delivery-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.70rem;
  color: rgba(239,226,207,0.36);
  line-height: 1.4;
}

/* Form */
.gc-form { margin-bottom: 1.6rem; }
.gc-form-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(201,169,110,0.55);
  margin-bottom: 0.55rem;
  margin-top: 1.1rem;
  display: block;
}
.gc-form-label:first-child { margin-top: 0; }
.gc-optional {
  font-family: 'Inter', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.78em;
  color: rgba(201,169,110,0.35);
}
.gc-form-row {
  display: grid;
  grid-template-columns: 1fr;   /* single column; 2-col on desktop */
  gap: 0.55rem;
}
.gc-field { display: flex; flex-direction: column; }

/* Inputs */
.gc-input {
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(201,169,110,0.16);
  border-radius: 8px;
  color: var(--cream, #EFE2CF);
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  padding: 0.72rem 0.9rem;
  outline: none;
  width: 100%;
  transition: border-color 170ms, box-shadow 170ms;
  appearance: none;
  -webkit-appearance: none;
}
.gc-input::placeholder { color: rgba(239,226,207,0.26); }
.gc-input:focus {
  border-color: rgba(201,169,110,0.40);
  box-shadow: 0 0 0 2.5px rgba(201,169,110,0.08);
}
.gc-input[type="number"]::-webkit-inner-spin-button,
.gc-input[type="number"]::-webkit-outer-spin-button { appearance: none; -webkit-appearance: none; }
.gc-input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Textarea */
.gc-textarea-wrap { position: relative; }
.gc-textarea {
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(201,169,110,0.16);
  border-radius: 8px;
  color: var(--cream, #EFE2CF);
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  padding: 0.72rem 0.9rem 1.9rem;
  outline: none;
  width: 100%;
  resize: vertical;
  transition: border-color 170ms, box-shadow 170ms;
  appearance: none;
  -webkit-appearance: none;
}
.gc-textarea::placeholder { color: rgba(239,226,207,0.26); }
.gc-textarea:focus {
  border-color: rgba(201,169,110,0.40);
  box-shadow: 0 0 0 2.5px rgba(201,169,110,0.08);
}

/* Gift cards modal — Reservation/Private Events field style (desktop only) */
@media (min-width: 768px) {
  #gc-modal .gc-form-label {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--muted-cream, #c9b79a);
  }
  #gc-modal .gc-input,
  #gc-modal .gc-textarea {
    background: rgba(239,226,207,0.05);
    border: 1px solid rgba(201,169,110,0.22);
    border-radius: 0;
    color: var(--text-light, #EFE2CF);
    font-size: 0.95rem;
  }
  #gc-modal .gc-input::placeholder,
  #gc-modal .gc-textarea::placeholder {
    color: rgba(244,235,217,0.28);
  }
  #gc-modal .gc-input:focus,
  #gc-modal .gc-textarea:focus {
    border-color: rgba(201,169,110,0.6);
    background: rgba(90,17,26,0.14);
    box-shadow: 0 0 0 2px rgba(201,169,110,0.10), 0 0 18px rgba(90,17,26,0.32);
  }
  /* square corners — like reservation modal blocks (no rounding anywhere) */
  #gc-modal .gc-modal,
  #gc-modal .gc-close,
  #gc-modal .gc-amount-btn,
  #gc-modal .gc-delivery-btn,
  #gc-modal .gc-submit {
    border-radius: 0;
  }
  /* divider after description text — like reservation modal subtitle */
  #gc-modal .gc-body {
    border-bottom: 1px solid rgba(239,226,207,0.1);
    padding-bottom: 1rem;
    margin-bottom: 1.1rem;
  }
  /* compact paddings so the modal fits on screen */
  #gc-modal .gc-scroll { padding-top: 1.4rem; padding-bottom: 1.4rem; }
  #gc-modal .gc-form-label { margin-top: 0.7rem; }
  #gc-modal .gc-delivery-btn { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  /* dark scrollbar (was system white) */
  #gc-modal .gc-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(201,169,110,0.28) transparent;
  }
  #gc-modal .gc-content::-webkit-scrollbar { width: 8px; }
  #gc-modal .gc-content::-webkit-scrollbar-track { background: transparent; }
  #gc-modal .gc-content::-webkit-scrollbar-thumb {
    background: rgba(201,169,110,0.25);
    border-radius: 4px;
  }
  #gc-modal .gc-content::-webkit-scrollbar-thumb:hover {
    background: rgba(201,169,110,0.42);
  }
}
.gc-char-count {
  position: absolute;
  bottom: 0.55rem;
  right: 0.8rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  color: rgba(201,169,110,0.38);
  pointer-events: none;
}

/* CTA button */
.gc-submit {
  width: 100%;
  background: linear-gradient(160deg, #5a1120 0%, #7a1d30 55%, #5a1120 100%);
  border: 1px solid rgba(122,29,48,0.55);
  border-radius: 10px;
  color: var(--cream, #EFE2CF);
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 1.0rem 1.5rem;
  cursor: pointer;
  box-shadow: 0 6px 26px rgba(70,12,24,0.50);
  transition: background 210ms, box-shadow 210ms;
  margin-bottom: 1.15rem;
  margin-top: 0.25rem;
}
.gc-submit:hover {
  background: linear-gradient(160deg, #6e1528 0%, #8e2238 55%, #6e1528 100%);
  box-shadow: 0 8px 34px rgba(70,12,24,0.68);
}

/* Secondary link */
.gc-learn-link {
  display: block;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(201,169,110,0.52);
  text-decoration: none;
  transition: color 170ms;
}
.gc-learn-link:hover { color: rgba(201,169,110,0.82); }

/* Быстрые кнопки в контактах скрыты на десктопе — правило в styles.css,
   потому что блок теперь есть на всех страницах. */

/* Короткий текст плашки — только мобильная. Полный вариант виден по умолчанию. */
.hb-compact,
.hb-hours { display: none; }

/* Короткое описание hero — только мобильная */
.hero-text-short { display: none; }

/* ════════════════════════════════════════════
   MOBILE  (≤ 767px)  — luxury app redesign
   Reference: attached concept mockup
════════════════════════════════════════════ */
/* === MOBILE: HOME === */
@media (max-width: 767px) {

  /* Порядок секций на мобильной. Еда идёт сразу после hero — блюда должны
     попадаться на глаза раньше, чем текстовые блоки. Десктоп этого не видит:
     main остаётся обычным блоком вне этого media. */
  .page-home main {
    display: flex;
    flex-direction: column;
  }
  .page-home .hero               { order: 1; }
  .page-home .feature-section    { order: 2; }   /* фото стола + Made from tradition */
  .page-home .dark-strip         { order: 3; }   /* What makes us special */
  .page-home .wine-feature       { order: 4; }
  .page-home .quote-strip        { order: 5; }
  .page-home .services-section   { order: 6; display: none; }
  .page-home .experiences-accordion { order: 6; }/* For every occasion */
  .page-home .gift-banner        { order: 7; }
  /* Стрелка вниз больше не нужна: пустота под hero убрана, следующая секция видна сразу */
  .page-home .hero-scroll-hint   { display: none; }

  .page-width {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }


  /* ══════════════════════════════════════════
     1. HERO — full-screen cinematic
  ══════════════════════════════════════════ */
  .page-home .hero {
    min-height: 72svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding-top: 14svh;
  }

  .page-home .hero-photo {
    inset: 0 0 0 30%;
    background-image: url('photos/main-page/hero-mobile.webp') !important;
    background-position: 0% 0%;
    background-size: cover;
  }

  .page-home .hero-vignette::before { display: none; }

  .page-home .hero-vignette {
    background:
      /* Left half darkened — text sits on dark */
      linear-gradient(to right,
        rgba(8,2,2,0.95) 0%,
        rgba(8,2,2,0.90) 25%,
        rgba(8,2,2,0.72) 38%,
        rgba(8,2,2,0.38) 52%,
        rgba(8,2,2,0.10) 66%,
        transparent 80%
      ),
      linear-gradient(to bottom,
        rgba(8,2,2,0.80) 0%,
        rgba(8,2,2,0.30) 16%,
        transparent 34%
      ),
      linear-gradient(to top,
        #080202 0%,
        rgba(8,2,2,0.97) 18%,
        rgba(8,2,2,0.72) 38%,
        rgba(8,2,2,0.30) 62%,
        transparent 78%
      );
  }

  .page-home .hero-inner {
    align-items: flex-start;
    padding: 0 1.25rem;
    width: 100%;
  }

  .page-home .hero-copy {
    width: 58%;
    max-width: none;
    padding: 2rem 0 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Eyebrow — hidden on mobile */
  .page-home .hero-eyebrow { display: none; }

  /* Large editorial serif — 2-line "Wine Bar / & Kitchen" */
  .page-home .hero h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(3.1rem, 13vw, 4.8rem);
    font-weight: 400;
    font-style: normal;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--cream, #EFE2CF);
    margin-bottom: 0;
    text-shadow: 0 2px 40px rgba(0,0,0,0.32);
    max-width: none;
  }

  /* Scroll-down chevron — hidden on desktop, handled separately below on mobile */
  .page-home .hero-scroll-hint { display: none; }

  .page-home .hero-rule {
    display: block;
    width: 2.5rem;
    height: 1px;
    background: linear-gradient(to right, rgba(201,169,110,0.70), rgba(201,169,110,0.10));
    margin: 1.5rem 0;
  }

  .page-home .hero-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.96rem;
    line-height: 1.76;
    color: rgba(239,226,207,0.82);
    max-width: 28ch;
    margin-bottom: 2.5rem;
    text-shadow: 0 1px 12px rgba(0,0,0,0.65), 0 2px 28px rgba(0,0,0,0.45);
  }

  .page-home .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    width: min(272px, calc(100vw - 2.5rem));
    max-width: none;
  }

  /* Primary: deep burgundy — matches reference */
  .page-home .hero-actions .button-primary {
    background: linear-gradient(160deg, #5a1120 0%, #7a1d30 55%, #5a1120 100%);
    border: 1px solid rgba(122,29,48,0.55);
    color: var(--cream, #EFE2CF);
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 1.1rem 1.5rem;
    border-radius: 10px;
    min-width: unset;
    width: 100%;
    text-align: center;
    box-shadow: 0 6px 28px rgba(70,12,24,0.58), 0 1px 6px rgba(0,0,0,0.32);
    transition: background 220ms, box-shadow 220ms;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  .page-home .hero-actions .button-primary:hover {
    background: linear-gradient(160deg, #6e1528 0%, #8e2238 55%, #6e1528 100%);
    box-shadow: 0 8px 36px rgba(70,12,24,0.70);
  }

  /* Secondary: glass ghost */
  .page-home .hero-actions .button-outline {
    background: rgba(8,2,2,0.28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(239,226,207,0.24);
    color: rgba(239,226,207,0.74);
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 1.1rem 1.5rem;
    border-radius: 10px;
    min-width: unset;
    width: 100%;
    text-align: center;
    transition: background 220ms, border-color 220ms, color 220ms;
  }
  .page-home .hero-actions .button-outline:hover {
    background: rgba(239,226,207,0.09);
    border-color: rgba(239,226,207,0.38);
    color: var(--cream, #EFE2CF);
  }


  /* 1b. SCROLL HINT — блок удалён 31.08.2026 вместе с элементом .hero-scroll-hint */
  @keyframes scroll-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(4px); }
  }

  /* ══════════════════════════════════════════
     2. DARK STRIP — premium 2×2 tactile cards
        Icon top · title · body (vertical)
  ══════════════════════════════════════════ */
  .page-home .dark-strip {
    background:
      linear-gradient(160deg, rgba(65,10,20,0.55) 0%, #0b0203 55%);
    margin: 0 0.85rem 0;
    scroll-margin-top: 0px;
    border-radius: 26px;
    border: 1px solid rgba(201,169,110,0.12);
    box-shadow:
      0 6px 36px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(201,169,110,0.06);
    overflow: hidden;
    padding: 1.1rem 1.25rem 3.5rem;
    border: none;
  }

  /* Section header visible */
  .page-home .dark-strip-header {
    display: block;
    text-align: center;
    margin: 0 auto 1.0rem;
  }

  .page-home .dark-strip-eyebrow { display: none; }

  .page-home .dark-strip-header h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.48rem, 6vw, 1.92rem);
    font-weight: 400;
    color: var(--cream, #EFE2CF);
    line-height: 1.12;
    letter-spacing: -0.01em;
  }

  /* 2×2 grid */
  .page-home .dark-strip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    max-width: none;
    margin: 0;
  }

  /* Premium vertical card — icon top, title, body */
  .page-home .dark-strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    padding: 1.5rem 1.2rem 1.6rem;
    border-radius: 18px;
    background: linear-gradient(148deg, rgba(85,16,24,0.50) 0%, rgba(16,4,7,0.96) 100%);
    border: 1px solid rgba(239,226,207,0.07);
    box-shadow: 0 10px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(239,226,207,0.05);
  }

  .page-home .dark-strip-item .strip-icon {
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.85rem;
    color: rgba(201,169,110,0.78);
    align-self: center;
    flex-shrink: 0;
  }
  .page-home .dark-strip-item .strip-icon svg {
    width: 22px;
    height: 22px;
  }

  .page-home .dark-strip-item h3 {
    font-family: 'Inter', sans-serif;
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--cream, #EFE2CF);
    line-height: 1.3;
    margin: 0 0 0.55rem;
  }

  .page-home .dark-strip-item p {
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    line-height: 1.55;
    color: rgba(176,152,128,0.70);
    margin: 0;
    max-width: none;
  }

  /* Reserve CTA below grid */
  .page-home .dark-strip-cta {
    display: block;
    padding: 2rem 0 0;
  }

  .page-home .dark-strip-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: linear-gradient(160deg, #5a1120 0%, #7a1d30 55%, #5a1120 100%);
    border: 1px solid rgba(122,29,48,0.55);
    border-radius: 12px;
    color: var(--cream, #EFE2CF);
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 1.1rem;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(70,12,24,0.44);
    transition: background 200ms, box-shadow 200ms;
  }
  .page-home .dark-strip-cta a:hover {
    background: linear-gradient(160deg, #6e1528 0%, #8e2238 55%, #6e1528 100%);
    box-shadow: 0 6px 28px rgba(70,12,24,0.58);
  }


  /* ══════════════════════════════════════════
     3. FOOD FEATURE — tall atmospheric image,
        floating warm ivory card overlapping below
  ══════════════════════════════════════════ */
  .page-home .feature-section {
    background: #080202;
    overflow: visible;
    padding: 1.5rem 0 2.25rem !important;   /* сверху 5% высоты hero */
    margin-bottom: 0;
  }

  .page-home .feature-layout {
    display: flex;
    flex-direction: column;
  }

  .page-home .feature-media {
    order: 1;
    flex-shrink: 0;
    position: relative;
  }

  /* Dark fade at photo bottom — card text stays readable */
  .page-home .feature-media::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom,
      transparent 0%,
      rgba(8,2,2,0.55) 45%,
      #080202 90%
    );
    pointer-events: none;
    z-index: 1;
  }

  .feature-image {
    min-height: 94vw;
    background-position: center 25%;
    background-size: cover;
  }

  /* Dark cinematic card floats up over image */
  .page-home .feature-text {
    order: 2;
    position: relative;
    z-index: 2;
    margin-top: -5rem;
    border-radius: 28px;
    background: linear-gradient(160deg, #3d0a10 0%, #180306 50%, #0d0203 100%);
    padding: 2.75rem 1.75rem 1.33rem;
    box-shadow: 0 -16px 52px rgba(0,0,0,0.65);
  }

  .page-home .feature-text .section-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    color: rgba(201,169,110,0.70);
    margin-bottom: 0.9rem;
    display: block;
  }

  .feature-text h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.3rem, 9.8vw, 3.4rem);
    font-weight: 400;
    line-height: 1.0;
    margin-bottom: 1.2rem;
    color: rgba(255,255,255,0.92);
    letter-spacing: -0.01em;
  }

  .page-home .feature-text p {
    font-size: 1.04rem;
    line-height: 1.76;
    color: rgba(255,255,255,0.48);
    margin-bottom: 1.65rem;
  }

  .page-home .feature-text .link-arrow {
    color: rgba(201,169,110,0.82);
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 200ms;
  }
  .page-home .feature-text .link-arrow:hover { color: rgba(201,169,110,1); }


  /* ══════════════════════════════════════════
     4. WINE FEATURE — cinematic dark section
        text block → atmospheric image → carousel
  ══════════════════════════════════════════ */
  .page-home .wine-feature {
    position: relative;
    background:
      linear-gradient(160deg, rgba(65,10,20,0.65) 0%, #0b0203 55%);
    overflow: hidden;
    margin: 0;
    border-radius: 0;
    padding: 0;
  }

  .page-home .wine-layout {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: unset;
  }

  /* Photo: absolute, fills layout area */
  .page-home .wine-photo {
    display: block !important;
    position: absolute !important;
    inset: 0 0 0 2%;
    min-height: unset !important;
    background-image: url('photos/main-page/mobile-our-sellar.webp') !important;
    background-position: center 20%;
    background-size: cover;
    z-index: 0;
  }

  /* Vignette: all four sides — photo blends into block */
  .page-home .wine-layout::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      /* left — stays opaque past text width (62%), fades after */
      linear-gradient(to right,
        #080202 0%,
        rgba(8,2,2,0.99) 30%,
        rgba(8,2,2,0.95) 50%,
        rgba(8,2,2,0.70) 64%,
        rgba(8,2,2,0.25) 76%,
        transparent 88%
      ),
      /* right */
      linear-gradient(to left,
        rgba(8,2,2,0.92) 0%,
        rgba(8,2,2,0.55) 14%,
        transparent 32%
      ),
      /* top */
      linear-gradient(to bottom,
        rgba(8,2,2,0.95) 0%,
        rgba(8,2,2,0.60) 18%,
        transparent 40%
      ),
      /* bottom */
      linear-gradient(to top,
        rgba(8,2,2,0.95) 0%,
        rgba(8,2,2,0.60) 18%,
        transparent 40%
      );
  }

  /* Text: sits above vignette on left side */
  .page-home .wine-text {
    position: relative;
    z-index: 2;
    order: 1;
    width: 62%;
    background: transparent;
    padding: 2.25rem 0 2rem 1.25rem;
    border-left: none;
  }

  .page-home .wine-text p { display: none; }

  .page-home .wine-text .section-label-light {
    font-family: 'Inter', sans-serif;
    font-size: 0.57rem;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(201,169,110,0.65);
    margin-bottom: 0.9rem;
    display: block;
  }

  .wine-text h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.6rem, 11vw, 4rem);
    font-weight: 400;
    line-height: 0.98;
    color: var(--cream, #EFE2CF);
    margin-bottom: 1.35rem;
    letter-spacing: -0.015em;
  }

  .page-home .wine-text p {
    font-size: 0.90rem;
    line-height: 1.76;
    color: rgba(239,226,207,0.42);
    margin-bottom: 1.6rem;
    max-width: 34ch;
  }

  .page-home .wine-text .link-arrow-light {
    color: rgba(201,169,110,0.85);
    font-family: 'Inter', sans-serif;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 200ms;
  }
  .page-home .wine-text .link-arrow-light:hover { color: #c9a96e; }

  /* Carousel: fade-in from above */
  .page-home .wine-carousel-wrap {
    position: relative;
    background: #080202;
    padding: 2rem 0 1.5rem;
  }
  .page-home .wine-carousel {
    padding: 0.25rem 1.25rem 0.5rem;
    gap: 0.75rem;
  }

  /* Gradient overlay that laps over the photo bottom — blends into carousel */
  .page-home .wine-carousel-wrap::before {
    content: '';
    position: absolute;
    top: -5rem;
    left: 0;
    right: 0;
    height: 5rem;
    background: linear-gradient(to bottom,
      transparent 0%,
      rgba(8,2,2,0.65) 55%,
      rgba(8,2,2,0.95) 100%
    );
    pointer-events: none;
    z-index: 3;
  }


  /* Individual bottle cards — dark rounded containers */
  .page-home .bottle-card {
    background: linear-gradient(160deg, rgba(75,14,22,0.55) 0%, rgba(14,3,5,0.97) 100%);
    border-radius: 18px;
    border: 1px solid rgba(239,226,207,0.08);
    box-shadow: 0 4px 24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(239,226,207,0.05);
    padding: 1.5rem 0.6rem 1.25rem;
    gap: 0;
    flex: 0 0 49.4vw;
    max-width: 12.35rem;
  }
  .page-home .bottle-card img {
    height: 58.9vw;
    max-height: 15.2rem;
    padding-bottom: 1.0rem;
  }
  .page-home .bottle-card figcaption {
    padding-top: 0.55rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    border-top: 1px solid rgba(239,226,207,0.08);
    width: 100%;
  }
  .page-home .bottle-card figcaption .bottle-name {
    white-space: normal;
    word-break: break-word;
  }
  .page-home .bottle-region {
    font-size: 0.52rem;
    letter-spacing: 0.28em;
    color: rgba(201,169,110,0.55);
  }
  .page-home .bottle-name {
    font-size: 0.84rem;
    color: rgba(239,226,207,0.88);
    margin-top: 0.1rem;
  }

  /* ══════════════════════════════════════════
     5. QUOTE STRIP — dark, centered, italic
  ══════════════════════════════════════════ */
  .page-home .quote-strip {
    background: #080202;
    border-top: none;
    border-bottom: none;
    /* Блок ниже исходного вдвое, затем возвращено по 10% его высоты
       сверху и снизу (было 4.5rem → 0.7rem → 1.45rem) */
    padding: 1.45rem 1.5rem !important;
  }

  .quote-strip {
    padding: 5rem 1.5rem;
  }

  .quote-strip-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.1rem;
    padding: 0;
  }

  .quote-strip-text {
    font-size: clamp(1.26rem, 5.85vw, 1.755rem);
    font-style: italic;
    line-height: 1.46;
    max-width: 38ch;
    white-space: normal;
    color: var(--cream, #EFE2CF);
  }

  .page-home .quote-strip-text::before,
  .page-home .quote-strip-text::after {
    color: rgba(201,169,110,0.44);
  }

  .page-home .quote-strip-credit {
    color: rgba(201,169,110,0.48);
    font-size: 0.59rem;
    letter-spacing: 0.32em;
  }


  /* ══════════════════════════════════════════
     6. SERVICE CARDS — cinematic editorial
        Text left (55%) · image bleeds right
        Stacked full-bleed, generous height
  ══════════════════════════════════════════ */
  .page-home .services-section {
    background: #060101;
    padding: 0 0.85rem 2rem;
  }

  .page-home .services-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: transparent;
  }

  /* Each card: rounded, text left, image bleeds right */
  .page-home .svc-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    min-height: 220px;
    display: block;
    padding: 2.5rem 38% 2.5rem 1.5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  }

  /* Private Events — taller, darker atmosphere */
  .page-home .svc-hero {
    min-height: 260px;
    padding: 2.75rem 38% 2.75rem 1.5rem;
    background:
      linear-gradient(to right,
        rgba(6,1,3,0.99) 0%,
        rgba(6,1,3,0.97) 42%,
        rgba(6,1,3,0.60) 60%,
        rgba(6,1,3,0.12) 80%,
        transparent 95%
      ),
      url('photos/main-page/private%20events.webp') 65% center / cover no-repeat;
  }

  .page-home .svc-catering {
    background:
      linear-gradient(to right,
        rgba(6,1,3,0.99) 0%,
        rgba(6,1,3,0.97) 42%,
        rgba(6,1,3,0.60) 60%,
        rgba(6,1,3,0.12) 80%,
        transparent 95%
      ),
      url('photos/main-page/catering.webp') 60% center / cover no-repeat;
  }

  .page-home .svc-mornings {
    background:
      linear-gradient(to right,
        rgba(6,1,3,0.99) 0%,
        rgba(6,1,3,0.97) 42%,
        rgba(6,1,3,0.60) 60%,
        rgba(6,1,3,0.12) 80%,
        transparent 95%
      ),
      url('photos/main-page/brunch3.webp') 72% center / cover no-repeat;
  }

  /* Text elements inside svc-hero (no svc-inner wrapper) */
  .page-home .svc-hero > .sec-label,
  .page-home .svc-hero > .svc-heading,
  .page-home .svc-hero > .svc-body,
  .page-home .svc-hero > .svc-cta {
    position: relative;
    z-index: 1;
  }

  .page-home .svc-inner {
    position: relative;
    z-index: 1;
    padding: 0;
  }

  /* Labels — gold uppercase */
  .page-home .svc-card .sec-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(201,169,110,0.70);
    margin-bottom: 0.6rem;
  }

  /* Headings — larger, more cinematic */
  .page-home .svc-card .svc-heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.75rem, 7.5vw, 2.2rem);
    font-weight: 400;
    line-height: 1.04;
    color: var(--cream, #EFE2CF);
    margin: 0 0 0.65rem;
    letter-spacing: -0.01em;
  }

  .page-home .svc-hero .svc-heading {
    font-size: clamp(1.9rem, 8vw, 2.5rem);
  }

  /* Body text — slightly less muted */
  .page-home .svc-card .svc-body {
    font-size: 0.80rem;
    line-height: 1.65;
    color: rgba(239,226,207,0.44);
    margin-bottom: 1.1rem;
  }

  .page-home .svc-card .svc-cta {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .page-home .svc-card .svc-rule { display: none; }

  .page-home .svc-card .svc-link {
    font-family: 'Inter', sans-serif;
    font-size: 0.61rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(201,169,110,0.75);
    transition: color 200ms;
  }

  /* Private Events CTA: filled burgundy button */
  .page-home .svc-hero .svc-link {
    display: inline-block;
    background: linear-gradient(160deg, #5a1120 0%, #7a1d30 100%);
    border-radius: 8px;
    padding: 0.65rem 1.15rem;
    color: var(--cream, #EFE2CF);
    font-size: 0.60rem;
    letter-spacing: 0.18em;
    box-shadow: 0 3px 16px rgba(70,12,24,0.42);
    transition: background 200ms, box-shadow 200ms;
  }
  .page-home .svc-hero .svc-link:hover {
    background: linear-gradient(160deg, #6e1528 0%, #8e2238 100%);
    box-shadow: 0 5px 22px rgba(70,12,24,0.58);
  }


  /* ══════════════════════════════════════════
     7. EXPERIENCES ACCORDION — mobile only
        Replaces the 3-card services section
        Dark luxury editorial accordion
  ══════════════════════════════════════════ */

  /* Hide desktop version on mobile */
  .experiences-accordion {
    display: block;
    background: linear-gradient(160deg, rgba(65,10,20,0.55) 0%, #0b0203 55%);
    margin: 0 0.85rem;
    border-radius: 26px;
    overflow: hidden;
  }

  /* Section header — styled like "What makes us special" */
  .acc-header {
    padding: 1.1rem 1.5rem 1.0rem;
    text-align: center;
  }
  .acc-section-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.48rem, 6vw, 1.92rem);
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: 0;
    color: rgba(239,226,207,0.95);
    margin: 0;
  }

  /* List container */
  .acc-list {
    padding: 0 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }

  /* Each item — dark red card like dark-strip */
  .acc-item {
    border-radius: 18px;
    background: linear-gradient(148deg, rgba(85,16,24,0.50) 0%, rgba(16,4,7,0.96) 100%);
    border: 1px solid rgba(239,226,207,0.07);
    box-shadow: 0 10px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(239,226,207,0.05);
    overflow: hidden;
    padding: 0 1.0rem;
  }

  /* Trigger row */
  .acc-trigger {
    display: flex;
    align-items: center;
    gap: 1.0rem;
    width: 100%;
    background: none;
    border: none;
    padding: 1.2rem 0;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 180ms;
  }
  .acc-trigger:active { opacity: 0.75; }

  /* Thumbnail */
  .acc-thumb {
    flex-shrink: 0;
    width: 70px;
    height: 86px;
    border-radius: 10px;
    overflow: hidden;
    transition: height 380ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .acc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
  }
  .acc-item.is-open .acc-thumb {
    height: 110px;
  }
  .acc-item.is-open .acc-thumb img {
    transform: scale(1.07);
  }

  /* Text block */
  .acc-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
  }
  .acc-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.50rem;
    font-weight: 600;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    color: rgba(201,169,110,0.55);
  }
  .acc-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.18rem, 5vw, 1.45rem);
    font-weight: 400;
    line-height: 1.18;
    color: rgba(239,226,207,0.92);
  }

  /* Chevron */
  .acc-chevron {
    flex-shrink: 0;
    color: rgba(201,169,110,0.45);
    display: flex;
    align-items: center;
    transition: transform 370ms cubic-bezier(0.4, 0, 0.2, 1),
                color 220ms;
  }
  .acc-item.is-open .acc-chevron {
    transform: rotate(180deg);
    color: rgba(201,169,110,0.85);
  }

  /* Expandable panel */
  .acc-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding-left: calc(70px + 1.0rem);
    padding-right: 0.5rem;
    transition:
      max-height 370ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 280ms ease 60ms,
      padding-bottom 370ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .acc-item.is-open .acc-panel {
    max-height: 220px;
    opacity: 1;
    padding-bottom: 1.75rem;
  }

  .acc-body {
    font-family: 'Inter', sans-serif;
    font-size: 0.83rem;
    line-height: 1.74;
    color: rgba(239,226,207,0.48);
    margin: 0 0 1.05rem;
  }

  .acc-cta {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.60rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(201,169,110,0.82);
    transition: color 200ms;
  }
  .acc-cta:active { color: rgba(201,169,110,1); }

  /* Bottom italic tagline */
  .acc-footnote {
    text-align: center;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.02rem;
    font-weight: 400;
    line-height: 1.62;
    color: rgba(239,226,207,0.24);
    margin: 0;
    padding: 2.75rem 1.5rem 3.25rem;
    font-style: italic;
  }

  /* ══════════════════════════════════════════
     8. GIFT CARDS — dark cinematic luxury card
        Warm black · amber glow · premium cards
  ══════════════════════════════════════════ */
  .page-home .gift-banner {
    background:
      linear-gradient(to bottom,
        rgba(6,1,2,0.50) 0%,
        rgba(6,1,2,0.35) 50%,
        rgba(6,1,2,0.55) 100%
      ),
      url('photos/main-page/mobile-gift-card.webp') 60% 0% / cover no-repeat !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .page-home .gift-banner-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 0;
  }
  .page-home .gift-banner-inner::before {
    display: none !important;
  }

  /* Cards mockup — hidden on mobile */
  .page-home .gift-cards-mockup {
    display: none;
  }

  /* Content: left-aligned */
  .page-home .gift-banner-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 2.4rem 1.5rem 0.5rem 2.1rem;
  }
  .page-home .gift-icon,
  .page-home .gift-eyebrow,
  .page-home .gift-heading,
  .page-home .gift-text {
    align-self: flex-start !important;
    text-align: left !important;
    margin-left: 0 !important;
  }

  .page-home .gift-icon {
    display: none;
  }

  .page-home .gift-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.50rem;
    font-weight: 700;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    color: rgba(201,169,110,0.55);
    margin: 0;
  }

  .page-home .gift-heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.3rem, 5.5vw, 1.65rem);
    font-weight: 400;
    letter-spacing: 0;
    color: rgba(239,226,207,0.93);
    line-height: 1.18;
    margin: 0 0 0.45rem;
    text-transform: none;
  }

  .page-home .gift-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
    line-height: 1.58;
    color: rgba(239,226,207,0.38);
    margin: 0;
  }

  /* CTA: left-aligned */
  .page-home .gift-cta {
    display: flex !important;
    justify-content: flex-start !important;
    padding: 0.75rem 1.5rem 2rem 2.1rem;
  }

  .page-home .gift-learn-more {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(160deg, #5a1120 0%, #7a1d30 100%);
    border: none;
    border-radius: 8px;
    color: rgba(239,226,207,0.90);
    font-family: 'Inter', sans-serif;
    font-size: 0.57rem;
    font-weight: 600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    padding: 0.65rem 1.1rem;
    box-shadow: 0 3px 14px rgba(70,10,22,0.42);
    text-decoration: none;
    transition: background 220ms, box-shadow 220ms, opacity 150ms;
  }
  .page-home .gift-learn-more:active {
    opacity: 0.82;
  }

  /* ══════════════════════════════════════════
     9. GIFT CARD MODAL — mobile overrides
        Amount buttons collapse to 3-col grid
  ══════════════════════════════════════════ */
  .gc-amounts {
    grid-template-columns: repeat(3, 1fr);
  }

} /* end @media (max-width: 767px) */


/* === DESKTOP: HOME (>=768px) === */
/* ════════════════════════════════════════════
   DESKTOP  (≥ 768px)
   Cinematic premium redesign — homepage only.
   All rules scoped to .page-home.
════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* Accordion is mobile-only — hide on desktop */
  .experiences-accordion { display: none; }

  /* ── HERO ── */
  /* min-height, photo inset, copy width, and vignette are now inherited from
     the unified system in styles.css (menu-hero proportions).
     Only home-specific overrides remain below. */

  /* Scroll hint — mobile only, hidden on desktop */
  .page-home .hero-scroll-hint { display: none; }

  /* Decorative gold rule below h1 — match About Us hero divider (width + divider→paragraph gap) */
  .page-home .hero-rule {
    display: block;
    width: 3rem;                /* = About Us hero divider width */
    height: 1px;
    background: linear-gradient(to right, #c9a96e, rgba(201,169,110,0.2));
    margin-bottom: 1.25rem;     /* divider→paragraph, matching About Us */
  }

  /* Photo: keep home composition raise */
  .page-home .hero-photo {
    background-position: 100% 40%;
  }

  /* Vignette: lighter than global — more of the bar photo visible */
  .page-home .hero-vignette {
    background:
      linear-gradient(
        to right,
        #080202 0%,
        #080202 6%,
        rgba(8,2,2,0.88) 18%,
        rgba(8,2,2,0.62) 32%,
        rgba(8,2,2,0.24) 50%,
        rgba(8,2,2,0.05) 66%,
        transparent 80%
      ),
      linear-gradient(
        to top,
        rgba(8,2,2,0.88) 0%,
        rgba(8,2,2,0.52) 10%,
        rgba(8,2,2,0.16) 22%,
        transparent 36%
      );
  }

  /* Editorial headline — matched to About Us hero title (.about-hero-title) */
  .page-home .hero-inner h1 {
    font-size: clamp(3.15rem, 6.3vw, 5.85rem);   /* = About hero title */
    line-height: 0.9;
    letter-spacing: 0.04em;
    margin-bottom: 1.25rem;      /* title→divider gap = divider→text gap (.page-home .hero-rule) */
  }

  .page-home .hero-text {
    font-size: 1.0rem;
    line-height: 1.72;
    color: rgba(239,226,207,0.62);
    max-width: none;     /* заполняет колонку 560px — текст не зажат */
    margin-bottom: 1.5rem;
  }

  .page-home .hero-actions {
    display: flex;
    flex-direction: row;
    gap: 0.85rem;
    align-items: center;
  }

  /* ── DARK STRIP — deeper background, editorial spacing ── */
  .page-home .dark-strip {
    background: #0b0204;
    border-top: 0.5rem;
    border-bottom: 0.5rem;
    padding: 0;
  }

  .page-home .dark-strip-header {
    display: none;
  }

  .page-home .dark-strip-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .page-home .dark-strip-item {
    padding: 2.095rem clamp(1.5rem, 2.5vw, 3rem);  /* верх/низ +~10% от исходных 1.9rem */
    border-right: 1px solid rgba(201,169,110,0.09);
    border-bottom: none;
    gap: 0.55rem;
  }

  .page-home .dark-strip-item:last-child {
    border-right: none;
  }

  .page-home .strip-icon {
    color: #c9a96e;
    opacity: 0.7;
    margin-bottom: 0.5rem;
  }

  .page-home .dark-strip-item h3 {
    font-size: 0.67rem;
    letter-spacing: 0.24em;
    color: rgba(239,226,207,0.9);
  }

  .page-home .dark-strip-item p {
    font-size: 0.84rem;
    color: rgba(239,226,207,0.4);
  }

  .page-home .dark-strip-cta {
    display: none;
  }

  /* ── FOOD FEATURE — dark editorial panel ── */
  .page-home .feature-section {
    background: #080202;
  }

  .page-home .feature-layout {
    grid-template-columns: 0.9fr 1.1fr;
    min-height: 68vh;
  }

  /* Override cream panel → cinematic dark */
  .page-home .feature-text {
    background: #0d0305;
    color: var(--cream, #EFE2CF);
    padding: 4.5rem clamp(2.5rem, 4vw, 5rem);
    border-right: 1px solid rgba(201,169,110,0.08);
  }

  .page-home .feature-text .section-label {
    color: rgba(201,169,110,0.65);
  }

  .page-home .feature-text h2 {
    color: var(--cream, #EFE2CF);
    font-size: clamp(2.8rem, 4.2vw, 4.4rem);
  }

  .page-home .feature-text p {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.93rem, 1.5vw, 1.05rem);
    font-style: normal;
    font-weight: 400;
    color: rgba(239,226,207,0.58);
    line-height: 1.74;
    max-width: 38ch;
    margin-bottom: 2rem;
  }

  .page-home .feature-text .link-arrow {
    color: #c9a96e;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    transition: color 200ms, letter-spacing 200ms;
  }

  .page-home .feature-text .link-arrow:hover {
    color: rgba(239,226,207,0.9);
    letter-spacing: 0.26em;
  }

  .page-home .feature-image {
    min-height: 68vh;
  }

  /* ── WINE FEATURE — deeper, more atmospheric ── */
  .page-home .wine-feature {
    background: #060101;
    border-top: 1px solid rgba(201,169,110,0.06);
  }

  .page-home .wine-layout {
    grid-template-columns: 1.1fr 0.9fr;
    min-height: 64vh;
  }

  .page-home .wine-photo {
    min-height: 64vh;
    background-position: center 25%;
  }

  .page-home .wine-text {
    background: #0b0204;
    padding: 4.5rem clamp(2.5rem, 4vw, 5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid rgba(201,169,110,0.08);
  }

  .page-home .wine-text h2 {
    font-size: clamp(2.8rem, 4.2vw, 4.2rem);
    color: var(--cream, #EFE2CF);
  }

  .page-home .wine-text p {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.93rem, 1.5vw, 1.05rem);
    font-style: normal;
    font-weight: 400;
    color: rgba(239,226,207,0.58);
    line-height: 1.74;
    max-width: 38ch;
    margin-bottom: 2rem;
  }

  .page-home .wine-text .link-arrow-light {
    color: #c9a96e;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    transition: color 200ms, letter-spacing 200ms;
  }

  .page-home .wine-text .link-arrow-light:hover {
    color: rgba(239,226,207,0.9);
    letter-spacing: 0.26em;
  }

  /* ── QUOTE STRIP — dark editorial, large centered ── */
  .page-home .quote-strip {
    background: #080202;
    border-top: 1px solid rgba(201,169,110,0.1);
    border-bottom: 1px solid rgba(201,169,110,0.1);
    padding: 1.1rem 0;
  }

  .page-home .quote-strip-inner {
    gap: 0.7rem;
  }

  .page-home .quote-strip-text {
    font-size: clamp(0.9rem, 1.68vw, 1.46rem);
    line-height: 1.32;
    color: var(--cream, #EFE2CF);
    white-space: normal;
    text-align: center;
    max-width: 36ch;
    font-style: italic;
  }

  .page-home .quote-strip-text::before,
  .page-home .quote-strip-text::after {
    color: rgba(201,169,110,0.5);
  }

  .page-home .quote-strip-credit {
    color: rgba(201,169,110,0.55);
    letter-spacing: 0.28em;
    font-size: 0.62rem;
  }

  /* ── SERVICE CARDS — refined cinematic ── */
  .page-home .services-section {
    background: #080202;
  }

  .page-home .services-grid {
    grid-template-columns: 1fr 1.6fr;
    gap: 2px;
    background: rgba(201,169,110,0.06);
  }

  .page-home .svc-hero {
    min-height: 620px;
    padding: 3.5rem 3rem 4rem;
    justify-content: center;     /* текст по вертикали в тёмной зоне */
    align-items: flex-start;
    background:
      radial-gradient(ellipse 55% 92% at 12% 100%,
        rgba(108,20,32,0.50) 0%,
        rgba(90,17,26,0.20) 45%,
        transparent 70%),
      linear-gradient(to right,
        #0a0303 0%,
        #0a0303 40%,
        rgba(10,3,3,0.82) 50%,
        rgba(10,3,3,0.38) 62%,
        rgba(10,3,3,0.10) 74%,
        transparent 84%),
      url('photos/main-page/private%20events.webp') 15% 40% / cover no-repeat;
  }
  .page-home .svc-hero .svc-heading,
  .page-home .svc-hero .svc-body {
    max-width: 50%;
  }

  .page-home .svc-hero .svc-heading {
    font-size: clamp(2.4rem, 3.8vw, 3.6rem);
    line-height: 1.02;
  }

  .page-home .svc-catering {
    background:
      radial-gradient(ellipse 48% 92% at 8% 100%,
        rgba(108,20,32,0.50) 0%,
        rgba(90,17,26,0.20) 45%,
        transparent 70%),
      linear-gradient(to right,
        #0a0303 0%,
        #0a0303 32%,
        rgba(10,3,3,0.86) 42%,
        rgba(10,3,3,0.40) 53%,
        rgba(10,3,3,0.10) 63%,
        transparent 72%),
      url('photos/main-page/catering.webp') 72% 40% / cover no-repeat;
  }

  .page-home .svc-mornings {
    background:
      radial-gradient(ellipse 48% 92% at 8% 100%,
        rgba(108,20,32,0.50) 0%,
        rgba(90,17,26,0.20) 45%,
        transparent 70%),
      linear-gradient(to right,
        #0a0303 0%,
        #0a0303 32%,
        rgba(10,3,3,0.86) 42%,
        rgba(10,3,3,0.40) 53%,
        rgba(10,3,3,0.10) 63%,
        transparent 72%),
      url('photos/main-page/brunch3.webp') 120% 62% / auto 238% no-repeat;
  }

  /* Text panel — left zone only, centred vertically (Catering/Brunch) */
  .page-home .svc-inner {
    padding: 2.25rem 2.2rem 2.75rem;
    max-width: 42%;
    justify-content: center;
  }

  .page-home .sec-label {
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    color: rgba(201,169,110,0.6);
  }

  .page-home .svc-body {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.93rem, 1.5vw, 1.05rem);
    font-style: normal;
    font-weight: 400;
    color: rgba(239,226,207,0.58);
    line-height: 1.74;
  }

  .page-home .svc-rule {
    background: rgba(201,169,110,0.22);
  }

  .page-home .svc-link {
    color: rgba(201,169,110,0.65);
    transition: color 180ms;
  }

  .page-home .svc-card:hover .svc-link {
    color: var(--cream, #EFE2CF);
  }

  /* ── GIFT BANNER — dark wine aesthetic ── */
  .page-home .gift-banner {
    background: #0b0204;
    border-top: none;
    border-bottom: none;
    padding: 2.6rem 0;
  }

  /* Break out of page-width centering: pull left edge in, slightly reduce right */
  .page-home .gift-banner .page-width {
    width: 100%;
    max-width: none;
    padding-left: 1.5rem;
    padding-right: 2.5rem;
  }

  /* Wider layout: smaller image column, larger content, generous gaps */
  .page-home .gift-banner-inner {
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }

  .page-home .gift-icon {
    color: #c9a96e;
    opacity: 0.7;
  }

  .page-home .gift-eyebrow {
    color: rgba(201,169,110,0.6);
  }

  .page-home .gift-heading {
    color: var(--cream, #EFE2CF);
    max-width: 30rem;
  }

  .page-home .gift-text {
    color: rgba(239,226,207,0.45);
  }

  .page-home .gift-learn-more {
    border-color: rgba(201,169,110,0.3);
  }

  /* ── GIFT CARD MODAL — desktop ── */
  .gc-overlay {
    align-items: center;
    padding: 2rem;
  }
  .gc-modal {
    width: min(560px, 92vw);
    max-height: min(840px, 93vh);
    flex-direction: column;
    border-radius: 20px;
    border: 1px solid rgba(201,169,110,0.18);
    box-shadow: 0 24px 80px rgba(0,0,0,0.75), 0 0 0 1px rgba(201,169,110,0.05);
    transform: translateY(20px) scale(0.97);
  }
  .gc-overlay.is-open .gc-modal {
    transform: translateY(0) scale(1);
  }
  .gc-content {
    flex: 1;
    border-right: none;
  }
  .gc-scroll {
    padding: 1.6rem 2rem 1.4rem;
  }
  .gc-heading {
    font-size: clamp(1.9rem, 2.6vw, 2.4rem);
    margin-bottom: 0.55rem;
  }
  .gc-body {
    font-size: 0.84rem;
    line-height: 1.55;
    margin-bottom: 1.0rem;
  }
  .gc-section-label {
    margin-bottom: 0.5rem;
  }
  .gc-amounts {
    gap: 0.4rem;
    margin-bottom: 0.55rem;
  }
  .gc-amount-btn {
    padding: 0.52rem 0.4rem;
    font-size: 0.84rem;
  }
  .gc-custom-wrap {
    margin-bottom: 0.55rem;
  }
  .gc-delivery-group {
    gap: 0.4rem;
    margin-bottom: 1.0rem;
  }
  .gc-delivery-btn {
    padding: 0.65rem 0.9rem;
  }
  .gc-delivery-desc {
    font-size: 0.66rem;
  }
  .gc-form {
    margin-bottom: 0.9rem;
  }
  .gc-form-label {
    margin-top: 0.7rem;
    margin-bottom: 0.4rem;
  }
  .gc-form-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
  }
  .gc-input {
    padding: 0.58rem 0.85rem;
    font-size: 0.84rem;
  }
  .gc-textarea {
    padding: 0.58rem 0.85rem 1.7rem;
    font-size: 0.84rem;
  }
  .gc-submit {
    padding: 0.85rem 1.5rem;
    margin-bottom: 0.75rem;
  }



} /* end @media (min-width: 768px) */


/* === DESKTOP WIDE: HOME (>=1100px) === */
/* ════════════════════════════════════════════
   DESKTOP WIDE  (≥ 1100px)
════════════════════════════════════════════ */
@media (min-width: 1100px) {

  /* Wide desktop H1 — keep matching About Us hero title */
  .page-home .hero-inner h1 {
    font-size: clamp(3.15rem, 6.3vw, 5.85rem);
  }

  .page-home .feature-layout,
  .page-home .wine-layout {
    min-height: 72vh;
  }

  .page-home .feature-image,
  .page-home .wine-photo {
    min-height: 72vh;
  }

  .page-home .quote-strip {
    padding: 3.5rem 0;
  }

  .page-home .quote-strip-text {
    font-size: clamp(1.4rem, 2.38vw, 2.24rem);
  }

}


/* ════════════════════════════════════════════
   ПРАЗДНИЧНЫЙ БАННЕР (главная)
   Выезжает сверху при заходе, закрывается крестиком,
   повторно в этот же праздник не показывается.
════════════════════════════════════════════ */
.holiday-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: linear-gradient(90deg, #5a1120 0%, #7a1d30 55%, #5a1120 100%);
  border-bottom: 1px solid rgba(201,169,110,0.45);
  transform: translateY(-100%);
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}

.holiday-banner.is-visible { transform: translateY(0); }

.holiday-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 0.7rem 3rem 0.7rem 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}

.holiday-banner-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--cream, #EFE2CF);
}

.holiday-banner-label {
  display: inline-block;
  margin-right: 0.6rem;
  padding: 0.16rem 0.55rem;
  border: 1px solid rgba(239,226,207,0.45);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  vertical-align: 0.08em;
}

.holiday-banner-cta {
  flex: 0 0 auto;
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream, #EFE2CF);
  text-decoration: none;
  border-bottom: 1px solid rgba(239,226,207,0.5);
  padding-bottom: 0.15rem;
  transition: color 200ms ease, border-color 200ms ease;
}
.holiday-banner-cta:hover { color: #f6e6c8; border-color: #f6e6c8; }

.holiday-banner-close {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(239,226,207,0.3);
  color: var(--cream, #EFE2CF);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}
.holiday-banner-close:hover { border-color: rgba(239,226,207,0.7); }

/* пока баннер виден — шапка стоит под ним */
body.has-holiday-banner .site-header { top: var(--holiday-banner-h, 46px); }

@media (max-width: 767px) {
  .holiday-banner-inner {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.7rem 2.6rem 0.75rem 1rem;
    text-align: center;
  }
  .holiday-banner-text { font-size: 0.76rem; }
  .holiday-banner-label { display: block; margin: 0 auto 0.35rem; width: fit-content; }
}


/* ════════════════════════════════════════════
   DESKTOP — ИКОНКИ ПЛИТОК ×1.5 (01.09.2026)
   Единственная намеренная правка десктопа в этой серии: иконки
   «What makes us special» с 26 до 39px, обёртка с 2.4 до 3.6rem.
   Толщина обводки задана внутри viewBox, поэтому масштабируется сама.
════════════════════════════════════════════ */
@media (min-width: 768px) {
  .page-home .dark-strip-item .strip-icon {
    width: 3.6rem;
    height: 3.6rem;
  }
  .page-home .dark-strip-item .strip-icon svg {
    width: 39px;
    height: 39px;
  }
}
