/* ==========================================================================
   Violetta Shoes · головна сторінка
   ========================================================================== */

/* ---------- лінія, що промальовується ---------- */
.draw .stroke { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.js .draw .stroke { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.3s cubic-bezier(.55, .1, .3, 1) var(--d, .15s); }
.draw.is-in .stroke { stroke-dashoffset: 0; }
.draw .fill-in { opacity: 0; transition: opacity .9s ease 1.7s; }
.draw.is-in .fill-in,
html:not(.js) .draw .fill-in { opacity: 1; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
  padding: 12px var(--pad) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  isolation: isolate;
}
.hero__panel {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-block: clamp(34px, 5vh, 56px);
  border-radius: 40px;
  background:
    radial-gradient(90% 80% at 0% 0%, rgba(255, 250, 253, .7), transparent 60%),
    radial-gradient(60% 60% at 100% 100%, rgba(184, 199, 177, .28), transparent 70%),
    linear-gradient(155deg, #F9DAE9 0%, var(--powder) 48%, var(--rose) 100%);
}
.hero__copy {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 3;
  align-self: center;
  padding: 80px clamp(28px, 4vw, 64px) 80px clamp(30px, 5.4vw, 92px);
}
.hero__title {
  margin: 20px 0 24px;
  font-size: clamp(3.3rem, 1.1rem + 6.2vw, 7.9rem);
  line-height: .88;
}
.hero__title em { display: block; }
.hero .lead { max-width: 25ch; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: 36px;
}
.hero__media {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 2;
  height: min(calc(100vh - 136px), 820px);
  min-height: 560px;
  aspect-ratio: 9 / 16;
  margin-right: clamp(26px, 5.4vw, 96px);
}
.hero__media::before {
  content: "";
  position: absolute;
  inset: -13px;
  border: 1px solid var(--line-strong);
  border-radius: 50% 50% 36px 36px / 27.5% 27.5% 36px 36px;
  pointer-events: none;
}
.hero__arch {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50% 50% 28px 28px / 28.1% 28.1% 28px 28px;
  background: var(--rose);
  box-shadow: 0 40px 80px -40px rgba(107, 46, 70, .55);
}
.hero__arch video,
.hero__arch img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__caption {
  position: absolute;
  z-index: 3;
  left: 18px;
  bottom: 20px;
  padding: .42rem .85rem;
  border-radius: 999px;
  background: rgba(255, 250, 253, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--wine);
}
.media-toggle {
  position: absolute;
  z-index: 3;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 250, 253, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--wine);
  transition: transform .3s var(--ease), background-color .3s;
}
.media-toggle:hover { transform: scale(1.06); background: var(--bg); }
.media-toggle svg { width: 16px; height: 16px; }
.media-toggle .i-play { display: none; }
.media-toggle.is-paused .i-play { display: block; }
.media-toggle.is-paused .i-pause { display: none; }

/* кругла кнопка-сюрприз */
.surprise {
  position: absolute;
  z-index: 4;
  left: -64px;
  top: 10%;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg);
  box-shadow: 0 22px 44px -22px rgba(107, 46, 70, .6);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.surprise:hover { transform: scale(1.05) rotate(-2deg); box-shadow: 0 26px 50px -22px rgba(107, 46, 70, .7); }
.surprise__ring {
  position: absolute;
  inset: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  animation: spin-slow 28s linear infinite;
  overflow: visible;
}
.surprise__ring text {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 10.6px;
  letter-spacing: .26em;
  fill: var(--wine);
}
.surprise__flower { position: relative; width: 46px; height: 46px; color: var(--berry); }
.surprise.is-paused .surprise__ring { animation-play-state: paused; }

/* ==========================================================================
   ВІТРИНА
   ========================================================================== */
.shop { padding-top: clamp(64px, 8vw, 120px); }
.shop__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 48px;
  margin-bottom: 30px;
}
.shop__head .h2 { max-width: 15ch; margin-top: 14px; }
.shop__intro { max-width: 36ch; color: var(--ink-2); }
.shop__intro b { font-weight: 500; color: var(--wine); }

