/* =========================================================
   MAIN.CSS (clean)
   - единые переменные
   - без дублей
   - фон fixed на весь экран (page-bg)
   - шапка "glass" (header--glass) поверх фона
   - каталог / корзина / модалки / checkout-календарь
   ========================================================= */

/* -----------------------------
   CSS variables
----------------------------- */
:root{
  --bg: #ffffff;
  --bg-soft:#faf7f5;
  --bg-gray:#f2f0ee;

  --text:#1f1f1f;
  --muted:#6c6c6c;
  --border:#e7e0dc;

  --accent:#2b2b2b;
  --card:#ffffff;

  --shadow: 0 10px 30px rgba(0,0,0,.08);

  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  --container: 1520px;



  /* типографика */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --brand-font: var(--font);

  /* header */
  --header-pad-y: 10px;           /* “поуже” шапка */
  --header-link-size: 14px;
  --header-brand-size: 18px;


    --hdr-bg: transparent;
  --hdr-fg: #fff;
  --hdr-underline: rgba(255,255,255,.95);

  --mega-bg: #f3f1ed; /* фон выпадающего окна */

}

/* -----------------------------
   Base / reset
----------------------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
}

a{ color:inherit; text-decoration:none; text-decoration-thickness: from-font; }
a:visited{ color:inherit; }
a:hover{ text-decoration: underline; }
button{ color:inherit; }

img{ max-width:100%; display:block; }

/* -----------------------------
   Layout helpers
----------------------------- */
.container{
  width: min(var(--container), calc(100% - 64px));
  margin: 0 auto;
}

.row{ display:flex; gap:12px; align-items:center; }
.row_between{ justify-content:space-between; }

.title-sm{ font-size:22px; font-weight:700; letter-spacing:.2px; }
.subtitle{ font-size:14px; color:var(--muted); }
.muted{ color:var(--muted); font-size:14px; }
.price{ font-weight:800; font-size:18px; }

.page{ background: transparent; }

/* -----------------------------
   Fixed background (hero photo)
----------------------------- */
.page-bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("assets/img/hero-bg.jpg") center/cover no-repeat;
}

.page-bg__overlay{
  position: fixed;
  inset: 0;
  z-index: -1; /* важно: под контентом! */
  background: rgba(0,0,0,.12); /* слабое затемнение */
  pointer-events: none;
}

/* -----------------------------
   Sections
----------------------------- */
.page .section{ padding: 64px 0; background:#fff; }
.section_gray{ background: var(--bg-gray); }

.section__head{ margin-bottom:18px; }
.section__head.row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.section__text{ color:var(--muted); max-width:760px; }

/* “быстрое перекрытие” следующей секцией без скругления */
.section--overlap{
  margin-top: -120px;
  padding-top: 140px;
  position: relative;
  z-index: 2;
  border-radius: 0;
  box-shadow: none;
}

/* -----------------------------
   Header (glass)
----------------------------- */
.header{
  left:0; right:0; top:0;
  z-index: 999;
}

/* основной режим: стекло поверх фона */
.header--glass{
  position: absolute;
  background: transparent;
}

/* внутренний контейнер */
.header__section{ padding: var(--header-pad-y) 0; }
.header__container{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;     /* было center */
  gap:50px;
}


/* новая раскладка (у тебя в html: header__container--new) */
.header__container--new{
  align-items: flex-start;
}

/* бренд (Вкус / облаков) */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand--stack{ align-items:flex-start; }
.brand__name{
  
  font-weight: 800;
  letter-spacing: .2px;
  font-family: var(--brand-font);
}
.brand__name--stack{
  display:inline-block;
  font-size:var(--header-brand-size);
  line-height: 1.05;
  color:#fff;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 6px;
  margin-top: 10px;
}

.header--glass .brand:hover .brand__name--stack,
.header--glass .brand:focus-visible .brand__name--stack{
  text-decoration-color: rgba(255,255,255,.95);
}


/* меню по центру */
.header__nav{
  display:flex;
  gap:60px;
  align-items:center;
  flex-wrap:wrap;
  margin-top: 10px;
}
.header__nav--center a{
  font-size: var(--header-link-size);
  color:#fff;
  opacity:.95;

  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 6px;
}
.header__nav--center a:hover,
.header__nav--center a:focus-visible{
  text-decoration-color: rgba(255,255,255,.95);
}

/* справа: контакты + иконки */
.header__actions{ display:flex; align-items:flex-start; gap:16px; }
.header__actions--new{ align-items:flex-start; }

.header__contacts--new{
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:left;                 /* было right */
  align-items:flex-start;          /* было flex-end */
  color: rgba(255,255,255,.92);
  font-size: 12.5px;
  line-height: 1.25;
}

.header__phone{
  color:#fff;
  font-size: 15px;
  font-weight: 300;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: transparent;
  margin-top: 10px;
}
.header__phone:hover{ text-decoration-color: rgba(255,255,255,.85); }
.header__tg{
  color:#fff;
  font-size: 15px;
  font-weight: 300;
  opacity:.9;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
}
.header__tg:hover{ text-decoration-color: rgba(255,255,255,.85); }
.header__hours{ opacity:.9; }

/* иконки */
.header__icons{ display:flex; gap:10px; align-items:center; }

.icon-btn{
  border:1px solid var(--border);
  background:#fff;
  border-radius: 999px;
  padding: 9px 12px;
  cursor:pointer;
  display:inline-flex;
  gap:8px;
  align-items:center;
}

.icon-btn--ghost{
  background: transparent;
  border-color: rgba(255,255,255,.35);
  color:#fff;
}
.icon-btn--ghost:hover{
  border-color: rgba(255,255,255,.65);
}

/* badge (счётчик корзины) */
.badge{
  min-width:22px; height:22px;
  border-radius:999px;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.25);
  display:grid; place-items:center;
  font-size:12px;
  padding: 0 6px;
  color:#fff;
}

/* -----------------------------
   Hero
----------------------------- */
.hero{
  min-height: 100vh;
  display:flex;
  align-items:flex-end;       /* контент ниже */
  padding: 120px 0 80px;      /* место под шапку */
  background: transparent;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:24px;
  align-items:stretch;
}
/*.hero__kicker{ color: rgba(255,255,255,.85); font-size: 13px; margin-bottom: 8px; }*/
.hero__title{ margin:0 0 10px; font-size: 50px; font-weight: 500; line-height:1.05; color:#fff; }
  
 
.hero__text{ margin:0 0 18px; color: rgba(255,255,255,.88); max-width: 640px; }

.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.hero__note{
  margin-top: 16px;
  display:flex; flex-wrap:wrap; gap:10px;
  color: rgba(255,255,255,.85);
  font-size: 13px;
}

/* карточки справа (если используешь) */
.hero__visual{ display:grid; gap:12px; }
.hero-card{
  background: rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.35);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero-card__img{
  height: 220px;
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
}
.hero-card__meta{ padding: 14px 16px 16px; }
.hero-card_small{ padding: 14px 16px; }

/* -----------------------------
   Buttons / inputs
----------------------------- */
.btn{
  border:1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  padding: 10px 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  font-weight: 650;
}
.btn:hover{ filter: brightness(.98); }

.btn_primary{
  background: var(--accent);
  color:#fff;
  border-color: rgba(0,0,0,.2);
  text-decoration:none;
}
.btn_secondary{
  background:#fff;
  border-color: rgba(0,0,0,.18);
}
.btn_ghost{
  background: transparent;
  border-color: var(--border);
}
.btn_wide{ width:100%; }

.input, .select{
  width:100%;
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background:#fff;
  color: #1f1f1f;
  outline:none;
}
.input:focus, .select:focus{ border-color: rgba(0,0,0,.25); }

.label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.field{ margin: 12px 0; }
.hint{ font-size: 13px; color:var(--muted); margin-top: 8px; }

/* -----------------------------
   Steps
----------------------------- */
.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top: 18px;
}
.step{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 14px 16px;
  box-shadow: var(--shadow);
}
.step__num{
  width:34px; height:34px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: var(--bg-gray);
  display:grid; place-items:center;
  font-weight: 800;
  margin-bottom: 10px;
}
.step__title{ font-weight: 800; margin-bottom: 4px; }
.step__text{ color:var(--muted); font-size: 14px; }

/* -----------------------------
   Catalog
----------------------------- */
.catalog__tools{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  min-width: 380px;
}

.catalog-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
  margin-top: 18px;
}

.catalog-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--r-lg);
  overflow:hidden;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
}

