/* =========================================================
   SINN SINGLE PRODUCT OVERVIEW
   Shortcode: [sinn_product_specifications]
   ========================================================= */


/* =========================================================
   0. MODULE TOKENS
   ========================================================= */

.sinn-product-overview {
    --sinn-black: #101315;
    --sinn-ivory: #F4F5F2;
    --sinn-yellow: #FFC500;

    --black92: rgba(16, 19, 21, .92);
    --black80: rgba(16, 19, 21, .80);
    --black68: rgba(16, 19, 21, .68);
    --black54: rgba(16, 19, 21, .54);
    --black24: rgba(16, 19, 21, .24);
    --black09: rgba(16, 19, 21, .09);

    --ivory92: rgba(244, 245, 242, .92);
    --ivory64: rgba(244, 245, 242, .64);
    --ivory18: rgba(244, 245, 242, .18);
    --ivory10: rgba(244, 245, 242, .10);

    --yellow18: rgba(255, 197, 0, .18);
    --yellow06: rgba(255, 197, 0, .06);

    box-sizing: border-box;

    width: min(1440px, calc(100% - 64px)) !important;
    max-width: 1440px !important;

    margin: 26px auto 0 !important;

    display: grid !important;
    grid-template-columns:
        minmax(0, 1.36fr)
        minmax(420px, .64fr) !important;

    gap: 24px !important;
    align-items: stretch !important;

    font-family:
        Inter,
        "Helvetica Neue",
        "Segoe UI",
        Arial,
        sans-serif !important;

    color: var(--sinn-black);
}


.sinn-product-overview *,
.sinn-product-overview *::before,
.sinn-product-overview *::after {
    box-sizing: border-box;
}


/* =========================================================
   1. LEFT CARD
   Original:
   #overview > article.card
   ========================================================= */

.sinn-product-overview__main {
    position: relative;

    min-width: 0;

    overflow: hidden;

    padding: 42px 42px 38px !important;

    background: var(--sinn-ivory) !important;

    border: 1px solid var(--black09) !important;
    border-top: 4px solid var(--sinn-black) !important;

    border-radius: 7px !important;

    box-shadow: none !important;
}


/* =========================================================
   2. EYEBROW
   Original final visual size:
   .71rem = 11.36px at 16px root
   ========================================================= */

.sinn-product-overview__eyebrow {
    display: inline-block;

    margin-bottom: 18px !important;

    padding: 7px 10px !important;

    border-radius: 2px !important;

    background: var(--sinn-black) !important;
    color: var(--sinn-yellow) !important;

    font-size: 11.36px !important;
    line-height: 1.25 !important;
    font-weight: 780 !important;

    letter-spacing: .085em !important;

    text-transform: uppercase;
}


/* =========================================================
   3. PRODUCT H1
   Original final:
   clamp(3rem,4.55vw,4.45rem)
   ========================================================= */

.sinn-product-overview__title {
    max-width: 18ch !important;

    margin: 0 0 24px !important;

    color: var(--sinn-black) !important;

    font-family:
        Inter,
        "Helvetica Neue",
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: clamp(48px, 4.55vw, 71.2px) !important;
    line-height: 1.025 !important;
    font-weight: 800 !important;

    letter-spacing: -.041em !important;
}


/* =========================================================
   4. BODY / LEAD
   Original final:
   body 1rem / 1.70
   lead 1.045rem / 1.74
   ========================================================= */

.sinn-product-overview__lead {
    max-width: 67ch !important;

    margin: 0 0 12px !important;

    color: var(--black80) !important;

    font-size: 16.72px !important;
    line-height: 1.74 !important;
    font-weight: 400 !important;
}


.sinn-product-overview__description {
    max-width: 72ch;

    color: var(--black68) !important;

    font-size: 16px !important;
    line-height: 1.70 !important;
    font-weight: 400 !important;
}


.sinn-product-overview__description p {
    margin: 0 0 12px !important;

    color: var(--black68) !important;

    font-size: 16px !important;
    line-height: 1.70 !important;
    font-weight: 400 !important;
}


.sinn-product-overview__description p:last-child {
    margin-bottom: 0 !important;
}


/* =========================================================
   5. CTA BUTTONS
   Original:
   min-height 48
   padding 0 20
   radius 3
   final type .78rem
   ========================================================= */

.sinn-product-overview__actions {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 20px;
}


