/* Smart Desk additions to the approved ONEO product layout. */
.hxa-smart-desk .desk-hero{position:relative;overflow:hidden;padding:95px 0 90px;min-height:650px}
.desk-hero-image{position:absolute;inset:0;background-image:linear-gradient(90deg,#050505 2%,rgba(5,5,5,.98) 22%,rgba(5,5,5,.79) 42%,rgba(5,5,5,.12) 72%),linear-gradient(0deg,#050505,transparent 35%),url('/files/hxa/seo-2026/assets/hxa-smart-desk-01-available.jpg');background-size:cover;background-position:center,center,65% center}
.desk-hero-text{position:relative;max-width:570px}
.hxa-smart-desk .desk-eyebrow{font-size:14px;letter-spacing:.16em;color:#ddd}
.desk-hero-text h1{margin-top:22px}
.desk-hero-text>p:not(.desk-eyebrow){max-width:510px}
.hxa-smart-desk .desk-intro{max-width:900px}
.desk-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;border-top:1px solid #292927;margin-top:40px;padding-top:32px}
.desk-facts strong{display:block;font-size:clamp(24px,2.5vw,38px);font-weight:500;letter-spacing:-.04em}
.desk-facts span{display:block;color:#c5c5bf;margin-top:7px}
.hxa-smart-desk .desk-features,.hxa-smart-desk .desk-split,.hxa-smart-desk .desk-variants{display:grid;gap:36px;margin:0;grid-template-columns:repeat(4,minmax(0,1fr))}
.hxa-smart-desk :is(.desk-features,.desk-split,.desk-variants):before,.hxa-smart-desk :is(.desk-features,.desk-split,.desk-variants):after{display:none}
.hxa-smart-desk :is(.desk-features,.desk-split,.desk-variants)>.rs-column{float:none;width:auto;margin:0;min-width:0}
.desk-feature-icon{height:76px;width:76px;margin:8px 0 30px;color:#f4f4f0;display:flex;align-items:center}
.desk-feature-icon img{width:60px;height:60px;object-fit:contain;filter:invert(1);mix-blend-mode:screen}
.desk-feature-icon svg{width:65px;height:65px}
.hxa-smart-desk .desk-features h3{font-size:24px}
.hxa-smart-desk .desk-split{grid-template-columns:1.1fr 1fr;align-items:center;gap:64px}
.hxa-smart-desk .desk-photo{margin:0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(0deg,transparent,#000 15%,#000 85%,transparent);mask-composite:intersect}
.desk-workflow>.font-size-l{max-width:870px}
.desk-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:40px}
.desk-step{display:block;color:#e0061c;font-size:18px;margin-bottom:20px}
.hxa-smart-desk .desk-variants{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px;margin-top:40px}
.hxa-smart-desk .desk-variants>.rs-column{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:24px}
.hxa-smart-desk .desk-variants :is(h3,p,.button){margin:0}
.hxa-smart-desk .desk-variants .button{justify-self:start;align-self:start}
.hxa-smart-desk .desk-shape{margin:0;aspect-ratio:3/2;display:flex;justify-content:center;align-items:center;background:radial-gradient(ellipse,#191918,transparent 70%)}
.hxa-smart-desk .desk-shape img{width:76%;height:65%;object-fit:contain;filter:invert(1);mix-blend-mode:screen}
.hxa-smart-desk main .button{font-size:14px}
@media(max-width:1000px){.hxa-smart-desk .desk-features{grid-template-columns:repeat(2,minmax(0,1fr))}.hxa-smart-desk .desk-split{gap:32px}.desk-hero-image{background-position:center,center,60% center}.desk-hero-text{max-width:520px}}
@media(max-width:900px){.hxa-smart-desk .desk-variants{grid-template-columns:1fr;gap:48px}.hxa-smart-desk .desk-variants>.rs-column{grid-row:auto;grid-template-rows:auto}.hxa-smart-desk .desk-shape{max-width:500px;width:100%}.hxa-smart-desk .desk-split{grid-template-columns:1fr}.desk-steps{gap:24px}}
@media(max-width:599px){.hxa-smart-desk main>.desk-hero:first-child{padding:320px 0 44px!important;min-height:0}.desk-hero-image{background-image:linear-gradient(0deg,#050505 2%,rgba(5,5,5,.65) 30%,transparent 75%),url('/files/hxa/seo-2026/assets/hxa-smart-desk-01-available.jpg');background-size:cover;background-position:center;bottom:auto;height:380px}.hxa-smart-desk .desk-hero h1{font-size:40px}.desk-facts,.desk-steps,.hxa-smart-desk .desk-features{grid-template-columns:1fr;gap:28px}.desk-facts>div{padding-bottom:20px;border-bottom:1px solid #292927}.desk-feature-icon{margin-bottom:16px}.hxa-smart-desk .desk-features h3{margin-top:0}.desk-hero-text{max-width:100%}.desk-hero-text .font-size-l{font-size:20px}}

/* Architectural dimension diagrams: true 2:1 and 2.25:1 rectangular plans. */
.hxa-smart-desk .desk-shape.desk-dimensioned{aspect-ratio:4/3;background:none}
.desk-plan{display:block;width:100%;height:auto;overflow:visible;color:#c5c5bf}
.desk-plan-top{fill:#181817;stroke:#f4f4f0;stroke-width:1.5}
.desk-dimension-extension{fill:none;stroke:#72726e;stroke-width:1}
.desk-dimension-line{fill:none;stroke:currentColor;stroke-width:1}
.desk-dimension-label-bg{fill:#050505}
.desk-plan text{fill:#f4f4f0;font:16px Inter,"Helvetica Neue",Arial,sans-serif;text-anchor:middle;dominant-baseline:middle;letter-spacing:.02em}

/* Click-to-load product film, with a local poster and no preloaded YouTube requests. */
.desk-video{aspect-ratio:16/9;width:100%;background:#111110;border:1px solid #292927;overflow:hidden}
.desk-video iframe{display:block;width:100%;height:100%;border:0}
.desk-video-start{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:#111110;color:#fff;cursor:pointer;font:inherit}
.desk-video-start>img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.desk-video-action{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;font-size:18px;background:linear-gradient(0deg,rgba(5,5,5,.55),transparent 65%)}
.desk-video-action svg{width:64px;height:64px;transition:color .15s}
.desk-video-start:hover .desk-video-action svg{color:#e0061c}
.desk-video-start:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.hxa-smart-desk .desk-video-note{font-size:14px;margin:16px 0 0}
.desk-video-note a{margin-left:8px;text-decoration:underline}
@media(prefers-reduced-motion:reduce){.desk-video-action svg{transition:none}}

/* Keep the final actions separated when wrapping on small screens. */
.hxa-smart-desk .desk-cta-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hxa-smart-desk .desk-cta-actions>.button{margin:0}

/* Native SVG images preserve the approved architectural diagram colours. */
.hxa-smart-desk .desk-shape.desk-dimensioned img{width:100%;height:auto;filter:none;mix-blend-mode:normal}

/* Native ONEO hero: preserve the approved photograph gradient. */
.hxa-smart-desk .desk-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#050505 2%,rgba(5,5,5,.98) 22%,rgba(5,5,5,.79) 42%,rgba(5,5,5,.12) 72%),linear-gradient(0deg,#050505,transparent 35%)}
.hxa-smart-desk .desk-hero .desk-hero-text{position:relative;z-index:1}
@media(max-width:599px){.hxa-smart-desk .desk-hero::before{background:linear-gradient(0deg,#050505 2%,rgba(5,5,5,.65) 30%,transparent 75%)}}

/* ONEO positions the photograph in its own background layer. */
.hxa-smart-desk .desk-hero::before{display:none}
.hxa-smart-desk .desk-hero>.centered-wrapper-background::after{content:"";display:block;position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#050505 2%,rgba(5,5,5,.98) 22%,rgba(5,5,5,.79) 42%,rgba(5,5,5,.12) 72%),linear-gradient(0deg,#050505,transparent 35%)}
@media(max-width:599px){.hxa-smart-desk .desk-hero>.centered-wrapper-background::after{background:linear-gradient(0deg,#050505 2%,rgba(5,5,5,.65) 30%,transparent 75%)}}

/* Native RockSolid columns use the approved facts grid without duplicate widths. */
.hxa-smart-desk .desk-facts::before,.hxa-smart-desk .desk-facts::after{display:none}
.hxa-smart-desk .desk-facts>.rs-column{float:none;width:auto;margin:0;min-width:0}
.hxa-smart-desk .desk-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:599px){.hxa-smart-desk .desk-facts{grid-template-columns:1fr}}

/* Native Core Text images match the approved feature icon row. */
.hxa-smart-desk .desk-features>.desk-feature>.image_container{height:76px;width:76px;margin:8px 0 30px;display:flex;align-items:center}
.hxa-smart-desk .desk-features>.desk-feature>.image_container img{width:60px;height:60px;object-fit:contain;filter:invert(1);mix-blend-mode:screen}

.hxa-smart-desk .desk-features>.desk-feature-heating>.image_container img{width:65px;height:65px;filter:none;mix-blend-mode:normal}

.hxa-smart-desk .desk-video .video_container{width:100%;height:100%;margin:0}
.hxa-smart-desk .desk-video .video_container>.responsive{height:100%}

.hxa-smart-desk .desk-photo>.image_container{margin:0}
.hxa-smart-desk .desk-step-card>p:first-child{display:block;color:#e0061c;font-size:18px;margin-bottom:20px}

.hxa-smart-desk .desk-variants>.rs-column>.block{margin:0;min-width:0}
.hxa-smart-desk .desk-shape>.image_container{margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.hxa-smart-desk .desk-shape.desk-dimensioned img{width:100%;height:100%;filter:none;mix-blend-mode:normal}

/* Native article wrapper: retain the approved mobile photograph above the text. */
@media(max-width:599px){.hxa-smart-desk .mod_article>.desk-hero{padding:320px 0 44px!important;min-height:0;background-color:#050505}.hxa-smart-desk .desk-hero>.centered-wrapper-background{top:0;bottom:auto;height:380px}}