.catalog-card__product-img{
  position:relative;
  height: 190px;
  background: linear-gradient(135deg, #f8e8e1, #f5f3f2);
}
.catalog-card__product-img::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 30% 20%, rgba(0,0,0,.08), transparent 45%);
  pointer-events:none;
}

.catalog-card__order{
  position:absolute;
  left:12px; right:12px; bottom:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.catalog-card__btn{
  border:1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: 650;
  text-decoration:none;
}
.catalog-card__btn:hover{ filter: brightness(.98); text-decoration:none; }

.catalog-card__product-name{ padding: 12px 14px 14px; }
.catalog-card__product-name_cake{ font-weight: 900; display:block; }
.catalog-card__product-name_price{ font-weight: 900; margin-top: 6px; }

/* -----------------------------
   Footer-like
----------------------------- */
.footer-like{ padding: 36px 0 0; }
.footer-like__title{
  font-weight: 900;
  font-size: 24px;
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom: 18px;
}
.footer-like__grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap:12px;
}
.footer-like__col-title{ font-weight: 800; margin-bottom: 10px; }
.footer-like__card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow: var(--shadow);
}
.list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* -----------------------------
   Cards / checkout layout
----------------------------- */
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 14px;
}
.card__title{ font-weight: 900; margin-bottom: 8px; }
.divider{ height:1px; background: var(--border); margin: 14px 0; }

.checkout-grid{
  display:grid;
  grid-template-columns: 1.5fr .8fr;
  gap:14px;
}

/* -----------------------------
   Calendar / times
----------------------------- */
.calendar{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:8px;
  margin-top: 12px;
}

