:root {
  --bg: #f7f1e7;
  --bg-soft: #efe6d8;
  --text: #4b4845;
  --text-muted: #7c766e;
  --taupe: #77705f;
  --burgundy: #8a2638;
  --green: #1d5a40;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Alegreya Sans", "Segoe UI", sans-serif;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* Для напівпрозорих рамок і підкладок: rgba(var(--ink-rgb), .2) */
  --ink-rgb: 75, 72, 69;
  --bg-rgb: 247, 241, 231;
  --surface: #fffdf9;
  --surface-warm: #fbeee0;
  --surface-white: #fff;
  --surface-green: #e7f2ec;
}

/* Нічний режим: кнопка з місяцем у шапці ставить <html data-theme="dark"> (main.js) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1c1815;
  --bg-soft: #25201c;
  --text: #ece4d8;
  --text-muted: #a99f92;
  --taupe: #b9ae96;
  --burgundy: #c45a6b;
  --green: #6dbb93;
  --ink-rgb: 236, 228, 216;
  --bg-rgb: 28, 24, 21;
  --surface: #29231f;
  --surface-warm: #31281f;
  --surface-white: #29231f;
  --surface-green: #1e3229;
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  height: 100%;
  overflow: hidden; /* прокрутка лише всередині слайдера */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

button { font: inherit; color: inherit; }

/* ---------- Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(16px, 4vw, 56px);
  transition: background .4s, box-shadow .4s;
}

.header.is-solid {
  background: rgba(var(--bg-rgb), .92);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(var(--ink-rgb), .08);
}

.header__brand {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: .25em;
  color: var(--taupe);
  text-decoration: none;
  opacity: 0;
  transition: opacity .4s;
}

.header.is-solid .header__brand { opacity: 1; }

.header__nav {
  display: flex;
  gap: clamp(10px, 1.4vw, 36px);
  white-space: nowrap;
}

.header__nav a,
.header__cart {
  text-decoration: none;
  font-size: clamp(.85rem, 1.05vw, 1rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text);
  position: relative;
}

.header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--burgundy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s;
}

.header__nav a:hover::after,
.header__nav a.is-active::after { transform: scaleX(1); }

.header__cart {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header__cart-count {
  font-size: .8rem;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--burgundy);
  color: #fff;
}

/* ---------- Slider ---------- */
.slider {
  height: 100vh;
  height: 100dvh;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.slider::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.slider__arrow {
  position: fixed;
  top: 50%;
  z-index: 15;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  border-radius: 50%;
  border: 1px solid rgba(var(--ink-rgb), .25);
  background: rgba(var(--bg-rgb), .85);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: opacity .3s, background .3s, color .3s, border-color .3s;
}

.slider__arrow:hover {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: #fff;
}

.slider__arrow--prev { left: clamp(12px, 2vw, 32px); }
.slider__arrow--next { right: clamp(12px, 2vw, 32px); }

.slider__arrow[disabled] {
  opacity: 0;
  pointer-events: none;
}

.slider__pager {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 15;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(var(--bg-rgb), .8);
  backdrop-filter: blur(6px);
}

.slider__counter {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-muted);
  letter-spacing: .05em;
}

.slider__counter b {
  font-weight: 500;
  color: var(--burgundy);
}

.slider__dots {
  display: flex;
  gap: 8px;
}

.slider__dot {
  width: 22px;
  height: 14px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.slider__dot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
  background: rgba(var(--ink-rgb), .25);
  transition: background .3s;
}

.slider__dot[aria-selected="true"]::before { background: var(--burgundy); }

/* ---------- Slide 1: Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

/* Фото намист самі по собі обрізані краєм кадру — показуємо їх цілими в арці
   (як арочні ікони), тож край кадру читається як рамка, а не обріз */
.hero__necklace,
.author__necklace {
  height: 100%;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 24px) 0 80px;
}

.hero__necklace { padding-left: clamp(40px, 7vw, 140px); }

.arch {
  height: min(760px, calc(100dvh - var(--header-h) - 110px)); /* арка завжди цілком на екрані */
  width: auto;
  max-width: none;
  aspect-ratio: 926 / 2513; /* пропорції фото — нічого не обрізається */
  object-fit: cover;
  border-radius: 0;
  box-shadow: 0 18px 40px -24px rgba(40, 34, 30, .45);
  outline: 1px solid rgba(var(--ink-rgb), .12);
  outline-offset: 8px;
}

.hero__content {
  padding: calc(var(--header-h) + 16px) clamp(80px, 8vw, 120px) 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__logo {
  width: min(420px, 80%);
  margin-bottom: clamp(24px, 5vh, 64px);
}

.hero__text { max-width: 560px; }

.hero__text h1 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.35;
  margin: 0 0 1.2em;
}

.hero__text p { margin: 0 0 1.1em; }

.btn {
  display: inline-block;
  margin-top: .8em;
  padding: 14px 34px;
  border: 1px solid var(--burgundy);
  color: var(--burgundy);
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .3s, color .3s;
}

.btn:hover {
  background: var(--burgundy);
  color: #fff;
}

