/* CORNER — системна адаптація десктопу (ТЗ власниці 22.10).
   Основа — погоджена мобільна система (до 749 px), перенесена на великий екран не пікселями, а пропорціями:
   кожен токен плавно росте від планшета (750 px) до десктопу (~1440 px) через clamp().
   УСІ правила файлу — лише в @media (min-width: 750px): мобільна версія ними не зачіпається за побудовою
   (перевірка — знімок обчислених стилів 17 сторінок на 390 px до й після, має бути 0 відмінностей).
   Окремі сторінки зберігають свою композицію (галереї колекцій, колаж «Про нас», карта «Контактів»). */

@media (min-width: 750px) {
  :root {
    /* вертикальний ритм: телефон → десктоп */
    --s-head: clamp(32px, 3.4vw, 48px);       /* шапка → заголовок сторінки (тел. 32) */
    --s-title: clamp(24px, 2.25vw, 32px);     /* заголовок → вміст (тел. 24) */
    --s-section: clamp(48px, 5vw, 72px);      /* між секціями (тел. 48) */
    --s-end: clamp(72px, 6.7vw, 96px);        /* останній блок → футер (тел. 72) */
    --s-row: clamp(40px, 3.4vw, 48px);        /* між рядами карток (тел. 32) */
    /* типографіка */
    --t-h1: clamp(28px, 2.4vw, 34px);         /* заголовок сторінки (тел. 24–26) */
    --t-h2: clamp(22px, 1.95vw, 28px);        /* заголовок секції (тел. 22) */
    --t-body: clamp(14px, 1.05vw, 15px);      /* основний текст (тел. 14) */
    --lh-text: 1.65;                          /* тел. 1.6; на ширшому рядку — трохи більше повітря */
    --w-text: 680px;                          /* ширина текстового блоку: ~70 знаків у рядку */
    --font-uk: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --font-en: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  }

  /* ------------------------------------------------------------------ типографіка: одна ієрархія на всіх сторінках */
  /* заголовок сторінки — як на телефоні видимий (там, де видимий на телефоні: «Про нас», «Контакти», колекції, кошик, 404) */
  .page-title, .about-title, .contacts-title, .page-head--collection .page-title {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    font-size: var(--t-h1); font-weight: 400; line-height: 1.15; letter-spacing: -0.03em; text-transform: none;
  }
  /* .section .section__title — сильніше за окремі правила секцій у pages.css (.section--pieces / --related) */
  .section .section__title { font-size: var(--t-h2); font-weight: 400; line-height: 1.2; letter-spacing: -0.03em; }
  /* шрифт за мовою — як на телефоні: UA Montserrat, EN Poppins (заголовки сторінок і основний текст) */
  .page-title:lang(uk), .about-title:lang(uk), .contacts-title:lang(uk),
  .story__intro:lang(uk), .story__intro:lang(uk) *, .story__rest:lang(uk), .story__rest:lang(uk) *,
  .about-text:lang(uk) p, .contacts-page__intro:lang(uk), .page-head--collection + .text-page:lang(uk) p,
  .product .accordion__body:lang(uk), .banner--home .banner__title:lang(uk) { font-family: var(--font-uk); }
  .page-title:lang(en), .about-title:lang(en), .contacts-title:lang(en),
  .story__intro:lang(en), .story__intro:lang(en) *, .story__rest:lang(en), .story__rest:lang(en) *,
  .about-text:lang(en) p, .contacts-page__intro:lang(en), .page-head--collection + .text-page:lang(en) p,
  .product .accordion__body:lang(en), .banner--home .banner__title:lang(en) { font-family: var(--font-en); }
  /* основний текст: один розмір і інтерліньяж; довгий текст — не ширший за --w-text */
  .story__intro, .story__rest, .about-text, .contacts-page__intro, .page-head--collection + .text-page, .legal p {
    font-size: var(--t-body); line-height: var(--lh-text);
  }
  .story, .about-text, .page-head--collection + .text-page { max-width: var(--w-text); margin-left: auto; margin-right: auto; }
  /* вирівнювання й переноси — як погоджено на телефоні: «Про нас» — ліворуч; колекції — по ширині; без автопереносів */
  .about-text p { text-align: left; }
  .story__intro, .story__rest, .page-head--collection + .text-page { text-align: justify; }
  .about-text, .about-text *, .story, .story *, .page-head--collection + .text-page, .page-head--collection + .text-page * {
    hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal;
  }
  .legal { max-width: calc(var(--w-text) + 40px); }
  /* ціна в картці — як на телефоні в усіх списках (каталог, «Нові надходження», «Вироби колекції», рекомендації) */
  .card .price--card { font-size: 12px; font-weight: 400; line-height: 1.25; letter-spacing: 0.04em; }

  /* ------------------------------------------------------------------ вертикальний ритм */
  /* заголовок сторінки: шапка → заголовок → вміст */
  .page-head--collection { padding-top: var(--s-head); padding-bottom: var(--s-title); }
  .about-title { max-width: var(--w-text); margin: var(--s-head) auto var(--s-title); }
  .contacts-page .page-head { padding-top: var(--s-head); padding-bottom: var(--s-title); }
  .contacts-page__intro { margin-top: var(--s-title); }
  .legal { padding-top: var(--s-head); padding-bottom: var(--s-end); }
  /* блоки товарів під основним вмістом: «Вам може сподобатися», «Вироби колекції», «Нові надходження» —
     одна система: попереднє → заголовок --s-section, заголовок → карусель --s-title, низ каруселі → футер --s-end */
  .section.section--related, .section.section--pieces { padding-top: var(--s-section); padding-bottom: var(--s-end); }
  .section--related .section__head, .section--pieces .section__head, .section--new-in .section__head { margin-bottom: var(--s-title); }
  .section--related .slider, .section--pieces .slider { padding-bottom: 0; }
  .container:has(+ .section--related) .product { padding-bottom: 0; }
  .container:has(+ .section--pieces) .edit-gallery, .container:has(+ .section--pieces) .text-page { padding-bottom: 0; }
  .page-head--collection + .text-page > :last-child { margin-bottom: 0; }
  .section.section--new-in { padding-top: var(--s-section); }
  /* каталог: між рядами карток, кінець сітки → футер */
  .product-grid { row-gap: var(--s-row); padding-bottom: var(--s-end); }
  /* колекції: останнє фото / текст → футер, коли «Виробів» нема */
  .edit-gallery { padding-bottom: var(--s-end); }
  .page-head--collection + .text-page { padding-bottom: var(--s-end); }

  /* ------------------------------------------------------------------ футер: та сама система, що на телефоні (48 / 48 / 48),
     на десктопі — --s-section (48 → 72); «Контакти»: карта впритул до футера, як на телефоні */
  .footer { padding-top: var(--s-section); }
  .footer__grid, .footer__grid--two { row-gap: var(--s-section); }
  .footer__bottom, .footer__bottom--center { margin-top: var(--s-section); }
  .contacts-map { margin-bottom: 0; }

  /* ------------------------------------------------------------------ «Про нас»: фото, погоджене на телефоні, — і на десктопі
     (після тексту, перед футером, тієї ж ширини, що й текст; кадр 3:4, без спотворень). Колаж угорі — як був. */
  .about-text { padding-bottom: var(--s-section); }
  .about-photo { display: block; max-width: var(--w-text); margin: 0 auto var(--s-end); aspect-ratio: 3 / 4; overflow: hidden; }
  .about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
}

