:root {
  --bg: #f5f1ea;
  --bg-tile: #ebe3d8;
  --line: #d6c9b9;
  --bottle: #c9b8a5;
  --brown: #483634;
  --graphite: #2b2b2d;
  --graphite-soft: #55545a;
  --text: #232325;
  --on-dark: #ffffff;
  --gold: #e0c79a;
  --label: #efe7dc;
  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28L0 12Q21 15 43 12Q60 13 78 8Q92 10 107 7Q130 4 154 11Q181 11 209 12Q224 9 239 4Q267 5 296 11Q313 11 331 3Q366 2 401 6Q425 3 450 12Q466 15 483 13Q499 12 516 13Q546 16 577 16Q611 19 645 20Q658 18 671 21Q702 23 733 21Q753 20 773 21Q787 19 801 19Q831 16 861 14Q876 17 892 7Q917 9 943 5Q962 3 981 4Q1006 7 1032 3Q1054 3 1076 3Q1105 5 1135 3Q1156 3 1178 6Q1205 4 1232 3Q1266 3 1300 9Q1320 6 1341 11Q1373 12 1406 16Q1422 19 1438 21Q1439 20 1440 12L1440 28Z'/%3E%3C/svg%3E");
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Manrope', Arial, sans-serif;
  --page: min(1360px, 100% - 2 * var(--gutter));
  --gutter: clamp(16px, 4vw, 56px);
  --space: clamp(56px, 8vw, 112px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: .35s;
  --slow: .8s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.65 var(--font-body); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.1; margin: 0; letter-spacing: -0.005em; }
h1 { font-size: clamp(38px, 5.2vw, 72px); }
h2 { font-size: clamp(30px, 3.4vw, 46px); }
h3 { font-size: 24px; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -48px; background: var(--graphite); color: var(--on-dark); padding: 8px 14px; z-index: 30; }
.skip-link:focus { top: 8px; }

.eyebrow { font: italic 500 21px/1.2 var(--font-display); color: var(--brown); margin-bottom: 10px; }
.topbar { background: var(--graphite); color: var(--on-dark); text-align: center; font-size: 13px; padding: 8px 16px; }
.preview-note { background: var(--brown); color: var(--on-dark); text-align: center; font-size: 14px; padding: 8px 16px; }

.button { display: inline-block; background: var(--graphite); color: var(--on-dark); border: 1px solid var(--graphite); padding: 16px 32px; font: 600 15px/1.2 var(--font-body); text-decoration: none; cursor: pointer; transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform .15s var(--ease); }
.button:hover:not(:disabled) { background: var(--brown); border-color: var(--brown); }
.button:active:not(:disabled) { transform: translateY(1px); }
.button:disabled { background: transparent; color: var(--graphite-soft); border-color: var(--bottle); cursor: default; }
.button--light { background: var(--on-dark); color: var(--graphite); border-color: var(--on-dark); }
.button--light:hover:not(:disabled) { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.button--wide { width: 100%; text-align: center; }
.link { font-size: 14px; font-weight: 500; text-decoration: none; padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 100% 100% / 100% 1px no-repeat; transition: background-size var(--fast) var(--ease), color var(--fast) var(--ease); }
.link:hover { background-size: 0 1px; color: var(--brown); }

.header { position: sticky; top: -89px; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
/* Логотип ліворуч, пошук і кошик праворуч; меню нижче вирівняне з логотипом. */
.header__top { width: var(--page); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 88px; }
.header__side { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* Логотип: листок із бренду, тонка лінія, назва шрифтом сайту. По листку час від часу проходить золотистий відблиск. */
.logo { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: var(--graphite); min-width: 0; }
.logo__leaf { position: relative; display: block; flex: none; width: 92px; height: 33px; background: url("../img/logo-leaf.41a9fbf2a69b.png") center / contain no-repeat; }
.logo__leaf::after { content: ''; position: absolute; inset: 0; -webkit-mask: url("../img/logo-leaf.41a9fbf2a69b.png") center / contain no-repeat; mask: url("../img/logo-leaf.41a9fbf2a69b.png") center / contain no-repeat;
  background: linear-gradient(100deg, transparent 35%, rgba(224, 199, 154, .85) 50%, transparent 65%); background-size: 300% 100%; background-position: 100% 0; animation: leaf-sheen 4.5s ease-in-out infinite; }
@keyframes leaf-sheen { 0%, 35% { background-position: 100% 0; } 80%, 100% { background-position: 0 0; } }
.logo__rule { flex: none; width: 1px; height: 38px; background: var(--line); }
.logo__word { display: grid; gap: 6px; }
.logo__name { font: 500 23px/1 var(--font-display); letter-spacing: .2em; white-space: nowrap; }
.logo__name i { font-style: italic; color: var(--brown); letter-spacing: .2em; padding: 0 .05em 0 .1em; }
.logo__sub { font: 600 9.5px/1 var(--font-body); letter-spacing: .42em; color: var(--graphite-soft); white-space: nowrap; }
.logo--light { color: var(--on-dark); }
.logo--light .logo__leaf { background-image: url("../img/logo-leaf-light.49003418fad7.png"); }  /* відблиск і далі за формою з logo-leaf.png */
.logo--light .logo__name i { color: var(--gold); }
.logo--light .logo__sub { color: var(--on-dark); opacity: .7; }
.logo--light .logo__rule { background: rgba(255, 255, 255, .25); }
/* Коли верхній рядок шапки сховався при прокручуванні, біля меню лишається маленький листок. */
.nav > .nav__home { display: none; padding-block: 10px; }
.nav__home .logo__leaf { width: 58px; height: 21px; }
.header.is-stuck .nav > .nav__home { display: block; }
.nav { display: flex; align-items: center; justify-content: flex-start; gap: clamp(20px, 2.6vw, 40px); border-top: 1px solid var(--line); font-size: 14px; padding-inline: calc((100% - var(--page)) / 2); }
.nav a { text-decoration: none; }
.nav > a, .nav__item > a { padding-block: 14px; display: block; white-space: nowrap; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-block: 1px solid var(--line); padding: 36px var(--gutter) 44px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease), visibility var(--fast); }
.nav__item--mega:hover .mega, .nav__item--mega:focus-within .mega { visibility: visible; opacity: 1; transform: none; }
.mega__col { display: grid; gap: 10px; align-content: start; justify-items: start; font-size: 14px; }
.mega__title { font: 500 21px/1.15 var(--font-display); margin-bottom: 6px; }
.nav__search { display: none; gap: 8px; margin-top: 16px; }
.nav__search input { flex: 1; min-width: 0; font: inherit; padding: 10px 12px; background: none; border: 1px solid var(--bottle); color: inherit; }
.nav__search .button { padding-inline: 18px; }
.header__icons { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.icon-button { background: none; border: 0; padding: 8px; color: inherit; cursor: pointer; display: grid; transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.icon-button:hover { color: var(--brown); }
.icon-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform var(--fast) var(--ease), fill var(--fast) var(--ease); }
.icon-button:hover svg { transform: scale(1.1); }
.header__burger { display: none; }
.search { display: flex; align-items: center; border-bottom: 1px solid var(--bottle); }
.search input { background: none; border: 0; font: inherit; font-size: 14px; color: inherit; width: 96px; padding: 4px 0; transition: width .6s var(--ease); }
.search input:focus { outline: none; width: 150px; }
.search input::placeholder { color: var(--graphite-soft); }
.lang { font-size: 13px; font-weight: 600; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: var(--space) var(--gutter); }
.hero__lead { max-width: 30em; margin: 24px 0 36px; font-size: 18px; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }

.section { width: var(--page); margin-inline: auto; padding-block: var(--space); }
.section--tint { width: 100%; background: var(--bg-tile); padding-inline: max(var(--gutter), calc((100% - 1360px) / 2)); }
.section--flush { padding-top: 24px; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 40px; }

.series-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.series-tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; display: flex; align-items: flex-end; text-decoration: none; color: var(--on-dark); background: var(--brown); }
.series-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease); }
.series-tile:hover img { transform: scale(1.03); }
.series-tile--dark { background: var(--graphite); flex-direction: column; align-items: stretch; justify-content: space-between; }
.series-tile__accent { padding: 24px 20px 0; font: 500 clamp(21px, 2vw, 27px)/1.3 var(--font-display); }
.series-tile:nth-child(4).series-tile--dark { background: var(--brown); }
.series-tile__text { position: relative; width: 100%; background: var(--graphite); padding: 16px 20px; display: grid; gap: 2px; transition: background-color var(--fast) var(--ease); }
.series-tile:hover .series-tile__text { background: var(--brown); }
.series-tile--dark .series-tile__text { background: none; padding-bottom: 24px; }
.series-tile__en { font: italic 500 18px/1.2 var(--font-display); color: var(--gold); }
.series-tile__name { font: 500 23px/1.15 var(--font-display); }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 20px; }
.card__link { display: block; text-decoration: none; }
.card__media { position: relative; aspect-ratio: 1 / 1; background: var(--bg-tile); overflow: hidden; }
.section--tint .card__media { background: var(--bg); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease), opacity var(--slow) var(--ease); }
.card__media .card__img2 { position: absolute; inset: 0; opacity: 0; }
.card__link:hover .card__img2 { opacity: 1; }
.card__link:hover img { transform: scale(1.03); }
.pack-label { position: relative; height: 100%; background: var(--label); color: var(--brown); display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 18% 14%; overflow: hidden; }
.pack-label::before, .pack-label::after { content: ''; position: absolute; left: 0; right: 0; height: 13%; background: var(--bottle); -webkit-mask: var(--torn) center / 100% 100% no-repeat; mask: var(--torn) center / 100% 100% no-repeat; }
.pack-label::before { top: 0; transform: scaleY(-1); }
.pack-label::after { bottom: 0; }
.pack-label svg { width: 34%; max-width: 110px; aspect-ratio: 4 / 5; height: auto; }
.pack-label__name { font: 500 clamp(17px, 1.5vw, 22px)/1.2 var(--font-display); color: var(--text); }
.pack-label__size { font-size: 12px; color: var(--graphite-soft); }
.gallery__main .pack-label__name { font-size: clamp(24px, 3vw, 34px); }
.gallery__main .pack-label__size { font-size: 15px; }
.badge { position: absolute; left: 10px; top: 10px; background: var(--graphite); color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; padding: 5px 10px; }
.badge--static { position: static; display: inline-block; margin-bottom: 18px; }
.card__name { font: 500 23px/1.2 var(--font-display); margin-top: 14px; }
.card__tagline { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--graphite-soft); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.card__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 14px; color: var(--graphite-soft); }
.card__price { color: var(--text); font-weight: 600; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.split__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; padding: var(--space) clamp(24px, 7vw, 110px); }
.split__text .eyebrow { margin: 0; }
.split__text--brown { background: var(--brown); color: var(--on-dark); }
.split__text--brown .eyebrow { color: var(--gold); }
.split--reverse .split__media { order: 2; }

