/* PannaCotta · исполнения товара (макет). Токены — из pannacotta-brand.css / product-page-v3.css. */

/* ===== Переключатель под названием ===== */
.vx{margin:18px 0 0}
.vx-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.vx-head .eyebrow{margin:0}
.vx-hint{color:var(--muted);font-size:10px}
.vx-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vx-opt{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 13px;align-items:stretch;min-height:100px;padding:0 24px 0 0;text-align:left;border:1px solid var(--line);background:#fff;color:inherit;font:inherit;cursor:pointer;overflow:hidden;transition:border-color .18s,box-shadow .32s var(--ease-out)}
.vx-opt[aria-checked="true"]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.vx-opt:hover:not([aria-checked="true"]){border-color:#b9bbbe}
.vx-opt:hover .vx-img img{transform:scale(1.04)}
.vx-opt:after{content:"";position:absolute;right:11px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--red);opacity:0;transform:scale(.3);transition:opacity .2s,transform .28s var(--ease-out)}
.vx-opt[aria-checked="true"]:after{opacity:1;transform:scale(1)}
.vx-img{display:grid;place-items:center;background:#fff;border-right:1px solid var(--line)}
.vx-img img{display:block;width:100%;height:100%;object-fit:contain;padding:2px;transition:transform .32s var(--ease-out)}
.vx-body{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:11px 0}
.vx-n{color:var(--red);font:700 10px/1 var(--display);letter-spacing:.12em}
.vx-name{display:block;margin-top:1px;color:var(--ink);font:700 20px/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.vx-diff{color:var(--muted);font-size:10.5px;line-height:1.3}
.vx-note{margin:9px 0 0;color:var(--muted);font-size:10px}

/* код исполнения в заголовке и в кнопке */
.hero h1:has([data-vx-h1]) .h1-code{display:inline}
.h1-v{display:inline-block;margin-left:.18em;padding:.06em .3em .08em;background:var(--ink);color:#fff;font-size:.42em;letter-spacing:0;vertical-align:baseline;line-height:1.1}

/* Variant hero */
.hero-photo img{transition:opacity .34s var(--ease-out),transform .6s var(--ease-out)}
.gallery-flag{position:absolute;z-index:4;left:18px;top:16px;padding:7px 11px;border-left:3px solid var(--red);background:var(--ink);color:#fff;font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

/* строки параметров, зависящие от исполнения */
.specs li.is-vx{background:#fff;box-shadow:inset 0 3px 0 var(--red)}
.specs li.is-vx:before{content:counter(spec,decimal-leading-zero) " · " attr(data-vx-tag);color:var(--red)}
.specs li{transition:background-color .6s var(--ease-out)}

/* ===== Чем отличаются исполнения ===== */
.vx-cmp{margin-top:32px;display:grid;grid-template-columns:minmax(260px,.9fr) 1.1fr;gap:64px;align-items:start}
.vx-cmp-head .eyebrow{margin-bottom:10px}
.vx-cmp-head h3{font-size:34px}
.vx-cmp-head p{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.6;max-width:360px}
.vx-table-wrap{border:1px solid var(--line);background:#fff}
.vx-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
.vx-table th{padding:0;text-align:left;border-bottom:1px solid var(--line);vertical-align:bottom}
.vx-table th:first-child{width:24%;padding:14px 20px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--soft)}
.vx-col{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;min-height:62px;padding:12px 20px;border:0;border-left:1px solid var(--line);background:var(--soft);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .2s}
.vx-col b{font:700 19px/1 var(--display);letter-spacing:-.02em}
.vx-col i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vx-col.is-on{background:#fff;box-shadow:inset 0 3px 0 var(--red)}
.vx-col.is-on i{color:var(--red)}
.vx-col:not(.is-on):hover{background:#efefed}
.vx-table td{padding:15px 20px;border-bottom:1px solid var(--line);border-left:1px solid var(--line);vertical-align:top;font:700 16px/1.25 var(--display);letter-spacing:-.015em;transition:background-color .2s}
.vx-table td:first-child{border-left:0;color:var(--muted);font:400 11px/1.5 var(--text);letter-spacing:0}
.vx-table td.is-on{background:#fff}
.vx-table td:not(:first-child):not(.is-on){color:#8d9094}
.vx-table tr:last-child td{border-bottom:0}
.vx-table td small{display:block;margin-top:3px;color:var(--muted);font:400 11px/1.4 var(--text);letter-spacing:0}
.vx-table td.same{color:var(--ink);font:500 12px/1.5 var(--text)}

/* ===== Каталог: карточка с двумя исполнениями ===== */
.product__image{position:relative}
.product__vx{position:absolute;left:0;bottom:0;z-index:2;display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;background:#fff;border-top:1px solid var(--line);border-right:1px solid var(--line)}
.product__vx-pics{display:flex;gap:4px}
.product__vx-pics i{display:block;width:38px;height:38px;border:1px solid var(--line);background:#fff;transition:border-color .18s}
.product__vx-pics i.is-on{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.product__image .product__vx-pics img{display:block;width:100%;height:100%;padding:2px;object-fit:contain;mix-blend-mode:normal}
.product__vx-text{display:flex;flex-direction:column;gap:2px;font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red)}
.product__vx-text span{color:var(--muted);font-weight:600;letter-spacing:.02em;text-transform:none;font-size:10.5px}
.product__image>img{transition:opacity .22s}

/* toast «добавлено в КП» (макет) */

@media(max-width:900px){
  .vx-cmp{grid-template-columns:1fr;gap:22px}
}
@media(max-width:650px){
  .vx{margin-top:14px}
  .vx-list{gap:8px}
  .vx-opt{grid-template-columns:62px minmax(0,1fr);gap:0 8px;min-height:84px;padding-right:16px}
  .vx-img img{padding:1px}
  .vx-name{font-size:17px}
  .vx-diff{font-size:9.5px}
  .vx-opt:after{right:9px;top:9px}
  .vx-body{padding:9px 0;gap:2px}
  .vx-head{margin-bottom:7px}
  .vx-hint{display:none}
  .hero h1{font-size:40px}
  .h1-v{font-size:.5em}
  .vx-cmp-head h3{font-size:28px}
  .vx-table thead{display:none}
  .vx-table,.vx-table tbody,.vx-table tr,.vx-table td{display:block;width:100%}
  .vx-table tr{border-bottom:1px solid var(--line)}
  .vx-table td{padding:6px 14px;border:0;font-size:15px}
  .vx-table td:first-child{padding:12px 14px 2px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .vx-table td:not(:first-child):before{content:attr(data-th);display:inline-block;min-width:88px;color:var(--muted);font:700 9px/1.6 var(--text);letter-spacing:.08em;text-transform:uppercase}
  .vx-table td.is-on:before{color:var(--red)}
  .vx-table td:last-child{padding-bottom:12px}
  .vx-table td.same[colspan]{padding-bottom:12px}
  .vx-table td.same:before{display:none}
}
.vx-opt:focus-visible{outline:3px solid #F3322C;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.vx *, .hero-photo img,.specs li{transition:none!important;animation:none!important}}

.catalog-variants{display:flex;gap:6px;position:absolute;left:14px;bottom:65px}.catalog-variants a{display:flex;align-items:center;gap:5px;padding:4px;border:1px solid var(--line);background:white;color:var(--ink);font-size:11px;text-decoration:none}.catalog-variants img{width:30px;height:30px;object-fit:contain}

/* Studio renders must remain fully visible, including on hover. */
.hero-photo[data-vx-studio="true"]{background:#fff}
.hero-photo[data-vx-studio="true"] img{object-fit:contain;object-position:center;transform:none;padding:20px}
/* WP73: badge belongs to the photo coordinate system, never to the price. */
.product__image,.pick-img{position:relative;overflow:hidden}
.product__vx{max-width:100%;box-sizing:border-box;gap:8px}
.product__vx-pics button{display:block;flex:none;width:38px;height:38px;padding:0;border:1px solid var(--line);background:#fff;cursor:pointer}
.product__vx-pics button.is-on{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.product__vx-pics button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.product__image .product__vx-pics img,.pick-img .product__vx-pics img{display:block;width:100%;height:100%;padding:2px;box-sizing:border-box;object-fit:contain;mix-blend-mode:normal;transform:none}
@media(max-width:600px){.product__vx{padding:6px;gap:6px}.product__vx-pics button{width:32px;height:32px}.product__vx-text span{font-size:10px}}