:root{color-scheme:light;background:#fff}html,body,#root{min-height:100%;background:#fff}html,body{margin:0}

/* Extracted CSS */

@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

        *,
        :before,
        :after,
        ::backdrop {
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-space-y-reverse: 0;
            --tw-space-x-reverse: 0;
            --tw-border-style: solid;
            --tw-leading: initial;
            --tw-font-weight: initial;
            --tw-tracking: initial;
            --tw-ordinal: initial;
            --tw-slashed-zero: initial;
            --tw-numeric-figure: initial;
            --tw-numeric-spacing: initial;
            --tw-numeric-fraction: initial;
            --tw-shadow: 0 0#0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0#0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0#0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0#0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0#0000;
            --tw-outline-style: solid;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-duration: initial;
            --tw-ease: initial;
            --tw-content: ""
        }
    }
}

@layer theme {

    :root,
    :host {
        --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-red-50: oklch(97.1%.013 17.38);
        --color-red-300: oklch(80.8%.114 19.571);
        --color-red-400: oklch(70.4%.191 22.216);
        --color-red-600: oklch(57.7%.245 27.325);
        --color-gray-50: oklch(98.5%.002 247.839);
        --color-gray-100: oklch(96.7%.003 264.542);
        --color-gray-600: oklch(44.6%.03 256.802);
        --color-gray-700: oklch(37.3%.034 259.733);
        --color-gray-800: oklch(27.8%.033 256.848);
        --color-gray-900: oklch(21%.034 264.665);
        --color-black: #000;
        --color-white: #fff;
        --spacing: .25rem;
        --container-sm: 24rem;
        --container-lg: 32rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1/.75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25/.875);
        --text-base: 1rem;
        --text-base--line-height: 1.5;
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75/1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75/1.25);
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --tracking-tight: -.025em;
        --tracking-widest: .1em;
        --leading-snug: 1.375;
        --leading-normal: 1.5;
        --leading-relaxed: 1.625;
        --radius-sm: .25rem;
        --radius-md: .375rem;
        --radius-lg: .5rem;
        --radius-xl: .75rem;
        --ease-in-out: cubic-bezier(.4, 0, .2, 1);
        --animate-spin: spin 1s linear infinite;
        --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
        --aspect-video: 16/9;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono)
    }
}

@layer base {

    *,
    :after,
    :before,
    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,
    :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    h1,
    h2,
    h3 {
        font-weight: inherit
    }

    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }

    b,
    strong {
        font-weight: bolder
    }

    :-moz-focusring:where(:not(iframe)) {
        outline: auto
    }

    img,
    svg,
    video,
    canvas {
        vertical-align: middle;
        display: block
    }

    img,
    video {
        max-width: 100%
    }

    button,
    input {
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }
}

@layer components;

@layer utilities {
    .sr-only {
        clip-path: inset(50%);
        border-width: 0
    }

    .group-focus-within\/menu-item\:opacity-100:is(:where(.group\/menu-item):focus-within *) {
        opacity: 1
    }

    @media (hover:hover) {

        .group-hover\:opacity-100:is(:where(.group):hover *),
        .group-hover\/menu-item\:opacity-100:is(:where(.group\/menu-item):hover *) {
            opacity: 1
        }
    }

    .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*) {
        cursor: not-allowed
    }

    .peer-disabled\:opacity-70:is(:where(.peer):disabled~*) {
        opacity: .7
    }

    .has-focus\:ring-\[3px\]:has(:focus) {
        --tw-ring-shadow: var(--tw-ring-inset, )0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .has-\[\:disabled\]\:opacity-50:has(:disabled) {
        opacity: .5
    }

    .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-1:has([data-slot=input-group-control]:focus-visible) {
        --tw-ring-shadow: var(--tw-ring-inset, )0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    :is(.rtl\:\*\*\:\[\.rdp-button\\_next\>svg\]\:rotate-180:where(:dir(rtl), [dir=rtl], [dir=rtl] *) *):is(.rdp-button_next>svg),
    :is(.rtl\:\*\*\:\[\.rdp-button\\_previous\>svg\]\:rotate-180:where(:dir(rtl), [dir=rtl], [dir=rtl] *) *):is(.rdp-button_previous>svg) {
        rotate: 180deg
    }
}

:root {
    --orange: #f4772b;
    --red: #d71920;
    --black: #111;
    --line: #dedede
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    background: #fff;
    margin: 0;
    font-family: Trebuchet MS, Arial, sans-serif
}

button,
input {
    font: inherit
}

button,
a {
    cursor: pointer
}

.wrap {
    width: min(1325px, 100% - 40px);
    margin-inline: auto
}

.announcement {
    align-items: center;
    font-size: 14px;
    display: flex
}

.announcement span {
    text-align: center
}

header {
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid #ddd;
    align-items: center;
    gap: 38px;
    height: 124px;
    padding: 0 20px;
    display: flex;
    position: relative
}

.brand {
    flex: none;
    width: 220px
}

.breadcrumbs {
    color: #777;
    align-items: center;
    gap: 4px;
    height: 74px;
    font-size: 16px;
    display: flex
}

.breadcrumbs b {
    color: #333
}

.product {
    grid-template-columns: minmax(0, 1.16fr) minmax(430px, .84fr);
    align-items: start;
    gap: 54px;
    padding-bottom: 65px;
    display: grid
}

.gallery-main {
    grid-template-columns: 82px 1fr;
    gap: 23px;
    display: grid
}

.thumb-rail {
    scrollbar-width: none;
    flex-direction: column;
    gap: 15px;
    height: 398px;
    padding-right: 2px;
    display: flex;
    overflow-y: auto
}

.thumb-rail::-webkit-scrollbar {
    display: none
}

.thumb-rail button {
    background: #fff;
    border: 1px solid #0000;
    flex: none;
    padding: 2px
}

.main-photo {
    background: #fff;
    place-items: center;
    height: 570px;
    display: grid;
    position: relative;
    overflow: hidden
}

.gallery-arrow {
    background: #fffc;
    border: 1px solid #ddd;
    border-radius: 50%;
    place-items: center;
    width: 45px;
    height: 45px;
    font-size: 30px;
    display: grid;
    position: absolute;
    top: 47%
}

.gallery-arrow.left {
    left: 12px
}

.gallery-arrow.right {
    right: 12px
}

.counter {
    color: #fff;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 12px;
    position: absolute;
    bottom: 10px;
    right: 14px
}

.support-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-left: 105px;
    padding: 10px 2%0;
    display: grid
}