.day{
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  background:#fff;
  cursor:pointer;
  min-height: 74px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.day__top{ display:flex; justify-content:space-between; gap:10px; }
.day__num{ font-weight: 900; }
.day__meta{ font-size: 12px; color:var(--muted); }

.day.disabled{
  opacity:.45;
  cursor:not-allowed;
  background: rgba(255,255,255,.06);
}
.day.selected{ outline: 2px solid rgba(0,0,0,.35); }

.times{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 12px;
}
.time{
  border:1px solid var(--border);
  background:#fff;
  border-radius: 999px;
  padding: 10px 12px;
  cursor:pointer;
  font-weight: 750;
}
.time.disabled{ opacity:.45; cursor:not-allowed; }
.time.selected{ background: var(--accent); color:#fff; border-color: rgba(0,0,0,.25); }

/* -----------------------------
   Drawer (cart)
----------------------------- */
.drawer{ position:fixed; inset:0; display:none; }
.drawer.open{ display:block; }

.drawer__overlay{ position:absolute; inset:0; background: rgba(0,0,0,.35); }
.drawer__panel{
  position:absolute; right:0; top:0; bottom:0;
  width:min(420px, 92vw);
  background:#fff;
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
}
.drawer__head{
  padding: 14px;
  border-bottom: 1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.drawer__body{
  padding: 14px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.drawer__footer{
  padding: 14px;
  border-top: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cart-item{
  border:1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.cart-item__top{ display:flex; justify-content:space-between; gap:10px; }
.cart-item__name{ font-weight: 850; }
.cart-item__meta{ color:var(--muted); font-size: 13px; }
.cart-item__actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* -----------------------------
   Modal
----------------------------- */
.modal{
  position: fixed;
  inset:0;
  display:none;
  z-index: 9999;
}
.modal.open{ display:block; }

.modal__overlay{ position:absolute; inset:0; background: rgba(0,0,0,.35); }
.modal__card{
  position:relative;
  width:min(920px, calc(100% - 24px));
  margin: 6vh auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal__head{
  padding: 14px;
  border-bottom: 1px solid var(--border);
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.modal__body{ padding: 14px; }

.pm-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.pm-total{ margin: 8px 0 12px; }

/* -----------------------------
   Responsive
----------------------------- */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .catalog-grid{ grid-template-columns: repeat(2, 1fr); }
  .steps{ grid-template-columns: 1fr; }
  .footer-like__grid{ grid-template-columns: 1fr; }
  .checkout-grid{ grid-template-columns: 1fr; }
  .catalog__tools{ min-width: unset; width:100%; }
  .section__head.row{ flex-direction:column; align-items:flex-start; }

  .header__container{ gap:12px; }
  .header__nav{ gap:12px; }
}

@media (max-width: 740px){
  .header__nav{ display:none; } /* если позже сделаем бургер — включим */
  .catalog-grid{ grid-template-columns: 1fr; }
  .pm-grid{ grid-template-columns: 1fr; }

  .header__contacts--new{ display:none; } /* чтобы не ломало на мобилке */
}

/* (опционально) на iOS fixed фон иногда “дёргается” — это норм. */

/* ===== Fonts usage ===== */
:root{
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --brand-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;


  --header-pad-y: 15px;      /* шапка поуже */
  --header-link-size: 16px; /* меню крупнее */
  --header-brand-size: 22px;
}

body{ font-family: var(--font); }

/* бренд крупнее */
.brand__name--stack{
  font-family: var(--brand-font);
  font-size: var(--header-brand-size);
  font-weight: 500;
  letter-spacing: .2px;
}

/* меню крупнее */
.header__nav--center a{
  font-family: var(--font);
  font-size: var(--header-link-size);
  font-weight: 400;
  letter-spacing: .15px;
}
.header__nav--center{
  justify-self: end;        /* вместо center */
  justify-content: flex-end;
  width: auto;              /* вместо 100% */
}


/* шапка поуже */
.header__section{ padding: var(--header-pad-y) 0; }

/* ===== Burger visibility ===== */
.header__burger{ display:none; }

/* На планшете/мобилке скрываем центральное меню и контакты, показываем бургер */
@media (max-width: 900px){
  .header__nav--center{ display:none; }
  .header__contacts--new{ display:none; }
  .header__burger{ display:inline-flex; }
  .header__container{ grid-template-columns: auto 1fr; }
  .header__actions{ margin-left: auto; }
  .header__icons{ margin-left: auto; }
}

/* ===== Mobile menu ===== */
.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}
.mobile-menu.open{ display:block; }

.mobile-menu__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}

.mobile-menu__panel{
  position:absolute;
  top: 10px;
  right: 10px;
  width: min(420px, calc(100% - 20px));
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color:#fff;
}

.mobile-menu__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.mobile-menu__nav{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin: 8px 0 14px;
}

.mobile-menu__nav a{
  color:#fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 6px;
}
.mobile-menu__nav a:hover{
  text-decoration-color: rgba(255,255,255,.95);
}

/* Mobile menu: expandable groups */
.mobile-menu__group{
  border: none;
}
.mobile-menu__group summary{
  list-style: none;
  cursor: pointer;
}
.mobile-menu__group summary::-webkit-details-marker{ display: none; }
.mobile-menu__group summary::marker{ display: none; content: ''; }
.mobile-menu__link{
  color:#fff;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mobile-menu__link::after{
  content: '▸';
  font-size: 12px;
  transition: transform .2s;
}
.mobile-menu__group[open] .mobile-menu__link::after{
  transform: rotate(90deg);
}
.mobile-menu__sub{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 4px 14px;
  border-left: 1px solid rgba(255,255,255,.2);
  margin-left: 4px;
  margin-top: 6px;
}
.mobile-menu__sub a{
  color: rgba(255,255,255,.85);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
}
.mobile-menu__sub a:hover{
  color: #fff;
  text-decoration: underline;
}

.mobile-menu__contacts{
  border-top: 1px solid rgba(255,255,255,.18);
  padding-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}

/* блокируем прокрутку страницы когда меню открыто */
body.menu-open{
  overflow: hidden;
}

/* У бренда убираем глобальное подчёркивание ссылок */
.header--glass .brand:hover{ text-decoration: none; }

#btnCart{
  position: relative;
  padding-right: 10px; /* чуть больше места */
}

/* Hero: прозрачная кнопка-ссылка с underline на hover */
.hero-link-btn{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;            /* чтобы не было "кнопочных" полей */
  color: #fff !important;
  
  font-size: 21px;
  font-weight: 300;
  letter-spacing: .2px;

  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 8px;
}

.hero-link-btn:hover,
.hero-link-btn:focus-visible{
  text-decoration-color: rgba(255,255,255,.95);
}

/* =========================
   Casual section (как на референсе)
   ========================= */

.casual{
  background: #f3f1ed;
  padding: 90px 0 70px;
}

.casual__head{
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  gap: 28px;
  align-items: start;
  margin-bottom: 34px;
}

.casual__title{
  margin: 0;
  font-family: var(--brand-font);
  font-size: 37px;
  line-height: 1.02;
  font-weight: 300;
  color: #111;
  letter-spacing: .2px;
}

.casual__meta{
  padding-top: 10px;
  margin-left: -222px;
}

.casual__text{
  margin: 0 0 16px;
  color: rgba(0,0,0,.75);
  font-size: 16px;
  line-height: 1.45;
}

.casual__link{
  display: inline-block;
  font-size: 12px;
  letter-spacing: .12em;
  color: #111;
  text-decoration: underline;
  text-underline-offset: 10px;
  text-decoration-color: rgba(0,0,0,.5);
}
.casual__link:hover{
  text-decoration-color: rgba(0,0,0,.9);
}

.casual__arrows{
  display: flex;
  gap: 14px;
  align-items: center;
  padding-top: 18px;
  margin-top: 50px;   /* опускает вниз */
margin-left: -114px;
}

.casual__arrow{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: transparent;
  color: rgba(0,0,0,.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.casual__arrow:hover{
  border-color: rgba(0,0,0,.35);
  color: rgba(0,0,0,.95);
}

.casual__viewport{
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  scroll-snap-type: x mandatory;
}
.casual__viewport::-webkit-scrollbar{ display:none; } /* Chrome */

.casual__track{
  display: flex;
  gap: 28px;
  padding-bottom: 6px;
}

.casual-card{
  flex: 0 0 auto;
  width: 340px;
  scroll-snap-align: start;
}

.casual-card__img{
  position: relative;
  border-radius: 0;       /* как на референсе — прямой угол */
  overflow: hidden;
  background: #e9e6e1;
  height: 360px;
}

.casual-card__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.casual-card__badge{
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255,255,255,.72);
  color: rgba(0,0,0,.8);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 0; /* прямой бейдж */
}

.casual-card__bottom{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  align-items: baseline;
}

.casual-card__name{
  font-family: var(--brand-font);
  font-size: 20px;
  line-height: 1.2;
  color: #111;
}

.casual-card__price{
  color: rgba(0,0,0,.75);
  font-size: 14px;
  white-space: nowrap;
}

/* адаптив */
@media (max-width: 980px){
  .casual__head{
    grid-template-columns: 1fr;
  }
  .casual__meta{ margin-left: 0; }
  .casual__arrows{
    padding-top: 0;
    margin-left: 0;
    margin-top: 0;
  }
  .casual__title{
    font-size: 42px;
  }
  .casual-card{ width: 78vw; }
  .casual-card__img{ height: 48vw; min-height: 280px; }
}


/* =========================
   To order section (в стиле Casual)
   ========================= */

.toorder{
  background: #f3f1ed;
  padding: 70px 0 70px;
}

.toorder__head{
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  gap: 28px;
  align-items: start;
  margin-bottom: 34px;
}

.toorder__title{
  margin: 0;
  font-family: var(--brand-font);
  font-size: 37px;     /* чуть меньше, чем Casual */
  line-height: 1.02;
  font-weight: 300;
  color: #111;
   letter-spacing: .2px;
}

.toorder__meta{ /*padding-top: 6px;*/ 
  padding-top: 10px;
  margin-left: -222px;
  
}

.toorder__text{
  margin: 0 0 16px;
  color: rgba(0,0,0,.75);
  font-size: 16px;
  line-height: 1.45;
  max-width: 560px;
}

.toorder__link{
  display: inline-block;
  font-size: 12px;
  letter-spacing: .12em;
  color: #111;
  text-decoration: underline;
  text-underline-offset: 10px;
  text-decoration-color: rgba(0,0,0,.5);
}
.toorder__link:hover{ text-decoration-color: rgba(0,0,0,.9); }

.toorder__arrows{
  display: flex;
  gap: 14px;
  align-items: center;
  padding-top: 18px;
   margin-top: 50px;   /* опускает вниз */
margin-left: -114px;
}

.toorder__arrow{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: transparent;
  color: rgba(0,0,0,.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.toorder__arrow:hover{
  border-color: rgba(0,0,0,.35);
  color: rgba(0,0,0,.95);
}

/* ===== To order cards: 3 больших, как в примере ===== */

.toorder__viewport{
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.toorder__viewport::-webkit-scrollbar{ display:none; }

.toorder__track{
  display: flex;
  gap: 28px;          /* или твоё значение */
}


.toorder-card{
  flex: 0 0 auto;
  width: 465px;            /* размер карточки (под 3 в ряд на широком экране) */
  scroll-snap-align: start;
}

.toorder-card__img{
  position: relative;
  height: 480px;           /* большая картинка */
  background: #e9e6e1;
  overflow: hidden;
}

.toorder-card__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.toorder-card__badge{
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255,255,255,.72);
  color: rgba(0,0,0,.8);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 0;
}

.collect-card__badge{
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255,255,255,.85);
  color: rgba(0,0,0,.8);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

.toorder-card__bottom{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  align-items: baseline;
}

.toorder-card__name{
  font-family: var(--brand-font);
  font-size: 20px;
  line-height: 1.2;
  color: #111;
}

.toorder-card__price{
  color: rgba(0,0,0,.75);
  font-size: 14px;
  white-space: nowrap;
}

/* Адаптив: на мобиле — по одной карточке */
@media (max-width: 980px){
  .toorder__head{ grid-template-columns: 1fr; }
  .toorder__meta{ margin-left: 0; }
  .toorder__arrows{ margin-left: 0; margin-top: 0; }
  .toorder-card{ width: 78vw; }
  .toorder-card__img{ height: 52vw; min-height: 320px; }
}

/* =========================
   Fillings section (2 ряда × 4 фото)
   ========================= */

.fillings{
  background: #f3f1ed;
  padding: 70px 0 90px;
}

.fillings__head{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 34px;
}

.fillings__title{
  margin: 0;
  font-family: var(--brand-font);
  font-size: 37px;     /* чуть меньше, чем Casual */
  line-height: 1.02;
  font-weight: 300;
  color: #111;
  letter-spacing: .2px;
}

.fillings__meta{
  padding-top: 10px;
  margin-left: -222px;
}

.fillings__text{
  margin: 0 0 16px;
  color: rgba(0,0,0,.75);
  font-size: 16px;
  line-height: 1.45;
  max-width: 560px;
}

.fillings__link{
  display: inline-block;
  font-size: 12px;
  letter-spacing: .12em;
  color: #111;
  text-decoration: underline;
  text-underline-offset: 10px;
  text-decoration-color: rgba(0,0,0,.5);
}
.fillings__link:hover{
  text-decoration-color: rgba(0,0,0,.9);
}

/* Сетка 4×2 */
.fillings__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.fillings-card{
  background: #e9e6e1;
  overflow: hidden;
  height: 349px;
}

.fillings-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* адаптив */
@media (max-width: 1100px){
  .fillings__grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .fillings-card{ height: 349px; }
}

@media (max-width: 980px){
  .fillings__head{
    grid-template-columns: 1fr;
  }
  .fillings__title{
    font-size: 37px;
  }
}

@media (max-width: 560px){
  .fillings__grid{
    grid-template-columns: 1fr;
  }
  .fillings-card{ height: 300px; }
}

/* =========================
   Story section (как в примере)
   ========================= */

.story{
  background: #D2CEC8/*c6beb2*/; /* общий фон секции */
  overflow: visible;

   padding: 70px 0 70px;
 /*#f3f1ed*/
 
}



/* Основная компоновка: слева плашка, справа фото */
.story__inner{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  min-height: 620px;
}

/* Наклонная бежевая плашка */
.story__panel{
  
  position: relative;
  background: rgb(200, 186, 169);
  /*padding: 54px 56px 54px 32px;*/
  clip-path: polygon(0 5%, 100% 0%, 80% 100%, 0% 80%); /* диагональ */
  padding: 52px 56px 52px 34px; /* левый отступ меньше */
 
  margin-top: -120px;      /* выпирает вверх */
  margin-bottom: -100px;   /* выпирает вниз */
  padding-top: 250px;      /* чтобы текст не прилипал */
  /*padding-bottom: 64px;*/
}



/* Контент внутри */
.story__content{
  max-width: 520px;
}

.story__title{
  margin: 0;
  font-family: var(--brand-font);
  font-size: 37px;     /* чуть меньше, чем Casual */
  line-height: 1.02;
  font-weight: 300;
  color: #111;
  letter-spacing: .2px;
}

.story__text{
  margin: 20 0 16px;
  color: rgba(0,0,0,.75);
  font-size: 16px;
  line-height: 1.45;
  max-width: 560px;
}

/* Кнопка-ссылка как на примере */
.story__link{
  display: inline-block;
  font-size: 12px;
  letter-spacing: .12em;
  color: #111;
  text-decoration: underline;
  text-underline-offset: 10px;
  text-decoration-color: rgba(0,0,0,.55);
}
.story__link:hover{
  text-decoration-color: rgba(0,0,0,.9);
}

.story__media{
  background: #D2CEC8;
  height: 600px;
  padding-right: 34px;  /* отступ от правого края */
  padding-top: 16px;    /* необязательно, но чуть “воздуха” */
  padding-bottom: 16px;
  box-sizing: border-box;
  margin-left: -40px;
}




.story__video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;   /* важно: как картинка */
  border-radius: 400px; /* аккуратное скругление */
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.555);
  outline: 1px solid rgba(0, 0, 0, 0.033);
  outline-offset: -1px;
  
}


/* Адаптив */
@media (max-width: 980px){
  .story__inner{
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .story__panel{
    clip-path: none;
    padding: 40px 22px;
  }
  .story__title{ font-size: 46px; }
  .story__media{ height: 340px; }
  .story__fade{ height: 140px; }
}

/* =========================
   DISCOUNTS
   ========================= */

.discounts{
  background: #f3f1ed;
  padding: 120px 0 100px;
}

.discounts__head{
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 34px;
}

.discounts__title{
  margin: 0;
  font-size: 37px;     /* чуть меньше, чем Casual */
  line-height: 1.02;
  font-weight: 300;
  color: #111;
  letter-spacing: .2px;
}

.discounts__meta{
  
  padding-top: 10px;
  margin-left: -130px;
}

.discounts__text{
  /*margin: 6px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;*/
  margin: 0 0 16px;
  color: rgba(0,0,0,.75);
  font-size: 16px;
  line-height: 1.45;
  max-width: 560px;
}

.discounts__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.discount-card{
  background: #fdfcf8;
  border: 1px solid var(--border);
  padding: 44px 36px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.discount-card__icon{
  color: #caa46a; /* “золотой” как на примере */
  margin-bottom: 18px;
  
}

.discount-card__title{
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 300;
  letter-spacing: .2px;
}

.discount-card__text{
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

/* "Наши скидки" как "История кондитерской" */
.discounts__title-link{
   display: inline-block;
  color: #111;
  text-decoration: underline;
  text-underline-offset: 10px;
  text-decoration-color: rgba(0,0,0,.55);
  margin: 0;
  font-family: var(--brand-font);
  font-size: 37px;
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: .2px;
}

.discounts__title-link:hover{
  text-decoration-color: rgb(0, 0, 0);
}


@media (max-width: 980px){
  .discounts__head{ grid-template-columns: 1fr; }
  .discounts__title{ font-size: 42px; }
  .discounts__grid{ grid-template-columns: 1fr; }
  .discount-card{ min-height: unset; }
  .discounts__title-link{ font-size: 42px; }
}

/* =========================
   WHY — Почему заказывают у нас
   ========================= */

:root{
  --gold: #c7a46a; /* под иконки/линии, можешь подстроить */
}

.why{
  background: #f3f1ed;
  padding: 30px 0 110px;
}

.why__head{
  text-align: center;
  max-width: 820px;
  margin: 0 auto 60px;
}

.why__title{
  margin: 0;
  font-size: 37px;     /* чуть меньше, чем Casual */
  line-height: 1.02;
  font-weight: 300;
  color: #111;
  letter-spacing: .2px;
}

.why__line{
  width: 90px;
  height: 0.5px;
  background: var(--gold);
  margin: 18px auto 18px;
}

.why__subtitle{
  margin: 0;
  color: rgba(0,0,0,.75);
  font-size: 16px;
  line-height: 1.45;
}

.why__grid{
  /*display: grid;
  grid-template-columns: 1fr 220px 1fr;
  gap: 70px;
  align-items: center;*/
  display: grid;
  grid-template-columns: 1fr 220px 1fr;
  gap: 70px;

  /* ВАЖНО: растягиваем колонки по высоте, чтобы у обеих .why__col была одинаковая высота */
  align-items: stretch;

}

.why__center{
  display: flex;
  justify-content: center;
  align-self: center; /* чтобы картинка была по центру высоты секции */
}

.why__img{
  width: 1000px;
  max-height: 620px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.12));
}

.why__col{
  /*display: flex;
  flex-direction: column;
  gap: 56px;*/

  /* вместо flex делаем сетку из 3 одинаковых “строк” */
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  row-gap: 6px;
  height: 100%;
}

/* элемент преимущества */
.why-item{ max-width: 420px; }

.why-item__head{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.why__col--left .why-item{
  text-align: right;
  margin-left: auto;
}
.why__col--left .why-item__head{
  justify-content: flex-end;
  flex-direction: row-reverse; /* иконка справа от заголовка */
}
.why__col--left .why-item__title{
  text-align: right;              /* на всякий */
  width: 100%;                    /* чтобы заголовок занимал ширину и мог выровняться */
}
.why-item__icon{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0.5px solid #c7a46a;
  display: grid;
  place-items: center;
  color: var(--gold);
  flex: 0 0 auto;
}

.why-item__title{
  margin: 0;
  font-size: 20px;
  font-weight: 300;
}

.why-item__text{
  margin: 0;
  color: rgba(0,0,0,.75);
  font-size: 16px;
  line-height: 1.45;
}

/* адаптив */
@media (max-width: 980px){
  .why{ padding: 70px 0 90px; }
  .why__grid{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .why__col{
    display: flex;
    flex-direction: column;
    gap: 36px;
  }
  .why__col--left .why-item{
    text-align: left;
    margin-left: 0;
  }
  .why__col--left .why-item__head{
    justify-content: flex-start;
    flex-direction: row;
  }
  .why__col--left .why-item__title{
    text-align: left;
  }
  .why__img{ width: 140px; }
}

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

   
.faq{
  background: #f3f1ed;
  padding: 90px 0 200px;
}

.faq__head{
  text-align: center;
  max-width: 900px;
  margin: 0 auto 34px;
}

.faq__title{
  margin: 0;
  font-size: 37px;
  line-height: 1.02;
  font-weight: 300;
  color: #111;
  letter-spacing: .2px;
  font-family: var(--brand-font);
}

.faq__line{
  width: 90px;
  height: 1px;
  background: #c7a46a;
  margin: 18px auto 18px;
}

.faq__box{
  background: #fdfcf8;
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.03);
  padding: 0;
  margin: 26px auto 28px;
}

/* details/summary */
.faq-item{
  border-top: 5px solid rgba(0,0,0,.06);
}
.faq-item:first-child{ border-top: 0; }

.faq-item__q{
  /*list-style: none;
  cursor: pointer;
  padding: 26px 28px;
  font-size: 22px;
  font-weight: 300;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;*/
  list-style: none;
  cursor: pointer;
  padding: 26px 28px;
  font-size: 22px;
  font-weight: 300;
  color: #111;

  display: flex;
  align-items: center;
  justify-content: flex-start; /* было space-between */
  gap: 14px;                  /* расстояние между стрелкой и текстом */
}

/* текст в summary */
.faq-item__text{
  flex: 1 1 auto;
}

.faq-item__q::-webkit-details-marker{ display:none; }

/* стрелка слева как на рефе: делаем маленький треугольник, который крутится */
.faq-item__chev{
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  position: relative;
  opacity: .75;
}
.faq-item__chev::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width: 0;
  height: 0;
  border-left: 6px solid rgba(0,0,0,.75);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform .2s ease, opacity .2s ease;
}

.faq-item[open] .faq-item__chev::before{
  transform: rotate(90deg);
  opacity: .95;
}

/*.faq-item__a{
  padding: 0 28px 26px 64px; /* отступ как будто текст “после стрелочки” 
}*/


/* ответ: отступ слева равный месту под стрелку */
.faq-item__a{
  padding: 0 28px 26px 56px; /* подгони при желании: 52–64px */
}

.faq-item__a p{
  margin: 0;
  color: rgba(0,0,0,.65);
  font-size: 16px;
  line-height: 1.7;
}

/* кнопка снизу */
.faq__cta{
  display: block;
  margin: 0 auto;
  max-width: 980px;
  padding: 22px 24px;
  text-align: center;

  border: 1px solid #c7a46a;
  color: rgba(0,0,0,.75);
  background: #f3f1ed;

  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;

  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;

}

.faq__cta:hover{
  background: #e8e5df;
  border-color: #a48656;
}

/* адаптив */
@media (max-width: 980px){
  .faq__title{ font-size: 42px; }
  .faq-item__q{ font-size: 18px; padding: 20px 18px; }
  .faq-item__a{ padding: 0 18px 18px 46px; }
  .faq__cta{ padding: 18px 16px; letter-spacing: .12em; }
}

/* =========================
   FOOTER (как на референсе)
   ========================= */

.site-footer{
    
  position: relative;
  background: transparent;            /* фон рисуем псевдо-элементом */
  padding: 70px 0 50px;
  overflow: visible;
}

/* наклонная “плашка” */
.site-footer::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-160px;                        /* поднимаем фон вверх, чтобы был “заезд” */
  bottom:0;
  background: #D2CEC8/*#d2cec8*/;               /* как у твоей story-секции */
  clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0% 100%);
  z-index:1;
}

.site-footer__inner{
  position: relative;
  z-index: 2;
}



/* основная сетка */
.site-footer__grid{
  display:grid;
  grid-template-columns: 1.35fr .8fr .8fr .8fr;
  gap: 90px;
  align-items:start;
}

/* левый текст */
.site-footer__lead{
  font-family: var(--brand-font);
  font-size: 20px;
  line-height: 1.45;
  font-weight: 300;
  color: rgba(0,0,0,.75);
  margin-bottom: 28px;
}

.site-footer__contacts{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.site-footer__contact{
  display:inline-flex;
  align-items:center;
  gap: 12px;
  font-size: 14px;
  color: rgba(0,0,0,.82);
  text-decoration: none;
}

.site-footer__contact:hover{
  text-decoration: underline;
  text-underline-offset: 6px;
}

.site-footer__ico{
  width: 16px;
  height: 16px;
  display:inline-block;
  vertical-align: middle;
  opacity: .75;
  flex-shrink: 0;
}

.site-footer__social{
  margin-top: 10px;
  font-size: 14px;
  color: rgba(0,0,0,.75);
}

.site-footer__social-link{
  text-decoration: none;
  color: rgba(0,0,0,.82);
}
.site-footer__social-link:hover{
  text-decoration: underline;
  text-underline-offset: 6px;
}

.site-footer__sep{
  margin: 0 10px;
  opacity: .55;
}

.site-footer__note{
  margin-top: 12px;
  font-size: 12.5px;
  color: rgba(0,0,0,.65);
}

/* колонки */
.site-footer__title{
  font-family: var(--brand-font);
  font-size: 18px;
  font-weight: 300;
  color: rgba(0,0,0,.35);
  margin-bottom: 22px;
}

.site-footer__link{
  display:block;
  font-size: 14px;
  color: rgba(0,0,0,.82);
  text-decoration: none;
  margin-bottom: 14px;
}

.site-footer__link:hover{
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* нижняя строка */
.site-footer__bottom{
  margin-top: 90px;
  padding-top: 26px;
  border-top: 1px solid rgba(0,0,0,.18);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;

  font-size: 13px;
  color: rgba(0,0,0,.55);
}

.site-footer__policy,
.site-footer__dev-link{
  color: rgba(0,0,0,.55);
  text-decoration: none;
}
.site-footer__policy:hover,
.site-footer__dev-link:hover{
  color: rgba(0,0,0,.78);
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* адаптив */
@media (max-width: 1100px){
  .site-footer__grid{
    grid-template-columns: 1fr 1fr;
    gap: 46px;
  }
  .site-footer__bottom{
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 640px){
  .site-footer{
    padding: 120px 0 60px;
  }
  .site-footer__grid{
    grid-template-columns: 1fr;
  }
}

/* =========================
   MEGA MENU
========================= */
.mega{
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--mega-bg);
  height: 420px;       /* <-- фикс высота */
  overflow: hidden;    /* <-- чтобы всё было "в одном блоке" */
  padding: 34px 0 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 40;
}

.header--mega-open .mega{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega__container{
  width: min(var(--container, 1200px), calc(100% - 64px));
  margin: 0 auto;
}

/* показываем только активную панель */
.mega__panel{ display: none; }
.mega[data-active="catalog"] .mega__panel--catalog{ display:block; }
.mega[data-active="life"] .mega__panel--life{ display:block; }
.mega[data-active="b2b"] .mega__panel--b2b{ display:block; }
.mega[data-active="city"] .mega__panel--city{ display:block; }

.mega__grid{
  display: grid;
  gap: 36px;
  align-items: start;
}

.mega__grid--catalog{
  grid-template-columns: 260px 1fr;
}

.mega__grid--cards{
  grid-template-columns: 260px 1fr 1fr;
}

.mega__grid--simple{
  grid-template-columns: 1fr;
}

/* Левая зона */
.mega-left__brand{
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: .02em;
  margin-bottom: 14px;
  color: #111;
}
.mega-left__text{
  color: rgba(0,0,0,.75);
  max-width: 240px;
  line-height: 1.45;
}
.mega-left__contacts{
  margin-top: 22px;
  display: grid;
  gap: 12px;
}
.mega-contact{
  color: #111;
  text-decoration: none;
}
.mega-contact:hover{ text-decoration: underline; text-underline-offset: 4px; }

.mega-soc{
  color: rgba(0,0,0,.65);
  font-size: 14px;
}

/* Колонки ссылок */
.mega-cols{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 54px;
}
.mega-col__title{
  font-size: 20px;
  margin-bottom: 14px;
  color: #111;
  font-weight: 300;
  text-decoration: none;
  display: block;
}
a.mega-col__title:hover{
  color: #e5a1a1;
  text-decoration: underline;
  text-underline-offset: 6px;
}
.mega-link{
  display: block;
  padding: 6px 0;
  color: rgba(0,0,0,.82);
  text-decoration: none;
}
.mega-link--separated{
  margin-top: 18px;
}
.mega-link:hover{
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Карточки с "картинкой" */
.mega-card,
.mega-tile{
  display: block;
  text-decoration: none;
  color: #111;
}

:root{
  --mega-thumb-h: 320px; /* <-- подстрой: 280/300/320 чтобы совпало с “Каталог” */
}

.mega-card__img,
.mega-tile__img{
  width: 100%;
  height: var(--mega-thumb-h);
  background: #e9e6e1;
  overflow: hidden;          /* важно: чтобы обрезало */
}

.mega-card__img img,
.mega-tile__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* одинаковое заполнение */
  display: block;
}
/* Каталог: сдвигаем левую картинку ближе к левому краю */
.mega__panel--catalog .mega__grid--catalog{
  justify-content: start; /* на всякий случай */
}
.mega__panel--catalog .mega-tile:first-child{
  margin-left: -125px;
}

.mega-card__cap{
  margin-top: 10px;
  font-size: 16px;
  color: rgba(0,0,0,.82);
}

.mega-tile__title{
  margin-top: 12px;
  font-size: 22px;
  font-weight: 300;
  color: #111;
}

/* Портретная карточка только для "История бренда" */
.mega-tile--portrait{
  max-width: 260px;      /* делает плитку уже, как в каталоге */
  width: 100%;
  
}



.mega-card__img--portrait{
  height: auto;          /* убираем фикс-высоту */
  aspect-ratio: 4 / 5;   /* вертикальный прямоугольник (ширина/высота) */
  overflow: hidden;
  
}


.mega-city__note{
  max-width: 560px;
  margin: 0 auto;          /* центр по горизонтали в правой колонке */
  text-align: justify;
  color: rgba(0,0,0,.75);
  font-size: 16px;
  line-height: 1.6;
}
/* === Выравнивание контента панели "Каталог" под пункт меню "Каталог" === */
.mega__panel--catalog{
  padding-left: 127px; /* подгони: 260–340px */
  padding-right: 0;
}

/* чуть уменьшим общий "воздух" между левой картинкой и колонками */
.mega__grid--catalog{
  gap: 96px; /* было 36px */
}



/* Небольшое "единое целое" с шапкой */
.header--mega-open{
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/*перекрываем стили в header*/
.header{
  background: var(--hdr-bg);
  transition: background .18s ease;
}

/* цвета текста/иконок шапки */
.brand__name--stack{ color: var(--hdr-fg); }
.header__nav--center a,
.header__nav--center a:visited{ color: var(--hdr-fg); }
.header__phone,
a.header__phone:visited,
.header__tg,
.header__hours,
.header__social,
.icon-btn,
a.icon-btn:visited{ color: var(--hdr-fg); }

/* подчёркивание у пунктов меню */
.header__nav--center a{
  text-decoration-color: transparent;
}
.header__nav--center a:hover{
  text-decoration-color: var(--hdr-underline);
}

/* состояние, когда mega-menu открыт */
.header.header--mega-open{
  --hdr-bg: var(--mega-bg);
  --hdr-fg: #111;
  --hdr-underline: rgba(0,0,0,.7);
}

/* О заказе: картинка слева, заголовок под картинкой, ссылки справа */
.mega-tile--order{
  display: grid;
  grid-template-columns: 260px 1fr; /* слева фикс, справа ссылки */
  gap: 22px;
  align-items: start;
}

/* левая колонка = картинка + заголовок */
.mega-tile--order .mega-tile__left{
  width: 260px;
}

/* картинка */
.mega-tile--order .mega-tile__imgWrap{
  width: 260px;
  height: var(--mega-thumb-h); /* у тебя 320px */
  overflow: hidden;
  background: #e9e6e1;
  display: block;
}
.mega-tile--order .mega-tile__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* заголовок под картинкой */
.mega-tile__title--under{
  display: inline-block;
  margin-top: 14px;
  text-decoration: none;
}
.mega-tile--order:hover .mega-tile__title--under{
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* правая часть */
.mega-tile--order .mega-tile__sideLinks{
  margin-top: 6px; /* выравнивание относительно картинки */
  display: flex;
  flex-direction: column;
  gap: 14px;
}


.mega__panel--life .mega__grid--cards{
  grid-template-columns: 1fr;
  justify-items: start;  

}

.mega__panel--life .mega-tile{
  margin-left: 490px;       /* подстрой значение */
   margin-top: -40px;
}

/* =========================
   Центровка подписей под картинками в mega
   ========================= */

/* 1) Заголовок под любой плиткой */
.mega-tile__title{
  width: 100%;
  text-align: center;
}

/* 2) Чтобы сама плитка (картинка + подпись) была по центру относительно своей ширины */
.mega-tile{
  display: flex;
  flex-direction: column;
  align-items: center; /* центрирует содержимое по оси X */
}

/* 3) Частный случай "О заказе": заголовок под картинкой */
.mega-tile--order .mega-tile__left{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 4) Если где-то подпись всё равно "прилипает" (из-за наследования), принудительно */
.mega-tile__title--under{
  width: 100%;
  text-align: center;
}
/* =========================
   MEGA / Клиентам (b2b) — фиксируем сетку
   ========================= */

.mega__panel--b2b .mega__grid--cards{
  display: grid;
  grid-template-columns: 452px 320px 480px; /* контакты | доставка | о заказе(+ссылки) */
  column-gap: 60px;
  align-items: start;
}

/* Позиции элементов в сетке */
.mega__panel--b2b .mega-left{ grid-column: 1; }

.mega__panel--b2b .mega__grid--cards > a.mega-tile--portrait{
  grid-column: 2;
  justify-self: start;      /* можно center, если надо */
}

/* Блок "О заказе" (картинка + ссылки) */
.mega__panel--b2b .mega-tile--order{
  grid-column: 3;
  display: grid;
  grid-template-columns: 1fr 160px; /* слева картинка, справа ссылки */
  gap: 28px;
  align-items: start;

  width: 100%;
  max-width: none;          /* важно — убрать 260px */
}

/* Заголовки под картинками — по центру */
.mega__panel--b2b .mega-tile__title,
.mega__panel--b2b .mega-tile__title--under{
  text-align: center;
}

/* Если нужно уменьшить расстояние между "Доставка" и "О заказе" */
.mega__panel--b2b .mega__grid--cards{
  column-gap: 40px; /* подгони */
}
/* =========================
   HOVER в шапке, когда открыт mega-menu
   ========================= */

/* Telegram: меняем "обводку" (подчёркивание) на чёрную */
.header.header--mega-open .header__tg:hover,
.header.header--mega-open .header__tg:focus-visible{
  text-decoration-color: rgba(0,0,0,.85);
}

/* Иконки справа: делаем рамку чёрной вместо белой */
.header.header--mega-open .icon-btn--ghost{
  border-color: rgba(0,0,0,.25);
  color: #111; /* на всякий случай */
}
/* Бейдж (кол-во товаров у корзины) тоже темный */
.header--mega-open .badge{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.35);
  color: #111;
}
.header.header--mega-open .icon-btn--ghost:hover,
.header.header--mega-open .icon-btn--ghost:focus-visible{
  border-color: rgba(0,0,0,.65);
}
.header.header--mega-open .header__phone:hover,
.header.header--mega-open .header__phone:focus-visible{
  text-decoration-color: rgba(0,0,0,.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Бренд «Вкус облаков»: подчёркивание тёмное при открытом меню */
.header.header--mega-open .brand:hover .brand__name--stack,
.header.header--mega-open .brand:focus-visible .brand__name--stack{
  text-decoration-color: rgba(0,0,0,.85);
}

.mega__grid--city{
  display: grid;
  grid-template-columns: 1fr 520px; /* справа ширина карты */
  gap: 60px;
  align-items: start;
}





/* Мы в городе: 3 колонки (контакты + текст + карта) */
.mega__panel--city .mega__grid--city{
  display: grid;
  grid-template-columns: 260px 1fr 463px; /* 1) контакты  2) текст  3) карта */
  gap: 48px;
  align-items: start;
}

/* если нужно сдвинуть средний текст ещё правее/левее */
.mega-city__middle{
  padding-left: 10px; /* можешь увеличить до 20-60px */
}

/* контейнер под карту справа */
.city-map{
  width: 463px;
  height: 356px;
  border-radius: 16px;
  overflow: hidden;
}

.city-map iframe{
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}

/* адаптив: на узких экранах перестроить в столбик */
@media (max-width: 1024px){
  .mega__panel--city .mega__grid--city{
    grid-template-columns: 1fr;
  }
  .city-map{
    width: 100%;
    max-width: 463px;
  }
}

/* Мега-меню на мобилке: закрытие по тапу + кнопка ✕ */
.mega__close-btn{
  display: none;
  position: absolute;
  top: 12px; right: 16px;
  background: none; border: none;
  font-size: 24px; cursor: pointer;
  color: #1f1f1f; z-index: 50;
  padding: 4px 8px; line-height: 1;
}
@media (max-width: 768px){
  .mega__close-btn{ display: block; }
  .mega{
    padding-top: 48px;
  }
  .city-map{
    max-width: 100%;
    height: 280px;
  }
  .mega-city__middle{ display: none; }
  .mega-city__left::after{
    content: 'Доставка осуществляется только по городу Дубна.';
    display: block;
    margin-top: 16px;
    font-size: 13px;
    color: #6c6c6c;
  }
}

/* ====== CASUAL hover-картинка + кнопка ====== */

.casual-card__img{
  position: relative;
  overflow: hidden;
}

/* обе картинки одинаковые по размеру */
.casual-card__imgMain,
.casual-card__imgHover{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .6s ease;
}

/* hover-картинка поверх основной */
.casual-card__imgHover{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}

/* кнопка "Заказать" */
.casual-card__btn{
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  padding: 14px 16px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.15);
  color: #111;

  text-align: center;
  text-decoration: none;

  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;

  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}

/* наведение: показываем hover-картинку и кнопку */
.casual-card:hover .casual-card__imgHover{
  opacity: 1;
}

.casual-card:hover .casual-card__btn{
  opacity: 1; transform: translateX(-50%) translateY(-2px); 
}

/* ====== To order: 2 кнопки на hover + (опционально) hover-картинка ====== */

.toorder-card__img{
  position: relative;
  overflow: hidden;
}

/* картинки */
.toorder-card__imgMain,
.toorder-card__imgHover{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .6s ease;
}

/* hover-картинка (если добавила второй <img>) */
.toorder-card__imgHover{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}

/* блок кнопок */
.toorder-card__actions{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;

  display: flex;
  gap: 10px;

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 2;
}

/* кнопки */
.toorder-card__btn{
  flex: 1;
  padding: 14px 12px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.15);
  color: #111;

  text-align: center;
  text-decoration: none;

  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;

  white-space: nowrap;
}

/* наведение */
.toorder-card:hover .toorder-card__actions{
  opacity: 1;
  transform: translateY(0);
}

.toorder-card:hover .toorder-card__imgHover{
  opacity: 1;
}
/* ===== Fillings: затемнение + название по центру ===== */

.fillings-card{
  position: relative;
  overflow: hidden;
}

.fillings-card img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* затемнение НИЖЕ текста */
.fillings-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.56);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 1;            /* важно */
}


/* текст ВЫШЕ затемнения */
.fillings-card__label{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;

   text-transform: uppercase;
letter-spacing: .18em;
font-size: 16px;

  z-index: 2;            /* важно */
  color: #fff;
  font-weight: 300;
  text-shadow: 0 2px 14px rgba(0,0,0,.85);

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  padding: 14px;
  pointer-events: none;
}

.fillings-card:hover::after{
  opacity: 1;
}

.fillings-card:hover .fillings-card__label{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   Collection page (Летняя коллекция)
   ========================= */

.page--catalog{
  background: #f3f1ed;
}

/* чтобы шапка на внутренней странице была светлой и читаемой */
.page--catalog .header{
  /*position: sticky; /* удобно: шапка остаётся сверху */
  position: absolute;
  top: 0;
  background: #f3f1ed;
  --hdr-bg: #f3f1ed;
  --hdr-fg: #111;
  --hdr-underline: rgba(0,0,0,.7);
}

/* mega тоже на светлой теме */
.page--catalog .header__nav--center a{
  text-decoration-color: transparent;
}
.page--catalog .header__nav--center a:hover{
  text-decoration-color: rgba(0,0,0,.7);
}


.collection-page{
  padding: 130px 0 230px;
  
}

.collection-hero{
  padding-top: 16px;
  padding-bottom: 18px;
}

.collection-hero__grid{
  display: grid;
  grid-template-columns: 1.2fr 1.1fr auto;
  gap: 36px;
  align-items: start;
}

.collection-hero__title{
  margin: 0;
  font-family: var(--brand-font);
  font-size: 64px;
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: .2px;
  color: #111;
}

.collection-hero__text{
  margin: 12px 0 0;
  max-width: 560px;
  color: rgba(0,0,0,.75);
  font-size: 16px;
  line-height: 1.55;
   margin-left: -100px;
}

.collection-hero__filters{
  margin-top: 18px;
  height: 52px;
  padding: 0 22px;
  min-width: 320px;

  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.12);
  color: rgba(0,0,0,.85);

  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;

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

  cursor: pointer;
}

.collection-hero__filters:hover{
  background: rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.2);
}

.collection-chips{
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip{
  border: 1px solid rgba(0,0,0,.18);
  background: transparent;
  border-radius: 999px;
  padding: 10px 14px;

  font-size: 12px;
  color: rgba(0,0,0,.82);
  cursor: pointer;
}

.chip.is-active{
  background: rgba(199,164,106,.25);
  border-color: rgba(199,164,106,.6);
}

/* grid 4 в ряд */
.collection-grid{
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 26px;
}

.collect-card{
  background: transparent;
}

.collect-card__img{
  position: relative;
  overflow: hidden;
  background: #e9e6e1;
  height: 420px;
}

.collect-card__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.collect-card__tag{
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 14px;
  color: rgb(134, 2, 2);
}

.collect-card__qty{
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255,255,255,.72);
  color: rgba(0,0,0,.8);
  font-size: 12px;
  padding: 8px 12px;
}

.collect-card__bottom{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  align-items: baseline;
}

.collect-card__name{
  font-family: var(--brand-font);
  font-size: 20px;
  line-height: 1.2;
  color: #111;
}

.collect-card__price{
  color: rgba(0,0,0,.75);
  font-size: 14px;
  white-space: nowrap;
}

/* ===== Filters drawer (как на референсе) ===== */

.filtersBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 56px;
  padding: 0 22px;
  border: 1px solid rgba(0,0,0,.25);
  background: #d6d0cb;
  color: #111;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.filtersBtn__icon{
  font-size: 16px;
  opacity: .75;
}

/* затемнение слева */
.filtersOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 9998;
}

/* панель справа */
.filtersDrawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(640px, 92vw);
  background: #d6d0cb;
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 9999;

  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  padding: 44px 48px 34px;
  box-shadow: -24px 0 60px rgba(0,0,0,.18);
}

.filtersDrawer__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.filtersDrawer__title{
  margin: 0;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.1;
}

.filtersDrawer__close{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.25);
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: inherit;
}

.filtersDrawer__sort{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0,0,0,.15);
}

.filtersDrawer__sortLabel{
  font-size: 14px;
  opacity: .8;
}

.filtersDrawer__sortTabs{
  display: inline-flex;
  gap: 14px;
}

.sortTab{
  border: 0;
  background: transparent;
  font-size: 13px;
  opacity: .55;
  cursor: pointer;
  color: inherit;
}
.sortTab.is-active{ opacity: 1; }

.filtersDrawer__chips{
  display: flex;
  gap: 12px;
  margin: 18px 0 12px;
  flex-wrap: wrap;
}

.chip{
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.22);
  background: transparent;
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
}
.chip.is-active{
  background: rgba(0,0,0,.06);
}