/* ======================================================================================================================
   ТЗ 22.10 (2) — горизонтальна сітка десктопу: контент розширюється разом із вікном, єдині лінії вирівнювання.
   Лише від 990 px (з цієї ширини діє десктопна сітка; телефон і планшет — без змін).
   ====================================================================================================================== */
@media (min-width: 990px) {
  :root {
    --gutter: 24px;               /* 990–1279: зовнішні поля (було 36) */
    --page-max: 2560px;           /* було 1680 — на широких екранах контент стояв вузьким стовпчиком по центру */
    --nav-gap: clamp(28px, 2.4vw, 44px);     /* між пунктами меню (було 24) */
    --icon-gap: clamp(8px, 0.9vw, 16px);     /* між іконками (було 0) */
    --w-gallery: clamp(900px, 72vw, 1280px); /* редакційні фото: колекції, колаж «Про нас» (було 900) */
    --w-covers: clamp(720px, 52vw, 920px);   /* обкладинки «Колекцій» 4:5 (було 720) */
  }
  /* шапка: меню від лівої лінії сітки, кошик — до правої; поле всередині іконки (32 px кнопка, 24 px знак) компенсуємо,
     щоб знак стояв рівно на лінії; логотип — у центральній колонці сітки 1fr auto 1fr, тобто по центру */
  .nav { gap: var(--nav-gap); }
  .header__right { gap: var(--icon-gap); margin-right: -4px; }
  /* ширші фото й обкладинки там, де композиція це передбачає; текст — і далі не ширший за --w-text */
  .edit-gallery, .about-cover { max-width: var(--w-gallery); }
  .collection-list { max-width: var(--w-covers); }
}
@media (min-width: 1280px) { :root { --gutter: 32px; } }
@media (min-width: 1600px) { :root { --gutter: 44px; } }