.shop__tools {
  display: grid;
  gap: 14px;
  padding: 18px 0 0;
  margin-bottom: clamp(30px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.cats,
.filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cats::-webkit-scrollbar,
.filters::-webkit-scrollbar { display: none; }
.cat {
  flex: none;
  padding: .55rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--milk);
  color: var(--ink-2);
  font-size: .9rem;
  line-height: 1.3;
  white-space: nowrap;
  cursor: default;
}
.cat.is-active { background: var(--wine); border-color: var(--wine); color: var(--bg); }
.filters { align-items: center; }
.fpill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .95rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-size: .86rem;
  line-height: 1.3;
  white-space: nowrap;
  cursor: default;
}
.fpill svg { width: 14px; height: 14px; color: var(--wine); opacity: .8; }
.fpill b { font-weight: 500; color: var(--wine); }
.fpill--sort { margin-left: auto; }
.shop__note { display: flex; align-items: center; gap: .45rem; }
.shop__note svg { width: 15px; height: 15px; color: var(--berry); flex: none; }

.grid {
  display: grid;
  gap: clamp(16px, 2.4vw, 34px);
  align-items: start;
}
.grid--a { grid-template-columns: 1.32fr 1fr 1fr; }
.grid--a > .card:nth-child(2) { margin-top: clamp(44px, 6.5vw, 104px); }
.grid--a > .card:nth-child(3) { margin-top: clamp(14px, 2vw, 30px); }
.grid--b { grid-template-columns: repeat(4, 1fr); padding-bottom: clamp(20px, 4vw, 60px); }
.grid--b > .card:nth-child(even) { margin-top: clamp(30px, 4.4vw, 70px); }

/* картка товару */
.card { position: relative; }
.card__link { display: block; border-radius: var(--radius); }
.card__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--rose);
  isolation: isolate;
}
.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: transform 1.3s var(--ease), opacity .7s ease;
}
.card__img--alt { opacity: 0; object-position: var(--pos2, 50% 50%); }
@media (hover: hover) {
  .card:hover .card__img { transform: scale(1.045); }
  .card:hover .card__img--alt { opacity: 1; }
}
.card__dots {
  position: absolute;
  z-index: 2;
  right: 12px;
  top: 12px;
  display: flex;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(255, 250, 253, .8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.card__dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(65, 45, 55, .22);
}
.card__info { padding: 14px 4px 0; }
.card__meta {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.card__name {
  margin-top: 5px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem);
  line-height: 1.08;
}
.card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 8px;
  font-weight: 500;
  font-size: .98rem;
}
.card__price small { font-weight: 400; font-size: .72rem; color: var(--ink-2); }

/* єдина картка, що відкривається */
.card--featured .card__media {
  aspect-ratio: 3 / 4;
  border-radius: 50% 50% var(--radius) var(--radius) / 37.5% 37.5% var(--radius) var(--radius);
}
.card--featured .card__name { font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.2rem); }
.card__demo {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem .6rem .8rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--wine);
  font-weight: 500;
  font-size: .82rem;
  box-shadow: 0 10px 24px -14px rgba(65, 45, 55, .6);
  transition: background-color .3s, color .3s, transform .35s var(--ease);
}
.card__demo svg { width: 16px; height: 16px; }
.card__link:hover .card__demo,
.card__link:focus-visible .card__demo { background: var(--berry); color: var(--bg); transform: translateY(-2px); }
.card__more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 10px;
  font-size: .86rem;
  font-weight: 500;
  color: var(--berry);
}
.card__more svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.card__link:hover .card__more svg { transform: translateX(4px); }

/* ==========================================================================
   БАНЕР 1 · «Не чекай приводу»
   ========================================================================== */
.choose {
  position: relative;
  margin: clamp(56px, 7vw, 110px) 0;
  background: var(--rose);
  overflow: hidden;
  isolation: isolate;
}
.choose::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -10vw;
  top: -25%;
  width: min(70vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 206, 226, .95) 0%, rgba(246, 206, 226, 0) 68%);
}
.choose__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 40px;
  padding-block: clamp(64px, 8vw, 128px);
}
.choose__title {
  margin: 18px 0 26px;
  font-size: clamp(3.1rem, 1.3rem + 5.6vw, 7rem);
  line-height: .9;
}
.choose__title em { display: block; }
.choose .lead { max-width: 30ch; }
.choose__photo {
  position: relative;
  justify-self: center;
  width: min(430px, 100%);
  margin: 0;
  aspect-ratio: 3 / 4;
}
.choose__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  border-radius: 50% 50% var(--radius) var(--radius) / 37.5% 37.5% var(--radius) var(--radius);
}
.choose__photo::after {
  content: "";
  position: absolute;
  inset: -12px;
  border: 1px solid var(--line-strong);
  border-radius: 50% 50% 32px 32px / 36% 36% 32px 32px;
  pointer-events: none;
}
.choose__stem {
  position: absolute;
  left: 49%;
  bottom: 9%;
  width: clamp(120px, 14vw, 200px);
  color: var(--wine);
  pointer-events: none;
}
.choose__stem .leaf-f { fill: var(--sage); }
.choose__stem .bud-f { fill: var(--powder); stroke: var(--berry); stroke-width: 1; }

