/* BH pad "Nocturne" — dark luxe identity layered over style.css.
   Palette drawn from the shades: Baby Pink and Ice Blue, with a violet bridge between them. */
@property --shade{syntax:'<color>';inherits:true;initial-value:#dab2c0}
:root{
 color-scheme:dark;
 --bg:#08080a;--surface:#111115;--surface-2:#17171c;--surface-3:#1f1f25;
 --text:#f3f2ee;--muted:#a6a8b0;--muted-2:#80838c;
 --line:#ffffff17;--line-2:#ffffff26;
 --pink:#f2b6c9;--ice:#9fd0f0;--violet:#bba9ff;--pearl:#ecebe5;
 --iri:linear-gradient(100deg,#f2b6c9 0%,#c8b6ff 48%,#9fd0f0 100%);
 --ink:var(--text);--paper:var(--bg);
 --display:"Segoe UI Variable Display","SF Pro Display",Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}
html{background:var(--bg)}main{overflow-x:clip}
body{background:var(--bg);color:var(--text)}
h1,h2,.spec-number,.sale-number,.mega-links a,.marquee-track{font-family:var(--display)}
h2{font-weight:600}
::selection{background:#c8b6ff55;color:#fff}
.eyebrow,.section .eyebrow,.design .eyebrow{color:var(--muted)}
.section .eyebrow::before,.hero .eyebrow::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--iri);margin-right:10px;vertical-align:2px}
.grad,.hero h1 .shine{background:var(--iri);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
:focus-visible{outline-color:var(--violet)}

/* Film grain: one static layer, no blend mode, so it costs nothing while scrolling. */
body::after{content:'';position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Header: transparent over the hero, glass once the page moves. */
header{background:transparent;border-bottom-color:transparent;backdrop-filter:none;transition:background-color .3s ease,border-color .3s ease}
header.scrolled{background:#0a0a0cc9;border-bottom-color:var(--line);backdrop-filter:blur(20px) saturate(140%)}
.tools #count.cart-badge{background:var(--iri);color:#111}
.language-control{border-color:var(--line-2)}

/* Buttons: iridescent primary, pearl secondary. */
.button{border-radius:999px;font-weight:650;letter-spacing:.01em;position:relative;overflow:hidden;isolation:isolate}
.button.light{background:var(--iri);color:#0c0c0f;box-shadow:0 0 0 1px #ffffff30 inset,0 12px 40px -10px #c8b6ff90}
.button.dark{background:var(--pearl);color:#0c0c0f}
.button::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,#ffffff8c 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
@media(hover:hover) and (pointer:fine){.motion-ok .button:hover::after{transform:translateX(120%);transition:transform .7s var(--ease-out)}.button:hover{box-shadow:0 0 0 1px #ffffff40 inset,0 16px 44px -10px #c8b6ffb0}}
.button:disabled{opacity:.4}
.textlink{color:var(--muted)}.textlink:hover{color:var(--text)}

/* Hero */
.hero{background:radial-gradient(ellipse 70% 50% at 50% 100%,#1a1a24 0,transparent 70%),var(--bg);transition:--shade .9s var(--ease-out)}
.hero::before{background:radial-gradient(closest-side at 50% 50%,color-mix(in oklab,var(--shade) 42%,transparent),transparent),radial-gradient(closest-side at 22% 60%,#9fd0f030,transparent),radial-gradient(closest-side at 78% 60%,#bba9ff2a,transparent)}
.hero-spot{position:absolute;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;background:radial-gradient(closest-side,#ffffff12,transparent);pointer-events:none;z-index:-1;opacity:0;transition:opacity .4s ease;will-change:transform}
.hero:hover .hero-spot{opacity:1}
.hero h1{font-size:clamp(56px,8.6vw,138px);letter-spacing:-.06em;line-height:.94}
.hero .intro{color:var(--muted)}
.hero-offer{background:#ffffff08;border-color:var(--line-2);backdrop-filter:blur(8px)}
.hero-art .front{box-shadow:0 4px 0 #0006,0 40px 80px -10px color-mix(in oklab,var(--shade) 55%,transparent)}
.hero-swatches button{border-color:var(--bg)}.hero-swatches button.selected{outline-color:var(--text)}
.hero-bottom{color:var(--muted-2)}

/* Proof strip */
.proof-strip{background:transparent;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof-strip svg{color:var(--violet)}

/* Collection */
.section-top p{color:var(--muted)}
.launch-label{color:var(--muted)}
.sale-number{background:var(--iri);-webkit-background-clip:text;background-clip:text;color:transparent}
del{color:var(--muted-2)}
.products{gap:18px}
.product-card{padding:10px 10px 16px;border-radius:22px;border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(160deg,var(--line-2),var(--line)) border-box;transition:transform .4s var(--ease-out),background .4s ease}
@media(hover:hover) and (pointer:fine){.product-card:hover{transform:translateY(-6px);background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(160deg,var(--glow),#bba9ff80 50%,var(--line)) border-box}}
.product-image,.product-image:hover{background:radial-gradient(circle at var(--light-x,50%) var(--light-y,50%),#ffffff10,transparent 60%),var(--surface-2);border-radius:14px}
.product-image .pad{box-shadow:0 4px 0 #0008,0 26px 40px -8px #000c}
.product-info{padding:18px 8px 0}
.product-info small,.card-launch{color:var(--muted)!important}
.product-info strong{color:var(--text)}
.product-info button{border-color:var(--line-2);color:var(--text)}
.product-info button:hover{background:var(--text);color:var(--bg)}
.card-tag{background:var(--iri);color:#0c0c0f}
.card-add{margin:14px 8px 0;width:auto;border-color:var(--line-2);color:var(--text)}
.card-add:hover{background:var(--pearl);color:#0c0c0f;border-color:var(--pearl)}

/* Marquee: a tilted iridescent ribbon. */
.marquee{background:var(--surface);border-block:1px solid var(--line);transform:rotate(-2deg) scale(1.04);margin:40px 0;box-shadow:0 30px 60px -30px #000}
.marquee span{background:var(--iri);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.marquee span:nth-of-type(even){background:none;color:var(--pearl)!important;-webkit-text-stroke:0}
.marquee i{color:var(--violet)}

/* Design */
.design{background:radial-gradient(ellipse at 75% 50%,#1d1b2a,transparent 55%),var(--bg);color:var(--text)}
.design-copy p{color:var(--muted)}

/* Specs */
.spec-grid article{border-top-color:var(--line)}
.spec-number{background:var(--iri);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}
.spec-grid p,.size-figure figcaption,.tech-sheet dt,.tech-sheet dd.tbc{color:var(--muted)}
.size-block{border-top-color:var(--line)}
.size-pad{fill:#15151b;stroke:url(#sizeGrad);stroke-width:2.5}
.size-dim{stroke:var(--muted-2)}.size-label{fill:var(--muted)}.size-note{fill:var(--muted-2)}
.size-a4{stroke:#ffffff40}.size-mouse{fill:var(--pearl)}.size-mouse-line{stroke:#15151b}
.tech-sheet dl>div{border-top-color:var(--line)}

/* Services + reviews */
.services,.reviews,.contact-section{border-top-color:var(--line)}
.service-grid article{background:var(--surface);border:1px solid var(--line)}
.service-grid article:hover{background:var(--surface-2)}
.service-grid svg{color:var(--violet)}
.service-grid p{color:var(--muted)}
.reviews-empty{background:radial-gradient(ellipse at 0% 0%,#bba9ff22,transparent 60%),var(--surface);border:1px solid var(--line)}
.reviews-empty .button{background:var(--pearl)}
.review-card{background:var(--surface);border:1px solid var(--line)}.review-card figcaption,.review-card small{color:var(--muted)}

/* Launch: the closing stage. */
.launch{position:relative;overflow:hidden;isolation:isolate;background:var(--bg);padding:150px 20px}
.launch::before{content:'';position:absolute;z-index:-1;left:50%;top:50%;width:900px;height:900px;margin:-450px 0 0 -450px;background:conic-gradient(from 0deg,#f2b6c9,#bba9ff,#9fd0f0,#ecebe5,#f2b6c9);opacity:.24;border-radius:50%;-webkit-mask:radial-gradient(closest-side,#000 10%,transparent 74%);mask:radial-gradient(closest-side,#000 10%,transparent 74%)}
.launch h2{font-size:clamp(44px,6vw,96px);letter-spacing:-.05em}
.launch p{color:var(--muted)}

/* FAQ */
.faq-heading p,.faq details p,.faq-group h3{color:var(--muted)!important}
.faq details{border-top-color:var(--line)}
.faq summary::after{color:var(--violet)}

/* Contact */
.contact-copy>p,.contact-signature,.contact-signature small{color:var(--muted)}
.contact-email{color:var(--text);background:var(--iri);-webkit-background-clip:text;background-clip:text;color:transparent}
.contact-signature .brand{filter:brightness(0) invert(1)}
.contact-form{background:var(--surface);border-color:var(--line)}
.contact-form label,.form-heading>span,.contact-data-note,.contact-form #contactStatus{color:var(--muted)}
.contact-form input,.contact-form select,.contact-form textarea,#authForm input,#referralLink{background:var(--surface-2);border-color:var(--line-2);color:var(--text)}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline-color:var(--violet)}

/* Footer */
.site-footer{background:var(--surface);border-top-color:var(--line);color:var(--muted)}
.site-footer .brand{filter:brightness(0) invert(1)}
.site-footer .footer-brand-name,.site-footer .footer-column h3,.site-footer .footer-tagline{color:var(--text)}
.site-footer .footer-location,.site-footer .footer-column a,.site-footer .footer-column button{color:var(--muted)}
.site-footer .footer-column a:hover,.site-footer .footer-column button:hover{color:var(--text)}
.site-footer>.footer-bottom,.footer-newsletter{border-color:var(--line)}
.footer-newsletter p,.newsletter-consent{color:var(--muted)}
.newsletter-entry{border-bottom-color:var(--line-2)}.newsletter-entry input{color:var(--text)}
.newsletter-entry button{background:var(--iri);color:#0c0c0f}
.footer-status::before{background:var(--iri)}

/* Dialogs, drawers, menu */
dialog,#cookieDialog,.effects-dialog,#menuDialog,#cartDialog,.partner-language{background:var(--surface);color:var(--text);border:1px solid var(--line)}
dialog::backdrop,#cartDialog::backdrop{background:#000a;backdrop-filter:blur(10px)}
dialog p,.dialog-meta,.prelaunch,#cookieDialog p,#languageDialog p,.effects-dialog>p,.legal-dialog p,.checkout-hint,.customer-email,.checkout-saving{color:var(--muted)!important}
.close,.drawer-close,.mega-close{color:var(--text);border-color:var(--line-2)!important}
.product-drawer .static-product,#productDialog .static-product{background:radial-gradient(circle at 50% 40%,#ffffff0d,transparent 70%),var(--surface-2)}
.static-product .dim{color:var(--muted)}
.gallery-thumbs button{background:var(--surface-2);color:var(--muted)}
.gallery-thumbs button[aria-pressed=true]{background:var(--surface-3);border-color:var(--violet);color:var(--text)}
.swatches button{border-color:var(--surface);outline-color:var(--line-2)}.swatches button.selected{outline-color:var(--text)}
.product-offer{background:radial-gradient(ellipse at 100% 0%,#bba9ff22,transparent 60%),var(--surface-2)}
.product-offer p{color:var(--muted)}
.product-offer strong{background:var(--iri);-webkit-background-clip:text;background-clip:text;color:transparent}
.product-assurance li{color:var(--muted)}.product-assurance svg{color:var(--violet)}
.product-specs{border-top-color:var(--line)}.product-specs dl>div{border-top-color:var(--line)}.product-specs dt{color:var(--muted)}
.drawer-header,.drawer-footer,.cart-row{border-color:var(--line)}
.drawer-footer{background:var(--surface-2)}
.cart-name small,.remove,.drawer-continue,.empty,.drawer-header .eyebrow{color:var(--muted)}
.quantity button{border-color:var(--line-2);color:var(--text)}
.mega-top,.mega-links a{border-color:var(--line)}
.mega-feature{background:var(--surface-2)}.mega-feature a,.mega-utilities button,.mega-utilities a,.mega-caption{color:var(--muted)}
.mega-links a:hover{color:var(--text)}
.cookie-icon,.cookie-assurance,.cookie-options,.cookie-badge,.cookie-top select,.legal-dialog .legal-notice,.service-note,.dashboard-stats>div,.auth-options button,.language-options button,.effects-options button,.margin-card,.referral-example{background:var(--surface-2)!important;color:var(--text)!important;border-color:var(--line)!important}
.cookie-option strong{color:var(--text)}.cookie-option small,.cookie-links button,#cookieDialog .eyebrow{color:var(--muted)}
.cookie-option+.cookie-option{border-top-color:var(--line)}
.cookie-action{background:var(--pearl);color:#0c0c0f;border-color:var(--pearl)}.cookie-action:hover{background:#fff}
.cookie-option input{background:#3a3a42}.cookie-option input:checked{background:var(--violet)}
.effects-options button[aria-pressed=true]{border-color:var(--violet)!important}
.effects-options span,.language-options button span:first-child,.dashboard-stats span{color:var(--muted)}
.checkout-steps,.order-line,.customer-orders article{border-color:var(--line)}
.checkout-identities button{border-color:var(--line-2)}.checkout-identities button[aria-pressed=true]{background:var(--pearl);color:#0c0c0f}
#toast{background:var(--pearl);color:#0c0c0f}
.sticky-buy{background:#111115ee;border-color:var(--line-2)}
.sticky-buy .button{background:var(--iri)}

/* Partner, creator and confirmation pages */
.partner-hero{background:radial-gradient(ellipse 60% 50% at 50% 100%,#1d1b2a,transparent 70%),var(--bg)}
.partner-hero p{color:var(--muted)}
.margin-card p,.partner-grid p,.partner-grid article>span,.referral-example p,.referral-rules details p{color:var(--muted)}
.partner-grid article,.referral-rules details{border-color:var(--line)}
.referral-number strong,.margin-card>strong{background:var(--iri);-webkit-background-clip:text;background-clip:text;color:transparent}
.partner-page .contact-section{background:transparent}
.confirmation-page{background:var(--bg)}.confirmation-card{background:var(--surface);border:1px solid var(--line)}.confirmation-card p,.confirmation-card #confirmationDetails{color:var(--muted)}.confirmation-page>.brand{filter:brightness(0) invert(1)}

/* Scroll-driven motion (no JS): the design pad settles flat as it scrolls in, spec figures and the size outline draw in. */
@keyframes settle{from{rotate:-10deg;scale:.82;opacity:.2}to{rotate:0deg;scale:1;opacity:1}}
@keyframes draw{from{stroke-dashoffset:1820}to{stroke-dashoffset:0}}
@keyframes spin{to{rotate:360deg}}
@keyframes iri-shift{to{background-position:200% 0}}
@supports(animation-timeline:view()){
 .motion-ok .design-art{animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
 .motion-ok .size-pad{stroke-dasharray:1820;animation:draw linear both;animation-timeline:view();animation-range:entry 10% cover 50%}
}
.motion-ok .launch::before{animation:spin 40s linear infinite}
.motion-ok .hero h1 .shine{animation:iri-shift 8s linear infinite}

/* Clip reveal for section titles, replacing the generic fade. */
.reveal-ready h2[data-reveal]{transition:clip-path .9s var(--ease-out) var(--reveal-delay,0ms),opacity .6s ease var(--reveal-delay,0ms),transform .9s var(--ease-out) var(--reveal-delay,0ms)}
.reveal-ready h2[data-reveal]:not(.is-visible){clip-path:inset(0 0 100% 0);transform:translateY(24px);opacity:1}
.reveal-ready h2[data-reveal].is-visible{clip-path:inset(-10% -5% -20% -5%)}

@media(max-width:760px){.hero h1{font-size:clamp(46px,13vw,72px)}.product-card{padding:8px 8px 14px}.marquee{transform:rotate(-2deg) scale(1.08);margin:24px 0}.launch{padding:100px 20px}.launch::before{width:640px;height:640px;margin:-320px 0 0 -320px}.hero-spot{display:none}}
@media(prefers-reduced-motion:reduce){.reveal-ready h2[data-reveal]:not(.is-visible){clip-path:none;transform:none}}

.card-dot{box-shadow:inset 0 0 0 1px #ffffff45}

/* v27 — signature pointer, crossed ribbons, comfort details. */
/* Native SVG pointers (no JS follower): a slim iridescent ring, which opens up over anything clickable. */
html,html body,html body *{cursor:url("assets/bh-cursor.svg?v=27") 16 16,auto!important}
html body :is(a,button,summary,label,select,[role=button],[data-product],input[type=checkbox],input[type=range]),html body :is(a,button,summary,label,[role=button]) *{cursor:url("assets/bh-cursor-hover.svg?v=27") 16 16,pointer!important}
html body :is(input:not([type=checkbox]):not([type=range]),textarea){cursor:text!important}
html body :is(button:disabled,button:disabled *){cursor:not-allowed!important}
/* Two ribbons crossing, wider than the screen so their ends never show. */
.ribbons{position:relative;height:230px;margin:30px 0;overflow:hidden;display:grid;place-items:center}
.ribbons .marquee{position:absolute;left:-6vw;width:112vw;margin:0;top:50%}
.ribbons .marquee:not(.marquee-alt){transform:translateY(-50%) rotate(-3.5deg);z-index:1;background:#121217f2;backdrop-filter:blur(6px);box-shadow:0 24px 50px -20px #000,0 0 0 1px #ffffff12}
.ribbons .marquee-alt{transform:translateY(-50%) rotate(3deg);background:var(--iri);border:0;box-shadow:0 20px 50px -20px #bba9ff70}
.marquee-alt .marquee-track{font-size:clamp(16px,1.9vw,24px)}
.marquee-alt span,.marquee-alt span:nth-of-type(even){background:none;color:#0c0c0f!important;-webkit-background-clip:border-box;background-clip:border-box}
.marquee-alt i{color:#0c0c0f;opacity:.6}
.motion-ok .marquee-alt .marquee-track{animation-direction:reverse;animation-duration:40s}
.marquee-track{font-weight:700;letter-spacing:.01em}
@media(max-width:760px){.ribbons{height:150px;margin:16px 0}.ribbons .marquee{left:-10vw;width:120vw}}
/* Comfort: steadier scrolling, crisper text, softer scrollbars, quicker tap response. */
html{scrollbar-color:#2b2b33 var(--bg);text-rendering:optimizeLegibility}
body{touch-action:manipulation}
img,svg{-webkit-user-drag:none}
.product-card,.service-grid article,.card-add,.gallery-thumbs button{-webkit-user-select:none;user-select:none}
@media(max-width:760px){.ribbons{height:190px}.ribbons .marquee:not(.marquee-alt){transform:translateY(-50%) rotate(-6deg)}.ribbons .marquee-alt{transform:translateY(-50%) rotate(7deg)}}

/* v28 — setup visualizer, cart suggestions, scrollspy, page transitions. */
@view-transition{navigation:auto}
.setup{display:grid;grid-template-columns:.9fr 1.3fr;gap:60px;align-items:center;border-top:1px solid var(--line)}
.setup-copy>p{color:var(--muted);max-width:420px}
.setup-swatches{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:30px 0 22px;max-width:420px}
.setup-swatches button{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface);color:var(--muted);font-size:15px;font-weight:600;transition:transform .16s var(--ease-out),border-color .2s ease,color .2s ease,background-color .2s ease}
.setup-swatches button span{width:18px;height:18px;border-radius:50%;background:var(--color);box-shadow:inset 0 0 0 1px #ffffff45;flex-shrink:0}
.setup-swatches button[aria-pressed=true]{color:var(--text);border-color:transparent;background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,var(--iri) border-box}
.setup-swatches button:active{transform:scale(.97)}
.setup-buy{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.setup-buy span{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.02em}
.setup-note{font-size:13px!important;color:var(--muted-2)!important;margin-top:18px}
.setup-stage{position:relative;min-height:520px;display:grid;place-items:center;perspective:1600px}
.setup-stage::before{content:'';position:absolute;inset:8% 4%;border-radius:40px;background:radial-gradient(ellipse at 50% 60%,#bba9ff1f,transparent 70%)}
.desk{position:relative;width:min(100%,560px);aspect-ratio:490/420;transform-style:preserve-3d;transform:rotateX(calc(52deg + var(--tilt-x,0deg)*.5)) rotateZ(calc(-28deg + var(--tilt-y,0deg)*.4));transition:transform .5s var(--ease-out)}
.setup-stage.tilting .desk{transition:transform .15s ease-out}
.desk>.pad{position:absolute;inset:0;width:100%;box-shadow:0 2px 0 #0008,0 60px 80px -20px #000}
.setup-keyboard{position:absolute;left:7%;top:12%;width:66%;transform:translateZ(14px);filter:drop-shadow(0 18px 14px #000a)}
.setup-mouse{position:absolute;right:9%;top:42%;width:11%;transform:translateZ(16px) rotate(-8deg);filter:drop-shadow(0 14px 10px #000a)}
.motion-ok .setup-keyboard rect:first-child{animation:kb-glow 4s ease-in-out infinite}
@keyframes kb-glow{50%{stroke-opacity:1}}
.cart-suggest{padding:22px 0 26px}.cart-suggest p{font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.cart-suggest>div{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.cart-suggest button{display:grid;gap:8px;justify-items:center;padding:12px 10px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font-size:13px;position:relative;transition:transform .16s var(--ease-out),border-color .2s ease}
.cart-suggest button .pad{width:70%;box-shadow:0 6px 12px #0006}
.cart-suggest button b{position:absolute;top:8px;right:10px;font-weight:400;color:var(--violet)}
.cart-suggest button:hover{border-color:var(--violet)}.cart-suggest button:active{transform:scale(.97)}
.desktop-nav a.active{color:var(--text)}.desktop-nav a.active::after{transform:scaleX(1);background:var(--iri)}
@media(max-width:900px){.setup{grid-template-columns:1fr;gap:20px}.setup-stage{min-height:380px;order:-1}}
@media(max-width:480px){.setup-stage{min-height:300px}.setup-swatches{grid-template-columns:1fr 1fr}.setup-swatches button{font-size:14px;padding:0 12px}}
@media(max-width:600px){.desk{width:80%}}

/* v29 — realistic WebGL desk. The CSS illustration stays until the canvas has its first frame. */
.setup-visual{position:relative;min-width:0}
.setup-stage{border-radius:28px;overflow:hidden}
.setup-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;opacity:0;transition:opacity .8s var(--ease-out);touch-action:pan-y;cursor:grab}
.setup-stage.dragging .setup-canvas{cursor:grabbing}
html body .setup-canvas{cursor:url("assets/bh-cursor-hover.svg?v=27") 16 16,grab!important}
.setup-stage.webgl .setup-canvas{opacity:1}
.setup-stage.webgl .desk{opacity:0;transition:opacity .5s ease;pointer-events:none}
.setup-stage.webgl::before{opacity:0}
.setup-stage{min-height:560px;background:radial-gradient(ellipse at 50% 35%,#16141d,transparent 70%)}
.setup-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);background:#08080acc;border:1px solid var(--line);padding:7px 14px;border-radius:999px;opacity:0;transition:opacity .4s ease;pointer-events:none;white-space:nowrap}
.setup-stage.webgl .setup-hint{opacity:1}.setup-stage .setup-hint.hidden{opacity:0}
.setup-views{display:flex;justify-content:center;gap:8px;margin-top:14px}
.setup-views[hidden]{display:none}
.setup-views button{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--muted);font-size:14px;font-weight:600;transition:transform .16s var(--ease-out),color .2s ease,border-color .2s ease}
.setup-views button[aria-pressed=true]{color:#0c0c0f;background:var(--pearl);border-color:var(--pearl)}
.setup-views button:active{transform:scale(.96)}
@media(max-width:900px){.setup-visual{order:-1}.setup-stage{min-height:420px}}
@media(max-width:480px){.setup-stage{min-height:340px;border-radius:20px}}

/* v30 — UI/UX Pro Max audit: 44 px targets, focus never hidden, balanced headings, CLS guards. */
/* Touch & interaction: every control reaches 44 × 44 px. */
.desktop-nav a{min-height:44px;display:inline-flex;align-items:center}
.hero-swatches button,.hero-swatches button.selected{width:44px;height:44px;border-width:11px}
.swatches button{width:44px;height:44px}
.quantity button{width:44px;height:44px}
.remove,.drawer-continue,.link-button{min-height:44px}
.contact-email{display:inline-flex;align-items:center;min-height:44px}
.newsletter-consent{min-height:44px;align-items:center}
.newsletter-consent input{width:22px;height:22px;margin:0}
/* Focus not obscured: the fixed header and the mobile buy bar never cover the focused element. */
html{scroll-padding-top:96px}
@media(max-width:760px){html{scroll-padding-bottom:110px}}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
.button:focus-visible,.card-add:focus-visible{outline-offset:4px}
/* Typography: no orphan words in headings, fewer ragged paragraph endings. */
h1,h2,h3,.setup-buy span{text-wrap:balance}
p,dd,figcaption,summary{text-wrap:pretty}
/* Performance: off-screen sections skip rendering until needed; reserved height avoids layout shift. */
.faq,.contact-section,.reviews,.services{content-visibility:auto;contain-intrinsic-size:auto 900px}
@media(max-width:600px){.hero-swatches button,.hero-swatches button.selected{width:44px;height:44px;border-width:10px}}

/* v31 — calm mode: the device asks for less motion. 3D tilt stays; parallax, drifting, looping and sliding movement stop. */
@keyframes calm-fade{from{opacity:0}}
html.motion-calm .hero::before,html.motion-calm .hero-art .front,html.motion-calm .hero-art .back,html.motion-calm .hero h1 .shine,html.motion-calm .marquee-track,html.motion-calm .launch::before,html.motion-calm .setup-keyboard rect:first-child{animation:none!important}
html.motion-calm .design-art,html.motion-calm .size-pad{animation:none!important;rotate:none;scale:none;opacity:1;stroke-dasharray:none}
html.motion-calm .hero-in{animation-name:calm-fade}
html.motion-calm.reveal-ready [data-reveal]:not(.is-visible),html.motion-calm.reveal-ready h2[data-reveal]:not(.is-visible){transform:none;clip-path:none}
html.motion-calm.reveal-ready [data-reveal]{transition:opacity .5s ease var(--reveal-delay,0ms)}
html.motion-calm .product-image:hover::after{transform:translateX(-110%);transition:none}
html.motion-calm.motion-ok #cartDialog,html.motion-calm.motion-ok #productDialog{transition:opacity .22s ease,overlay .22s allow-discrete,display .22s allow-discrete}
html.motion-calm.motion-ok #cartDialog:not([open]),html.motion-calm.motion-ok #productDialog:not([open]){transform:none;opacity:0}
@starting-style{html.motion-calm.motion-ok #cartDialog[open],html.motion-calm.motion-ok #productDialog[open]{transform:none;opacity:0}}
html.motion-calm.motion-ok #menuDialog .mega-content{transition:none}
html.motion-calm .sticky-buy{transition:opacity .25s ease}html.motion-calm .sticky-buy:not(.visible){transform:none;opacity:0;pointer-events:none}

/* v32 — studio 3D controls and small fixes. */
/* Ribbons: shadows were cut flat by the container; main already clips the horizontal overflow. */
.ribbons{overflow:visible;height:260px;margin:10px 0 30px}
@media(max-width:760px){.ribbons{height:210px}}
/* Cart badge hides at zero. */
.tools #count.cart-badge[hidden]{display:none}
/* Studio controls wrap cleanly on phones; the mouse toggle reads as a switch, not a view. */
.setup-views{flex-wrap:wrap}
.setup-views .setup-toggle{display:inline-flex;align-items:center;gap:8px;margin-left:6px}
.setup-views .setup-toggle::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--muted-2);transition:background-color .2s ease}
.setup-views .setup-toggle[aria-pressed=true]{background:var(--surface);color:var(--text);border-color:var(--line-2)}
.setup-views .setup-toggle[aria-pressed=true]::before{background:var(--violet);box-shadow:0 0 8px var(--violet)}
@media(max-width:480px){.setup-views{gap:6px}.setup-views button{padding:0 14px;font-size:13px}.setup-views .setup-toggle{margin-left:0}}
.setup-stage{background:radial-gradient(ellipse at 50% 70%,#17151f,transparent 70%)}

/* v33 — Impeccable polish pass (craft floor). Self-hosted display face, one gradient moment, drawn icons, no card grid, themed browser surfaces. */
@font-face{font-family:"Unbounded";src:url("assets/fonts/unbounded-latin.woff2") format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Unbounded";src:url("assets/fonts/unbounded-latin-ext.woff2") format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--display:"Unbounded","Segoe UI Variable Display","SF Pro Display",Inter,-apple-system,Arial,sans-serif;--accent-text:#d4c8ff}
/* Display type: wide face, so lighter weight, tracking at the -0.04em floor, display capped at 6rem. */
h1,h2,.spec-number,.sale-number,.mega-links a,.marquee-track,.setup-buy span,.tech-sheet h3,.drawer-header h2,dialog h2{font-family:var(--display);font-weight:500;letter-spacing:-.04em}
.hero h1{font-size:clamp(44px,7vw,6rem);line-height:1;letter-spacing:-.04em}
h2,.launch h2,.faq-heading h2,.contact-copy h2{letter-spacing:-.04em;line-height:1.08}
.section-top h2,.design h2,.setup h2,.specs>h2,.services h2,.reviews h2{font-size:clamp(34px,4.2vw,58px)}
.launch h2{font-size:clamp(38px,5.2vw,80px)}
.spec-number{font-size:clamp(34px,3.4vw,46px)}
.marquee-track{font-weight:600;letter-spacing:-.01em}
/* One authored gradient moment: the hero signature line. Everywhere else, emphasis is solid colour and weight. */
.grad,.sale-number,.spec-number,.product-offer strong,.contact-email,.referral-number strong,.margin-card>strong,.marquee span{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:currentColor}
.grad{color:var(--accent-text)}
.sale-number,.spec-number,.product-offer strong,.referral-number strong,.margin-card>strong{color:var(--text)}
.contact-email{color:var(--text)!important;text-decoration:underline;text-decoration-color:var(--violet);text-underline-offset:6px;text-decoration-thickness:1px}
.marquee:not(.marquee-alt) span:nth-of-type(4n+1){color:var(--pink)!important}.marquee:not(.marquee-alt) span:nth-of-type(4n+2){color:var(--pearl)!important}.marquee:not(.marquee-alt) span:nth-of-type(4n+3){color:var(--ice)!important}.marquee:not(.marquee-alt) span:nth-of-type(4n){color:var(--pearl)!important}
/* Ornaments and icons are drawn, not typed. */
.marquee i{font-size:0;display:inline-block;width:8px;height:8px;transform:rotate(45deg);background:currentColor;flex-shrink:0}
.marquee:not(.marquee-alt) i{color:var(--violet)}
.close,.drawer-close,.mega-close{font-size:0!important;display:grid;place-items:center}
.close::before,.drawer-close::before,.mega-close::before{content:'';width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat}
.product-info button,.quantity button{display:grid;place-items:center}
.card-add svg,.cart-suggest b svg{flex-shrink:0}
.cart-suggest button b{display:grid}
/* Services: a ruled list of commitments instead of four identical cards. */
.service-grid{gap:0 48px;grid-template-columns:repeat(2,1fr)}
.service-grid article,.service-grid article:hover{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:26px 0 28px;display:grid;grid-template-columns:28px 1fr;column-gap:18px;transform:none}
.service-grid article svg{grid-row:1/3;margin-top:3px}
.service-grid h3{margin:0 0 6px}
@media(max-width:760px){.service-grid{grid-template-columns:1fr}}
/* Decorative glass removed where it carries nothing. */
.hero-offer{backdrop-filter:none}
/* Browser surfaces carry the palette too. */
input,textarea,select{caret-color:var(--violet);accent-color:var(--violet)}
input[type=checkbox]{accent-color:var(--violet)}
a{text-underline-offset:4px}
.cart-name,.total,.product-offer,.setup-buy,.sticky-buy-price,.product-info small{font-variant-numeric:tabular-nums}
/* Headings lost their kicker labels: keep their rhythm. */
.section-top h2,.design-copy h2,.setup-copy h2,.specs>h2,.reviews-head h2,.faq-heading h2,.contact-copy h2,.launch h2,.footer-newsletter h2{margin-top:0}
.hero-offer{margin-top:0}

/* v37 — studio labels for the layers and measures views. */
.studio-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.studio-label{position:absolute;left:0;top:0;padding:7px 12px;border-radius:999px;background:#0b0b0ee6;color:var(--text);font-size:13px;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .25s ease;box-shadow:0 0 0 1px #ffffff1f}
.studio-label.on{opacity:1}
.studio-label[data-group=measure]{background:var(--pink);color:#141016;box-shadow:none}

/* v38 — the real product photographs (solid shades, stitched edge, katakana signature).
   Each photo is a cut-out on transparency; size/position crop it to the pad's own outline. */
.pink{--color:#efb2c9}.ice{--color:#b3d0e5}.black{--color:#1b1b1d}.red{--color:#b3132c}
.pad.pink{background-image:url('assets/pad-pink.webp');background-size:105.694% 108.310%;background-position:52.05% 49.44%}
.pad.ice{background-image:url('assets/pad-ice.webp');background-size:104.475% 106.319%;background-position:53.45% 46.38%}
.pad.black{background-image:url('assets/pad-black.webp');background-size:104.556% 106.124%;background-position:52.54% 46.27%}
.pad.red{background-image:url('assets/pad-red.webp');background-size:104.314% 105.834%;background-position:51.79% 45.31%}
.pad{background-repeat:no-repeat;background-color:transparent}
/* Dark pads need a little lift on the dark page. */
.product-image .pad.black,.hero-art .pad.black,.design-art .pad.black{box-shadow:0 0 0 1px #ffffff14,0 26px 40px -8px #000c}