.proof { position: relative; z-index: 1; background: var(--graphite); color: var(--on-dark); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding: clamp(48px, 6vw, 80px) max(var(--gutter), calc((100% - 1360px) / 2)); }
.proof__item h3 { font-size: 32px; margin-bottom: 10px; }
.proof__item p { font-size: 15px; }

.page-head { width: var(--page); margin-inline: auto; padding-block: clamp(40px, 6vw, 80px) 24px; }
.page-head__lead { max-width: 42em; margin-top: 18px; font-size: 18px; }
.band { position: relative; z-index: 1; background: var(--graphite); color: var(--on-dark); }
.band::after, .proof::before, .footer::before { content: ''; position: absolute; left: 0; right: 0; height: clamp(14px, 2.2vw, 28px); background: inherit; -webkit-mask: var(--torn) center / 100% 100% no-repeat; mask: var(--torn) center / 100% 100% no-repeat; }
.band::after { top: calc(100% - 2px); transform: scaleY(-1); }
.proof::before, .footer::before { bottom: calc(100% - 2px); }
.band__inner { width: var(--page); margin-inline: auto; padding-block: clamp(40px, 5vw, 72px); }
.band .eyebrow { color: var(--gold); margin-bottom: 12px; }
.band__lead { max-width: 46em; margin-top: 16px; font-size: 17px; }
.filters { width: var(--page); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 8px; padding-top: clamp(36px, 4vw, 52px); font-size: 14px; }
.filters a { text-decoration: none; border: 1px solid var(--bottle); padding: 7px 14px; transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.filters a:hover { background: var(--bg-tile); }
.filters a[aria-current] { background: var(--graphite); border-color: var(--graphite); color: var(--on-dark); }
.filters--sub { padding-top: 8px; font-size: 13px; }
.filters--sub a { border-color: var(--line); color: var(--brown); padding: 5px 12px; }
.toolbar { width: var(--page); margin: 20px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; border-block: 1px solid var(--line); font-size: 14px; }
.toolbar__count { color: var(--graphite-soft); }
.toolbar__sort { display: flex; align-items: center; gap: 10px; }
.toolbar__sort select { font: inherit; font-weight: 500; color: inherit; background: none; border: 0; padding: 4px 2px; cursor: pointer; }
.empty { color: var(--graphite-soft); padding-block: 32px; }
.empty-state { display: grid; justify-items: center; gap: 12px; text-align: center; padding-block: 24px 64px; }
.empty-state svg { width: 92px; height: 115px; color: var(--brown); }
.empty-state p { color: var(--graphite-soft); max-width: 30em; margin-bottom: 8px; }
.order-steps { list-style: none; counter-reset: order; display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0 0 20px; padding: 0; font-size: 14px; color: var(--graphite-soft); }
.order-steps li { counter-increment: order; }
.order-steps li::before { content: counter(order) '. '; }
.order-steps li[aria-current] { color: var(--text); font-weight: 600; }

.breadcrumbs { width: var(--page); margin-inline: auto; padding-top: 20px; font-size: 13px; color: var(--graphite-soft); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a + a::before { content: '/'; margin-right: 10px; color: var(--bottle); }
.product { width: var(--page); margin-inline: auto; padding-block: 24px var(--space); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.gallery { position: sticky; top: 100px; }
@media (min-width: 901px) { .gallery { max-width: calc(100vh - 220px); min-width: min(100%, 420px); } }  /* фото й мініатюри — в межах вікна */
.gallery__main { position: relative; background: var(--bg-tile); aspect-ratio: 1 / 1; overflow: hidden; }
.gallery__arrow { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(245, 241, 234, .88); color: var(--graphite); cursor: pointer; opacity: 0; transform: translateY(-50%) scale(.92);
  transition: opacity .45s var(--ease), transform .45s var(--ease), background-color var(--fast) var(--ease); }
.gallery__arrow--prev { left: 14px; }
.gallery__arrow--next { right: 14px; }
.gallery__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.gallery__main:hover .gallery__arrow, .gallery__arrow:focus-visible { opacity: 1; transform: translateY(-50%) scale(1); }
.gallery__arrow:hover { background: var(--bg); }
@media (hover: none) { .gallery__arrow { opacity: .85; transform: translateY(-50%) scale(1); } }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--fast) var(--ease); }
.gallery__main img.is-changing { opacity: 0; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.gallery__thumbs button { padding: 0; border: 1px solid transparent; background: none; cursor: pointer; opacity: .8; transition: opacity var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.gallery__thumbs button:hover, .gallery__thumbs button[aria-current] { opacity: 1; }
.gallery__thumbs button[aria-current] { border-color: var(--graphite); }
.product__info h1 { font-size: clamp(32px, 3.6vw, 48px); }
.product__tagline { margin-top: 16px; font-size: 17px; }
.product__buy { display: flex; align-items: baseline; gap: 16px; margin-block: 26px 18px; color: var(--graphite-soft); }
.product__price { font: 500 34px/1 var(--font-display); color: var(--text); }
/* Наявність: зелена крапка — є, бурштинова — мало, червона — немає. */
.stock { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-size: 14px; color: var(--text); }
.stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #6b8f62; box-shadow: 0 0 0 3px rgba(107, 143, 98, .18); }
.stock--low::before { background: #b9852f; box-shadow: 0 0 0 3px rgba(185, 133, 47, .18); }
.stock--no { color: var(--graphite-soft); }
.stock--no::before { background: #a4332b; box-shadow: 0 0 0 3px rgba(164, 51, 43, .15); }
.product__delivery { margin-top: 14px; font-size: 14px; color: var(--graphite-soft); }
.product__delivery a { color: inherit; text-underline-offset: 3px; }
/* Знак GMP: власний, без логотипа ISO. */
.gmp-badge { width: 44px; height: 44px; flex: none; color: var(--brown); }
.gmp-badge--large { width: 112px; height: 112px; }
.gmp-badge__ring { font: 600 6.6px/1 var(--font-body); letter-spacing: .6px; fill: currentColor; }
.gmp-badge__mark { font: 600 25px/1 var(--font-display); fill: currentColor; letter-spacing: 2px; }
.gmp-badge__code { font: 600 12px/1 var(--font-body); fill: currentColor; letter-spacing: 1.5px; }
.gmp-badge__small { font: 600 7.5px/1 var(--font-body); fill: currentColor; letter-spacing: 2.5px; }
.marks__gmp { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.marks__gmp:hover { text-decoration: underline; text-underline-offset: 3px; }
.cert { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.cert__text { display: grid; gap: 18px; justify-items: start; }
.cert__facts { display: grid; gap: 10px; margin: 0; width: 100%; }
.cert__facts div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cert__facts dt { color: var(--graphite-soft); font-size: 14px; }
.cert__facts dd { margin: 0; }
.cert__check { font-size: 14px; color: var(--graphite-soft); }
.cert__image { display: block; box-shadow: 0 18px 40px rgba(43, 43, 45, .12); }
.cert__image img { width: 100%; height: auto; display: block; }
.marks { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 0; margin: 16px 0 0; font-size: 13px; color: var(--brown); font-weight: 500; }
.accordion { margin-top: 32px; border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { cursor: pointer; padding-block: 16px; font: 500 22px/1.2 var(--font-display); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; font-family: var(--font-body); font-weight: 400; transition: transform var(--fast) var(--ease); }
.accordion details[open] summary::after { transform: rotate(45deg); }
@supports (interpolate-size: allow-keywords) {
  .accordion { interpolate-size: allow-keywords; }
  .accordion details::details-content { height: 0; overflow: clip; transition: height var(--fast) var(--ease), content-visibility var(--fast) allow-discrete; }
  .accordion details[open]::details-content { height: auto; }
}
.prose { padding-bottom: 20px; font-size: 15.5px; color: var(--text); }
.prose__title { font-weight: 600; margin-bottom: 12px; }
.prose p + p, .prose ul + p, .prose ol + p { margin-top: 12px; }
.prose a { text-underline-offset: 3px; }
.prose ul, .prose ol { margin: 12px 0; padding-left: 20px; }
.prose li + li { margin-top: 8px; }
.prose h2 { font-size: 30px; margin: 36px 0 12px; }
.prose--small { font-size: 14px; }
.prose--page { max-width: 38em; font-size: 16.5px; padding-bottom: var(--space); }
.prose--page > h2:first-child { margin-top: 0; }

.routine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.routine a { display: grid; gap: 8px; height: 100%; padding: 18px; background: var(--bg); text-decoration: none; border: 1px solid transparent; transition: border-color var(--fast) var(--ease); }
.routine a:hover { border-color: var(--bottle); }
.routine li[aria-current] a { background: var(--graphite); color: var(--on-dark); }
.routine__step { font-size: 12px; font-weight: 600; color: var(--brown); }
.routine li[aria-current] .routine__step { color: var(--gold); }
.routine__name { font: 500 20px/1.2 var(--font-display); }

.bundles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-bottom: var(--space); }
.bundle__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-tile); margin-bottom: 16px; }
.bundle__media img { width: 100%; height: 100%; object-fit: cover; }
.bundle h2 { font-size: 26px; }
.bundle__items { list-style: none; margin: 10px 0 0; padding: 0; font-size: 15px; color: var(--graphite-soft); }
.bundle__items a { text-underline-offset: 3px; text-decoration-color: var(--bottle); }
.bundle__note { margin-top: 10px; font-size: 15px; color: var(--graphite-soft); }
.bundle__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-block: 14px 12px; }
.bundle__price strong { font: 500 30px/1 var(--font-display); }
.bundle__price s { font-size: 15px; color: var(--graphite-soft); }
.bundle__price span { font-size: 14px; font-weight: 600; color: var(--brown); }

.notices { background: var(--graphite); color: var(--on-dark); text-align: center; font-size: 14px; padding: 10px 16px; animation: slide-down var(--fast) var(--ease); }
.cart-link { position: relative; }
/* Повідомлення внизу екрана: «Додано в кошик» без перезавантаження сторінки */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; width: max-content; max-width: min(calc(100vw - 32px), 520px); padding: 14px 20px; background: var(--graphite); color: var(--on-dark);
  font-size: 14px; box-shadow: 0 12px 30px rgba(43, 43, 45, .25); opacity: 0; pointer-events: none; transform: translate(-50%, 16px);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease); }
.toast.is-shown { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.toast p { margin: 0; }
.toast a { color: var(--gold); margin-left: 6px; }
form.is-busy { opacity: .6; transition: opacity var(--fast) var(--ease); }
.cart-link.is-bumped .cart-link__count { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.35); } }
.cart-link__count { position: absolute; right: -2px; top: -2px; min-width: 18px; height: 18px; padding-inline: 4px; display: grid; place-items: center; background: var(--graphite); color: var(--on-dark); font-size: 11px; font-weight: 600; border-radius: 9px; }
.card { position: relative; }
.fav--card { position: absolute; right: 6px; top: 6px; }
.fav--card .icon-button { background: var(--bg); border-radius: 50%; padding: 7px; }
.fav .icon-button svg { width: 20px; height: 20px; }
.fav .is-active svg { fill: var(--graphite); }
.buy { display: flex; align-items: stretch; gap: 8px; }
.buy__form { flex: 1; display: flex; gap: 8px; }
.quantity { width: 68px; font: inherit; text-align: center; padding: 10px 6px; background: none; border: 1px solid var(--bottle); color: inherit; }
.fav--page { display: flex; }
.fav--page .icon-button { border: 1px solid var(--bottle); padding: 13px; }

.checkout-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; padding-bottom: var(--space); }
.cart { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cart__line { display: grid; grid-template-columns: 96px minmax(0, 1fr) 68px 96px; gap: 18px; align-items: center; padding-block: 16px; border-bottom: 1px solid var(--line); }
.cart__media { background: var(--bg-tile); aspect-ratio: 1 / 1; display: block; }
.cart__media img { width: 100%; height: 100%; object-fit: cover; }
.cart__sprig { display: block; width: 60%; height: 80%; margin: 10% auto; color: var(--brown); }
.cart__name { font: 500 22px/1.2 var(--font-display); text-decoration: none; }
.cart__meta { font-size: 14px; color: var(--graphite-soft); margin-block: 4px; }
.cart__quantity .quantity { width: 100%; }
.cart__total { text-align: right; font-weight: 600; }
.text-button { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--graphite-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color var(--fast) var(--ease); }
.text-button:hover { color: var(--text); }
.summary { background: var(--bg-tile); padding: 24px; display: grid; gap: 14px; position: sticky; top: 72px; }
.summary__row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; font-size: 15px; }
.summary__row strong { font: 500 30px/1 var(--font-display); }
.summary__note { font-size: 13px; color: var(--graphite-soft); }
.summary__note--free { color: var(--text); font-weight: 600; }
.summary__seller { font-size: 12px; line-height: 1.5; color: var(--graphite-soft); padding-top: 12px; border-top: 1px solid var(--line); }
.field-note { font-size: 14px; }
/* Знаки платіжних систем: офіційні файли Visa та Mastercard, без змін кольору й пропорцій. */
.card-marks { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; }
.card-marks img { width: auto; }
.card-marks__visa { height: 12px; }
.card-marks__mastercard { height: 30px; }
.choice .card-marks { margin-left: 6px; }
.footer .card-marks { margin-top: 8px; }
.summary__back { justify-self: center; }
.summary__lines { list-style: none; margin: 0; padding: 0 0 12px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; font-size: 14px; }
.summary__lines li { display: flex; justify-content: space-between; gap: 16px; }
.gift { font-size: 14px; display: grid; gap: 8px; }
.gift__bar { height: 4px; background: var(--bg); }
.gift__bar span { display: block; height: 100%; background: var(--graphite); }

