:root{--bg:#fcfbf8;--ink:#121110;--mut:#8b867d;--line:#e9e5dd;--card:#ffffff;--gold:#a8864f;--serif:"Bodoni Moda",Georgia,serif;--sans:Manrope,system-ui,sans-serif;--ease:cubic-bezier(.2,.7,.15,1)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;caret-color:transparent}
input,textarea,select,[contenteditable]{caret-color:var(--ink)}  /* мигающий курсор — только в полях ввода, не в тексте страницы */
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}img{display:block;max-width:100%}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}
.muted{color:var(--mut);font-size:13px}

.top{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:20px 48px;background:#fcfbf8ee;backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.sc{border-color:var(--line)}
.top nav{display:flex;gap:30px;font-size:13px;letter-spacing:.03em}.top .nav-r{justify-content:flex-end}
.top nav a,.lnk{position:relative}.top nav a::after,.lnk::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}.top nav a:hover::after,.lnk:hover::after{transform:scaleX(1)}
.mark{font:400 28px/1 var(--serif);letter-spacing:.17em;padding-left:.17em;white-space:nowrap}.mark.sm{font-size:20px}
.x{position:relative;display:inline-block}.x b{position:absolute;background:currentColor;display:block}
#cartN{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:var(--ink);color:var(--bg);font-size:10px;margin-left:5px;padding:0 5px;vertical-align:1px}