.filtersDrawer__body{
  padding-top: 6px;
  overflow: auto;
}

.filterBlock{
  border-bottom: 1px solid rgba(0,0,0,.15);
  padding: 18px 0;
}

.filterBlock__summary{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 20px;
}
.filterBlock__summary::-webkit-details-marker{ display:none; }

.filterBlock[open] .filterBlock__chev{ transform: rotate(180deg); }
.filterBlock__chev{ transition: transform .2s ease; opacity: .7; }

.filterBlock__content{
  padding-top: 16px;
}

.priceRow{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
}

.priceField{
  position: relative;
}
.priceField input{
  width: 100%;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.18);
  padding: 0 46px 0 16px;
  outline: none;
}
.priceField__suffix{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .7;
}
.priceDash{ opacity: .7; }

.checkRow{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  padding: 8px 0;
}

.filtersDrawer__footer{
  display: grid;
  gap: 14px;
  padding-top: 18px;
}

.btnApply{
  height: 56px;
  border: 0;
  background: rgba(0,0,0,.28);
  color: #fff;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  font-size: 14px;
}

.btnReset{
  height: 44px;
  border: 0;
  background: transparent;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .8;
  cursor: pointer;
  color: inherit;
  font-size: 13px;
}

/* OPEN state */
.filters-isOpen .filtersOverlay{
  opacity: 1;
}