/* ---------- Slide 2: Author ---------- */
.author {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(32px, 4vw, 72px);
  padding-left: clamp(80px, 8vw, 140px);
}

.author__figure {
  justify-self: center;
  margin: 0;
  padding-top: var(--header-h);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.author__figure img {
  height: min(62vh, 620px);
  width: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.author__figure figcaption {
  font-size: 1.15rem;
}

.author__figure figcaption span {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-style: italic;
  color: var(--green);
}

.author__necklace { padding-right: clamp(96px, 7vw, 140px); } /* не під стрілкою слайдера */
.author__necklace .arch { aspect-ratio: 827 / 2315; }

/* ---------- Тексти про намиста (у вкладці «Намисто», над каталогом) ---------- */
.collection h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1.15;
  margin: 0 0 clamp(32px, 6vh, 64px);
}

.collection__about {
  margin-bottom: clamp(40px, 7vh, 72px);
  padding: clamp(28px, 4vw, 48px);
  background: var(--bg-soft);
}

.collection__story {
  columns: 2 300px;
  column-gap: clamp(32px, 5vw, 72px);
  max-width: 1100px;
}

.collection__story p {
  margin: 0 0 1.1em;
  break-inside: avoid;
}

.collection__subhead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.2;
  margin: clamp(16px, 3vh, 32px) 0 clamp(20px, 3vh, 36px);
}

.values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 64px);
}

.feature__num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--burgundy);
}

.feature h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  margin: .2em 0 .4em;
}

.feature p {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.1rem;
}

/* ---------- Слайди 4–6: лінії (глина, ікони, вибійка) ---------- */
.line {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
}

.line__cover {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100dvh; /* рівно екран, навіть коли контент слайда довший */
  padding-top: var(--header-h); /* напис MARENKA на фото не ховається під шапкою */
  overflow: hidden;
}

/* Правий край фото м'яко переходить у фон сторінки */
.line__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
  mask-image: linear-gradient(to right, #000 82%, transparent);
}

.line__content {
  padding: calc(var(--header-h) + 32px) clamp(80px, 8vw, 140px) 96px clamp(24px, 4vw, 64px);
  align-self: center;
}

.line h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.15;
  margin: 0 0 .6em;
}

.line__content > p {
  max-width: 600px;
  margin: 0 0 clamp(28px, 4vh, 44px);
}

.catalog--line .card__body { flex-direction: column; gap: 4px; }

.catalog--line {
  grid-template-columns: repeat(2, minmax(0, 260px));
}

/* Дві фотографії поруч в одній обкладинці (вибійка) */
.line__cover--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 4px;
}

.line__cover--pair img {
  -webkit-mask-image: none;
  mask-image: none;
}

.line__cover--pair img:last-child {
  -webkit-mask-image: linear-gradient(to right, #000 70%, transparent);
  mask-image: linear-gradient(to right, #000 70%, transparent);
}

/* Колаж «процес роботи»: текст у бежевій смузі посередині фото (28–69% висоти) */
.icons-process {
  position: relative;
  max-width: 560px;
  margin: 0 0 clamp(28px, 4vh, 44px);
}

.icons-process img { width: 100%; }

.icons-process figcaption {
  position: absolute;
  inset: 29% 8% 32%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .6em;
  font-size: clamp(.95rem, 1.25vw, 1.15rem);
  line-height: 1.45;
  color: var(--text);
}

.icons-process figcaption p { margin: 0; }

.line__wide {
  width: 100%;
  max-width: 560px;
  margin-top: clamp(28px, 4vh, 44px);
}

/* Ілюстрації: текст про ілюстраторку */
.illustrator {
  max-width: 600px;
  margin-bottom: clamp(36px, 5vh, 56px);
}

.illustrator p { margin: 0 0 1em; }

.illustrator__lead {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.9vw, 1.6rem);
  line-height: 1.35;
}

.illustrator__lead span { font-style: italic; color: var(--green); }

.illustrator__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 1.4em 0 1.6em;
  padding: 0;
  list-style: none;
}

.illustrator__facts li {
  padding: 14px 14px 12px;
  border-top: 2px solid var(--burgundy);
  background: var(--bg-soft);
  font-size: .95rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.illustrator__facts b {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--burgundy);
}

.illustrator__quote {
  margin: 1.4em 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--green);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .illustrator__facts { gap: 8px; }
  .illustrator__facts li { padding: 10px 8px; font-size: .8rem; }
  .illustrator__facts b { font-size: 1.7rem; }
}

/* Ілюстрації: роботи-портфоліо (не продаються) */
.works {
  display: grid;
  gap: clamp(28px, 4vh, 44px);
  max-width: 600px;
}

.work { margin: 0; }

.work__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.work__zoom img { width: 100%; }

/* Обкладинка книжки на білому фоні: білий зливається з кремовим фоном сторінки */
.work--book .work__zoom img {
  max-width: 420px;
  margin: 0 auto;
  mix-blend-mode: multiply;
}