.checkout { display: grid; gap: 24px; }
/* Кабінет покупця */
.auth { max-width: 460px; }
/* Відгуки: зірки рейтингу — заповнення за значенням (--value від 0 до 5) */
.stars { --value: 0; display: inline-block; font-size: 15px; letter-spacing: 2px; line-height: 1;
  background: linear-gradient(90deg, var(--brown) calc(var(--value) / 5 * 100%), var(--line) 0);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.product__rating { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; color: var(--graphite-soft); text-decoration: none; }
.reviews__total { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.reviews__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.review { padding-block: 18px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.review:first-child { border-top: 1px solid var(--line); }
.review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.review__badge { font-size: 12px; color: var(--brown); border: 1px solid var(--line); padding: 2px 8px; }
.review__date { color: var(--graphite-soft); font-size: 13px; }
.review-form { background: var(--bg-tile); padding: 24px; display: grid; gap: 14px; }
.review-form form { display: grid; gap: 14px; }
.review-form textarea { font: inherit; font-size: 16px; color: inherit; background: none; border: 1px solid var(--bottle); padding: 11px 13px; width: 100%; }
.stars-input { border: 0; padding: 0; margin: 0; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.stars-input legend { font: 500 22px/1.2 var(--font-display); margin-bottom: 8px; padding: 0; }
.stars-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars-input label { font-size: 30px; line-height: 1; color: var(--line); cursor: pointer; transition: color var(--fast) var(--ease); }
.stars-input input:checked ~ label, .stars-input label:hover, .stars-input label:hover ~ label { color: var(--brown); }
.stars-input input:focus-visible + label { outline: 2px solid var(--brown); outline-offset: 2px; }
.account__title { font: 500 28px/1.2 var(--font-display); margin-bottom: 16px; }
.account-orders { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.account-orders li { padding-block: 16px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.account-orders__lines { font-size: 14px; color: var(--graphite-soft); }
.account-orders__total { font-size: 14px; }
.checkout fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; }
.checkout legend { font: 500 25px/1.2 var(--font-display); padding: 0; margin-bottom: 12px; }
.field { display: grid; gap: 5px; font-size: 14px; }
.field input, .field textarea { font: inherit; font-size: 16px; color: inherit; background: none; border: 1px solid var(--bottle); padding: 11px 13px; width: 100%; transition: border-color var(--fast) var(--ease); }
.field input:hover, .field textarea:hover { border-color: var(--graphite-soft); }
.field--error input { border-color: #a4332b; }
.errorlist { list-style: none; margin: 0; padding: 0; color: #a4332b; font-size: 13px; }
.choices { display: grid; gap: 8px; }
.choice { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.choice input { margin-top: 5px; accent-color: var(--graphite); }
.choice__note { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--graphite-soft); }
/* Умови доставки й повернення прямо на сторінці оформлення: банк не приймає лише посилання на окрему сторінку. */
.terms { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--graphite-soft); }
.terms__returns { font-size: 14px; line-height: 1.5; color: var(--graphite-soft); }

.footer { position: relative; z-index: 1; background: var(--graphite); color: var(--on-dark); padding-block: clamp(48px, 6vw, 80px); font-size: 14px; }
.footer__inner { width: var(--page); margin-inline: auto; display: grid; grid-template-columns: 1.3fr repeat(2, 1fr); gap: 40px; }
.footer__inner > div { display: grid; gap: 9px; align-content: start; justify-items: start; }
.footer a { text-decoration: none; }
.footer__logo { margin-bottom: 14px; max-width: 100%; }
.footer__title { font: italic 500 21px/1.2 var(--font-display); color: var(--gold); margin-bottom: 4px; }
.footer__address { font-size: 13px; line-height: 1.5; opacity: .8; }

.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.story__text { display: flex; flex-direction: column; justify-content: center; padding: var(--space) var(--gutter); }
.story__lead { max-width: 28em; margin-top: 20px; font-size: 19px; }
.story__media img { width: 100%; height: 100%; max-height: 640px; object-fit: cover; }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.pillars article { display: grid; gap: 12px; align-content: start; justify-items: start; }
.pillars h2 { font-size: clamp(28px, 2.6vw, 36px); }
.pillars h3 { font-size: 30px; }
.actives { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.actives > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: 12px 32px; align-items: baseline; padding-block: 20px; border-bottom: 1px solid var(--line); }
.actives h3 { font-size: clamp(25px, 2.4vw, 32px); }
.proof--checks { display: block; }
.proof--checks h2 { margin-bottom: 28px; }
.checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; margin: 0; }
.checks dt { font: 500 24px/1.2 var(--font-display); }
.checks dd { margin: 6px 0 0; font-size: 15px; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; max-width: 56em; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: clamp(64px, 11vw, 150px) minmax(0, 1fr); column-gap: 24px; padding-block: 26px; border-bottom: 1px solid var(--line); }
.steps > li::before { content: counter(step); grid-row: span 2; font: italic 500 clamp(52px, 7vw, 92px)/.9 var(--font-display); color: var(--bottle); }
.steps h2 { font-size: clamp(28px, 2.8vw, 38px); }
.steps p { margin-top: 8px; max-width: 38em; }
/* Текст карток і вступи блоків, які пишуть у кабінеті. */
.rich p + p { margin-top: 10px; }
.rich ul, .rich ol { margin: 10px 0 0; padding-left: 20px; }
.rich li + li { margin-top: 6px; }
.section__intro { max-width: 42em; margin: -12px 0 28px; font-size: 16.5px; }
.proof__intro { max-width: 46em; margin: -12px 0 28px; }

/* Смужка під текстом проростає плавно: це фон, а не text-decoration, який не вміє анімуватися. */
.nav > a, .nav__item > a, .mega__col a, .footer a, .breadcrumbs a, .cart__name, .card__name span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav > a, .nav__item > a { background-position: 50% calc(100% - 9px); }
.nav > a[aria-current="page"], .nav__item > a[aria-current="page"] { background-size: 100% 1px; color: var(--brown); }
.footer .logo, .nav > .nav__home { background: none; }  /* логотип без підкреслення при наведенні */
@media (hover: hover) {
  .nav > a:hover, .nav__item > a:hover, .mega__col a:hover, .footer a:hover,
  .breadcrumbs a:hover, .cart__name:hover, .card__link:hover .card__name span { background-size: 100% 1px; }
  .nav > a:hover, .nav__item > a:hover, .mega__col a:hover { color: var(--brown); }
}

/* Поява блоків під час прокручування; клас .reveal додає site.js. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.hero__text > * { animation: rise 1s var(--ease) both; }
.hero__text > :nth-child(2) { animation-delay: .1s; }
.hero__text > :nth-child(3) { animation-delay: .2s; }
.hero__text > :nth-child(4) { animation-delay: .3s; }
.hero__media { overflow: hidden; }
.hero__media img { animation: settle 1.6s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.04); } to { transform: none; } }
@keyframes slide-down { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }

@media (max-width: 1240px) {
  .header { top: 0; }
  .header__burger { display: grid; }
  .header__top { min-height: 68px; }
  .header.is-stuck .nav > .nav__home { display: none; }
  .logo { gap: 12px; }
  .logo__leaf { width: 70px; height: 25px; }
  .logo__name { font-size: 19px; letter-spacing: .16em; }
  .logo__name i { letter-spacing: .16em; }
  .logo__sub { font-size: 8px; letter-spacing: .36em; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-top: 0; border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 24px; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100dvh - 110px); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease), visibility var(--fast); }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; }
  .nav > a, .nav__item > a { padding-block: 13px; border-bottom: 1px solid var(--line); font-size: 15px; }
  .mega, .nav__item--mega:hover .mega, .nav__item--mega:focus-within .mega { display: none; }
  .search input { width: 64px; }
  .search input:focus { width: 90px; }
}
@media (max-width: 900px) {
  .hero, .split, .product, .checkout-grid, .story, .pillars, .checks, .cert, .reviews__grid { grid-template-columns: minmax(0, 1fr); }
  .cert__facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .story__media { order: -1; }
  .story__media img { max-height: 340px; }
  .actives > li { grid-template-columns: minmax(0, 1fr); }
  .actives p { grid-column: 1 / -1; grid-row: 2; }
  .summary { position: static; }
  .hero__media { order: -1; }
  .split--reverse .split__media { order: 0; }
  .gallery { position: static; }
  .series-grid, .bundles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .proof { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__inner > div:first-child { grid-column: 1 / -1; }  /* реквізити й логотип — на всю ширину */
}
@media (max-width: 520px) {
  .search, .lang { display: none; }
  .header .logo { gap: 6px; }
  .header .logo__rule, .header .logo__sub { display: none; }
  .header .logo__leaf { width: 32px; height: 12px; }
  .header .logo__name { font-size: 13.5px; letter-spacing: .04em; }
  .header .logo__name i { letter-spacing: .04em; padding: 0 .02em 0 .06em; }
  .header__icons { gap: 2px; }
  .nav__search { display: flex; }
  .cart__line { grid-template-columns: 72px minmax(0, 1fr) 60px; gap: 12px; }
  .cart__total { grid-column: 2 / -1; }
  .card .pack-label { padding: 15% 9%; gap: 3px; }
  .card .pack-label svg { width: 26%; }
  .card .pack-label__name { font-size: 15px; }
  .card .pack-label__size { display: none; }
  .logo img { height: 25px; }
  .toolbar__sort span { display: none; }
  .series-grid, .bundles { grid-template-columns: minmax(0, 1fr); }
  .series-tile { aspect-ratio: 5 / 4; }
  .card__name { font-size: 19px; }
  .footer__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}