.sinn-product-overview__button {
    min-height: 48px !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 20px !important;

    border: 1px solid transparent;
    border-radius: 3px !important;

    text-decoration: none !important;

    font-size: 12.48px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;

    letter-spacing: .05em !important;

    text-transform: uppercase;

    transition:
        transform .16s ease,
        opacity .16s ease,
        border-color .16s ease !important;
}


.sinn-product-overview__button--primary {
    background: var(--sinn-yellow) !important;
    border-color: var(--sinn-yellow) !important;

    color: var(--sinn-black) !important;
}


.sinn-product-overview__button--primary:hover {
    opacity: .90;

    transform: translateY(-1px);
}


.sinn-product-overview__button--secondary {
    background: transparent !important;

    border-color: var(--black24) !important;

    color: var(--sinn-black) !important;
}


.sinn-product-overview__button--secondary:hover {
    border-color: var(--sinn-black) !important;
}


/* =========================================================
   6. LEFT CARD FOOTER LABEL
   ========================================================= */

.sinn-product-overview__footer-label {
    margin-top: 34px;

    padding-top: 14px;

    border-top: 1px solid var(--black09);

    color: var(--black54);

    font-size: 10.56px;
    line-height: 1.35;
    font-weight: 850;

    letter-spacing: .13em;

    text-transform: uppercase;
}


/* =========================================================
   7. RIGHT MACHINE DOSSIER CARD
   Original:
   #overview > aside.card
   ========================================================= */

.sinn-product-overview__dossier {
    position: relative;

    min-width: 0;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden;

    padding: 28px !important;

    background: var(--sinn-black) !important;
    color: var(--sinn-ivory) !important;

    border: 1px solid var(--sinn-black) !important;
    border-radius: 7px !important;

    box-shadow: none !important;
}


/* Original aside::before "MACHINE DOSSIER" */

.sinn-product-overview__dossier-kicker {
    display: block;

    margin: 0 0 18px;

    color: var(--ivory64);

    font-size: 9.92px;
    line-height: 1.3;
    font-weight: 900;

    letter-spacing: .15em;

    text-transform: uppercase;
}


/* =========================================================
   8. DOSSIER HEADER
   ========================================================= */

.sinn-product-overview__dossier-header {
    position: relative;

    display: flex !important;
    align-items: center !important;

    width: 100%;
    min-width: 0;

    gap: 14px !important;

    margin: 0 0 15px !important;
    padding: 10px 12px !important;

    border: 1px solid rgba(255, 197, 0, .24) !important;
    border-radius: 4px !important;

    background: rgba(255, 255, 255, .018) !important;

    color: inherit;
    text-decoration: none;

    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease !important;
}


.sinn-product-overview__dossier-header:hover,
.sinn-product-overview__dossier-header:focus-within {
    border-color: var(--sinn-yellow) !important;

    background: rgba(255, 197, 0, .055) !important;

    box-shadow: 0 0 0 1px rgba(255, 197, 0, .08) inset;

    transform: translateY(-1px);
}


.sinn-product-overview__dossier-header:focus-within {
    box-shadow:
        0 0 0 2px var(--sinn-black),
        0 0 0 4px var(--sinn-yellow) !important;
}


.sinn-product-overview__dossier-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    padding: 6px;

    border: 1px solid var(--yellow18) !important;
    border-radius: 3px !important;

    background: var(--yellow06) !important;

    color: var(--sinn-yellow) !important;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease !important;
}


.sinn-product-overview__dossier-header:hover .sinn-product-overview__dossier-icon,
.sinn-product-overview__dossier-header:focus-within .sinn-product-overview__dossier-icon {
    border-color: var(--sinn-yellow) !important;

    background: rgba(255, 197, 0, .10) !important;

    transform: scale(1.04);
}


.sinn-product-overview__dossier-icon svg {
    display: block;

    width: 100%;
    height: 100%;
}


.sinn-product-overview__dossier-heading {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;

    min-width: 0;

    gap: 4px;
}


/* Original .passport-title */

.sinn-product-overview__dossier-title {
    display: none;
}


/* Original .passport-subtitle */

.sinn-product-overview__dossier-subtitle {
    margin: 0 !important;

    color: var(--sinn-yellow) !important;

    font-size: 11.52px !important;
    line-height: 1.35;
    font-weight: 800 !important;

    letter-spacing: .04em !important;
}


.sinn-product-overview__dossier-link {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    color: rgba(244, 245, 242, .86) !important;

    font-size: 9.44px !important;
    line-height: 1.2;
    font-weight: 850 !important;

    letter-spacing: .095em !important;

    text-decoration: none !important;
    text-transform: uppercase;

    outline: none;
}


