/* ============================================================
   Template F — story-scroll
   Раскладка: текстовый hero во всю ширину → чередование
   «двухколоночный текстовый разворот ↔ полноширинная лента тайлов».
   Все классы несут префикс perfume (подставляется вместе с HTML).
   ============================================================ */

:root{
  --bg:#f0e7d7;
  --bg2:#dcd1bd;
  --acc:#c47a32;
  --acc2:#173f38;
  --tx:#26332f;
  --mu:#6e776f;
  --head:"Marcellus",Georgia,"Times New Roman",serif;
  --body:"Wix Madefor Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --pad:clamp(18px,4vw,56px);
  --wrap:1180px;
  --tap:44px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font-family:var(--body);font-size:17px;line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--acc2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.14;margin:0 0 .5em}
p{margin:0 0 1em}

.perfumeskip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--acc);color:var(--bg);padding:12px 20px;min-height:var(--tap)
}
.perfumeskip:focus{left:0}

/* ---------- шапка ---------- */
.perfumebar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:12px var(--pad);
  background:var(--bg2);
  border-bottom:1px solid color-mix(in srgb,var(--mu) 28%,transparent);
  position:sticky;top:0;z-index:20;
}
.perfumemark{display:flex;align-items:center;gap:10px;color:var(--tx);min-height:var(--tap)}
.perfumemark:hover{text-decoration:none}
.perfumemark__svg{width:34px;height:34px;flex:none}
.perfumemark__t{font-family:var(--head);font-size:19px;line-height:1.1;display:block}
.perfumemark__sub{display:block;font-family:var(--body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.perfumenav{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.perfumenav a{
  display:flex;align-items:center;min-height:var(--tap);padding:0 14px;
  color:var(--mu);font-size:15px;border-radius:3px;
}
.perfumenav a:hover{color:var(--tx);background:color-mix(in srgb,var(--acc) 16%,transparent);text-decoration:none}

/* ---------- CTA ---------- */
.perfumecta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:12px 26px;
  background:var(--acc);color:var(--bg);
  font-weight:600;font-size:16px;letter-spacing:.01em;
  border-radius:2px;border:1px solid var(--acc);
}
.perfumecta:hover{filter:brightness(1.1);text-decoration:none}
.perfumecta--mini{padding:10px 18px;font-size:15px}
.perfumecta--line{background:transparent;color:var(--tx);border-color:color-mix(in srgb,var(--mu) 55%,transparent)}
.perfumecta--big{padding:16px 40px;font-size:18px}
.perfumelink{
  display:inline-flex;align-items:center;min-height:var(--tap);
  color:var(--acc2);border-bottom:1px solid color-mix(in srgb,var(--acc2) 45%,transparent);
}
.perfumelink:hover{text-decoration:none;color:var(--acc)}

.perfumeover{
  font-family:var(--body);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc2);margin:0 0 14px;
}
.perfumerow{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 34px}

/* ---------- 01 · HERO: текстовый, во всю ширину ---------- */
.perfumehero{
  padding:clamp(44px,8vw,104px) var(--pad) clamp(34px,5vw,62px);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--acc) 12%,transparent) 0%,transparent 62%),
    var(--bg);
  border-bottom:1px solid color-mix(in srgb,var(--mu) 22%,transparent);
}
.perfumehero__in{max-width:var(--wrap);margin:0 auto}
.perfumehero h1{
  font-size:clamp(30px,5.1vw,60px);
  max-width:22ch;margin-bottom:.42em;
}
.perfumelead{font-size:clamp(17px,1.5vw,20px);color:var(--mu);max-width:78ch}
.perfumekpi{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:2px solid var(--acc);
}
.perfumekpi li{
  padding:18px 16px 18px 0;font-size:14px;color:var(--mu);
  border-right:1px solid color-mix(in srgb,var(--mu) 25%,transparent);
  padding-left:16px;
}
.perfumekpi li:first-child{padding-left:0}
.perfumekpi li:last-child{border-right:0}
.perfumekpi span{
  display:block;font-family:var(--head);font-size:clamp(22px,2.6vw,32px);
  color:var(--tx);line-height:1.1;margin-bottom:4px;
}

