.pp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);padding-top:var(--space-5);align-items:start}
.pp-gal{position:sticky;top:88px;display:flex;flex-direction:column;gap:var(--space-3)}
.pp-main{position:relative;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);aspect-ratio:1;overflow:hidden}
.pp-main img{width:100%;height:100%;object-fit:contain;padding:6%}
.pp-nav{position:absolute;top:50%;translate:0 -50%;width:44px;height:44px;border-radius:999px;background:oklch(1 0 0 / .9);border:1px solid var(--color-border);display:grid;place-items:center;color:var(--color-text)}
.pp-nav:hover{background:#fff;border-color:var(--color-text)}
.pp-nav--prev{left:.75rem}.pp-nav--next{right:.75rem}
.pp-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:var(--space-2)}
.pp-thumbs button{aspect-ratio:1;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:#fff;padding:4px}
.pp-thumbs button img{width:100%;height:100%;object-fit:contain}
.pp-thumbs button[aria-pressed=true]{border-color:var(--color-text);box-shadow:inset 0 0 0 1px var(--color-text)}
.pp-info{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.pp-art{font-size:var(--text-sm);color:var(--color-muted);font-variant-numeric:tabular-nums}
.pp-info h1{font-size:var(--text-xl);font-weight:750;letter-spacing:-.01em;margin-top:calc(-1 * var(--space-2))}
.pp-price{display:flex;align-items:baseline;gap:.6rem}
.pp-price b{font-size:clamp(1.75rem,1.4rem + 1.2vw,2.4rem);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pp-price span{color:var(--color-muted);font-size:var(--text-sm)}
.pp-specs{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.pp-specs li{font-size:var(--text-xs);font-weight:600;padding:.35rem .65rem;border-radius:999px;background:var(--color-surface-2)}
.pp-label{font-size:var(--text-sm);font-weight:600}
.pp-label span{color:var(--color-muted);font-weight:400}
.pp-sw{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.6rem}
.pp-sw button{width:34px;height:34px;border-radius:999px;border:1px solid oklch(0.25 0.02 260 / .2);box-shadow:inset 0 0 0 2px #fff;position:relative}
.pp-sw button[aria-pressed=true]{outline:2px solid var(--color-text);outline-offset:2px}
.pp-sw button.nost::after{content:"";position:absolute;inset:45% -2px auto;height:2px;background:oklch(0.25 0.02 260 / .55);rotate:-45deg}
.pp-order{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.ord{font-size:var(--text-sm);font-variant-numeric:tabular-nums}
.ord th{font-size:var(--text-xs);font-weight:600;color:var(--color-muted);text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--color-border)}
.ord td{padding:.35rem .5rem;border-bottom:1px solid var(--color-border)}
.ord tr:last-child td{border-bottom:none}
.ord td:first-child{font-weight:600;white-space:nowrap}
.ord td:first-child span{color:var(--color-muted);font-weight:400;margin-left:.3rem}
.ord td.lng{white-space:normal;font-weight:500;font-size:var(--text-sm);line-height:1.35;min-width:6rem}
/* остатки складов — по центру колонок, чтобы не сливались с размерами */
.pp-order .ord th:nth-child(2),.pp-order .ord th:nth-child(3),.pp-order .ord td:nth-child(2),.pp-order .ord td:nth-child(3){text-align:center}
.pp-order .ord th:nth-child(3),.pp-order .ord td:nth-child(3){padding-right:.5rem}
.ord .z{color:oklch(0.25 0.02 260 / .35)}
.qty{display:inline-flex;align-items:center;border:1px solid oklch(0.25 0.02 260 / .2);border-radius:var(--radius-sm);background:#fff}
.qty button{width:32px;height:36px;font-size:1.1rem;color:var(--color-muted)}
.qty button:hover{color:var(--color-text)}
.qty input{width:64px;height:36px;border:none;text-align:center;font-variant-numeric:tabular-nums;background:transparent;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.qty input:focus{outline:none}
.qty input::placeholder{color:oklch(0.25 0.02 260 / .42);font-weight:400}
.qty input:focus::placeholder{color:transparent}
.qty:focus-within{border-color:var(--color-primary)}
.ord tr.over .qty{border-color:var(--color-primary)}
.ord tr.off{opacity:.5}
.pp-sum{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;padding-top:var(--space-2);border-top:1px solid var(--color-border)}
.pp-sum span{font-size:var(--text-sm);color:var(--color-muted)}
.pp-sum span b{color:var(--color-text);font-size:var(--text-base)}
.pp-sum .btn{min-width:180px}
.pp-sum .btn:disabled{opacity:.45;cursor:not-allowed}
.pp-msg{font-size:var(--text-sm);min-height:1.2em;color:oklch(0.42 0.1 150)}
.pp-msg.warn{color:var(--color-primary)}
.pp-emb{display:flex;justify-content:space-between;gap:var(--space-3);align-items:center;padding:.8rem 1rem;border-radius:var(--radius-md);background:var(--color-bg);text-decoration:none;color:var(--color-text);font-size:var(--text-sm)}
.pp-emb:hover{background:var(--color-surface-2)}
.pp-sec{margin-top:var(--space-12)}
.pp-sec h2{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-3)}
.pp-sec__top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-2)}
.pp-sec__top h2{margin:0}
.pp-note{font-size:var(--text-sm);color:var(--color-muted);margin-bottom:var(--space-3)}
.seg{display:inline-flex;background:var(--color-surface-2);border-radius:999px;padding:3px}
.seg button{min-height:36px;padding:0 .9rem;border-radius:999px;font-size:var(--text-xs);font-weight:600;color:var(--color-muted)}
.seg button[aria-pressed=true]{background:#fff;color:var(--color-text);box-shadow:var(--shadow-sm)}
.mx-wrap{overflow-x:auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.mx{font-size:var(--text-sm);font-variant-numeric:tabular-nums;min-width:640px}
.mx th,.mx td{padding:.5rem .6rem;text-align:center;border-bottom:1px solid var(--color-border);white-space:nowrap}
.mx thead th{font-size:var(--text-xs);color:var(--color-muted);font-weight:600;line-height:1.25}
.mx thead th small{display:block;font-weight:400}
.mx th[scope=row]{text-align:left;font-weight:500;position:sticky;left:0;background:var(--color-surface);z-index:1}
.mx th[scope=row] i{display:inline-block;width:14px;height:14px;border-radius:999px;vertical-align:-2px;margin-right:.5rem;border:1px solid oklch(0.25 0.02 260 / .2)}
.mx tbody tr{cursor:pointer}
.mx tbody tr:hover td,.mx tbody tr:hover th{background:#faf8f4}
.mx tbody tr.sel td,.mx tbody tr.sel th{background:oklch(0.95 0.03 25)}
.mx tbody tr:last-child td,.mx tbody tr:last-child th{border-bottom:none}
.mx td.z{color:oklch(0.25 0.02 260 / .3)}
.mx td.t,.mx th.t{font-weight:700}
.pp-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(1.5rem,3vw,3rem)}
.props{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.25rem;font-size:var(--text-sm);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5)}
.props dt{color:var(--color-muted)}
.props dd{font-weight:500}
.pdesc{font-size:var(--text-sm);line-height:1.7;max-width:72ch;position:relative}
.pdesc p+p,.pdesc ul,.pdesc p+ul{margin-top:.7rem}
.pdesc ul{padding-left:1.2rem}
.pdesc.clip{max-height:15rem;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent)}
.pdesc span[style],.pdesc font{font-size:inherit!important;color:inherit!important}
.chart{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:var(--space-6);align-items:start;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5)}
.chart img{width:100%;height:auto;mix-blend-mode:multiply}
.chart__t{overflow-x:auto}
.chart .ord td,.chart .ord th{text-align:center}
.chart .ord td:first-child,.chart .ord th:first-child{text-align:left}
.chart.noimg{grid-template-columns:1fr}
.pgrid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){
  .pp{grid-template-columns:minmax(0,1fr)}
  .pp-gal{min-width:0}
  .pp-gal{position:static}
  .pp-two{grid-template-columns:minmax(0,1fr)}
  .pgrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .pp-main{border-radius:var(--radius-md)}
  .pp-thumbs{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}
  .pp-order{padding:var(--space-4)}
  .ord th,.ord td{padding:.35rem .3rem}
  .qty button{width:24px}.qty input{width:52px;font-size:.8125rem}
  .pp-sum .btn{width:100%}
  .chart{grid-template-columns:1fr}
  .chart img{max-width:220px;margin-inline:auto}
  .pgrid--4{gap:var(--space-2)}
}
.pp-msg a{color:inherit;font-weight:600}
@media (max-width:380px){
  .pp-order{padding:var(--space-3)}
  .ord th,.ord td{padding:.35rem .2rem}
  .ord td:first-child{white-space:normal}
  .ord td.lng{min-width:0;font-size:.75rem;overflow-wrap:anywhere}
  .ord td:first-child span{display:block;margin-left:0;font-size:.75rem}
  .qty button{width:20px}.qty input{width:44px;font-size:.75rem;padding:0}
}

.ord .res{display:block;white-space:nowrap;font-size:.72rem;font-weight:400;line-height:1.1;margin-top:1px;color:oklch(0.52 0.11 60);cursor:help}
.ord td:first-child .res--sz{display:block;margin:1px 0 0;font-weight:400}
.ord th.resh,.ord td.resd{text-align:center;color:oklch(0.52 0.11 60)}
.ord td.resd.z{color:oklch(0.25 0.02 260 / .35)}
.pp-resnote{font-size:var(--text-xs);color:var(--color-muted);margin-top:var(--space-2)}
.pp-resnote b{color:oklch(0.52 0.11 60);font-weight:600}
.ord.no-o th:nth-child(3),.ord.no-o td:nth-child(3),.ord.no-k th:nth-child(2),.ord.no-k td:nth-child(2){display:none}
.pp-thumbs[hidden]{display:none}