.support-row span {
    justify-content: center;
    align-items: center;
    gap: 11px;
    display: flex
}

.support-row b {
    line-height: 1.25
}

.product-info {
    padding-top: 2px
}

.product-info h1 {
    letter-spacing: -.5px;
    margin: 0 0 17px;
    font-size: 30px;
    line-height: 1.23
}

.rating small {
    color: #666;
    letter-spacing: 0;
    margin-left: 4px;
    font-size: 13px
}

.price {
    align-items: center;
    gap: 10px;
    margin: 28px 0 13px;
    display: flex
}

.price strong {
    font-size: 32px
}

.price del {
    color: #999
}

.price em {
    color: #fff;
    border-radius: 4px;
    font-style: normal
}

.product-info hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 23px 0
}

.option {
    margin: 22px 0
}

.option>b {
    margin-bottom: 14px;
    font-size: 18px;
    display: block
}

.swatch {
    border: 1px solid #777;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 10px
}

.swatch.white {
    background: #fff
}

.swatch.black {
    background: #000
}

.cart-btn,
.buy-btn {
    border-radius: 28px;
    width: 100%;
    padding: 17px;
    font-size: 18px;
    font-weight: 700
}

.cart-btn {
    border: 0
}

.buy-btn {
    border: 1px solid #111
}

.pay-block {
    border-top: 1px solid #ddd;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 18px 0;
    display: grid
}

.sticky-tabs {
    z-index: 15;
    background: #f5f6f8;
    border-top: 1px solid #ddd;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 62px;
    padding: 0 20px;
    display: grid;
    position: sticky;
    bottom: 0;
    box-shadow: 0-2px 8px #0001
}

.sticky-tabs b {
    line-height: 1.25
}

.sticky-tabs div {
    gap: 60px;
    display: flex
}

.sticky-tabs a {
    color: #222;
    font-size: 16px;
    text-decoration: none
}

.sticky-tabs button {
    border: 0;
    border-radius: 28px;
    justify-self: end;
    padding: 12px 42px;
    font-weight: 700
}

.safety-hero {
    text-align: center;
    color: #fff;
    background-position: 50%;
    background-size: cover;
    place-items: center;
    height: 845px;
    display: grid
}

.safety-hero h2 {
    margin: 4px 0 55px;
    font-size: 44px
}

.spec-icons {
    grid-template-columns: repeat(3, 1fr);
    gap: 56px 70px;
    display: grid
}

.spec-icons span {
    text-align: left;
    align-items: center;
    gap: 27px;
    display: flex
}

.spec-icons i {
    flex-direction: column;
    gap: 12px;
    font-style: normal;
    display: flex
}

.spec-icons b {
    font-size: 22px;
    font-weight: 400
}

.spec-icons small {
    font-size: 14px
}

.stories article {
    background: #f4f4f2;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 660px;
    display: grid
}

.stories article>div {
    padding: 10% 13%
}

.stories h2 {
    margin: 0 0 24px;
    font-size: 42px;
    font-weight: 400;
    line-height: 1.18
}

.stories h2 strong {
    font-weight: 800
}

.stories p {
    color: #666;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.8
}

.eco-hero {
    color: #fff;
    text-align: center;
    background-position: 50%;
    background-size: cover;
    place-items: center;
    height: 845px;
    display: grid
}

.eco-hero h2 {
    margin: 0 0 35px;
    font-size: 43px;
    line-height: 1.25
}

.eco-hero p {
    font-size: 19px;
    line-height: 1.65
}

.performance {
    padding-top: 72px;
    padding-bottom: 78px
}

.performance>h2,
.information>h2 {
    text-align: center;
    margin: 0 0 45px;
    font-size: 35px
}

.perf-row {
    scrollbar-width: none;
    gap: 20px;
    padding-bottom: 12px;
    display: flex;
    overflow-x: auto
}

.perf-row::-webkit-scrollbar {
    display: none
}

.perf-row article {
    flex: 0 0 31%;
    min-width: 300px
}

.perf-row h3 {
    font-size: 19px
}

.perf-row p {
    color: #666;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.65
}

.view360 {
    text-align: center;
    padding-top: 62px;
    position: relative
}

.spin-stage {
    background: #eee
}

.information {
    padding-top: 75px;
    padding-bottom: 80px
}

.accordion {
    border-top: 1px solid #999;
    max-width: 890px;
    margin: auto
}

.accordion>button {
    text-align: left;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #bbb;
    width: 100%;
    padding: 20px 4px;
    font-size: 19px;
    font-weight: 700
}

.accordion>button b {
    float: right
}

.fit {
    background: #f6f6f6;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 25px;
    display: grid
}

.accordion dl {
    background: #f7f7f7;
    margin: 0;
    padding: 5px 20px 20px
}

.accordion dl div {
    border-bottom: 1px solid #ddd;
    justify-content: space-between;
    padding: 13px 5px;
    display: flex
}

.accordion dd {
    font-weight: 700
}

.trust-icons {
    border-top: 1px solid #ddd;
    grid-template-columns: repeat(5, 1fr);
    padding: 36px 4%;
    display: grid
}

.trust-icons span {
    text-align: center
}

.trust-icons b {
    margin-top: 8px;
    font-size: 13px;
    display: block
}

footer {
    color: #eee;
    padding: 55px 5% 25px
}

.footer-grid {
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: 55px;
    display: grid
}

.footer-grid section {
    flex-direction: column;
    gap: 13px;
    display: flex
}

.footer-grid h2 {
    margin: 5px 0;
    font-size: 18px
}

