@font-face{font-family:Commissioner;src:url(../fonts/commissioner-cyrillic.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Commissioner;src:url(../fonts/commissioner-latin.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Bad Script';src:url(../fonts/bad-script-cyrillic.woff2) format('woff2');font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Bad Script';src:url(../fonts/bad-script-latin.woff2) format('woff2');font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}

:root{
  --paper:#F4DBD4;          /* бумага первого экрана — пыльная роза; с зерном на экране ≈ #EED6CF */
  --paper-2:#E6C8C0;
  --ink:#2B1B2A;            /* чернила — слива почти чёрная */
  --ink-2:#5E4558;
  --pencil:#B3233A;         /* красный карандаш флориста: штрихи, крупные пометки */
  --pencil-t:#9E1F33;       /* он же для мелкого рукописного текста (контраст ≥ 5:1) */
  --sheet:#FBF4F0;          /* лист панели заказа */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .1 0 0 0 0 .16 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --hand:'Bad Script',cursive;
  --ease:cubic-bezier(.16,1,.3,1);
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:7rem}   /* якоря — ниже закреплённой шапки */
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.55 Commissioner,system-ui,sans-serif;
  font-variation-settings:"FLAR" 0,"VOLM" 0;-webkit-font-smoothing:antialiased;position:relative;overflow-x:clip}
body::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.15;pointer-events:none;mix-blend-mode:multiply}
::selection{background:var(--pencil);color:var(--sheet)}
:focus-visible{outline:3px solid var(--pencil);outline-offset:3px;border-radius:6px}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1.5px}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.skip{position:absolute;left:1rem;top:-4rem;z-index:10;background:var(--ink);color:var(--sheet);padding:.75rem 1rem;border-radius:10px;font-weight:650}
.skip:focus{top:.5rem}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html:has(dialog[open]){overflow:hidden}

.hand{font-family:var(--hand);color:var(--pencil-t);font-weight:400;letter-spacing:0}

/* плашка демо */
.demo{position:relative;margin:0;padding:var(--s2) var(--s5);background:var(--ink);color:#F3E4DF;font-size:.8125rem;line-height:1.4;text-align:center}

/* шапка */
/* шапка закреплена при прокрутке: та же бумага с зерном; когда плашка демо ушла вверх — лёгкая тень */
.top{position:sticky;top:0;z-index:6;isolation:isolate;background:var(--paper);display:flex;align-items:center;gap:2.5rem;padding:1.25rem clamp(1.25rem,5vw,4.5rem);
  transition:box-shadow .3s}
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);opacity:.15;mix-blend-mode:multiply;pointer-events:none}
.top.stuck{box-shadow:0 12px 24px -20px rgb(43 27 42 / .55)}
.mark{display:inline-flex;align-items:center;min-height:44px;gap:var(--s3);font-weight:750;font-size:1.5rem;letter-spacing:-.01em;text-decoration:none;
  font-variation-settings:"FLAR" 100,"VOLM" 40;margin-right:auto}
.logo{width:48px;height:50px;flex:none;overflow:visible}
.logo path{fill:none;stroke:var(--pencil);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.logo path:first-child{fill:rgb(179 35 58 / .16)}
.nav{display:flex;gap:1.875rem;font-weight:500;font-size:1.03rem}
.nav a{text-decoration:none;padding:var(--s2) 0;border-bottom:2px solid transparent;transition:border-color .4s var(--ease)}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--pencil)}
.burger{order:3;display:none;width:48px;height:48px;border:0;border-radius:50%;background:var(--paper-2);cursor:pointer;place-items:center}
.burger svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);border:0;cursor:pointer;background:var(--ink);color:var(--sheet);
  font-weight:650;font-size:1.125rem;padding:1.06rem 2.1rem;border-radius:999px 999px 999px 8px;font-variation-settings:"FLAR" 60;
  box-shadow:0 10px 24px -12px rgb(43 27 42 / .55);transition:transform .4s var(--ease),background-color .3s}
.btn:hover{background:var(--pencil);transform:translateY(-2px) rotate(-1deg)}
.btn:active{transform:translateY(0)}
.btn-s{font-size:1rem;padding:.75rem 1.5rem}
a.btn{text-decoration:none}

/* первый экран */
.hero{position:relative;overflow-x:clip;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:end;
  min-height:calc(100svh - 120px);padding:0 0 0 clamp(1.25rem,5vw,4.5rem);gap:2vw}
.copy{align-self:center;padding:1vh 0 2vh;max-width:620px}
h1{font-size:clamp(2.75rem,5.4vw,5.1rem);line-height:.98;letter-spacing:-.035em;font-weight:720;margin:0 0 var(--s5);
  font-variation-settings:"FLAR" 100,"VOLM" 60;text-wrap:balance}