:root[data-theme="dark"] .work--book .work__zoom img {
  mix-blend-mode: normal;
  border-radius: 4px;
}

.work figcaption {
  margin-top: 10px;
  font-size: 1rem;
  color: var(--text-muted);
}

.lightbox {
  max-width: 96vw;
  max-height: 96vh;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-out;
}

.lightbox::backdrop { background: rgba(20, 16, 14, .85); }

.lightbox img {
  display: block;
  max-width: 96vw;
  max-height: 96vh;
  object-fit: contain;
}

.lightbox__close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: #2b2522;
  cursor: pointer;
}

/* ---------- Slide 8: Музика ---------- */
.music {
  display: flex;
  justify-content: center;
  background: var(--bg-soft);
}

.music__inner {
  width: 100%;
  max-width: 860px;
  padding: calc(var(--header-h) + 40px) clamp(80px, 8vw, 140px) 110px;
}

.music h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1.15;
  margin: 0 0 .3em;
}

.music__lead { margin: 0 0 clamp(24px, 4vh, 40px); color: var(--text-muted); }

.music__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: clamp(24px, 4vh, 40px);
}

.music__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(var(--ink-rgb), .15);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  transition: transform .25s var(--ease), border-color .25s;
}

.music__link:hover { transform: translateY(-3px); border-color: currentColor; }
.music__link span { display: flex; flex-direction: column; font-size: .95rem; color: var(--text-muted); line-height: 1.3; }
.music__link b { font-weight: 500; font-size: 1.1rem; color: var(--text); }
.music__link--youtube svg { color: #e62117; }
.music__link--spotify svg { color: #1db954; }
.music__link--facebook svg { color: #1877f2; }

.music__player {
  display: block;
  width: 100%;
  height: 352px;
  border: 0;
  border-radius: 14px;
}

@media (max-width: 760px) {
  .music__inner { padding: calc(var(--header-h) + 16px) 16px 110px; }
  .music__links { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- Slide 9: Відео ---------- */
.videos__inner { padding: calc(var(--header-h) + 32px) clamp(80px, 8vw, 140px) 110px; }

.videos__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px 48px;
  margin-bottom: clamp(24px, 4vh, 40px);
}

.videos h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1.15;
  margin: 0 0 .15em;
}

.videos__lead { margin: 0; color: var(--text-muted); }

.videos__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: clamp(20px, 3vh, 32px);
}

.videos__tab {
  padding: 10px 22px;
  border: 1px solid rgba(var(--ink-rgb), .22);
  border-radius: 24px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}

.videos__tab::after { content: " · " attr(data-count); opacity: .6; }
.videos__tab:hover { border-color: var(--burgundy); }

.videos__tab[aria-selected="true"] {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: #fff;
}

.videos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
}

.video-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.video-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bg-soft);
}

.video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* hqdefault має чорні смуги згори й знизу — обрізаємо їх */
  transition: transform .5s var(--ease);
}

.video-card:hover .video-card__thumb img { transform: scale(1.05); }

.video-card__play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(138, 38, 56, .88);
  transition: transform .25s var(--ease);
}

.video-card__play::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 54%;
  transform: translate(-50%, -50%);
  border: 10px solid transparent;
  border-left: 16px solid #fff;
  border-right: 0;
}

.video-card:hover .video-card__play { transform: scale(1.1); }

.video-card__title {
  font-size: 1rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card__date { font-size: .85rem; color: var(--text-muted); }

.video-player {
  width: min(1100px, 94vw);
  padding: 0;
  border: 0;
  background: none;
}

.video-player::backdrop { background: rgba(20, 16, 14, .9); }

.video-player__frame { aspect-ratio: 16 / 9; }

.video-player__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
}

@media (max-width: 760px) {
  .videos__inner { padding: calc(var(--header-h) + 16px) 16px 110px; }
  .videos__grid { grid-template-columns: 1fr; }
}

/* ---------- Slide 10: Collection ---------- */
.collection {
  display: flex;
  flex-direction: column;
}

.collection__inner {
  flex: 1;
  padding: calc(var(--header-h) + 32px) clamp(80px, 8vw, 140px) 56px;
}

.collection__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px 48px;
  margin-bottom: clamp(28px, 4vh, 48px);
}

.collection h2 { margin-bottom: .15em; }

.collection__lead {
  margin: 0;
  color: var(--text-muted);
  max-width: 460px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filters__btn {
  padding: 8px 16px;
  border: 1px solid rgba(var(--ink-rgb), .22);
  border-radius: 20px;
  background: none;
  font-size: .95rem;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}

.filters__btn:hover { border-color: var(--burgundy); }

.filters__btn[aria-pressed="true"] {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: #fff;
}

.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(20px, 2.5vw, 36px);
}

.card {
  display: flex;
  flex-direction: column;
  animation: card-in .6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}

.card__media {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-soft);
  cursor: zoom-in;
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease), opacity .5s;
}

.card__img--look {
  position: absolute;
  inset: 0;
  object-position: center 35%;
  opacity: 0;
}

