@charset "UTF-8";
@import url(https://p.typekit.net/p.css?s=1&k=wzj7hsg&ht=tk&f=51571&a=87642115&app=typekit&e=css);
:where(.mb-wrapper) {
    --mb-radius: 3px;
    --mb-c-accent: #ff3300;
    --mb-c-accent-safe: #df2d00;
    --mb-c-accent-wcag: var(--mb-c-accent-safe);
    --c-pricing: var(--mb-c-accent-safe);
    --mb-c-button-border: var(--mb-c-accent-safe);
    --mb-c-button: var(--mb-c-accent-safe);
    --mb-c-button-hover-border: var(--mb-c-accent-safe);
    --mb-c-button-hover-copy: var(--c-em-high);
    --mb-c-button-hover: transparent;
    --mb-c-button-copy-contrast: var(--mb-c-accent-safe)
}

:where(.mb-wrapper) {
    --mb-c-accent-safe: #df2d00;
    --font-body: 'Helvetica Neue Web', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    --font-headline: "ITC Avant Garde", 'AvantGardeGothicITCW01B 731063', 'AvantGardeGothic', -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    --c-pricing: var(--mb-c-accent-safe)
}

:where(.mb-wrapper.-roc) {
    --mb-c-accent-safe: #df2d00;
    --font-headline: roc-grotesk, "ITC Avant Garde", "Helvetica Neue", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    --font-body: roc-grotesk, "Helvetica Neue", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    --font-wide: roc-grotesk-wide, "Helvetica Neue", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    --font-extrawide: roc-grotesk-extrawide, "Helvetica Neue", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    --font-compressed: roc-grotesk-compressed, "Helvetica Neue", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    --font-condensed: roc-grotesk-condensed, "Helvetica Neue", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    --font-button: var(--font-body);
    --mb-c-accent: #ff4713;
    --c-pricing: var(--mb-c-accent-safe)
}

:where(.mb-wrapper.-roc) h1,
:where(.mb-wrapper.-roc) h2,
:where(.mb-wrapper.-roc) h3,
:where(.mb-wrapper.-roc) h4 {
    font-weight: 700
}

:where(.mb-wrapper[data-locale=pl_PL]) {
    font-family: Arial, system-ui, sans-serif;
    --font-headline: Arial, system-ui, sans-serif;
    --font-body: Arial, system-ui, sans-serif
}

.ds-sticker[data-sticker=Airplane] {
    background-image: url(../media/emoji/Airplane.svg)
}

.ds-sticker[data-sticker=Alarm_Clock] {
    background-image: url(../media/emoji/Alarm_Clock.svg)
}

.ds-sticker[data-sticker=Aloe] {
    background-image: url(../media/emoji/Aloe.svg)
}

.ds-sticker[data-sticker=Armchair] {
    background-image: url(../media/emoji/Armchair.svg)
}

.ds-sticker[data-sticker=Balloons] {
    background-image: url(../media/emoji/Balloons.svg)
}

.ds-sticker[data-sticker=Beach_Umbrella] {
    background-image: url(../media/emoji/Beach_Umbrella.svg)
}

.ds-sticker[data-sticker=Bee] {
    background-image: url(../media/emoji/Bee.svg)
}

.ds-sticker[data-sticker=Bike] {
    background-image: url(../media/emoji/Bike.svg)
}

.ds-sticker[data-sticker=Bongo] {
    background-image: url(../media/emoji/Bongo.svg)
}

.ds-sticker[data-sticker=Butterfly] {
    background-image: url(../media/emoji/Butterfly.svg)
}

.ds-sticker[data-sticker=Campfire] {
    background-image: url(../media/emoji/Campfire.svg)
}

.ds-sticker[data-sticker=Cart] {
    background-image: url(../media/emoji/Cart.svg)
}

.ds-sticker[data-sticker=Cassette_Player] {
    background-image: url(../media/emoji/Cassette_Player.svg)
}

.ds-sticker[data-sticker=CD] {
    background-image: url(../media/emoji/CD.svg)
}

.ds-sticker[data-sticker=Christmas_Tree] {
    background-image: url(../media/emoji/Christmas_Tree.svg)
}

.ds-sticker[data-sticker=Clap] {
    background-image: url(../media/emoji/Clap.svg)
}

.ds-sticker[data-sticker=Cocktail] {
    background-image: url(../media/emoji/Cocktail.svg)
}

.ds-sticker[data-sticker=Concert_Tickets] {
    background-image: url(../media/emoji/Concert_Tickets.svg)
}

.ds-sticker[data-sticker=Crystals] {
    background-image: url(../media/emoji/Crystals.svg)
}

.ds-sticker[data-sticker=Disco_Ball] {
    background-image: url(../media/emoji/Disco_Ball.svg)
}

.ds-sticker[data-sticker=Dove] {
    background-image: url(../media/emoji/Dove.svg)
}

.ds-sticker[data-sticker=Ear] {
    background-image: url(../media/emoji/Ear.svg)
}

.ds-sticker[data-sticker=Earbuds] {
    background-image: url(../media/emoji/Earbuds.svg)
}

.ds-sticker[data-sticker=Electricity] {
    background-image: url(../media/emoji/Electricity.svg)
}

.ds-sticker[data-sticker=Equalizer] {
    background-image: url(../media/emoji/Equalizer.svg)
}

.ds-sticker[data-sticker=Eyes] {
    background-image: url(../media/emoji/Eyes.svg)
}

.ds-sticker[data-sticker=Ferris_Wheel] {
    background-image: url(../media/emoji/Ferris_Wheel.svg)
}

.ds-sticker[data-sticker=Festival_Tent] {
    background-image: url(../media/emoji/Festival_Tent.svg)
}

.ds-sticker[data-sticker=Fitted_Cap] {
    background-image: url(../media/emoji/Fitted_Cap.svg)
}

.ds-sticker[data-sticker=Flight] {
    background-image: url(../media/emoji/Flight.svg)
}

.ds-sticker[data-sticker=Flip_Flops] {
    background-image: url(../media/emoji/Flip_Flops.svg)
}

.ds-sticker[data-sticker=Friend] {
    background-image: url(../media/emoji/Friend.svg)
}

.ds-sticker[data-sticker=Friends] {
    background-image: url(../media/emoji/Friends.svg)
}

.ds-sticker[data-sticker=Frog] {
    background-image: url(../media/emoji/Frog.svg)
}

.ds-sticker[data-sticker=Gender] {
    background-image: url(../media/emoji/Gender.svg)
}

.ds-sticker[data-sticker=Gift] {
    background-image: url(../media/emoji/Gift.svg)
}

.ds-sticker[data-sticker=Globe] {
    background-image: url(../media/emoji/Globe.svg)
}

.ds-sticker[data-sticker=Gramophone] {
    background-image: url(../media/emoji/Gramophone.svg)
}

.ds-sticker[data-sticker=Green_Energy] {
    background-image: url(../media/emoji/Green_Energy.svg)
}

.ds-sticker[data-sticker=Guitar_Pick] {
    background-image: url(../media/emoji/Guitar_Pick.svg)
}

.ds-sticker[data-sticker=Happy_Lock] {
    background-image: url(../media/emoji/Happy_Lock.svg)
}

.ds-sticker[data-sticker=Happy_Mind] {
    background-image: url(../media/emoji/Happy_Mind.svg)
}

.ds-sticker[data-sticker=Headphones] {
    background-image: url(../media/emoji/Headphones.svg)
}

.ds-sticker[data-sticker=Heart_Eye] {
    background-image: url(../media/emoji/Heart_Eye.svg)
}

.ds-sticker[data-sticker=Heart_Eyes] {
    background-image: url(../media/emoji/Heart_Eyes.svg)
}

.ds-sticker[data-sticker=Heart_Wings] {
    background-image: url(../media/emoji/Heart_Wings.svg)
}

.ds-sticker[data-sticker=Heart_World] {
    background-image: url(../media/emoji/Heart_World.svg)
}

.ds-sticker[data-sticker=Heart] {
    background-image: url(../media/emoji/Heart.svg)
}

.ds-sticker[data-sticker=Infinity] {
    background-image: url(../media/emoji/Infinity.svg)
}

.ds-sticker[data-sticker=Kayak] {
    background-image: url(../media/emoji/Kayak.svg)
}

.ds-sticker[data-sticker=Keys] {
    background-image: url(../media/emoji/Keys.svg)
}

.ds-sticker[data-sticker=Leaf] {
    background-image: url(../media/emoji/Leaf.svg)
}

.ds-sticker[data-sticker=Lips] {
    background-image: url(../media/emoji/Lips.svg)
}

.ds-sticker[data-sticker=Lotus] {
    background-image: url(../media/emoji/Lotus.svg)
}

.ds-sticker[data-sticker=Magnifine_Happy] {
    background-image: url(../media/emoji/Magnifine_Happy.svg)
}

.ds-sticker[data-sticker=Maneki_Neko] {
    background-image: url(../media/emoji/Maneki_Neko.svg)
}

.ds-sticker[data-sticker=Maple_Leaf] {
    background-image: url(../media/emoji/Maple_Leaf.svg)
}

.ds-sticker[data-sticker=Megaphone] {
    background-image: url(../media/emoji/Megaphone.svg)
}

.ds-sticker[data-sticker=Microphone] {
    background-image: url(../media/emoji/Microphone.svg)
}

.ds-sticker[data-sticker=Mixer] {
    background-image: url(../media/emoji/Mixer.svg)
}

.ds-sticker[data-sticker=Mountain] {
    background-image: url(../media/emoji/Mountain.svg)
}

.ds-sticker[data-sticker=Mouth] {
    background-image: url(../media/emoji/Mouth.svg)
}

.ds-sticker[data-sticker=Movie_Popcorn] {
    background-image: url(../media/emoji/Movie_Popcorn.svg)
}

.ds-sticker[data-sticker=Music_Note] {
    background-image: url(../media/emoji/Music_Note.svg)
}

.ds-sticker[data-sticker=Ornament] {
    background-image: url(../media/emoji/Ornament.svg)
}

.ds-sticker[data-sticker=Palm_Tree] {
    background-image: url(../media/emoji/Palm_Tree.svg)
}

.ds-sticker[data-sticker=Paper_airplane] {
    background-image: url(../media/emoji/Paper_airplane.svg)
}

.ds-sticker[data-sticker=Party_Balloons] {
    background-image: url(../media/emoji/Party_Balloons.svg)
}

.ds-sticker[data-sticker=Peace_Glasses] {
    background-image: url(../media/emoji/Peace_Glasses.svg)
}

.ds-sticker[data-sticker=Peace_Heart] {
    background-image: url(../media/emoji/Peace_Heart.svg)
}

.ds-sticker[data-sticker=Peace] {
    background-image: url(../media/emoji/Peace.svg)
}

.ds-sticker[data-sticker=Phone] {
    background-image: url(../media/emoji/Phone.svg)
}

.ds-sticker[data-sticker=Planet] {
    background-image: url(../media/emoji/Planet.svg)
}

.ds-sticker[data-sticker=Pumpkin] {
    background-image: url(../media/emoji/Pumpkin.svg)
}

.ds-sticker[data-sticker=Radio] {
    background-image: url(../media/emoji/Radio.svg)
}

.ds-sticker[data-sticker=Rainbow] {
    background-image: url(../media/emoji/Rainbow.svg)
}

.ds-sticker[data-sticker=Record_player] {
    background-image: url(../media/emoji/Record_player.svg)
}

.ds-sticker[data-sticker=Recycle_Bag] {
    background-image: url(../media/emoji/Recycle_Bag.svg)
}

.ds-sticker[data-sticker=Recycle] {
    background-image: url(../media/emoji/Recycle.svg)
}

.ds-sticker[data-sticker=Ring] {
    background-image: url(../media/emoji/Ring.svg)
}

.ds-sticker[data-sticker=Rock_on] {
    background-image: url(../media/emoji/Rock_on.svg)
}

.ds-sticker[data-sticker=Roller_Skates] {
    background-image: url(../media/emoji/Roller_Skates.svg)
}

.ds-sticker[data-sticker=Rose] {
    background-image: url(../media/emoji/Rose.svg)
}

.ds-sticker[data-sticker=Shopping_Bag] {
    background-image: url(../media/emoji/Shopping_Bag.svg)
}

.ds-sticker[data-sticker=Signpost] {
    background-image: url(../media/emoji/Signpost.svg)
}

.ds-sticker[data-sticker=Snowflake] {
    background-image: url(../media/emoji/Snowflake.svg)
}

.ds-sticker[data-sticker=Soccer_Ball] {
    background-image: url(../media/emoji/Soccer_Ball.svg)
}

.ds-sticker[data-sticker=Sound_System] {
    background-image: url(../media/emoji/Sound_System.svg)
}

.ds-sticker[data-sticker=Speaker] {
    background-image: url(../media/emoji/Speaker.svg)
}

.ds-sticker[data-sticker=Spiral] {
    background-image: url(../media/emoji/Spiral.svg)
}

.ds-sticker[data-sticker=Spotlights] {
    background-image: url(../media/emoji/Spotlights.svg)
}

.ds-sticker[data-sticker=Suitcase] {
    background-image: url(../media/emoji/Suitcase.svg)
}

.ds-sticker[data-sticker=Sun] {
    background-image: url(../media/emoji/Sun.svg)
}

.ds-sticker[data-sticker=Sunflower] {
    background-image: url(../media/emoji/Sunflower.svg)
}

.ds-sticker[data-sticker=Sunglasses] {
    background-image: url(../media/emoji/Sunglasses.svg)
}

.ds-sticker[data-sticker=Surfboard] {
    background-image: url(../media/emoji/Surfboard.svg)
}

.ds-sticker[data-sticker=T-shirt] {
    background-image: url(../media/emoji/T-shirt.svg)
}

.ds-sticker[data-sticker=Tamborine] {
    background-image: url(../media/emoji/Tamborine.svg)
}

.ds-sticker[data-sticker=Theater_Mask] {
    background-image: url(../media/emoji/Theater_Mask.svg)
}

.ds-sticker[data-sticker=Thumbs_Up] {
    background-image: url(../media/emoji/Thumbs_Up.svg)
}

.ds-sticker[data-sticker=Trees] {
    background-image: url(../media/emoji/Trees.svg)
}

.ds-sticker[data-sticker=Trophy] {
    background-image: url(../media/emoji/Trophy.svg)
}

.ds-sticker[data-sticker=Turtle] {
    background-image: url(../media/emoji/Turtle.svg)
}

.ds-sticker[data-sticker=Verified] {
    background-image: url(../media/emoji/Verified.svg)
}

.ds-sticker[data-sticker=Volume] {
    background-image: url(../media/emoji/Volume.svg)
}

.ds-sticker[data-sticker=World_Love] {
    background-image: url(../media/emoji/World_Love.svg)
}

.ds-sticker[data-sticker=Wrist_Watch] {
    background-image: url(../media/emoji/Wrist_Watch.svg)
}

.ds-sticker[data-sticker=Yin_Yang] {
    background-image: url(../media/emoji/Yin_Yang.svg)
}

@font-face {
    font-family: roc-grotesk;
    src: url(https://use.typekit.net/af/2e2b50/0000000000000000774b970f/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff2"), url(https://use.typekit.net/af/2e2b50/0000000000000000774b970f/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff"), url(https://use.typekit.net/af/2e2b50/0000000000000000774b970f/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 100 900;
    font-stretch: normal
}

:root[data-brand=jbl] {
    --mb-side-offset: var(--pdp-sideOffset)
}

.container.-has-mb {
    padding-inline: 0
}

html :where(.mb-wrapper[data-realm=sfra]) {
    --font-headline: "roc-grotesk", "Roc Grotesk", "system-ui", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-body: "abc-diatype", "ABC Diatype", "roc-grotesk", "system-ui", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-button: var(--font-body);
    --mb-c-button-hover-copy: white;
    --c-canvas-alt: #f9f5ef;
    font-family: var(--font-body)
}

html :where(.mb-wrapper[data-realm=sfra]) [data-theme*=premium] {
    --mb-c-accent: var(--c-em-full);
    --mb-c-accent-safe: var(--c-em-full);
    --mb-c-button: var(--c-em-full);
    --mb-c-button-border: var(--c-em-full);
    --mb-c-button-copy: var(--c-em-full-contrast);
    --mb-c-button-hover: transparent --mb-c-button-hover-border: var(--c-em-full);
    --mb-c-button-hover-copy: var(--c-em-full);
    --mb-c-button-contrast: var(--c-em-full);
    --mb-c-button-contrast-border: var(--c-em-full);
    --mb-c-button-copy-contrast: var(--c-em-full-contrast)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] h2 {
    font-size: var(--pdp-h2, var(--f-h4))
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row.-header h3 {
    font-size: var(--f-2xl)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-columns .-cta-link-arrow .cta {
    text-decoration: none;
    color: var(--c-accent)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-banner.-image-overlay.-image-placement-behind.-placement-center picture::after {
    background-color: var(--c-em-xlow-contrast);
    background: linear-gradient(180deg, var(--c-em-xlow-contrast) 0, var(--c-em-low-contrast) 100%)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-banner.-image-overlay.-image-placement-behind.-placement-center .copy,
html :where(.mb-wrapper[data-realm=sfra]) .mb-banner.-image-overlay.-image-placement-behind.-placement-center h1,
html :where(.mb-wrapper[data-realm=sfra]) .mb-banner.-image-overlay.-image-placement-behind.-placement-center h2,
html :where(.mb-wrapper[data-realm=sfra]) .mb-banner.-image-overlay.-image-placement-behind.-placement-center h3,
html :where(.mb-wrapper[data-realm=sfra]) .mb-banner.-image-overlay.-image-placement-behind.-placement-center p {
    color: var(--c-em-full)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-banner.-image-overlay.-image-placement-behind.-placement-center h1 {
    font-variation-settings: "wdth" 100;
    font-weight: 750
}

html :where(.mb-wrapper[data-realm=sfra]) .compare-wrapper .container-narrow .breadcrumb-item:not(.none):after {
    display: none
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper {
    --c-border: var(--c-em-full);
    --compare-products: 2;
    display: grid;
    background: var(--c-canvas);
    padding: var(--side-offset);
    margin: 0;
    container: mbCompareWrapper/inline-size
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper h2,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper h2 {
    padding-inline: var(--side-offset)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-nav,
html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row:not(.-header),
html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-nav,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row:not(.-header),
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top {
    display: flex;
    flex-wrap: nowrap
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-nav .mb-compare-top-right .mb-compare-cell,
html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row:not(.-header) .mb-compare-top-right .mb-compare-cell,
html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top .mb-compare-top-right .mb-compare-cell,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-nav .mb-compare-top-right .mb-compare-cell,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row:not(.-header) .mb-compare-top-right .mb-compare-cell,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top .mb-compare-top-right .mb-compare-cell {
    border: 0
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-nav .mb-compare-top-left h2,
html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row:not(.-header) .mb-compare-top-left h2,
html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top .mb-compare-top-left h2,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-nav .mb-compare-top-left h2,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row:not(.-header) .mb-compare-top-left h2,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top .mb-compare-top-left h2 {
    display: none
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top {
    padding-inline: 0
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-nav .mb-compare-cell,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-nav .mb-compare-cell {
    min-width: calc(100% / var(--compare-products));
    max-width: calc(100% / var(--compare-products))
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top-left,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top-left {
    background-color: var(--c-canvas);
    z-index: 4;
    max-width: calc(100vw - var(--side-offset) - var(--side-offset) - var(--spacing-s))
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top-left h2,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top-left h2 {
    font-size: var(--f-h5)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top-left .mb-compare-tools,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top-left .mb-compare-tools {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0;
    align-items: start
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top-left .mb-compare-tools label,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top-left .mb-compare-tools label {
    cursor: pointer
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top-left .mb-compare-tools label::before,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top-left .mb-compare-tools label::before {
    font-size: 21px;
    transform: translate(0, -2px);
    color: var(--c-em-full)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top-left .mb-compare-tools label:hover::before,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top-left .mb-compare-tools label:hover::before {
    color: var(--c-accent)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top-left .mb-compare-tools :checked+label::before,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top-left .mb-compare-tools :checked+label::before {
    color: var(--c-accent);
    font-variation-settings: 'FILL' 1
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top-right .button.-viewdetails,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top-right .button.-viewdetails {
    all: unset;
    font-weight: 600;
    font-size: var(--f-m);
    cursor: pointer
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top-right .button.-viewdetails::after,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top-right .button.-viewdetails::after {
    content: 'arrow_forward';
    font-family: var(--font-icon);
    line-height: .3;
    margin-left: 8px;
    transform: translateY(2px)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top-right .button.-viewdetails:focus,
html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top-right .button.-viewdetails:hover,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top-right .button.-viewdetails:focus,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top-right .button.-viewdetails:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--c-accent)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top-right .mb-compare-row.-thumbs img,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top-right .mb-compare-row.-thumbs img {
    aspect-ratio: 1/1;
    object-fit: contain;
    width: 280px;
    max-width: 100%
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row.-header,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row.-header {
    align-items: start;
    padding: var(--spacing-s) 0
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row.-header h3,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row.-header h3 {
    font-size: var(--f-2xl);
    display: flex;
    align-items: center;
    width: 100%
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row.-header h3::before,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row.-header h3::before {
    order: 2;
    margin-inline: auto 0;
    border: 0;
    font-size: 32px;
    font-weight: 700;
    font-stretch: normal;
    color: var(--c-em-full);
    transform: translateY(-60%)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row {
    padding-inline: 0
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row .product-pricing,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row .product-pricing {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row .product-sales-price,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row .product-sales-price {
    color: var(--c-em-full);
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-body)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row.-header,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row.-header {
    border-bottom: 1px solid var(--c-border)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row .mb-compare-cell,
html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row .mb-compare-cell-attribute,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row .mb-compare-cell,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row .mb-compare-cell-attribute {
    border-bottom: 1px solid var(--c-em-2xlow);
    max-width: none;
    min-width: auto
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row .mb-compare-cell,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row .mb-compare-cell {
    border-left: 0;
    border-right: 0;
    padding-block: var(--spacing-xs)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row .mb-compare-cell .attr-true.attr-true,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row .mb-compare-cell .attr-true.attr-true {
    background: 0 0
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row .mb-compare-cell .attr-true.attr-true::before,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row .mb-compare-cell .attr-true.attr-true::before {
    font-family: var(--font-icon);
    content: 'check';
    font-size: 24px;
    font-weight: 600;
    color: var(--c-form-feedback-positive);
    line-height: .3
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row .mb-compare-cell .attr-false.attr-false:before,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row .mb-compare-cell .attr-false.attr-false:before {
    opacity: .7;
    font-weight: 600
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row .mb-compare-cell .atAGlance,
html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row .mb-compare-cell .boxContents,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row .mb-compare-cell .atAGlance,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row .mb-compare-cell .boxContents {
    padding: var(--spacing-s) var(--spacing-m) var(--spacing-s) 0
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row .mb-compare-cell .atAGlance li,
html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row .mb-compare-cell .boxContents li,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row .mb-compare-cell .atAGlance li,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row .mb-compare-cell .boxContents li {
    text-wrap: pretty
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row .mb-compare-cell-attribute,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row .mb-compare-cell-attribute {
    order: -1200;
    font-size: clamp(var(--f-m), 1.6vw, var(--f-l));
    font-family: var(--font-body);
    font-weight: 600;
    text-align: left;
    padding-block: var(--spacing-s)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row.-highlight,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row.-highlight {
    background: var(--c-button);
    color: var(--c-button-copy)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row.-highlight .mb-compare-cell .attr-true.attr-true::before,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row.-highlight .mb-compare-cell .attr-true.attr-true::before {
    color: inherit
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-section,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-section {
    padding-bottom: var(--spacing-m)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-section:has(.-header.-inactive),
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-section:has(.-header.-inactive) {
    padding-bottom: 0
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-nav,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-nav {
    margin-inline: var(--side-offset-negative);
    width: calc(100% + var(--side-offset));
    padding-left: var(--side-offset);
    padding-right: 0
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-nav.-fixed,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-nav.-fixed {
    background-color: var(--c-canvas);
    border-radius: 0;
    box-shadow: none;
    border-bottom: thin solid var(--c-em-3xlow)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-nav select,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-nav select {
    color: var(--c-em-high);
    line-height: 40px;
    font-weight: 500;
    border: 0;
    border-bottom: 3px solid var(--c-accent);
    font-size: var(--f-l);
    border-radius: 0;
    min-height: 45px;
    background-color: transparent;
    text-align: center;
    width: 100%
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-nav select:hover,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-nav select:hover {
    background-color: transparent
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-nav select option,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-nav select option {
    font-size: 16px
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .select2-container--default .select2-selection--single,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .select2-container--default .select2-selection--single {
    border: 0;
    border-bottom: 3px solid var(--c-em-accent);
    border-radius: 0;
    font-weight: 600;
    height: 40px
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--c-em-high);
    line-height: 40px;
    font-weight: 500;
    border: 0;
    border-bottom: 3px solid var(--c-accent);
    font-size: var(--f-l)
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 32px
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow::before,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow::before {
    font-family: var(--font-icon);
    content: 'expand_more';
    font-size: 24px;
    font-weight: 500
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow b,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-tooltip::before,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-tooltip::before {
    font-family: var(--font-icon);
    content: 'info';
    font-variation-settings: 'FILL' 1;
    font-size: 20px
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper.-ds .mb-compare-row .mb-compare-cell[aria-label]::before,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper.-ds .mb-compare-row .mb-compare-cell[aria-label]::before {
    display: none
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper:not(.-ds) .mb-compare-row.-buttons .mb-compare-cell,
html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper:not(.-ds) .mb-compare-row.-buttons .mb-compare-cell {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 24px
}

html :where(.mb-wrapper[data-realm=sfra]) .compare-wrapper .container-narrow,
html :where(.mb-wrapper[data-realm=sfra]) .page-breadcrumb {
    margin-inline: auto;
    max-width: var(--sizing-max-page)
}

html :where(.mb-wrapper[data-realm=sfra]) :where(.mb-compare-section, .mb-compare-top-right) .mb-compare-cell>* {
    contain-intrinsic-size: auto 23px
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-dt-decision .result-wrapper .mb-compare-cell>* {
    content-visibility: visible !important
}

html :where(.mb-wrapper[data-realm=sfra]) .mb-dt-decision .result-wrapper .mb-compare-cell>.hidden>* {
    content-visibility: hidden !important
}

html :where(.mb-wrapper[data-realm=sfra]) .search-result-items.tiles-container.mb-tiles-container.-v2 {
    grid-gap: .5px
}

html :where(.mb-wrapper[data-realm=sfra]) .search-result-items.tiles-container.mb-tiles-container.-v2 .product-tile {
    border-radius: 0
}

html :where(.mb-wrapper[data-realm=sfra]) .search-result-items.tiles-container.mb-tiles-container.-v2 .product-tile .product-info {
    padding-bottom: 16px
}

html :where(.mb-wrapper[data-realm=sfra]) .search-result-items.tiles-container.mb-tiles-container.-v2 .product-tile .product-info .product-swatches {
    padding: var(--spacing-xs) 0 0;
    margin-top: 0;
    min-height: 50px
}

html :where(.mb-wrapper[data-realm=sfra]) .search-result-items.tiles-container.mb-tiles-container.-v2[data-slides-lg] {
    overflow: clip
}

html :where(.mb-wrapper[data-realm=sfra]) .search-result-items.tiles-container.mb-tiles-container.-v2[data-slides-lg] .slick-slide>div {
    padding: 1px 0 0
}

html :where(.mb-wrapper[data-realm=sfra]) .search-result-items.tiles-container.mb-tiles-container.-v2[data-slides-lg] .slick-list {
    padding-inline: var(--side-offset)
}

html :where(.mb-wrapper[data-realm=sfra]) .product-tile {
    --c-pricing: var(--c-product-card-pricing);
    --elevation-2: none;
    background-color: var(--c-product-card-canvas);
    height: 100%;
    margin: 0;
    border: 0;
    outline: 1px solid var(--c-accent);
    border-radius: 0
}

html :where(.mb-wrapper[data-realm=sfra]) .product-tile:hover {
    box-shadow: none
}

html :where(.mb-wrapper[data-realm=sfra]) .product-tile>.product-image {
    background-color: transparent !important
}

html :where(.mb-wrapper[data-realm=sfra]) .product-tile .product-info {
    text-align: left;
    display: flex;
    flex-direction: column;
    color: var(--c-em-high);
    padding: 0 var(--spacing-s) var(--spacing-s);
    width: 100%
}

html :where(.mb-wrapper[data-realm=sfra]) .product-tile .product-info .product-name {
    font-family: var(--font-body) !important;
    line-height: 1.4;
    max-height: 4em;
    margin-bottom: var(--spacing-xs);
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--f-m);
    color: var(--c-em-full);
    border-top: thin solid var(--c-accent);
    padding-top: var(--sizing-product-card-padding);
    border-bottom: 0
}

html :where(.mb-wrapper[data-realm=sfra]) .product-tile .product-info .product-description {
    line-height: 1.4;
    max-height: 3em;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--c-em-high);
    font-size: var(--f-s) !important;
    min-height: 3em;
    margin-bottom: var(--spacing-xs);
    text-wrap: pretty
}

html :where(.mb-wrapper[data-realm=sfra]) .product-tile .product-info .product-pricing {
    font-family: var(--font-body)
}

html :where(.mb-wrapper[data-realm=sfra]) .product-tile .product-info .product-pricing .product-sales-price {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--c-product-card-pricing);
    font-size: var(--f-m)
}

html :where(.mb-wrapper[data-realm=sfra]) .product-tile .product-info .product-swatches {
    padding: var(--spacing-xs) 0 0;
    order: -1;
    margin-top: 0;
    min-height: 50px
}

html :where(.mb-wrapper[data-realm=sfra]) .product-tile .product-info .product-swatches .swatch-list {
    justify-content: start
}

html :where(.mb-wrapper[data-realm=sfra]) .product-tile .product-info .product-swatches .swatch-list li {
    border-radius: 0;
    margin: 0 6px 0 0;
    width: 24px;
    height: 24px
}

html :where(.mb-wrapper[data-realm=sfra]) .product-tile .product-info .product-swatches .swatch-list li.active {
    border: thin solid var(--c-em-full);
    border-radius: 0;
    transform: scale(1)
}

html :where(.mb-wrapper[data-realm=sfra]) .product-tile .product-info .product-swatches .swatch-list li.more {
    background: 0 0;
    border: none;
    color: var(--c-em-low);
    border-radius: 0;
    font-size: var(--f-xl);
    align-items: center;
    justify-content: center
}

html :where(.mb-wrapper[data-realm=sfra]) .product-tile .product-info .product-swatches .swatch-list li.more span {
    color: var(--c-em-xlow);
    font-size: var(--f-xl)
}

html :where(.mb-wrapper[data-realm=sfra]) .product-tile .product-info .product-swatches .swatch-list li.more:hover {
    transform: scale(1)
}

html :where(.mb-wrapper[data-realm=sfra]) .product-tile .product-info .product-swatches .swatch-list li.more:hover span {
    margin-top: -4px;
    color: var(--c-em-full);
    font-size: var(--f-xl)
}

html :where(.mb-wrapper[data-realm=sfra]) .product-tile .product-info .product-swatches .swatch-list li img {
    border-radius: 0
}

html :where(.mb-wrapper[data-realm=sfra]) .product-tile .bottom {
    width: 100%;
    padding: 6px var(--spacing-s) var(--spacing-s);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end
}

html :where(.mb-wrapper[data-realm=sfra]) :where(.mb-wrapper) .ds-product-series-package h2 {
    text-transform: uppercase
}

html :where(.mb-wrapper[data-realm=sfra]) :where(.mb-wrapper) .ds-product-series-package .product-grid .bottom,
html :where(.mb-wrapper[data-realm=sfra]) :where(.mb-wrapper) .ds-product-series-package .product-grid .cartButton_container {
    display: none
}

html .mb-wrapper[data-realm=sfra] .btn,
html .mb-wrapper[data-realm=sfra] .button,
html .mb-wrapper[data-realm=sfra] .cta {
    font-family: var(--font-button, var(--font-body));
    font-size: var(--f-m);
    letter-spacing: 0;
    font-weight: 600;
    min-height: var(--button-height, 40px);
    border-radius: 0
}

.compare-wrapper .container-narrow {
    max-width: var(--sizing-max-page);
    margin-inline: auto
}

.compare-wrapper .mb-compare-top-left h2 {
    display: block !important
}

.mb-wrapper h1,
.mb-wrapper h2 {
    font-size: var(--f-h4, var(--f-2xl));
    font-size: var(--f-mobile, var(--fh-mobile, var(--f-h4, var(--f-2xl))))
}

.product-detail.product-wrapper[data-pid*=CSTM] .mb-mod-wrapper.-has-compare,
.product-detail.product-wrapper[data-pid*=CSTM] .mb-mod-wrapper:has(.mb-compare-wrapper) {
    content-visibility: hidden;
    display: none
}

.product-detail .content-pdp-slots .mb-wrapper[data-realm=sfra] .mb-compare-wrapper,
.product-detail [data-realm=sfra] .mb-mod[data-type=compare] .mb-compare-wrapper {
    overflow: clip
}

.product-detail .content-pdp-slots .mb-wrapper[data-realm=sfra] .mb-compare-wrapper .mb-compare-nav,
.product-detail [data-realm=sfra] .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-nav {
    position: sticky;
    top: var(--top-offset) !important
}

.product-detail .content-pdp-slots .mb-wrapper[data-realm=sfra] .mb-compare-wrapper:has(.mb-tooltip:focus, .mb-tooltip:focus-within, .mb-tooltip:hover),
.product-detail [data-realm=sfra] .mb-mod[data-type=compare] .mb-compare-wrapper:has(.mb-tooltip:focus, .mb-tooltip:focus-within, .mb-tooltip:hover) {
    overflow: unset
}

.compare-bar-wrapper {
    z-index: 5
}

@media (min-width:1024px) {
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper {
        --compare-products: 3
    }
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper[data-count="2"],
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper[data-size="m"],
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper[data-count="2"],
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper[data-size="m"] {
        --compare-products: 2
    }
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-nav>*,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row:not(.-header)>*,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top>*,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-nav>*,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row:not(.-header)>*,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top>* {
        min-width: calc(100% / (var(--compare-products) + 1));
        max-width: calc(100% / (var(--compare-products) + 1))
    }
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-nav .mb-compare-top-right .mb-compare-row>*,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row:not(.-header) .mb-compare-top-right .mb-compare-row>*,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top .mb-compare-top-right .mb-compare-row>*,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-nav .mb-compare-top-right .mb-compare-row>*,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row:not(.-header) .mb-compare-top-right .mb-compare-row>*,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top .mb-compare-top-right .mb-compare-row>* {
        min-width: calc(100% / var(--compare-products));
        max-width: calc(100% / var(--compare-products))
    }
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-nav .mb-compare-top-right,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row:not(.-header) .mb-compare-top-right,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top .mb-compare-top-right,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-nav .mb-compare-top-right,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row:not(.-header) .mb-compare-top-right,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top .mb-compare-top-right {
        min-width: calc(100% - (100% / (var(--compare-products) + 1)));
        max-width: calc(100% - (100% / (var(--compare-products) + 1)))
    }
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-nav .mb-compare-cell:first-child,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-nav .mb-compare-cell:first-child {
        grid-column: 3/span 2
    }
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper[data-count="2"] .mb-compare-nav .mb-compare-cell,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper[data-count="2"] .mb-compare-row:not(.-header) .mb-compare-cell,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper[data-count="2"] .mb-compare-nav .mb-compare-cell,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper[data-count="2"] .mb-compare-row:not(.-header) .mb-compare-cell {
        grid-column: span 3
    }
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper[data-count="2"] .mb-compare-nav .mb-compare-cell:first-child,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper[data-count="2"] .mb-compare-nav .mb-compare-cell:first-child {
        grid-column: 3/span 3
    }
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top-left,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top-left {
        margin-top: -40px;
        padding-right: var(--spacing-s)
    }
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-nav,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-nav {
        padding-left: calc((100% / (var(--compare-products) + 1)) + var(--side-offset))
    }
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-tools~.mb-compare-nav .mb-compare-cell:first-child,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-tools~.mb-compare-nav .mb-compare-cell:first-child {
        grid-column: 1/span 2
    }
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-tools~.mb-compare-nav .mb-compare-cell:is([data-column=compare-column-4]),
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-tools~.mb-compare-nav .mb-compare-cell:is([data-column=compare-column-4]) {
        display: flex !important
    }
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper:not(.-ds) .mb-compare-cell[data-column=compare-column-4],
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper:not(.-ds) .mb-compare-cell[data-column=compare-column-4] {
        display: flex !important
    }
    html :where(.mb-wrapper[data-realm=sfra]) :where(.mb-compare-section, .mb-compare-top-right) .mb-compare-cell:not([data-column*="-1"], [data-column*="-2"], [data-column*="-3"])>* {
        content-visibility: hidden
    }
    html :where(.mb-wrapper[data-realm=sfra]) .search-result-items.tiles-container.mb-tiles-container.-v2 .product-tile {
        pointer-events: all
    }
    html :where(.mb-wrapper[data-realm=sfra]) .search-result-items.tiles-container.mb-tiles-container.-v2 .product-tile .bottom .cta.-viewdetails {
        margin-right: auto;
        width: auto;
        transition: 0s
    }
    .mb-wrapper h1,
    .mb-wrapper h2 {
        font-size: var(--f-desktop, var(--fh-desktop, var(--f-h4, var(--f-2xl))))
    }
}

@media (min-width:1920px) {
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-nav,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-nav {
        width: calc(100% + var(--side-offset))
    }
}

@media (max-width:1400px) and (pointer:coarse) {
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper.-swipable::before,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper.-swipable::before {
        font-family: 'Material Icons';
        display: none
    }
}

@media (max-width:1023px) {
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top {
        order: -1;
        padding-bottom: var(--spacing-m);
        flex-direction: column
    }
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top .mb-compare-row.-thumbs,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top .mb-compare-row.-thumbs {
        padding-top: 0
    }
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-nav,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-nav {
        margin-bottom: var(--spacing-m)
    }
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-top-left,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-top-left {
        margin-top: var(--spacing-l);
        grid-column: 1/-1
    }
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-row .mb-compare-cell-attribute,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-row .mb-compare-cell-attribute {
        grid-column: 1/-1;
        border: 0;
        padding-bottom: var(--spacing-2xs)
    }
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-section .mb-compare-row,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-section .mb-compare-row {
        position: relative;
        padding-top: 48px
    }
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-section .mb-compare-row .mb-compare-cell-attribute,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-section .mb-compare-row .mb-compare-cell-attribute {
        position: absolute;
        top: 0;
        max-width: 100%;
        text-wrap: pretty;
        line-height: 1em;
        max-height: 3em;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis
    }
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper .mb-compare-section .mb-compare-row .mb-compare-cell,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-section .mb-compare-row .mb-compare-cell {
        min-width: 50%;
        max-width: 50%
    }
    html :where(.mb-wrapper[data-realm=sfra]) :where(.mb-compare-section, .mb-compare-top-right) .mb-compare-cell:not([data-column*="-1"], [data-column*="-2"], [style*="translate: -"])>* {
        content-visibility: hidden
    }
    html :where(.mb-wrapper[data-realm=sfra]) .product-tile .product-info .product-swatches .swatch-list {
        margin-inline: 0
    }
    .product-detail .content-pdp-slots .mb-wrapper[data-realm=sfra] .mb-compare-wrapper .mb-compare-nav,
    .product-detail [data-realm=sfra] .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-nav {
        container: unset;
        transform: translate3d(0, 0, 0);
        transform-style: preserve-3d;
        backface-visibility: hidden;
        --top-offset: 0
    }
}

@media (max-width:768px) {
    html :where(.mb-wrapper[data-realm=sfra]) .mb-compare-include .mb-compare-wrapper h2,
    html :where(.mb-wrapper[data-realm=sfra]) .mb-mod[data-type=compare] .mb-compare-wrapper h2 {
        text-align: center
    }
}

@media (max-width:500px) {
    .product-detail .content-pdp-slots .mb-wrapper[data-realm=sfra] .mb-compare-wrapper .mb-compare-nav,
    .product-detail [data-realm=sfra] .mb-mod[data-type=compare] .mb-compare-wrapper .mb-compare-nav {
        --top-offset: 0
    }
}