/* Apex Bio Glass · merch.css: карточка мерча (templates/merch.php) поверх product.css (05.10.2026).
   ПК — большой кадр карточки товара как есть (во всю высоту, края плавно растворяются в фоне; Рахману «нравилось
   приближенное»), но на фото ничего не лежит: цена и «В корзину» (.m-pay) стоят в правой колонке под размерами,
   на фото только точки по нижнему краю, где кадр уже растворился. Телефон: имя над фото, фото целиком 3:4, ниже размеры,
   цена и кнопка. Фото лежат стопкой и сменяются растворением (merch.js). */
.merch-p .m-stage .m-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:0;
  transition:opacity .7s var(--e-out);view-transition-name:none}
.merch-p .m-stage .m-pic.on{opacity:1}
.merch-p .m-dots{position:absolute;z-index:3;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:8px;pointer-events:none}
.merch-p .m-dots button{pointer-events:auto;width:8px;height:8px;padding:0;border:0;border-radius:50%;background:oklch(100% 0 0 / .35);
  cursor:pointer;transition:width var(--t-mid) var(--e-out),background var(--t-mid) var(--e-out)}
.merch-p .m-dots button.on{width:22px;border-radius:4px;background:#fff}
.merch-p .m-sizes{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.merch-p .m-size{min-width:68px;height:48px;padding:0 var(--s-4);border:1px solid var(--line-2);border-radius:var(--pill);background:var(--bg-2);
  color:var(--text);font:600 .95rem/1 var(--fb);letter-spacing:.04em;cursor:pointer;transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast)}
.merch-p .m-size:hover{border-color:var(--sky-2)}
.merch-p .m-size.on{border-color:var(--sky);background:oklch(62% .14 240 / .16);color:#fff}
.merch-p .m-size:disabled{opacity:.4;cursor:not-allowed}
.merch-p .p-buy>.p-fh{margin:0}
/* цена и кнопки в правой колонке */
.merch-p .m-pay{position:static;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-4);
  padding:16px 16px 16px 22px;border:1px solid var(--glass-line);border-radius:var(--r-3);background:oklch(15% .035 250 / .5)}
.merch-p .m-pay .p-price-row{display:grid;gap:6px;align-items:start}
.merch-p .m-pay .p-price{font-size:clamp(1.7rem,2.4vw,2.2rem)}
.merch-p .m-pay .p-cta{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s-2)}
.merch-p .m-pay .p-cta .btn{flex:none;height:48px;padding:0 var(--s-5)}
.merch-p .m-desc{max-width:780px;margin:var(--s-7) 0;padding:0}
.merch-p .m-desc h2{margin:0 0 var(--s-4);font:400 var(--fs-3)/1.1 var(--fd);letter-spacing:.04em;text-transform:uppercase}
.merch-p .m-desc p{margin:0 0 var(--s-3);color:var(--muted);line-height:1.6}
@media (max-width:980px){
  .merch-p .p-top{grid-template-areas:"crumbs" "head" "gal" "buy"}
  .merch-p .p-head{grid-area:head;position:static;z-index:auto;margin:0 0 var(--s-4);padding:0}
  .merch-p .p-head h1,.merch-p .p-head .p-task,.merch-p .p-head .p-sub{text-shadow:none}
  .merch-p .p-top .p-gal{position:relative;top:auto;height:auto;margin-inline:0;display:flex;flex-direction:column;gap:var(--s-3)}
  .merch-p .p-gal .p-stage{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/4;-webkit-mask-image:none;mask-image:none;
    border-radius:var(--r-3);overflow:hidden;background:var(--bg-2)}
  .merch-p .p-gal .p-stage::after{display:none}
  .merch-p .m-stage .m-pic{object-position:50% 50%}
  .merch-p .m-dots{position:static}
  .merch-p .m-dots button{background:oklch(100% 0 0 / .3)}
  .merch-p .m-pay .p-cta #pAsk{display:none}   /* мессенджеры есть ниже, в «Коротко о товаре» */
  .merch-p .m-pay{padding:12px 12px 12px 18px}
  .merch-p .m-desc{margin:var(--s-6) 0}
}
@media (prefers-reduced-motion:reduce){ .merch-p .m-stage .m-pic,.merch-p .m-dots button{transition:none} }