.card__media:hover .card__img { transform: scale(1.04); }
.card__media:hover .card__img--look { opacity: 1; }

.card__badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(var(--bg-rgb), .9);
  font-size: .8rem;
  line-height: 1.3;
  text-align: left;
}

.card__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-top: 14px;
}

.card__type {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.card__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.15;
}

.card__price {
  margin: 0;
  font-size: 1.05rem;
  white-space: nowrap;
  color: var(--burgundy);
}

.card__add {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(var(--ink-rgb), .22);
  background: none;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}

.card__add:hover {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: #fff;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Product modal ---------- */
.product-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* display: grid вище перебиває атрибут hidden — без цього невидиме вікно перекриває всю сторінку */
.product-modal[hidden] { display: none; }

.product-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 34, 30, .55);
  opacity: 0;
  transition: opacity .3s;
}

.product-modal__dialog {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  width: min(1100px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  background: var(--bg);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s, transform .3s var(--ease);
}

.product-modal.is-open .product-modal__backdrop { opacity: 1; }
.product-modal.is-open .product-modal__dialog { opacity: 1; transform: none; }

.product-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--bg-rgb), .9);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.product-modal__gallery {
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
}

.product-modal__image {
  width: 100%;
  height: min(70dvh, 640px);
  object-fit: contain;
}

.product-modal__thumbs {
  display: flex;
  gap: 8px;
  padding: 12px;
}

.product-modal__thumbs button {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  opacity: .6;
  transition: opacity .2s, border-color .2s;
}

.product-modal__thumbs button[aria-current="true"] {
  opacity: 1;
  border-color: var(--burgundy);
}

.product-modal__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-modal__info {
  padding: clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-modal__type {
  margin: 0;
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.product-modal__info h3 {
  margin: .1em 0 .2em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  line-height: 1.1;
}

.product-modal__price {
  margin: 0 0 1em;
  font-size: 1.4rem;
  color: var(--burgundy);
}

.product-modal__motif {
  margin: 0 0 1em;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--green);
}

.product-modal__materials {
  margin: 0 0 1em;
  padding-left: 1.1em;
  color: var(--text);
}

.product-modal__note {
  margin: 0 0 1.4em;
  font-size: 1rem;
  color: var(--text-muted);
}

.btn--solid {
  background: var(--burgundy);
  color: #fff;
  cursor: pointer;
  align-self: flex-start;
}

.btn--solid:hover { background: #6f1d2c; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  z-index: 60;
  padding: 12px 22px;
  background: var(--text);
  color: var(--bg);
  font-size: 1rem;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s var(--ease);
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 24px clamp(24px, 4vw, 56px) 88px;
  border-top: 1px solid rgba(var(--ink-rgb), .12);
  font-size: .95rem;
  color: var(--text-muted);
}

.footer__brand {
  font-family: var(--font-display);
  letter-spacing: .25em;
  font-size: 1.3rem;
  color: var(--taupe);
}

/* ---------- Animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s ease, transform .9s var(--ease);
}

.slide.is-active .reveal {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 120ms + 150ms);
}

.hero__necklace img,
.author__necklace img {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 1.2s ease, transform 1.4s var(--ease);
}

.author__necklace img { transform: translateX(40px); }

.slide.is-active .hero__necklace img,
.slide.is-active .author__necklace img {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .slider { scroll-behavior: auto; }
  .reveal,
  .hero__necklace img,
  .author__necklace img { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .author { grid-template-columns: 1fr; }
  .author__necklace { display: none; }
  .author { padding-right: clamp(80px, 8vw, 140px); }
}

/* Меню з 10 пунктів вміщається в рядок лише від ~1660px; вужче — кнопка-бургер і випадний список */
.header__menu {
  display: none;
  padding: 6px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

@media (max-width: 1660px) {
  .header__menu { display: flex; order: -1; }
  .header__nav { display: none; }
  .header.is-menu-open { background: var(--bg); box-shadow: 0 1px 0 rgba(var(--ink-rgb), .12); }
  .header.is-menu-open .header__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: 8px clamp(16px, 4vw, 56px) 20px;
    background: var(--bg);
    box-shadow: 0 16px 30px -20px rgba(40, 34, 30, .5);
  }
  .header.is-menu-open .header__nav a { padding: 12px 0; font-size: 1rem; border-bottom: 1px solid rgba(var(--ink-rgb), .1); }
  .header.is-menu-open .header__nav a::after { display: none; }
  .header.is-menu-open .header__nav a.is-active { color: var(--burgundy); }
}

@media (max-width: 1660px) {
  .header__brand { opacity: 1; }
}

@media (max-width: 900px) {

  .values__grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 1.125rem; }

  .header__actions { margin-left: auto; }
  .header__brand { display: none; } /* на телефоні і так прозорий — звільняємо місце для кнопок */

  /* На телефоні стрілки внизу, біля лічильника */
  .slider__arrow {
    top: auto;
    bottom: 18px;
    margin-top: 0;
    width: 44px;
    height: 44px;
  }

  .slider__pager { bottom: 24px; }
  .slider__dots { display: none; }

  /* Намисто — вузька смуга зліва, логотип праворуч, текст на всю ширину нижче */
  .hero {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "neck logo"
      "text text";
    align-items: start;
  }

  .hero__content { display: contents; }

  .hero__necklace {
    grid-area: neck;
    height: 62vh;
    justify-content: flex-start;
    padding: calc(var(--header-h) + 8px) 0 0 16px;
  }

  .hero__necklace .arch { height: calc(62vh - var(--header-h) - 16px); outline-offset: 5px; }
  .hero__necklace { padding-left: 16px; }

  .hero__logo {
    grid-area: logo;
    align-self: center;
    justify-self: center;
    width: 82%;
    margin: var(--header-h) 0 0;
  }

  .hero__text {
    grid-area: text;
    padding: 32px 16px 96px;
  }

  .hero__text h1 { font-size: 1.35rem; }

  .author {
    display: block;
    padding: calc(var(--header-h) + 8px) 16px 96px;
  }

  .author__figure { padding-top: 0; }

  .author__figure img {
    height: auto;
    width: 100%;
  }

  .collection__about { padding: 20px 16px; }

  .line { display: block; }

  .line__cover {
    position: static;
    height: calc(62vh + var(--header-h));
  }

  .line__cover img {
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
    mask-image: linear-gradient(to bottom, #000 80%, transparent);
  }

  .line__content { padding: 24px 16px 96px; }

  .catalog--line { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .icons-process figcaption {
    inset: 29% 6% 31%;
    gap: .4em;
    font-size: clamp(.68rem, 3.2vw, .85rem);
    line-height: 1.35;
  }

  .collection__inner { padding: calc(var(--header-h) + 16px) 16px 24px; }

  .catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }

  .card__body { flex-direction: column; gap: 4px; }
  .card__name { font-size: 1.3rem; }
  .card__badge { display: none; }

  .product-modal { padding: 0; align-items: end; }

  .product-modal__dialog {
    grid-template-columns: 1fr;
    max-height: 92dvh;
  }

  .product-modal__image { height: 52dvh; }
  .product-modal__info { padding: 24px 16px 32px; }
  .btn--solid { align-self: stretch; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
}

/* ---------- Cart ---------- */
.header__cart {
  padding: 6px;
  border: 0;
  background: none;
  cursor: pointer;
}

.header__cart-count[hidden] { display: none; }

.card__add.is-added {
  border-color: var(--green);
  color: var(--green);
}

/* Продані товари (позначка з Telegram-бота) */
.card__sold {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--burgundy);
  color: #fff;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.card.is-sold .card__img { filter: grayscale(.35); }

.card__add:disabled,
#pm-add:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.card__add:disabled:hover {
  background: none;
  border-color: rgba(var(--ink-rgb), .22);
  color: inherit;
}

.cart {
  position: fixed;
  inset: 0;
  z-index: 55;
}

.cart[hidden] { display: none; }

.cart__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 34, 30, .5);
  opacity: 0;
  transition: opacity .35s;
}