.footer-grid a,
.footer-grid p {
    color: #bbb;
    font-size: 13px
}

.footer-grid form {
    max-width: 370px;
    display: flex
}

.footer-grid input {
    color: #fff;
    background: #222;
    border: 1px solid #555;
    flex: 1;
    padding: 14px
}

.footer-grid form button {
    width: 50px
}

.foot-bottom {
    color: #aaa;
    border-top: 1px solid #444;
    margin-top: 45px;
    padding-top: 23px;
    font-size: 12px
}

@media (max-width:1100px) {
    .product {
        grid-template-columns: 1fr 1fr;
        gap: 28px
    }

    .main-photo {
        height: 500px
    }

    .support-row {
        margin-left: 0
    }

    .safety-hero {
        height: 700px
    }

    .stories article {
        min-height: 560px
    }

    .view360 .spin-stage {
        height: 700px
    }

    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr
    }
}

@media (max-width:760px) {
    header {
        gap: 12px;
        height: 70px;
        padding: 0 15px
    }

    .brand {
        width: 170px
    }

    .breadcrumbs {
        height: 55px;
        font-size: 12px
    }

    .product {
        grid-template-columns: 1fr;
        width: 100%;
        padding-inline: 14px
    }

    .gallery-main {
        grid-template-columns: 1fr
    }

    .thumb-rail {
        flex-direction: row;
        order: 2;
        height: auto
    }

    .main-photo {
        grid-row: 1;
        height: 420px
    }

    .support-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        margin-top: 10px
    }

    .support-row span {
        text-align: center;
        flex-direction: column
    }

    .product-info h1 {
        font-size: 25px
    }

    .price {
        flex-wrap: wrap
    }

    .price strong {
        font-size: 28px
    }

    .price del {
        font-size: 20px
    }

    .price em {
        font-size: 14px
    }

    .sticky-tabs {
        grid-template-columns: 1fr auto;
        height: 58px
    }

    .sticky-tabs>b {
        display: none
    }

    .sticky-tabs div {
        gap: 22px
    }

    .sticky-tabs button {
        padding: 10px 22px
    }

    .safety-hero {
        height: auto;
        min-height: 720px
    }

    .safety-hero h2 {
        font-size: 34px
    }

    .spec-icons {
        grid-template-columns: 1fr 1fr;
        gap: 35px 20px
    }

    .spec-icons b {
        font-size: 17px
    }

    .stories article {
        grid-template-columns: 1fr;
        min-height: 0
    }

    .stories article>div {
        padding: 55px 28px
    }

    .stories h2 {
        font-size: 32px
    }

    .eco-hero {
        height: 650px;
        padding: 0 25px
    }

    .eco-hero h2 {
        font-size: 33px
    }

    .perf-row article {
        flex-basis: 82%
    }

    .view360 {
        padding-top: 40px
    }

    .fit {
        grid-template-columns: 1fr
    }

    .trust-icons {
        grid-template-columns: 1fr 1fr
    }

    .footer-grid {
        grid-template-columns: 1fr
    }
}

.sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute !important
}

.video-hero {
    background: #050a12;
    position: relative;
    overflow: hidden
}

.hero-video {
    object-fit: cover;
    z-index: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.hero-overlay {
    z-index: 1;
    pointer-events: none;
    background: #0208102e;
    position: absolute;
    inset: 0
}

.video-hero .hero-copy {
    z-index: 2;
    position: relative
}

.safety-hero .hero-copy {
    width: min(980px, 90%);
    padding-top: 60px
}

.safety-hero .hero-copy>p {
    margin: 0;
    font-size: 27px
}

.eco-hero .hero-copy {
    z-index: 2;
    max-width: 780px;
    position: relative
}

.view360 {
    background: #eee;
    padding: 0
}

.spin-stage {
    touch-action: pan-y;
    cursor: ew-resize;
    -webkit-user-select: none;
    user-select: none;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    place-items: center;
    height: calc(100vh - 62px);
    min-height: 680px;
    max-height: 1048px;
    display: grid;
    position: relative;
    overflow: hidden
}

.orbit {
    z-index: 1;
    border: 7px dotted #fffffff2;
    border-radius: 50%;
    width: 66%;
    height: 19%;
    position: absolute;
    bottom: 8%;
    left: 17%
}

.spin-control {
    z-index: 4;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 58px;
    display: flex;
    position: absolute;
    bottom: 6.5%;
    left: 50%;
    overflow: hidden;
    transform: translate(-50%);
    box-shadow: 0 3px 10px #0002
}

.spin-control button {
    color: #fff;
    background: 0 0;
    border: 0;
    place-items: center;
    width: 50%;
    height: 100%;
    padding: 0;
    font-size: 17px;
    display: grid
}

.spin-control button:first-child {
    padding-left: 5px
}

.spin-control button:last-child {
    padding-right: 5px
}

@media (max-width:760px) {
    .hero-video {
        object-position: center
    }

    .safety-hero .hero-copy {
        width: 100%;
        padding: 40px 18px
    }

    .eco-hero .hero-copy {
        padding: 0 24px
    }

    .orbit {
        border-width: 4px;
        width: 80%;
        height: 18%;
        bottom: 9%;
        left: 10%
    }

    .spin-control {
        width: 48px;
        height: 48px;
        bottom: 7%
    }
}

.announcement {
    color: #fff;
    justify-content: center;
    height: 52px;
    padding: 0 20px
}

.announcement span {
    text-transform: uppercase;
    letter-spacing: .11em;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    display: flex
}

.announcement strong {
    letter-spacing: 0;
    font: 800 19px/1 ui-monospace, SFMono-Regular, Menlo, monospace
}

.swatch {
    transition: transform .18s, box-shadow .18s
}

.swatch.selected {
    outline-offset: 3px;
    outline: 2px solid #111;
    transform: scale(1.04);
    box-shadow: 0 0 0 5px #00000008
}

.shipping-promo {
    margin: 17px 0 4px
}

.delivery-promise {
    color: #555d69;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    display: flex
}

.delivery-promise .signal-icon {
    width: 22px;
    height: 22px;
    color: var(--red);
    flex: none
}

.delivery-promise>span {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    display: flex
}

.delivery-promise strong {
    color: #252a32;
    font-size: 15px
}

.delivery-promise small {
    font-size: 14px
}

.urgency-panel {
    background: #fff8f8;
    border: 1px solid #ead2d4;
    border-radius: 12px;
    margin-top: 14px;
    padding: 14px 16px 0
}

.stock-message {
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    display: flex
}

.stock-message i {
    border-radius: 50%;
    flex: none;
    width: 8px;
    height: 8px;
    animation: 1.8s ease-in-out infinite stock-pulse;
    box-shadow: 0 0 0 5px #e1575c18
}

.stock-message strong,
.stock-message span {
    font-weight: 700
}

.price-reset {
    color: #59606a;
    align-items: center;
    gap: 8px;
    margin: 13px 0 14px;
    font-size: 13px;
    display: flex
}

.price-reset .signal-icon {
    width: 19px;
    height: 19px;
    color: var(--red)
}

.price-reset strong {
    color: var(--red);
    letter-spacing: .07em;
    font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace
}

.shop-activity {
    border-top: 1px solid #eadbdd;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    padding: 11px 0 12px;
    display: flex
}

.shop-activity>span {
    color: #535a64;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    display: flex
}

.shop-activity .signal-icon {
    width: 18px;
    height: 18px;
    color: var(--red)
}

.shop-activity b {
    color: #292e36;
    font-size: 13px
}

.signal-icon {
    flex: none;
    display: block
}

@keyframes stock-pulse {

    0%,
    to {
        opacity: .75;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.15)
    }
}

