@font-face{font-family:Manrope;src:url(/ukazky-webu/fonts/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/ukazky-webu/fonts/instrument-italic.woff2) format("woff2");font-style:italic;font-display:swap}
:root{--bg:#FBFAF6;--ink:#14231C;--green:#1F5D45;--mint:#DCEBDF;--lemon:#F2E27A;--rose:#F3C9C0;--line:#E4E2D8}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:500 16px/1.6 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}.w{max-width:1280px;margin:0 auto;padding:0 clamp(16px,3vw,36px)}
.top{background:var(--green);color:#fff;font-size:13px;text-align:center;padding:7px}
.hd{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);position:sticky;top:33px;background:rgba(251,250,246,.88);backdrop-filter:blur(12px);z-index:50}
.logo{font-weight:800;font-size:24px;letter-spacing:-.04em;display:flex;align-items:center;gap:8px}.logo svg{width:28px}
.search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 16px;color:#7b8580;font:inherit;width:100%;max-width:480px;cursor:pointer;text-align:left;transition:border-color .3s,box-shadow .3s}
.search:hover{border-color:var(--green);box-shadow:0 0 0 4px var(--mint)}
.cart-b{position:relative;display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border:0;border-radius:12px;padding:11px 18px;font:inherit;font-weight:700;cursor:pointer}
.cart-b .n{background:var(--lemon);color:var(--ink);min-width:22px;height:22px;border-radius:99px;display:grid;place-items:center;font-size:12px;transition:transform .4s cubic-bezier(.3,1.8,.5,1)}
.cart-b.bump .n{transform:scale(1.45)}
.cats{display:flex;gap:8px;padding:14px 0;overflow-x:auto;scrollbar-width:none}.cats a{white-space:nowrap;padding:8px 14px;border-radius:99px;border:1px solid var(--line);font-size:14px;transition:background .25s}.cats a:hover,.cats a[aria-current]{background:var(--mint);border-color:var(--mint)}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;margin-top:22px}
.hb{border-radius:28px;padding:clamp(28px,4vw,56px);position:relative;overflow:hidden;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end}
.hb.a{background:var(--mint)}.hb.b{background:var(--lemon)}
.hb h1{font-size:clamp(40px,5.6vw,82px);line-height:.98;letter-spacing:-.045em;margin:0 0 18px;font-weight:800;max-width:11ch}
.hb h1 i,.ser{font-family:"Instrument Serif",serif;font-weight:400;font-style:italic;letter-spacing:-.02em}
.hb p{max-width:36ch;margin:0 0 24px}
.hb .art{position:absolute;right:-20px;top:-20px;width:min(42%,300px)}.hb>*:not(.art){position:relative;z-index:1}
.hb.b .art{right:50%;transform:translateX(50%);top:20px;width:220px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:14px 22px;border-radius:12px;font-weight:700;border:0;font:inherit;font-weight:700;cursor:pointer;transition:transform .3s,background .3s;width:fit-content}
.btn:hover{background:var(--green)}.btn:active{transform:scale(.96)}
.sec{padding:clamp(56px,7vw,96px) 0}.sh{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:26px}
.sh h2{font-size:clamp(30px,3.6vw,48px);letter-spacing:-.04em;margin:0;line-height:1;font-weight:800}
.sh a{font-weight:700;border-bottom:2px solid var(--lemon)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.p{background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px;display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.p:hover{transform:translateY(-5px);box-shadow:0 22px 40px -24px rgba(20,35,28,.35)}
.p .im{border-radius:14px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;position:relative}
.p .im svg{width:62%;transition:transform .7s cubic-bezier(.2,.7,.2,1)}.p:hover .im svg{transform:rotate(-6deg) scale(1.07)}
.p .bdg{position:absolute;left:10px;top:10px;background:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px}
.p h3{font-size:17px;margin:14px 4px 2px;letter-spacing:-.01em}.p .meta{font-size:13px;color:#6c7670;margin:0 4px}
.p .row{display:flex;justify-content:space-between;align-items:center;margin:14px 4px 2px}.p .pr{font-weight:800;font-size:18px}
.add{border:0;background:var(--mint);color:var(--ink);font:inherit;font-weight:700;border-radius:10px;padding:9px 14px;cursor:pointer;display:flex;gap:6px;align-items:center;transition:background .3s,transform .2s}
.add:hover{background:var(--green);color:#fff}.add:active{transform:scale(.92)}.add.ok{background:var(--green);color:#fff}
.usp{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.usp div{border-top:2px solid var(--ink);padding-top:16px}.usp b{display:block;font-size:20px;letter-spacing:-.02em}
.story{background:var(--ink);color:#fff;border-radius:28px;padding:clamp(32px,6vw,80px);display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.story h2{font-size:clamp(34px,4.4vw,64px);line-height:1;letter-spacing:-.04em;margin:0}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:#fff;z-index:200;transform:translateX(105%);transition:transform .55s cubic-bezier(.7,0,.2,1);padding:28px;display:flex;flex-direction:column;gap:16px;box-shadow:-30px 0 60px -30px rgba(0,0,0,.3)}
.drawer.open{transform:none}.drawer h2{margin:0;font-size:26px;letter-spacing:-.03em}.drawer .x{position:absolute;right:20px;top:20px;border:0;background:var(--mint);width:40px;height:40px;border-radius:50%;font-size:18px;cursor:pointer}
.drawer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;flex:1;overflow:auto}.drawer li{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:10px 0;animation:li .4s ease both}
@keyframes li{from{opacity:0;transform:translateX(20px)}}
.scrim{position:fixed;inset:0;background:rgba(20,35,28,.35);z-index:190;opacity:0;pointer-events:none;transition:opacity .4s}.scrim.on{opacity:1;pointer-events:auto}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;z-index:210;font-size:14px;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}.toast.on{transform:translate(-50%,0)}
.ft{border-top:1px solid var(--line);padding:40px 0;margin-top:40px;font-size:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;color:#5d6862}
.pd{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,70px);padding:30px 0 60px}
.gal{display:grid;grid-template-columns:80px 1fr;gap:14px}.thumbs{display:flex;flex-direction:column;gap:10px}
.thumbs button{border:2px solid transparent;border-radius:12px;aspect-ratio:1;padding:0;cursor:pointer;transition:border-color .3s}.thumbs button[aria-pressed=true]{border-color:var(--ink)}
.big{border-radius:24px;aspect-ratio:1;display:grid;place-items:center;transition:background .5s}.big svg{width:56%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pd h1{font-size:clamp(34px,4vw,54px);letter-spacing:-.04em;line-height:1;margin:6px 0 14px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:#fff}.qty button{border:0;background:none;width:44px;height:48px;font-size:20px;cursor:pointer}.qty output{min-width:30px;text-align:center;font-weight:800}
.tabs{margin-top:34px}.tabs [role=tablist]{display:flex;gap:6px;border-bottom:1px solid var(--line);position:relative}
.tabs [role=tab]{border:0;background:none;font:inherit;font-weight:700;padding:12px 14px;cursor:pointer;color:#6c7670}.tabs [role=tab][aria-selected=true]{color:var(--ink)}
.tabs .ink{position:absolute;bottom:-1px;height:2px;background:var(--ink);transition:left .4s cubic-bezier(.7,0,.2,1),width .4s cubic-bezier(.7,0,.2,1)}
.tabs [role=tabpanel]{padding:18px 2px;animation:li .4s ease}
.ship{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.ship div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
table.t{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden}.t td,.t th{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}.hero,.story,.pd{grid-template-columns:1fr}.hb.b{min-height:300px}}
@media(max-width:640px){.hd{grid-template-columns:1fr auto;gap:12px}.search{grid-column:1/-1;grid-row:2;max-width:none}.usp,.ship{grid-template-columns:1fr}.hb{min-height:420px}.hb .art{width:36%;right:-6px;top:-8px}.hb.b .art{width:130px;top:10px}.hb h1{font-size:44px}.grid{gap:10px}.p{padding:10px}.p h3{font-size:15px}.p .row{flex-direction:column;align-items:stretch;gap:8px}.add{justify-content:center}.gal{grid-template-columns:1fr}.thumbs{flex-direction:row;order:2}.thumbs button{width:64px}}