:root{--navy: #1a325e; --blue: #1a325e; --red: #b41e43; --yellow: #ffca28; --ink: #1a325e; --muted: #536984; --line: #d8e2ef; --soft: #f5f8fc; --sidebar: 240px; --radius: 16px;}
*{box-sizing: border-box;}
html{margin: 0px; height: 100%; font-family: "Segoe UI", Arial, Helvetica, sans-serif; color: var(--ink); background: var(--soft);}
body{margin: 0px; height: 100%; font-family: "Segoe UI", Arial, Helvetica, sans-serif; color: var(--ink); background: var(--soft);}
body{overflow: hidden;}
button{font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit;}
input{font: inherit;}
select{font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit;}
textarea{font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit;}
button{touch-action: manipulation;}
a{touch-action: manipulation;}
summary{touch-action: manipulation;}
button{cursor: pointer; border: 1px solid var(--line); background: white; color: var(--navy); border-radius: 10px; min-height: 44px; padding: 10px 14px; font-weight: 700;}
button:hover{filter: brightness(0.95);}
button:disabled{opacity: 0.4; cursor: default;}
a{color: inherit;}
img{display: block; max-width: 100%;}
h1{margin-top: 0px;}
h2{margin-top: 0px;}
h3{margin-top: 0px;}
h4{margin-top: 0px;}
p{margin-top: 0px;}
p{line-height: 1.5;}
button:focus-visible{outline: 3px solid var(--yellow); outline-offset: 3px;}
a:focus-visible{outline: 3px solid var(--yellow); outline-offset: 3px;}
input:focus-visible{outline: 3px solid var(--yellow); outline-offset: 3px;}
select:focus-visible{outline: 3px solid var(--yellow); outline-offset: 3px;}
summary:focus-visible{outline: 3px solid var(--yellow); outline-offset: 3px;}
[tabindex]:focus-visible{outline: 3px solid var(--yellow); outline-offset: 3px;}
.hidden{display: none !important;}
.sr-only{position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);}
input:not([type="checkbox"]){width: 100%; min-height: 46px; border: 1px solid rgb(146, 164, 187); border-radius: 9px; background: rgb(255, 255, 255); color: var(--ink); padding: 10px; font-size: 16px;}
select{width: 100%; min-height: 46px; border: 1px solid rgb(146, 164, 187); border-radius: 9px; background: rgb(255, 255, 255); color: var(--ink); padding: 10px; font-size: 16px;}
textarea{width: 100%; min-height: 46px; border: 1px solid rgb(146, 164, 187); border-radius: 9px; background: rgb(255, 255, 255); color: var(--ink); padding: 10px; font-size: 16px;}
input[type="checkbox"]{width: 22px; height: 22px; accent-color: var(--navy); flex-shrink: 0;}
summary{cursor: pointer; min-height: 44px; padding: 12px 0px; font-weight: 700;}
small{font-size: 13px; color: var(--muted);}
#catalogView{height: 100dvh;}
.sidebar{position: fixed; inset: 0px auto 0px 0px; width: var(--sidebar); color: white; overflow-y: auto; z-index: 20;}
.brand{margin-top: 4px; margin-right: auto; margin-left: auto; width: 135px; height: 135px; border-radius: 50%; background: white; display: grid; place-items: center;}
.sidebar-brand-art{width: 112px;}
.side-btn{width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; border: 0px; border-radius: 9px; background: transparent; color: white;}
.utility-item{width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border: 0px; border-radius: 9px; background: transparent; color: white;}
.side-btn.active{box-shadow: inset 3px 0 var(--yellow);}
.side-btn:hover{background: rgba(255, 255, 255, 0.094);}
.utility-item:hover{background: rgba(255, 255, 255, 0.094);}
.count{font-size: 13px; opacity: 0.85;}
.side-rule{border-top: 1px solid rgba(255, 255, 255, 0.208); margin: 18px 0px;}
.sidebar-section-label{opacity: 0.7; padding: 0px 10px 8px;}
.utility-item{justify-content: flex-start; text-decoration: none;}
.utility-icon{width: 20px; text-align: center;}
.instagram-label em{display: block; font-size: 12px;}
.sidebar-info{padding-bottom: 12px;}
#navigationClose{display: none;}
#webMachinesTab{display: none;}
#catalogMain{margin-left: var(--sidebar); height: calc(100dvh - 58px); overflow: auto; padding: 22px 24px 40px; scroll-padding-top: 16px;}
.catalog-header{display: flex; justify-content: space-between; gap: 20px;}
.crumbs{display: flex; gap: 10px; font-size: 13px; margin-bottom: 12px; color: var(--muted);}
.acc-crumbs{display: flex; gap: 10px; font-size: 13px; margin-bottom: 12px; color: var(--muted);}
.top-quote{border: 0px; background: var(--navy); color: white; display: flex; align-items: center; gap: 10px; border-radius: 28px; white-space: nowrap; box-shadow: rgba(26, 50, 94, 0.125) 0px 6px 20px;}
.acc-top-quote{border: 0px; background: var(--navy); color: white; display: flex; align-items: center; gap: 10px; border-radius: 28px; white-space: nowrap; box-shadow: rgba(26, 50, 94, 0.125) 0px 6px 20px;}
.badge{display: grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: white; font-size: 13px;}
.category-head h2{margin: 0px 0px 6px;}
.controls{display: flex; align-items: center; gap: 8px;}
.sort{position: relative;}
.sort-trigger{display: flex; justify-content: space-between;}
.sort-menu{display: none; position: absolute; right: 0px; top: 100%; width: 210px; z-index: 25; background: white; padding: 6px; box-shadow: rgba(26, 50, 94, 0.145) 0px 8px 30px; border-radius: 12px;}
.sort.open .sort-menu{display: block;}
.sort-menu button{width: 100%; text-align: left; border: 0px;}
.view-btn.active{background: var(--navy); color: white;}
.family-heading{justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--line);}
.family-heading h3{margin: 0px;}
.family-heading p{margin: 0px; font-size: 13px; color: var(--muted);}
.grid{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 16px;}
.machine-card{border: 1px solid var(--line); border-radius: var(--radius); background: white; overflow: hidden; display: flex; flex-direction: column; box-shadow: rgba(26, 50, 94, 0.016) 0px 4px 12px;}
.card-hero{height: 230px; position: relative; padding: 12px;}
.card-hero > img{width: 100%; height: 100%; object-fit: contain;}
.code-pill{position: absolute; left: 12px; top: 12px; font-size: 11px; color: white; background: rgb(7, 99, 170); border-radius: 7px; padding: 5px 8px;}
.price-pill{position: absolute; right: 12px; top: 48%; background: var(--yellow); border-radius: 8px; font-weight: 800; padding: 8px 10px;}
.zoom-btn{position: absolute; right: 10px; bottom: 8px; width: 44px; min-height: 44px; border-radius: 50%; padding: 0px;}
.card-body{display: flex; flex-direction: column; flex: 1 1 0%;}
.card-family{font-size: 12px; background: rgb(237, 244, 255); padding: 4px 7px; border-radius: 12px; display: inline-block;}
.card-desc{color: var(--muted); margin: 0px;}
.specs{display: grid; grid-template-columns: 1.5fr 1fr; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; line-height: 1.5;}
.specs > div + div{border-left: 1px solid var(--line);}
.specs h4{font-size: 12px; color: var(--muted); margin-top: 0px; margin-right: 0px; margin-left: 0px;}
.measure{display: block; font-weight: 700;}
.weight{font-weight: 700;}
.card-extra{font-size: 13px;}
.card-extra summary{display: none; font-size: 13px;}
.ideal-label{font-size: 12px; font-weight: 700; color: var(--muted);}
.colors-label{font-size: 12px; font-weight: 700; color: var(--muted);}
.pills{display: flex; flex-wrap: wrap;}
.pill{border-radius: 20px; background: rgb(237, 244, 255); font-size: 12px;}
.colors-row{margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;}
.swatches{display: flex;flex-wrap:wrap; gap: 4px;}
.swatch{padding: 0px; width: 36px; min-height: 44px; border: 0px; background: transparent; position: relative;}
.swatch::before{content: ""; position: absolute; width: 23px; height: 23px; border-radius: 50%; top: 10px; left: 6px; box-shadow: rgb(169, 185, 207) 0px 0px 0px 1px; background: var(--swatch);}
.swatch.selected::after{content:"✓";position:absolute;top:10px;left:6px;width:23px;height:23px;display:grid;place-items:center;font-size:15px;font-weight:700;color:white}.swatch.selected.white::after,.swatch.selected.yellow::after{color:var(--navy)}
.swatch.black{--swatch: #171717;}
.swatch.yellow{--swatch: #ffca28;}
.swatch.red{--swatch: #b41e43;}
.swatch.blue{--swatch: #286ac6;}
.swatch.white{--swatch: #fff;}
.swatch.orange{--swatch:#f28c28;}
.swatch.green{--swatch:#24934a;}
.swatch.pink{--swatch:#ed80b1;}
.card-config{border-top: 1px solid var(--line); font-size: 13px;}
.card-config summary{font-size: 13px; display: flex; justify-content: space-between; gap: 8px;}
.card-config summary span{font-weight: 400; color: var(--muted);}
.payment-explanation{font-size: 13px; line-height: 1.5; margin: 0px 0px 8px; color: var(--muted);}
.card-config label{display: flex; gap: 8px; align-items: center; padding: 8px 0px; min-height: 44px;}
.card-config b{margin-left: auto; white-space: nowrap;}
.add-btn{display: flex; justify-content: center; gap: 10px; align-items: center; background: var(--navy); color: white; border: 0px; width: 100%; font-size: 14px;}
.add-btn.added{background: rgb(33, 114, 70);}
.list-view .grid{grid-template-columns: 1fr;}
.list-view .machine-card{display: grid; grid-template-columns: 250px 1fr;}
.list-view .card-hero{height: 100%; min-height: 300px;}
.list-view .card-body{display: grid; grid-template-columns: 1fr 1fr;}
.list-view .card-desc{min-height: 0px;}
#desktopBenefits{position: fixed; bottom: 0px; left: var(--sidebar); right: 0px; height: 58px; background: white; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-around; z-index: 5; padding: 8px; gap: 12px;}
.benefit{display: flex; align-items: center; gap: 8px;}
.benefit-icon{width: 28px; height: 28px;}
.benefit strong{font-size: 11px; display: block;}
.benefit small{font-size: 10px; display: block;}
.poland-flag{display: block; background: linear-gradient(white 50%,var(--red) 50%); border: 1px solid var(--line); width: 24px; height: 16px;}
#accessoriesMain{display: none; position: fixed; left: var(--sidebar); right: 0px; top: 0px; bottom: 0px; overflow: auto; background: var(--soft);}
#accessoriesMain.open{display: block;}
.acc-wrap{max-width: 1250px; margin: auto;}
.acc-section h2{font-size: 24px; margin-bottom: 6px;}
.acc-grid{display: grid;}
.acc-card{background: white; border: 1px solid var(--line); flex-direction: column;}
.acc-card-body{display: flex; flex-direction: column; flex: 1 1 0%;}
.acc-card-foot{flex-wrap: wrap;}
.acc-card-foot button{flex: 1 1 0%;}
.acc-add-part{border-width: 0px; border-style: none; border-image: none;}
.feature-cta{background: var(--navy); color: white; border: 0px;}
.acc-parts-cta{align-items: center; gap: 24px;}
.acc-parts-copy{flex: 1 1 0%;}
.acc-parts-btn{min-width: 220px;}
.parts-search-wrap{display: flex; align-items: center; gap: 16px; margin: 20px 0px;}
.parts-search-wrap span{white-space: nowrap; font-size: 14px;}
.acc-parts-list{display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 16px;}
.parts-catalog-card{background: var(--soft); border: 1px solid var(--line); padding: 14px; border-radius: 12px; display: flex; flex-direction: column;}
.parts-catalog-title{min-height: 40px; margin-bottom: 8px;}
.parts-catalog-image{height: 170px; cursor: zoom-in;}
.parts-catalog-image img{width: 100%; height: 100%; object-fit: contain;}
.parts-catalog-info{margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;}
.parts-catalog-sku{font-weight: 700;}
.parts-request-link{font-size: 12px; min-height: 44px; display: flex; align-items: center;}
.acc-part-add{font-size: 12px; background: var(--navy); color: white;}
.acc-parts-actions{display: flex; justify-content: space-between; gap: 12px; margin-top: 24px;}
.acc-parts-nav:empty{display: none;}
#quoteAside{display: none; position: fixed; inset: 0 0 0 var(--sidebar); overflow: auto; background: rgb(242, 245, 250); padding: 12px 18px 28px; z-index: 40;}
#quoteAside.open{display: block;}
.quoteAsideHeadV2{display: flex; justify-content: space-between; align-items: center; padding: 8px 4px 12px; border-bottom: 1px solid rgb(220, 229, 241); margin-bottom: 8px; background: white;}
.quoteAsideHeadV2 > div{display: flex; align-items: center; gap: 9px;}
.quoteAsideHeadV2 h2{margin: 0px;}
.quoteBigIcon{font-size: 21px;}
.quoteDrawerClose{width: 40px; min-height: 40px; padding: 0px; border-radius: 50%; color: var(--red); background: white; box-shadow: rgba(26, 50, 94, 0.07) 0px 2px 8px;}
.quoteDivider{display: none;}
.quoteSelectedMachinesBox{border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: white; margin: 0px 0px 10px;}
.quoteSelectionBar{justify-content: space-between;}
.quoteMachineHeadActions{align-items: center; justify-content: space-between;}
.quoteSpareHead{justify-content: space-between;}
.quoteSpareHeadActions{align-items: center; justify-content: space-between; gap: 10px;}
.quoteSelectionBar{border-bottom: 1px solid rgb(223, 231, 241); min-height: 42px;}
.quoteMachineHeadActions{gap: 8px;}
.quoteItemCountPill{font-size: 11px; white-space: nowrap; padding: 6px 10px; border-radius: 20px; color: white; background: var(--red); font-weight: 700;}
.machineQuoteCarousel{display: grid; grid-template-columns: 32px minmax(0px, 1fr) 32px; gap: 8px; padding: 10px 8px; background: rgb(234, 240, 248); align-items: center; position: relative;}
.quoteTrack{container-type: inline-size; display: flex; gap: 14px; overflow-x: auto; align-items: stretch; scroll-snap-type: x; scrollbar-width: thin; scrollbar-color: rgb(172, 189, 212) transparent; padding-bottom: 3px; grid-area: 1 / 2;}
.machineCarouselArrow{width: 32px; min-height: 44px; padding: 0px; border: 1px solid rgb(243, 213, 164); border-radius: 8px; background: rgb(255, 240, 216); color: var(--navy); font-size: 24px;}
.machineCarouselPrev{grid-area: 1 / 1;}
.machineCarouselNext{grid-area: 1 / 3; float: none;}
.quoteNavStatus{grid-area: 2 / 1 / auto / -1; text-align: center; font-size: 12px; color: var(--muted); margin: 0px;}
.dq-item{flex: 0 0 100%; min-width: 0px; border: 1px solid rgb(220, 229, 240); border-radius: 10px; overflow: hidden; background: white; scroll-snap-align: start; box-shadow: rgba(26, 50, 94, 0.016) 0px 2px 6px;}
.dq-summary{display: flex; position: relative; background: rgb(245, 247, 251); min-height: 100px; border-bottom: 1px solid rgb(225, 231, 240);}
.dq-thumb{flex: 0 0 64px; width: 64px; min-width: 0px;}
.dq-thumb img{width: 64px; height: 90px; object-fit: contain; cursor: zoom-in;}
.dq-heading{flex: 1 1 0%; min-width: 0px;}
.dq-code{color: var(--muted); margin: 5px 0px;}
.dq-unitbar{display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 10px; font-weight: 700;}
.dq-unitbar > span{background: rgb(234, 240, 248); padding: 5px 9px; border-radius: 18px;}
.dq-duplicate{font-size: 10px; min-height: 28px; padding: 4px 10px; border-radius: 18px; background: white;}
.dq-trash{position: absolute; width: 30px; min-height: 34px; padding: 0px; border: 1px solid var(--red); color: var(--red); border-radius: 50%; background: white;}
.dq-color-row{display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px;}
.dq-color-row > span{font-weight: 800; color: var(--muted); letter-spacing: 0.02em;}
.dq-color-row select{width: auto; max-width: 55%; min-height: 36px; padding: 6px 8px; border-color: rgb(200, 216, 236); background: white;}
.dq-configs{border: 1px solid rgb(224, 232, 242); border-radius: 9px; padding: 7px; margin-bottom: 8px;}
.dq-config-head{display: flex; align-items: flex-start; gap: 8px; margin-bottom: 7px;}
.dq-config-icon{width: 23px; height: 23px; display: grid; place-items: center; border-radius: 6px; background: rgb(238, 243, 251); font-size: 14px; flex-shrink: 0;}
.dq-config-head small{display: block; margin-top: 3px; color: var(--muted);}
.dq-config-card{display: flex; align-items: center; gap: 9px; padding: 6px; border: 1px solid rgb(223, 231, 242); border-radius: 8px; background: white; margin: 6px 0px; cursor: pointer;}
.dq-config-card:has(input:checked){background: rgb(240, 246, 255); border-color: rgb(146, 176, 215);}
.dq-config-card input{width: 18px; height: 18px; margin: 0px; flex-shrink: 0;}
.dq-config-img{width: 39px; height: 46px; display: grid; place-items: center; background: white; border: 1px solid rgb(224, 231, 241); border-radius: 6px; flex-shrink: 0; cursor: zoom-in;}
.dq-config-img img{height: 40px; width: 34px; object-fit: contain;}
.dq-config-info{display: flex; flex: 1 1 0%; min-width: 0px; align-items: center; justify-content: space-between; gap: 8px;}
.dq-config-info b{font-weight: 700;}
.dq-config-info strong{white-space: nowrap; font-weight: 800;}
.dq-config-total{display: flex; justify-content: space-between; gap: 12px; font-size: 11px; align-items: center; font-weight: 700; color: var(--muted); border-top: 1px solid rgb(224, 231, 241);}
.dq-machine-price{display: flex; justify-content: space-between; gap: 12px; padding: 8px 0px; font-size: 11px; align-items: center; font-weight: 700; color: var(--muted); border-top: 1px solid rgb(224, 231, 241);}
.dq-unit-subtotal{display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; padding-right: 0px; padding-left: 0px; align-items: center; font-weight: 700;}
.dq-config-total{padding: 7px 0px 0px;}
.dq-config-total strong{font-size: 14px; color: var(--navy);}
.dq-machine-price strong{font-size: 14px; color: var(--navy);}
.dq-unit-subtotal{color: var(--navy); font-size: 12px; border-top: 2px solid rgb(214, 225, 239); padding-bottom: 0px;}
.dq-unit-subtotal strong{letter-spacing: -0.025em;}
.quote-empty{width: 100%; padding: 26px; margin: 0px; text-align: center; color: var(--muted); font-size: 14px; background: white; border: 1px dashed rgb(185, 201, 221); border-radius: 10px;}
#quoteSpareParts{margin: 10px 0px;}
.quoteSpareHead{border: 1px solid var(--line); border-radius: 10px 10px 0px 0px; font-size: 11px;}
.quoteSpareCarousel{display: grid; grid-template-columns: 32px minmax(0px, 1fr) 32px; align-items: center; gap: 8px; padding: 10px; background: rgb(234, 240, 248); border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top: 0px; border-radius: 0px 0px 10px 10px;}
.quoteSpareArrow{width: 32px; min-height: 44px; font-size: 24px; padding: 0px; border-radius: 8px; background: rgb(255, 240, 216); border-color: rgb(243, 213, 164);}
.quoteSpareViewport{overflow-x: auto; scroll-snap-type: x; scrollbar-width: thin;}
.quoteSpareTrack{container-type: inline-size; display: flex; gap: 12px; padding-bottom: 3px;}
.quoteSpareItem{display: flex; align-items: center; gap: 10px; background: white; border: 1px solid var(--line); border-radius: 10px; padding: 12px; flex: 0 0 100%; min-width: 0px; scroll-snap-align: start;}
.quoteSpareMedia{width: 60px; flex-shrink: 0;}
.quoteSpareThumb img{width: 60px; height: 64px; object-fit: contain;}
.quoteSpareQty{display: flex; gap: 5px; align-items: center; justify-content: center; margin-top: 6px; font-size: 12px;}
.quoteSpareQty button{padding: 0px; min-height: 30px; width: 24px; border-radius: 5px;}
.quoteSpareInfo{flex: 1 1 0%; min-width: 0px;}
.quoteSpareSku{font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.35;}
.quoteSpareDesc{font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.35;}
.quoteSpareRight{align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px;}
.quoteSparePrice{font-size: 14px; font-weight: 800; white-space: nowrap;}
.quoteSpareRemove{width: 30px; min-height: 34px; padding: 0px; border: 0px; color: var(--red);}
.quoteSparePage{text-align: center; font-size: 12px; color: var(--muted); margin: 8px 0px;}
.quoteSpareSubtotal{display: flex; justify-content: space-between; font-weight: 700;}
.quoteAsideFooterV2{padding: 0px; margin-top: 10px;}
.quoteTotals{display: grid; grid-template-columns: 1fr 1fr 0.9fr 1.15fr; gap: 8px; align-items: stretch;}
.quoteTotals > div{display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 9px; background: white; padding: 12px 10px; font-size: 12px; min-height: 46px;}
.quoteTotals strong{white-space: nowrap; font-size: 14px;}
.quoteDetailsInline{justify-content: center;}
.quoteDetailsBtn{background: transparent; border: 0px; min-height: 26px; padding: 0px; font-size: 12px; white-space: normal;}
.quoteTotals .grand{border-color: var(--navy);}
.quoteTotals .grand strong{font-size: 20px; letter-spacing: -0.03em;}
.quote-total-note{color: var(--muted); padding: 8px 4px;}
.quote-total-note > strong{display: block; color: var(--navy); font-size: 13px;}
.quote-total-note span{display: block;}
.desktop-request{display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; background: var(--navy); color: white; border: 0px; border-radius: 10px; font-size: 13px; font-weight: 800; position: relative; box-shadow: rgba(26, 50, 94, 0.094) 0px 4px 12px;}
.desktop-request > span{position: absolute; right: 14px; font-size: 20px;}
@container (min-width: 521px) {
.dq-item{flex-basis: calc(50% - 7px);}
.quoteSpareItem{flex-basis: calc(50% - 6px);}
}
@container (min-width: 1041px) {
.dq-item{flex-basis: calc(33.3333% - 9.33333px);}
.quoteSpareItem{flex-basis: calc(33.3333% - 8px);}
}
#infoModal{display: none; position: fixed; inset: 0px; background: rgba(16, 37, 66, 0.667); padding: 24px; overflow: auto; align-items: flex-start; justify-content: center;}
#businessModal{display: none; position: fixed; inset: 0px; background: rgba(16, 37, 66, 0.667); z-index: 60; padding: 24px; overflow: auto; align-items: flex-start; justify-content: center;}
#faqModal{display: none; position: fixed; inset: 0px; background: rgba(16, 37, 66, 0.667); z-index: 60; padding: 24px; overflow: auto; align-items: flex-start; justify-content: center;}
#requestFormModal{display: none; position: fixed; inset: 0px; background: rgba(16, 37, 66, 0.667); overflow: auto; justify-content: center;}
#uplayImageLightbox{display: none; position: fixed; inset: 0px; background: rgba(16, 37, 66, 0.667); padding: 24px; overflow: auto; align-items: flex-start; justify-content: center;}
#machineDetailsModal{display: none; position: fixed; inset: 0px; background: rgba(16, 37, 66, 0.667); z-index: 60; padding: 24px; overflow: auto; align-items: flex-start; justify-content: center;}
#accessoriesPartsModal{display: none; position: fixed; inset: 0px; background: rgba(16, 37, 66, 0.667); z-index: 60; padding: 24px; overflow: auto; align-items: flex-start; justify-content: center;}
#infoModal.open{display: flex;}
#businessModal.open{display: flex;}
#faqModal.open{display: flex;}
#requestFormModal.open{display: flex;}
#uplayImageLightbox.open{display: flex;}
#machineDetailsModal.open{display: flex;}
#accessoriesPartsModal.open{display: flex;}
#uplayImageLightbox{z-index: 90;}
#infoModal{z-index: 80;}
#requestFormModal{z-index: 75;}
.info-panel{width: 100%; border-radius: 20px; background: white; padding: 28px; position: relative; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 60px;}
.feature-panel{width: 100%; max-width: 1100px; border-radius: 20px; background: white; padding: 28px; position: relative; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 60px;}
.request-form-panel{width: 100%; border-radius: 20px; background: white; padding: 28px; position: relative; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 60px;}
.uplay-image-lightbox-panel{width: 100%; border-radius: 20px; background: white; padding: 28px; position: relative; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 60px;}
.acc-parts-panel{width: 100%; max-width: 1100px; border-radius: 20px; background: white; padding: 28px; position: relative; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 60px;}
.info-panel{max-width: 740px;}
.request-form-panel{max-width: 650px;}
.info-head{display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px;}
.acc-parts-head{display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px;}
.rf-head{display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px;}
.info-head h2{margin: 6px 0px 0px;}
.rf-title{margin: 6px 0px 0px;}
.acc-parts-head h2{margin: 6px 0px 0px;}
.info-kicker{font-size: 12px; letter-spacing: 0.1em; font-weight: 700; color: var(--red);}
.rf-kicker{font-size: 12px; letter-spacing: 0.1em; font-weight: 700; color: var(--red);}
.feature-brand{font-size: 12px; letter-spacing: 0.1em; font-weight: 700; color: var(--red);}
.info-content h3{margin-top: 24px;}
.info-note{padding: 16px; border-radius: 10px; background: var(--soft); font-size: 14px; line-height: 1.5;}
.rf-shipping-note{padding: 16px; border-radius: 10px; background: var(--soft); font-size: 14px; line-height: 1.5;}
.feature-close{position: absolute; right: 16px; top: 16px; width: 44px; padding: 0px; z-index: 2;}
.uplay-image-lightbox-close{position: absolute; right: 16px; top: 16px; width: 44px; padding: 0px; z-index: 2;}
.feature-layout{display: grid; grid-template-columns: 230px 1fr; gap: 28px;}
.feature-side h2{margin: 18px 0px;}
.feature-side h2 span{color: var(--red);}
.feature-side p{color: var(--muted);}
.feature-tabs{display: flex; flex-direction: column; gap: 6px;}
.feature-tabs button{text-align: left; font-size: 13px; display: flex; gap: 8px;}
.feature-tabs button b{margin-left: auto;}
.feature-tabs .active{background: var(--navy); color: white;}
.feature-main{min-width: 0px; padding-top: 30px;}
.feature-pane{display: none;}
.feature-pane.active{display: block;}
.bs-hero{position: relative; margin-bottom: 20px; border-radius: 14px; overflow: hidden;}
.bs-hero > img{height: 250px; width: 100%; object-fit: cover;}
.bs-hero-copy{position: absolute; bottom: 0px; left: 0px; right: 0px; padding: 18px; background: linear-gradient(transparent, rgba(16, 37, 66, 0.9)); color: white;}
.bs-hero-copy strong{font-size: 12px;}
.bs-hero-copy h3{margin: 10px 0px 0px;}
.bs-hero-copy em{font-size: 16px;}
.feature-cards{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 14px; margin: 20px 0px;}
.adv-grid{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 14px; margin: 20px 0px;}
.feature-cards > div{padding: 18px; background: var(--soft); border-radius: 12px;}
.adv-grid article{padding: 18px; background: var(--soft); border-radius: 12px;}
.feature-cards strong{display: block; font-size: 13px; line-height: 1.5;}
.feature-cards span{display: block; font-size: 13px; line-height: 1.5;}
.adv-grid article{display: flex; gap: 12px;}
.adv-grid p{color: var(--muted); margin: 8px 0px 0px;}
.feature-cta{display: inline-flex; align-items: center; justify-content: center; padding: 16px 20px; text-decoration: none; border-radius: 10px; font-size: 14px;}
.rf-section-title{font-size: 13px; font-weight: 800; margin: 24px 0px 12px;}
.rf-fields{display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}
.rf-field-full{grid-column: 1 / -1;}
.rf-field label{display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px;}
.rf-required{color: var(--red);}
.rf-field textarea{min-height: 100px; resize: vertical;}
.rf-request-summary{padding: 14px; background: var(--soft); border-radius: 10px; font-size: 14px;}
.rf-request-summary-main{display: flex; flex-wrap: wrap; gap: 8px;}
.rf-checks{margin: 20px 0px;}
.rf-check{display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.5; margin: 12px 0px; min-height: 44px;}
.rf-submit{background: var(--red); color: white; width: 100%; min-height: 52px;}
.rf-note{font-size: 12px; color: var(--muted); text-align: center; margin-top: 14px;}
.uplay-image-lightbox-panel{max-width: 850px;}
.uplay-image-lightbox-media img{height: 45dvh; width: 100%; object-fit: contain;}
.uplay-image-lightbox-title{margin: 12px 0px;}
.uplay-image-lightbox-kicker{font-size: 13px; font-weight: 800; color: var(--red); margin-top: 18px;}
.uplay-image-lightbox-copy{font-size: 16px; color: var(--muted);}
.uplay-image-lightbox-specs{display: flex; flex-wrap: wrap; gap: 30px;}
.uplay-image-lightbox-spec span{display: block; font-size: 14px; line-height: 1.5;}
.uplay-image-lightbox-spec b{display: block; font-size: 14px; line-height: 1.5;}
.uplay-image-lightbox-price{font-size: 22px; font-weight: 800; margin-top: 16px;}
@media (max-width: 1200px) {
.quoteTotals{grid-template-columns: 1fr 1fr;}
.quoteTotals .grand strong{font-size: 20px;}
.grid{grid-template-columns: repeat(2, minmax(0px, 1fr));}
.family-heading p{margin-top: 8px;}
.acc-parts-list{grid-template-columns: repeat(3, minmax(0px, 1fr));}
.benefit:last-child{display: none;}
.colors-row{display: block;}
.swatches{margin-top: 7px;}
}
@media (max-width: 900px) {
#quoteAside{inset: 0px; padding: 16px; z-index: 55;}
:root{--sidebar: 0px;}
#catalogView::before{content: ""; position: fixed; inset: 0px 0px auto; height: 74px; background: var(--soft); z-index: 30;}
.sidebar{width: 280px; transform: translateX(-100%); box-shadow: rgba(16, 37, 66, 0.145) 15px 0px 40px; z-index: 50;}
.sidebar.mobile-open{transform: translateX(0px);}
#navigationClose{display: block; position: absolute; right: 10px; top: 10px; background: transparent; border: 0px; color: white; padding: 0px; width: 44px;}
.brand{margin-top: 36px;}
.sidebar .side-btn{min-height: 48px;}
#catalogMain{height: 100dvh; padding: 90px 20px 30px; scroll-padding-top: 85px;}
#webMachinesTab{display: flex; position: fixed; top: 14px; left: 16px; z-index: 35;}
#webMachinesTab .mi{font-style: normal;}
#webMachinesTab .ma{font-style: normal;}
.ml{font-size: 13px;}
#webMachinesTab .ma{display: none;}
.catalog-header .top-quote{position: fixed; top: 14px; right: 16px; z-index: 35;}
.catalog-header h1{font-size: 28px;}
.controls > span{display: none;}
.grid{grid-template-columns: repeat(2, minmax(0px, 1fr));}
#desktopBenefits{display: none;}
.acc-parts-list{grid-template-columns: repeat(2, minmax(0px, 1fr));}
.feature-layout{grid-template-columns: 1fr;}
.feature-tabs{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr));}
.feature-main{padding-top: 0px;}
.feature-side p{margin-bottom: 10px;}
.feature-side h2 br{display: none;}
}
@media (max-width: 600px) {
#quoteAside{padding: 12px 10px 24px;}
.quoteAsideHeadV2{padding: 6px 4px 12px;}
.quoteSelectionBar{flex-wrap: wrap;}
.quoteMachineHeadActions{gap: 6px;}
.quoteItemCountPill{font-size: 12px;}
.machineQuoteCarousel{grid-template-columns: 40px minmax(0px, 1fr) 40px; padding: 10px; gap: 8px;}
.quoteTrack{grid-area: 2 / 1 / auto / -1;}
.machineCarouselPrev{grid-area: 1 / 1;}
.machineCarouselNext{grid-area: 1 / 3;}
.machineCarouselArrow{width: 40px; min-height: 44px;}
.quoteNavStatus{grid-area: 1 / 2; font-size: 13px;}
.dq-summary{min-height: 120px;}
.dq-unitbar{font-size: 11px;}
.dq-duplicate{min-height: 44px; font-size: 11px;}
.dq-trash{width: 40px; min-height: 44px;}
.dq-color-row{display: block;}
.dq-color-row > span{display: block; margin-bottom: 7px;}
.dq-color-row select{width: 100%; max-width: none; min-height: 44px;}
.dq-configs{padding: 9px; margin: 14px 0px 10px;}
.dq-config-card{padding: 7px; gap: 8px;}
.dq-config-card input{width: 22px; height: 22px;}
.dq-config-info{gap: 6px;}
.dq-config-img{width: 35px;}
.dq-config-total{font-size: 12px; padding: 10px 0px;}
.dq-machine-price{font-size: 12px; padding: 10px 0px;}
.dq-unit-subtotal{font-size: 13px; padding: 12px 0px 2px;}
.quoteSpareHead{flex-wrap: wrap;}
.quoteSpareHeadActions{margin-left: auto;}
.quoteSpareCarousel{grid-template-columns: 40px minmax(0px, 1fr) 40px;}
.quoteSpareViewport{grid-area: 2 / 1 / auto / -1;}
.quoteSpareArrow{width: 40px; grid-row: 1;}
.quoteSpareArrow:last-child{grid-column: 3;}
.quoteSpareItem{padding: 12px; align-items: flex-start;}
.quoteSpareName{font-size: 14px;}
.quoteSpareSku{font-size: 12px;}
.quoteSpareDesc{font-size: 12px;}
.quoteSpareQty button{width: 30px; min-height: 44px;}
.quoteSpareMedia{width: 70px;}
.quoteSpareThumb img{width: 70px;}
.quoteSpareRemove{width: 40px; min-height: 44px;}
.quoteSpareSubtotal{font-size: 13px;}
.quoteTotals{grid-template-columns: 1fr 1fr; gap: 8px;}
.quoteTotals > div{flex-wrap: wrap; font-size: 12px; padding: 12px; min-height: 64px;}
.quoteTotals strong{font-size: 18px;}
.quoteDetailsBtn{min-height: 44px; font-size: 12px;}
.quoteTotals .grand{justify-content: space-between;}
.quoteTotals .grand strong{font-size: 22px;}
.quote-total-note{padding: 12px 4px;}
.desktop-request{min-height: 52px; font-size: 14px;}
#catalogMain{padding-right: 14px; padding-bottom: 24px; padding-left: 14px; scroll-snap-type: y;}
.catalog-header h1{font-size: 26px;}
.crumbs{font-size: 12px;}
.view-btn{display: none;}
.grid{display: flex; flex-direction: column; gap: 16px;}
.family-heading{margin: 24px 0px 12px;}
.family-heading p{font-size: 14px;}
.machine-card{display: flex; min-height: calc(-90px + 100svh); scroll-snap-align: start; scroll-margin-top: 4px;}
.list-view .machine-card{display: flex; min-height: calc(-90px + 100svh); scroll-snap-align: start; scroll-margin-top: 4px;}
.card-hero{height: clamp(100px,calc(100svh - 90px - var(--card-body-height,380px)),60svh); min-height: 0px; flex-shrink: 0; padding: 14px;}
.list-view .card-hero{height: clamp(100px,calc(100svh - 90px - var(--card-body-height,380px)),60svh); min-height: 0px; flex-shrink: 0; padding: 14px;}
.card-body{display: flex; flex: 0 0 auto; gap: 7px; padding: 12px 16px;}
.list-view .card-body{display: flex; flex: 0 0 auto; gap: 7px; padding: 12px 16px;}
.card-title{margin-bottom: 4px;}
.card-family{font-size: 12px;}
.card-title-row{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;}
.card-desc{min-height: 0px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.specs{font-size: 12px; background: rgb(244, 247, 252);}
.specs > div{padding: 7px;}
.card-ideal{display: none;}
.card-extra summary{display: block; font-size: 14px;}
.colors-row{display: flex; margin-top: auto; gap: 8px; align-items: center;}
.colors-label{font-size: 0px;}
.colors-label::before{content: "COLORS"; font-size: 12px;}
.swatches{margin: 0px; gap: 1px;}
.swatch{width: 36px; min-height: 44px;}
.card-config summary{font-size: 14px;}
.card-config label{font-size: 14px;}
.add-btn{min-height: 50px; font-size: 15px;}
.code-pill{font-size: 12px;}
.price-pill{font-size: 17px; top: 12px;}
.top-quote{padding: 8px 12px; gap: 7px;}
.top-quote > span:first-child{display: none;}
.top-quote .arrow{display: none;}
#webMachinesTab{padding: 8px 12px; left: 14px; top: 12px;}
.catalog-header .top-quote{top: 12px; right: 14px;}
.acc-parts-list{grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px;}
.parts-catalog-card{padding: 10px;}
.parts-catalog-image{height: 145px;}
.parts-catalog-title{min-height: 50px;}
.parts-catalog-info{display: block;}
.parts-catalog-info button{margin-top: 10px; width: 100%; padding: 8px; font-size: 11px;}
.parts-search-wrap{display: block;}
.parts-search-wrap span{display: block; margin-top: 10px;}
.acc-parts-actions{font-size: 13px; align-items: center;}
.acc-parts-actions a{line-height: 1.5;}
#infoModal{padding: 10px;}
#businessModal{padding: 10px;}
#faqModal{padding: 10px;}
#requestFormModal{padding: 10px;}
#uplayImageLightbox{padding: 10px;}
#machineDetailsModal{padding: 10px;}
.info-panel{padding: 20px 16px; border-radius: 14px;}
.feature-panel{padding: 20px 16px; border-radius: 14px;}
.request-form-panel{padding: 20px 16px; border-radius: 14px;}
.uplay-image-lightbox-panel{padding: 20px 16px; border-radius: 14px;}
.acc-parts-panel{padding: 20px 16px; border-radius: 14px;}
.feature-tabs{gap: 6px;}
.feature-tabs button{font-size: 12px; padding: 10px 8px;}
.feature-cards{grid-template-columns: 1fr;}
.adv-grid{grid-template-columns: 1fr;}
.rf-fields{grid-template-columns: 1fr;}
.uplay-image-lightbox-media img{height: 42dvh;}
}
@media (prefers-reduced-motion: reduce) {
*{scroll-behavior: auto !important; transition: none !important; animation: auto ease 0s 1 normal none running none !important;}
::before{scroll-behavior: auto !important; transition: none !important; animation: auto ease 0s 1 normal none running none !important;}
::after{scroll-behavior: auto !important; transition: none !important; animation: auto ease 0s 1 normal none running none !important;}
}
#machineDetailsModal.open{align-items: center; overflow: hidden;}
.machine-details-panel{background: white; position: relative; box-shadow: rgba(0, 0, 0, 0.267) 0px 25px 90px; display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; max-width: none; min-width: 0px; width: min(1160px, -64px + 100vw); height: min(740px, 100dvh - 64px); max-height: calc(100dvh - 64px); padding: 15px 17px 14px; border-radius: 15px; box-sizing: border-box;}
.machine-details-head{display: flex; justify-content: space-between; gap: 14px; flex-shrink: 0; margin: 0px; align-items: center; padding-bottom: 6px; border: 0px; min-height: 34px;}
.machine-details-head h2{margin: 5px 0px 0px; letter-spacing: 0.01em;}
.machine-details-close{width: 38px; min-height: 38px; padding: 0px; border-radius: 50%; color: var(--red); box-shadow: rgba(26, 50, 94, 0.07) 0px 2px 7px; flex-shrink: 0;}
.details-machine-card{min-width: 0px; display: grid; grid-template-columns: minmax(190px, 1.05fr) minmax(112px, 0.56fr) minmax(190px, 1.1fr) minmax(128px, 0.64fr) 29px; gap: 7px; align-items: stretch; position: relative; padding: 7px 8px; border: 1px solid rgb(220, 230, 240); border-radius: 9px; background: rgb(255, 255, 255); box-shadow: rgba(8, 43, 97, 0.035) 0px 2px 8px;}
.details-machine-visual{display: grid; place-items: center; overflow: hidden; grid-area: 2 / 1; width: 58px; height: 67px; border: 0px; border-radius: 0px; background: rgb(255, 255, 255);}
.details-machine-visual img{width: 100%; height: 100%; object-fit: contain;}
.details-machine-identity b{display: block; margin: 0px; color: var(--navy); overflow-wrap: anywhere;}
.details-unit-pill{display: inline-flex; align-items: center; justify-content: center; border-radius: 20px; background: rgb(242, 173, 34); color: var(--navy); font-weight: 800; white-space: nowrap;}
.details-machine-price-row{display: flex; flex-direction: column; gap: 3px; margin: 0px; font-weight: 700; align-self: center; min-width: 0px; min-height: 62px; justify-content: center; padding: 7px 9px; border-left: 1px solid rgb(220, 229, 239); font-size: 10px;}
.details-machine-config-field{border-top: 0px; align-self: center; min-width: 0px; padding: 0px 8px; border-left: 1px solid rgb(220, 229, 239);}
.details-config-list{display: grid; gap: 4px; margin-top: 6px;}
.details-config-line{display: flex; justify-content: space-between; gap: 7px; margin: 0px;}
.details-config-total{display: flex; justify-content: space-between; gap: 7px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}
.details-config-line span{min-width: 0px; overflow-wrap: anywhere;}
.details-config-line strong{white-space: nowrap; color: var(--navy);}
.details-machine-subtotal{display: flex; flex-direction: column; justify-content: center; align-self: center; min-height: 65px; margin: 0px; padding: 8px; border: 0px; border-radius: 7px; background: rgb(237, 247, 255); text-align: center; align-items: center;}
.details-machine-remove{position: static; padding: 0px; min-height: 29px; align-self: start; width: 29px; height: 29px; border: 1px solid rgb(217, 227, 237); border-radius: 8px; background: rgb(255, 255, 255); color: rgb(114, 137, 167); font-size: 15px; cursor: pointer; box-shadow: rgba(8, 43, 97, 0.05) 0px 1px 5px;}
.details-spare-head{display: flex; justify-content: space-between; gap: 8px; margin: 0px; padding: 7px 11px; background: rgb(229, 242, 252);}
.details-spare-grid{display: grid;}
.details-spare-card{display: grid;}
.details-spare-thumb img{width: 100%; height: 100%; object-fit: contain;}
.details-spare-info{min-width: 0px;}
.details-spare-name{font-weight: 700; overflow-wrap: anywhere; font-size: 11px; line-height: 1.15;}
.details-spare-sku{color: var(--muted); margin-top: 3px; font-size: 9px; line-height: 1.2;}
.details-spare-desc{color: var(--muted); margin-top: 3px; font-size: 9px; line-height: 1.2;}
.details-spare-card{background: white; border: 1px solid var(--line); grid-template-columns: 42px minmax(0px, 1fr) 92px; gap: 7px; padding: 6px 7px; border-radius: 8px;}
.details-spare-subtotal{display: flex; justify-content: space-between; gap: 10px; margin: 0px; font-weight: 700; padding: 6px 11px; font-size: 10px;}
.details-summary{display: grid; flex-shrink: 0; max-width: none; margin-left: 0px; grid-template-columns: 1fr 1fr 1fr 1.35fr; gap: 6px; margin-top: 7px;}
.details-summary > div{display: flex; align-items: center; justify-content: space-between; gap: 9px; border: 1px solid var(--line); border-radius: 10px; background: white; font-weight: 800; min-height: 43px; padding: 7px 9px;}
.details-summary .grand{margin: 0px; background: var(--navy); border: 1px solid var(--navy); color: rgb(255, 255, 255);}
.details-empty{padding: 24px; text-align: center;}
.machine-details-kicker{font-size: 9px; letter-spacing: 0.11em; color: rgb(108, 131, 163);}
.machine-details-copy{font-size: 11px; line-height: 1.3; margin: 4px 0px 9px; color: rgb(94, 118, 152);}
.details-list{flex: 1 1 0%; min-height: 0px; max-height: none; overflow: auto; border: 1px solid rgb(220, 230, 240); border-radius: 10px; background: rgb(247, 249, 252); padding: 7px;}
.details-machine-grid{display: grid; grid-template-columns: 1fr; gap: 7px;}
.details-machine-identity-wrap{display: grid; grid-template-columns: 62px minmax(0px, 1fr); grid-template-rows: 19px 1fr; column-gap: 8px; align-items: center; min-width: 0px;}
.details-machine-identity-wrap .details-unit-pill{grid-area: 1 / 1 / auto / -1; justify-self: start; min-height: 18px; padding: 0px 10px; font-size: 9px;}
.details-machine-identity{grid-area: 2 / 2; align-self: center; min-width: 0px; display: flex; flex-direction: column; align-items: flex-start;}
.details-machine-identity small{margin-top: 4px; color: rgb(102, 129, 164);}
.details-color-value{display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 11px; color: var(--navy);}
.details-color-dot{width: 13px; height: 13px; border-radius: 50%; background: rgb(17, 17, 17); border: 1px solid rgb(215, 220, 227); flex: 0 0 13px;}
.details-machine-price-row > span{letter-spacing: 0.04em; color: rgb(108, 132, 164); font-weight: 950;}
.details-field-title{letter-spacing: 0.04em; color: rgb(108, 132, 164); font-weight: 950;}
.details-machine-price-row strong{font-size: 18px; color: var(--navy);}
.details-config-line{color: rgb(82, 110, 145);}
.details-no-config{margin-top: 6px; color: rgb(109, 129, 157);}
.details-config-total{margin-top: 6px; padding-top: 5px; color: var(--navy); border-top: 1px solid rgb(220, 229, 239);}
.details-config-total strong{color: var(--navy);}
.details-machine-remove:hover{color: var(--red); border-color: rgb(233, 182, 192);}
.details-spare-section{margin: 8px 0px 0px; border: 1px solid rgb(207, 225, 240); border-radius: 9px; background: rgb(238, 247, 255); overflow: hidden;}
.details-spare-head span{font-size: 10px;}
.details-spare-head strong{font-size: 10px;}
.details-spare-grid{grid-template-columns: 1fr 1fr; padding: 6px; gap: 6px;}
.details-spare-thumb{width: 38px; height: 38px;}
.details-spare-meta{display: grid; grid-template-columns: 1fr 1fr; gap: 2px 5px; align-items: center; text-align: right;}
.details-spare-qty{font-size: 9px;}
.details-spare-price{font-size: 11px;}
.details-spare-line-total{grid-column: 1 / -1; font-size: 12px; font-weight: 950; color: var(--navy);}
.details-spare-subtotal strong{font-size: 12px;}
.details-summary .grand span{color: rgb(255, 255, 255);}
.details-summary .grand strong{color: rgb(255, 255, 255);}
@media (max-width: 1100px) and (min-width: 821px) {
.machine-details-panel{width: calc(-44px + 100vw); height: min(720px, 100dvh - 44px); padding: 12px;}
.details-machine-card{grid-template-columns: minmax(160px, 1fr) minmax(92px, 0.5fr) minmax(150px, 1fr) minmax(112px, 0.62fr) 27px; gap: 5px; padding: 6px;}
.details-machine-identity-wrap{grid-template-columns: 52px minmax(0px, 1fr); column-gap: 6px;}
.details-machine-visual{width: 49px; height: 60px;}
.details-color-value{font-size: 10px;}
.details-machine-price-row{padding: 6px; font-size: 9px;}
.details-machine-price-row strong{font-size: 15px;}
.details-machine-config-field{padding: 0px 5px;}
.details-summary > div{padding: 6px;}
}
@media (max-width: 820px) {
.machine-details-modal{padding: 8px;}
.machine-details-panel{width: calc(-16px + 100vw); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); border-radius: 12px;}
.details-list{padding: 5px;}
.details-machine-card{grid-template-areas: "identity remove" "price price" "configs configs" "subtotal subtotal";}
.details-machine-identity-wrap{grid-area: identity;}
.details-machine-identity-wrap .details-unit-pill{padding: 0px 8px;}
.details-machine-identity small{margin-top: 2px;}
.details-color-value{margin-top: 3px;}
.details-color-dot{width: 11px; height: 11px; flex-basis: 11px;}
.details-machine-remove{grid-area: remove;}
.details-machine-price-row{grid-area: price; min-height: 0px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-left: 0px; border-top: 1px solid rgb(226, 232, 240); font-size: 9px;}
.details-machine-config-field{grid-area: configs; border-left: 0px; border-top: 1px solid rgb(226, 232, 240); padding: 6px 2px;}
.details-no-config{margin-top: 4px;}
.details-machine-subtotal{grid-area: subtotal; display: flex; flex-direction: row; justify-content: space-between; text-align: left; border-radius: 6px;}
.details-spare-section{margin: 6px 0px 0px;}
.details-spare-head{padding: 6px 8px;}
.details-spare-grid{grid-template-columns: 1fr; padding: 5px; gap: 5px;}
.details-spare-meta{display: flex; flex-direction: column; gap: 1px;}
.details-spare-subtotal{padding: 5px 8px;}
.details-spare-subtotal strong{font-size: 11px;}
.details-summary{grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 6px; padding-top: 5px;}
.details-summary .grand{grid-column: 1 / -1; order: 4; min-height: 42px;}
}
@media (max-width: 820px) {
#machineDetailsModal{padding: 8px;}
.machine-details-panel{padding: 14px;}
.machine-details-close{width: 44px; min-height: 44px;}
.machine-details-kicker{font-size: 10px;}
.machine-details-copy{font-size: 13px; line-height: 1.4; margin: 8px 0px;}
.details-machine-card{padding: 12px; gap: 8px; grid-template-columns: minmax(0px, 1fr) 44px;}
.details-machine-identity-wrap{grid-template-columns: 60px minmax(0px, 1fr); grid-template-rows: 24px 1fr; gap: 7px;}
.details-machine-identity-wrap .details-unit-pill{font-size: 11px; min-height: 22px;}
.details-machine-visual{width: 58px; height: 75px;}
.details-color-value{font-size: 13px;}
.details-machine-remove{width: 44px; height: 44px; min-height: 44px; font-size: 17px;}
.details-machine-price-row{padding: 9px 0px;}
.details-machine-price-row strong{font-size: 17px;}
.details-config-list{gap: 6px; margin-top: 8px;}
.details-config-total{padding-top: 8px; margin-top: 8px;}
.details-machine-subtotal{padding: 12px; min-height: 48px;}
.details-spare-card{grid-template-columns: 44px minmax(0px, 1fr) auto; padding: 10px; gap: 8px;}
.details-spare-thumb{width: 44px; height: 54px;}
.details-spare-head span{font-size: 13px;}
.details-spare-head strong{font-size: 13px;}
.details-spare-name{font-size: 13px;}
.details-spare-sku{font-size: 12px;}
.details-spare-desc{font-size: 12px;}
.details-spare-qty{font-size: 12px;}
.details-spare-price{font-size: 12px;}
.details-spare-line-total{font-size: 12px;}
.details-spare-subtotal{font-size: 12px;}
.details-summary > div{padding: 10px; min-height: 48px; flex-wrap: wrap;}
}
:root{--type-page: 32px; --type-section: 24px; --type-product: 20px; --type-body: 15px; --type-label: 13px; --type-meta: 12px;}
.quoteAsideHeadV2 h2{letter-spacing: -0.025em;}
.info-head h2{font-size: var(--type-page); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em;}
.rf-title{font-size: var(--type-page); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em;}
.acc-parts-head h2{font-size: var(--type-page); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em;}
.feature-side h2{font-size: var(--type-page); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em;}
.uplay-image-lightbox-title{font-size: var(--type-page); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em;}
.category-head h2{font-size: var(--type-section); font-weight: 650; line-height: 1.25; letter-spacing: -0.015em;}
.family-heading h3{font-weight: 650; line-height: 1.25; letter-spacing: -0.015em;}
.acc-section-head h2{font-weight: 650; line-height: 1.25; letter-spacing: -0.015em;}
.info-content h3{font-size: var(--type-section); font-weight: 650; line-height: 1.25; letter-spacing: -0.015em;}
.bs-hero-copy h3{font-size: var(--type-section); font-weight: 650; line-height: 1.25; letter-spacing: -0.015em;}
.card-title{font-weight: 700; line-height: 1.25; letter-spacing: -0.015em;}
.acc-card h3{font-weight: 700; letter-spacing: -0.015em;}
.dq-name{letter-spacing: -0.015em;}
.card-desc{font-size: var(--type-body);}
.acc-section-head p{line-height: 1.55;}
.info-content{font-size: var(--type-body); line-height: 1.55;}
.feature-side p{font-size: var(--type-body); line-height: 1.55;}
.adv-grid p{font-size: var(--type-body); line-height: 1.55;}
.machine-details-head h2{font-size: 24px; font-weight: 700; line-height: 1.2;}
.details-machine-identity b{font-size: 17px; font-weight: 650; line-height: 1.25;}
.dq-config-info b{font-size: var(--type-label); line-height: 1.45;}
.dq-config-head small{font-size: var(--type-label); line-height: 1.45;}
.quote-total-note{font-size: var(--type-label); line-height: 1.45;}
.dq-code{font-size: var(--type-label); line-height: 1.45;}
.details-machine-copy{font-size: var(--type-label); line-height: 1.45;}
.dq-config-info strong{font-size: 14px;}
.details-field-title{font-size: 12px; line-height: 1.4;}
.details-machine-price-row > span{font-size: 12px; line-height: 1.4;}
.details-config-line{font-size: 12px; line-height: 1.4;}
.details-config-line strong{font-size: 12px; line-height: 1.4;}
.details-config-total{font-size: 12px; line-height: 1.4;}
.details-config-total strong{font-size: 12px; line-height: 1.4;}
.details-no-config{font-size: 12px; line-height: 1.4;}
.details-machine-identity small{font-size: 12px; line-height: 1.4;}
.details-summary > div{font-size: 12px; line-height: 1.4;}
.details-summary strong{font-size: 16px;}
.details-summary .grand strong{font-size: 24px;}
.details-machine-card{min-height: 116px;}
.details-machine-subtotal > span{font-size: 12px;}
.details-machine-subtotal strong{font-size: 22px;}
.side-btn{font-family: "Segoe UI", Arial, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.35; padding: 12px 10px; min-height: 48px; letter-spacing: 0px;}
.utility-item{font-family: "Segoe UI", Arial, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.35; padding: 12px 10px; min-height: 48px; letter-spacing: 0px;}
.side-btn.active{font-weight: 650; background: rgb(180, 30, 67);}
.side-btn .count{font-size: 12px; font-weight: 500; opacity: 0.8;}
.sidebar-section-label{font-size: 12px; font-weight: 600; letter-spacing: 0.08em;}
.utility-icon{font-size: 15px; opacity: 0.85;}
.sidebar{padding: 20px 14px;}
.brand{margin-bottom: 22px;}
.quoteSelectionBar{display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 8px 12px; padding: 14px 16px; align-items: center; background: white;}
.quoteSpareHead{display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 8px 12px; padding: 14px 16px; align-items: center; background: white;}
.quoteMachineHeadActions{display: contents;}
.quoteSpareHeadActions{display: contents;}
.quoteSelectionLabel{grid-area: 1 / 1; font-size: 13px; font-weight: 650; line-height: 1.35; letter-spacing: 0.025em;}
.quoteSpareHead > span{grid-area: 1 / 1; font-size: 13px; font-weight: 650; line-height: 1.35; letter-spacing: 0.025em;}
.quoteSelectionBar .quoteItemCountPill{grid-area: 1 / 2; background: transparent; color: var(--muted); padding: 0px; font-size: 13px; font-weight: 500; border-radius: 0px;}
.quoteSpareHead .quoteItemCountPill{grid-area: 1 / 2; background: transparent; color: var(--muted); padding: 0px; font-size: 13px; font-weight: 500; border-radius: 0px;}
.quoteAddMachinesBtn{grid-area: 2 / 1 / auto / -1; justify-self: start; background: var(--yellow); color: var(--navy); border: 0px; border-radius: 8px; min-height: 44px; padding: 10px 14px; font-size: 13px; font-weight: 650;}
.quoteAddPartsBtn{grid-area: 2 / 1 / auto / -1; justify-self: start; background: var(--yellow); color: var(--navy); border: 0px; border-radius: 8px; min-height: 44px; padding: 10px 14px; font-size: 13px; font-weight: 650;}
.dq-summary{align-items: center; gap: 12px; padding: 14px 12px;}
.dq-heading{padding-right: 32px;}
.dq-name{min-height: 0px; overflow-wrap: anywhere;}
.dq-trash{right: 9px; top: 12px;}
.dq-unitbar{margin-top: 8px;}
.dq-body{padding: 12px;}
.dq-color-row > span{font-size: 12px;}
.dq-color-row select{font-size: 14px;}
.dq-config-card{min-height: 70px;}
.dq-unit-subtotal strong{font-size: 21px;}
.acc-section-head h2{margin: 0px 0px 6px;}
.acc-section-head p{margin: 0px; color: var(--muted); max-width: 760px;}
.acc-card-media{border-bottom: 1px solid rgb(229, 235, 243);}
.acc-card-media img{max-width: 100%; max-height: 100%;}
.acc-card h3{margin: 0px;}
.acc-tag{font-weight: 650;}
.acc-card-copy{margin: 0px; color: var(--muted);}
.acc-sku{color: var(--muted);}
.acc-price{font-weight: 700; color: var(--navy);}
.acc-card-foot{margin-top: auto;}
.acc-card-foot button{font-weight: 650; padding: 9px 6px; border-radius: 8px;}
.acc-parts-cta h3{font-size: var(--type-section); font-weight: 650; margin-bottom: 8px;}
.acc-parts-cta p{font-size: 15px; line-height: 1.5;}
.parts-catalog-title{font-size: 16px; font-weight: 650;}
.parts-catalog-sku{font-size: 12px;}
.parts-catalog-info{font-size: 14px;}
@media (max-width: 900px) {
:root{--type-page: 28px; --type-section: 23px;}
.sidebar{font-size: 16px;}
}
@media (max-width: 600px) {
:root{--type-page: 28px; --type-section: 22px; --type-product: 20px; --type-body: 15px;}
.quoteSelectionBar{padding: 12px; gap: 10px;}
.quoteSpareHead{padding: 12px; gap: 10px;}
.quoteSelectionLabel{font-size: 12px;}
.quoteSpareHead > span{font-size: 12px;}
.quoteSelectionBar .quoteItemCountPill{font-size: 12px;}
.quoteSpareHead .quoteItemCountPill{font-size: 12px;}
.dq-summary{padding: 14px 12px;}
.dq-thumb{width: 64px;}
.dq-thumb img{height: 90px;}
.dq-heading{padding-right: 36px;}
.dq-code{font-size: 12px;}
.dq-color-row select{font-size: 16px;}
.dq-config-info b{font-size: 13px;}
.dq-config-info strong{font-size: 13px;}
.dq-config-head small{font-size: 13px;}
.details-machine-head h2{font-size: 22px;}
.details-machine-identity b{font-size: 17px;}
.details-summary .grand strong{font-size: 22px;}
}
.catalog-header{margin-bottom: 10px; align-items: center;}
.catalog-header .crumbs{margin: 0px;}
.category-head{display: flex; align-items: center; justify-content: space-between;}
.category-head h1{line-height: 1.2; font-weight: 700;}
.category-head p{color: var(--muted);}
.controls{margin: 0px;}
.sort-trigger{font-size: 14px; min-width: 145px;}
.family-heading p{display: none;}
.acc-intro{padding: 8px 0px 18px; border-bottom: 1px solid var(--line);}
.acc-intro h1{font-size: 28px; margin: 0px 0px 8px; line-height: 1.2; font-weight: 700;}
.acc-intro p{font-size: 15px; color: var(--muted); margin: 0px; max-width: 700px; line-height: 1.5;}
.acc-section{margin: 22px 0px;}
.acc-section-head{margin-bottom: 12px;}
.acc-section-head h2{font-size: 22px;}
.acc-section-head p{font-size: 14px;}
.acc-grid{grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 14px;}
.acc-grid.four{grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 14px;}
.acc-card{border-radius: 12px; box-shadow: rgba(26, 50, 94, 0.024) 0px 3px 10px;}
.acc-card-media{height: 132px; padding: 16px; background: white;}
.acc-card-body{padding: 14px; gap: 7px;}
.acc-card h3{font-size: 17px; line-height: 1.3;}
.acc-card-copy{font-size: 14px; line-height: 1.45;}
.acc-tag{font-size: 11px; color: var(--muted); letter-spacing: 0.025em;}
.acc-price{font-size: 20px; margin: 2px 0px;}
.acc-card-foot{grid-template-columns: 1fr; padding-top: 8px; gap: 6px;}
.acc-card-foot button{min-height: 44px; font-size: 12px;}
.acc-add-part{background: var(--yellow); border-color: var(--yellow); color: var(--navy);}
.acc-details{border: 0px; background: rgb(243, 246, 250); color: var(--navy);}
.acc-parts-cta{background: white; border: 1px solid var(--line); margin: 24px 0px 0px; padding: 20px; border-radius: 12px; box-shadow: rgba(26, 50, 94, 0.024) 0px 3px 10px;}
.acc-parts-copy{display: flex; align-items: center; gap: 14px; min-width: 0px;}
.acc-parts-icon{flex: 0 0 40px; display: grid; place-items: center; background: rgb(237, 243, 250); border-radius: 10px; width: 40px; height: 40px; font-size: 22px;}
.acc-parts-copy h3{font-size: 20px; line-height: 1.25; margin: 0px 0px 7px;}
.acc-parts-copy p{font-size: 14px; line-height: 1.5; margin: 0px; color: var(--muted);}
.acc-parts-btn{min-height: 48px; background: var(--yellow); color: var(--navy); border: 0px; font-size: 13px; padding: 12px 18px; white-space: normal;}
.acc-head{margin-bottom: 18px;}
.acc-head .acc-top-quote{margin-left: auto;}
@media (max-width: 1200px) {
.acc-grid{grid-template-columns: repeat(2, minmax(0px, 1fr));}
.acc-grid.four{grid-template-columns: repeat(2, minmax(0px, 1fr));}
}
@media (max-width: 900px) {
#accessoriesMain{padding: 20px 16px 28px; z-index: 36;}
.acc-head{display: flex; flex-wrap: nowrap; align-items: center; gap: 10px;}
.acc-head .acc-crumbs{display: none;}
.acc-parts-cta{display: block;}
.acc-parts-btn{margin-top: 16px; width: 100%;}
}
@media (max-width: 600px) {
.catalog-header{margin: 0px;}
.catalog-header .crumbs{display: none;}
.category-head{scroll-snap-align: start; margin: 0px 0px 14px; gap: 10px; display: flex; align-items: center;}
.category-head h1{font-size: 22px; margin: 0px 0px 4px;}
.category-head p{font-size: 13px;}
.category-head > div:first-child{flex: 1 1 0%; min-width: 0px;}
.controls{justify-content: flex-end; margin: 0px; flex-shrink: 0;}
.sort-trigger{min-width: 0px; width: 116px; font-size: 13px; padding: 10px; gap: 8px;}
.family-heading{display: none;}
.family-section + .family-section{margin-top: 16px;}
.acc-intro{padding: 0px 0px 14px;}
.acc-intro h1{font-size: 24px;}
.acc-intro p{font-size: 14px;}
.acc-section{margin: 20px 0px;}
.acc-section-head h2{font-size: 21px;}
.acc-section-head p{font-size: 14px;}
.acc-grid, .acc-grid.four{grid-template-columns: 1fr; gap: 12px;}
.acc-card{display: grid; grid-template-columns: 82px minmax(0px, 1fr); align-items: start; overflow: hidden;}
.acc-card-media{height: 120px; padding: 14px 8px; border: 0px; display: grid; place-items: center;}
.acc-card-media img{height: 90px; width: 66px; object-fit: contain;}
.acc-card-body{padding: 14px 12px 14px 0px; gap: 6px;}
.acc-card h3{font-size: 17px;}
.acc-tag{font-size: 10px;}
.acc-card-copy{font-size: 14px; line-height: 1.4;}
.acc-sku{font-size: 12px;}
.acc-price{font-size: 20px;}
.acc-card-foot{display: grid; grid-template-columns: 1fr; gap: 6px; padding-top: 4px;}
.acc-card-foot button{min-height: 44px; font-size: 12px;}
.acc-parts-cta{padding: 16px;}
.acc-parts-copy{display: block;}
.acc-parts-icon{display: none;}
.acc-parts-copy h3{font-size: 20px;}
.acc-parts-btn{font-size: 13px;}
.acc-head{gap: 8px; margin-bottom: 18px;}
.acc-top-quote{font-size: 14px; padding: 10px 12px;}
.acc-head #accessoryBack{font-size: 14px; padding: 10px 12px;}
}
.recommended-card .acc-card-media{height: 110px; padding: 12px;}
.recommended-card .acc-card-body{padding: 12px; gap: 6px;}
.recommended-card h3{font-size: 16px; line-height: 1.25;}
.recommended-card .acc-card-copy{font-size: 13px; line-height: 1.4;}
.recommended-card .acc-card-foot{grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 6px; padding-top: 6px;}
.recommended-card .acc-card-foot button{min-height: 44px; padding: 8px 4px; font-size: 11px; white-space: normal;}
@media (max-width: 600px) {
.recommended-card{grid-template-columns: 68px minmax(0px, 1fr);}
.recommended-card .acc-card-media{height: 96px; padding: 12px 5px;}
.recommended-card .acc-card-media img{height: 72px; width: 58px;}
.recommended-card .acc-card-body{padding: 12px 12px 12px 0px;}
.recommended-card h3{font-size: 16px;}
.recommended-card .acc-card-foot button{font-size: 11px;}
.recommended-card .acc-card-copy{font-size: 13px;}
}
#coverView{position: fixed; inset: 0px; z-index: 10; background: white; height: 100dvh; overflow: hidden;}
.uplay-v274-cover{position: relative; isolation: isolate; height: 100%; min-height: 0px; padding: 24px 28px 88px; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center;}
.uplay-v274-content{position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; height: auto; max-width: 880px; min-height: 0px; margin: 0px; transform: none;}
.uplay-v274-block{min-width: 0px; max-width: 100%;}
.uplay-v274-catalog{font-size: 14px; line-height: 1.25; font-weight: 650; letter-spacing: 0.2em; color: var(--muted);}
.uplay-v274-logo-wrap{height: auto; width: 100%; display: flex; justify-content: center; flex-shrink: 0;}
.uplay-v274-logo{width: min(100%, 340px); height: 176px; max-height: none; min-height: 0px; object-fit: contain; display: block;}
.uplay-v274-solutions{font-size: 28px; line-height: 1.16; font-weight: 750; color: var(--navy);}
.uplay-v274-tagline{font-size: 18px; line-height: 1.35; font-weight: 650; color: var(--red);}
.uplay-v274-cta-wrap{display: flex; justify-content: center; width: 100%; margin-top: 24px;}
.uplay-v274-cta{display: flex; justify-content: center; align-items: center; gap: 22px; min-height: 50px; padding: 12px 24px; background: var(--navy); color: white; border: 0px; border-radius: 28px; font-size: 16px; line-height: 1.3; font-weight: 650;}
.uplay-v274-benefits{display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 16px; width: 100%; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}
.uplay-v274-benefit{display: flex; justify-content: center; align-items: center; gap: 10px; min-width: 0px; text-align: left;}
.uplay-v274-icon{width: 38px; height: 38px; flex: 0 0 38px; color: var(--navy);}
.uplay-v274-btitle{font-size: 14px; font-weight: 650; line-height: 1.2;}
.uplay-v274-bsub{font-size: 11px; line-height: 1.35; margin-top: 3px; color: var(--ink);}
.uplay-v274-play{font-size: 14px; line-height: 1.2; font-weight: 650; letter-spacing: 0.12em;}
.uplay-v274-dot{color: var(--red); margin: 0px 12px;}
.uplay-v274-flags{position: absolute; z-index: 1; bottom: 0px; left: 0px; width: 100%; height: 76px; pointer-events: none;}
.uplay-v274-flags svg{display: block; width: 100%; height: 100%;}
.uplay-v274-flag-star{position: absolute; bottom: 12px; left: 22px; width: 40px; height: 40px; background: white; clip-path: polygon(50% 0px, 61% 35%, 98% 35%, 68% 57%, 79% 95%, 50% 72%, 21% 95%, 32% 57%, 2% 35%, 39% 35%);}
.uplay-v274-white-area-star, .uplay-v274-white-area-star-small, .uplay-v274-bar{display: none;}
@media (max-width: 900px) {
.uplay-v274-cover{padding: 18px 24px 76px;}
.uplay-v274-content{gap: 12px; flex-shrink: 0;}
.uplay-v274-solutions{font-size: 26px;}
.uplay-v274-tagline{font-size: 17px;}
.uplay-v274-benefits{grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 16px 22px; max-width: 560px;}
.uplay-v274-benefit{justify-content: flex-start;}
.uplay-v274-flags{height: 64px;}
.uplay-v274-flag-star{bottom: 10px; width: 34px; height: 34px;}
}
@media (max-width: 600px) {
.uplay-v274-cover{padding: 16px 20px 64px;}
.uplay-v274-content{gap: 12px; flex-shrink: 0;}
.uplay-v274-catalog{font-size: 12px; letter-spacing: 0.16em;}
.uplay-v274-logo{width: min(100%, 250px); height: 128px; max-height: none;}
.uplay-v274-solutions{font-size: 22px; line-height: 1.16;}
.uplay-v274-tagline{font-size: 15px; line-height: 1.35;}
.uplay-v274-cta{font-size: 14px; min-height: 44px; padding: 12px 20px; gap: 16px;}
.uplay-v274-benefits{gap: 14px;}
.uplay-v274-benefit{gap: 9px;}
.uplay-v274-icon{width: 28px; height: 28px; flex-basis: 28px;}
.uplay-v274-btitle{font-size: 13px;}
.uplay-v274-bsub{font-size: 10px;}
.uplay-v274-play{font-size: 13px; letter-spacing: 0.09em;}
.uplay-v274-dot{margin: 0px 10px;}
.uplay-v274-flags{height: 52px;}
.uplay-v274-flag-star{width: 30px; height: 30px; bottom: 8px; left: 16px;}
}
@media (max-width: 600px) and (max-height: 650px) {
.uplay-v274-cover{padding: 12px 18px 56px;}
.uplay-v274-content{gap: 8px;}
.uplay-v274-logo{height: 110px; width: min(100%, 230px);}
.uplay-v274-catalog{font-size: 11px;}
.uplay-v274-solutions{font-size: 22px;}
.uplay-v274-tagline{font-size: 16px;}
.uplay-v274-cta{min-height: 44px; font-size: 14px; padding: 10px 16px;}
.uplay-v274-benefits{gap: 10px 12px;}
.uplay-v274-btitle{font-size: 14px;}
.uplay-v274-bsub{font-size: 10px;}
.uplay-v274-icon{width: 28px; height: 28px; flex-basis: 28px;}
.uplay-v274-play{font-size: 12px;}
.uplay-v274-flags{height: 46px;}
.uplay-v274-flag-star{width: 26px; height: 26px; bottom: 7px;}
}
@media (max-width: 600px) and (max-height: 520px) {
.uplay-v274-cover{padding: 8px 16px 46px;}
.uplay-v274-content{gap: 6px;}
.uplay-v274-logo{height: 80px; width: min(100%, 190px);}
.uplay-v274-catalog{font-size: 10px;}
.uplay-v274-solutions{font-size: 18px;}
.uplay-v274-tagline{font-size: 14px;}
.uplay-v274-benefits{gap: 8px 10px;}
.uplay-v274-btitle{font-size: 12px;}
.uplay-v274-bsub{font-size: 9px;}
.uplay-v274-icon{width: 24px; height: 24px; flex-basis: 24px;}
.uplay-v274-play{font-size: 11px;}
.uplay-v274-flags{height: 38px;}
.uplay-v274-flag-star{width: 22px; height: 22px; bottom: 6px;}
}
@media (min-width: 601px) and (max-height: 600px) {
.uplay-v274-cover{padding: 12px 24px 50px;}
.uplay-v274-content{display: grid; height: 100%; max-width: 880px; gap: 8px; grid-template: "catalog catalog" "logo title" minmax(0px, 1fr) "logo tagline" "logo cta" "benefits benefits" "play play" / minmax(0px, 1fr) minmax(0px, 1.4fr);}
.uplay-v274-catalog{grid-area: catalog; font-size: 11px;}
.uplay-v274-logo-wrap{grid-area: logo; height: 100%;}
.uplay-v274-logo{height: 100%; max-height: 170px; width: min(100%, 280px);}
.uplay-v274-solutions{grid-area: title; font-size: 24px;}
.uplay-v274-tagline{grid-area: tagline; font-size: 16px;}
.uplay-v274-cta-wrap{grid-area: cta;}
.uplay-v274-cta{min-height: 44px; font-size: 14px; padding: 10px 18px;}
.uplay-v274-benefits{grid-area: benefits; grid-template-columns: repeat(4, minmax(0px, 1fr)); max-width: none; gap: 12px;}
.uplay-v274-icon{width: 28px; height: 28px; flex-basis: 28px;}
.uplay-v274-btitle{font-size: 13px;}
.uplay-v274-bsub{font-size: 10px;}
.uplay-v274-play{grid-area: play; font-size: 12px;}
.uplay-v274-flags{height: 40px;}
.uplay-v274-flag-star{width: 24px; height: 24px; bottom: 6px;}
}
.uplay-v274-benefits{margin-top: 48px;}
@media (max-width: 600px) {
.uplay-v274-cta-wrap{margin-top: 12px;}
.uplay-v274-benefits{margin-top: 30px;}
}
@media (max-height: 650px) {
.uplay-v274-cta-wrap{margin-top: 8px;}
.uplay-v274-benefits{margin-top: 18px;}
}
@media (max-height: 520px) {
.uplay-v274-cta-wrap{margin-top: 4px;}
.uplay-v274-benefits{margin-top: 10px;}
}
@media (min-width: 1200px) {
#catalogRoot:not(.list-view) .grid{grid-template-columns: repeat(4, minmax(0px, 1fr));}
}
@media (min-width: 901px) {
.sidebar{scrollbar-width: thin;}
.sidebar .instagram-label em{font-size: 10px; line-height: 1.1;}
}
@media (min-width: 901px) and (max-height: 800px) {
.sidebar .side-btn, .sidebar .utility-item{min-height: 29px; padding: 5px 10px;}
}
@media (min-width: 901px) and (max-height: 620px) {
.sidebar{padding: 8px 12px;}
.sidebar .side-btn, .sidebar .utility-item{min-height: 26px; padding: 4px 10px; font-size: 13px;}
.sidebar .side-rule{margin: 6px 0px;}
.sidebar .sidebar-section-label{padding-bottom: 4px; font-size: 10px;}
}
@media (max-width: 900px) {
#webMachinesTab{background: white; color: var(--navy); border: 1px solid rgb(203, 215, 230); border-radius: 10px; box-shadow: none; min-height: 44px; padding: 10px 13px; gap: 9px; align-items: center;}
#webMachinesTab .ml{font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0px;}
#webMachinesTab .menu-lines{display: block; flex-shrink: 0;}
#webMachinesTab[aria-expanded="true"]{background: rgb(234, 240, 248);}
}
.card-config summary{align-items: center;}
.card-config summary .payment-add-pill{display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 28px; padding: 5px 12px; border-radius: 18px; background: var(--yellow); color: var(--navy); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.025em;}
#quoteTop{display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-height: 44px; padding: 0px 12px; background: white; color: var(--navy); border: 1px solid rgb(203, 215, 230); border-radius: 10px; box-shadow: none;}
#quoteTop > b{display: block; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0px;}
#quoteTop .badge{display: flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 21px; width: auto; height: 21px; padding: 0px 5px; border-radius: 11px; font-size: 11px; font-weight: 600; line-height: 1; color: white; background: var(--red);}
#quoteTop > span:first-child, #quoteTop .arrow{display: none;}
.quoteAsideHeadV2 h2{font-size: 26px; font-weight: 700; line-height: 1.2;}
.quoteSelectionBar, .quoteSpareHead{display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; background: white;}
.quote-section-title{display: flex; align-items: center; gap: 8px; min-width: 0px; flex: 1 1 0%;}
.quote-section-title .quoteSelectionLabel, .quote-section-title > span{font-size: 15px; font-weight: 650; line-height: 1.25; letter-spacing: 0px;}
.quoteSelectionBar .quoteItemCountPill, .quoteSpareHead .quoteItemCountPill{display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 28px; min-height: 26px; padding: 4px 8px; border-radius: 15px; background: rgb(234, 240, 248); color: var(--navy); font-size: 12px; font-weight: 700; line-height: 1;}
.quoteAddMachinesBtn, .quoteAddPartsBtn{min-height: 44px; border-radius: 8px; padding: 9px 12px; font-size: 12px; font-weight: 650; flex-shrink: 0; white-space: nowrap;}
.machineQuoteCarousel, .quoteSpareCarousel{display: block; padding: 12px; background: rgb(237, 242, 248);}
.quote-carousel-nav{display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0px 0px 12px;}
.quote-carousel-nav .machineCarouselArrow, .quote-carousel-nav .quoteSpareArrow{display: flex; align-items: center; justify-content: center; width: 38px; min-height: 44px; padding: 0px; flex-shrink: 0; float: none; background: white; color: var(--navy); border: 1px solid rgb(203, 215, 230); border-radius: 8px; font-size: 24px; line-height: 1;}
.quote-carousel-nav button:disabled{opacity: 0.35;}
.quote-carousel-nav .quoteNavStatus, .quote-carousel-nav .quoteSparePage{font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--muted); min-width: 130px; margin: 0px; text-align: center;}
.quoteTrack, .quoteSpareViewport{scrollbar-width: none; overscroll-behavior-x: contain;}
.quoteTrack::-webkit-scrollbar, .quoteSpareViewport::-webkit-scrollbar{display: none;}
.dq-name{font-size: 19px; line-height: 1.25; font-weight: 650;}
.dq-config-head b{font-size: 15px; font-weight: 650;}
.quoteSpareName{font-size: 15px; font-weight: 650; line-height: 1.3;}
.quoteSpareSubtotal{padding: 12px; font-size: 13px; margin: 0px; background: white; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top: 0px; border-radius: 0px 0px 10px 10px;}
@media (max-width: 600px) {
.quoteAsideHeadV2 h2{font-size: 24px;}
.quoteSelectionBar, .quoteSpareHead{gap: 8px; padding: 10px;}
.quote-section-title .quoteSelectionLabel, .quote-section-title > span{font-size: 14px;}
.quoteAddMachinesBtn, .quoteAddPartsBtn{font-size: 11px; padding: 9px 10px;}
.machineQuoteCarousel, .quoteSpareCarousel{padding: 10px;}
.dq-name{font-size: 18px;}
.quote-carousel-nav{gap: 12px;}
.quote-carousel-nav .quoteNavStatus, .quote-carousel-nav .quoteSparePage{font-size: 13px;}
.quoteSpareItem{gap: 10px;}
.quoteSparePrice{font-size: 15px;}
}
.quoteAmountCards{display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 0.85fr) minmax(0px, 1.1fr); gap: 8px; margin: 14px 0px 8px;}
.quoteAmountCard, .quoteAmountDetails{min-width: 0px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--navy); display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.quoteAmountCard > span{display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; line-height: 1.3;}
.quoteAmountCard > strong{font-size: 15px; font-weight: 700; white-space: nowrap; line-height: 1.2;}
.quoteAmountCount{display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 2px 6px; border-radius: 12px; background: rgb(234, 240, 248); font-size: 11px; color: var(--navy);}
.quoteAmountDetails{justify-content: center; font-size: 12px; font-weight: 700; line-height: 1.3; text-align: center;}
.quoteAmountGrand{background: var(--navy); border-color: var(--navy); color: white;}
.quoteAmountGrand > strong{font-size: 23px;}
@media (max-width: 1100px) {
.quoteAmountCards{grid-template-columns: repeat(2, minmax(0px, 1fr));}
.quoteAmountCard > span{font-size: 14px;}
.quoteAmountCard > strong{font-size: 18px;}
.quoteAmountGrand > strong{font-size: 23px;}
}
@media (max-width: 600px) {
.quoteAmountCard{flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; min-height: 84px; padding: 12px;}
.quoteAmountCard > span{font-size: 13px;}
.quoteAmountCard > strong{font-size: 21px;}
.quoteAmountGrand > strong{font-size: 24px;}
.quoteAmountDetails{min-height: 84px; padding: 12px; flex-wrap: wrap; font-size: 13px;}
.quoteAmountDetails > span{font-size: 18px;}
}
@media (min-width: 901px) {
#accessoriesMain{padding: 18px 24px 30px;}
}
#accessoriesMain .acc-head{display: flex; align-items: center; gap: 12px; margin-bottom: 10px;}
#accessoriesMain .acc-head .acc-crumbs{margin-bottom: 0px;}
#accessoriesMain .acc-top-quote{background: white; color: var(--navy); border: 1px solid var(--line); border-radius: 10px; box-shadow: none;}
#accessoriesMain .acc-hero{position: relative; display: grid; grid-template-columns: minmax(0px, 1.6fr) minmax(0px, 1fr); align-items: center; gap: 16px; overflow: hidden; border-radius: 14px; background: linear-gradient(110deg, rgb(14, 35, 69), rgb(26, 58, 101) 65%, rgb(12, 32, 62)); color: white; min-height: 220px;}
#accessoriesMain .acc-hero-copy{padding: 22px 28px; position: relative; z-index: 1;}
#accessoriesMain .acc-kicker{font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: rgb(255, 195, 55);}
#accessoriesMain .acc-hero h1{font-size: clamp(28px, 2.8vw, 46px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 750; margin: 8px 0px; color: white;}
#accessoriesMain .acc-hero h1 span{color: rgb(255, 195, 55);}
#accessoriesMain .acc-hero-copy p{font-size: 13px; line-height: 1.45; margin: 0px; max-width: 600px; color: rgb(232, 238, 248);}
#accessoriesMain .acc-hero-points{display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; font-size: 11px; font-weight: 650;}
#accessoriesMain .acc-hero-point{display: flex; align-items: center; gap: 6px;}
#accessoriesMain .acc-hero-point i{display: grid; place-items: center; flex-shrink: 0; width: 23px; height: 23px; border: 1px solid rgba(255, 195, 55, 0.533); border-radius: 6px; font-style: normal; color: rgb(255, 195, 55);}
#accessoriesMain .acc-hero-machine{height: 220px; display: flex; align-items: center; justify-content: center; padding: 0px 18px; background: radial-gradient(rgba(255, 255, 255, 0.08), transparent 70%);}
#accessoriesMain .acc-hero-machine img{height: 100%; width: 100%; object-fit: contain;}
#accessoriesMain .acc-section{margin: 16px 0px;}
#accessoriesMain .acc-section-head{margin-bottom: 10px;}
#accessoriesMain .acc-section-head h2{font-size: 22px; line-height: 1.2; margin: 0px 0px 4px;}
#accessoriesMain .acc-section-head p{font-size: 13px; line-height: 1.4;}
#accessoriesMain .acc-grid{grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px;}
#accessoriesMain .acc-grid.four{grid-template-columns: repeat(4, minmax(0px, 1fr));}
#accessoriesMain .acc-card{display: grid; border-radius: 12px; overflow: hidden; background: white; min-width: 0px;}
#accessoriesMain .payment-card{grid-template-columns: minmax(0px, 0.7fr) minmax(0px, 1fr);}
#accessoriesMain .acc-card-media{height: auto; min-height: 150px; padding: 14px; border-bottom: 0px; border-right: 1px solid var(--line); display: grid; place-items: center;}
#accessoriesMain .acc-card-media img{width: 100%; height: 112px; max-width: 150px; object-fit: contain;}
#accessoriesMain .acc-card-body{display: flex; flex-direction: column; gap: 6px; padding: 12px; min-width: 0px;}
#accessoriesMain .acc-card h3{font-size: 14px; font-weight: 700; line-height: 1.3;}
#accessoriesMain .acc-tag{align-self: flex-start; padding: 4px 8px; background: rgb(237, 243, 250); border-radius: 12px; color: rgb(88, 118, 155); font-size: 10px; font-weight: 700; line-height: 1.2;}
#accessoriesMain .acc-card-copy{font-size: 12px; line-height: 1.4;}
#accessoriesMain .acc-sku{font-size: 11px; font-weight: 600;}
#accessoriesMain .acc-price{font-size: 16px; margin: 0px;}
#accessoriesMain .acc-card-foot{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 6px; padding-top: 3px; margin-top: auto;}
#accessoriesMain .acc-card-foot button{font-size: 10px; line-height: 1.2; padding: 8px 3px; min-height: 44px; white-space: normal; border-radius: 8px;}
#accessoriesMain .acc-details{background: white; border: 1px solid rgb(203, 217, 235);}
#accessoriesMain .acc-add-part{background: var(--navy); color: white; border-color: var(--navy);}
#accessoriesMain .recommended-card{grid-template-columns: 1fr;}
#accessoriesMain .recommended-card .acc-card-media{height: 90px; min-height: 0px; border-right: 0px; border-bottom: 1px solid var(--line); padding: 10px;}
#accessoriesMain .recommended-card .acc-card-media img{height: 70px; width: 100%; max-width: 150px;}
#accessoriesMain .acc-parts-cta{display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; margin-top: 12px; background: rgb(248, 250, 252);}
#accessoriesMain .acc-parts-copy{display: flex; gap: 10px; align-items: center;}
#accessoriesMain .acc-parts-copy h3{font-size: 17px; margin: 0px 0px 4px;}
#accessoriesMain .acc-parts-copy p{font-size: 12px;}
#accessoriesMain .acc-parts-btn{width: 100%; background: rgb(248, 189, 54); min-height: 44px; font-size: 12px;}
@media (max-width: 1200px) {
#accessoriesMain .acc-grid, #accessoriesMain .acc-grid.four{grid-template-columns: repeat(2, minmax(0px, 1fr));}
#accessoriesMain .acc-hero-copy{padding: 20px;}
#accessoriesMain .acc-hero h1{font-size: 32px;}
}
@media (max-width: 600px) {
#accessoriesMain .acc-hero{grid-template-columns: minmax(0px, 1fr) 74px; gap: 0px; min-height: 0px;}
#accessoriesMain .acc-hero-copy{padding: 16px 0px 16px 16px;}
#accessoriesMain .acc-hero h1{font-size: 24px; line-height: 1.12;}
#accessoriesMain .acc-kicker{font-size: 9px; letter-spacing: 0.06em;}
#accessoriesMain .acc-hero-copy p{font-size: 12px;}
#accessoriesMain .acc-hero-points{font-size: 10px; gap: 6px; margin-top: 10px;}
#accessoriesMain .acc-hero-machine{height: 170px; padding: 0px 6px;}
#accessoriesMain .acc-grid, #accessoriesMain .acc-grid.four{grid-template-columns: 1fr;}
#accessoriesMain .payment-card, #accessoriesMain .recommended-card{grid-template-columns: 78px minmax(0px, 1fr);}
#accessoriesMain .acc-card-media, #accessoriesMain .recommended-card .acc-card-media{min-height: 0px; height: 120px; padding: 10px 6px; border: 0px;}
#accessoriesMain .acc-card-media img, #accessoriesMain .recommended-card .acc-card-media img{width: 66px; height: 90px;}
#accessoriesMain .acc-card-body{padding: 12px 10px 12px 0px;}
#accessoriesMain .acc-card h3{font-size: 16px;}
#accessoriesMain .acc-card-copy{font-size: 13px;}
#accessoriesMain .acc-card-foot button{font-size: 11px;}
#accessoriesMain .acc-section-head h2{font-size: 21px;}
#accessoriesMain .acc-parts-icon{display: grid;}
#accessoriesMain .acc-parts-copy{align-items: flex-start;}
}
#accessoriesPartsModal .acc-parts-panel{display: flex; flex-direction: column; gap: 12px; width: min(1180px, 100%); max-height: 90dvh; padding: 22px; overflow: hidden; border-radius: 16px;}
#accessoriesPartsModal .acc-parts-head{display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0px; flex-shrink: 0;}
#accessoriesPartsModal .acc-parts-head h2{font-size: 26px; font-weight: 700; line-height: 1.2; margin: 0px;}
#accessoriesPartsModal .acc-parts-close{width: 44px; min-height: 44px; padding: 0px; flex-shrink: 0;}
#accessoriesPartsModal .parts-catalog-intro{font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0px; flex-shrink: 0;}
#accessoriesPartsModal .acc-parts-nav:empty{display: none;}
#accessoriesPartsModal .parts-search-wrap{display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin: 0px; border-bottom: 1px solid var(--line); flex-shrink: 0;}
#partsCatalogSearch{min-width: 0px; flex: 1 1 0%; background: rgb(248, 250, 252);}
#partsCatalogCount{font-size: 12px; white-space: nowrap; padding: 6px 9px; border-radius: 14px; background: rgb(237, 243, 250); color: var(--muted); margin: 0px;}
#accessoriesPartsModal .acc-parts-carousel{min-height: 0px; overflow: auto; overscroll-behavior: contain; padding: 12px; background: rgb(242, 245, 249); border-radius: 12px; flex: 1 1 0%;}
#accessoriesPartsModal .acc-parts-viewport{overflow: visible;}
#accessoriesPartsModal .acc-parts-list{display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 12px;}
#accessoriesPartsModal .parts-catalog-card{display: flex; flex-direction: column; gap: 0px; padding: 0px; background: white; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-width: 0px;}
#accessoriesPartsModal .parts-catalog-image{height: 112px; min-height: 112px; display: grid; place-items: center; padding: 12px; background: white; border-bottom: 1px solid rgb(231, 237, 245);}
#accessoriesPartsModal .parts-catalog-image img{width: 100%; height: 88px; max-width: 150px; object-fit: contain;}
#accessoriesPartsModal .parts-catalog-copy{display: flex; flex-direction: column; gap: 7px; padding: 12px; flex: 1 1 0%; min-width: 0px;}
#accessoriesPartsModal .parts-catalog-title{font-size: 15px; font-weight: 650; line-height: 1.35; min-height: 40px; margin: 0px;}
#accessoriesPartsModal .parts-catalog-sku{font-size: 12px; color: var(--muted); font-weight: 500;}
#accessoriesPartsModal .parts-catalog-price{font-size: 17px; font-weight: 700; line-height: 1.3; margin-top: auto;}
#accessoriesPartsModal .parts-catalog-price > span{font-size: 12px; color: var(--muted); font-weight: 400;}
#accessoriesPartsModal .parts-catalog-info{display: flex; margin: 0px; padding: 0px;}
#accessoriesPartsModal .parts-catalog-info button, #accessoriesPartsModal .parts-request-link{display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin: 0px; padding: 9px 8px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.3; text-decoration: none;}
#accessoriesPartsModal .acc-part-add{background: var(--navy); color: white; border: 1px solid var(--navy);}
#accessoriesPartsModal .parts-request-link{background: white; color: var(--navy); border: 1px solid rgb(189, 205, 225);}
#accessoriesPartsModal .acc-parts-actions{display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0px; padding-top: 10px; border-top: 1px solid var(--line); flex-shrink: 0; font-size: 13px;}
@media (max-width: 1000px) {
#accessoriesPartsModal .acc-parts-list{grid-template-columns: repeat(3, minmax(0px, 1fr));}
}
@media (max-width: 750px) {
#accessoriesPartsModal .acc-parts-list{grid-template-columns: repeat(2, minmax(0px, 1fr));}
}
@media (max-width: 600px) {
#accessoriesPartsModal{padding: 10px;}
#accessoriesPartsModal .acc-parts-panel{padding: 14px; gap: 10px; max-height: 94dvh;}
#accessoriesPartsModal .acc-parts-head h2{font-size: 22px;}
#accessoriesPartsModal .parts-catalog-intro{font-size: 13px;}
#accessoriesPartsModal .parts-search-wrap{flex-wrap: wrap; gap: 8px;}
#partsCatalogSearch{flex-basis: 100%;}
#accessoriesPartsModal .acc-parts-list{grid-template-columns: 1fr; gap: 10px;}
#accessoriesPartsModal .parts-catalog-card{display: grid; grid-template-columns: 80px minmax(0px, 1fr);}
#accessoriesPartsModal .parts-catalog-image{height: 112px; min-height: 0px; padding: 10px 6px; border: 0px; background: white;}
#accessoriesPartsModal .parts-catalog-image img{height: 86px; max-width: 68px;}
#accessoriesPartsModal .parts-catalog-copy{padding: 12px 10px 12px 0px; gap: 6px;}
#accessoriesPartsModal .parts-catalog-title{min-height: 0px; font-size: 15px;}
#accessoriesPartsModal .parts-catalog-price{font-size: 16px;}
#accessoriesPartsModal .parts-catalog-info button, #accessoriesPartsModal .parts-request-link{font-size: 13px;}
}
.all-machines-carousel{container-type: inline-size; border: 0px; border-radius: 16px; margin-right: 0px; margin-left: 0px;}
.all-banner-slide{position: relative; display: grid; grid-template-columns: 40% 60%; height: clamp(270px, 23cqw, 330px); min-width: 0px; background: rgb(7, 44, 83); isolation: isolate; overflow: hidden;}
.all-banner-slide[hidden]{display: none;}
.all-banner-copy{display: flex; flex-direction: column; justify-content: center; min-width: 0px; padding: 24px 26px; color: white; position: relative; z-index: 2; background: linear-gradient(120deg, rgb(5, 28, 56), rgb(11, 66, 119));}
.all-banner-copy::after{content: ""; position: absolute; left: calc(100% - 1px); top: 0px; width: 42px; height: 100%; background: linear-gradient(90deg, rgb(11, 66, 119) 0px, rgb(11, 66, 119) 65%, rgb(193, 27, 62) 65%); clip-path: polygon(0px 0px, 100% 100%, 0px 100%); pointer-events: none;}
.all-banner-kicker{font-size: 10px; font-weight: 800; letter-spacing: 0.12em; line-height: 1.3; margin: 0px 0px 14px; color: rgb(255, 209, 59);}
.all-banner-copy h2{font-family: "Arial Black", Arial, Helvetica, sans-serif; font-size: clamp(28px, 3.5cqw, 58px); font-weight: 900; letter-spacing: -0.04em; line-height: 0.98; margin: 0px 0px 16px; text-transform: uppercase;}
.all-banner-copy h2 span{color: rgb(255, 51, 66);}
.all-banner-description{font-size: clamp(13px, 1.15cqw, 18px); line-height: 1.4; margin: 0px; max-width: 460px;}
.all-banner-photo{min-width: 0px; height: 100%; overflow: hidden;}
.all-banner-photo img{display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 16%; transform: scale(1.35); transform-origin: 65% 20%;}
.banner-benefits{font-size: clamp(12px, 1cqw, 16px); font-weight: 700; line-height: 1.4; margin: 16px 0px 0px; padding-top: 12px; border-top: 1px solid rgba(23, 55, 89, 0.333);}
@media (max-width: 1100px) {
.banner-benefits{display: none;}
}
.banner-yellow{background: rgb(7, 26, 50);}
.banner-yellow .all-banner-copy{color: rgb(6, 30, 60); padding-right: 18px;}
.banner-yellow .all-banner-kicker{color: rgb(23, 55, 89);}
.banner-yellow .all-banner-copy h2{font-size: clamp(28px, 3.1cqw, 50px);}
.banner-yellow .all-banner-copy h2 span{color: rgb(6, 30, 60);}
.banner-yellow .all-banner-description{font-weight: 700;}
.banner-red .all-banner-copy h2{font-size: clamp(27px, 3.05cqw, 50px);}
.banner-revenue{display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px; color: rgb(7, 30, 60); min-width: 0px; min-height: 0px; height: 100%; box-sizing: border-box;}
.revenue-label{color: rgb(255, 207, 59); font-size: 9px; font-weight: 900; letter-spacing: 0.1em; margin: 0px 0px 2px; text-align: center;}
.revenue-row{display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; background: linear-gradient(110deg, rgb(255, 207, 59), rgb(255, 202, 40)); border-radius: 10px; padding: 8px 4px; box-shadow: rgb(191, 139, 16) 0px 3px 0px; flex: 1 1 0%;}
.revenue-row > div{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0px 3px; min-width: 0px;}
.revenue-row > div + div{border-left: 1px solid rgba(144, 114, 20, 0.5);}
.revenue-row strong{font-family: "Arial Black", Arial, sans-serif; font-size: clamp(18px, 1.9cqw, 30px); font-weight: 900; letter-spacing: -0.055em; white-space: nowrap;}
.revenue-row span{font-size: clamp(8px, 0.65cqw, 11px); font-weight: 700; text-align: center; line-height: 1.2;}
.revenue-note{font-size: 9px; line-height: 1.3; color: rgb(224, 232, 244); margin: 3px 0px 0px; text-align: center;}
.all-banner-controls{align-items: center;}
.all-banner-position{font-size: 12px; color: var(--muted); padding-left: 4px;}
.all-banner-navigation{display: flex; align-items: center;}
.all-banner-navigation > button{border: 0px; background: transparent; padding: 0px;}
.all-banner-dots{display: flex; align-items: center;}
.all-banner-dots button{display: grid; place-items: center; padding: 0px; background: transparent; border: 0px;}
@media (min-width: 601px) and (max-width: 1100px) {
.all-banner-copy{padding: 18px;}
.all-banner-copy h2{font-size: 30px;}
.banner-yellow .all-banner-copy h2, .banner-red .all-banner-copy h2{font-size: 26px;}
.all-banner-description{font-size: 13px;}
.banner-revenue{padding: 12px 8px;}
.revenue-row{padding: 13px 1px;}
.revenue-row strong{font-size: 18px;}
}
@media (max-width: 600px) {
.all-machines-carousel{margin: 0px 0px 18px;}
.all-banner-slide{grid-template-columns: 1fr; grid-template-rows: 164px 256px; height: 420px;}
.all-banner-copy, .banner-yellow .all-banner-copy{padding: 16px 20px;}
.all-banner-copy::after{display: none;}
.all-banner-copy h2, .banner-yellow .all-banner-copy h2, .banner-red .all-banner-copy h2{font-size: 30px; margin-bottom: 10px; line-height: 1;}
.all-banner-kicker{font-size: 9px; margin-bottom: 9px;}
.all-banner-description{font-size: 13px; line-height: 1.35;}
.all-banner-photo{height: 100%;}
.all-banner-photo img{object-position: 65% 12%;}
.banner-revenue{grid-template-columns: repeat(3, 1fr); grid-template-rows: 14px 77px 21px;}
.revenue-label, .revenue-note{grid-column: 1 / -1; font-size: 8px; margin: 0px;}
.revenue-row{box-shadow: none; border-radius: 8px;}
.revenue-row > div:first-child{border: 0px;}
.revenue-row > div:nth-child(2){border-top: 0px; border-right: 0px; border-bottom: 0px; border-image: none;}
.revenue-row strong{font-size: 18px;}
.revenue-row > div:first-child strong{font-size: 21px;}
.revenue-row > div{padding: 0px 1px;}
.all-banner-controls{padding: 0px 8px;}
.all-banner-navigation > button{width: 40px;}
.all-banner-dots button{width: 28px;}
}
@media (max-width: 600px) {
.banner-yellow{grid-template-rows: 164px 96px 160px;}
.banner-revenue{display: flex; gap: 4px; padding: 6px 8px;}
.revenue-label{font-size: 8px;}
.revenue-note{font-size: 8px; line-height: 1.2;}
.revenue-row{display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px 2px; gap: 0px;}
.revenue-row > div:first-child{grid-column: auto;}
.revenue-row > div:nth-child(2){border-left: 1px solid rgba(144, 114, 20, 0.5);}
.revenue-row strong, .revenue-row > div:first-child strong{font-size: 20px;}
.revenue-row span{font-size: 8px;}
.revenue-row > div{gap: 1px;}
}
@media (max-width: 600px) {
.banner-revenue{justify-content: flex-start; overflow: hidden;}
.banner-revenue .revenue-label{flex-grow: 0; flex-shrink: 0;}
.banner-revenue .revenue-row{flex: 0 0 32px; min-height: 0px; box-sizing: border-box; padding: 2px;}
.banner-revenue .revenue-row strong{font-size: 18px; line-height: 18px;}
.banner-revenue .revenue-row span{font-size: 8px; line-height: 9px;}
.banner-revenue .revenue-note{flex: 0 0 20px; line-height: 10px; margin: 0px;}
}
.banner-yellow{grid-template-columns: 32% 40% 28%;}
.banner-yellow .all-banner-copy{isolation: isolate;}
.banner-yellow .all-banner-copy::before{content: ""; position: absolute; inset: 0px; z-index: -1; opacity: 0.16; background: repeating-linear-gradient(135deg, transparent 0px, transparent 5px, rgb(255, 255, 255) 5px, rgb(255, 255, 255) 6px); mask-image: linear-gradient(90deg, transparent 30%, black);}
.banner-yellow .all-banner-copy h2{color: rgb(6, 28, 56); letter-spacing: -0.045em;}
.banner-yellow .all-banner-copy h2 .campaign-period{color: rgb(201, 20, 50);}
.banner-yellow .all-banner-kicker{font-weight: 900; letter-spacing: 0.14em;}
.banner-yellow .all-banner-photo img{object-position: left top; transform: scale(1.18); transform-origin: left 18%;}
@media (max-width: 600px) {
.banner-yellow{grid-template-columns: 1fr;}
.banner-yellow .all-banner-photo img{transform: scale(1.12); transform-origin: 15% 15%; object-position: left 15%;}
.banner-yellow .all-banner-copy::after{display: none;}
}
.banner-yellow .all-banner-copy{background: radial-gradient(at 24% 22%, rgba(255, 225, 107, 0.333) 0%, transparent 62%), linear-gradient(60deg, transparent 0px, transparent 52%, rgba(217, 162, 12, 0.333) 52%, rgba(217, 162, 12, 0.333) 65%, transparent 65%), linear-gradient(60deg, rgba(255, 233, 139, 0.4) 0px, rgba(255, 233, 139, 0.4) 20%, transparent 20%, transparent 100%), linear-gradient(120deg, transparent 0px, transparent 74%, rgba(255, 226, 120, 0.333) 74%, rgba(255, 226, 120, 0.333) 88%, transparent 88%), linear-gradient(112deg, rgb(255, 210, 52) 0%, rgb(255, 202, 40) 52%, rgb(245, 191, 32) 100%);}
.banner-yellow .all-banner-copy::before{display: none;}
.banner-yellow .all-banner-copy::after{background: linear-gradient(60deg, rgb(245, 191, 32) 0px, rgb(245, 191, 32) 65%, rgb(233, 179, 26) 65%); width: 48px; clip-path: polygon(0px 0px, 100% 50%, 0px 100%);}
.banner-yellow .all-banner-copy h2{text-shadow: none;}
.banner-yellow .banner-benefits{border-top: 0px; position: relative; padding-top: 16px; margin-top: 14px;}
.banner-yellow .banner-benefits::before{content: ""; position: absolute; top: 0px; left: 0px; width: 48px; height: 3px; border-radius: 2px; background: rgb(17, 43, 78);}
.banner-revenue{background: radial-gradient(at 48% 0%, rgba(22, 69, 116, 0.27) 0%, transparent 64%), radial-gradient(at 100% 100%, rgba(18, 56, 91, 0.25) 0%, transparent 68%), linear-gradient(145deg, rgb(16, 38, 66), rgb(8, 23, 44)); box-shadow: rgba(40, 65, 92, 0.333) 0px 1px 0px inset;}
.banner-revenue .revenue-label{font-size: clamp(12px, 1.05cqw, 19px); line-height: 1.25; font-weight: 900; letter-spacing: 0.075em; text-shadow: none; margin: 0px 0px 4px;}
@media (max-width: 600px) {
.banner-revenue .revenue-label{font-size: 11px; flex-basis: 14px; line-height: 14px; margin: 0px; letter-spacing: 0.065em;}
}
.banner-blue .all-banner-copy{background: radial-gradient(at 12% 14%, rgba(48, 91, 145, 0.333) 0%, transparent 65%), linear-gradient(60deg, transparent 0px, transparent 52%, rgba(2, 11, 40, 0.267) 52%, rgba(2, 11, 40, 0.267) 65%, transparent 65%), linear-gradient(60deg, rgba(66, 105, 158, 0.2) 0px, rgba(66, 105, 158, 0.2) 20%, transparent 20%), linear-gradient(120deg, transparent 0px, transparent 74%, rgba(53, 94, 150, 0.2) 74%, rgba(53, 94, 150, 0.2) 88%, transparent 88%), linear-gradient(112deg, rgb(26, 50, 94), rgb(20, 45, 85) 58%, rgb(12, 35, 70)); isolation: isolate;}
.banner-blue .all-banner-copy::after{width: 48px; background: linear-gradient(90deg, rgb(12, 35, 70) 0px, rgb(12, 35, 70) 78%, rgb(197, 27, 61) 78%); clip-path: polygon(0px 0px, 100% 50%, 0px 100%);}
.banner-blue .all-banner-copy h2 span{color: rgb(255, 52, 73);}
.banner-blue .all-banner-description{position: relative; padding-top: 16px;}
.banner-blue .all-banner-description::before{content: ""; position: absolute; left: 0px; top: 0px; height: 3px; width: 48px; border-radius: 2px; background: rgb(255, 202, 40);}
.banner-blue .all-banner-photo img{width: 121%; max-width: none; height: 100%; object-position: left top; transform: none;}
@media (max-width: 600px) {
.banner-blue .all-banner-copy::after{display: none;}
.banner-blue .all-banner-description{padding-top: 10px;}
.banner-blue .all-banner-photo img{width: 112%; max-width: none; height: 100%; object-position: 55% top; transform: none;}
}
.banner-red .all-banner-copy{background: radial-gradient(at 12% 14%, rgba(228, 66, 85, 0.314) 0%, transparent 65%), linear-gradient(60deg, transparent 0px, transparent 52%, rgba(98, 11, 37, 0.267) 52%, rgba(98, 11, 37, 0.267) 65%, transparent 65%), linear-gradient(60deg, rgba(242, 92, 108, 0.2) 0px, rgba(242, 92, 108, 0.2) 20%, transparent 20%), linear-gradient(120deg, transparent 0px, transparent 74%, rgba(219, 61, 84, 0.2) 74%, rgba(219, 61, 84, 0.2) 88%, transparent 88%), linear-gradient(112deg, rgb(180, 30, 67), rgb(168, 23, 56) 58%, rgb(136, 14, 44)); isolation: isolate;}
.banner-red .all-banner-copy::after{width: 48px; background: linear-gradient(90deg, rgb(136, 14, 44) 0px, rgb(136, 14, 44) 78%, rgb(255, 202, 40) 78%); clip-path: polygon(0px 0px, 100% 50%, 0px 100%);}
.banner-red .all-banner-copy h2 span{color: rgb(255, 202, 40);}
.banner-red .all-banner-description{position: relative; padding-top: 16px;}
.banner-red .all-banner-description::before{content: ""; position: absolute; left: 0px; top: 0px; height: 3px; width: 48px; border-radius: 2px; background: rgb(255, 202, 40);}
.banner-red .all-banner-photo img{width: 119%; max-width: none; height: 100%; object-position: left top; transform: none;}
@media (max-width: 600px) {
.banner-red .all-banner-copy::after{display: none;}
.banner-red .all-banner-description{padding-top: 10px;}
.banner-red .all-banner-photo img{width: 112%; max-width: none; height: 100%; object-position: 55% top; transform: none;}
}
@media (max-width: 360px) {
.banner-red .all-banner-copy{padding: 12px 16px;}
.banner-red .all-banner-copy h2{font-size: 24px;}
.banner-red .all-banner-description{font-size: 12px;}
}
.all-machines-carousel{position: relative; margin-top: 8px;}
.all-banner-controls{gap: 0px; z-index: 4;}
.all-banner-navigation{gap: 0px;}
.all-banner-navigation > button{width: 44px; min-height: 44px; font-size: 25px;}
.card-body{gap: 8px; padding: 12px;}
.card-title-row{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 8px;}
.card-title{margin: 0px; font-size: 19px;}
.card-desc{min-height: 0px; line-height: 1.45;}
.specs > div{padding: 7px;}
.specs h4{margin-bottom: 3px;}
.pills{margin-top: 5px; gap: 4px;}
.pill{padding: 4px 7px;}
.card-config summary{min-height: 44px; padding: 8px 0px;}
.add-btn{min-height: 44px;}
@media (min-width: 901px) {
:root{--sidebar: 224px;}
#catalogMain{padding: 12px 20px 30px;}
.catalog-header{margin-bottom: 4px; min-height: 44px;}
.sidebar .side-btn, .sidebar .utility-item{font-size: 15px;}
.card-hero{height: 185px; padding: 10px;}
.category-head{margin: 10px 0px 12px;}
.family-heading{margin: 16px 0px 10px; padding-bottom: 8px;}
}
@media (min-width: 901px) and (max-height: 800px) {
.sidebar .side-btn, .sidebar .utility-item{font-size: 14px;}
}
@media (max-width: 900px) {
.all-machines-carousel{margin-top: 0px;}
}
@media (max-width: 600px) {
#catalogMain{padding-top: 72px; scroll-padding-top: 68px;}
.all-banner-controls{bottom: 8px;}
.card-body, .list-view .card-body{gap: 7px; padding: 12px 14px;}
.card-title{font-size: 20px;}
.card-hero, .list-view .card-hero{padding: 10px;}
.machine-card, .list-view .machine-card{min-height: calc(-80px + 100svh);}
.all-banner-description{max-width: 100%;}
}
.all-machines-carousel{background: transparent; box-shadow: none; overflow: visible;}
.all-banner-slides{border-radius: 16px; overflow: hidden;}
.all-banner-controls{position: static; left: auto; bottom: auto; transform: none; display: flex; justify-content: center; padding: 0px; background: transparent; border: 0px; border-radius: 0px; box-shadow: none; min-height: 40px;}
.all-banner-navigation{justify-content: center;}
.all-banner-dots{gap: 6px;}
.all-banner-dots button{width: 44px; min-height: 44px; border-radius: 6px;}
.all-banner-dots span{width: 28px; height: 3px; border-radius: 2px; background: rgb(187, 199, 214);}
.all-banner-dots [aria-pressed="true"] span{width: 28px; background: var(--navy);}
.all-banner-dots button:hover span{background: rgb(101, 127, 159);}
.all-machines-carousel{margin-bottom: 8px;}
.category-head{margin: 4px 0px 6px; gap: 12px; min-height: 44px;}
.category-head > div:first-child{display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;}
.category-head h1{font-size: 24px; margin: 0px;}
.category-head p{margin: 0px; font-size: 13px; white-space: nowrap;}
.category-head .all-banner-controls{min-height: 44px; flex: 0 0 auto;}
.family-heading{margin: 10px 0px 8px; padding-bottom: 7px;}
.family-heading h3{font-size: 22px;}
.category-head .all-banner-controls.hidden{display: none;}
@media (max-width: 900px) {
.category-head{display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 4px 8px;}
.category-head .all-banner-controls{grid-area: 2 / 1 / auto / -1; min-height: 36px;}
.category-head .all-banner-dots button{min-height: 36px;}
.category-head h1{font-size: 22px;}
.category-head > div:first-child{gap: 2px 8px;}
.family-heading{margin-top: 6px;}
}
.uplay-v274-play{margin-top: 18px;}
@media (min-width: 901px) and (min-height: 821px) {
.uplay-v274-content{max-width: 1100px; gap: 18px;}
.uplay-v274-catalog{font-size: 16px;}
.uplay-v274-logo{width: min(100%, 400px); height: 206px;}
.uplay-v274-solutions{font-size: 36px;}
.uplay-v274-tagline{font-size: 22px;}
.uplay-v274-cta{min-height: 60px; font-size: 18px; padding: 14px 30px; gap: 26px; border-radius: 32px;}
.uplay-v274-icon{width: 44px; height: 44px; flex-basis: 44px;}
.uplay-v274-btitle{font-size: 16px;}
.uplay-v274-bsub{font-size: 12px;}
.uplay-v274-play{font-size: 16px; margin-top: 24px;}
}
@media (min-width: 901px) and (min-height: 601px) and (max-height: 820px) {
.uplay-v274-content{max-width: 960px; gap: 14px;}
.uplay-v274-logo{width: min(100%, 360px); height: 185px;}
.uplay-v274-solutions{font-size: 30px;}
.uplay-v274-tagline{font-size: 19px;}
.uplay-v274-cta{min-height: 54px; font-size: 17px;}
.uplay-v274-benefits{margin-top: 32px;}
.uplay-v274-play{margin-top: 18px;}
}
@media (min-width: 601px) and (max-width: 900px) and (min-height: 701px) {
.uplay-v274-logo{width: min(100%, 340px); height: 175px;}
.uplay-v274-solutions{font-size: 28px;}
.uplay-v274-tagline{font-size: 18px;}
.uplay-v274-play{margin-top: 22px;}
}
@media (max-width: 600px) and (min-height: 701px) {
.uplay-v274-logo{width: min(100%, 280px); height: 144px;}
.uplay-v274-solutions{font-size: 24px;}
.uplay-v274-tagline{font-size: 16px;}
.uplay-v274-cta{min-height: 48px; font-size: 15px;}
.uplay-v274-icon{width: 32px; height: 32px; flex-basis: 32px;}
.uplay-v274-benefits{margin-top: 32px;}
.uplay-v274-play{margin-top: 20px;}
}
@media (max-width: 600px) and (max-height: 700px) {
.uplay-v274-play{margin-top: 10px;}
}
@media (max-height: 600px) {
.uplay-v274-play{margin-top: 6px;}
}
#businessModal .feature-panel{max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden;}
#businessModal .feature-layout{display: flex; flex-direction: column; min-height: 0px; overflow: hidden;}
#businessModal .feature-side{flex: 0 0 auto;}
#businessModal .feature-side h2{line-height: 1.15; margin-top: 0px; margin-right: 0px; margin-left: 0px; letter-spacing: -0.025em;}
#businessModal .feature-side p{font-size: 14px; line-height: 1.4; margin-top: 0px; margin-right: 0px; margin-left: 0px; color: var(--muted);}
#businessModal .feature-tabs{display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr));}
#businessModal .feature-tabs button{font-weight: 600; line-height: 1.2; justify-content: center; text-align: center;}
#businessModal .feature-tabs .active{background: var(--navy); color: white; border-color: var(--navy); box-shadow: inset 0 -3px var(--yellow);}
#businessModal .feature-main{min-height: 0px; overflow-y: auto; scrollbar-width: thin;}
#businessModal .bs-hero{display: grid; align-items: center; position: relative; overflow: hidden;}
#businessModal .bs-hero > img{grid-area: 1 / 2; object-position: center center;}
#businessModal .bs-hero-copy{grid-area: 1 / 1; inset: auto; background: none; color: white; min-width: 0px;}
#businessModal .bs-hero-copy strong{font-weight: 700; color: var(--yellow);}
#businessModal .bs-hero-copy em{display: block; font-style: normal; font-size: 14px; font-weight: 500; margin-top: 8px; color: rgb(218, 229, 244);}
#businessModal .business-lead{color: rgb(229, 237, 248); margin: 0px;}
#businessModal .feature-cards > div{min-width: 0px;}
#businessModal .feature-cards strong{font-weight: 700;}
#businessModal .feature-cards span{color: var(--muted);}
#businessModal .adv-grid{display: grid;}
#businessModal .adv-grid article{display: flex; align-items: flex-start; min-width: 0px;}
#businessModal .adv-grid i{display: flex; justify-content: center; align-items: center; flex-grow: 0; flex-shrink: 0; height: 32px; font-style: normal;}
#businessModal .adv-grid strong{line-height: 1.3;}
#businessModal .adv-grid p{margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: var(--muted);}
@media (max-width: 700px) {
#businessModal .feature-panel{max-height: calc(100dvh - 20px); border-radius: 16px;}
#businessModal .feature-close{top: 12px; right: 12px;}
#businessModal .feature-side{padding-right: 0px;}
#businessModal .feature-side h2{padding-right: 44px;}
#businessModal .feature-side p{font-size: 13px; max-width: calc(100% - 40px); margin-bottom: 12px;}
#businessModal .feature-tabs{overflow-x: auto; padding-top: 0px; padding-right: 0px; padding-left: 0px; scrollbar-width: thin;}
#businessModal .feature-tabs button{white-space: nowrap; min-height: 44px;}
#businessModal .feature-main{padding: 12px;}
#businessModal .bs-hero-copy strong{letter-spacing: 0.04em;}
#businessModal .business-lead{line-height: 1.4;}
#businessModal .feature-cards{gap: 6px;}
#businessModal .feature-cards span{text-align: right;}
#businessModal .adv-grid{grid-template-columns: 1fr; gap: 8px;}
#businessModal .adv-grid article{padding: 12px;}
}
#quoteAside .dq-trash{width: 40px; height: 40px; min-width: 40px; min-height: 40px; max-height: 40px; aspect-ratio: 1 / 1; flex: 0 0 40px; padding: 0px; display: grid; place-items: center; font-size: 20px; line-height: 1; top: 12px; right: 12px;}
#quoteAside .dq-summary{background: rgb(255, 255, 255); padding-right: 64px;}
#quoteAside .dq-thumb{background: rgb(255, 255, 255);}
#quoteAside .dq-thumb img{background: rgb(255, 255, 255);}
#quoteAside .quote-carousel-nav{display: grid; grid-template-columns: 44px minmax(130px, 190px) 44px; align-items: center; justify-content: center; gap: 16px; width: max-content; max-width: 100%; margin: 0px auto 14px; padding: 2px 0px;}
#quoteAside .quote-carousel-nav .machineCarouselArrow, #quoteAside .quote-carousel-nav .quoteSpareArrow{width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0px; display: grid; place-items: center; border-radius: 12px; background: var(--navy); color: rgb(255, 255, 255); border: 1px solid var(--navy); box-shadow: rgba(26, 50, 94, 0.086) 0px 3px 8px;}
#quoteAside .quote-carousel-nav button svg{width: 22px; height: 22px; display: block;}
#quoteAside .quote-carousel-nav button:disabled{opacity: 1; background: rgb(248, 250, 252); color: rgb(154, 173, 195); border-color: rgb(219, 228, 238); box-shadow: none;}
#quoteAside .quote-carousel-nav .quoteNavStatus, #quoteAside .quote-carousel-nav .quoteSparePage{grid-area: 1 / 2; min-width: 0px; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: center; color: var(--navy);}
.sidebar{background: linear-gradient(145deg, transparent 0px, transparent 25%, rgba(255, 255, 255, 0.02) 25%, rgba(255, 255, 255, 0.02) 42%, transparent 42%, transparent 100%) local, linear-gradient(35deg, transparent 0px, transparent 48%, rgba(6, 24, 49, 0.11) 48%, rgba(6, 24, 49, 0.11) 65%, transparent 65%, transparent 100%), linear-gradient(155deg, rgb(33, 62, 109) 0%, rgb(26, 50, 94) 45%, rgb(20, 42, 80) 100%);}
.sidebar .brand{width: 148px; height: 148px; margin: 12px auto 30px; background: rgb(255, 255, 255); box-shadow: rgba(6, 24, 49, 0.125) 0px 5px 20px;}
.sidebar .sidebar-brand-art{width: 118px;}
@media (min-width: 901px) and (max-height: 620px) {
.sidebar .brand{width: 94px; height: 94px; margin: 6px auto 18px;}
.sidebar .sidebar-brand-art{width: 76px;}
}
@media (max-width: 900px) {
#quoteAside .dq-trash{width: 44px; height: 44px; min-width: 44px; min-height: 44px; max-height: 44px; flex-basis: 44px;}
#quoteAside .dq-summary{padding-right: 66px;}
}
@media (max-width: 360px) {
#quoteAside .quote-carousel-nav{grid-template-columns: 44px minmax(110px, 1fr) 44px; gap: 10px; width: 100%;}
#quoteAside .quote-carousel-nav .quoteNavStatus, #quoteAside .quote-carousel-nav .quoteSparePage{font-size: 13px;}
}
#businessModal .feature-panel{padding: 26px; max-width: 1200px; width: min(1200px, -32px + 100vw);}
#businessModal .feature-layout{gap: 18px;}
#businessModal .feature-side{padding-right: 38px;}
#businessModal .feature-brand{font-size: 10px; letter-spacing: 0.16em; margin-bottom: 8px;}
#businessModal .feature-side h2{font-size: 28px; margin-bottom: 6px;}
#businessModal .feature-side p{margin-bottom: 16px;}
#businessModal .feature-tabs{gap: 18px; border-bottom: 1px solid var(--line);}
#businessModal .feature-tabs button{border: 0px; border-radius: 0px; min-height: 44px; padding: 10px 4px; background: transparent; color: var(--muted); font-size: 14px; box-shadow: none;}
#businessModal .feature-tabs button.active{background: transparent; color: var(--navy); box-shadow: inset 0 -3px var(--red); font-weight: 750;}
#businessModal .feature-main{padding: 0px; border: 0px; background: white; border-radius: 0px;}
#businessModal .bs-hero{grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.15fr); min-height: 306px; margin: 0px 0px 18px; border-radius: 16px; background: linear-gradient(145deg, transparent 30%, rgba(255, 255, 255, 0.024) 30%, rgba(255, 255, 255, 0.024) 45%, transparent 45%), linear-gradient(35deg, transparent 55%, rgba(8, 27, 52, 0.25) 55%, rgba(8, 27, 52, 0.25) 75%, transparent 75%), linear-gradient(125deg, rgb(34, 63, 108), rgb(17, 41, 78));}
#businessModal .bs-hero-copy{padding: 30px; position: relative; z-index: 1;}
#businessModal .bs-hero-copy strong{font-size: 11px; letter-spacing: 0.13em;}
#businessModal .bs-hero-copy h3{font-size: 42px; font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; margin: 16px 0px;}
#businessModal .bs-hero-copy h3 span{color: var(--yellow);}
#businessModal .business-lead{font-size: 14px; line-height: 1.5; max-width: 410px;}
#businessModal .bs-hero > img{height: 290px; width: 100%; padding: 18px 35px; object-fit: contain; filter: drop-shadow(rgba(6, 22, 43, 0.314) 0px 12px 16px);}
#businessModal .business-scene > img{width: 112%; max-width: none; height: 100%; min-height: 306px; align-self: stretch; padding: 0px; object-fit: cover; object-position: left top; filter: none;}
#businessModal .feature-cta{display: inline-flex; width: auto; gap: 14px; margin-top: 20px; min-height: 46px; padding: 12px 18px; background: var(--yellow); color: var(--navy); border-radius: 9px; font-size: 13px; box-shadow: rgba(6, 22, 43, 0.094) 0px 4px 12px;}
#businessModal .feature-cards{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); margin: 0px 0px 22px; gap: 0px; border-radius: 12px; background: rgb(243, 246, 251); padding: 16px 0px;}
#businessModal .feature-cards > div{background: none; border: 0px; border-radius: 0px; padding: 0px 22px;}
#businessModal .feature-cards > div + div{border-left: 1px solid rgb(215, 225, 237);}
#businessModal .feature-cards strong{font-size: 11px; letter-spacing: 0.035em; margin-bottom: 4px;}
#businessModal .feature-cards span{font-size: 13px;}
#businessModal .adv-grid{grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0px 24px; margin: 0px;}
#businessModal .adv-grid article{border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--line); border-radius: 0px; padding: 18px 0px; gap: 12px; background: none;}
#businessModal .adv-grid i{background: none; color: var(--red); font-size: 24px; width: 28px; flex-basis: 28px; border-radius: 0px;}
#businessModal .adv-grid strong{font-size: 15px; font-weight: 700;}
#businessModal .adv-grid p{font-size: 13px; margin-top: 6px; line-height: 1.45;}
#businessPane-purchase .adv-grid{grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 22px;}
#businessPane-purchase .adv-grid article{display: block; padding: 0px; border-top: 0px;}
#businessPane-purchase .adv-grid i{margin: 0px 0px 8px;}
@media (max-width: 1000px) and (min-width: 701px) {
#businessModal .bs-hero-copy h3{font-size: 34px;}
#businessModal .bs-hero-copy{padding: 24px;}
#businessPane-purchase .adv-grid{grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 16px 24px;}
}
@media (max-width: 700px) {
#businessModal .feature-panel{width: calc(-20px + 100vw); padding: 18px 14px;}
#businessModal .feature-layout{gap: 12px;}
#businessModal .feature-side h2{font-size: 24px;}
#businessModal .feature-tabs{display: flex; flex-direction: row; gap: 18px; padding-bottom: 0px;}
#businessModal .feature-tabs button{flex: 0 0 auto; padding: 10px 0px; font-size: 13px;}
#businessModal .bs-hero{grid-template-columns: 1fr; min-height: 0px; border-radius: 12px; margin-bottom: 14px;}
#businessModal .bs-hero-copy{grid-area: 2 / 1; padding: 22px;}
#businessModal .bs-hero-copy h3{font-size: 32px; margin: 12px 0px;}
#businessModal .bs-hero-copy strong{font-size: 10px;}
#businessModal .business-lead{font-size: 13px;}
#businessModal .bs-hero > img{grid-area: 1 / 1; height: 180px; padding: 16px; object-fit: contain; min-height: 0px;}
#businessModal .business-scene > img{height: auto; aspect-ratio: 2 / 1; min-height: 0px; padding: 0px; object-fit: cover; object-position: left top;}
#businessModal .feature-cta{width: 100%; min-height: 48px; margin-top: 18px;}
#businessModal .feature-cards{grid-template-columns: 1fr; padding: 4px 14px; margin-bottom: 18px;}
#businessModal .feature-cards > div{display: flex; padding: 12px 0px; justify-content: space-between; gap: 10px; align-items: center;}
#businessModal .feature-cards > div + div{border-left: 0px; border-top: 1px solid rgb(215, 225, 237);}
#businessModal .feature-cards strong{margin: 0px; font-size: 10px;}
#businessModal .feature-cards span{font-size: 12px;}
#businessPane-purchase .adv-grid, #businessModal .adv-grid{grid-template-columns: 1fr; gap: 0px;}
#businessModal .adv-grid article, #businessPane-purchase .adv-grid article{display: flex; padding: 16px 0px; border-top: 1px solid var(--line); gap: 12px;}
#businessPane-purchase .adv-grid i{margin: 0px;}
}
#businessPane-repairs .business-parts-gallery{grid-area: 1 / 2; display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr)); gap: 14px 18px; place-self: center; width: 100%; max-width: 460px; padding: 22px 26px;}
#businessPane-repairs .business-part{grid-column: span 2; margin: 0px; min-width: 0px; display: flex; flex-direction: column; align-items: center; gap: 8px;}
#businessPane-repairs .business-part:nth-child(4){grid-column: 2 / span 2;}
#businessPane-repairs .business-part:nth-child(5){grid-column: 4 / span 2;}
#businessPane-repairs .business-part-circle{width: 100%; max-width: 100px; aspect-ratio: 1 / 1; border-radius: 50%; background: rgb(255, 255, 255); display: grid; place-items: center; border: 3px solid rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.125) 0px 0px 0px 1px, rgba(7, 23, 45, 0.145) 0px 8px 20px; overflow: hidden;}
#businessPane-repairs .business-part-circle img{width: 76%; height: 76%; object-fit: contain;}
#businessPane-repairs .business-part figcaption{color: rgb(255, 255, 255); font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center;}
@media (max-width: 700px) {
#businessPane-repairs .business-parts-gallery{grid-area: 1 / 1; max-width: 380px; padding: 22px 20px 0px; gap: 14px;}
#businessPane-repairs .business-part-circle{max-width: 80px;}
#businessPane-repairs .business-part figcaption{font-size: 11px;}
#businessPane-repairs .bs-hero-copy{padding-top: 24px;}
}
@media (max-width: 360px) {
#businessPane-repairs .business-parts-gallery{padding: 20px 14px 0px; gap: 12px 10px;}
#businessPane-repairs .business-part figcaption{font-size: 10px;}
}
#quoteAside .dq-trash{border: 0px; background: transparent; box-shadow: none; border-radius: 0px; overflow: visible;}
#quoteAside .dq-trash .quote-remove-icon{display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; pointer-events: none;}
@media (min-width: 701px) {
.banner-revenue{justify-content: center; gap: 8px;}
.banner-revenue .revenue-row{flex: 0 1 auto; min-height: 52px; padding: 8px 4px; border-radius: 8px; box-shadow: rgb(191, 139, 16) 0px 1px 0px;}
.banner-revenue .revenue-row strong{font-family: "Segoe UI", Arial, sans-serif; font-size: clamp(16px, 1.45cqw, 24px); font-weight: 750; line-height: 1.15; letter-spacing: -0.035em;}
.banner-revenue .revenue-row > div{gap: 4px;}
.banner-revenue .revenue-row span{font-size: clamp(8px, 0.6cqw, 10px); font-weight: 600;}
}
.machine-card .catalog-add-icon{justify-content: center;}
.machine-card .catalog-add-icon svg{display: block;}
.machine-card .add-btn{display: inline-flex; align-items: center; font-size: 14px; line-height: 1.25;}
.machine-card .add-btn b{text-transform: none; letter-spacing: 0px;}
.machine-card .catalog-add-icon{display: grid; place-items: center; flex-grow: 0; flex-shrink: 0;}
.machine-card .catalog-add-icon svg{width: 18px; height: 18px;}
@media (max-width: 700px) {
.machine-card .add-btn{font-size: 15px;}
}
.machine-card .add-btn{min-width: 0px; justify-content: flex-start; margin-top: 10px; margin-bottom: 2px; padding: 7px 12px 7px 8px; gap: 9px; border: 0px; border-radius: 10px; background: var(--navy); color: rgb(255, 255, 255); min-height: 48px; box-shadow: none;}
.machine-card .add-btn b{flex: 1 1 0%; font-size: 14px; font-weight: 600; white-space: nowrap; text-align: left;}
.machine-card .catalog-add-icon{width: 30px; height: 30px; flex-basis: 30px;}
.machine-card .catalog-add-arrow{display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 18px;}
.machine-card .catalog-add-arrow svg{display: block; width: 18px; height: 18px;}
.machine-card .add-btn:hover{background: rgb(36, 69, 114); border: 0px; filter: none;}
.machine-card .add-btn.added{background: rgb(33, 114, 70); border: 0px; color: rgb(255, 255, 255);}
@media (max-width: 700px) {
.machine-card .add-btn{min-height: 50px; margin-top: 12px;}
}
#infoModal.compact-info-sheet{padding: 16px; align-items: center; overflow: hidden;}
#infoModal.compact-info-sheet .info-panel{width: min(1120px, 100%); max-width: 1120px; max-height: calc(100dvh - 32px); padding: 22px 26px; overflow: hidden; display: flex; flex-direction: column;}
#infoModal.compact-info-sheet .info-head{margin-bottom: 14px; flex: 0 0 auto;}
#infoModal.compact-info-sheet .info-head h2{font-size: 26px; line-height: 1.2; margin-top: 4px;}
#infoModal.compact-info-sheet .info-kicker{font-size: 10px;}
#infoModal.compact-info-sheet .info-close{width: 40px; height: 40px; min-height: 40px; padding: 0px; flex: 0 0 40px;}
#infoModal.compact-info-sheet .info-content{font-size: 13px; line-height: 1.4; min-height: 0px;}
.info-sheet-intro{margin-bottom: 14px; max-width: 900px;}
.info-sheet-intro p{margin: 0px; line-height: 1.45; font-weight: 400;}
.info-sheet-intro strong{font-weight: 500;}
.info-sheet-grid{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 14px 30px;}
.info-sheet-section{min-width: 0px; border-top: 1px solid var(--line); padding-top: 10px;}
.info-sheet-section[hidden], .info-sheet-nav[hidden]{display: none !important;}
#infoModal .info-sheet-section h3{font-size: 14px; line-height: 1.3; margin: 0px 0px 6px; font-weight: 700;}
#infoModal .info-sheet-section p{margin: 0px 0px 5px; line-height: 1.4;}
#infoModal .info-sheet-section ul{margin: 0px; padding-left: 17px; line-height: 1.4;}
#infoModal .info-sheet-section li + li{margin-top: 3px;}
#infoModal .info-sheet-section .info-note{padding: 9px 11px; margin-top: 8px; font-size: 12px; line-height: 1.4; border-radius: 8px;}
.info-sheet-nav{display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px;}
.info-sheet-nav button{min-height: 44px; padding: 8px 12px; font-size: 13px;}
.info-sheet-status{font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap;}
@media (max-width: 700px) {
#infoModal.compact-info-sheet{padding: 10px;}
#infoModal.compact-info-sheet .info-panel{padding: 18px 16px; max-height: calc(100dvh - 20px); border-radius: 14px;}
#infoModal.compact-info-sheet .info-head h2{font-size: 21px;}
#infoModal.compact-info-sheet .info-content{font-size: 13px;}
.info-sheet-grid{grid-template-columns: 1fr; gap: 12px;}
.info-sheet-intro{margin-bottom: 12px;}
#infoModal .info-sheet-section h3{font-size: 14px;}
}
.sidebar{display: flex; flex-direction: column;}
.sidebar > *{flex-shrink: 0;}
.sidebar-distributor{margin-top: auto; padding-top: 16px; align-self: center;}
.sidebar-distributor img{width: 100%; height: auto;}
@media (min-width: 901px) and (min-height: 801px) {
.sidebar .side-rule{margin: 6px 0px;}
.sidebar .sidebar-info{padding-bottom: 0px;}
.sidebar .brand{margin-bottom: 26px;}
.sidebar .side-btn{min-height: 31px; padding: 6px 10px; line-height: 1.2;}
.sidebar .utility-item{min-height: 27px; padding: 4px 10px; line-height: 1.2;}
}
@media (min-width: 901px) and (max-height: 800px) {
.sidebar{padding: 10px 12px;}
.sidebar .brand{margin-top: 6px; margin-right: auto; margin-left: auto;}
.sidebar .side-btn{line-height: 1.2;}
.sidebar .utility-item{line-height: 1.2;}
.sidebar .sidebar-info{padding-bottom: 0px;}
}
@media (min-width: 901px) and (max-height: 680px) {
.sidebar .side-btn, .sidebar .utility-item{font-size: 13px;}
.sidebar-distributor{max-width: 170px; align-self: center;}
}
@media (max-width: 900px) {
.sidebar-distributor{align-self: center; padding-bottom: 8px;}
}
.sidebar .sidebar-location{display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 6px 4px 0px; margin: 0px; border: 0px; border-radius: 0px; background: none; color: rgb(209, 217, 228); font-size: 11px; font-weight: 500; text-align: left; line-height: 1.2;}
.sidebar .sidebar-location svg{width: 14px; height: 14px; flex: 0 0 14px;}
.sidebar .sidebar-location span:last-child{margin-left: auto; font-size: 18px;}
.sidebar .sidebar-location:hover{color: rgb(255, 255, 255); filter: none; background: none;}
.location-info{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 20px;}
#infoModal .location-info h3{font-size: 16px; margin: 0px 0px 8px;}
.location-info p{font-size: 14px; line-height: 1.6; margin: 0px; color: var(--muted);}
.location-info .location-appointment{margin-top: 8px; font-size: 12px;}
@media (max-width: 700px) {
.location-info{grid-template-columns: 1fr; gap: 22px;}
}
@media (max-width: 900px) {
.sidebar .brand{width: 112px; height: 112px; margin: 44px auto 20px;}
.sidebar .sidebar-brand-art{width: 92px;}
.sidebar .side-btn, .sidebar .utility-item{font-size: 14px; line-height: 1.25; min-height: 40px; padding: 8px 10px;}
.sidebar .side-rule{margin: 10px 0px;}
.sidebar-distributor{padding-top: 16px;}
.sidebar .sidebar-location{min-height: 44px;}
}
@media (min-width: 901px) and (max-height: 740px) {
.sidebar .brand{margin-top: 6px; margin-right: auto; margin-left: auto;}
.sidebar .side-btn{font-size: 13px; line-height: 1.2;}
.sidebar .utility-item{font-size: 13px; line-height: 1.2;}
.sidebar-distributor{padding-top: 8px; max-width: 150px;}
}
@media (min-width: 901px) and (max-height: 680px) {
.sidebar .brand{margin-top: 4px; margin-right: auto; margin-left: auto;}
.sidebar .sidebar-section-label{font-size: 10px; padding-bottom: 4px;}
}
.sidebar-distributor img{border-radius: 0px; filter: grayscale(1) invert(1) brightness(2) contrast(4); mix-blend-mode: screen; opacity: 1; background: transparent;}
.distributor-marks{width: 100%;}
.sidebar-distributor .distributor-marks img{width: 100%; height: auto; max-width: none; margin-top: -4px;}
.distributor-caption{margin: 0px 0px 5px; text-align: center; color: rgb(255, 255, 255); line-height: 1.35;}
.distributor-caption strong{display: block; font-size: 10px; font-weight: 650; margin-bottom: 3px;}
.distributor-caption span{display: block; font-size: 8.5px; font-weight: 400; color: rgb(255, 255, 255);}
@media (max-width: 900px) {
.distributor-caption strong{font-size: 11px;}
.distributor-caption span{font-size: 10px;}
}
@media (min-width: 901px) and (max-height: 680px) {
.distributor-caption{margin-bottom: 2px;}
.distributor-caption strong{margin-bottom: 1px;}
}
.distributor-marks{display: flex; align-items: center; justify-content: center; gap: 10px; aspect-ratio: auto; height: 60px; overflow: visible;}
.distributor-marks svg{display: block; filter: none; mix-blend-mode: normal; overflow: hidden;}
.distributor-marks .distributor-uplay{width: 100px; height: 60px; flex: 0 1 100px;}
.distributor-marks .distributor-pro{width: 60px; height: 60px; flex: 0 1 60px;}
.blue-banner-footer{display: flex; align-items: center; gap: 16px; min-width: 0px;}
.blue-banner-footer .all-banner-description{flex: 1 1 0%; min-width: 0px;}
.blue-banner-seal{width: 110px; height: 92px; flex: 0 0 110px; object-fit: contain; clip-path: polygon(45% 13%, 63% 18%, 64% 23%, 83% 25%, 82% 33%, 85% 34%, 91% 43%, 85% 57%, 77% 59%, 73% 65%, 85% 66%, 87% 79%, 25% 83%, 21% 78%, 23% 67%, 28% 66%, 25% 64%, 16% 62%, 17% 56%, 17% 25%, 30% 21%);}
@media (min-width: 901px) and (max-height: 800px) {
.distributor-marks{height: 50px; gap: 8px;}
.distributor-marks .distributor-uplay{width: 88px; height: 50px; flex-basis: 88px;}
.distributor-marks .distributor-pro{width: 50px; height: 50px; flex-basis: 50px;}
}
@media (min-width: 901px) and (max-height: 680px) {
.distributor-marks{height: 44px; gap: 6px;}
.distributor-marks .distributor-uplay{width: 78px; height: 44px; flex-basis: 78px;}
.distributor-marks .distributor-pro{width: 44px; height: 44px; flex-basis: 44px;}
}
@media (max-width: 700px) {
.blue-banner-footer{gap: 10px;}
.blue-banner-seal{width: 62px; height: 52px; flex-basis: 62px;}
.banner-blue .all-banner-copy h2{font-size: 28px; margin-bottom: 8px;}
.banner-blue .all-banner-kicker{font-size: 9px; margin-bottom: 6px;}
.blue-banner-footer .all-banner-description{font-size: 12px; line-height: 1.3; padding-top: 8px;}
}
.sidebar-distributor{width: 100%; max-width: 200px;}
.distributor-signature{display: flex; align-items: center; gap: 8px; padding: 9px 8px; min-height: 90px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; background: rgba(255, 255, 255, 0.035); text-align: left;}
.distributor-signature img{display: block; flex-grow: 0; flex-shrink: 0; object-fit: contain; border-radius: 50%; background: white; filter: none; mix-blend-mode: normal;}
.distributor-signature-copy{min-width: 0px; flex: 1 1 0%; color: white;}
.distributor-signature-copy strong{display: block; font-weight: 750;}
.distributor-signature-copy span{display: block; line-height: 1.35; font-weight: 600;}
.distributor-signature-copy small{display: block; line-height: 1.4; color: rgb(220, 230, 244);}
.sidebar-distributor .sidebar-location{margin-top: 10px;}
@media (min-width: 901px) and (max-height: 800px) {
.sidebar-distributor{max-width: 200px; padding-top: 8px;}
.distributor-signature{padding: 7px 8px; min-height: 86px;}
}
@media (min-width: 901px) and (max-height: 680px) {
.sidebar-distributor{padding-top: 4px;}
.distributor-signature{padding: 6px; min-height: 78px; gap: 7px;}
.sidebar-distributor .sidebar-location{margin-top: 6px;}
}
@media (max-width: 900px) {
.sidebar-distributor{max-width: 224px;}
.distributor-signature-copy strong{font-size: 11px;}
.distributor-signature-copy span{font-size: 11px;}
.distributor-signature-copy small{font-size: 10px;}
}
.distributor-signature img{width: 76px; height: 76px; flex-basis: 76px;}
.distributor-signature-copy strong{font-size: 11px; letter-spacing: 0.15px; white-space: normal; line-height: 1.15;}
.distributor-signature-copy span{font-size: 10px; margin-top: 4px;}
.distributor-signature-copy small{font-size: 9px; margin-top: 3px;}
.sidebar .sidebar-footer-links .sidebar-location{width: auto; flex: 1 1 0%; min-width: 0px; margin: 0px; padding: 6px 0px; gap: 5px; font-size: 10px; min-height: 32px;}
.sidebar .sidebar-memberships{display: flex; align-items: center; justify-content: space-between; gap: 5px; flex: 1 1 0%; min-width: 0px; min-height: 32px; margin: 0px; padding: 6px 0px; background: none; border: 0px; border-radius: 0px; color: rgb(209, 217, 228); font-size: 10px; line-height: 1.2;}
.sidebar .sidebar-memberships:hover{color: white; filter: none; background: none;}
.sidebar-memberships span:last-child{font-size: 18px;}
.industry-memberships{display: flex; align-items: center; justify-content: space-between; gap: 32px; background: white; padding: 28px 32px; margin: 32px 0px 24px; border: 1px solid rgb(221, 229, 240); border-radius: 14px;}
.memberships-intro span{font-size: 10px; font-weight: 700; letter-spacing: 1.8px; color: rgb(97, 114, 140);}
.memberships-intro h2{margin: 7px 0px 0px; font-size: 20px; color: rgb(27, 53, 94);}
.membership-logos{display: flex; align-items: center; justify-content: center; gap: 38px; flex-wrap: wrap;}
.membership-logo{display: flex; align-items: center; justify-content: center; padding: 8px; min-height: 76px; border-radius: 6px;}
.membership-logo img{display: block; object-fit: contain; width: 140px; height: 64px; filter: none;}
.membership-logo:nth-child(3) img{width: 115px; height: 76px;}
.membership-logo:focus-visible{outline: rgb(27, 53, 94) solid 2px; outline-offset: 4px;}
.memberships-modal{padding: 12px 0px 10px;}
.memberships-modal p{font-size: 14px; color: rgb(89, 112, 143); margin: 0px 0px 24px;}
.memberships-modal .membership-logos{padding: 12px 0px; gap: 32px;}
.memberships-modal .membership-logo img{width: 170px; height: 76px;}
.memberships-modal .membership-logo:nth-child(3) img{width: 145px; height: 88px;}
@media (min-width: 901px) and (max-height: 680px) {
.distributor-signature img{width: 64px; height: 64px; flex-basis: 64px;}
.distributor-signature-copy strong{font-size: 10px;}
}
@media (max-width: 1100px) {
.industry-memberships{flex-direction: column; gap: 18px; text-align: center;}
.membership-logos{gap: 22px;}
}
@media (max-width: 900px) {
.sidebar-footer-links{gap: 12px;}
}
@media (max-width: 600px) {
.industry-memberships{padding: 24px 14px; margin-top: 24px;}
.membership-logos{gap: 14px;}
.membership-logo img{width: 120px; height: 58px;}
.membership-logo:nth-child(3) img{width: 110px; height: 68px;}
.memberships-modal .membership-logos{flex-direction: column; gap: 18px;}
.memberships-intro h2{font-size: 19px;}
}
.machine-card .add-btn{width: 100%; max-width: 100%; align-self: stretch; margin-left: 0px; margin-right: 0px;}
.machine-card .catalog-add-icon{border: 1.5px solid rgb(255, 255, 255); border-radius: 50%; background: transparent; color: rgb(255, 255, 255);}
.machine-card .add-btn.added .catalog-add-icon{border-color: rgb(255, 255, 255); background: transparent; color: rgb(255, 255, 255);}
.sidebar-footer-links{display: flex; flex-direction: column; align-items: stretch; gap: 0px; margin-top: 12px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.13);}
.sidebar .sidebar-footer-links :is(button, a){display: flex; align-items: center; justify-content: flex-start; flex: 0 0 auto; width: 100%; margin: 0px; background: none; border: 0px; border-radius: 6px; color: rgb(238, 243, 251); font-size: 12px; font-weight: 500; line-height: 1.2; text-align: left;}
.sidebar .sidebar-footer-links :is(button, a) span{margin: 0px;}
.sidebar .sidebar-footer-links svg{display: block; width: 16px; height: 18px; flex: 0 0 16px; fill: none; stroke: currentcolor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;}
.sidebar .sidebar-footer-links .sidebar-footer-chevron{width: 14px; height: 14px; flex: 0 0 14px; color: rgb(196, 210, 231);}
.sidebar .sidebar-footer-links :is(button, a):hover{background: rgba(255, 255, 255, 0.043); color: white; filter: none;}
.sidebar .sidebar-footer-links :is(button, a):focus-visible{outline: 2px solid var(--yellow); outline-offset: 1px;}
@media (min-width: 901px) and (min-height: 801px) and (max-height: 920px) {
.sidebar .brand{width: 128px; height: 128px; margin-bottom: 22px;}
.sidebar .sidebar-brand-art{width: 106px;}
.sidebar .side-btn{min-height: 30px; padding: 5px 10px;}
}
@media (min-width: 901px) and (min-height: 801px) and (max-height: 900px) {
.sidebar .side-btn{min-height: 29px; padding: 5px 10px;}
.sidebar .utility-item{min-height: 25px; padding: 3px 10px;}
}
@media (min-width: 901px) and (max-height: 800px) {
.sidebar .brand{width: 96px; height: 96px; margin-bottom: 14px;}
.sidebar .sidebar-brand-art{width: 80px;}
.sidebar .side-btn{min-height: 25px; padding: 3px 10px;}
.sidebar .utility-item{min-height: 22px; padding: 2px 10px;}
.sidebar .side-rule{margin: 4px 0px;}
.sidebar .sidebar-footer-links :is(button, a){height: 34px; min-height: 34px; padding: 6px;}
.sidebar-footer-links{margin-top: 10px;}
}
@media (min-width: 901px) and (max-height: 740px) {
.sidebar .brand{width: 88px; height: 88px; margin-bottom: 12px;}
.sidebar .sidebar-brand-art{width: 72px;}
.sidebar .side-btn{min-height: 22px; padding: 2px 10px;}
.sidebar .utility-item{min-height: 21px; padding: 2px 10px;}
.sidebar .side-rule{margin: 3px 0px;}
}
@media (min-width: 901px) and (max-height: 680px) {
.sidebar .brand{width: 80px; height: 80px; margin-bottom: 12px;}
.sidebar .sidebar-brand-art{width: 66px;}
.sidebar .side-btn, .sidebar .utility-item{min-height: 20px; padding: 2px 10px;}
.sidebar .side-rule{margin: 2px 0px;}
.sidebar .sidebar-footer-links :is(button, a){height: 30px; min-height: 30px; padding: 5px 6px;}
.sidebar-footer-links{margin-top: 8px; padding-top: 4px;}
}
@media (max-width: 900px) {
.sidebar .sidebar-footer-links :is(button, a){font-size: 12px;}
.sidebar-footer-links{margin-top: 12px; padding-top: 6px;}
}
.sidebar .sidebar-distributor{width: 100%; max-width: none; padding-top: 8px;}
.sidebar .distributor-signature{width: 100%; min-height: 80px; height: 80px; padding: 7px; gap: 8px; align-items: center;}
.sidebar .distributor-signature img{width: 64px; height: 64px; flex: 0 0 64px;}
.sidebar .distributor-signature-copy{flex: 1 1 0%; min-width: 0px;}
.sidebar .distributor-signature-copy strong{font-size: 10px; line-height: 1.25; letter-spacing: 0px; white-space: nowrap;}
.sidebar .distributor-signature-copy span{font-size: 10px; line-height: 1.3; margin-top: 5px; white-space: nowrap;}
.sidebar .distributor-signature-copy small{font-size: 9px; line-height: 1.3; margin-top: 4px; white-space: nowrap;}
.sidebar .sidebar-footer-links{margin-top: 10px; padding-top: 5px; gap: 0px;}
.sidebar .sidebar-footer-links :is(button, a){height: 36px; min-height: 36px; padding: 7px 6px; gap: 10px; text-decoration: none;}
.sidebar .sidebar-footer-links :is(button, a) span{font-size: 12px; font-weight: 500; line-height: 1.2; flex: 1 1 0%; text-decoration: none;}
.sidebar .sidebar-footer-links :is(button, a) svg{width: 16px; height: 18px; flex: 0 0 16px; stroke-width: 1.5;}
.sidebar .sidebar-footer-links :is(button, a) .sidebar-footer-chevron{width: 14px; height: 14px; flex: 0 0 14px; stroke-width: 1.5;}
@media (min-width: 901px) {
.sidebar{padding: 10px 12px; display: flex; flex-direction: column; overflow-y: auto; scrollbar-gutter: auto;}
.sidebar .brand{width: clamp(64px, 20.8dvh - 71.2px, 116px); height: clamp(64px, 20.8dvh - 71.2px, 116px); margin: 4px auto clamp(10px, 3.2dvh - 10.8px, 18px);}
.sidebar .sidebar-brand-art{width: 80%;}
.sidebar .side-btn{font-size: 13px; line-height: 1.2; padding: 2px 10px;}
.sidebar .utility-item{font-size: 13px; line-height: 1.2;}
.sidebar .sidebar-section-label{font-size: 10px; line-height: 1.2; padding-top: 0px; padding-right: 10px; padding-left: 10px;}
.sidebar .sidebar-info{padding-bottom: 0px;}
.sidebar .sidebar-distributor{margin-top: auto; padding-top: 6px; max-width: none; width: 100%;}
.sidebar .sidebar-footer-links :is(button, a){height: clamp(30px, 2.4dvh + 14.4px, 36px); min-height: clamp(30px, 2.4dvh + 14.4px, 36px); padding: 5px 6px;}
}
@media (min-width: 901px) and (min-height: 741px) {
.sidebar .side-btn, .sidebar .utility-item{font-size: 14px;}
}
@media (min-width: 901px) and (max-height: 640px) {
.sidebar{padding-top: 6px; padding-bottom: 6px;}
.sidebar .brand{width: 56px; height: 56px; margin: 2px auto 8px;}
.sidebar .side-btn, .sidebar .utility-item{font-size: 12px; padding-right: 10px; padding-left: 10px;}
.sidebar .distributor-signature{height: 72px; min-height: 72px; padding: 5px 7px;}
.sidebar .distributor-signature img{width: 58px; height: 58px; flex-basis: 58px;}
.sidebar .sidebar-footer-links{margin-top: 8px; padding-top: 4px;}
.sidebar .sidebar-footer-links :is(button, a){height: 28px; min-height: 28px;}
}
@media (max-width: 900px) {
.sidebar .sidebar-distributor{width: 100%; max-width: none; padding-top: 16px;}
.sidebar .distributor-signature{height: 86px; min-height: 86px;}
.sidebar .distributor-signature img{width: 70px; height: 70px; flex-basis: 70px;}
.sidebar .distributor-signature-copy strong{font-size: 11px;}
.sidebar .distributor-signature-copy span{font-size: 11px;}
.sidebar .distributor-signature-copy small{font-size: 10px;}
.sidebar .sidebar-footer-links :is(button, a){height: 44px; min-height: 44px; padding: 10px 6px;}
}
#requestFormModal{padding: 16px; align-items: center;}
#requestFormModal .request-form-panel{max-width: 960px; width: 100%; padding: 22px 26px; max-height: calc(100dvh - 32px); overflow: auto;}
#requestFormModal .rf-head{margin-bottom: 8px; gap: 16px;}
#requestFormModal .rf-title{font-size: 26px; line-height: 1.15; margin-top: 5px;}
#requestFormModal .rf-kicker{font-size: 10px;}
#requestFormModal #requestClose{width: 36px; height: 36px; min-height: 36px; flex: 0 0 36px; padding: 0px; border-radius: 50%; display: grid; place-items: center; line-height: 1;}
#requestFormModal .rf-copy{font-size: 13px; line-height: 1.4; margin: 0px 0px 18px; max-width: 740px;}
#requestFormModal .rf-columns{display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start;}
#requestFormModal .rf-contact, #requestFormModal .rf-details{min-width: 0px;}
#requestFormModal .rf-section-title{font-size: 12px; line-height: 1.25; font-weight: 700; margin: 0px 0px 10px;}
#requestFormModal .rf-fields{display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin: 0px;}
#requestFormModal .rf-field{min-width: 0px; margin: 0px;}
#requestFormModal .rf-field label{display: block; font-size: 12px; line-height: 1.3; margin-bottom: 5px; font-weight: 650;}
#requestFormModal .rf-field input{width: 100%; min-height: 40px; height: 40px; padding: 8px 10px; font-size: 14px; border-radius: 8px;}
#requestFormModal .rf-request-summary{padding: 11px 12px; margin: 0px 0px 10px; border-radius: 9px;}
#requestFormModal .rf-request-summary-main{font-size: 12px; line-height: 1.4; gap: 7px; flex-wrap: wrap;}
#requestFormModal .rf-request-summary p{font-size: 12px; line-height: 1.4; margin: 4px 0px 0px;}
#requestFormModal .rf-shipping-note{padding: 10px 12px; font-size: 12px; line-height: 1.4; margin: 0px 0px 14px; border-radius: 9px;}
#requestFormModal .rf-details textarea{height: 64px; min-height: 64px; max-height: 90px; resize: vertical; padding: 8px 10px; font-size: 13px; line-height: 1.35;}
#requestFormModal .rf-details > .rf-section-title:not(:first-child){margin-top: 12px; margin-bottom: 8px;}
#requestFormModal .rf-bottom{display: flex; align-items: center; justify-content: space-between; gap: 22px; padding-top: 14px; margin-top: 16px; border-top: 1px solid var(--line);}
#requestFormModal .rf-checks{display: flex; flex-direction: column; gap: 8px; margin: 0px; flex: 1 1 0%;}
#requestFormModal .rf-check{display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.35; margin: 0px;}
#requestFormModal .rf-check input{width: 18px; height: 18px; flex: 0 0 18px; margin: 0px;}
#requestFormModal .rf-actions{width: 260px; flex: 0 0 260px; text-align: center;}
#requestFormModal .rf-submit{width: 100%; min-height: 42px; height: 42px; margin: 0px; padding: 8px 14px; font-size: 13px;}
#requestFormModal .rf-note{font-size: 10px; line-height: 1.35; margin: 6px 0px 0px;}
@media (min-width: 701px) and (max-height: 650px) {
#requestFormModal .request-form-panel{padding: 16px 22px;}
#requestFormModal .rf-copy{margin-bottom: 12px;}
#requestFormModal .rf-bottom{margin-top: 10px; padding-top: 10px;}
#requestFormModal .rf-shipping-note{margin-bottom: 10px;}
}
@media (max-width: 700px) {
#requestFormModal{padding: 12px; align-items: flex-start;}
#requestFormModal .request-form-panel{padding: 20px; max-height: none; overflow: visible;}
#requestFormModal .rf-title{font-size: 23px;}
#requestFormModal .rf-columns{grid-template-columns: 1fr; gap: 22px;}
#requestFormModal .rf-fields{grid-template-columns: 1fr; gap: 12px;}
#requestFormModal .rf-field input{min-height: 44px; height: 44px; font-size: 16px;}
#requestFormModal .rf-details textarea{font-size: 16px; height: 80px; min-height: 80px;}
#requestFormModal .rf-bottom{flex-direction: column; align-items: stretch; gap: 16px;}
#requestFormModal .rf-actions{width: 100%; flex: 1 1 auto;}
#requestFormModal .rf-submit{height: 46px; min-height: 46px;}
}
.sidebar .utility-item{display: grid; grid-template-columns: 20px minmax(0px, 1fr); column-gap: 10px; align-items: center;}
.sidebar .utility-icon{display: grid; place-items: center; width: 20px; height: 20px; text-align: center; font-size: 14px; line-height: 1;}
.sidebar .instagram-label{line-height: 1.2;}
.sidebar .instagram-label em{font-size: 10px; line-height: 1.25; margin-top: 2px;}
.sidebar .sidebar-footer-links :is(button, a):is(.sidebar-location, .sidebar-memberships, .sidebar-social, .sidebar-help){display: grid; grid-template-columns: 20px minmax(0px, 1fr) 14px; column-gap: 10px; align-items: center; justify-content: initial; padding: 6px 10px;}
.sidebar .sidebar-footer-links :is(button, a):is(.sidebar-location, .sidebar-memberships, .sidebar-social, .sidebar-help) span{display: block; min-width: 0px; margin: 0px; font-size: 14px; font-weight: 600; line-height: 1.2; text-align: left;}
.sidebar .sidebar-footer-links :is(button, a):is(.sidebar-location, .sidebar-memberships, .sidebar-social, .sidebar-help) svg{width: 18px; height: 18px; justify-self: center; margin: 0px;}
.sidebar .sidebar-footer-links :is(button, a):is(.sidebar-location, .sidebar-memberships, .sidebar-social, .sidebar-help) .sidebar-footer-chevron{width: 14px; height: 14px; justify-self: center;}
@media (min-width: 901px) {
.sidebar .side-btn{min-height: clamp(20px, 4.4dvh - 8.6px, 31px);}
.sidebar .utility-item{min-height: clamp(20px, 4dvh - 6px, 30px); padding: 2px 10px;}
.sidebar .utility-item:has(.instagram-label){min-height: clamp(30px, 4.8dvh - 1.2px, 42px); padding-top: 4px; padding-bottom: 4px;}
.sidebar .sidebar-section-label{padding-bottom: clamp(4px, 1.6dvh - 6.4px, 8px);}
.sidebar .side-rule{margin: clamp(2px, 2.4dvh - 13.6px, 8px) 0px;}
.sidebar .sidebar-footer-links :is(button, a):is(.sidebar-location, .sidebar-memberships, .sidebar-social, .sidebar-help){height: clamp(30px, 4dvh + 4px, 40px); min-height: clamp(30px, 4dvh + 4px, 40px); padding: 5px 10px;}
}
@media (min-width: 901px) and (max-height: 740px) {
.sidebar .sidebar-footer-links :is(button, a):is(.sidebar-location, .sidebar-memberships, .sidebar-social, .sidebar-help) span{font-size: 13px;}
}
@media (min-width: 901px) and (max-height: 640px) {
.sidebar .side-btn, .sidebar .utility-item{min-height: 18px; padding-top: 1px; padding-bottom: 1px;}
.sidebar .utility-item:has(.instagram-label){min-height: 28px; padding-top: 2px; padding-bottom: 2px;}
.sidebar .sidebar-footer-links :is(button, a):is(.sidebar-location, .sidebar-memberships, .sidebar-social, .sidebar-help){height: 28px; min-height: 28px;}
}
@media (min-width: 901px) and (min-height: 641px) and (max-height: 700px) {
.sidebar .brand{margin-bottom: 8px;}
.sidebar .utility-item:has(.instagram-label){padding-top: 2px; padding-bottom: 2px;}
.sidebar .sidebar-footer-links{margin-top: 8px;}
}
@media (max-width: 900px) {
.sidebar .sidebar-section-label{padding-bottom: 10px;}
.sidebar .sidebar-info-rule{margin-top: 14px; margin-bottom: 14px;}
.sidebar .utility-item:has(.instagram-label){min-height: 48px;}
.sidebar .sidebar-footer-links :is(button, a):is(.sidebar-location, .sidebar-memberships, .sidebar-social, .sidebar-help){min-height: 44px; height: 44px; padding: 10px;}
}
.sidebar .brand{position: relative; isolation: isolate; overflow: visible;}
.sidebar .brand::before{content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; background: conic-gradient(from -35deg, rgb(255, 202, 40) 0deg, rgb(255, 202, 40) 82deg, transparent 82deg, transparent 89deg, rgb(180, 30, 67) 89deg, rgb(180, 30, 67) 171deg, transparent 171deg, transparent 178deg, rgba(255, 255, 255, 0.7) 178deg, rgba(255, 255, 255, 0.7) 260deg, transparent 260deg, transparent 267deg, rgb(112, 153, 207) 267deg, rgb(112, 153, 207) 353deg, transparent 353deg, transparent 360deg); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), rgb(0, 0, 0) calc(100% - 3px));}
.sidebar .sidebar-brand-mark{display: grid; place-items: center; width: 100%; height: 100%; min-width: 0px;}
.sidebar .sidebar-brand-mark .sidebar-brand-art{display: block; width: 80%; height: auto; max-height: 80%; object-fit: contain; margin: auto;}
#catalogRoot .family-section + .family-section{margin-top: 36px; padding-top: 22px; border-top: 1px solid rgb(188, 203, 220);}
#catalogRoot .family-heading{display: flex; align-items: center; gap: 14px; margin: 0px 0px 18px; padding: 0px; border: 0px; background: none;}
#catalogRoot .family-heading::before{content: ""; display: block; width: 4px; height: 28px; flex: 0 0 4px; border-radius: 2px; background: var(--red);}
#catalogRoot .family-heading h3{margin: 0px; min-width: 0px; font-size: 22px; font-weight: 700; line-height: 1.2;}
#catalogRoot .family-heading p{display: none;}
#catalogRoot .family-count{margin-left: auto; flex: 0 0 auto; padding: 5px 9px; border-radius: 5px; background: rgb(228, 236, 247); color: var(--navy); font-size: 11px; line-height: 1.25; font-weight: 600; white-space: nowrap;}
@media (max-width: 600px) {
#catalogRoot .family-section + .family-section{margin-top: 28px; padding-top: 18px;}
#catalogRoot .family-heading{gap: 10px; margin-bottom: 14px;}
#catalogRoot .family-heading h3{font-size: 20px;}
#catalogRoot .family-count{font-size: 10px; padding: 5px 7px;}
}
.machine-card .card-hero .price-pill{background: rgb(232, 186, 69); color: var(--navy); font-size: 17px; line-height: 1.2; padding: 7px 9px; min-height: 34px; box-shadow: none;}
.machine-card .card-config summary .payment-add-pill{background: rgb(255, 255, 255); color: rgb(26, 50, 94); border: 1px solid rgb(170, 187, 209); min-height: 28px; padding: 5px 11px; box-shadow: none; font-size: 12px;}
@media (max-width: 600px) {
.machine-card .card-hero .price-pill{font-size: 16px; min-height: 32px; padding: 6px 8px;}
}
#catalogMain .category-head{display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; min-height: 58px; margin: 12px 0px 18px;}
#catalogMain .category-head > div:first-child{display: flex; align-items: baseline; gap: 12px; flex: 1 1 0%;}
#catalogMain .category-head h1{font-size: 23px; margin: 0px; line-height: 1.2;}
#catalogMain .category-head p{font-size: 12px; margin: 0px;}
#catalogMain .category-head .controls{gap: 8px;}
#catalogMain .category-head .controls button{min-height: 38px; height: 38px; padding: 7px 12px;}
#catalogMain .category-head .view-btn{width: 38px; padding: 0px;}
#allMachinesCarousel{position: relative;}
#allMachinesCarousel .all-banner-controls{position: absolute; display: flex; z-index: 4;}
#allMachinesCarousel .all-banner-dots button{padding: 0px;}
#faqModal .faq-question{flex: 1 1 0%; min-width: 0px;}
#faqModal .feature-close{width: 36px; height: 36px; min-width: 36px; min-height: 36px; aspect-ratio: 1 / 1; padding: 0px; display: grid; place-items: center; line-height: 1; border-radius: 50%;}
@media (max-width: 600px) {
#catalogMain .category-head{flex-wrap: wrap; margin-right: 0px; margin-bottom: 16px; margin-left: 0px;}
#catalogMain .category-head > div:first-child{flex-basis: 100%; gap: 10px;}
#catalogMain .category-head h1{font-size: 21px;}
#catalogMain .category-head .controls{width: 100%;}
#catalogMain .category-head .controls > span{margin-right: auto;}
#faqModal .faq-panel{padding: 20px 16px; max-height: calc(100dvh - 20px);}
}
#allMachinesCarousel .all-banner-controls{left: 50%; right: auto; bottom: 10px; transform: translateX(-50%); min-height: 26px; padding: 0px 5px; border-radius: 15px; background: rgba(255, 255, 255, 0.87); box-shadow: none;}
#allMachinesCarousel .all-banner-dots button{width: 27px; min-height: 26px; height: 26px;}
#allMachinesCarousel .all-banner-dots span{width: 19px; height: 3px;}
#allMachinesCarousel .all-banner-dots [aria-pressed="true"] span{width: 19px;}
#faqModal .faq-panel{width: min(900px, 100%); max-height: calc(100dvh - 32px); padding: 24px 26px; overflow: auto; border-radius: 16px;}
#faqModal .compact-faq-head{display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding-right: 32px;}
#faqModal .compact-faq-head h2{font-size: 26px; line-height: 1.2; margin: 7px 0px 0px;}
#faqModal .compact-faq-tabs{display: flex; gap: 5px; background: rgb(240, 244, 249); padding: 4px; border-radius: 8px;}
#faqModal .compact-faq-tabs button{border: 0px; min-height: 34px; background: transparent; padding: 9px 11px; font-size: 12px; font-weight: 600; line-height: 1.2; color: rgb(83, 105, 132); border-radius: 6px; white-space: nowrap;}
#faqModal .compact-faq-tabs button.active{background: rgb(26, 50, 94); color: white;}
#faqModal .compact-faq-body{display: grid; grid-template-columns: 41% minmax(0px, 1fr); gap: 24px; height: 270px;}
#faqModal .compact-faq-left{display: flex; flex-direction: column; min-width: 0px;}
#faqModal .compact-faq-list{display: flex; flex-direction: column; gap: 6px; flex: 1 1 0%;}
#faqModal .compact-faq-list button{display: flex; gap: 10px; align-items: center; text-align: left; min-height: 48px; padding: 10px 12px; background: white; color: rgb(83, 105, 132); border: 1px solid rgb(225, 232, 241); border-radius: 7px; font-size: 13px; font-weight: 500; line-height: 1.3;}
#faqModal .compact-faq-list button.active{background: rgb(234, 240, 248); color: rgb(26, 50, 94); border-color: rgb(195, 210, 229); box-shadow: rgb(180, 30, 67) 3px 0px inset; font-weight: 600;}
#faqModal .compact-faq-num{font-size: 10px; color: rgb(130, 145, 167); flex-shrink: 0; width: 17px;}
#faqModal .compact-faq-list button::after{content: "›"; margin-left: auto; font-size: 17px;}
#faqModal .compact-faq-pagination{display: flex; align-items: center; justify-content: space-between; padding-top: 12px; font-size: 11px; color: rgb(83, 105, 132);}
#faqModal .compact-faq-pagination button{width: 28px; min-width: 28px; min-height: 28px; height: 28px; padding: 0px; background: white; border: 1px solid rgb(216, 226, 239); border-radius: 6px; color: rgb(26, 50, 94); font-size: 18px;}
#faqModal .compact-faq-reading{background: rgb(245, 248, 252); border-radius: 10px; padding: 22px; min-width: 0px;}
#faqModal .compact-faq-reading small{font-size: 10px; letter-spacing: 1px; color: rgb(180, 30, 67); font-weight: 700;}
#faqModal .compact-faq-reading h3{font-size: 21px; line-height: 1.3; margin: 11px 0px 14px;}
#faqModal .compact-faq-reading p{font-size: 14px; line-height: 1.7; color: rgb(83, 105, 132); margin: 0px;}
#faqModal .compact-faq-footer{display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid rgb(216, 226, 239); margin-top: 20px; padding-top: 13px; color: rgb(113, 131, 155); font-size: 11px;}
@media (max-width: 650px) {
#faqModal .faq-panel{padding: 20px 16px; max-height: calc(100dvh - 20px);}
#faqModal .compact-faq-head{display: block; margin-bottom: 16px;}
#faqModal .compact-faq-head h2{font-size: 24px;}
#faqModal .compact-faq-tabs{margin-top: 16px; width: max-content; max-width: 100%;}
#faqModal .compact-faq-tabs button{font-size: 11px; padding: 9px 8px; white-space: normal;}
#faqModal .compact-faq-body{height: auto; grid-template-columns: 1fr; gap: 16px;}
#faqModal .compact-faq-reading{min-height: 230px; padding: 18px;}
#faqModal .compact-faq-reading h3{font-size: 19px;}
#faqModal .compact-faq-reading p{font-size: 13px;}
#faqModal .compact-faq-list button{font-size: 12px; min-height: 44px;}
#faqModal .compact-faq-footer{line-height: 1.6;}
}
@media (max-width: 600px) {
#allMachinesCarousel{margin-bottom: 12px;}
#allMachinesCarousel .all-banner-slide{height: auto; grid-template-columns: 1fr; grid-template-rows: auto 210px;}
#allMachinesCarousel .all-banner-copy{min-height: 166px; padding: 18px 20px; justify-content: center;}
#allMachinesCarousel .all-banner-copy h2{font-size: clamp(26px, 7.6vw, 34px); line-height: 1.07; margin-bottom: 10px;}
#allMachinesCarousel .all-banner-kicker{font-size: 11px; line-height: 1.4; margin-bottom: 9px; letter-spacing: 0.065em;}
#allMachinesCarousel .all-banner-description{font-size: 14px; line-height: 1.5;}
#allMachinesCarousel .all-banner-photo{height: 100%; min-height: 0px;}
#allMachinesCarousel .all-banner-photo img{height: 100%; object-fit: cover; object-position: 65% 30%;}
#allMachinesCarousel .banner-yellow{grid-template-rows: auto 155px auto;}
#allMachinesCarousel .banner-yellow .all-banner-photo img{object-position: 55% 32%;}
#allMachinesCarousel .banner-revenue{display: flex; gap: 8px; padding: 14px 12px; overflow: visible; height: auto;}
#allMachinesCarousel .revenue-label{flex: 0 0 auto; font-size: 11px; line-height: 1.5; letter-spacing: 0.03em; margin: 0px 0px 2px;}
#allMachinesCarousel .revenue-row{flex: 0 0 auto; min-height: 52px; grid-template-columns: repeat(3, minmax(0px, 1fr)); padding: 7px 3px; background: rgb(232, 186, 69); box-shadow: none; border-radius: 7px;}
#allMachinesCarousel .revenue-row > div{gap: 4px; padding: 0px 2px;}
#allMachinesCarousel .revenue-row strong{font-family: "Segoe UI", Arial, sans-serif; font-size: 20px; line-height: 1.1; letter-spacing: -0.03em;}
#allMachinesCarousel .revenue-row span{font-size: 10px; line-height: 1.3; font-weight: 600;}
#allMachinesCarousel .revenue-note{flex: 0 0 auto; font-size: 11px; line-height: 1.5; margin: 3px 0px 0px; color: rgb(224, 232, 244);}
#allMachinesCarousel .all-banner-controls{position: static; left: auto; right: auto; bottom: auto; transform: none; min-height: 44px; background: transparent; padding: 0px; margin: 3px auto 0px; box-shadow: none; justify-content: center;}
#allMachinesCarousel .all-banner-dots button{width: 42px; min-height: 44px; height: 44px;}
#allMachinesCarousel .all-banner-dots span{width: 23px; height: 3px;}
#allMachinesCarousel .all-banner-dots [aria-pressed="true"] span{width: 23px;}
#catalogMain .category-head{margin-top: 0px; padding: 12px; gap: 10px;}
#catalogMain .category-head .controls{align-items: center; justify-content: space-between;}
#catalogMain .category-head .controls #sortBox{width: 100%;}
#catalogMain .category-head .controls #sortTrigger{width: 100%; min-height: 44px; font-size: 14px;}
.machine-card .card-hero{height: 270px; padding: 12px;}
.machine-card .card-hero > img{height: 100%; max-height: 100%; object-fit: contain;}
.machine-card .card-body{padding: 14px; gap: 12px;}
.machine-card .card-title{font-size: 21px;}
.machine-card .card-desc{font-size: 15px; line-height: 1.55; -webkit-line-clamp: unset; display: block; overflow: visible;}
.machine-card .specs{font-size: 13px; line-height: 1.5;}
.machine-card .specs h4{font-size: 12px;}
.machine-card .card-ideal{display: block;}
.machine-card .ideal-label, .machine-card .colors-label::before{font-size: 12px;}
.machine-card .pill{font-size: 12px; line-height: 1.4;}
.machine-card .card-config summary{min-height: 48px; font-size: 14px;}
.machine-card .card-config summary .payment-add-pill{min-height: 32px; padding: 7px 12px; font-size: 13px;}
.machine-card .card-config label{min-height: 48px; line-height: 1.4;}
.machine-card .zoom-btn{width: 44px; min-height: 44px;}
#navigationClose{width: 44px; min-height: 44px; font-size: 23px;}
#businessModal .feature-tabs{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 6px 12px; overflow: visible; border: 0px;}
#businessModal .feature-tabs button{white-space: normal; text-align: left; justify-content: flex-start; padding: 10px 4px; min-height: 44px; line-height: 1.4; font-size: 14px; border-bottom: 1px solid var(--line);}
#businessModal .feature-tabs button.active{border-bottom: 2px solid var(--red);}
#businessModal .feature-side > p{font-size: 14px; line-height: 1.5;}
#infoModal .info-panel, #infoModal.compact-info-sheet .info-panel{max-height: calc(100dvh - 20px);}
#infoModal .info-content{overflow: auto; min-height: 0px; font-size: 14px; line-height: 1.55;}
#infoModal .info-content p, #infoModal .info-content li{font-size: 14px; line-height: 1.55;}
#faqModal .compact-faq-list button{min-height: 48px; font-size: 14px;}
#faqModal .compact-faq-reading p{font-size: 15px; line-height: 1.65;}
#faqModal .compact-faq-pagination button{width: 44px; height: 44px; min-height: 44px;}
#faqModal .compact-faq-tabs button{min-height: 44px; font-size: 12px;}
#faqModal .compact-faq-head{padding-right: 26px;}
#faqModal .compact-faq-tabs{max-width: calc(100% + 26px);}
.request-form-panel input:not([type="checkbox"]), .request-form-panel textarea, .request-form-panel select{font-size: 16px;}
}
@media (max-width: 359px) {
.machine-card .card-hero{height: 240px;}
#allMachinesCarousel .all-banner-copy{padding: 18px 16px;}
#allMachinesCarousel .revenue-row strong{font-size: 18px;}
#allMachinesCarousel .revenue-row span{font-size: 10px;}
}

/* Navigation controls */
.crumbs a,.acc-crumbs a{color:inherit;text-decoration:none}.crumbs a:hover,.acc-crumbs a:hover{text-decoration:underline}
.rf-review{border:0;padding:0;background:transparent;color:#1a325e;font-size:13px;text-decoration:underline;cursor:pointer}
#machineDetailsModal.request-review{z-index:85}


/* Shared help access keeps the sidebar height stable as categories grow. */
#sideNav .sidebar-help{grid-template-columns:20px minmax(0,1fr) 12px}#sideNav .help-chevron{font-size:20px;justify-self:end}
#helpSupportDialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #d4dfec;border-radius:16px;padding:24px;color:#1a325e;box-shadow:0 20px 70px #10264040;background:#fff}#helpSupportDialog::backdrop{background:#0b22475c}#helpSupportDialog h2{font-size:22px;margin:0 0 8px}#helpSupportDialog p{font-size:13px;color:#61738d;margin:0 0 18px}#helpSupportDialog .help-items{display:grid;gap:9px}#helpSupportDialog .utility-item{display:flex;gap:12px;background:#f5f8fc;border:1px solid #dce5f0;border-radius:8px;padding:13px 14px;min-height:48px;font-size:14px;color:#1a325e;text-align:left;width:100%}#helpSupportDialog .utility-icon{color:#b71e43;width:22px}#helpSupportClose{position:absolute;right:15px;top:15px;width:36px;height:36px;padding:0;border:1px solid #d7e1ef;border-radius:50%;color:#1a325e;background:#fff}#helpSupportDialog small{display:block;margin-top:17px;font-size:11px;color:#72819a}

/* Instagram shares the same icon, text and arrow columns as the other footer links. */
.sidebar .sidebar-footer-links .sidebar-social{margin:0;text-decoration:none;}
.sidebar .sidebar-footer-links .sidebar-social .instagram-label em{display:block;font-size:10px;font-weight:500;line-height:1.2;margin-top:1px;color:#cedcf0;}
@media(min-width:901px) and (max-height:740px){.sidebar .sidebar-footer-links .sidebar-social{height:36px;min-height:36px;}}

/* Keep carousel navigation below the artwork, without an overlay or pause button. */
#allMachinesCarousel .all-banner-controls{position:static;left:auto;right:auto;bottom:auto;transform:none;display:flex;justify-content:center;min-height:24px;height:24px;margin:0;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;}
#allMachinesCarousel .all-banner-navigation{position:static;width:max-content;margin-inline:auto;}
#allMachinesCarousel .all-banner-dots button{width:34px;min-height:24px;height:24px;}
#allMachinesCarousel .all-banner-dots span,#allMachinesCarousel .all-banner-dots [aria-pressed="true"] span{width:19px;height:3px;}
@media(max-width:900px){#allMachinesCarousel .all-banner-controls{min-height:44px;height:44px;}#allMachinesCarousel .all-banner-dots button{width:44px;min-height:44px;height:44px;}}

/* Language selector: shares the existing header and stays accessible on small screens. */
.catalog-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.language-switch{display:inline-flex;align-items:center;gap:5px;border:1px solid #d4e1f1;border-radius:9px;background:#fff;padding:5px 7px;color:#1a325e}.language-switch select{font:inherit;font-size:12px;border:0;background:transparent;color:inherit;min-height:32px;max-width:138px;cursor:pointer}.language-cover{position:absolute;right:16px;top:16px;z-index:5}.language-switch:focus-within{outline:2px solid #286ac6;outline-offset:2px}@media(max-width:600px){.catalog-actions{gap:5px}.language-switch{padding:3px 5px}.language-switch select{max-width:125px;font-size:11px}.catalog-header{flex-wrap:wrap;gap:8px}.language-cover{right:10px;top:10px}}


.dq-color-row{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-items:start}.dq-color-row>span{font-size:11px;margin:0}.dq-color-row select{box-sizing:border-box;width:100%;max-width:none;font-size:12px;min-height:36px;padding:7px 8px}@media(max-width:900px){.dq-color-row select{min-height:44px}}

.card-led-note{margin:5px 0 8px;color:#536b88;font-size:11px;line-height:1.4}.card-led-note span{display:block}.card-led-note small{font-size:10px}.dq-led-option{display:flex;align-items:center;gap:8px;padding:9px 10px;margin:0 0 10px;background:#f2f5f9;border-radius:8px;color:#234269;font-size:12px;min-height:44px}.dq-led-option input{flex:none;width:18px;height:18px;accent-color:#1a325e}.dq-led-option small{display:block;font-size:11px;font-weight:400;color:#536b88}@media(max-width:600px){.card-led-note{font-size:12px}.card-led-note small{font-size:11px}}

.parts-page-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0 18px}.parts-page-controls button{border:1px solid #cbd9ec;background:#fff;color:#1a325e;border-radius:8px;padding:8px 14px;min-height:44px}.parts-page-controls button:disabled{opacity:.45;cursor:default}