/* ---------- текстовый разворот: слева заголовок, справа абзацы ---------- */
.perfumespread,
.perfumesteps,
.perfumeaccess,
.perfumeauthor{padding:clamp(38px,6vw,84px) var(--pad)}
.perfumespread__in,
.perfumesteps__in,
.perfumeaccess__in,
.perfumeauthor__in{max-width:var(--wrap);margin:0 auto}
.perfumespread__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(24px,4vw,66px)}
.perfumespread--wide .perfumespread__in{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.perfumespread__l h2,
.perfumesteps__in h2,
.perfumeaccess__in h2{font-size:clamp(24px,2.9vw,36px)}
.perfumespread__l{position:sticky;top:86px;align-self:start}
.perfumethesis{
  color:var(--acc2);font-size:16px;line-height:1.5;
  padding-left:16px;border-left:3px solid var(--acc);margin-top:18px;
}
.perfumespread__r p{color:var(--mu)}
.perfumespread__r p:first-child{color:var(--tx)}

.perfumequote{margin:26px 0 0;padding:20px 22px;background:var(--bg2);border-left:3px solid var(--acc2)}
.perfumequote blockquote{margin:0}
.perfumequote p{margin:0 0 10px;color:var(--tx)}
.perfumequote figcaption{font-size:13px;color:var(--mu)}

/* ---------- полноширинная лента тайлов ---------- */
.perfumerail{
  padding:clamp(34px,5vw,66px) 0;
  background:var(--bg2);
  border-top:1px solid color-mix(in srgb,var(--mu) 22%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--mu) 22%,transparent);
}
.perfumerail__cap{max-width:var(--wrap);margin:0 auto clamp(20px,3vw,34px);padding:0 var(--pad)}
.perfumerail__cap h2{font-size:clamp(22px,2.6vw,32px);max-width:26ch}
.perfumerail__cap p{color:var(--mu);max-width:88ch;margin:0}
.perfumerail__row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  width:100%;                    /* full-bleed: без внешних отступов */
}
.perfumetile{background:var(--bg);display:flex;flex-direction:column}
.perfumetile img{
  width:100%;height:auto;
  aspect-ratio:1/1;object-fit:cover;
  background:color-mix(in srgb,var(--mu) 18%,transparent);
}
.perfumetile__b{padding:16px 18px 20px;flex:1}
.perfumetile__b h3{font-size:18px;margin-bottom:.35em}
.perfumetile__b p{margin:0;font-size:14px;color:var(--mu)}

/* ---------- лояльность: вертикальные ступени с левой линейкой ---------- */
.perfumesteps__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(24px,4vw,66px)}
.perfumeladder{list-style:none;margin:0;padding:0 0 0 26px;border-left:2px solid color-mix(in srgb,var(--mu) 35%,transparent);counter-reset:st}
.perfumeladder li{position:relative;padding:0 0 26px}
.perfumeladder li::before{
  counter-increment:st;content:counter(st);
  position:absolute;left:-39px;top:0;
  width:26px;height:26px;border-radius:50%;
  background:var(--acc);color:var(--bg);
  font-family:var(--head);font-size:14px;line-height:26px;text-align:center;
}
.perfumeladder h3{font-size:19px;margin-bottom:.3em}
.perfumeladder p{margin:0;color:var(--mu);font-size:16px}

/* ---------- касса: таблица ---------- */
.perfumetw{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch}
.perfumetbl{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
.perfumetbl caption{text-align:left;font-size:13px;color:var(--mu);padding:0 0 10px}
.perfumetbl th,.perfumetbl td{padding:12px 14px;text-align:left;border-bottom:1px solid color-mix(in srgb,var(--mu) 25%,transparent)}
.perfumetbl thead th{
  font-family:var(--body);font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--acc2);
  border-bottom:2px solid var(--acc);
}
.perfumetbl tbody th{font-family:var(--head);font-weight:700;color:var(--tx)}
.perfumetbl td{color:var(--mu)}