.cart__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform .35s var(--ease);
}

.cart.is-open .cart__backdrop { opacity: 1; }
.cart.is-open .cart__panel { transform: none; }

.cart__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 16px 28px;
  border-bottom: 1px solid rgba(var(--ink-rgb), .12);
}

.cart__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
}

.cart__close {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.cart__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px 28px;
  font-size: 1.05rem;
}

.cart__empty {
  display: none;
  text-align: center;
  padding: 48px 0;
  color: var(--text-muted);
}

.cart.is-empty .cart__empty { display: block; }
.cart.is-empty .cart__footer { display: none; }

.cart__lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cart-line {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), .1);
}

.cart-line img {
  width: 84px;
  height: 84px;
  object-fit: cover;
}

.cart-line__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.2;
}

.cart-line__price {
  margin: 2px 0 8px;
  color: var(--burgundy);
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(var(--ink-rgb), .22);
}

.qty button {
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  font-size: 1.1rem;
  cursor: pointer;
}

.qty button:disabled { opacity: .3; cursor: default; }

.qty span {
  min-width: 24px;
  text-align: center;
}

.cart-line__remove {
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.cart-line__remove:hover { color: var(--burgundy); }

.cart__footer { padding-top: 20px; }

.cart__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.2rem;
}

.cart__total strong {
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--burgundy);
}

.cart__hint {
  margin: 4px 0 20px;
  font-size: .95rem;
  color: var(--text-muted);
}

.btn--block {
  display: block;
  width: 100%;
  text-align: center;
  border: 1px solid var(--burgundy);
  font-family: inherit;
}

.cart__back {
  margin-bottom: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
}

.cart__back:hover { color: var(--burgundy); }

