/* Витрина направлений /custom/ (S14, F182; прототип design/prototypes/production). Токены и кнопки — site.css; цвета, шрифт и логотип
   не меняются (F110, F177). Все фото — рамка 3:4 + object-fit: cover (F196, F1905). Раскладка — по ширине контейнера (@container pd),
   поэтому предпросмотр 390/1440 в панели совпадает с сайтом. Анимация — только transform/opacity; без JS и при reduced motion всё видно сразу. */

.pd-show{padding:96px 0 0;container:pd/inline-size}
.pd-show>.wrap>.head{margin-bottom:28px}
.pd-nav ul{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pd-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;font-size:15px;font-weight:500;background:#fff}
.pd-nav a:hover{border-color:var(--ink)}

.pd{padding:72px 0;border-top:1px solid var(--line);scroll-margin-top:var(--hd-h)}
.pd-show .wrap+.pd{border-top:0}
.pd-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.pd.rev .pd-media{order:2}

/* фото: главное и детали — 3:4 */
.pd-media{min-width:0}
.pd-main{margin:0}
.pd-frame{position:relative;border-radius:14px;overflow:hidden;background:var(--photo-bg);aspect-ratio:3/4}
.pd-frame img{width:100%;height:100%;object-fit:cover}
.pd-main figcaption,.pd-det figcaption{font-size:14px;color:var(--mut);margin-top:10px;line-height:1.4}
.pd-det{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pd-det figure{margin:0}
.pd-det-ph{aspect-ratio:3/4;overflow:hidden;border-radius:10px;background:var(--photo-bg)}
.pd-det-ph img{width:100%;height:100%;object-fit:cover}
.pd-det figcaption{font-size:13px;margin-top:6px}

/* точки на фото: ставит pd.js (data-x/data-y → left/top через CSSOM); без JS точек нет */
.hs{display:none;position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;padding:0;border-radius:50%;background:transparent;z-index:1}
.js .hs{display:block}
.js .hs[hidden]{display:none}
.hs::before{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 2px #fff}
.hs::after{content:"";position:absolute;inset:7px;border-radius:50%;border:2px solid var(--teal);opacity:0}
.hs-l{position:absolute;left:50%;bottom:calc(100% - 4px);transform:translate(-50%,6px);white-space:nowrap;background:#fff;color:var(--ink);font-size:13px;font-weight:600;line-height:1.2;padding:6px 10px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.hs.on .hs-l,.hs:hover .hs-l,.hs:focus-visible .hs-l{opacity:1;transform:translate(-50%,0)}
.hs.flip .hs-l{bottom:auto;top:calc(100% - 4px)}
.hs.left .hs-l{left:0;transform:translate(0,6px)}
.hs.left.on .hs-l,.hs.left:hover .hs-l,.hs.left:focus-visible .hs-l{transform:none}
.hs.right .hs-l{left:auto;right:0;transform:translate(0,6px)}
.hs.right.on .hs-l,.hs.right:hover .hs-l,.hs.right:focus-visible .hs-l{transform:none}
.hs.ping::after{animation:pd-ping .9s ease-out 1}
@keyframes pd-ping{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.9)}}

/* текст блока */
.pd-body .kicker{display:flex;align-items:center;gap:10px}
.pd-n{display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 6px;border-radius:6px;background:var(--teal);color:var(--ink);font-size:13px;font-weight:700}
.pd-body h2{font-size:clamp(28px,3vw,40px)}
.pd-lead{margin-top:16px;color:var(--ink2);font-size:18px}
.pd-facts{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pd-facts li{display:inline-flex;align-items:center;gap:6px;background:var(--teal-bg);color:var(--teal-t);font-size:14px;font-weight:600;border-radius:6px;padding:6px 10px}
.pd-facts svg{width:15px;height:15px;flex:none}
.pd-how-h{margin-top:24px;font-size:15px;font-weight:600;color:var(--mut)}
.pd-how{list-style:none;counter-reset:s;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pd-how li{counter-increment:s;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px 14px;display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--mut);line-height:1.35}
.pd-how li::before{content:counter(s);font-size:12px;font-weight:700;color:var(--teal-t)}
.pd-how b{color:var(--ink);font-size:16px;font-weight:600}

/* калькулятор */
.pd-calc,.pd-none{margin-top:24px;background:var(--bg);border-radius:14px;padding:24px}
.pd-calc-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pd-calc h3,.pd-none h3{font-size:20px}
.pd-none p{margin:8px 0 16px;color:var(--ink2)}
.pd-tier{font-size:13px;font-weight:700;background:var(--ink);color:#fff;border-radius:6px;padding:4px 10px;white-space:nowrap}
.pd-tier:empty{display:none}
.pd-tier.bump{animation:pd-bump .4s ease-out 1}
@keyframes pd-bump{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.pd-demo{margin-top:12px;background:var(--amber-bg);color:var(--amber);font-size:13px;line-height:1.4;border-radius:8px;padding:8px 12px}
.pd-set{margin-top:12px;font-size:14px;color:var(--mut)}
.pd-set:empty{display:none}
.pd-f{border:0;margin:16px 0 0;padding:0;min-width:0}
.pd-f legend,.pd-f>label{display:block;font-size:14px;font-weight:600;margin-bottom:8px;padding:0}
.pd-f .hint{margin-top:4px}
.pd-seg{display:flex;flex-wrap:wrap;gap:6px}
.pd-seg label{position:relative}
.pd-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pd-seg span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;font-size:15px;font-weight:500;cursor:pointer}
.pd-seg input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.pd-seg input:focus-visible+span{outline:2px solid var(--teal-d);outline-offset:2px}
.pd-flag{display:flex;align-items:center;gap:10px;margin-top:12px;min-height:44px;font-size:15px;cursor:pointer}
.pd-flag input{width:22px;height:22px;accent-color:var(--teal-d);margin:0;flex:none}
.pd-flag small{color:var(--mut);font-size:13px}
.pd-num{display:flex;align-items:center;gap:8px;max-width:240px;background:#fff;border:1.5px solid var(--line-strong);border-radius:8px}
.pd-num input{flex:1;min-width:0;border:0;background:transparent;font:500 17px/1 Onest,sans-serif;padding:11px 12px;outline:0}
.pd-num span{padding-right:12px;color:var(--mut);font-size:15px}
.pd-num:focus-within{border-color:var(--teal-d)}
.pd-qty{display:flex;align-items:center;background:#fff;border:1.5px solid var(--line-strong);border-radius:8px;max-width:240px}
.pd-qty:focus-within{border-color:var(--teal-d);outline:2px solid var(--teal-d);outline-offset:1px}
.pd-qty input{flex:1;min-width:0;border:0;background:transparent;font:600 20px/1 Onest,sans-serif;padding:12px 14px;outline:0}
.pd-qty span{padding-right:14px;color:var(--mut);font-size:15px}
.pd-qty.bad,.pd-num.bad{border-color:var(--red)}
.pd-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pd-quick:empty{display:none}
.pd-quick button{min-height:36px;min-width:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:14px}
.pd-quick button[aria-pressed=true]{border-color:var(--ink);font-weight:600}
.pd-err{color:var(--red);font-size:14px;margin-top:6px}
.pd-err:empty{display:none}
.pd-steps-bar{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
.pd-steps-bar[hidden]{display:none}
.pd-steps-bar li{background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 4px;text-align:center;font-size:12px;line-height:1.3;color:var(--mut);transition:background-color .2s,border-color .2s}
.pd-steps-bar b{display:block;color:var(--ink);font-size:13px;font-weight:600}
.pd-steps-bar li.on{background:var(--teal);border-color:var(--teal);color:var(--ink)}
.pd-out{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;margin:18px 0 0}
.pd-out div{background:#fff;border-radius:10px;padding:12px 14px}
.pd-out dt{font-size:13px;color:var(--mut)}
.pd-out dd{margin:2px 0 0;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pd-out .tot dd{font-size:26px}
.pd-next{margin-top:10px;font-size:14px;color:var(--teal-t);font-weight:600}
.pd-next:empty,.pd-sample:empty{display:none}
.pd-sample{margin-top:6px;font-size:14px;color:var(--ink2)}
.pd-note{margin-top:12px;font-size:13px;color:var(--mut)}
.pd-send{margin-top:14px;width:100%}

.pd-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.pd-zero{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;background:var(--amber-bg);border-radius:10px;padding:14px 16px}
.pd-zero p{font-weight:600;color:var(--amber);flex:1 1 220px}
.pd-body>.more{margin-top:18px}

.pd-also{margin:24px 0 96px;padding:24px 28px;border:1px solid var(--line);border-radius:14px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.pd-also h3{font-size:18px}
.pd-also ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 20px}
.pd-also a{display:inline-flex;align-items:center;min-height:44px;color:var(--teal-t);font-weight:500}
.pd-also a:hover{text-decoration:underline}

/* «Расчёт прикреплён» в форме заявки */
.pd-attached{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;background:var(--teal-bg);color:var(--teal-t);border-radius:8px;padding:10px 12px;font-size:14px;font-weight:600}
.pd-attached[hidden]{display:none}
.pd-attached button{margin-left:auto;min-height:36px;border:1px solid currentColor;border-radius:999px;background:#fff;color:var(--teal-t);padding:0 12px;font-size:13px}

/* сценарий: 1) появление фото, 2) точки по очереди. Класс pre ставит pd.js — без JS всё видно */
.js .pd.pre .pd-frame{opacity:0;transform:scale(.92)}
.js .pd.pre .pd-frame img{transform:scale(1.08)}
.js .pd.pre .hs{opacity:0;transform:scale(.6)}
.js .pd .pd-frame{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .pd .pd-frame img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.js .pd .hs{transition:opacity .35s,transform .35s cubic-bezier(.3,1.4,.5,1)}
.js .pd.pre .pd-det li{opacity:0;transform:translateY(12px)}
.js .pd .pd-det li{transition:opacity .5s .35s,transform .5s .35s}

@media (prefers-reduced-motion:reduce){
  .js .pd.pre .pd-frame,.js .pd.pre .pd-frame img,.js .pd.pre .hs,.js .pd.pre .pd-det li{opacity:1;transform:none}
  .pd *,.pd *::before,.pd *::after{transition:none!important;animation:none!important}
}

@container pd (max-width:1000px){
  .pd-g{gap:36px}
  .pd-out{grid-template-columns:minmax(0,1fr)}
}
@container pd (max-width:760px){
  .pd-nav ul{flex-wrap:nowrap;overflow-x:auto;margin-right:-20px;padding-right:20px;scrollbar-width:none}
  .pd-nav li{flex:none}
  .pd{padding:48px 0}
  .pd-g{display:flex;flex-direction:column;gap:20px}
  .pd-media{display:contents}
  .pd-main{order:0}.pd-body{order:1}.pd-det{order:2;margin-top:0}
  .pd-det{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-right:-20px;padding-right:20px}
  .pd-det li{flex:0 0 46%;scroll-snap-align:start}
  .pd-how{grid-template-columns:minmax(0,1fr);gap:6px}
  .pd-how li{flex-direction:row;align-items:baseline;gap:8px;padding:10px 12px}
  .pd-calc,.pd-none{padding:18px 16px}
  .pd-out{grid-template-columns:1fr 1fr}
  .pd-out dd{font-size:19px}.pd-out .tot dd{font-size:21px}
  .pd-steps-bar{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
  .pd-cta .btn,.pd-zero .btn{flex:1 1 100%}
  .pd-also{padding:18px;margin-bottom:64px}
}
@media (max-width:760px){.pd-show{padding-top:64px}}

/* предпросмотр блока в панели (/panel/production/{id}/preview): рамки шириной 390 и 1440 — раскладка по @container, как на сайте */
.pv-page{background:var(--bg)}
.pv-bar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;justify-content:space-between;padding:14px 20px;background:#fff;border-bottom:1px solid var(--line);font-size:15px}
.pv-h{margin:28px 20px 12px;font-size:18px}
.pv{background:#fff;box-shadow:0 0 0 1px var(--line)}
.pv .pd-show{padding:0}
.pv-390{width:390px;max-width:100%;margin:0 20px}
.pv-scroll{overflow-x:auto;margin:0 20px 40px}
.pv-1440{width:1440px}

/* D-005: на телефоне поля страницы 16 px — лента миниатюр и навигация уходят к краю экрана, а не за него */
@media (max-width:700px){
  .pd-nav ul,.pd-det{margin-right:-16px;padding-right:16px}
}
/* D-006: на сенсорном экране кнопки быстрого выбора количества и «Убрать расчёт» — не меньше 44 px */
@media (pointer:coarse),(max-width:700px){
  .pd-quick button,.pd-attached button{min-height:44px}
  .pd-nav a,.pd-also a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}