/* Карточки товаров (views/constructor/productCard.php): сетка карточек и окно «Подробнее» (blocks/productCard.js). */
.cb-product {overflow: hidden; isolation: isolate}
.cb-product > * + * {margin-top: 0} /* сайт: article > * + * {margin-top: 1em} */

/* Фото товара: ссылка на крупное фото (Fancybox) */
.cb-product__media {position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cb-accent-soft); cursor: zoom-in}
.cb-product__media picture {height: 100%}
.cb .cb-product__img {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease}
.cb-product:hover .cb-product__img {transform: scale(1.04)}
.cb-product__media::after {content: ""; position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .92) no-repeat center / 18px 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316232d' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E"); box-shadow: 0 6px 16px rgba(10, 18, 26, .18); opacity: 0; transform: scale(.8); transition: opacity var(--cb-transition), transform var(--cb-transition)}
.cb-product__media:hover::after, .cb-product__media:focus-visible::after {opacity: 1; transform: none}
.cb .cb-product__media:focus-visible {outline-offset: -3px; border-radius: 0}
.cb-product__media--empty {cursor: default; background: var(--cb-accent-soft) no-repeat center / 48px 48px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9aa6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m21 16-5-5-8 8'/%3E%3C/svg%3E")}
.cb-product__media--empty::after {content: none}

/* Текст */
.cb-product__body {display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; min-width: 0; padding: clamp(20px, 2vw, 24px)}
.cb .cb-product__name {font-size: clamp(18px, 1.5vw, 20px); letter-spacing: -.01em; text-wrap: balance; hyphens: auto}
.cb .cb-product__short {color: var(--cb-fg); font-size: 15px}

/* Характеристики: с иконками или списком «Название … значение» */
.cb .cb-product__features {display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.45}
.cb-product__feature {display: flex; align-items: center; gap: 4px 10px; min-width: 0}
.cb-product__feature-icon {display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: var(--cb-accent-soft); color: var(--cb-accent); font-size: 18px; line-height: 1}
.cb-product__feature-name {color: var(--cb-fg-muted)}
.cb-product__feature-value {min-width: 0; color: var(--cb-heading); font-weight: 600}
.cb-product__features--icons .cb-product__feature-name + .cb-product__feature-value {margin-left: -6px}
.cb .cb-product__features--list {gap: 0; border-top: 1px solid var(--cb-line)}
.cb-product__features--list .cb-product__feature {justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--cb-line)}
.cb-product__features--list .cb-product__feature-value {text-align: right}
.cb-product__features--list .cb-product__colon {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap}

/* Цена и кнопки прижаты к низу — карточки одной высоты в ряду */
.cb-product__foot {display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding-top: 14px}
.cb .cb-product__price {display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; color: var(--cb-heading); line-height: 1.1}
.cb-product__price b {font-size: clamp(22px, 2vw, 26px); font-weight: 800; letter-spacing: -.02em}
.cb-product__currency {color: var(--cb-fg-muted); font-size: 15px; font-weight: 600}
.cb-product__actions {display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px}
.cb-product__actions .cb-btn {min-height: 46px; padding: 0 16px; font-size: 14px}

/* ---- Окно «Подробнее» ---- */
.cb-product-modal {position: fixed; inset: 0; z-index: 99990; display: flex; align-items: center; justify-content: center; padding: 24px}
.cb-product-modal[hidden] {display: none}
.cb-product-modal__backdrop {position: absolute; inset: 0; background: rgba(10, 18, 26, .72); animation: cb-product-fade .2s ease}
.cb-product-modal__panel {position: relative; width: min(980px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; border-radius: calc(var(--cb-radius) * 1.4); background: var(--cb-white); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); color: var(--cb-fg); animation: cb-product-in .25s ease}
@supports (max-height: 100dvh) {
    .cb-product-modal__panel {max-height: calc(100dvh - 48px)}
}
.cb .cb-product-modal__panel:focus-visible, .cb-product-modal__panel:focus {outline: none}
.cb-product-modal__close {position: sticky; top: 12px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 12px 12px -56px auto; padding: 0; border: 0; border-radius: 50%; background: var(--cb-alt); color: var(--cb-ink); font-size: 28px; line-height: 1; cursor: pointer; transition: background var(--cb-transition), color var(--cb-transition)}
.cb-product-modal__close:hover {background: var(--cb-primary); color: var(--cb-on-primary)}
.cb-product-modal__grid {display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 3vw, 40px); align-items: start; padding: clamp(24px, 3vw, 36px)}
.cb-product-modal__grid--text {grid-template-columns: minmax(0, 1fr); max-width: 760px}
.cb-product-modal__media {position: sticky; top: 0}
.cb-product-modal__main {display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--cb-radius); background: var(--cb-alt); cursor: zoom-in}
.cb-product-modal__main picture, .cb-product-modal__thumb picture {height: 100%}
.cb .cb-product-modal__img, .cb .cb-product-modal__thumb-img {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease}
.cb-product-modal__main:hover .cb-product-modal__img, .cb-product-modal__thumb:hover .cb-product-modal__thumb-img {transform: scale(1.04)}
.cb .cb-product-modal__thumbs {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none}
.cb-product-modal__thumb {display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--cb-radius-sm); background: var(--cb-alt); cursor: zoom-in}
.cb .cb-product-modal__main:focus-visible, .cb .cb-product-modal__thumb:focus-visible {outline-offset: 2px}
.cb-product-modal__info {min-width: 0; padding-top: 4px}
.cb .cb-product-modal__title {margin: 0; padding-right: 48px; color: var(--cb-heading); font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; hyphens: auto}
.cb .cb-product-modal__price {margin-top: 14px}
.cb .cb-product-modal__short {margin-top: 12px; color: var(--cb-fg); font-size: 16px}
.cb .cb-product__features--modal {margin-top: 20px}
.cb-product-modal__text {margin-top: 22px; font-size: 15px}
.cb-product-modal__text > :first-child {margin-top: 0}
.cb .cb-product-modal__actions {margin-top: 26px}

@keyframes cb-product-in {
    from {opacity: 0; transform: translateY(18px)}
}
@keyframes cb-product-fade {
    from {opacity: 0}
}

@media (max-width: 767px) {
    .cb-product-modal {align-items: flex-end; padding: 0}
    .cb-product-modal__panel {width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0}
    @supports (max-height: 100dvh) {
        .cb-product-modal__panel {max-height: 92dvh}
    }
    .cb-product-modal__grid {grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 18px 28px}
    .cb-product-modal__media {position: static}
    .cb-product-modal__close {top: 10px; margin: 10px 10px -54px auto; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 14px rgba(0, 0, 0, .16)}
    .cb .cb-product-modal__title {padding-right: 0}
    .cb-product-modal__grid--text .cb-product-modal__title {padding-right: 48px}
    .cb-product-modal__actions .cb-btn {width: 100%}
}
@media (max-width: 575px) {
    .cb-product__media::after {opacity: 1; transform: none; width: 34px; height: 34px; right: 10px; top: 10px; background-size: 16px 16px}
}
@media (hover: none) {
    .cb-product__media::after {opacity: 1; transform: none}
}