:root{
  --text-xs:clamp(.75rem,.72rem + .15vw,.8125rem);
  --text-sm:clamp(.875rem,.85rem + .12vw,.9375rem);
  --text-base:clamp(1rem,.97rem + .15vw,1.0625rem);
  --text-lg:clamp(1.125rem,1.05rem + .35vw,1.3125rem);
  --text-xl:clamp(1.5rem,1.25rem + 1vw,2.125rem);
  --text-2xl:clamp(2rem,1.4rem + 2.6vw,3.5rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;

  --color-bg:#f6f4ef;
  --color-surface:#ffffff;
  --color-surface-2:#ece8df;
  --color-border:oklch(0.25 0.02 260 / 0.12);
  --color-text:#1c2230;
  --color-muted:#5a6070;
  --color-primary:#b8302a;
  --color-primary-hover:#962520;
  --color-ink:#1c2230;
  --color-ink-2:#262d3d;
  --color-on-ink:#f3f1ec;
  --color-on-ink-muted:#b9bcc6;

  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;
  --shadow-sm:0 1px 2px oklch(0.2 0.02 70 / .06);
  --shadow-md:0 8px 24px oklch(0.2 0.02 70 / .08);
  --transition-interactive:180ms cubic-bezier(.16,1,.3,1);
  --content:1240px;
  --z:1; /* во сколько раз увеличена страница (широкие мониторы 2K/4K) */
  --font-body:'Onest','Segoe UI',sans-serif;
  --font-display:'Onest','Segoe UI',sans-serif;
  --font-accent:'Lora',Georgia,serif;
}
.wrap{max-width:max(var(--content),min(1440px,calc(100vw - 80px)));margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
/* широкие мониторы (4K, 2K): страница целиком увеличивается, чтобы выглядела как на 1920 — та же доля экрана, крупнее шрифт и фото */
@media (min-width:2560px){:root{zoom:1.2;--z:1.2}}
@media (min-width:2880px){:root{zoom:1.3;--z:1.3}}
@media (min-width:3200px){:root{zoom:1.45;--z:1.45}}
@media (min-width:3840px){:root{zoom:1.8;--z:1.8}}
.skip{position:absolute;left:-9999px;top:0;background:var(--color-ink);color:#fff;padding:.5rem 1rem;z-index:100}
.skip:focus{left:1rem}

/* Topbar */
.topbar{background:var(--color-ink);color:var(--color-on-ink-muted);font-size:var(--text-xs)}
.topbar .wrap{display:flex;gap:var(--space-6);justify-content:space-between;align-items:center;min-height:36px;flex-wrap:wrap}
.topbar a{color:var(--color-on-ink);text-decoration:none}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar__left{display:flex;gap:var(--space-6);flex-wrap:wrap}

/* Header */
.header{position:sticky;top:0;z-index:50;background:var(--color-bg);border-bottom:1px solid var(--color-border)}
.header .wrap{display:flex;align-items:center;gap:var(--space-8);min-height:72px}
.logo{flex:none}
.logo img{height:40px;width:auto}
.nav{display:flex;gap:var(--space-1);margin-right:auto}
.nav a{white-space:nowrap;font-size:var(--text-sm);font-weight:500;color:var(--color-text);text-decoration:none;padding:.5rem .75rem;border-radius:var(--radius-sm)}
.nav a:hover{background:var(--color-surface-2)}
.nav a[aria-current]{color:var(--color-primary)}
.header__actions{display:flex;align-items:center;gap:var(--space-3)}
.phone{font-weight:700;font-size:var(--text-base);color:var(--color-text);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.phone:hover{color:var(--color-primary)}
.iconbtn{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .8rem;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);font-size:var(--text-sm);font-weight:500;color:var(--color-text);text-decoration:none}
.iconbtn:hover{border-color:oklch(0.25 0.02 260 / .3)}
.iconbtn svg{width:18px;height:18px;flex:none}
.badge{background:var(--color-primary);color:#fff;border-radius:999px;font-size:.6875rem;font-weight:700;min-width:18px;height:18px;display:inline-grid;place-items:center;padding:0 5px}
.burger{display:none}

/* Поиск по артикулу */
.srch{position:relative}
.srch.on .srch__btn{border-color:var(--color-primary);color:var(--color-primary)}
.srch__panel{position:absolute;right:0;top:calc(100% + 8px);width:400px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 12px 32px oklch(0.2 0.02 260 / .14);padding:.6rem;z-index:60}
.srch__field{display:flex;align-items:center;gap:.5rem;border:1px solid oklch(0.25 0.02 260 / .2);border-radius:var(--radius-sm);padding:0 .25rem 0 .7rem;background:#fff}
.srch__field:focus-within{border-color:var(--color-primary)}
.srch__field svg{width:18px;height:18px;flex:none;color:var(--color-muted)}
.srch__field input{flex:1;min-width:0;height:42px;border:none;background:transparent;font:inherit;font-size:var(--text-sm);color:var(--color-text)}
.srch__field input:focus{outline:none}
.srch__field input::-webkit-search-cancel-button{-webkit-appearance:none}
.srch__x{width:34px;height:34px;font-size:1.35rem;line-height:1;color:var(--color-muted);border-radius:var(--radius-sm)}
.srch__x:hover{color:var(--color-text);background:var(--color-surface-2)}
.srch__list{list-style:none;margin:.4rem 0 0;padding:0;max-height:min(60vh,440px);overflow:auto}
.srch__list:empty{display:none}
.srch__list a{display:flex;align-items:center;gap:.7rem;padding:.4rem .5rem;border-radius:var(--radius-sm);color:var(--color-text);text-decoration:none}
.srch__list li[aria-selected=true] a,.srch__list a:hover{background:var(--color-surface-2)}
.srch__list img,.srch__noimg{width:44px;height:44px;object-fit:contain;flex:none;background:var(--color-bg);border-radius:6px}
.srch__t{flex:1;min-width:0;display:flex;flex-direction:column;font-size:var(--text-xs);line-height:1.35}
.srch__t b{font-size:var(--text-sm)}
.srch__t mark{background:oklch(0.9 0.09 90);color:inherit;border-radius:2px}
.srch__t span{color:var(--color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch__p{font-size:var(--text-sm);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.srch__hint{margin:.5rem .3rem .2rem;font-size:var(--text-xs);color:var(--color-muted)}
.header .wrap{container-type:inline-size}
.srch__btn .lbl{display:none}
@container (min-width:1340px){.srch__btn .lbl{display:inline}}
@media (max-width:640px){.srch{position:static}.srch__panel{position:absolute;left:.75rem;right:.75rem;width:auto;top:calc(100% + 6px)}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:0 1.4rem;border-radius:var(--radius-sm);font-weight:600;font-size:var(--text-sm);text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn--primary{background:var(--color-primary);color:#fff}
.btn--primary:hover{background:var(--color-primary-hover)}
.btn--ghost{border-color:oklch(0.25 0.02 260 / .25);color:var(--color-text);background:transparent}
.btn--ghost:hover{background:var(--color-surface)}
.btn--light{background:#fff;color:var(--color-ink)}
.btn--light:hover{background:var(--color-surface-2)}
.btn:active{transform:translateY(1px)}

/* Hero */
.hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(2.5rem,5vw,4rem)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.eyebrow{font-family:var(--font-accent);font-style:italic;color:var(--color-muted);font-size:var(--text-base);margin-bottom:var(--space-4)}
.hero h1{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:750;letter-spacing:-.02em;line-height:1.06}
.hero h1 em{font-style:normal;color:var(--color-primary)}
.hero__lead{margin-top:var(--space-5);font-size:var(--text-lg);color:var(--color-muted);max-width:52ch;line-height:1.5}
.hero__cta{display:flex;gap:var(--space-3);margin-top:var(--space-8);flex-wrap:wrap}
.facts{display:grid;grid-template-columns:repeat(4,auto);gap:var(--space-8);margin-top:var(--space-10);padding-top:var(--space-6);border-top:1px solid var(--color-border);justify-content:start}
.facts b{display:block;font-size:var(--text-xl);font-weight:750;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.1}
.facts span{font-size:var(--text-xs);color:var(--color-muted)}
.mosaic{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:var(--space-3);aspect-ratio:1/1.02}
.mosaic figure{position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--color-surface-2)}
.mosaic figure:first-child{grid-row:span 2}
.mosaic img{width:100%;height:100%;object-fit:cover}
.mosaic figcaption{position:absolute;left:.6rem;bottom:.6rem;background:oklch(0.18 0.02 260 / .78);color:#fff;font-size:var(--text-xs);padding:.25rem .55rem;border-radius:4px;backdrop-filter:blur(4px)}

/* Section */
.section{padding-block:clamp(3rem,7vw,5.5rem)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:var(--space-6);margin-bottom:var(--space-8);flex-wrap:wrap}
.sec-head h2{font-size:var(--text-xl);font-weight:750;letter-spacing:-.015em}
.sec-head p{color:var(--color-muted);margin-top:var(--space-2);max-width:60ch}
.link-arrow{font-weight:600;font-size:var(--text-sm);color:var(--color-primary);text-decoration:none;white-space:nowrap}
.link-arrow:hover{text-decoration:underline}

/* Categories */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.cat{position:relative;display:flex;flex-direction:column;background:var(--color-surface);border-radius:var(--radius-md);border:1px solid var(--color-border);text-decoration:none;color:inherit;overflow:hidden}
.cat:hover{box-shadow:var(--shadow-md);border-color:oklch(0.25 0.02 260 / .2)}
.cat:hover img{transform:scale(1.04)}
.cat__img{aspect-ratio:1/1;display:grid;place-items:center;padding:var(--space-4)}
.cat__img img{width:78%;height:auto;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.cat__body{padding:var(--space-3) var(--space-4) var(--space-4);display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2);border-top:1px solid var(--color-border)}
.cat h3{font-size:var(--text-base);font-weight:650}
.cat__meta{font-size:var(--text-xs);color:var(--color-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.cat--big{grid-column:span 2;grid-row:span 2}
.cat--big .cat__img{aspect-ratio:auto;flex:1}
.cat--big .cat__img img{width:62%}
.cat--big h3{font-size:var(--text-lg)}
.cat-more{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}
.chip{font-size:var(--text-sm);padding:.5rem .9rem;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.chip:hover{border-color:var(--color-primary);color:var(--color-primary)}

/* Embroidery */
.emb{background:var(--color-ink);color:var(--color-on-ink)}
.emb .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.emb h2{font-size:var(--text-xl);font-weight:750;letter-spacing:-.015em}
.emb .eyebrow{color:var(--color-on-ink-muted)}
.emb p{color:var(--color-on-ink-muted);margin-top:var(--space-4);max-width:56ch}
.emb ul{margin-top:var(--space-6);display:flex;flex-wrap:wrap;gap:var(--space-2)}
.emb li{list-style:none;font-size:var(--text-sm);border:1px solid oklch(1 0 0 / .18);padding:.35rem .8rem;border-radius:999px;color:var(--color-on-ink)}
.emb .hero__cta{margin-top:var(--space-8)}
.price{background:var(--color-ink-2);border:1px solid oklch(1 0 0 / .08);border-radius:var(--radius-lg);padding:clamp(1.25rem,3vw,2rem)}
.price h3{font-size:var(--text-lg);font-weight:650}
.price small{display:block;color:var(--color-on-ink-muted);font-size:var(--text-xs);margin-top:.25rem}
.price table{margin-top:var(--space-5);font-size:var(--text-sm);font-variant-numeric:tabular-nums}
.price th,.price td{text-align:right;padding:.6rem .5rem;border-bottom:1px solid oklch(1 0 0 / .1)}
.price th:first-child,.price td:first-child{text-align:left}
.price thead th{color:var(--color-on-ink-muted);font-weight:500;font-size:var(--text-xs)}
.price td b{color:#fff}
.price__extra{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3) var(--space-6);margin-top:var(--space-5);font-size:var(--text-sm)}
.price__extra div{display:flex;justify-content:space-between;gap:var(--space-3);color:var(--color-on-ink-muted)}
.price__extra b{color:#fff;font-weight:600;white-space:nowrap}

/* Works */
.works{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:var(--space-3)}
.work{position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--color-surface-2);margin:0}
.work img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.work:hover img{transform:scale(1.04)}
.work--tall{grid-row:span 2}
.work--wide{grid-column:span 2}
.work figcaption{position:absolute;inset:auto 0 0 0;padding:1.6rem .8rem .7rem;background:linear-gradient(to top,oklch(0.15 0.02 260 / .78),transparent);color:#fff;font-size:var(--text-xs);font-weight:500}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;border-top:1px solid var(--color-border)}
.step{padding:var(--space-6) var(--space-6) 0 0;counter-increment:s}
.step::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--font-accent);font-style:italic;font-size:var(--text-lg);color:var(--color-primary);margin-bottom:var(--space-3)}
.step h3{font-size:var(--text-base);font-weight:650}
.step p{font-size:var(--text-sm);color:var(--color-muted);margin-top:var(--space-2)}

/* Form */
.quote{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);display:grid;grid-template-columns:.9fr 1.1fr;overflow:hidden}
.quote__aside{padding:clamp(1.5rem,4vw,3rem);background:var(--color-surface-2)}
.quote__aside h2{font-size:var(--text-xl);font-weight:750;letter-spacing:-.015em}
.quote__aside p{color:var(--color-muted);margin-top:var(--space-4)}
.quote__aside ul{margin-top:var(--space-6);display:grid;gap:var(--space-3);font-size:var(--text-sm)}
.quote__aside li{list-style:none;padding-left:1.4rem;position:relative}
.quote__aside li::before{content:"";position:absolute;left:0;top:.6em;width:.7rem;border-top:2px dashed var(--color-primary)}
form.qf{padding:clamp(1.5rem,4vw,3rem);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.field{display:grid;gap:.35rem;align-content:start}
.field--full{grid-column:1/-1}
.size{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem}
.size span{color:var(--color-muted)}
.hint{font-size:var(--text-xs);color:var(--color-muted)}
.field label{font-size:var(--text-sm);font-weight:500}
.field input,.field textarea,.field select{width:100%;min-height:48px;padding:.7rem .85rem;border-radius:var(--radius-sm);border:1px solid oklch(0.25 0.02 260 / .2);background:var(--color-bg)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px oklch(from var(--color-primary) l c h / .15)}
.drop{grid-column:1/-1;border:1.5px dashed oklch(0.25 0.02 260 / .3);border-radius:var(--radius-md);padding:var(--space-5);text-align:center;font-size:var(--text-sm);color:var(--color-muted);cursor:pointer;background:var(--color-bg)}
.drop:hover{border-color:var(--color-primary);color:var(--color-text)}
.drop b{color:var(--color-primary)}
.qf__foot{grid-column:1/-1;display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap}
.qf__foot small{color:var(--color-muted);font-size:var(--text-xs);max-width:40ch}
.qf__ok{grid-column:1/-1;display:none;padding:var(--space-4);border-radius:var(--radius-sm);background:oklch(0.93 0.05 145);color:oklch(0.35 0.08 145);font-size:var(--text-sm)}
.qf__ok.show{display:block}
.qf__ok.qf__ok--err{background:oklch(0.94 0.04 30);color:oklch(0.42 0.12 30)}

/* Footer */
.footer{background:var(--color-ink);color:var(--color-on-ink-muted);padding-block:var(--space-16) var(--space-8);font-size:var(--text-sm)}
.footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--space-8)}
.footer h3{color:#fff;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-4)}
.footer a{color:var(--color-on-ink);text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer ul{display:grid;gap:.45rem}
.footer li{list-style:none}
.footer .logo-w{background:#fff;display:inline-block;padding:.5rem .7rem;border-radius:var(--radius-sm)}
.footer .logo-w img{height:30px;width:auto}
.footer .big{font-size:var(--text-lg);font-weight:700;color:#fff}
.footer__bottom{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid oklch(1 0 0 / .1);display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;font-size:var(--text-xs)}

/* Responsive */
@media (max-width:1240px){
  .nav{display:none}
  .burger{display:inline-flex}
  .logo{margin-right:auto}
}
@media (max-width:1080px){
  .header .wrap{gap:var(--space-4)}
  .logo{margin-right:auto}
  .hero .wrap,.emb .wrap{grid-template-columns:1fr}
  .cats{grid-template-columns:repeat(3,1fr)}
  .cat--big{grid-column:span 1;grid-row:span 1}
  .cat--big .cat__img{aspect-ratio:1/1}
  .cat--big .cat__img img{width:78%}
  .works{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step{padding-bottom:var(--space-6)}
  .quote{grid-template-columns:1fr}
  .footer .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .topbar__left span:not(:first-child){display:none}
  .header .phone{display:none}
  .iconbtn .lbl{display:none}
  .facts{grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
  .cats{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
  .cat__body{flex-direction:column;gap:.1rem;padding:var(--space-3)}
  .works{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .work--wide{grid-column:span 2}
  .steps{grid-template-columns:1fr}
  form.qf{grid-template-columns:1fr}
  .price__extra{grid-template-columns:1fr}
  .footer .grid{grid-template-columns:1fr}
  .hero__cta{flex-direction:column}
  .hero__cta .btn{width:100%}
  .mosaic figcaption{display:none}
}

@media (min-width:1241px){
  .header .wrap{gap:var(--space-5)}
  .nav{gap:0}.nav a{padding:.5rem .55rem}
  .header__actions{gap:var(--space-2)}
}
@media (max-width:400px){.logo img{height:32px}.header__actions{gap:var(--space-2)}}
@media (max-width:360px){.logo img{height:27px}.header .iconbtn{padding:0 .6rem}}

/* Mobile menu */
.mnav{display:none;border-top:1px solid var(--color-border);background:var(--color-bg)}
.mnav.open{display:block}
.mnav a{display:block;padding:.9rem clamp(1rem,4vw,2.5rem);border-bottom:1px solid var(--color-border);color:var(--color-text);text-decoration:none;font-weight:500}
.mnav a.phone-m{color:var(--color-primary);font-weight:700}