/* ---------- Checkout form ---------- */
.checkout fieldset {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.checkout legend {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.checkout label {
  display: block;
  margin-bottom: 12px;
  font-size: .95rem;
  color: var(--text-muted);
}

.checkout input:not([type="radio"]),
.checkout textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 11px 12px;
  border: 1px solid rgba(var(--ink-rgb), .25);
  background: var(--surface);
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  transition: border-color .2s;
}

.checkout input:focus,
.checkout textarea:focus {
  outline: none;
  border-color: var(--burgundy);
}

.checkout input:user-invalid { border-color: #b3261e; }

.optional { font-size: .85rem; }

.choice { margin-bottom: 12px; }

.choice label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
  color: var(--text);
  cursor: pointer;
}

.choice input {
  margin-top: 5px;
  accent-color: var(--burgundy);
}

.checkout-summary {
  list-style: none;
  margin: 8px 0 20px;
  padding: 16px;
  background: var(--bg-soft);
  font-size: 1rem;
}

.checkout-summary li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}

.checkout-summary__total {
  margin-top: 8px;
  padding-top: 8px !important;
  border-top: 1px solid rgba(var(--ink-rgb), .15);
  font-weight: 500;
  color: var(--burgundy);
}

.cart__done {
  text-align: center;
  padding: 40px 0;
  color: var(--green);
}

.cart__done h3 {
  margin: 16px 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  color: var(--text);
}

.cart__done p {
  margin: 0 0 24px;
  color: var(--text-muted);
}

/* ---------- Account ---------- */
.header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header__theme,
.header__user {
  display: flex;
  color: inherit;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 0;
  background: none;
  font-size: 1rem;
  cursor: pointer;
}

.header__user-name[hidden] { display: none; }

/* Перемикач мови UA | EN: дві половинки, вибрана — чорна */
.lang-switch {
  display: flex;
  border: 1px solid currentColor;
  border-radius: 20px;
  overflow: hidden;
}

.lang-switch button {
  min-width: 40px;
  padding: 5px 10px;
  border: 0;
  background: none;
  color: inherit;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .25s, color .25s;
}

.lang-switch button + button { border-left: 1px solid currentColor; }
.lang-switch button:hover { background: rgba(var(--ink-rgb), .08); }

.lang-switch button[aria-pressed="true"] {
  background: #1a1715;
  color: #fff;
  cursor: default;
}

/* У нічному режимі чорне зливалося б із фоном — вибрана половинка світла */
:root[data-theme="dark"] .lang-switch button[aria-pressed="true"] {
  background: var(--text);
  color: var(--bg);
}

@media (max-width: 760px) {
  .lang-switch button { min-width: 34px; padding: 4px 7px; font-size: .72rem; }
}

/* Місяць у денному режимі, сонце — у нічному */
.header__theme-sun,
:root[data-theme="dark"] .header__theme-moon { display: none; }
:root[data-theme="dark"] .header__theme-sun { display: block; }

.header__user.is-signed-in { color: var(--burgundy); }

.account__notice {
  margin: 0 0 20px;
  padding: 12px 14px;
  background: var(--surface-warm);
  border-left: 3px solid #c98a3a;
  font-size: .95rem;
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(var(--ink-rgb), .15);
}

.tabs button {
  padding: 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--text-muted);
  cursor: pointer;
}

.tabs button[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--burgundy);
}

.auth-form [hidden] { display: none; }

.auth-form__error {
  min-height: 1.4em;
  margin: 0 0 8px;
  font-size: .95rem;
  color: #b3261e;
}

.link-btn {
  display: block;
  margin: 14px auto 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: .95rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-btn:hover { color: var(--burgundy); }

.btn:disabled { opacity: .5; cursor: default; }

.account__hello {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.9rem;
}

.account__email {
  margin: 0 0 24px;
  color: var(--text-muted);
  font-size: .95rem;
}

.account__subtitle {
  margin: 8px 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
}

.orders {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.orders__item {
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--bg-soft);
}

.orders__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.orders__status {
  font-size: .85rem;
  padding: 2px 10px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--green);
}

.orders__date,
.orders__items {
  margin: 4px 0 0;
  font-size: .95rem;
  color: var(--text-muted);
}

.orders__total {
  margin: 6px 0 0;
  color: var(--burgundy);
}

.orders__empty {
  color: var(--text-muted);
  font-size: .95rem;
}

.account__logout { margin-bottom: 8px; }

@media (max-width: 760px) {
  .header__user-name { display: none; }
}

/* ---------- Support chat ---------- */
.support[hidden],
.support__window[hidden],
.support__badge[hidden],
.support__offline[hidden] { display: none; }

.support {
  position: fixed;
  right: clamp(12px, 2vw, 32px);
  bottom: 24px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.support__toggle {
  position: relative;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: var(--burgundy);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(138, 38, 56, .3);
  cursor: pointer;
  transition: transform .2s;
}

.support__toggle:hover { transform: scale(1.05); }

.support__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--green);
  border: 2px solid var(--bg);
  font-size: .8rem;
  line-height: 18px;
  text-align: center;
}

.support__window {
  order: -1;
  width: min(380px, calc(100vw - 24px));
  height: min(540px, calc(100dvh - 140px));
  display: flex;
  flex-direction: column;
  background: var(--bg);
  box-shadow: 0 18px 48px rgba(40, 34, 30, .22);
  animation: card-in .3s var(--ease);
}