.responsive-image-picture {
    width: 100%;
    display: block
}

.gift-picker {
    background: linear-gradient(145deg, #fff, #fafafa);
    border: 1px solid #e4e4e4;
    border-radius: 14px;
    margin: 18px 0;
    padding: 16px;
    box-shadow: 0 8px 24px #0000000a
}

.gift-heading {
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 13px;
    display: flex
}

.gift-heading>div {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    display: flex
}

.gift-heading>div>span {
    color: #fff;
    letter-spacing: .08em;
    border-radius: 20px;
    padding: 5px 8px;
    font: 700 10px/1 Arial, sans-serif
}

.gift-title {
    font-size: 17px;
    line-height: 1.2
}

.gift-heading>small {
    color: #777;
    white-space: nowrap;
    padding-top: 4px;
    font-size: 11px
}

.gift-selector {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    display: grid
}

.gift-preview {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    height: 150px;
    animation: .22s gift-pop;
    position: relative;
    overflow: hidden
}

.gift-preview span {
    color: #fff;
    border-radius: 14px;
    padding: 4px 6px;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    position: absolute;
    top: 7px;
    right: 7px
}

.gift-choice-panel>small {
    color: #777;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 700;
    display: block
}

.gift-options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    display: grid
}

.gift-options button {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 9px;
    min-width: 0;
    padding: 4px;
    transition: border-color .18s, box-shadow .18s, transform .18s;
    position: relative;
    overflow: hidden
}

.gift-options button:hover {
    border-color: #888;
    transform: translateY(-2px)
}

.gift-options span {
    text-overflow: ellipsis;
    padding: 4px 1px 2px;
    font-size: 10px;
    font-weight: 700;
    display: block;
    overflow: hidden
}

.gift-options i {
    color: #fff;
    border-radius: 50%;
    place-items: center;
    width: 16px;
    height: 16px;
    font-size: 10px;
    font-style: normal;
    display: grid;
    position: absolute;
    top: 4px;
    right: 4px
}

.gift-choice-panel>p {
    color: #555;
    margin: 9px 0 0;
    font-size: 12px
}

