/* Card geometry and type follow Figma 2322:1886; icons/content belong to each product. */
.tpx-product-features {
    min-width: 0;
    width: 100%;
    margin-block: 16px;
    font-family: var(--wp--preset--font-family--aktiv-grotesk, aktiv-grotesk, sans-serif);
}
.tpx-product-features-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.tpx-product-features .tpx-product-features-heading {
    margin: 0;
    color: #0d0f12;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}
.tpx-product-features .tpx-feature-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    list-style: none;
    margin: 0;
    padding: 6px 0 12px;
}
.tpx-product-features .tpx-feature-card {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 min(310px, 85%);
    min-height: 200px;
    padding: 24px 22px;
    border-radius: 8px;
    background: var(--wp--preset--color--smoke, #f2f2f2);
    scroll-snap-align: start;
    transition: transform .3s ease;
}
.tpx-feature-card article { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tpx-feature-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; box-sizing: border-box; border: 1px solid #e8e8ed; border-radius: 999px; }
.tpx-feature-icon img { display: block; width: 24px; height: 24px; object-fit: contain; }
.tpx-product-features .tpx-feature-card h3 { margin: 0; color: #252525; font-size: 20px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.tpx-product-features .tpx-feature-card p { margin: 0; color: var(--wp--preset--color--grey-2, #535353); font-size: 16px; font-weight: 400; line-height: 1.3334; white-space: pre-line; overflow-wrap: anywhere; }
.tpx-feature-open { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; background: transparent; cursor: pointer; padding: 0; color: inherit; }
.tpx-feature-open:focus-visible,
.tpx-feature-track:focus-visible,
.tpx-feature-navigation button:focus-visible,
.tpx-feature-close:focus-visible { outline: 2px solid var(--wp--preset--color--red, #ff0033); outline-offset: -3px; }
.tpx-feature-navigation { display: flex; flex-shrink: 0; justify-content: flex-end; gap: 8px; }
.tpx-feature-navigation[hidden] { display: none; }
.tpx-feature-navigation button,
.tpx-feature-close { display: inline-flex; align-items: center; justify-content: center; border: 0; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--wp--preset--color--warm-grey, #e6e6e6); color: #252525; font: 28px/1 sans-serif; cursor: pointer; }
/* Same two-border chevron as accordion.css, scaled down for gallery controls. */
.tpx-feature-navigation button::before {
    content: '';
    width: 8px;
    height: 8px;
    border-color: currentColor;
    border-style: solid;
    border-width: 2px 2px 0 0;
    transform: translateX(-2px) rotate(45deg);
}
.tpx-feature-navigation .tpx-feature-prev::before { transform: translateX(2px) rotate(-135deg); }
.tpx-feature-navigation button:disabled { opacity: .35; cursor: default; }
.tpx-feature-dialog { box-sizing: border-box; width: min(760px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 16px; background: #fff; color: #0d0f12; overflow-y: auto; overscroll-behavior: contain; }
.tpx-feature-dialog::backdrop { background: rgb(0 0 0 / .45); backdrop-filter: blur(5px); }
.tpx-feature-dialog[open] { animation: tpx-feature-appear .3s ease both; }
.tpx-feature-dialog-inner { position: relative; padding: 48px; }
.tpx-feature-close { position: sticky; top: 16px; float: right; margin: -24px -24px 0 12px; z-index: 1; }
.tpx-feature-dialog h2 { margin: 24px 0; font-size: clamp(24px, 4vw, 36px); line-height: 1.15; font-weight: 600; }
.tpx-feature-dialog-inner > .tpx-feature-close + h2 { margin-top: 0; }
.tpx-feature-dialog .tpx-feature-dialog-content { padding: 0; font-size: 16px; }
html.tpx-feature-modal-open { overflow: hidden; }
@media (hover: hover) {
    .tpx-feature-card[data-has-popup="true"]:hover { transform: translateY(-3px); }
    .tpx-feature-navigation button:not(:disabled):hover,
    .tpx-feature-close:hover { background: #d6d6d6; }
}
@media (max-width: 480px) {
    .tpx-product-features .tpx-feature-track { gap: 16px; }
    .tpx-feature-dialog-inner { padding: 32px 24px; }
    .tpx-feature-close { margin: -16px -8px 0 8px; }
}
@keyframes tpx-feature-appear { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .tpx-product-features .tpx-feature-card { transition: none; }
    .tpx-feature-dialog[open] { animation: none; }
}