/* первый экран: слева картина (фоном), справа светлая сторона с текстом */
.kick{font:500 12px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.script{font-family:"Pinyon Script",var(--serif);font-weight:400;letter-spacing:0}
.hero2{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100svh - 69px);border-bottom:1px solid var(--line)}
.hero-pic{background:#1b1712 url(img/caravaggio-light.webp) 50% 58%/cover no-repeat;min-height:560px}
.hero-tx{display:flex;flex-direction:column;justify-content:center;padding:60px 10%}
.hero-tx h1{font-size:clamp(52px,5.6vw,96px);line-height:1.04;margin:0 0 22px -.04em}
.ru{font:italic 400 17px var(--serif);color:#5d574e}
.hero-tx .btn{margin-top:36px}
.hero-tx .cap{color:var(--mut);font:400 12px var(--sans);letter-spacing:.06em;margin-top:40px}
.btn{display:inline-flex;align-self:flex-start;align-items:center;gap:12px;padding:17px 34px;background:var(--ink);color:var(--bg);font-size:13px;letter-spacing:.08em;transition:background .3s,gap .3s var(--ease)}.btn:hover{background:#000;gap:18px}
.btn.full{width:100%;justify-content:center}.btn.line{background:none;color:var(--ink);border:1px solid var(--ink)}.btn.line:hover{background:var(--ink);color:var(--bg)}

/* каталог */
.shop{padding:96px 48px 110px;max-width:1500px;margin:0 auto}
.sh-h{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:40px}
.sh-h h2,.about h2{font:400 46px/1 var(--serif)}
.filt{display:flex;gap:6px;flex-wrap:wrap}.filt button{font-size:13px;padding:8px 16px;border:1px solid var(--line);border-radius:30px;transition:all .25s}.filt button.on,.filt button:hover{border-color:var(--ink)}.filt button.on{background:var(--ink);color:var(--bg)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:44px 22px}
.card{text-align:left;display:block}.card[hidden]{display:none}
.card .ph{aspect-ratio:4/5;background:var(--card);position:relative;overflow:hidden}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease),transform 1s var(--ease)}
.card .ph img+img{opacity:0}.card:hover .ph img+img{opacity:1}.card:hover .ph img{transform:scale(1.03)}
.card .quick{position:absolute;left:12px;right:12px;bottom:12px;background:#fcfbf8f2;padding:12px;text-align:center;font-size:12px;letter-spacing:.06em;transform:translateY(130%);transition:transform .4s var(--ease)}.card:hover .quick{transform:none}
.card h3{font:500 14px var(--sans);margin-top:16px;letter-spacing:.01em}.card .row2{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-size:14px;color:var(--mut)}.card .row2 b{color:var(--ink);font-weight:500;white-space:nowrap}.card .row2{gap:10px}
/* распродано: серым, в конце списка, надпись по центру */
.card.sold .ph img{filter:grayscale(1);opacity:.42}.card.sold:hover .ph img{transform:none}.card.sold .ph img+img{display:none}.card.sold h3,.card.sold .row2{opacity:.55}
.soldtag{position:absolute;inset:0;display:grid;place-items:center;font:400 13px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.sizes button:disabled{color:#c4bfb6;background:repeating-linear-gradient(135deg,transparent 0 6px,#efece6 6px 7px);cursor:not-allowed;text-decoration:line-through}
.btn:disabled{background:#cfcac1;color:#fff;cursor:not-allowed}.btn.line:disabled{background:none;color:#b9b3a8;border-color:#d8d3ca}.btn.wait{opacity:.6;cursor:progress}
.spin{display:inline-block;width:12px;height:12px;border:1.5px solid var(--line);border-top-color:var(--ink);border-radius:50%;margin-right:10px;vertical-align:-1px;animation:rot .8s linear infinite}@keyframes rot{to{transform:rotate(360deg)}}
.row.out .th img{filter:grayscale(1);opacity:.5}.ord.cancel{opacity:.6}
.sw{display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid #0002;vertical-align:-1px}

.sh-h .sub{font-size:34px;color:var(--gold);line-height:1;margin-bottom:-4px}

.about{max-width:900px;margin:0 auto;padding:110px 48px;text-align:center}
.about>p{font:400 21px/1.65 var(--serif);margin:28px auto 54px;max-width:44ch}
.facts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;text-align:left;border-top:1px solid var(--line);padding-top:30px}.facts b{display:block;font:500 14px var(--sans);margin-bottom:4px}.facts li{color:var(--mut);font-size:14px}

.foot{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;padding:44px 48px;border-top:1px solid var(--line)}
/* внизу — эмблема «Пастырь с ягнёнком» (фоном, не <img>: без «найти в Яндексе») */
.foot-brand{display:flex;align-items:center;gap:14px}
.emb{display:block;flex:none;width:46px;height:44px;background:url(img/logo-shepherd.svg) center/contain no-repeat}.foot-l{display:flex;gap:26px;font-size:13px;flex-wrap:wrap}

/* бабочка */
/* бабочка-белянка: передние и задние крылья отдельно, задние чуть запаздывают — так машут настоящие */
#fly{position:fixed;left:0;top:0;width:90px;height:76px;z-index:15;pointer-events:none;transform-style:preserve-3d;will-change:transform}
#fly .wing{position:absolute;width:42px;height:31px;transform-style:preserve-3d}#fly .wing img{width:100%;height:100%;max-width:none;-webkit-user-drag:none}
#fly .fore{top:6px}#fly .hind{top:33px;height:30px}
#fly .l{left:3px;transform-origin:100% 50%}#fly .r{left:45px;transform-origin:0 50%}#fly .r img{transform:scaleX(-1)}
#fly .body{position:absolute;left:41px;top:12px;width:8px;height:46px;border-radius:5px 5px 6px 6px;background:radial-gradient(60% 40% at 50% 20%,#6a6157,#2f2b26 70%),#2f2b26;box-shadow:0 0 0 1.5px #3a352f40}
#fly .body i{position:absolute;left:1px;top:-14px;width:6px;height:16px}#fly .body i::before,#fly .body i::after{content:"";position:absolute;bottom:0;width:1px;height:16px;background:#3d3832;transform-origin:bottom}#fly .body i::before{left:1px;transform:rotate(-20deg)}#fly .body i::after{right:1px;transform:rotate(20deg)}
/* панели */
#veil{position:fixed;inset:0;background:#12111044;z-index:30;backdrop-filter:blur(3px);animation:fade .3s}
@keyframes fade{from{opacity:0}}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);background:var(--bg);z-index:31;overflow:auto;padding:48px 42px 60px;animation:slide .45s var(--ease)}
.panel.wide{width:min(1180px,100vw);padding:0}
@keyframes slide{from{transform:translateX(60px);opacity:0}}
.x-close{position:absolute;right:20px;top:14px;font-size:30px;line-height:1;opacity:.55;z-index:3}.x-close:hover{opacity:1}
.panel h2{font:400 32px/1.15 var(--serif);margin-bottom:6px}.panel h3{font:500 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin:30px 0 12px}
/* страница товара */
.pv{display:grid;grid-template-columns:84px 1fr 430px;min-height:100%}
.thumbs{display:flex;flex-direction:column;gap:8px;padding:28px 0 28px 22px}.thumbs button{aspect-ratio:4/5;background:var(--card);opacity:.55;transition:opacity .25s}.thumbs button.on,.thumbs button:hover{opacity:1}.thumbs img{width:100%;height:100%;object-fit:cover}
.main{background:var(--card);margin:28px 22px;position:relative;overflow:hidden;touch-action:pan-y}.main img{width:100%;height:100%;object-fit:cover;animation:fade .4s}
.arr{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:#fffffff2;box-shadow:0 2px 12px #0000001a;display:grid;place-items:center;z-index:2;transition:background .2s,transform .2s}.arr:hover{background:#fff;transform:scale(1.06)}.arr svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.6}
.arr.prev{left:14px}.arr.next{right:14px}
.pw{position:relative}.pw input{padding-right:92px}.pw input::-ms-reveal,.pw input::-ms-clear{display:none}.pw button{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--mut)}.pw button:hover{color:var(--ink)}
.hint{font-size:12px;color:var(--gold);margin-top:6px;min-height:1em}
.forgot{display:inline-block;font-size:12px;color:var(--mut);text-decoration:underline;margin-top:14px}.info{padding:64px 40px 40px 10px}.info .pr{font:400 22px var(--serif);margin:10px 0 0}
.sizes{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.sizes button{height:46px;border:1px solid var(--line);font-size:13px;transition:border-color .2s}.sizes button:hover{border-color:#b9b3a8}.sizes button.on{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.acc{border-top:1px solid var(--line);margin-top:30px}.acc details{border-bottom:1px solid var(--line)}.acc summary{list-style:none;cursor:pointer;padding:16px 0;font-size:14px;display:flex;justify-content:space-between}.acc summary::after{content:"+";font-size:18px;line-height:1}.acc details[open] summary::after{content:"−"}.acc details p,.acc details table{padding:0 0 18px;color:#58534c;font-size:14px}
table{border-collapse:collapse;width:100%}td,th{padding:6px 4px;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.row{display:flex;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}.row .th{width:76px;aspect-ratio:4/5;background:var(--card);flex:none;overflow:hidden}.row .th img{width:100%;height:100%;object-fit:cover}.row .nm{flex:1}.row .nm b{font:500 14px var(--sans);display:block}
.qty{display:flex;align-items:center;gap:10px;font-size:14px}.qty button{width:28px;height:28px;border:1px solid var(--line)}.del{font-size:12px;color:var(--mut);text-decoration:underline;margin-top:4px}
.sum{display:flex;justify-content:space-between;padding:12px 0;font-size:14px}.sum.tot{font:400 22px var(--serif);border-top:1px solid var(--ink);margin-top:8px;padding-top:16px}
label{display:block;font-size:12px;color:var(--mut);margin:16px 0 6px;letter-spacing:.02em}
input,select,textarea{width:100%;font:inherit;padding:14px;border:1px solid var(--line);background:#fff;border-radius:0;transition:border-color .2s}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opts{display:grid;gap:8px}.opt{display:flex;gap:14px;align-items:center;border:1px solid var(--line);padding:15px 16px;cursor:pointer;transition:border-color .2s}.opt:hover{border-color:#b9b3a8}.opt.on{border-color:var(--ink)}.opt i{width:16px;height:16px;border-radius:50%;border:1px solid #b9b3a8;flex:none}.opt.on i{border:5px solid var(--ink)}.opt b{font-weight:500;font-size:14px}.opt span{margin-left:auto;font-size:14px}.opt small{display:block;color:var(--mut);font-size:12px}
.err{color:#b3261e;font-size:13px;margin-top:10px;min-height:1em}.ok{color:#2f6f3e;font-size:13px}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin:16px 0 4px}.tabs button{padding:10px 0;font-size:14px;color:var(--mut);margin-bottom:-1px}.tabs button.on{color:var(--ink);border-bottom:1px solid var(--ink)}
.ord{border:1px solid var(--line);padding:20px;margin-top:14px}.ord .h{display:flex;justify-content:space-between;font-size:14px;gap:10px}
.chk{display:inline-block;font-size:13px;text-decoration:underline;margin-top:6px}
.steps{display:flex;gap:4px;margin:16px 0 8px}.steps i{flex:1;height:3px;background:var(--line)}.steps i.on{background:var(--ink)}
.note{background:var(--card);padding:14px 16px;font-size:13px;color:#5d574e;margin-top:16px}
.docdlg{margin:auto;max-width:min(680px,92vw);max-height:84vh;border:0;padding:46px 42px;background:var(--bg);color:var(--ink);box-shadow:0 30px 80px #0003}.docdlg::backdrop{background:#12111055}.docdlg h2{font:400 28px var(--serif);margin-bottom:6px}
.doc{white-space:pre-line;color:#4a453e;font-size:14px;margin-top:16px;line-height:1.7}
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,30px);opacity:0;background:var(--ink);color:var(--bg);padding:13px 22px;font-size:13px;z-index:40;transition:all .4s var(--ease);pointer-events:none}#toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}.pv{grid-template-columns:1fr}.thumbs{flex-direction:row;padding:14px 16px 0;order:2}.thumbs button{width:64px}.main{margin:0;aspect-ratio:4/5}.info{padding:28px 20px 40px}}
@media (max-width:800px){.hero2{grid-template-columns:1fr;min-height:0}.hero-pic{height:62vh;min-height:0;background-position:50% 62%}.hero-tx{padding:46px 20px 56px}#fly{scale:.7}.grid{grid-template-columns:repeat(2,1fr);gap:30px 12px}.facts{grid-template-columns:1fr}.arr{width:38px;height:38px;margin-top:-19px}}
@media (max-width:640px){.top{padding:14px 16px;grid-template-columns:auto 1fr}.top .nav-l{display:none}.mark{font-size:21px}.top .nav-r{gap:16px;font-size:12px}
  .shop{padding:60px 16px}.sh-h{flex-direction:column;align-items:flex-start}.sh-h h2,.about h2{font-size:34px}.card h3{font-size:13px}.card .quick{display:none}
  #toast{bottom:auto;top:16px;transform:translate(-50%,-30px)}#toast.on{transform:translate(-50%,0)}
  .about{padding:70px 20px}.about>p{font-size:18px}.panel{padding:44px 18px 50px}.panel.wide{padding:0}.two{grid-template-columns:1fr}.foot{padding:32px 16px}}
@media (prefers-reduced-motion:reduce){#fly{display:none}.panel,#veil,.main img{animation:none}html{scroll-behavior:auto}}