/* ==========================================================================
   НАСТРІЙ
   ========================================================================== */
.mood {
  --mood-bg: var(--powder);
  position: relative;
  padding: clamp(72px, 9vw, 136px) 0;
  background-color: var(--mood-bg);
  transition: background-color 1s var(--ease), color .6s ease;
  overflow: hidden;
}
.mood[data-mood="city"] { --mood-bg: var(--milk); }
.mood[data-mood="confident"] { --mood-bg: var(--wine); color: #FCEFF5; }
.mood[data-mood="dreamy"] { --mood-bg: #EFE1EC; }
.mood[data-mood="confident"] .eyebrow,
.mood[data-mood="confident"] .h2 em { color: var(--powder); }
.mood[data-mood="confident"] .note { color: rgba(252, 239, 245, .78); }

.mood__inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.mood__side { display: grid; gap: 30px; }
.mood__side .h2 { margin-top: 14px; }
.mood__side .note { max-width: 34ch; margin-top: 16px; }
.mood__play { display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); }

.mflower { flex: none; width: clamp(150px, 17vw, 236px); aspect-ratio: 1; overflow: visible; }
.mflower .mp { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mflower .mp path.shape {
  stroke: rgba(65, 45, 55, .35);
  stroke-width: 1;
  transform-box: view-box;
  transform-origin: 100px 100px;
  transform: scale(.9);
  opacity: .62;
  transition: transform .9s var(--ease), opacity .5s ease, stroke .5s;
}
.mflower .mp path.vein {
  fill: none;
  stroke: rgba(65, 45, 55, .45);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0;
  transform-box: view-box;
  transform-origin: 100px 100px;
  transform: scale(.9);
  transition: opacity .6s ease .15s, transform .9s var(--ease);
}
.mflower .mp.is-on path.shape { transform: scale(1.14); opacity: 1; stroke: rgba(65, 45, 55, .6); }
.mflower .mp.is-on path.vein { opacity: 1; transform: scale(1.14); }
.mflower .mp:hover path.shape { opacity: .9; }
.mflower .core { fill: var(--bg); stroke: var(--berry); stroke-width: 1.2; }
.mflower .core-dot { fill: var(--berry); }
.mood[data-mood="confident"] .mflower .mp path.shape { stroke: rgba(252, 239, 245, .45); }

.mood__opts { display: grid; gap: 8px; flex: 1; max-width: 250px; }
.mood-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 18px 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 250, 253, .5);
  color: var(--ink);
  font-weight: 500;
  font-size: .95rem;
  text-align: left;
  transition: background-color .35s, color .35s, border-color .35s, transform .3s var(--ease);
}
.mood-opt:hover { transform: translateX(3px); }
.mood-opt .sw {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50% 50% 50% 2px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(65, 45, 55, .25);
  transform: rotate(-45deg);
}
.mood-opt[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.mood[data-mood="confident"] .mood-opt { color: #FCEFF5; border-color: rgba(252, 239, 245, .35); background: rgba(252, 239, 245, .06); }
.mood[data-mood="confident"] .mood-opt[aria-checked="true"] { background: var(--powder); border-color: var(--powder); color: var(--wine); }

.mood__stage { position: relative; width: 100%; aspect-ratio: 6 / 5; }
.mood__pic {
  position: absolute;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  background: var(--rose);
  box-shadow: 0 26px 50px -30px rgba(65, 45, 55, .6);
  transition: left 1.1s var(--ease), top 1.1s var(--ease), width 1.1s var(--ease), height 1.1s var(--ease), border-radius 1.1s var(--ease), transform 1.1s var(--ease);
}
.mood__pic img { width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease; }
.mood__pic.is-swap img { opacity: 0; }
.mood__pic--2 { z-index: 2; }

.mood[data-mood="romantic"] .mood__pic--1 { left: 6%;  top: 0;   width: 50%; height: 90%; border-radius: 50% 50% 22px 22px / 30% 30% 22px 22px; transform: none; }
.mood[data-mood="romantic"] .mood__pic--2 { left: 55%; top: 30%; width: 40%; height: 60%; border-radius: 50%; transform: none; }
.mood[data-mood="city"] .mood__pic--1      { left: 42%; top: 2%;  width: 52%; height: 88%; border-radius: 26px; transform: rotate(2deg); }
.mood[data-mood="city"] .mood__pic--2      { left: 4%;  top: 16%; width: 42%; height: 60%; border-radius: 26px; transform: rotate(-3deg); }
.mood[data-mood="confident"] .mood__pic--1 { left: 6%;  top: 5%;  width: 56%; height: 90%; border-radius: 6px; transform: rotate(-2.5deg); }
.mood[data-mood="confident"] .mood__pic--2 { left: 61%; top: 0;   width: 34%; height: 50%; border-radius: 50% 50% 8px 8px / 32% 32% 8px 8px; transform: rotate(3deg); }
.mood[data-mood="dreamy"] .mood__pic--1    { left: 20%; top: 0;   width: 52%; height: 94%; border-radius: 50%; transform: none; }
.mood[data-mood="dreamy"] .mood__pic--2    { left: 66%; top: 48%; width: 31%; height: 42%; border-radius: 50%; transform: none; }

.mood__note {
  position: absolute;
  z-index: 3;
  max-width: 64%;
  margin: 0;
  padding: 18px 22px 20px;
  border-radius: 18px;
  background: var(--milk);
  color: var(--ink);
  box-shadow: 0 22px 44px -26px rgba(65, 45, 55, .55);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 1rem + 1.2vw, 2.05rem);
  line-height: 1.12;
  transition: left 1.1s var(--ease), right 1.1s var(--ease), bottom 1.1s var(--ease), transform 1.1s var(--ease);
}
.mood__note span { display: block; transition: opacity .4s ease, transform .5s var(--ease); }
.mood__note.is-swap span { opacity: 0; transform: translateY(8px); }
.mood[data-mood="romantic"] .mood__note  { left: 0;   bottom: -4%; transform: rotate(-1.5deg); }
.mood[data-mood="city"] .mood__note      { left: 30%; bottom: -6%; transform: rotate(1deg); }
.mood[data-mood="confident"] .mood__note { left: 34%; bottom: -3%; transform: rotate(-1deg); }
.mood[data-mood="dreamy"] .mood__note    { left: 2%;  bottom: 2%;  transform: rotate(1.5deg); }

.decor {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .7s ease, transform 1s var(--ease);
}
.mood[data-mood="romantic"] .decor--romantic,
.mood[data-mood="city"] .decor--city,
.mood[data-mood="confident"] .decor--confident,
.mood[data-mood="dreamy"] .decor--dreamy { opacity: 1; transform: none; }
.decor--romantic { left: 44%; top: -4%; width: 130px; color: var(--berry); }
.decor--city { right: -2%; top: -6%; width: 110px; }
.decor--confident { left: 0; top: -2%; width: 120px; color: var(--powder); }
.decor--dreamy { left: -4%; top: -8%; width: 190px; }
.decor .stroke { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.decor--confident .spark { fill: currentColor; animation: twinkle 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.decor--confident .spark:nth-child(2) { animation-delay: .8s; }
.decor--confident .spark:nth-child(3) { animation-delay: 1.6s; }
@keyframes twinkle { 50% { transform: scale(.55); opacity: .5; } }

/* ==========================================================================
   БАНЕР 2 · «Можливо, це любов»
   ========================================================================== */
.love {
  position: relative;
  padding: clamp(80px, 10vw, 150px) 0;
  background: radial-gradient(95% 75% at 50% 45%, var(--milk) 0%, #FBEEF4 50%, #F8DDEA 100%);
  overflow: hidden;
  text-align: center;
}
.love__stage {
  position: relative;
  width: min(1060px, 100%);
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.love__photo {
  position: relative;
  z-index: 1;
  width: min(390px, 64vw);
  aspect-ratio: 3 / 4;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(107, 46, 70, .55);
}
.love__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  transform: scale(var(--s, 1.1));
  transition: transform .2s linear;
  will-change: transform;
}
.love__word {
  position: absolute;
  z-index: 2;
  margin: 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(3.2rem, 1.4rem + 6vw, 7.6rem);
  line-height: .9;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.love__word--1 { left: 2%; top: 10%; }
.love__word--2 { right: 0; bottom: 12%; font-style: italic; color: var(--wine); display: inline-flex; align-items: center; gap: .12em; }
.heart { width: .5em; height: .5em; color: var(--berry); transform-origin: center; }
.heart.is-in { animation: beat 1.3s var(--ease) .5s 1 both; }
@keyframes beat {
  0% { transform: scale(1); }
  18% { transform: scale(1.32); }
  32% { transform: scale(.94); }
  48% { transform: scale(1.16); }
  100% { transform: scale(1); }
}
.love__caption {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 34px;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--wine);
}
.love__caption svg { width: 18px; height: 18px; color: var(--sage-deep); }
.love__flower {
  position: absolute;
  z-index: 0;
  color: var(--wine);
  pointer-events: none;
}
.love__flower--l { left: 7%; bottom: -2%; width: clamp(90px, 11vw, 150px); }
.love__flower--r { right: 9%; top: -4%; width: clamp(70px, 8vw, 110px); --d: .6s; }
.love__flower .leaf-f { fill: var(--sage); }
.love__flower .bud-f { fill: var(--powder); stroke: var(--berry); stroke-width: 1; }

/* ==========================================================================
   ФІНАЛ · бренд та Instagram
   ========================================================================== */
.brand-end { padding: clamp(76px, 9vw, 136px) 0 clamp(64px, 8vw, 110px); }
.brand-end__inner {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.brand-end__logo { width: auto; height: 58px; }
.brand-end__lead {
  margin: 26px 0 32px;
  max-width: 24ch;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.6rem);
  line-height: 1.12;
}
.brand-end__lead em { font-style: italic; color: var(--wine); }
.brand-end__demo { margin-top: 18px; max-width: 40ch; }

.tuck { margin-top: 30px; max-width: 420px; }
.tuck__btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .3rem 0;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--wine);
}
.tuck__btn svg { width: 26px; height: 26px; color: var(--berry); transition: transform .5s var(--ease); }
.tuck__btn[aria-expanded="true"] svg { transform: rotate(-12deg) scale(1.08); }
.tuck__card {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .8s var(--ease);
}
.tuck__card.is-open { grid-template-rows: 1fr; }
.tuck__fold { overflow: hidden; }
.tuck__paper {
  position: relative;
  margin-top: 12px;
  padding: 26px 24px 22px;
  border-radius: 6px 18px 6px 18px;
  background:
    repeating-linear-gradient(180deg, transparent 0 29px, rgba(107, 46, 70, .08) 29px 30px),
    var(--milk);
  border: 1px solid var(--line);
  box-shadow: 0 20px 40px -28px rgba(65, 45, 55, .55);
  transform: rotate(-1.2deg) translateY(-14px);
  transform-origin: top left;
  opacity: 0;
  transition: transform .9s var(--ease), opacity .6s ease;
}
.tuck__card.is-open .tuck__paper { transform: rotate(-1.2deg); opacity: 1; }
.tuck__paper::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 70px;
  height: 18px;
  margin-left: -35px;
  background: rgba(246, 206, 226, .85);
  transform: rotate(-3deg);
}
.tuck__text {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 30px;
  color: var(--ink);
}
.tuck__sign { margin-top: 10px; text-align: right; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wine); }