/* Expand the existing text link across the entire specification card. */

.sinn-product-overview__dossier-link::after {
    position: absolute;
    z-index: 1;

    inset: 0;

    content: "";
}


#technical-specifications {
    scroll-margin-top: 100px;
}


@media (max-width: 520px) {

    .sinn-product-overview__dossier-header {
        gap: 11px !important;

        padding: 10px !important;
    }

    .sinn-product-overview__dossier-subtitle {
        font-size: 10.88px !important;
    }

    .sinn-product-overview__dossier-link {
        font-size: 8.8px !important;

        letter-spacing: .075em !important;
    }
}


/* =========================================================
   9. DOSSIER STATS
   Original .passport-grid + .stat
   ========================================================= */

.sinn-product-overview__stats {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 8px !important;
}


.sinn-product-overview__stat {
    min-width: 0;

    padding: 12px !important;

    background: transparent !important;

    border: 1px solid var(--ivory10) !important;
    border-radius: 4px !important;
}


/* Original final .stat-label .69rem */

.sinn-product-overview__stat-label {
    margin-bottom: 5px;

    color: var(--ivory64) !important;

    font-size: 11.04px !important;
    line-height: 1.35 !important;
    font-weight: 720 !important;

    letter-spacing: .025em !important;

    text-transform: uppercase;
}


/* Original final .stat-value .89rem */

.sinn-product-overview__stat-value {
    color: var(--sinn-ivory) !important;

    font-size: 14.24px !important;
    line-height: 1.46 !important;
    font-weight: 600 !important;

    overflow-wrap: anywhere;
}


/* =========================================================
   10. RIGHT PRODUCT GALLERY
   Original .right-product-gallery
   ========================================================= */

.sinn-product-overview__gallery {
    margin-top: 16px !important;

    padding-top: 16px !important;

    border-top: 1px solid var(--ivory18) !important;
}


.sinn-product-overview__gallery-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 10px;
}


/* Original final .right-gallery-title .74rem */

.sinn-product-overview__gallery-title {
    color: var(--sinn-yellow) !important;

    font-size: 11.84px !important;
    line-height: 1.25 !important;
    font-weight: 760 !important;

    letter-spacing: .06em !important;

    text-transform: uppercase;
}


/* Original final .right-gallery-counter .70rem */

.sinn-product-overview__gallery-counter {
    flex: 0 0 auto;

    color: var(--ivory64) !important;

    font-size: 11.2px !important;
    line-height: 1.2;
    font-weight: 600 !important;

    white-space: nowrap;
}


/* =========================================================
   11. GALLERY STAGE
   CRITICAL:
   Original final uses 4:3 + max-height 520px.
   ========================================================= */

.sinn-product-overview__gallery-stage {
    position: relative;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 4 / 3 !important;
    max-height: 520px !important;

    overflow: hidden;

    border: 1px solid var(--ivory18) !important;
    border-radius: 4px !important;

    background:
        linear-gradient(
            180deg,
            rgba(244,245,242,.035),
            rgba(244,245,242,0)
        ),
        var(--sinn-black) !important;

    touch-action: pan-y;
}


.sinn-product-overview__gallery-slide {
    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: opacity .25s ease;
}


.sinn-product-overview__gallery-slide.is-active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* Original final:
   image 4:3 / contain / centered / padding 12px
 */

.sinn-product-overview__gallery-image {
    display: block;

    width: 100% !important;
    height: 100% !important;

    aspect-ratio: 4 / 3 !important;

    padding: 12px !important;

    object-fit: contain !important;
    object-position: center !important;

    image-rendering: auto;

    user-select: none;
    -webkit-user-drag: none;
}


/* =========================================================
   12. VIEW ANGLE BADGE
   Original final .66rem
   ========================================================= */

.sinn-product-overview__gallery-angle {
    position: absolute;

    left: 12px;
    bottom: 10px;

    z-index: 2;

    min-height: 25px;

    display: inline-flex;

    align-items: center;

    padding: 0 9px;

    border: 1px solid rgba(255,197,0,.38);
    border-radius: 999px;

    background: rgba(0,0,0,.78);

    color: var(--sinn-ivory) !important;

    font-size: 10.56px !important;
    line-height: 1;
    font-weight: 730 !important;

    letter-spacing: .045em;

    text-transform: uppercase;
}


/* =========================================================
   13. GALLERY ARROWS
   ========================================================= */