.filters-isOpen .filtersDrawer{
  transform: translateX(0);
}

/* запрет скролла фона */
.no-scroll{
  overflow: hidden;
}


/* адаптив */
@media (max-width: 1100px){
  .collection-hero__grid{ grid-template-columns: 1fr; }
  .collection-hero__filters{ min-width: unset; width: 100%; }
  .collection-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .collection-hero__title{ font-size: 48px; }
}

@media (max-width: 640px){
  .collection-grid{ grid-template-columns: 1fr; }
  .collect-card__img{ height: 340px; }
}


/* ====== для Летняя коллекция Collection card: hover-картинка + кнопка ====== */

.collect-card__img{
  position: relative;
  overflow: hidden;
}

/* обе картинки одинаковые */
.collect-card__imgMain,
.collect-card__imgHover{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* hover-картинка поверх */
.collect-card__imgHover{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 1;
}

/* чтобы бейджи/теги были выше */
.collect-card__tag,
.collect-card__qty{
  position: absolute;
  z-index: 2;
}

/* кнопка "Заказать" */
.collect-card__btn{
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  padding: 14px 16px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.15);
  color: #111;

  text-align: center;
  text-decoration: none;

  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;

  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 3;
}

/* наведение */
.collect-card:hover .collect-card__imgHover{
  opacity: 1;
}