.lookbook { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.6vw, 18px); align-items: end; }
.lookbook figure { margin: 0; overflow: hidden; background: var(--rose); box-shadow: 0 24px 50px -32px rgba(65, 45, 55, .6); }
.lookbook img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.lookbook figure:hover img { transform: scale(1.05); }
.lookbook figure:nth-child(1) { aspect-ratio: 3 / 4; border-radius: var(--radius); margin-bottom: 16%; }
.lookbook figure:nth-child(2) { aspect-ratio: 3 / 5; border-radius: 50% 50% var(--radius) var(--radius) / 30% 30% var(--radius) var(--radius); }
.lookbook figure:nth-child(3) { aspect-ratio: 4 / 5; border-radius: var(--radius); margin-bottom: 30%; }
.lookbook figcaption { position: absolute; }

/* ==========================================================================
   АДАПТИВ
   ========================================================================== */
@media (max-width: 1100px) {
  .grid--b { grid-template-columns: repeat(2, 1fr); }
  .grid--b > .card:nth-child(even) { margin-top: clamp(30px, 6vw, 60px); }
}

@media (max-width: 899px) {
  .hero { display: flex; flex-direction: column; padding: 0; }
  .hero__panel { display: none; }
  .hero__media { order: 1; }
  .hero__copy { order: 2; }
  .hero__media {
    height: auto;
    min-height: 0;
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 72vh;
    max-height: 72svh;
    margin: 0;
  }
  .hero__media::before { display: none; }
  .hero__arch { border-radius: 0 0 36px 36px; box-shadow: none; }
  .hero__arch video, .hero__arch img { object-position: 50% 42%; }
  .hero__caption { left: 14px; bottom: 102px; }
  .media-toggle { right: 14px; bottom: 96px; }
  .surprise { left: auto; right: 14px; top: 14px; width: 100px; height: 100px; }
  .surprise__flower { width: 36px; height: 36px; }
  .hero__copy {
    align-self: center;
    width: calc(100% - 24px);
    max-width: 620px;
    margin: -82px auto 0;
    padding: 58px 22px 34px;
    text-align: center;
    border-radius: 50% 50% 30px 30px / 76px 76px 30px 30px;
    background:
      radial-gradient(90% 80% at 50% 0%, rgba(255, 250, 253, .75), transparent 60%),
      linear-gradient(170deg, #F9DAE9 0%, var(--powder) 55%, var(--rose) 100%);
    box-shadow: 0 -18px 40px -30px rgba(107, 46, 70, .5);
  }
  .hero__copy .eyebrow::before { display: none; }
  .hero__title { margin: 14px 0 18px; }
  .hero .lead { margin-inline: auto; }
  .hero__actions { flex-direction: column; gap: 16px; margin-top: 28px; }
  .hero__actions .btn { width: 100%; max-width: 340px; }

  .choose__inner { grid-template-columns: 1fr; gap: 34px; }
  .choose__photo { width: min(440px, 100%); }
  .choose__stem { left: auto; right: 0; bottom: auto; top: 26%; width: 96px; }

  .mood__inner { grid-template-columns: 1fr; }
  .mood__stage { aspect-ratio: 1 / 1.08; margin-top: 8px; }
  .mood__note { max-width: 82%; }
  .mood[data-mood="city"] .mood__note { left: 14%; }
  .mood[data-mood="confident"] .mood__note { left: 14%; }

  .brand-end__inner { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .grid--a,
  .grid--b { grid-template-columns: 1fr 1fr; gap: 26px 12px; }
  .grid--a > .card--featured { grid-column: 1 / -1; }
  .grid--a > .card:nth-child(2),
  .grid--a > .card:nth-child(3) { margin-top: 0; }
  .grid--b > .card:nth-child(even) { margin-top: 30px; }
  .card--featured .card__media { aspect-ratio: 4 / 5; border-radius: 50% 50% var(--radius) var(--radius) / 40% 40% var(--radius) var(--radius); }
  .card__info { padding-top: 10px; }
  .card__meta { font-size: .62rem; letter-spacing: .12em; }
  .card__price { font-size: .92rem; }
  .card__dots { right: 8px; top: 8px; }
  .fpill--sort { margin-left: 0; }
  .shop__head .h2 { max-width: none; }

  .mood__play { flex-direction: column; align-items: stretch; }
  .mflower { align-self: center; width: 170px; }
  .mood__opts { grid-template-columns: 1fr 1fr; max-width: none; }
  .mood-opt { font-size: .9rem; padding-right: 12px; }

  .love__photo { width: 68vw; }
  .love__word { font-size: clamp(2.6rem, 1.6rem + 5vw, 3.6rem); }
  .love__word--1 { left: 0; top: -6%; }
  .love__word--2 { right: 0; bottom: -5%; }
  .love__flower--l { left: -4%; bottom: 4%; }
  .love__flower--r { right: -2%; top: 0; }

  .lookbook figure:nth-child(1) { margin-bottom: 22%; }
}

.shop__note--prices { margin-top: 28px; }

@media (max-width: 899px) {
  .hero .petal:nth-of-type(n+3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .surprise__ring { animation: none; }
  .love__photo img { transform: none; }
}