@keyframes gift-pop {
    0% {
        opacity: .55;
        transform: scale(.975)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@media (max-width:760px) {
    .announcement {
        height: 44px;
        padding: 0 10px
    }

    .announcement span {
        letter-spacing: .07em;
        gap: 7px;
        font-size: 10px;
        line-height: 1.25
    }

    .announcement strong {
        white-space: nowrap;
        font-size: 14px
    }

    .delivery-promise {
        align-items: flex-start;
        font-size: 12px
    }

    .delivery-promise strong {
        font-size: 13px
    }

    .delivery-promise small {
        font-size: 12px
    }

    .urgency-panel {
        padding: 13px 14px 0
    }

    .stock-message {
        gap: 6px;
        font-size: 13px
    }

    .price-reset {
        font-size: 12px
    }

    .price-reset strong {
        font-size: 13px
    }

    .shop-activity {
        gap: 13px
    }

    .shop-activity>span {
        font-size: 11px
    }

    .gift-picker {
        padding: 14px
    }

    .gift-heading {
        align-items: center
    }

    .gift-heading>small {
        display: none
    }

    .gift-selector {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 12px
    }

    .gift-preview {
        height: 124px
    }

    .gift-options {
        gap: 5px
    }

    .gift-options span {
        font-size: 9px
    }
}

.support-row b {
    font-size: 12px
}

@media (max-width:760px) {
    .support-row b {
        font-size: 10px
    }
}

:root {
    --orange: #bf3e35;
    --red: #bf3e35;
    --black: #3d3d3d
}

body {
    color: var(--black)
}

.stories h2 strong {
    color: var(--red)
}

.announcement {
    background: var(--red)
}

.thumb-rail button.active,
.gift-options button.selected {
    border-color: var(--red)
}

.rating,
.price strong,
.stock-message {
    color: var(--red)
}

.price em,
.spin-control,
.stock-message i,
.gift-heading>div>span,
.gift-options i {
    background: var(--red)
}

.gift-options button.selected {
    box-shadow: 0 0 0 2px #bf3e3518
}

.swatch.selected {
    outline-color: var(--black)
}

.cart-btn,
.buy-btn,
.sticky-tabs button {
    background: var(--black);
    color: #fff;
    border-color: var(--black)
}

.buy-btn {
    color: var(--black);
    border-color: var(--black);
    background: #fff;
    margin-top: 10px
}

.gift-preview span {
    background: var(--black)
}

.counter {
    background: #3d3d3dcc
}

footer {
    background: var(--black)
}

.rating small a {
    color: inherit;
    text-underline-offset: 2px;
    text-decoration: underline
}

.reviews-showcase {
    scroll-margin-top: 24px
}

.footer-grid form button {
    background: var(--black);
    color: #fff;
    border: 1px solid #555;
    border-left: 0
}

.product-gallery {
    scroll-margin-top: 24px
}

.rating {
    color: #00b67a;
    letter-spacing: 1px;
    font-size: 17px
}

.price del {
    font-size: 18px
}

.price em {
    margin-left: 4px;
    padding: 8px 14px;
    font-size: 14px
}

.footer-menu {
    border-block: 1px solid #ffffff24
}

.footer-menu+.footer-menu {
    border-top: 0
}

.footer-menu summary {
    color: #eee;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 13px 0;
    font-size: 18px;
    font-weight: 700;
    list-style: none;
    display: flex
}

.footer-menu summary::-webkit-details-marker {
    display: none
}

.footer-menu summary:after {
    content: "+";
    flex: none;
    font-size: 25px;
    font-weight: 400;
    line-height: 1
}

.footer-menu[open] summary:after {
    content: "−"
}

.footer-menu>div {
    flex-direction: column;
    gap: 13px;
    padding: 3px 0 15px;
    display: flex
}

.foot-bottom {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: flex
}

.payment-icons {
    grid-column: 1/-1;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 3px;
    width: 100%;
    max-width: 560px;
    display: grid
}

.payment-icon {
    min-width: 0;
    display: block
}

.pay-block .payment-icons {
    max-width: 500px
}

.footer-payments {
    width: min(560px, 100%)
}

.footer-assurance {
    color: #aaa;
    letter-spacing: .035em;
    text-align: center;
    width: 100%;
    margin: 0;
    font: 400 10px/1.5 Arial, sans-serif
}

@media (max-width:760px) {
    .foot-bottom {
        flex-direction: column;
        align-items: center
    }

    .footer-payments {
        width: 100%
    }

    .payment-icons {
        grid-template-columns: repeat(10, minmax(0, 1fr));
        gap: 2px;
        max-width: 100%
    }
}

.discount-jump-wrap {
    background: #fff;
    justify-content: center;
    align-items: center;
    padding: 32px 20px;
    display: flex
}

.discount-jump {
    background: var(--black);
    color: #fff;
    border: 0;
    border-radius: 999px;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    width: min(370px, 100%);
    min-height: 58px;
    padding: 7px 7px 7px 23px;
    text-decoration: none;
    transition: background .18s, box-shadow .18s, transform .18s;
    display: inline-flex;
    box-shadow: 0 10px 28px #3d3d3d2b
}

.discount-jump span {
    letter-spacing: .015em;
    font-size: 14px;
    font-weight: 900
}

.discount-jump strong {
    background: var(--red);
    color: #fff;
    letter-spacing: .01em;
    border-radius: 999px;
    padding: 12px 18px;
    font-size: 18px
}

.discount-jump:hover {
    background: #292929;
    transform: translateY(-2px);
    box-shadow: 0 13px 32px #3d3d3d38
}

.discount-jump:focus-visible {
    outline-offset: 3px;
    outline: 3px solid #bf3e3566
}

#purchase-options {
    scroll-margin-top: 24px
}

@media (max-width:760px) {
    .discount-jump-wrap {
        padding: 24px 14px
    }

    .discount-jump {
        width: min(340px, 100%);
        min-height: 54px;
        padding: 6px 6px 6px 19px
    }

    .discount-jump span {
        font-size: 13px
    }

    .discount-jump strong {
        padding: 11px 15px;
        font-size: 16px
    }

    .trust-icons {
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 14px;
        scroll-padding-inline: 16px;
        overflow-x: auto
    }

    .trust-icons::-webkit-scrollbar {
        display: none
    }

    .trust-icons span {
        scroll-snap-align: center;
        background: #fff;
        border: 1px solid #ead8d8;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        display: flex;
        box-shadow: 0 5px 18px #3d3d3d12
    }
}

.thumb-rail {
    scroll-behavior: smooth
}

@media (max-width:760px) {
    .thumb-rail {
        scroll-snap-type: x proximity
    }

    .thumb-rail button {
        scroll-snap-align: center
    }
}

.view360>.view360-title {
    text-align: center;
    color: #111;
    margin: 0;
    padding: 48px 20px 40px;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.1
}

@media (max-width:760px) {
    .spin-stage {
        height: clamp(520px, 72svh, 680px);
        min-height: 0;
        max-height: none
    }
}

.reviews-showcase {
    background: linear-gradient(145deg, #e5faef, #d1f4e4);
    padding: 48px 16px
}

.reviews-shell {
    width: min(1152px, 100%);
    margin: 0 auto
}

.reviews-header {
    border-bottom: 1px solid #00b67a33;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 24px;
    display: flex
}

.trustpilot-lockup {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-height: 80px;
    display: flex
}

.trustpilot-brand {
    color: #26282d;
    align-items: center;
    gap: 5px;
    display: flex
}

.trustpilot-brand svg {
    width: 35px;
    height: 33px;
    display: block
}

.trustpilot-brand strong {
    letter-spacing: -1.25px;
    font: 800 29px/1 Arial, sans-serif
}

.reviews-header p {
    color: #26282d;
    letter-spacing: .01em;
    margin: 10px 0 0;
    font-size: 17px;
    font-weight: 800
}

.reviews-header p span {
    color: #00b67a
}

.reviews-header>button {
    color: #008f62;
    text-align: right;
    text-underline-offset: 3px;
    background: 0 0;
    border: 0;
    width: 100%;
    max-width: 460px;
    margin: 5px auto 0;
    padding: 2px 0;
    font-size: 13px;
    text-decoration: underline
}

.trust-stars {
    align-items: center;
    gap: 2px;
    display: flex
}

.trust-stars>span {
    background: 0 0;
    border: 0;
    flex: none;
    place-items: center;
    padding: 0;
    line-height: 0;
    display: grid
}

.review-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    display: grid
}

.review-card {
    color: #26282d;
    text-align: left;
    background: #fff;
    border: 0;
    border-radius: 3px;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: 0;
    transition: transform .2s, box-shadow .2s;
    display: flex;
    overflow: hidden;
    box-shadow: 0 1px #00000006
}

.review-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px #1647321f
}