.collect-card:hover .collect-card__btn{
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* ===== summer.html: чёрное подчёркивание/hover в шапке ===== */
.page--catalog .brand__name--stack{
  color:#111;
  text-decoration-color: transparent;
}

/* Подчёркивание названия "Вкус облаков" на hover — ЧЁРНОЕ */
.page--catalog .brand:hover .brand__name--stack,
.page--catalog .brand:focus-visible .brand__name--stack{
  text-decoration-color: rgba(0,0,0,.85);
}

/* Иконки (поиск/аккаунт/корзина): на hover рамка/цвет — ЧЁРНЫЕ */
.page--catalog .icon-btn--ghost{
  color:#111;
  border-color: rgba(0,0,0,.25);
}

.page--catalog .icon-btn--ghost:hover,
.page--catalog .icon-btn--ghost:focus-visible{
  border-color: rgba(0,0,0,.65);
}

/* Счётчик корзины — тоже темнее (опционально) */
.page--catalog #btnCart .badge{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.35);
  color: #111;
}

/* Телефон и Telegram: подчёркивание чёрное на светлых страницах */
.page--catalog .header__phone:hover,
.page--catalog .header__phone:focus-visible{
  text-decoration-color: rgba(0,0,0,.85);
}

.page--catalog .header__tg:hover,
.page--catalog .header__tg:focus-visible{
  text-decoration-color: rgba(0,0,0,.85);
}