.support__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 12px 14px 18px;
  background: var(--burgundy);
  color: #fff;
}

.support__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.1;
}

.support__select {
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .85);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.support__select:not(:disabled) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.support__select:disabled { opacity: 1; cursor: default; }
.support__select option { color: var(--text); }

.support__close {
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.support__messages {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 1rem;
  line-height: 1.45;
}

.msg {
  max-width: 85%;
  padding: 10px 14px 6px;
  border-radius: 14px;
}

.msg--support {
  align-self: flex-start;
  background: var(--bg-soft);
  border-bottom-left-radius: 4px;
}

.msg--client {
  align-self: flex-end;
  background: var(--burgundy);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.msg--requisites {
  max-width: 92%;
  background: var(--surface-white);
  border: 1px solid rgba(29, 90, 64, .35);
  border-left: 4px solid var(--green);
}

.msg__title {
  margin: 0 0 4px;
  font-weight: 500;
  color: var(--green);
}

.msg__text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg--requisites .msg__text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95rem;
}

.msg__meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  font-size: .75rem;
  opacity: .65;
}

.msg__copy {
  margin-right: auto;
  padding: 3px 10px;
  border: 1px solid var(--green);
  border-radius: 10px;
  background: none;
  color: var(--green);
  font-size: .8rem;
  cursor: pointer;
}

.msg--requisites .msg__meta { opacity: 1; color: var(--text-muted); }

.support__offline {
  margin: 0;
  padding: 6px 16px;
  font-size: .85rem;
  background: var(--surface-warm);
}

.support__form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(var(--ink-rgb), .12);
}

.support__form textarea {
  flex: 1;
  resize: none;
  max-height: 120px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--ink-rgb), .22);
  border-radius: 18px;
  background: var(--surface);
  font: inherit;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--text);
}

.support__form textarea:focus {
  outline: none;
  border-color: var(--burgundy);
}

.support__form button {
  width: 42px;
  height: 42px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--burgundy);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.support__form button:disabled { opacity: .5; }

.cart__done .link-btn { margin-top: 14px; }

@media (max-width: 760px) {
  .support { bottom: 76px; right: 12px; }
  .support__toggle { width: 50px; height: 50px; }
  .support__window { height: min(520px, calc(100dvh - 160px)); }
}

/* ---------- Receipts in chat ---------- */
.support__attach {
  width: 42px;
  height: 42px;
  flex: none;
  border: 0;
  background: none;
  color: var(--text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.support__attach:hover { color: var(--burgundy); }

/* Скріпку не фарбуємо як кнопку «Надіслати» */
.support__form .support__attach {
  background: none;
  color: var(--text-muted);
  border-radius: 50%;
}

.msg__upload {
  display: block;
  width: 100%;
  margin: 10px 0 4px;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--burgundy);
  color: #fff;
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
}

.msg__upload:hover { background: #6f1d2c; }

.msg--kind-receipt .msg__title,
.msg--kind-receipt { color: #fff; }

.msg--kind-paid {
  background: var(--surface-green);
  border-left: 4px solid var(--green);
}

.msg.is-pending { opacity: .6; }

/* ---------- Chat notification bubble ---------- */
.support__preview[hidden] { display: none; }

.support__preview {
  position: relative;
  width: min(300px, calc(100vw - 32px));
  background: var(--surface-white);
  border-radius: 14px 14px 4px 14px;
  box-shadow: 0 12px 32px rgba(40, 34, 30, .2);
  opacity: 0;
  transform: translateY(10px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .3s, transform .35s var(--ease);
}

.support__preview.is-shown {
  opacity: 1;
  transform: none;
}

.support.is-open .support__preview { display: none; }

.support__preview-open {
  display: block;
  width: 100%;
  padding: 12px 36px 14px 16px;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  color: var(--text);
  cursor: pointer;
}

.support__preview-from {
  display: block;
  margin-bottom: 2px;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--burgundy);
}

.support__preview-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.4;
}

.support__preview-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.support__preview-close:hover { background: var(--bg-soft); }

/* Лічильник помітніший: легка пульсація, поки є непрочитані */
.support__badge:not([hidden]) { animation: badge-pop .4s var(--ease); }

@keyframes badge-pop {
  0%   { transform: scale(.4); }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .support__preview { transition: none; }
  .support__badge:not([hidden]) { animation: none; }
}

/* ---------- Try-on ---------- */
.collection__tools {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.btn--tryon {
  margin-top: 0;
  padding: 10px 22px;
  cursor: pointer;
  background: none;
  font-family: inherit;
}

.product-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-modal__actions .btn {
  margin-top: 0;
  cursor: pointer;
  font-family: inherit;
  background-color: transparent;
}

.product-modal__actions .btn--solid { background: var(--burgundy); }
.product-modal__actions .btn--solid:hover { background: #6f1d2c; }

.tryon[hidden] { display: none; }

.tryon {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  background: #2b2522;
}

.tryon__stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 0;
}

.tryon__canvas {
  max-width: 100%;
  max-height: 100%;
  touch-action: none;
  cursor: grab;
}

.tryon__canvas:active { cursor: grabbing; }

.tryon__start {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 24px;
  text-align: center;
  background: var(--bg-soft);
}

.tryon__start[hidden],
.tryon__status[hidden],
.tryon__hint[hidden] { display: none; }

.tryon__start-title {
  margin: 0;
  max-width: 520px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.15;
}

.tryon__start-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.tryon__start-actions .btn {
  margin-top: 0;
  cursor: pointer;
  font-family: inherit;
}

.tryon__privacy {
  margin: 0;
  font-size: .95rem;
  color: var(--text-muted);
}

.tryon__status,
.tryon__hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 16px;
  border-radius: 18px;
  background: rgba(30, 26, 24, .72);
  color: #fff;
  font-size: .95rem;
  text-align: center;
  max-width: calc(100% - 32px);
  pointer-events: none;
}

.tryon__status { top: 16px; }
.tryon__hint { bottom: 16px; opacity: .85; }

.tryon__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 20px 20px;
  background: var(--bg);
  overflow-y: auto;
}

.tryon__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
}