.review-card:focus-visible {
    outline-offset: 2px;
    outline: 2px solid #00b67a
}

.review-card-media {
    aspect-ratio: 1;
    width: 100%;
    color: inherit;
    cursor: pointer;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #f0f0f0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative;
    overflow: hidden
}

.review-card-media:focus-visible {
    outline-offset: -2px;
    outline: 2px solid #00b67a
}

.review-card-media>.responsive-image-picture {
    width: 100%;
    height: 100%
}

.review-photo-count {
    z-index: 3;
    color: #fff;
    letter-spacing: .04em;
    background: #191c1fd1;
    border-radius: 20px;
    padding: 5px 7px;
    font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    position: absolute;
    bottom: 7px;
    right: 7px;
    box-shadow: 0 2px 8px #0000002e
}

.review-avatar {
    color: #333;
    background: #fff;
    border: 1px solid #eeeae4;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 24px;
    height: 24px;
    font: 400 8px/1 Georgia, serif;
    display: grid
}

.review-avatar.large {
    border: 0;
    border-radius: 0;
    width: 100%;
    height: 100%;
    font-size: clamp(34px, 7vw, 76px)
}

.review-card-body {
    flex-direction: column;
    flex: 1;
    min-height: 172px;
    padding: 11px;
    display: flex
}

.review-card-copy {
    -webkit-line-clamp: 3;
    color: #60636a;
    width: 100%;
    height: 4.35em;
    min-height: 0;
    max-height: 4.35em;
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 0;
    -webkit-box-orient: vertical;
    flex: none;
    margin: 8px 0 12px;
    padding: 0;
    font-size: 12px;
    line-height: 1.45;
    display: -webkit-box;
    overflow: hidden
}

.review-card-copy:focus-visible {
    outline-offset: 2px;
    outline: 2px solid #00b67a
}

.review-author {
    border-top: 1px solid #e5e5e5;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 9px;
    display: flex
}

.review-author>span:last-child {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex
}

.review-author b {
    color: #222;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: 11px;
    line-height: 1.25;
    display: flex
}

.review-author small {
    color: #72757b;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.3;
    overflow: hidden
}

.verified-mark {
    color: #fff;
    background: #00b67a;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 14px;
    height: 14px;
    font: 800 9px/1 Arial, sans-serif;
    display: inline-grid
}

.reviews-load-more {
    color: #25272c;
    text-underline-offset: 5px;
    background: 0 0;
    border: 0;
    margin: 24px auto 0;
    padding: 8px 10px;
    font: 600 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    text-decoration: underline;
    display: block
}