.sinn-product-overview__gallery-arrow {
    position: absolute;

    top: 50%;

    z-index: 3;

    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    padding: 0;

    transform: translateY(-50%);

    border: 1px solid var(--yellow18) !important;
    border-radius: 50%;

    background: var(--black92) !important;

    color: var(--sinn-yellow) !important;

    font-size: 18.4px;
    line-height: 1;

    cursor: pointer;
}


.sinn-product-overview__gallery-prev {
    left: 8px;
}


.sinn-product-overview__gallery-next {
    right: 8px;
}


.sinn-product-overview__gallery-arrow:hover {
    background: var(--sinn-yellow) !important;

    color: var(--sinn-black) !important;
}


/* =========================================================
   14. THUMBNAILS
   CRITICAL DIFFERENCE FROM PREVIOUS VERSION:
   Original final uses a real 4:3 thumbnail card.
   No fixed 52px desktop height.
   ========================================================= */

.sinn-product-overview__gallery-thumbs {
    display: grid !important;

    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;

    gap: 7px !important;

    margin-top: 8px !important;
}


.sinn-product-overview__gallery-thumb {
    min-width: 0;

    aspect-ratio: 4 / 3 !important;

    appearance: none;
    -webkit-appearance: none;

    padding: 3px !important;

    overflow: hidden;

    border: 1px solid var(--ivory18) !important;
    border-radius: 3px !important;

    background: var(--sinn-black) !important;

    cursor: pointer;
}


.sinn-product-overview__gallery-thumb.is-active {
    border-color: var(--sinn-yellow) !important;

    background: var(--yellow06) !important;
}


.sinn-product-overview__gallery-thumb-image {
    display: block;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 4 / 3 !important;

    object-fit: contain !important;
    object-position: center !important;

    border-radius: 2px;
}


/* =========================================================
   15. GALLERY NOTE
   Original OEM note
   ========================================================= */

.sinn-product-overview__gallery-note {
    margin-top: 10px !important;

    padding: 9px 10px !important;

    border-left: 2px solid var(--sinn-yellow);

    color: var(--ivory64) !important;

    font-size: 10.08px !important;
    line-height: 1.45 !important;

    letter-spacing: .025em;
}


/* =========================================================
   16. LARGE DESKTOP
   Original final engineering grid
   ========================================================= */

@media (min-width: 1500px) {

    .sinn-product-overview {
        grid-template-columns:
            minmax(0, 1.42fr)
            minmax(430px, .58fr) !important;

        gap: 26px !important;
    }

}


/* =========================================================
   17. TABLET
   Original final:
   content gutter 24px each side
   hero becomes one column at 1040px
   gallery max-height 560px
   ========================================================= */

@media (max-width: 1040px) {

    .sinn-product-overview {
        width: calc(100% - 48px) !important;

        grid-template-columns: 1fr !important;
    }

    .sinn-product-overview__title {
        max-width: none !important;
    }

    .sinn-product-overview__gallery-stage {
        max-height: 560px !important;
    }

}


/* =========================================================
   18. MOBILE
   Original final mobile gutter = 16px each side
   ========================================================= */

@media (max-width: 720px) {

    .sinn-product-overview {
        width: calc(100% - 32px) !important;
    }

    .sinn-product-overview__main {
        padding: 26px 22px !important;
    }

    .sinn-product-overview__dossier {
        padding: 20px !important;
    }

    .sinn-product-overview__title {
        font-size: clamp(36.8px, 9.8vw, 52px) !important;

        line-height: 1.035 !important;

        letter-spacing: -.035em !important;
    }

    .sinn-product-overview__lead {
        font-size: 16px !important;
    }

    .sinn-product-overview__gallery-stage {
        aspect-ratio: 4 / 3 !important;

        max-height: none !important;
    }

}


/* =========================================================
   19. SMALL MOBILE
   Original gallery thumbnail rail behavior.
   ========================================================= */

@media (max-width: 520px) {

    .sinn-product-overview__stats {
        grid-template-columns: 1fr !important;
    }

    .sinn-product-overview__actions {
        display: grid;

        grid-template-columns: 1fr;
    }

    .sinn-product-overview__button {
        width: 100%;
    }

    .sinn-product-overview__gallery-thumbs {
        grid-template-columns:
            repeat(5, 92px) !important;

        overflow-x: auto;

        scrollbar-width: thin;
    }

}


/* =========================================================
   20. ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sinn-product-overview *,
    .sinn-product-overview *::before,
    .sinn-product-overview *::after {
        transition: none !important;
        animation: none !important;
    }

}