/* ==========================================================
   RESPONSIVE — планшеты (768px)
   ========================================================== */
@media (max-width: 768px){
  /* Container: чуть меньше боковые */
  .container{ width: min(var(--container), calc(100% - 32px)); }

  /* Hero background: fixed for parallax, cream bg below image, limited overlay */
  .page-bg{ background-size: 115% auto; background-position: center top; background-color: #f3f1ed; }
  .page-bg__overlay{ bottom: auto; height: 60vh; }

  /* Hero */
  .hero{ min-height: 60vh; padding: 100px 0 24px; }
  .hero__title{ font-size: 36px; }
  .hero__text{ font-size: 15px; }
  .hero__actions{ align-items: flex-start; }

  /* Casual / ToOrder sliders */
  .casual{ padding: 60px 0; }
  .casual__head{ grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px; }
  .casual__title{ font-size: 36px; }
  .casual__meta{ margin-left: 0; }
  .casual__arrows{ margin-left: 0; padding-top: 0; margin-top: 16px; }
  .casual-card{ width: 80vw; }
  .casual-card__img{ height: 200px; }
  .toorder{ padding: 60px 0; }
  .toorder__head{ grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px; }
  .toorder__title{ font-size: 30px; }
  .toorder__meta{ margin-left: 0; }
  .toorder__arrows{ margin-left: 0; margin-top: 0; }
  .toorder-card{ width: 80vw; }
  .toorder-card__img{ height: 380px; min-height: unset; }

  /* Fillings */
  .fillings{ padding: 50px 0 24px; }
  .fillings__head{ grid-template-columns: 1fr; gap: 16px; }
  .fillings__title{ font-size: 30px; }
  .fillings__meta{ margin-left: 0; }

  /* Story */
  .story__fade{ height: 40px; }
  .story{ padding: 0 0 20px; margin-top: 0; }
  .story__inner{ grid-template-columns: 1fr; width: calc(100% - 24px); margin: 0 auto; }
  .story__panel{
    clip-path: none;
    padding: 20px 20px;
    margin: 0;
  }
  .story__title{ font-size: 36px; }
  .story__media{
    height: 240px;
    margin: 16px 0 0;
    padding: 0;
  }
  .story__video{ border-radius: 20px; }

  /* Discounts */
  .discounts{ padding: 60px 0; }
  .discounts__head{ grid-template-columns: 1fr; }
  .discounts__meta{ margin-left: 0; }
  .discounts__title{ font-size: 32px; }
  .discounts__title-link{ font-size: 32px; }
  .discounts__grid{ grid-template-columns: 1fr; }
  .discount-card{ padding: 28px 20px; min-height: unset; }

  /* Why */
  .why{ padding: 60px 0; }
  .why__title{ font-size: 30px; }

  /* FAQ */
  .faq{ padding: 60px 0; }
  .faq__title{ font-size: 32px; }
  .faq-item__q{ font-size: 16px; padding: 16px 14px; }
  .faq-item__a{ padding: 0 14px 14px 40px; font-size: 14px; }

  /* Footer */
  .site-footer{ padding: 100px 0 40px; }
  .site-footer::before{ top: -100px; clip-path: polygon(0 12%, 100% 0%, 100% 100%, 0% 100%); }
  .site-footer__grid{ gap: 32px; grid-template-columns: 1fr 1fr; }
  .site-footer__lead{ font-size: 18px; }

  /* Collection (catalog pages) */
  .collection-hero__title{ font-size: 36px; }
  .collect-card__img{ height: 280px; }

  /* Filters drawer — tablet */
  .filtersDrawer{ padding: 36px 32px 28px; }
  .filtersDrawer__title{ font-size: 34px; }

  /* Mega menu / modals */
  .mega{ height: auto; max-height: 80vh; overflow-y: auto; }
  .mega__grid--catalog{ grid-template-columns: 1fr; }
  .mega__grid--cards{ grid-template-columns: 1fr; }
  .modal__card{ width: calc(100% - 16px); margin: 3vh auto; }
}


/* ==========================================================
   RESPONSIVE — телефоны (480px)
   ========================================================== */
@media (max-width: 480px){
  /* Container: минимальные поля */
  .container{ width: calc(100% - 24px); }

  /* Hero background: fixed for parallax, cream bg below image, limited overlay */
  .page-bg{ background-size: 145% auto; background-position: center top; background-color: #f3f1ed; }
  .page-bg__overlay{ bottom: auto; height: 45vh; }

  /* Hero: height matches photo so text stays on the image */
  .hero{ min-height: 45vh; padding: 90px 0 20px; }
  .hero__title{ font-size: 28px; }
  .hero__text{ font-size: 14px; }
  .hero__actions{ flex-direction: column; align-items: flex-start; }
  .hero__actions .btn{ text-align: left; }

  /* Casual / ToOrder */
  .casual{ padding: 50px 0; }
  .casual__title{ font-size: 28px; }
  .casual__text{ font-size: 14px; }
  .casual-card{ width: 85vw; }
  .casual-card__img{ height: 180px; }
  .toorder{ padding: 50px 0; }
  .toorder__title{ font-size: 26px; }
  .toorder__text{ font-size: 14px; }
  .toorder-card{ width: 85vw; }
  .toorder-card__img{ height: 300px; min-height: unset; }

  /* Mobile menu panel scroll */
  .mobile-menu__panel{ max-height: calc(100vh - 20px); overflow-y: auto; }

  /* Fillings */
  .fillings{ padding: 40px 0 20px; }
  .fillings--page{ padding-top: 100px !important; padding-bottom: 60px !important; }
  .fillings__title{ font-size: 26px; }
  .fillings-card{ height: 280px; }

  /* Story */
  .story__fade{ height: 28px; }
  .story{ padding: 0 0 16px; margin-top: 0; }
  .story__inner{ width: calc(100% - 32px); margin: 0 auto; }
  .story__panel{ padding: 16px 14px; }
  .story__title{ font-size: 28px; }
  .story__media{ height: 180px; margin-top: 12px; }
  .story__text{ font-size: 14px; }

  /* Discounts */
  .discounts{ padding: 50px 0; }
  .discounts__title{ font-size: 26px; }
  .discounts__title-link{ font-size: 26px; }
  .discount-card{ padding: 20px 16px; }
  .discount-card__title{ font-size: 20px; }
  .discount-card__text{ font-size: 14px; }

  /* Why */
  .why{ padding: 50px 0; }
  .why__title{ font-size: 26px; }
  .why__head{ margin-bottom: 32px; }
  .why__center{ display: none; }
  .why-item__title{ font-size: 17px; }
  .why-item__text{ font-size: 14px; }
  .why-item__icon{ width: 36px; height: 36px; }

  /* FAQ */
  .faq{ padding: 50px 0; }
  .faq__title{ font-size: 26px; }
  .faq-item__q{ font-size: 15px; padding: 14px 12px; }
  .faq-item__a{ padding: 0 12px 12px 36px; font-size: 13px; }
  .faq__cta{ padding: 14px 12px; font-size: 11px; }

  /* Footer */
  .site-footer{ padding: 80px 0 30px; }
  .site-footer::before{ top: -60px; clip-path: polygon(0 6%, 100% 0%, 100% 100%, 0% 100%); }
  .site-footer__grid{ grid-template-columns: 1fr; gap: 24px; }
  .site-footer__lead{ font-size: 16px; }
  .site-footer__bottom{ font-size: 11px; }

  /* Collection (catalog pages) */
  .collection-hero__title{ font-size: 28px; }
  .collection-hero__text{ margin-left: 0 !important; }
  .collect-card__img{ height: 240px; }

  /* Filters drawer — mobile */
  .filtersDrawer{ padding: 28px 20px 24px; width: 100vw; }
  .filtersDrawer__title{ font-size: 28px; }
  .filtersDrawer__sort{ grid-template-columns: 1fr; gap: 10px; }
  .filtersDrawer__sortTabs{ flex-wrap: wrap; gap: 8px; }
  .sortTab{ font-size: 12px; }
  .filterBlock__summary{ font-size: 16px; }
  .btnApply{ height: 48px; font-size: 13px; }
  .btnReset{ height: 38px; font-size: 12px; }

  /* Iframes responsive */
  iframe{ max-width: 100%; height: auto; min-height: 250px; }

  /* General: cards, buttons */
  .btn--lg{ padding: 14px 20px; font-size: 13px; }
}