.tryon__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
}

.tryon__sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.tryon__sources button {
  padding: 10px;
  border: 1px solid rgba(var(--ink-rgb), .25);
  background: var(--surface);
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
}

.tryon__sources button:hover { border-color: var(--burgundy); }

.tryon__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.tryon__item {
  padding: 0 0 6px;
  border: 2px solid transparent;
  background: var(--bg-soft);
  font: inherit;
  font-size: .8rem;
  line-height: 1.2;
  cursor: pointer;
}

.tryon__item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin-bottom: 4px;
}

.tryon__item[aria-selected="true"] { border-color: var(--burgundy); }

.tryon__controls label {
  display: block;
  margin-bottom: 8px;
  font-size: .95rem;
  color: var(--text-muted);
}

.tryon__controls input[type="range"] {
  display: block;
  width: 100%;
  accent-color: var(--burgundy);
}

.tryon__controls .link-btn { margin: 4px 0 0; }

.tryon__product {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--ink-rgb), .12);
}

.tryon__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.1;
}

.tryon__price {
  margin: 2px 0 0;
  color: var(--burgundy);
}

.tryon__product .btn {
  margin-top: 0;
  padding: 10px 18px;
  cursor: pointer;
  font-family: inherit;
}

.tryon .btn--block { margin-top: 0; cursor: pointer; background: none; }
.tryon .btn--block:disabled { cursor: default; }

@media (max-width: 860px) {
  .tryon {
    grid-template-columns: 1fr;
    grid-template-rows: 58dvh 1fr;
  }

  .tryon__panel { padding: 0 16px 16px; }

  .tryon__items {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    scrollbar-width: thin;
  }

  .tryon__item { flex: 0 0 84px; }

  .collection__tools { align-items: flex-start; }
}

/* Режим «Манекен» */
.tryon__sources { grid-template-columns: repeat(3, 1fr); }
.tryon__sources button[aria-pressed="true"] {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: #fff;
}
.tryon.is-mannequin { background: #e9e4dc; }
.tryon.is-mannequin .tryon__canvas { cursor: default; }
.tryon.is-mannequin .tryon__controls { display: none; }

/* Примірочна тимчасово вимкнена (клас на <body>) */
.no-tryon [data-tryon],
.no-tryon .tryon { display: none !important; }

/* Кнопка «Зареєструватися» для гостей — мʼяко блимає, щоб привернути увагу */
.header__register[hidden] { display: none; }

.header__register {
  padding: 11px 22px;
  margin-right: 6px;
  font-weight: 500;
  border: 1px solid var(--burgundy);
  border-radius: 20px;
  background: var(--burgundy);
  color: #fff;
  font: inherit;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  animation: register-pulse 1.6s ease-in-out infinite;
}

.header__register:hover { animation-play-state: paused; background: #6f1d2c; }

/* У нічному режимі кнопка лишається насичено-червоною, а не світлою */
:root[data-theme="dark"] .header__register { background: #a3283f; border-color: #a3283f; }

@keyframes register-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(138, 38, 56, .55); opacity: 1; }
  50%      { box-shadow: 0 0 0 8px rgba(138, 38, 56, 0); opacity: .75; }
}

@media (max-width: 760px) {
  .header__register { padding: 8px 12px; margin-right: 0; font-size: .74rem; letter-spacing: .03em; }
}

@media (prefers-reduced-motion: reduce) {
  .header__register { animation: none; }
}

/* Нічний режим: темно-сірий логотип стає світлим */
:root[data-theme="dark"] .hero__logo { filter: brightness(0) invert(.88); }

/* Анімація зміни теми (theme-fx.js).
   View Transitions: вимикаємо стандартне перехресне згасання — нова тема відкривається колом */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* Запасний варіант для браузерів без View Transitions — шар кольору фону, кліки не перехоплює */
.theme-fade {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .24s ease;
}

.theme-fade.is-on { opacity: 1; }