@keyframes review-fade {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes review-pop {
    0% {
        opacity: 0;
        transform: scale(.96)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@media (max-width:760px) {
    .reviews-showcase {
        padding: 34px 8px
    }

    .reviews-header {
        margin-bottom: 16px;
        padding-bottom: 18px
    }

    .trustpilot-brand svg {
        width: 32px;
        height: 30px
    }

    .trustpilot-brand strong {
        font-size: 27px
    }

    .reviews-header p {
        font-size: 15px
    }

    .reviews-header>button {
        max-width: 390px;
        font-size: 12px
    }

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

    .review-card-body {
        min-height: 165px;
        padding: 9px
    }

    .review-card-copy {
        font-size: 11px
    }

    .review-author {
        gap: 5px
    }

    .review-author b {
        font-size: 10px
    }

    .review-author small {
        font-size: 9px
    }

    .review-avatar {
        width: 22px;
        height: 22px
    }
}

.progressive-image {
    opacity: 0;
    transition: opacity .32s
}

.progressive-image.is-loaded {
    opacity: 1
}

@media (prefers-reduced-motion:reduce) {
    .progressive-image {
        transition: none
    }
}

.video-hero .hero-copy {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .4s, visibility 0s linear .4s
}

@media (prefers-reduced-motion:reduce) {
    .video-hero .hero-copy {
        transition: none
    }
}

.main-photo>.responsive-image-picture {
    width: 100%;
    height: 100%;
    display: block
}

.stories article>.responsive-image-picture {
    width: 100%;
    height: 660px;
    min-height: 660px;
    display: block
}

.main-photo>.responsive-image-picture,
.review-card-media>.responsive-image-picture {
    min-width: 0;
    min-height: 0
}

.canvas-image {
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    max-width: 100%;
    display: block
}

.responsive-image-picture>canvas.canvas-image {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0
}

.brand canvas {
    display: block
}

.brand canvas.canvas-image {
    aspect-ratio: 220/39
}

.main-photo>.responsive-image-picture>canvas {
    object-fit: contain;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    display: block
}

.thumb-rail canvas {
    object-fit: contain;
    display: block
}

.support-row>span>.responsive-image-picture {
    flex: none;
    width: 27px;
    height: 31px;
    display: block
}

.support-row>span>.responsive-image-picture>canvas.canvas-image {
    object-fit: contain;
    width: 27px;
    height: 31px
}

.spec-icons span>.responsive-image-picture {
    flex: none;
    width: 62px;
    height: 62px;
    display: block
}

.spec-icons span>.responsive-image-picture>canvas.canvas-image {
    object-fit: contain;
    width: 62px;
    height: 62px;
    display: block
}

.gift-preview>.responsive-image-picture {
    width: 100%;
    height: 100%;
    display: block
}

.gift-preview>.responsive-image-picture>canvas {
    object-fit: contain;
    width: 100%;
    height: 100%;
    padding: 7px;
    display: block
}

.gift-options canvas {
    object-fit: contain;
    display: block
}

.stories article>.responsive-image-picture>canvas {
    object-fit: cover;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block
}

.stories article.reverse>.responsive-image-picture {
    order: 2
}

.perf-row canvas {
    aspect-ratio: 1.35;
    object-fit: cover;
    display: block
}

.fit canvas {
    object-fit: contain;
    max-width: 100%;
    max-height: 320px;
    display: block
}

.review-card-media>.responsive-image-picture>canvas {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.review-card-media>.responsive-image-picture>canvas.review-photo-crop-bands {
    object-fit: initial;
    width: 133.34%;
    max-width: none;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.spin-stage>.spin-background {
    z-index: 0;
    object-fit: cover;
    pointer-events: none;
    width: 100%;
    max-width: none;
    height: 100%;
    position: absolute;
    inset: 0
}

.spin-stage>canvas:not(.spin-background) {
    z-index: 2;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    width: min(920px, 78vw);
    height: min(920px, 90vh);
    position: relative
}

.trust-icons span>.responsive-image-picture {
    width: 42px;
    height: 42px;
    margin-inline: auto;
    display: block
}

.trust-icons span>.responsive-image-picture>canvas.canvas-image {
    object-fit: contain;
    width: 42px;
    height: 42px
}

.footer-logo {
    display: block
}

.footer-logo.canvas-image {
    aspect-ratio: 290/52;
    filter: brightness(0) invert()
}

.protected-text {
    -webkit-user-select: text;
    user-select: text
}

.protected-token {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
}

.review-card-copy-text {
    width: 100%;
    display: block
}

.footer-menu .protected-text {
    display: inline-block
}

@media (max-width:1100px) and (min-width:761px) {
    .stories article>.responsive-image-picture {
        height: 560px;
        min-height: 560px
    }
}

@media (max-width:760px) {
    .brand canvas {
        width: 170px
    }

    .brand canvas.canvas-image {
        aspect-ratio: 220/39
    }

    .thumb-rail button>.responsive-image-picture {
        width: 68px;
        height: 68px;
        display: block
    }

    .thumb-rail button>.responsive-image-picture>canvas.canvas-image {
        width: 68px;
        height: 68px
    }

    .support-row canvas,
    .support-row>span>.responsive-image-picture,
    .support-row>span>.responsive-image-picture>canvas.canvas-image {
        width: 24px;
        height: 28px
    }

    .spec-icons span>.responsive-image-picture,
    .spec-icons span>.responsive-image-picture>canvas.canvas-image {
        width: 48px;
        height: 48px
    }

    .gift-options canvas {
        height: 39px
    }

    .stories article>.responsive-image-picture {
        height: auto;
        min-height: 0
    }

    .stories article>.responsive-image-picture>canvas {
        aspect-ratio: 1.2;
        object-fit: cover;
        height: auto;
        min-height: 0
    }

    .stories article.reverse>.responsive-image-picture {
        order: 0
    }

    .spin-stage {
        background-image: none !important
    }

    .spin-stage>canvas:not(.spin-background) {
        transform-origin: 50%;
        width: 118vw;
        max-width: none;
        height: 118vw;
        transform: scale(1.08)
    }

    .view360>.view360-title {
        padding: 32px 16px 24px;
        font-size: 32px
    }
}

.product-gallery,
.gallery-main,
.thumb-rail {
    min-width: 0
}

@media (max-width:760px) {
    .thumb-rail {
        width: 100%;
        max-width: 100%;
        overflow-x: auto
    }
}

.spec-icons>span {
    min-width: 0
}

.spec-icons>span>canvas.canvas-image {
    object-fit: contain;
    filter: brightness(0) invert();
    flex: none;
    width: 62px;
    height: 62px;
    display: block
}

.spec-icons>span>.responsive-image-picture>canvas.canvas-image {
    filter: brightness(0) invert()
}

@media (max-width:760px) {
    .spec-icons>span>canvas.canvas-image {
        width: 48px;
        height: 48px
    }
}

html,
body {
    overflow-x: hidden
}

.thumb-rail,
.perf-row,
.trust-icons {
    contain: layout
}

@media (max-width:760px) {
    .product-gallery>.support-row {
        display: none
    }

    .mobile-support-row {
        border-top: 1px solid #ddd;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        margin: 0;
        padding: 18px 0 4px;
        display: grid
    }

    .mobile-support-row span {
        text-align: center;
        flex-direction: column
    }

    .mobile-support-row>span>.responsive-image-picture {
        flex: none;
        width: 27px;
        height: 31px;
        display: block
    }
}

.trust-icons-track,
.trust-icons-set {
    display: contents
}

@media (max-width:760px) {
    .trust-icons {
        padding: 20px 0 24px;
        display: block
    }

    .trust-icons-track {
        animation: 30s linear infinite trust-benefits-scroll
    }

    .trust-icons-set {
        gap: 10px;
        padding-right: 10px
    }

    .trust-icons span {
        border-radius: 12px;
        min-height: 112px;
        padding: 14px 10px
    }

    .trust-icons b {
        margin-top: 9px;
        font-size: 13px
    }

    .trust-icons span>.responsive-image-picture,
    .trust-icons span>.responsive-image-picture>canvas.canvas-image {
        width: 40px;
        height: 40px
    }

    .trust-icons-track:hover,
    .trust-icons-track:focus-within {
        animation-play-state: paused
    }
}

@keyframes trust-benefits-scroll {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-50%)
    }
}

@media (prefers-reduced-motion:reduce) {
    .trust-icons-track {
        animation: none
    }
}

@media (max-width:760px) {
    .trust-icons {
        width: 100%;
        overflow: hidden
    }

    .trust-icons-track {
        will-change: transform;
        flex-wrap: nowrap;
        align-items: stretch;
        width: max-content;
        display: flex
    }

    .trust-icons-set {
        flex-wrap: nowrap;
        flex: none;
        align-items: stretch;
        width: max-content;
        display: flex
    }

    .trust-icons span {
        box-sizing: border-box;
        flex: 0 0 62vw;
        width: 62vw;
        min-width: 0;
        position: relative;
        overflow: hidden
    }

    .trust-icons b {
        text-align: center;
        max-width: 100%;
        display: block
    }
}

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-space-x-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-leading {
    syntax: "*";
    inherits: false
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false
}

@property --tw-tracking {
    syntax: "*";
    inherits: false
}

@property --tw-ordinal {
    syntax: "*";
    inherits: false
}

@property --tw-slashed-zero {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-figure {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-spacing {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-fraction {
    syntax: "*";
    inherits: false
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0#0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0#0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0#0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0#0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0#0000
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

@property --tw-duration {
    syntax: "*";
    inherits: false
}

@property --tw-ease {
    syntax: "*";
    inherits: false
}

@property --tw-content {
    syntax: "*";
    inherits: false;
    initial-value: ""
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

/* Extracted CSS */

.sf-hidden{display:none!important}

/* Added thumbnail image styles */
.thumb-rail button {
    width: 78px;
    height: 78px;
    border: 2px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease;
    padding: 0;
}

.thumb-rail button.active {
    border-color: var(--red) !important;
}

.thumb-rail button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 760px) {
    .thumb-rail button {
        width: 68px;
        height: 68px;
    }
}


/* --- Hero Copy Animation (2s delay, 6s visible, fade out) --- */
.video-hero .hero-copy {
    opacity: 0;
    visibility: hidden;
    animation: heroCopyCycle 10s ease-in-out infinite;
}

@keyframes heroCopyCycle {
    0%, 18% {
        opacity: 0;
        visibility: hidden;
    }
    24%, 78% {
        opacity: 1;
        visibility: visible;
    }
    84%, 100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* --- Stories Alternating Layout --- */
.stories article {
    background: #f4f4f2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 580px;
}
.stories article.reverse {
    grid-template-columns: 1fr 1fr;
}
.stories article > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 760px) {
    .stories article, .stories article.reverse {
        grid-template-columns: 1fr;
    }
}


.performance > h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 34px;
    color: #2b2b2b;
    font-weight: 500;
}
.perf-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
}
.perf-row article {
    display: flex;
    flex-direction: column;
}
.perf-row article img {
    width: 100%;
    aspect-ratio: 1.35;
    object-fit: cover;
    display: block;
    background: #f0f0f0;
}
.perf-row article h3 {
    font-size: 17px;
    font-weight: 700;
    color: #333;
    margin: 14px 0 6px 0;
}
.perf-row article p {
    color: #666;
    font-family: Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
}
@media (max-width: 760px) {
    .perf-row {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* --- Size & Fit Accordion Image --- */
.fit {
    background: #f6f6f6;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 25px;
    gap: 20px;
}
.fit img {
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
}
@media (max-width: 760px) {
    .fit {
        grid-template-columns: 1fr;
    }
}


/* Mobile layout rule for .stories: Image ALWAYS first, Text ALWAYS second */
@media (max-width: 760px) {
    .stories article,
    .stories article.reverse {
        display: flex !important;
        flex-direction: column !important;
    }
    .stories article > img,
    .stories article > picture {
        order: 1 !important;
        width: 100% !important;
    }
    .stories article > div {
        order: 2 !important;
        width: 100% !important;
    }
}






.performance > h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 34px;
    color: #2b2b2b;
    font-weight: 500;
}
.perf-row {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 24px !important;
    padding-bottom: 16px !important;
    scrollbar-width: none !important;
}
.perf-row::-webkit-scrollbar {
    display: none !important;
}
.perf-row article {
    flex: 0 0 calc(33.333% - 16px) !important;
    width: calc(33.333% - 16px) !important;
    min-width: 310px !important;
    scroll-snap-align: start !important;
    display: flex;
    flex-direction: column;
}
.perf-row article img {
    width: 100%;
    aspect-ratio: 1.35;
    object-fit: cover;
    display: block;
    background: #f0f0f0;
}
.perf-row article h3 {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 14px 0 6px 0;
}
.perf-row article p {
    color: #666;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 760px) {
    .perf-row {
        gap: 16px !important;
    }
    .perf-row article {
        flex: 0 0 82% !important;
        width: 82% !important;
        min-width: 270px !important;
    }
}



/* === Clean Unified Explore Performance Slider === */
.performance {
    padding-top: 60px;
    padding-bottom: 70px;
}
.performance > h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 34px;
    color: #2b2b2b;
    font-weight: 500;
}
.perf-row {
    display: flex !important;
    gap: 24px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 16px !important;
    scrollbar-width: thin !important;
    scrollbar-color: #bf3e35 #f0f0f0 !important;
}

/* Custom Scrollbar on Desktop */
.perf-row::-webkit-scrollbar {
    height: 8px !important;
    display: block !important;
}
.perf-row::-webkit-scrollbar-track {
    background: #f0f0f0 !important;
    border-radius: 4px !important;
}
.perf-row::-webkit-scrollbar-thumb {
    background: #bf3e35 !important;
    border-radius: 4px !important;
}
.perf-row::-webkit-scrollbar-thumb:hover {
    background: #a02e26 !important;
}

.perf-row article {
    flex: 0 0 calc((100% - 48px) / 3) !important;
    width: calc((100% - 48px) / 3) !important;
    min-width: 300px !important;
    scroll-snap-align: start !important;
    display: flex !important;
    flex-direction: column !important;
}
.perf-row article img {
    width: 100% !important;
    aspect-ratio: 1.35 !important;
    object-fit: cover !important;
    display: block !important;
    background: #f0f0f0 !important;
}
.perf-row article h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 14px 0 6px 0 !important;
}
.perf-row article p {
    color: #666 !important;
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

@media (max-width: 760px) {
    .perf-row {
        gap: 16px !important;
        scrollbar-width: none !important;
    }
    .perf-row::-webkit-scrollbar {
        display: none !important;
    }
    .perf-row article {
        flex: 0 0 82% !important;
        width: 82% !important;
        min-width: 270px !important;
    }
}


/* Animation for dynamically loaded review cards */
@keyframes reviewFade {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}