/* ROSH X-004 — production visual and motion layer. Loaded after X-003. */
:root{
 --x004-obsidian:#091720;--x004-petrol:#112735;--x004-steel:#4e6776;
 --x004-frost:#dcecf4;--x004-ice:#95c9e4;--x004-paper:#edf3f6;
 --x004-focus:#8ad3fa;--x004-ease:cubic-bezier(.2,.72,.22,1);
 --x004-fast:170ms;--x004-standard:280ms;--x004-slow:460ms;
 --x004-shadow:0 26px 70px rgba(4,24,37,.12);
}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{font-feature-settings:"kern" 1;background:var(--x004-paper)}
body.rosh-x003{background:var(--x004-paper)}
body,button,input,select,textarea{font-synthesis:none}
button,.nav-icon,.submit,.outline,.white-button,.hero-search button,.product-bottom button,.signal-chip,
.technical-thumb,.x003-primary-link,.product-inspect,.catalog-controls button,
.quick-actions button,.saved-actions button,.login button,[role="button"]{
 border-radius:12px!important;
}
input,select,textarea{border-radius:11px!important}
button,a,select,input,textarea{ -webkit-tap-highlight-color:transparent; }
button,a{touch-action:manipulation}
:where(button,a,input,select,textarea,[tabindex]):focus-visible{
 outline:3px solid var(--x004-focus)!important;outline-offset:3px;
}
:where(button,.submit,.outline,.nav-icon,.x003-primary-link,.product-bottom button,.signal-chip):not(:disabled){
 transition:transform var(--x004-fast) var(--x004-ease),
 background-color var(--x004-fast),color var(--x004-fast),
 border-color var(--x004-fast),box-shadow var(--x004-standard) var(--x004-ease);
}
@media(hover:hover) and (pointer:fine){
 :where(button,.submit,.outline,.nav-icon,.x003-primary-link,.product-bottom button,.signal-chip):not(:disabled):hover{transform:translateY(-2px)}
}
:where(button,.submit,.outline,.nav-icon,.x003-primary-link):not(:disabled):active{transform:translateY(1px) scale(.986)}
:where(button, a, input, select, textarea){min-height:initial}
button:disabled{cursor:not-allowed;transform:none!important}
.nav{background:#0c1d27;border-bottom:1px solid rgba(170,205,226,.13);box-shadow:0 6px 30px rgba(2,11,19,.08)}
.nav .rosh-site-logo{filter:drop-shadow(0 0 10px rgba(180,217,238,.06))}
.nav nav a{position:relative;transition:color var(--x004-fast)}
@media(hover:hover) and (pointer:fine){
 .nav nav a::after{content:"";position:absolute;left:0;right:100%;height:2px;bottom:-9px;background:var(--x004-ice);border-radius:3px;transition:right var(--x004-standard) var(--x004-ease)}
 .nav nav a:hover::after,.nav nav a[aria-current="page"]::after{right:0}
}
.nav nav a[aria-current="page"]{color:white}
.nav .nav-icon{min-height:42px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.nav .nav-actions{flex-wrap:nowrap}
.nav nav .x004-mobile-account{display:none}
.hero{--x004-pointer-x:72%;--x004-pointer-y:35%;isolation:isolate;position:relative;background-color:var(--x004-obsidian)}
body.rosh-x003 .hero{min-height:clamp(585px,61vw,755px);background-position:center,center}
.hero::after{
 content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
 background:radial-gradient(ellipse 45% 65% at var(--x004-pointer-x) var(--x004-pointer-y),rgba(117,180,219,.13),transparent 76%);
 opacity:.85;transition:opacity .45s;
}
.hero-inner{position:relative;z-index:2}
body.rosh-x003 .hero-inner{padding-top:clamp(100px,9.8vw,150px);padding-bottom:clamp(95px,11vw,150px)}
body.rosh-x003 .hero h1{
 margin:0 0 clamp(22px,3vw,33px);max-width:min(950px,82%);
 font-size:clamp(60px,6.1vw,106px);line-height:.91;letter-spacing:-.027em;text-wrap:balance;
}
body.rosh-x003 .hero h1 em{color:#c9e0ef}
body.rosh-x003 .hero p{max-width:560px;color:#d0dfe8;font-size:clamp(14px,1.24vw,17px);line-height:1.75;margin:0 0 29px}
body.rosh-x003 .hero-search{
 width:min(100%,680px);max-width:680px;margin-top:0;
 padding:7px;background:#f6fafc;border:1px solid rgba(255,255,255,.88);
 border-radius:14px!important;box-shadow:0 18px 65px rgba(0,0,0,.32),0 0 0 0 rgba(149,201,228,0);
 transition:box-shadow var(--x004-standard) var(--x004-ease),transform var(--x004-standard) var(--x004-ease),border-color var(--x004-standard);
}
body.rosh-x003 .hero-search:focus-within{
 border-color:var(--x004-focus);
 box-shadow:0 23px 65px rgba(0,0,0,.35),0 0 0 4px rgba(137,205,243,.17);
 transform:translateY(-2px)
}
.hero-search input{color:#152e40;background:transparent}
.hero-search input:focus-visible{outline:0!important}
.hero-search button{background:#1e567b!important;min-height:52px;padding-inline:22px}
.hero-search button:hover{background:#124364!important}
body.rosh-x003 .hero-links{margin-top:20px;display:flex;flex-wrap:wrap;gap:11px 32px}
body.rosh-x003 .hero-links a{color:#e2eef5;display:inline-flex;align-items:center;min-height:44px;position:relative}
body.rosh-x003 .hero-links a:hover{color:#fff}
body.rosh-x003 .hero-links a::after{content:"";position:absolute;bottom:5px;left:0;width:0;height:1px;background:#a5d6f4;transition:width var(--x004-standard)}
@media(hover:hover){body.rosh-x003 .hero-links a:hover::after{width:100%}}
/* Hero sequence: remains interactive even before reveal settles. */
@keyframes x004-enter{from{opacity:.02;transform:translate3d(0,22px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes x004-image-arrive{from{filter:brightness(.7);transform:scale(1.035)}to{filter:brightness(1);transform:scale(1)}}
.x004-motion-ready .hero h1{animation:x004-enter 670ms var(--x004-ease) both}
.x004-motion-ready .hero p{animation:x004-enter 650ms var(--x004-ease) 110ms both}
.x004-motion-ready .hero-search{animation:x004-enter 690ms var(--x004-ease) 190ms both}
.x004-motion-ready .hero-links{animation:x004-enter 610ms var(--x004-ease) 275ms both}
/* Background photography paints immediately; text entrance never darkens the whole hero. */
/* Editorial modules and catalog surfaces */
.x003-home-routing{background:linear-gradient(180deg,#e9f1f5,#f6f9fa)}
.x003-route-grid{gap:18px}
.x003-route-grid a,.product,.purchasing-card,.technical-details,.technical-gallery,.quick-shell,.pane,.inquiry,.catalog-shell{
 border-radius:20px;box-shadow:0 14px 42px rgba(8,33,48,.035);
}
.x003-route-grid a{position:relative;overflow:hidden;min-height:290px;isolation:isolate}
.x003-route-grid a::before{
 content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
 background:linear-gradient(155deg,rgba(154,205,235,.12),transparent 52%);
 transition:opacity var(--x004-standard)
}
.x003-route-grid a:hover{transform:translateY(-5px);box-shadow:var(--x004-shadow);border-color:#92bbcf}
.x003-route-grid a:hover::before{opacity:1}
.x003-route-grid a strong{letter-spacing:-.015em}
.x003-route-grid a p{position:relative}
.x003-masthead{position:relative;isolation:isolate;overflow:hidden}
.x003-masthead::after{content:"";position:absolute;width:54vw;height:54vw;max-width:800px;max-height:800px;right:-13vw;top:-20vw;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(148,203,232,.13),transparent 70%)}
.x003-bottom-cta{position:relative;overflow:hidden;background:linear-gradient(125deg,#112836,#1b4052)}
.x003-bottom-cta .x003-primary-link{box-shadow:0 10px 30px rgba(0,0,0,.13)}
.product{
 overflow:hidden;border:1px solid #d8e3eb;transition:transform var(--x004-standard) var(--x004-ease),
 border-color var(--x004-standard),box-shadow var(--x004-standard) var(--x004-ease)
}
.product-photo{background:linear-gradient(145deg,#f5f8fa,#eaf1f5);overflow:hidden}
.product-photo img{transition:transform var(--x004-slow) var(--x004-ease);object-fit:contain;max-width:100%}
@media(hover:hover) and (pointer:fine){
 .product:hover{transform:translateY(-5px);border-color:#a8c8d9;box-shadow:0 24px 60px rgba(16,44,60,.10)}
 .product:hover .product-photo img{transform:scale(1.045)}
}
.product-body{min-width:0}
.product h3{overflow-wrap:anywhere}
.product-sku{font-weight:700;letter-spacing:.025em}
.product-bottom{gap:12px}
.product-bottom button,.submit{background:#1c5678;color:white}
.catalog-shell{border-color:#d8e5ec}
.catalog-search:focus-within{border-color:#77b2d3;box-shadow:0 0 0 4px rgba(116,177,209,.12)}
.signal-chip{border-radius:12px!important}
.empty-state{border-radius:16px;background:#f6f9fb}
.technical-gallery{background:linear-gradient(145deg,#f7fafb,#eaf1f5)}
.technical-hero-image{transition:opacity var(--x004-standard),transform var(--x004-slow) var(--x004-ease)}
.technical-thumb{transition:transform var(--x004-fast),border-color var(--x004-fast),box-shadow var(--x004-fast)}
.technical-thumb[aria-pressed="true"]{border-color:#327fa5;box-shadow:0 0 0 2px rgba(87,160,202,.22)}
.technical-thumb:hover{border-color:#8ebdd5}
.technical-details{border-color:#d8e4eb}
.technical-purchase{background:linear-gradient(130deg,#edf4f8,#f5f9fb)}
.technical-details select:focus,.technical-purchase input:focus{border-color:#8bbcd9}
.quick-intro{background:linear-gradient(155deg,#e7f0f6,#f3f7f9)}
.quick-shell{overflow:hidden}
.quick-line{transition:background-color var(--x004-fast)}
.quick-line:hover{background:#f6fafc}
.pane{border-color:#d5e3ea!important;box-shadow:0 14px 42px rgba(5,26,41,.045)}
.pane h2{letter-spacing:-.015em}
.saved-part{border-radius:12px;overflow:hidden}
.inquiry label:focus-within{color:#245f83}
input:not(:disabled):focus,textarea:not(:disabled):focus,select:not(:disabled):focus{border-color:#8bbfdc}
.cart-drawer{box-shadow:-22px 0 70px rgba(4,18,28,.23)}
.cart-drawer.open{transform:translateX(0)}
.cart-backdrop{backdrop-filter:blur(5px)}
dialog{border-radius:20px}
dialog::backdrop{background:rgba(4,16,25,.7);backdrop-filter:blur(5px)}
footer{background:#0b1a24}
footer .footer-grid a{transition:color var(--x004-fast)}
footer .footer-grid a:hover{color:#e5f5ff}
/* Progressive observer: no hidden baseline if JS, CSS or observer is unavailable. */
.x004-motion-ready .x004-observe{
 opacity:0;transform:translate3d(0,22px,0);
 transition:opacity var(--x004-slow) var(--x004-ease),transform var(--x004-slow) var(--x004-ease);
}
.x004-motion-ready .x004-observe.x004-visible{opacity:1;transform:none}
.x004-motion-ready .x004-observe:nth-child(2){transition-delay:55ms}
.x004-motion-ready .x004-observe:nth-child(3){transition-delay:105ms}
@media(max-width:1100px){
 body.rosh-x003 .hero h1{max-width:84%;font-size:clamp(60px,6.8vw,88px)}
 body.rosh-x003 .hero p{max-width:63%}
 .x003-route-grid a{min-height:235px}
}
@media(max-width:800px){
 .nav nav.is-open{animation:x004-enter 260ms var(--x004-ease) both}
 .nav nav .x004-mobile-account{display:block}
 .nav-actions a[href="/account"]{display:none}
 body.rosh-x003 .hero{min-height:0;background-position:center,70% center}
 body.rosh-x003 .hero-inner{padding-top:clamp(72px,10vw,110px);padding-bottom:clamp(80px,13vw,115px)}
 body.rosh-x003 .hero h1{font-size:clamp(48px,8.4vw,74px);max-width:95%}
 body.rosh-x003 .hero p{max-width:85%}
 .x003-route-grid{grid-template-columns:1fr}
 .x003-route-grid a{min-height:180px}
 .nav nav a::after{display:none}
}
@media(max-width:520px){
 .nav{gap:8px}
 .nav .nav-actions .nav-icon{min-height:42px}
 body.rosh-x003 .hero{background-image:linear-gradient(180deg,rgba(5,15,25,.94),rgba(7,19,29,.85) 47%,rgba(6,17,28,.6)),url('/images/rosh-higgsfield-hero.png');background-position:center,70% center}
 body.rosh-x003 .hero-inner{padding-top:68px;padding-bottom:82px;width:calc(100% - 36px)}
 body.rosh-x003 .hero h1{max-width:100%;font-size:clamp(44px,11.1vw,60px);line-height:.98;margin:0 0 22px}
 body.rosh-x003 .hero p{max-width:100%;font-size:14px;line-height:1.65;margin-bottom:24px}
 body.rosh-x003 .hero-search{width:100%;padding:6px;border-radius:13px!important}
 #hero-search{grid-template-columns:minmax(0,1fr)}
 #hero-search input{grid-column:1;grid-row:1;min-width:0;padding-left:13px}
 #hero-search button{grid-column:1;grid-row:2}
 body.rosh-x003 .hero-search:focus-within{transform:none}
 body.rosh-x003 .hero-links{gap:6px 22px;margin-top:14px}
 body.rosh-x003 .hero-links a{font-size:12px;min-height:42px}
 .product{border-radius:15px}
 .product-photo{height:155px}
 .product-bottom{align-items:stretch}
 .x003-route-grid a{padding:24px;min-height:176px}
 .x003-home-routing{padding:65px 0}
 .technical-hero-image{height:300px}
 .technical-details{padding:21px}
 .cart-drawer{width:100%;max-width:100vw}
 .quick-shell{border-radius:16px}
 .quick-line{grid-template-columns:minmax(85px,36%) minmax(0,1fr)}
}
@media(max-width:360px){
 body.rosh-x003 .hero h1{font-size:clamp(40px,11vw,45px)}
 body.rosh-x003 .hero-search{grid-template-columns:minmax(0,1fr)}
 #hero-search input{grid-column:1}
 #hero-search button{grid-column:1}
}
/* X-004.1 visual QA correction: show the mobile catalog search sooner. */
.nav #cart-trigger{gap:7px}
@media(max-width:520px){
 body.rosh-x003 .x003-masthead{padding:34px 0 31px!important}
 body.rosh-x003 .x003-masthead h1{font-size:clamp(46px,12vw,58px);margin:7px 0 12px}
 body.rosh-x003 .x003-masthead p:last-child{font-size:13px;line-height:1.55}
 body.rosh-x003 #catalog{padding-top:25px}
 body.rosh-x003 #catalog .section-head{margin-bottom:16px}
 body.rosh-x003 #catalog .section-head h2{font-size:clamp(32px,9vw,42px);line-height:1.02;margin:6px 0 8px}
 body.rosh-x003 #catalog .section-head p{display:none}
 body.rosh-x003 #catalog #data-state{padding:7px 10px;margin-top:4px;font-size:10px}
 body.rosh-x003 #catalog .catalog-shell{padding:12px}
 body.rosh-x003 #catalog .catalog-tools{gap:9px}
}
/* X-004.2 accessibility: visible field labels and full touch targets. */
.login .login-field-label{display:block;margin-top:18px;color:#30485b;font-size:12px;font-weight:800;letter-spacing:.02em}
.login .login-field-label + input{margin-top:6px}
.login > a[href="/products"]{display:inline-flex;min-height:44px;align-items:center;padding:10px 0}
.rosh-x003 .product-inspect{display:inline-flex;align-items:center;justify-content:flex-start;min-height:44px;padding:9px 3px;margin-bottom:6px;line-height:1.25}
@media(max-width:520px){.rosh-x003 .product-inspect{min-height:44px}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .x004-motion-ready .x004-observe{opacity:1!important;transform:none!important}
 .x004-motion-ready .hero h1,.x004-motion-ready .hero p,.x004-motion-ready .hero-search,.x004-motion-ready .hero-links{opacity:1;transform:none}
}