.preview-modal {
    width: calc(100vw - 48px);
    max-width: 1600px;
    height: calc(100dvh - 48px);
    max-height: none;
    margin: auto;
    padding: 0;
    border: 1px solid #dcdcdc;
    border-radius: 16px;
    background: #ffffff;
    color: #202020;
    overflow: hidden;
}
.preview-modal[open] { display: flex; flex-direction: column; animation: preview-open 280ms ease-out both; }
.preview-modal::backdrop { background: rgb(0 0 0 / 70%); animation: preview-backdrop-in 280ms ease-out both; }
.preview-modal.is-closing { animation: preview-close 220ms ease-in both; pointer-events: none; }
.preview-modal.is-closing::backdrop { animation: preview-backdrop-out 220ms ease-in both; }
@keyframes preview-open {
    from { opacity: 0; transform: translateY(18px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes preview-close {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(12px) scale(.98); }
}
@keyframes preview-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes preview-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@media(prefers-reduced-motion:reduce) {
    .preview-modal[open], .preview-modal::backdrop { animation: none; }
}
.preview-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid #e5e5e5; }
.preview-modal-header strong { font-size: 16px; font-weight: 700; }
.preview-devices { display: flex; gap: 4px; }
.preview-modal-header button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: #62625f; cursor: pointer; }
.preview-modal-header button:hover { background: #f3f3f3; color: #202020; }
.preview-modal-header button[aria-pressed="true"] { background: #a3e635; color: #202020; }
.preview-modal-header button:focus-visible { outline: 2px solid #202020; outline-offset: 2px; }
.preview-modal-header .ti { width: 24px; height: 24px; }
.preview-stage { position: relative; display: flex; justify-content: center; flex: 1; min-height: 0; background: #e9e9e9; overflow: hidden; }
.preview-loading { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #f3f3f3; color: #62625f; font-size: 14px; }
.preview-loading[hidden] { display: none; }
.preview-loading .ti { width: 32px; height: 32px; color: #202020; animation: preview-spin 900ms linear infinite; }
@keyframes preview-spin { to { transform: rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .preview-loading .ti { animation: none; } }
.preview-stage iframe { display: block; width: 100%; max-width: 100%; height: 100%; border: 0; background: #ffffff; transition: width 350ms cubic-bezier(.22, 1, .36, 1); }
.preview-stage iframe[data-device="tablet"] { width: 768px; }
.preview-stage iframe[data-device="mobile"] { width: 390px; }
@media(prefers-reduced-motion:reduce) { .preview-stage iframe { transition: none; } }
@media(max-width:600px) {
    .preview-modal { width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 12px; }
    .preview-modal-header { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
    .preview-modal-header strong { flex: 1; font-size: 12px; }
    .preview-devices { display: none; }
}

.product-hero {
    padding: 0 0 40px
}

.breadcrumb {
    padding: 28px 0 0;
    margin-bottom: 48px;
    font-size: 13px;
    color: #62625f
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 10px
}

.breadcrumb li+li:before {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 1.5px solid #b8b8b8;
    border-right: 1.5px solid #b8b8b8;
    transform: rotate(45deg)
}

.breadcrumb a:hover {
    color: #202020
}

.breadcrumb [aria-current="page"] {
    color: #202020
}

.product-heading {
    display: grid;
    grid-template-columns: 1fr 290px;
    gap: 70px;
    align-items: end
}

.product-heading h1 {
    font-size: clamp(55px, 6.5vw, 62px);
}

.product-heading p {
    max-width: 670px;
    font-size: 18px
}

.product-heading .eyebrow {
    margin-bottom: 16px
}

.product-purchase {
    text-align: right
}

.product-price {
    font-size: 43px;
    line-height: 1
}

.product-price del {
    font-size: 23px;
    color: #62625f;
    font-weight: 400;
    vertical-align: middle;
    margin-right: 10px
}

.product-purchase>p {
    font-size: 14px;
    margin: 12px 0 20px
}

.product-purchase .actions {
    justify-content: flex-end;
    margin-top: 0
}

.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 25px
}

.product-tags .tag { display: inline-flex; align-items: center; gap: 6px; }
.product-tags .tag .ti { width: 16px; height: 16px; flex-shrink: 0; }

.showcase {
    border: 1px solid #dcdcdc;
    border-radius: 16px;
    background: #ffffff;
    padding: 8px;
    overflow: hidden
}

.showcase img {
    display: block;
    width: 100%;
    /* aspect-ratio: 1260/720; */
    object-fit: contain;
    border-radius: 9px
}

.showcase-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px 4px;
    gap: 15px;
    font-size: 12px;
    color: #62625f
}

.gallery-controls {
    display: flex;
    gap: 6px
}

.gallery-controls button {
    background: #f3f3f3;
    color: #50504d;
    border: 1px solid #dcdcdc;
    border-radius: 30px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer
}

.gallery-controls button[aria-pressed="true"] {
    color: #ffffff;
    background: #202020;
    border-color: #202020
}

.product-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 40px 0;
}

.product-facts>div {
    padding: 0 30px;
    border-left: 1px solid var(--line)
}

.product-facts>div:first-child {
    padding-left: 0;
    border: 0
}

.product-facts strong {
    display: block;
    font-size: 23px;
}

.product-facts span {
    display: block;
    font-size: 13px;
    color: #62625f;
}

.product-overview > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(48px, 7vw, 100px);
    align-items: center;
}

.overview-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    color: #c5c5c5;
    font-size: 13px;
}

.overview-label > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c0c0c0;
}

.product-overview h2 {
    max-width: 440px;
    font-size: clamp(34px, 3.8vw, 52px);
    line-height: 1.06;
}

.product-overview .overview-intro > .eyebrow { background: #3a3a3a; color: #e5e5e5; }

.product-overview h2 span {
    display: block;
    color: #90938c;
}

h2 .heading-light,
.product-overview h2 .heading-light {
    display: inline;
    color: inherit;
    font-weight: 400;
}

.product-overview .overview-intro > p {
    max-width: 480px;
    margin-top: 18px;
}

.product-overview .overview-intro > .overview-lead {
    margin-top: 30px;
    color: #eeeeee;
    font-size: 19px;
    line-height: 1.5;
    max-width: 410px;
}

.overview-intro .actions { margin-top: 40px; }

#overview .btn {
    background: #e5e5e5;
    color: #202020;
    border-color: #e5e5e5;
}

#overview .btn:hover { background: #d3d3d3; border-color: #d3d3d3; }

.overview-note { margin-top: 18px; font-size: 13px;  max-width: 300px; color: #92928b; }

.overview-details {
    background: #1e1b1b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
}

.product-overview { overflow: hidden; }
.overview-intro { position: relative; z-index: 1; }
.overview-chip { position: relative; isolation: isolate; }
.overview-chip .overview-details { position: relative; z-index: 1; }
.overview-circuit { position: absolute; left: -23.53%; top: -23.53%; width: 147.06%; height: 147.06%; pointer-events: none; overflow: visible; }
.overview-circuit-tracks { stroke: #a3e635; stroke-opacity: .16; stroke-width: 1; }
.overview-circuit-flow { stroke: #a3e635; stroke-width: 2; stroke-linecap: round; }
.overview-circuit-flow use { stroke-dasharray: 9 91; stroke-dashoffset: 12; animation: circuit-inflow 3s linear infinite; }
.overview-circuit-contacts circle { opacity: 0; transform-box: fill-box; transform-origin: center; animation: circuit-contact 3s linear infinite; }
@keyframes circuit-contact {
    0%, 80% { opacity: 0; transform: scale(.5); }
    87% { opacity: 1; transform: scale(1.6); }
    94% { opacity: .7; transform: scale(1); }
    100% { opacity: 0; transform: scale(.5); }
}
.overview-circuit :is(use, circle):nth-child(1) { animation-delay: -.3s; animation-duration: 3.7s; }
.overview-circuit :is(use, circle):nth-child(2) { animation-delay: -2.1s; animation-duration: 4.3s; }
.overview-circuit :is(use, circle):nth-child(3) { animation-delay: -1.2s; animation-duration: 3.1s; }
.overview-circuit :is(use, circle):nth-child(4) { animation-delay: -3.4s; animation-duration: 4.9s; }
.overview-circuit :is(use, circle):nth-child(5) { animation-delay: -.8s; animation-duration: 4.1s; }
.overview-circuit :is(use, circle):nth-child(6) { animation-delay: -2.8s; animation-duration: 3.9s; }
.overview-circuit :is(use, circle):nth-child(7) { animation-delay: -1.7s; animation-duration: 5.3s; }
.overview-circuit :is(use, circle):nth-child(8) { animation-delay: -3.1s; animation-duration: 3.3s; }
.overview-circuit :is(use, circle):nth-child(9) { animation-delay: -.5s; animation-duration: 4.7s; }
.overview-circuit :is(use, circle):nth-child(10) { animation-delay: -2.5s; animation-duration: 5.1s; }
.overview-circuit :is(use, circle):nth-child(11) { animation-delay: -1.4s; animation-duration: 3.6s; }
.overview-circuit :is(use, circle):nth-child(12) { animation-delay: -3.8s; animation-duration: 4.6s; }
@keyframes circuit-inflow {
    0% { stroke-dashoffset: 12; opacity: 0; }
    12%, 80% { opacity: 1; }
    100% { stroke-dashoffset: -100; opacity: 0; }
}
@media(prefers-reduced-motion:reduce) {
    .overview-circuit-flow use { animation: none; opacity: .4; stroke-dashoffset: -65; }
    .overview-circuit-contacts circle { animation: none; opacity: 0; }
}

.overview-details-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 28px;
}

.overview-kicker { font-size: 10px; color: #a3a69c; }
.overview-details h3 { margin-top: 15px; font-size: 24px; line-height: 1.25; font-weight: 500; }
.overview-mark { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; flex-shrink: 0; color: #202020; background: #a3e635; border-radius: 50%; padding: 12px; margin-top: 4px; }
.overview-mark .ti { width: 24px; height: 24px; }
.specs { margin: 0; }
.specs div { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #343630; padding: 14px 0; font-size: 14px; }
.specs dt { color: #a3a69c; }
.specs dd { margin: 0; text-align: right; color: #e5e5e5; }
.overview-details-foot { display: flex; align-items: center; gap: 10px; border-top: 1px solid #343630; padding-top: 21px; margin-top: 5px; font-size: 12px; color: #c0c0c0; }
.overview-details-foot > span { font-size: 20px; }

@media(max-width:760px) {
    .overview-details { padding: 24px; }
    .overview-label { margin-bottom: 24px; }
    .overview-note { line-height: 1.6; }
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px 40px
}

.feature-grid .benefit {
    border-top: 1px solid var(--line);
    padding-top: 28px
}

@media(min-width:761px) {
    .feature-grid .benefit:nth-child(-n+3) { border-top: 0; }
}

@media(max-width:760px) {
    .feature-grid .benefit:nth-child(-n+2) { border-top: 0; }
}

.feature-grid .benefit p {
    font-size: 15px;
    max-width: 320px
}

.detail-preview {
    margin-top: 55px
}

.detail-preview img {
    display: block;
    width: 100%;
    border: 1px solid #dcdcdc;
    border-radius: 14px
}









.purchase-layout > .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center
}

.purchase-layout h2 {
    max-width: 480px
}

.bundle-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 25px;
    font-size: 14px;
    border-bottom: 1px dashed #dcdcdc;
    padding-bottom: 4px
}

.bundle-link .iconify,
.bundle-link .ti,
.bundle-link svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}



.product-cta { text-align: center; }
.product-cta h2 { max-width: 900px; margin-inline: auto; }
.product-cta .final-cta-marker {
    padding-inline: 20px;
    background-image: url('../img/product-cta-marker.svg');
}
.product-cta .product-cta-copy { margin: 20px auto 0; color: rgb(255 255 255 / 70%); }
.product-cta .actions { justify-content: center; }

@media(max-width:1023px) {
    .product-heading {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px
    }

    .product-heading h1 {
        font-size: 65px
    }

    .purchase-layout > .wrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 45px
    }

    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px
    }

    .product-overview > .wrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 45px
    }

    .product-purchase { text-align: left; }
    .product-purchase .actions { justify-content: flex-start; }

    .product-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 0;
    }

    .product-facts > div:nth-child(3) {
        border-left: 0;
        padding-left: 0;
    }
}

@media(max-width:760px) {
    .actions {
        flex-direction: column;
        align-items: stretch;
    }

    .actions .btn {
        width: 100%;
    }

    .product-hero {
        padding: 0 0 40px
    }

    .breadcrumb {
        margin-bottom: 40px
    }

    .product-heading {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .product-heading h1 {
        font-size: 60px
    }

    .product-heading p {
        font-size: 16px
    }

    .product-purchase {
        text-align: left
    }

    .product-price {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 999px;
        background: #d9f99d;
        color: #202020;
        font-size: 16px;
        font-weight: 700;
        line-height: inherit;
        white-space: nowrap;
    }

    .product-price del {
        font-size: 15px;
        margin-right: 6px;
        vertical-align: baseline;
    }

    .product-purchase .actions {
        justify-content: flex-start
    }

    .showcase {
        padding: 4px;
        border-radius: 10px
    }

    .showcase-bar {
        align-items: flex-start;
        padding: 12px 6px 8px;
        flex-direction: column
    }

    .product-facts {
        grid-template-columns: 1fr 1fr;
        gap: 28px 0;
        padding: 32px 0
    }

    .product-facts>div {
        padding: 0 15px
    }

    .product-facts>div:nth-child(3) {
        border: 0;
        padding-left: 0
    }

    .product-facts strong {
        font-size: 21px
    }

    .product-facts span {
        font-size: 12px
    }

    .product-overview > .wrap,
    .purchase-layout > .wrap {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .feature-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px 24px
    }

    .feature-grid .benefit p {
        font-size: 14px
    }

    .feature-grid .benefit h3 {
        line-height: 1.4
    }

    .detail-preview {
        margin-top: 35px
    }

    .product-quote blockquote {
        margin: 24px 0
    }
}

.showcase-slider .splide__arrow { display: flex; width: 44px; height: 44px; z-index: 3; background: #fff; color: #202020; border: 0; outline: 1px solid rgb(0 0 0 / 15%); outline-offset: -1px; box-shadow: 0 2px 8px rgb(0 0 0 / 12%); opacity: 1; }
.showcase-slider .splide__arrow:hover { background: #a3e635; }
.showcase-slider .splide__slide img { height: auto; /* max-height: 720px; */ object-position: top; }
.showcase-slider:not(.is-initialized) .splide__slide:not(:first-child) { display: none; }
.showcase-slider:not(.is-initialized) { visibility: visible; }

.showcase-slider .splide__arrow .iconify { width: 24px; height: 24px; fill: none; transform: none; }

.showcase-slider .splide__arrow {
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, background-color .2s ease;
}
.showcase-slider:hover .splide__arrow,
.showcase-slider:focus-within .splide__arrow {
    opacity: 1;
    pointer-events: auto;
}
@media (hover: none) {
    .showcase-slider .splide__arrow { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .showcase-slider .splide__arrow { transition: none; }
}
.showcase-slider .splide__pagination {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 16px;
    z-index: 4;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: max-content;
    visibility: visible;
    opacity: 1;
    padding: 10px 14px;
    margin: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / 90%);
    box-shadow: 0 1px 6px rgb(0 0 0 / 15%);
}
.showcase-slider .splide__pagination__page {
    display: block;
    width: 9px;
    height: 9px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #a8a29e;
    opacity: 1;
    transform: none;
}
.showcase-slider .splide__pagination__page.is-active {
    background: #202020;
    transform: none;
}
.showcase-slider .splide__pagination__page:hover { background: #202020; }

@media (max-width: 760px) {
    .product-purchase .btn.primary.btn-slide { height: 54px; min-height: 54px; }
    .bundle-link { display: none; }
    .product-purchase .btn-slide { padding-right: 60px; }
    .product-purchase .btn-slide::before {
        clip-path: inset(0 0 0 calc(100% - 44px) round 999px);
    }
    .product-purchase .btn-slide-icon {
        left: calc(100% - 48px);
        width: 44px;
        min-width: 44px;
        height: 44px;
    }
    .product-purchase .btn-slide:is(:hover, :focus-visible)::before {
        clip-path: inset(0 round 999px);
    }
    .product-purchase .btn-slide:is(:hover, :focus-visible) .btn-slide-icon { left: 4px; }
}