/* ---------- доступ: 6 H3 ---------- */
.perfumeaccess__g{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,30px);margin-top:clamp(22px,3vw,34px)}
.perfumeaccess__g article{padding:20px 22px;background:var(--bg2);border-top:2px solid var(--acc2)}
.perfumeaccess__g h3{font-size:18px}
.perfumeaccess__g p{margin:0;color:var(--mu);font-size:15px}
.perfumeaccess__in>.perfumespread__l{position:static;max-width:70ch}

/* ---------- FAQ: одна колонка, крупные summary ---------- */
.perfumefaq{padding:clamp(38px,6vw,84px) var(--pad);background:var(--bg2)}
.perfumefaq__in{max-width:860px;margin:0 auto}
.perfumefaq h2{font-size:clamp(24px,2.9vw,36px);margin-bottom:.8em}
.perfumeq{border-bottom:1px solid color-mix(in srgb,var(--mu) 28%,transparent)}
.perfumeq summary{
  display:flex;align-items:center;gap:14px;
  min-height:56px;padding:14px 0;cursor:pointer;
  font-family:var(--head);font-size:clamp(18px,2vw,22px);line-height:1.25;
  list-style:none;
}
.perfumeq summary::-webkit-details-marker{display:none}
.perfumeq summary::before{
  content:"+";flex:none;width:28px;height:28px;border:1px solid var(--acc);
  color:var(--acc);font-family:var(--body);font-size:18px;line-height:26px;text-align:center;
}
.perfumeq[open] summary::before{content:"–"}
.perfumeq p{margin:0 0 18px;padding-left:42px;color:var(--mu)}

/* ---------- пред-подвальная полоса ---------- */
.perfumeband{
  padding:clamp(34px,5vw,68px) var(--pad);text-align:center;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc) 16%,transparent));
}
.perfumeband__t{font-family:var(--head);font-size:clamp(22px,3vw,34px);line-height:1.2;margin:0 0 .4em}
.perfumeband p{color:var(--mu);max-width:70ch;margin-left:auto;margin-right:auto}

/* ---------- author note ---------- */
.perfumeauthor{border-top:1px solid color-mix(in srgb,var(--mu) 22%,transparent)}
.perfumeauthor__in{max-width:900px}
.perfumeauthor h2{font-size:clamp(21px,2.3vw,28px)}
.perfumeauthor p{color:var(--mu);font-size:15px}

/* ---------- подвал ---------- */
.perfumefoot{padding:clamp(30px,4vw,54px) var(--pad);background:var(--bg2);border-top:2px solid var(--acc)}
.perfumefoot__grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.perfumefoot__t{font-family:var(--head);font-size:16px;color:var(--tx);margin-bottom:.4em}
.perfumefoot p{font-size:14px;color:var(--mu)}
.perfumefoot__c{max-width:var(--wrap);margin:26px auto 0;font-size:13px;color:var(--mu)}

/* ---------- мобильная раскладка ---------- */
@media (max-width:1000px){
  .perfumekpi{grid-template-columns:repeat(3,1fr)}
  .perfumekpi li{border-right:0;padding-left:0}
  .perfumerail__row{grid-template-columns:repeat(2,1fr)}
  .perfumefoot__grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  /* одна колонка везде: развороты схлопываются, лента становится вертикальной */
  .perfumespread__in,
  .perfumespread--wide .perfumespread__in,
  .perfumesteps__in,
  .perfumeaccess__g,
  .perfumekpi,
  .perfumerail__row{grid-template-columns:1fr}
  .perfumespread__l{position:static}
  .perfumetile img{aspect-ratio:2/1}   /* лента разворачивается в горизонтальные баннеры */
  .perfumenav{width:100%;margin-left:0}
  .perfumenav a{flex:1 1 auto;justify-content:center}
  .perfumecta,.perfumecta--big{width:100%}
  .perfumerow{flex-direction:column}
  .perfumeq p{padding-left:0}
  .perfumehero h1{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.seo-intents{max-width:1180px;margin:24px auto;padding:16px 20px;color:var(--muted,inherit);font-size:.78rem;line-height:1.8}.seo-intents p{margin:0}@media(max-width:620px){.seo-intents{padding:14px}}