h1 .u{position:relative;white-space:nowrap;color:var(--pencil)}
h1 .ul{position:absolute;left:-2%;right:-4%;bottom:-.14em;width:106%;height:.32em;overflow:visible}
h1 .ul{filter:url(#graphite-u)}
h1 .ul path{fill:none;stroke:var(--pencil);stroke-width:3.2;stroke-linecap:round}
.lead{font-size:1.2rem;line-height:1.5;color:var(--ink-2);max-width:32ch;margin:0 0 var(--s4)}
.now{margin:0 0 var(--s5);font-size:1rem;color:var(--ink-2)}
.now b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.tick{display:inline-block;vertical-align:.08em;margin-right:var(--s3);width:10px;height:10px;border-radius:50%;background:var(--pencil)}
.cta{display:flex;align-items:center;gap:1.875rem;flex-wrap:wrap}
.more{font-weight:600;font-size:1.125rem;padding:.6rem 0;display:inline-block}

/* ещё букеты — оттиски поменьше */
.minis{margin-top:var(--s6)}
.minis-h{margin:0 0 var(--s1);font-size:1.4rem;transform:rotate(-2deg);transform-origin:left}
.minis-row{display:flex;gap:var(--s5);align-items:flex-end}
.mini{all:unset;cursor:pointer;display:grid;justify-items:start;gap:0;width:132px;position:relative}
.mini img{width:132px;height:auto;mix-blend-mode:multiply;transition:transform .5s var(--ease)}
.mini:nth-child(2) img{width:118px;transform:rotate(2deg)}
.mini:nth-child(3) img{width:124px;transform:rotate(-2deg)}
.mini .hand{font-size:1.3rem;line-height:1;margin-top:-4px;transform:rotate(-4deg)}
.mini small{font-size:.875rem;color:var(--ink-2);margin-top:2px}
.mini:hover img{transform:translateY(-6px) rotate(-1deg)}
.mini:focus-visible{outline:3px solid var(--pencil);outline-offset:4px;border-radius:12px}

/* букет-оттиск с подписями */
.plate{position:relative;margin:0;align-self:stretch;display:flex;align-items:flex-end;justify-content:center}
.pv{position:relative;width:min(100%,calc((100svh - 110px) * .8),760px);line-height:0}
.plate img{width:100%;height:auto;mix-blend-mode:multiply;filter:contrast(1.04) saturate(1.06)}
.marks{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.marks{filter:url(#graphite)}
.marks path{fill:none;stroke:var(--pencil);stroke-width:.42;stroke-linecap:round;stroke-linejoin:round}
.marks path.again{stroke-width:.24;opacity:.45}
.labels{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.labels li{position:absolute;font-family:var(--hand);color:var(--pencil-t);font-size:1.55rem;line-height:1.05;white-space:nowrap;
  transform:translate(-50%,-50%) rotate(var(--r,-2deg));
  -webkit-text-stroke:5px var(--paper);paint-order:stroke fill}
.labels li[data-al=l]{transform:translate(0,-50%) rotate(var(--r,-2deg));transform-origin:left}
.labels li[data-al=r]{transform:translate(-100%,-50%) rotate(var(--r,-2deg));transform-origin:right;text-align:right}
.proof{position:absolute;right:4%;bottom:9%;display:flex;flex-direction:column;align-items:flex-end;gap:var(--s3)}
.print{display:block;width:150px;background:#FFFDFB;padding:9px 9px 34px;transform:rotate(5deg);position:relative;line-height:0;
  box-shadow:0 18px 30px -16px rgb(43 27 42 / .55),0 2px 4px rgb(43 27 42 / .12)}
.print img{width:100%;height:auto}
.stamp{position:absolute;left:12px;bottom:6px;font-size:1.2rem;line-height:1.2;color:var(--ink)}
.note{font-size:1.45rem;line-height:1.1;transform:rotate(-4deg);text-align:right;margin:0 6px 0 0;-webkit-text-stroke:5px var(--paper);paint-order:stroke fill}

/* прорисовка подписей при загрузке */
.js .marks path,.js h1 .ul path{stroke-dasharray:1;stroke-dashoffset:1}
.wr{display:inline-block}
.js .wr{clip-path:inset(-30% 101% -30% -4%)}
.js .proof{opacity:0;transform:translateY(24px) rotate(-3deg)}
.drawn .marks path,.drawn h1 .ul path{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease) var(--d,0s)}
.drawn .wr{clip-path:inset(-30% -4% -30% -4%);transition:clip-path var(--dur,.6s) cubic-bezier(.3,.1,.4,1) var(--w,0s)}
.drawn .proof{opacity:1;transform:none;transition:opacity .7s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}

/* ---------- листы ниже первого экрана: каждый раздел — своя бумага эскизника ---------- */
.page{position:relative;padding:clamp(1.25rem,3vw,2.75rem) clamp(.5rem,3vw,2.5rem) 0}
.sheet{position:relative;isolation:isolate;max-width:1440px;margin:0 auto;padding:clamp(3.5rem,8vw,6.5rem) 0;background:var(--pp);border-radius:3px;
  box-shadow:0 26px 44px -30px rgb(43 27 42 / .5),0 2px 6px -2px rgb(43 27 42 / .16)}
.sheet::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.18;mix-blend-mode:multiply;pointer-events:none;border-radius:inherit}
.sheet::after{content:"";position:absolute;inset:6px -4px -6px 4px;z-index:-1;background:color-mix(in srgb,var(--pp) 82%,#2B1B2A 6%);border-radius:3px;transform:rotate(var(--rot,.6deg));
  box-shadow:0 18px 30px -24px rgb(43 27 42 / .45)}
#kak{--rot:-.7deg}#bukety{--rot:.5deg}#izdaleka{--rot:-.4deg}#svezhest{--rot:.7deg}#podpiska{--rot:-.6deg}#prazdniki{--rot:.4deg}
#bukety .sheet{margin-left:clamp(0rem,2vw,2rem)}#svezhest .sheet{margin-right:clamp(0rem,2vw,2rem)}#prazdniki .sheet{margin-left:clamp(0rem,3vw,3rem)}
.p-sage{--pp:#DCE3D3}.p-lilac{--pp:#E2DAEA}.p-mist{--pp:#D9E3EA}.p-butter{--pp:#F2E6C4}.p-rose{--pp:#EED6CF}
.wrap{position:relative;max-width:1240px;margin:0 auto;padding:0 clamp(1.25rem,5vw,4.5rem)}
.ph{margin-bottom:clamp(2rem,4vw,3.5rem)}
.ph h2{margin:0;font-size:clamp(2.5rem,5vw,4.25rem);line-height:1;letter-spacing:-.03em;font-weight:720;font-variation-settings:"FLAR" 100,"VOLM" 60}
.ph-n{margin:.4rem 0 0;font-size:1.55rem;transform:rotate(-2deg);transform-origin:left}
.ph-c{text-align:center}.ph-c .ph-n{transform-origin:center}
.ph-r{text-align:right}.ph-r .ph-n{transform-origin:right;transform:rotate(2deg)}
.ph-big h2{font-size:clamp(3rem,6.6vw,5.6rem)}
.page h3,.bq-h{margin:0;font-size:1.25rem;line-height:1.3;font-weight:680}

/* как вручаем — маршрут по листу */
.route{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,3vw,2.5rem);align-items:start}
.st{display:grid;gap:.5rem;justify-items:start}
.st:nth-child(2){margin-top:3rem}.st:nth-child(4){margin-top:2rem}
.st-p{width:min(100%,210px);transform:rotate(-3deg)}
.st:nth-child(2) .st-p{transform:rotate(4deg)}.st:nth-child(3) .st-p{transform:rotate(-1.5deg)}
.st-p img{mix-blend-mode:normal}
.st-t{font-size:2.4rem;line-height:1;color:var(--pencil);margin-top:.6rem}
.st p{margin:0;color:var(--ink-2);font-size:1rem;max-width:28ch}
.check{width:min(100%,190px);height:auto;overflow:visible;filter:url(#graphite-u)}
.check path{fill:none;stroke:var(--pencil);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.check .again{stroke-width:3.5;opacity:.45}
.route-n{margin:2.5rem 0 0;font-size:1.3rem;color:var(--ink-2)}

/* букеты — оттиски разного размера, не сетка из одинаковых карточек */
.pick{display:grid;gap:.75rem;justify-items:center;margin-bottom:3rem}
.who{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem}
.who-l{font-weight:700;margin-right:.4rem}
.page .chip{background:rgb(255 255 255 / .55)}
.page .chip:hover{background:#fff}
.page .chip[aria-pressed="true"]{background:var(--ink);color:var(--sheet)}
.bqs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(1.25rem,4vw,3.5rem);row-gap:3rem;align-items:start}
.bq{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem;justify-items:start;min-width:0}
.bq-h,.bq-s,.gf-h,.cv-n{overflow-wrap:anywhere;hyphens:auto}
.bqs.filtered .bq{margin-top:0}
.bq img{width:100%;height:auto;mix-blend-mode:multiply;transition:transform .6s var(--ease)}
.bq-pv{position:relative;line-height:0;width:100%}
.bq:nth-child(even) .bq-pv{width:90%}
.bq-pv .marks{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:url(#graphite)}
.bq-pv .marks path{fill:none;stroke:var(--pencil);stroke-width:.5;stroke-linecap:round;stroke-linejoin:round}
.bq-pv .marks path.again{stroke-width:.28;opacity:.45}
.bq-m{position:absolute;font-size:1.3rem;line-height:1.05;white-space:nowrap;-webkit-text-stroke:5px var(--pp);paint-order:stroke fill;transform:translate(0,-50%) rotate(-3deg)}
.bq-m[data-al=r]{transform:translate(-100%,-50%) rotate(3deg);text-align:right}
.js .bq-pv .marks path{stroke-dasharray:1;stroke-dashoffset:1}
.js .bq-pv .bq-m{clip-path:inset(-30% 101% -30% -4%)}
.js .bq-pv.seen .marks path{stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease) var(--d,0s)}
.js .bq-pv.seen .bq-m{clip-path:inset(-30% -4% -30% -4%);transition:clip-path .9s cubic-bezier(.3,.1,.4,1) .55s}
.bq.bq-lead{grid-column:span 2;grid-row:span 2}
.bq.bq-lead{align-self:end}
.bq.bq-lead .bq-pv{width:min(100%,640px)}
/* растушёвка только внизу по листьям и чуть по бокам, где кадр режет крайние розы; верх букета целый */
.bq.bq-lead .bq-pv img{-webkit-mask-image:linear-gradient(#000 80%,transparent),linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(#000 80%,transparent),linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect}
.bq.bq-lead .bq-m{font-size:1.75rem}
.bq.bq-lead .bq-h{font-size:1.6rem}
.bq:nth-child(5),.bq:nth-child(7){margin-top:2.5rem}
.bq:hover img{transform:translateY(-6px) rotate(-1deg)}
.bq-s{margin:0;font-family:var(--hand);color:var(--pencil-t);font-size:1.2rem;line-height:1.35}
.bq-f{margin:.3rem 0 0;display:flex;align-items:center;gap:1rem;font-size:.9rem;color:var(--ink-2)}
.btn-xs{font-size:.95rem;padding:.6rem 1.1rem;min-height:44px}
.bq[hidden]{display:none}
.bqs-empty{margin-top:1rem;text-align:center;font-size:1.05rem}
.bqs-n{margin-top:2.5rem}

/* издалека — открытка и галочки */
.iz{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.iz-card{position:relative;padding:1rem 0 3rem}
.card.big{padding:2rem 2.2rem;min-height:220px;transform:rotate(-3deg);background-size:100% 44px;
  background-image:linear-gradient(transparent 43px,rgb(179 35 58 / .14) 44px)}
.card.big p{font-size:2rem;line-height:44px;color:var(--ink)}
.iz-n{position:absolute;right:4%;bottom:0;font-size:1.4rem;transform:rotate(-4deg)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem}
.ticks li{position:relative;padding-left:2.6rem;color:var(--ink-2);max-width:52ch}
.ticks li b{color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:0;top:.15rem;width:1.7rem;height:1.4rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 28'%3E%3Cpath d='M3 15c4 3 7 7 10 11 6-11 11-18 19-23' fill='none' stroke='%23B3233A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}

/* свежесть — условия и памятка */
.sv{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.terms{margin:0;display:grid;gap:1.4rem;max-width:46ch}
.terms>div{display:grid;grid-template-columns:2.2rem 1fr;column-gap:.4rem}
.terms>div::before{content:counter(t);counter-increment:t;grid-row:span 2;font-family:var(--hand);color:var(--pencil);font-size:2rem;line-height:1}
.terms{counter-reset:t}
.terms dt{font-weight:700;font-size:1.15rem;margin-bottom:.35rem}
.terms dd{margin:0;color:var(--ink-2)}
.care{background:#FFFDF6;padding:1.75rem 2rem 2rem;transform:rotate(2deg);box-shadow:0 18px 30px -18px rgb(43 27 42 / .45);margin-top:1rem}
.care h3{font-size:1.9rem;color:var(--pencil);font-weight:400;margin-bottom:.75rem}
.care ol{margin:0;padding-left:1.4rem;display:grid;gap:.6rem;font-size:1.05rem}
.stem{display:block;width:min(100%,300px);height:auto;margin:.25rem auto 1rem;overflow:visible;filter:url(#graphite-u)}
.stem path{fill:none;stroke:var(--ink-2);stroke-width:2.2;stroke-linecap:round}
.stem .cut{stroke:var(--pencil);stroke-width:3;stroke-dasharray:6 6}
.stem .leaf{stroke:var(--ink-2);fill:rgb(94 69 88 / .12)}
.stem-t{font-family:var(--hand);font-size:15px;fill:var(--pencil-t)}
.care li::marker{font-family:var(--hand);color:var(--pencil);font-size:1.3rem}

/* подписка */
.pd{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.pd .cal{margin-top:.5rem}
.pd-f{display:grid;gap:1.4rem;justify-items:start}
.pd-f legend{margin-bottom:.6rem}
.cal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:start}
.cal-s{background:#FFFDFB;padding:.9rem .9rem 1rem;line-height:0;box-shadow:0 16px 26px -18px rgb(43 27 42 / .5);transform:rotate(-2.5deg)}
.cal-s:nth-child(2){transform:rotate(1.5deg) translateY(1.5rem)}.cal-s:nth-child(3){transform:rotate(-1deg) translateY(.5rem)}
.cal-d{display:block;line-height:1.1;font-size:1.8rem;margin-bottom:.5rem;color:var(--pencil)}
.cal-s img{mix-blend-mode:multiply}

/* праздники */
.pr{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(2rem,5vw,4rem);justify-items:start;align-items:start}
.pr>*:not(.pr-pic){grid-column:1}
.pr-pic{grid-column:2;grid-row:1 / span 5;margin:0;width:100%;align-self:center}
.pr-pic img{width:100%;height:auto;mix-blend-mode:multiply}
.dates{display:flex;flex-wrap:wrap;gap:1.5rem 4rem;margin:0 0 2rem}
.dt{position:relative;font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.1;color:var(--ink);padding:.6rem 1.4rem}
.dt svg{position:absolute;inset:-6% -4%;width:108%;height:112%;overflow:visible;filter:url(#graphite-u)}
.dt path{fill:none;stroke:var(--pencil);stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pr-t{max-width:52ch;color:var(--ink-2);margin:0 0 1.75rem}

/* подвал */
.foot{background:var(--ink);color:#F3E4DF;padding:3.5rem 0 4rem}
.foot-in{display:grid;grid-template-columns:auto 1fr;gap:1.5rem 4rem;align-items:start}
.foot .logo path{stroke:#F0A7B2}.foot .logo path:first-child{fill:rgb(240 167 178 / .18)}
.foot nav{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;justify-self:end}
.foot nav a{text-decoration:none;padding:.5rem 0}
.foot nav a:hover{text-decoration:underline}
.foot :focus-visible{outline-color:#F0A7B2}
.foot-docs{grid-column:1/-1;justify-self:start!important;font-size:.9rem;color:#D9C2C9}
.foot-n{grid-column:1/-1;margin:0;font-size:.875rem;color:#D9C2C9;max-width:80ch}

/* прорисовка при прокрутке: маршрут, галочка, круги вокруг дат */
.js .page .check path,.js .dt path{stroke-dasharray:1;stroke-dashoffset:1}
.js .seen .check path,.js .seen .dt path{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease) .2s}
.seen .check .again{transition-delay:.5s}
.seen .dt:nth-child(2) path{transition-delay:.6s}

/* нижняя панель «Заказать» — только телефон */
.dock{display:none}

/* панель заказа — сбоку */
.drawer{position:fixed;inset:0 0 0 auto;margin:0;height:100%;max-height:none;max-width:none;width:min(480px,100vw);border:0;padding:0;
  background:var(--sheet);color:var(--ink);box-shadow:-30px 0 60px -30px rgb(43 27 42 / .5);overflow:auto;overscroll-behavior:contain;
  transform:translateX(100%);transition:transform .5s var(--ease),display .5s allow-discrete,overlay .5s allow-discrete}
.drawer[open]{transform:none}
.drawer{scroll-padding-block-end:12rem}
@starting-style{.drawer[open]{transform:translateX(100%)}}
.drawer::backdrop{background:rgb(43 27 42 / .35);backdrop-filter:blur(2px)}
.dw{padding:var(--s5) 1.875rem 0;display:grid;gap:1.375rem;min-height:100%}
.dw-top{display:flex;align-items:center;justify-content:space-between}
.dw-top h2{margin:0;font-size:2.1rem;letter-spacing:-.02em;font-weight:720;font-variation-settings:"FLAR" 100,"VOLM" 60}
.x{width:46px;height:46px;border-radius:50%;border:0;background:var(--paper);cursor:pointer;display:grid;place-items:center}
.x svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.dw-demo{margin:-.6rem 0 0;background:var(--ink);color:var(--sheet);border-radius:10px;padding:.6rem .9rem;font-size:.875rem;font-weight:600;line-height:1.4}
.dw-b{display:grid;grid-template-columns:120px minmax(0,1fr);gap:1.1rem;align-items:start;background:var(--paper);border-radius:22px 22px 22px 6px;padding:.9rem}
.dw-pic img{mix-blend-mode:multiply;border-radius:14px}
.dw-b h3{margin:.25rem 0 .4rem;font-size:1.2rem;line-height:1.25;font-weight:680}
.sost{list-style:none;margin:0;padding:0;font-size:1.25rem;line-height:1.25}
.muted{margin:0;font-size:.9rem;color:var(--ink-2)}
fieldset{border:0;margin:0;padding:0;display:grid;gap:var(--s3);min-width:0}
legend{font-weight:700;font-size:1.2rem;margin-bottom:var(--s3);padding:0}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{border:0;cursor:pointer;background:var(--paper);color:var(--ink);font-size:.97rem;font-weight:550;padding:.7rem 1rem;border-radius:999px;min-height:44px;
  font-variant-numeric:tabular-nums;transition:background-color .25s,color .25s}
.chip:hover{background:var(--paper-2)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--sheet)}
.chip:disabled{cursor:not-allowed;background:transparent;color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--pencil)}
.linkb{justify-self:start;border:0;background:none;padding:var(--s2) 0;cursor:pointer;font-weight:600;font-size:.97rem;text-decoration:underline;text-underline-offset:.22em;min-height:44px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.fld{display:grid;gap:.35rem;font-size:.9rem;color:var(--ink-2)}
.fld-h{font-size:.85rem;color:var(--ink-2);margin-top:-.2rem}
.fld input,.fld select,.fld textarea{font-size:1rem;color:var(--ink);background:#fff;border:0;border-radius:12px;padding:.75rem .9rem;min-height:48px;width:100%;
  box-shadow:inset 0 -3px 0 var(--ink-2)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:3px solid var(--pencil);outline-offset:1px}
textarea{resize:vertical}
.chk{display:flex;gap:var(--s3);align-items:center;font-size:1rem;cursor:pointer;min-height:44px}
.chk input{width:22px;height:22px;accent-color:var(--pencil);flex:none}
.card{background:#fff;border-radius:4px;padding:1rem 1.25rem;min-height:74px;transform:rotate(-1.5deg);
  box-shadow:0 12px 20px -14px rgb(43 27 42 / .5);background-image:linear-gradient(transparent 31px,rgb(179 35 58 / .14) 32px);background-size:100% 32px}
.card p{margin:0;font-size:1.5rem;line-height:32px;word-break:break-word}
/* итог — рукописный чек с пустыми суммами */
.sum{background:#fff;border-radius:4px;padding:1rem 1.25rem 1.1rem;display:grid;gap:.5rem;font-size:1rem;transform:rotate(.6deg);
  box-shadow:0 14px 24px -18px rgb(43 27 42 / .55)}
.sum-h{margin:0 0 .2rem;font-size:1.45rem;color:var(--pencil)}
.sum p:not(.sum-h){margin:0;display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:.6rem}
.sum span{color:var(--ink-2)}.sum em{font-style:normal}
.sum .blank{min-width:0;font-size:.78rem;font-weight:400;line-height:1.2;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 .3rem 2px;border-bottom:2px dotted var(--ink-2);text-align:center}
.sum i{font-style:normal;font-weight:650}
.sum .tot{padding-top:.5rem;font-size:1.1rem;font-weight:700}
.sum .tot span{color:var(--ink)}
.dw-foot{position:sticky;bottom:0;margin:0 -1.875rem;padding:.9rem 1.875rem 1.4rem;background:var(--sheet);display:grid;gap:.6rem;
  box-shadow:0 -14px 24px -18px rgb(43 27 42 / .35)}
.dw-when{margin:0;font-size:1rem;color:var(--ink-2)}
.dw-when b{color:var(--ink)}
.wide{width:100%}
.done{margin:0;text-align:center;font-family:var(--hand);color:var(--pencil-t);font-size:1.6rem}

/* оттиск без рамок: где кадр режет букет, край растворяется в листе */
.bq-pv img,.cv img,.gf img,.kp-pic img{-webkit-mask-image:linear-gradient(transparent,#000 3%,#000 88%,transparent),linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(transparent,#000 3%,#000 88%,transparent),linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
.h-page+.ph-n{margin-top:.75rem}

.dv{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.dv-note{margin-top:0;display:grid;gap:.9rem;justify-items:start}
.dv-note h2{margin:0;font-size:1.9rem;color:var(--pencil);font-weight:400}
.dv-note p{margin:0}
.dv-print{width:150px;transform:rotate(4deg);margin:.25rem 0 .5rem .5rem}
/* ---------- каталог ---------- */
.h-page{margin:0;font-size:clamp(2.5rem,5vw,4.25rem);line-height:1;letter-spacing:-.03em;font-weight:720;font-variation-settings:"FLAR" 100,"VOLM" 60;text-wrap:balance}
.crumbs{margin:0 0 1.75rem;font-size:.95rem;color:var(--ink-2)}
.crumbs a{padding:.5rem 0;display:inline-block}
.cat .sheet,.kp .sheet{padding-top:clamp(2rem,4vw,3.25rem)}
.kp .h-page{font-size:clamp(2.25rem,3.6vw,3.4rem)}
.crumbs [aria-current]{color:var(--ink)}
.cuts{display:grid;gap:.6rem;margin:-1rem 0 3rem}
.cuts p{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.cuts .who-l{min-width:4.5rem}
a.chip{display:inline-flex;align-items:center;text-decoration:none}
.page .chip[aria-current]{background:var(--ink);color:var(--sheet)}
a.bq-pv{display:block}
.bq-h a{text-decoration:none}
.bq-h a:hover{text-decoration:underline}
.cat-more{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin:3rem 0 0}
.cat-more .muted{max-width:52ch}
.narrow{max-width:900px}
/* разделы «Цветы» — оттиски с подписью карандашом */
.cvs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2.5rem clamp(1rem,3vw,2.5rem);align-items:start}
.cv{display:grid;justify-items:start;text-decoration:none;line-height:1.1}
.cv img{width:100%;mix-blend-mode:multiply;transition:transform .6s var(--ease)}
.cv:nth-child(even) img{transform:rotate(2deg)}
.cv:hover img{transform:translateY(-6px) rotate(-1deg)}
.cv-n{font-size:2rem;margin-top:-.4rem;transform:rotate(-3deg);transform-origin:left}
.cv small{font-size:.95rem;color:var(--ink-2);margin-top:.2rem}
/* карточка букета */
.kp-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.kp-pic{margin:0;display:grid;gap:.75rem}
.kp-pic .pv{width:100%;max-width:640px}
.kp-pic img{mix-blend-mode:multiply;filter:contrast(1.04) saturate(1.06)}
.kp .labels li{-webkit-text-stroke-color:var(--pp)}
.kp .bq-m{font-size:1.75rem}
.kp-t{display:grid;gap:1.1rem;justify-items:start;padding-top:1rem}
.kp-price{margin:0;font-size:1.15rem;font-weight:650}
.kp-h2{margin:.5rem 0 0;font-size:1.2rem;font-weight:700}
.kp-sost{list-style:none;margin:0;padding:0;font-size:1.55rem;line-height:1.35}
.kp-free{margin:0;background:#FFFDF6;padding:1rem 1.25rem;transform:rotate(-1deg);box-shadow:0 14px 24px -18px rgb(43 27 42 / .5);max-width:44ch}
.kp-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:.5rem}
.kp-dopy,.kp-size{width:100%}
/* допы «+ к заказу» — строки с галочкой: в карточке и в панели */
.dps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.drawer .dps{grid-template-columns:1fr}
.dp{display:grid;grid-template-columns:auto 52px minmax(0,1fr);align-items:center;gap:.75rem;padding:.4rem .75rem .4rem .6rem;background:rgb(255 255 255 / .6);border-radius:14px;cursor:pointer;min-height:60px}
.drawer .dp{background:var(--paper)}
.dp input{width:22px;height:22px;accent-color:var(--pencil);margin:0}
.dp img{width:52px;mix-blend-mode:multiply}
.dp span{display:grid;font-size:.97rem;font-weight:600;line-height:1.3}
.dp small{font-weight:400;font-size:.8rem;color:var(--ink-2)}
.dp:has(input:checked){box-shadow:inset 0 0 0 2px var(--pencil)}
/* подарки */
.gfs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3rem clamp(1rem,3vw,2.5rem);align-items:start}
.gf{display:grid;gap:.4rem;justify-items:start}
.gf img{width:100%;mix-blend-mode:multiply}
.gf:nth-child(4n+2){margin-top:2rem}.gf:nth-child(4n+4){margin-top:1rem}
.gf-h{margin:0;font-size:1.2rem;line-height:1.25;font-weight:680}
.gf-add[aria-pressed="true"]{background:var(--pencil)}
.gf-add[aria-pressed="true"]::before{content:"✓\00a0" / ""}
.gf-st{margin:2rem 0 0;font-family:var(--hand);color:var(--pencil-t);font-size:1.4rem;min-height:1.5em}
/* документы */
.doc-ol{margin:1.5rem 0 0;padding-left:1.6rem;display:grid;gap:1rem;max-width:62ch}
.doc-ol li::marker{font-family:var(--hand);color:var(--pencil);font-size:1.3rem}
.doc-ol li b{display:block;font-weight:650}
.doc-ol .muted{display:block;margin-top:.15rem}
.docs-l{margin-top:2rem}
.docd,.note-d{border:0;padding:0;border-radius:22px 22px 22px 6px;background:var(--sheet);color:var(--ink);width:min(560px,calc(100vw - 2rem));max-height:calc(100svh - 2rem);
  box-shadow:0 30px 60px -30px rgb(43 27 42 / .6)}
.docd::backdrop,.note-d::backdrop{background:rgb(43 27 42 / .4)}
.docd{overflow:auto;overscroll-behavior:contain}
.docd-in{padding:1.25rem 1.5rem 1.5rem;display:grid;gap:1rem}
.docd .dw-top h2{font-size:1.6rem;line-height:1.1}
.docd .doc-ol{font-size:1rem;gap:.6rem}
.docd .dw-demo{margin:0}
.docd .doc-ol{margin:0}
.note-d{padding:1.5rem;display:none;gap:1rem;justify-items:start}
.note-d[open]{display:grid}
.note-d p{margin:0;font-size:1.5rem;line-height:1.25}
/* панель: «Вы», согласия, подсказка у кнопки */
.req{color:var(--pencil-t);font-weight:700}
.err{color:var(--pencil-t);font-size:.85rem;font-weight:600;min-height:0}
.err:empty{display:none}
.fld input[aria-invalid="true"]{box-shadow:inset 0 -3px 0 var(--pencil)}
.consents{gap:.6rem}
.cs{display:grid;grid-template-columns:22px minmax(0,1fr);gap:.75rem;align-items:start;font-size:.92rem;line-height:1.4}
.cs input{width:22px;height:22px;margin:.05rem 0 0;accent-color:var(--pencil)}
.cs label{cursor:pointer;padding:.1rem 0}
.cs a{font-weight:600}
.cs-all{font-weight:700;font-size:1rem}
.opt-t{color:var(--ink-2)}
.hint{margin:0;font-size:.875rem;color:var(--ink-2);text-align:center}
.btn:disabled{background:var(--ink-2);opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .marks path,.js h1 .ul path,.js .page .check path,.js .dt path,.js .bq-pv .marks path{stroke-dashoffset:0;transition:none}.js .bq-pv .bq-m{clip-path:none;transition:none}.js .wr{clip-path:none}.js .proof{opacity:1;transform:none}
  .btn,.nav a,.mini img,.bq img,.cv img,.drawer{transition:none}
}

/* меню: шесть пунктов помещаются от 1200px; уже — под кнопкой */
@media (max-width:1200px){
  .nav{display:none;position:absolute;top:100%;right:clamp(1.25rem,5vw,4.5rem);z-index:5;flex-direction:column;gap:0;background:var(--sheet);border-radius:18px 4px 18px 18px;
    padding:.5rem 1.25rem;box-shadow:0 18px 30px -16px rgb(43 27 42 / .5);min-width:15rem}
  .nav.open{display:flex}
  .nav a{padding:.75rem 0;min-height:44px}
  .burger{display:grid}
  .top{gap:1rem}
}

/* телефон */
@media (max-width:900px){
  .demo{font-size:.75rem;padding:.4rem 1rem}
  .top{gap:var(--s3);padding:.9rem 1.25rem}
  .top .btn-s{display:none}
  .mark{font-size:1.2rem}
  .logo{width:40px;height:42px}
  .hero{display:flex;flex-direction:column;align-items:stretch;padding:0;min-height:0;gap:0}
  .copy{display:contents}
  .hero h1{order:2;margin:0 1.25rem 1rem;font-size:clamp(2.35rem,11vw,3.4rem)}
  .lead{order:3;margin:0 1.25rem .7rem;font-size:1.05rem}
  .now{order:4;margin:0 1.25rem .4rem;font-size:.92rem}
  .plate{order:5;min-height:0;margin:0 0 .4rem}
  .pv{width:100%}
  .labels li{font-size:1.2rem}
  .labels li.opt,.marks path.opt{display:none}
  .print{width:104px;padding:6px 6px 26px}.stamp{font-size:.875rem;left:8px;bottom:4px}
  .note{font-size:1.1rem}
  .proof{right:3%;bottom:3%}
  .cta{order:6;margin:.6rem 1.25rem 0}
  .minis{order:7;margin:1.5rem 1.25rem 6rem}
  .minis-row{gap:var(--s4);flex-wrap:wrap}
  .mini,.mini img{width:100px}.mini:nth-child(2) img{width:92px}.mini:nth-child(3) img{width:96px}
  html{scroll-padding-bottom:7rem;scroll-padding-top:5.5rem}
  .dock{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.5rem;align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:4;
    padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgb(238 214 207 / .94) 30%)}
  .dock .btn{width:100%;padding:1rem .75rem;font-size:1rem}
  .dk{display:grid;justify-items:center;gap:2px;width:70px;min-height:56px;padding:.45rem 0 .35rem;border:0;border-radius:18px 18px 18px 6px;cursor:pointer;
    background:var(--sheet);color:var(--ink);font-size:.75rem;font-weight:650;box-shadow:0 10px 20px -12px rgb(43 27 42 / .55)}
  .dk svg{width:22px;height:22px;fill:none;stroke:var(--pencil);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .dw{padding:1.25rem 1.25rem 0}
  .dw-foot{margin:0 -1.25rem;padding:.8rem 1.25rem 1.2rem}
  .dw-foot .btn{font-size:1rem;padding-left:1rem;padding-right:1rem}
  .dw-b{grid-template-columns:84px minmax(0,1fr);gap:.75rem}
  .dw-b h3{font-size:1.05rem}
  .sost{font-size:1.05rem}
  .two{grid-template-columns:1fr}
  .route{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.5rem}
  .st:nth-child(n){margin-top:0}.st:nth-child(2n){margin-top:2rem}
  .bqs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:2.25rem}
  .bq.bq-lead{grid-row:auto}
  .bq:nth-child(n){margin-top:0}
  .bq-m{font-size:1.05rem;-webkit-text-stroke:4px var(--pp);white-space:normal;width:max-content;max-width:7.5em}
  .bq.bq-lead .bq-m{font-size:1.3rem}
  .pr{grid-template-columns:1fr}.pr-pic{grid-column:1;grid-row:auto;max-width:300px;margin-top:2rem}
  .cal-d{font-size:1.1rem}.cal-s{padding:.5rem .5rem .6rem}
  .page{padding-left:.4rem;padding-right:.4rem}
  .sheet::after{transform:none;inset:5px -3px -5px 3px}
  .bq-f{flex-wrap:wrap;gap:.4rem}
    .bq:nth-child(odd) img{width:100%}
  .iz,.sv,.pd{grid-template-columns:1fr}
  .terms{grid-template-columns:1fr}
  .card.big p{font-size:1.6rem}
  .pd-pics{margin-bottom:2.5rem}
  .foot-in{grid-template-columns:1fr}.foot nav{justify-self:start}
  .foot{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom))}
  .bqs.filtered .bq{margin-top:0}
  .kp-in,.dv{grid-template-columns:1fr}

  .ph-n{font-size:1.3rem}
  .kp-t{padding-top:0}
  .kp-sost{font-size:1.3rem}
  .dps{grid-template-columns:1fr}
  .cvs,.gfs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem}
  .gf:nth-child(n){margin-top:0}.gf:nth-child(2n){margin-top:1.5rem}
  .cv-n{font-size:1.5rem}
  .cuts{margin:-.5rem 0 2rem}
  .cuts .who-l{min-width:0;flex:none;font-size:.95rem}
  .cuts p{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -1.25rem;padding:0 1.25rem;gap:.4rem}
  .cuts p::-webkit-scrollbar{display:none}
  .cuts .chip{flex:none;font-size:.92rem;padding:.6rem .9rem}
  .crumbs{font-size:.9rem;margin-bottom:1rem}
  .crumbs .cur{display:none}
  .cat .sheet,.kp .sheet{padding-top:1.25rem}
  .h-page{font-size:clamp(2.1rem,9vw,3rem)}
}

/* узкие телефоны и низкие экраны */
@media (max-width:420px){
  .sum p:not(.sum-h){grid-template-columns:minmax(0,1fr) auto}
  .sum p:not(.sum-h) span{grid-column:1/-1}
  .sum .blank{text-align:left}
}
@media (max-width:360px){
  .print{width:84px;padding:5px 5px 22px}.stamp{font-size:.75rem}
  .note{font-size:1rem}
}
@media (max-height:700px){
  .dw-foot{padding-top:.6rem;padding-bottom:.8rem}
  .dw-when{font-size:.9rem}
  .hint{font-size:.8rem}
  .dw-foot .btn{padding-top:.8rem;padding-bottom:.8rem}
}