/* One sticky positioning system and one state transition replace the previous scroll transforms. */
body.home{position:relative}
.home-navigation-track{position:absolute;inset:0;z-index:35;pointer-events:none;--nav-pin:16px}
.home-navigation-track>.hero-navigation{position:sticky;top:var(--nav-pin)!important;left:auto;right:auto;margin-inline:auto;width:min(390px,calc(100% - 32px));height:52px;padding:0;border:0;background:transparent;box-shadow:none;overflow:visible;transform:none;pointer-events:none;will-change:auto;contain:layout style}
.hero-nav-panel{position:absolute;inset:0;border:1px solid #ffffff90;background:var(--blue);box-shadow:0 2px 5px #0003;transform-origin:center;will-change:transform;pointer-events:none}
.hero-nav-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 18px;color:white;will-change:opacity;pointer-events:none}
.hero-nav-content>.logo{flex:none;font-size:30px;line-height:1;white-space:nowrap}
.hero-nav-links{display:flex;align-items:center;justify-content:flex-end;gap:12px;white-space:nowrap}
.hero-nav-links a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 4px;font-size:15px;font-weight:700;line-height:1}
.hero-nav-links a:hover{opacity:.7}
.hero-navigation.expanded .hero-nav-content{pointer-events:auto}
.home-navigation-track .hero-nav-cta{position:absolute;inset:0 auto auto 50%;transform:translateX(-50%);display:grid;place-items:center;width:112px;height:52px;min-width:112px;min-height:52px;padding:0;border:0;background:transparent;box-shadow:none;color:white;font-size:16px;line-height:1;visibility:visible;pointer-events:auto;will-change:opacity}
.home-navigation-track .hero-nav-cta:hover{background:transparent;color:white}
.hero-navigation.expanded .hero-nav-cta{pointer-events:none}
.hero-nav-content[inert],.hero-nav-cta[inert]{pointer-events:none}
/* All pictograms are centred in their hit areas, independently of font baseline metrics. */
.quantity button,.cart-quantity button,.gallery>.prev,.gallery>.next,.carousel-prev,.carousel-next{display:grid;place-items:center;padding:0;line-height:1}
.quantity button svg,.cart-quantity button svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gallery>.prev svg,.gallery>.next svg,.carousel-prev svg,.carousel-next svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dialog-head .icon svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
@media(max-width:809px){
 :root{--mobile-gutter:24px}
 .home #header,#header:not(.scrolled){display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;justify-content:initial;column-gap:12px;height:calc(72px + env(safe-area-inset-top,0px));padding:calc(14px + env(safe-area-inset-top,0px)) var(--mobile-gutter) 14px}
 .home #header>.logo,#header:not(.scrolled)>.logo{position:static;transform:none;justify-self:center;font-size:36px;line-height:1}
 #header:not(.scrolled) .floating-links{display:none}
 #header .icon{width:44px;height:44px;padding:0;margin:0;place-items:center}
 #header .bag{justify-self:end;margin:0}
 #header .bag svg{width:28px;height:28px}
 #header .count{right:0;bottom:0;min-width:17px;height:17px;line-height:1}
 .menu-toggle{position:relative;display:grid;place-items:center;gap:0;align-items:center}
 .menu-toggle span{position:absolute;left:50%;top:50%;width:20px;height:1.5px;border-radius:2px;transform-origin:center;transition:transform .28s var(--ease),width .28s var(--ease)}
 .menu-toggle[aria-expanded="false"] span:first-child{transform:translate(-50%,calc(-50% - 4px))}
 .menu-toggle[aria-expanded="false"] span:last-child{width:14px;transform:translate(-50%,calc(-50% + 4px))}
 .menu-toggle[aria-expanded="true"] span:first-child{width:20px;transform:translate(-50%,-50%) rotate(45deg)}
 .menu-toggle[aria-expanded="true"] span:last-child{width:20px;transform:translate(-50%,-50%) rotate(-45deg)}
 #menu{top:calc(72px + env(safe-area-inset-top,0px));padding:24px var(--mobile-gutter) 8px}
 #menu a{min-height:52px;line-height:1.3}
 .hero-nav-content{gap:12px;padding:4px 16px}
 .hero-nav-content>.logo{font-size:28px}
 .hero-nav-links{gap:10px}
 .hero-nav-links a{font-size:14px;padding-inline:2px}
 #header.scrolled{top:16px;padding:2px 14px;height:52px;max-width:calc(100% - 32px)}
 #header.scrolled .floating-links{gap:10px}
 #header.scrolled .floating-links a{height:44px;line-height:44px;padding-inline:2px}
 .page,.product-page{padding-left:var(--mobile-gutter);padding-right:var(--mobile-gutter)}
 .product-page{padding-top:108px}
 .home .split,.three-intro,.products{padding-left:var(--mobile-gutter);padding-right:var(--mobile-gutter)}
 .button{min-height:48px;padding:14px 24px;line-height:1.2;text-align:center}
 .product-actions{gap:12px}
 .product-actions .button{min-height:48px;padding:12px 20px;line-height:1.2}
 .quantity{gap:12px}
 .quantity button{width:44px;height:44px}
 .quantity output{display:grid;place-items:center;min-width:24px;height:44px;line-height:1}
 .sizes a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;margin:0 4px 0 -12px}
 .sizes a+a{margin-left:0}
 .gallery>.prev,.gallery>.next{width:44px;height:44px;min-height:44px;min-width:44px}
 .gallery>.prev{left:12px}.gallery>.next{right:12px}
 .carousel-prev,.carousel-next{width:44px;height:44px}
 .faq summary{align-items:center;gap:16px;line-height:1.35}
 .faq summary::after{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;font-size:24px;line-height:1}
 .contact-form{gap:24px}
 .contact-form label{gap:10px;line-height:1.3}
 .contact-form input{min-height:48px;padding:12px 14px}
 .contact-form textarea{padding:14px;min-height:144px}
 .footer-details .socials{align-items:center;gap:12px;margin:20px 0 24px;padding-inline:20px}
 .socials a{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;padding:0;line-height:1}
 .socials svg{display:block;width:23px;height:23px;margin:0}
 .footer-details .signatures{height:76px}
 .footer-details .footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;align-items:center;gap:8px 16px;padding:0 var(--mobile-gutter) calc(24px + env(safe-area-inset-bottom,0px))}
 .footer-links a{width:100%;min-height:44px;justify-content:center;text-align:center;line-height:1.35}
 .footer-links a:last-child:nth-child(odd){grid-column:1/-1}
 .cart-access{display:grid;place-items:center;width:52px;height:52px;padding:0;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px))}
 .cart-access svg{display:block;width:26px;height:26px;margin:0}
 .cart-access .count{right:-1px;bottom:-1px;min-width:18px;height:18px;line-height:1}
 .dialog-head{align-items:center;gap:16px;margin-bottom:24px}
 .dialog-head .icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0}
 .cart-quantity{gap:8px}
 .cart-quantity button{flex:0 0 44px;width:44px;height:44px}
 .cart-quantity input{height:44px;line-height:1;text-align:center;padding:0 4px}
}
@media(max-width:359px){
 :root{--mobile-gutter:20px}
 .hero-nav-content{gap:10px;padding:4px 12px}
 .hero-nav-content>.logo{font-size:26px}
 .hero-nav-links{gap:8px}
 .hero-nav-links a{font-size:13px}
 #header.scrolled .floating-links{gap:8px}
 #header.scrolled .floating-links a{font-size:13px}
}

.hero-nav-content,.home-navigation-track .hero-nav-cta{z-index:1}


/* Mobile subpages retain their full top header and fade with scroll direction. */
@media(max-width:809px){
 body:not(.home) #header{position:fixed;top:0;left:0;transform:none;width:100%;max-width:none;opacity:1;visibility:visible;transition:opacity .28s ease,visibility 0s}
 body:not(.home) #header.mobile-surface{background:white;color:var(--blue);box-shadow:0 2px 8px #0000000d}
 body:not(.home) #header.mobile-surface .count{background:var(--blue);color:white}
 body:not(.home) #header.mobile-faded{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility 0s .28s}
 body.menu-open:not(.home) #header{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .28s ease,visibility 0s}
 body:not(.home) #header.mobile-surface~#menu{background:white}
}
@media(max-width:809px) and (prefers-reduced-motion:reduce){body:not(.home) #header,body:not(.home) #header.mobile-faded{transition:none}}

.hero,.hero-photo{background-image:none!important}
.hero-photo{display:block;position:absolute;inset:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.stock-badge{display:inline-block;font-size:13px;line-height:1.4;padding:6px 10px;margin-top:10px;background:#eef0f2;color:var(--blue);border-radius:3px}
.stock-notice{padding:16px 18px;border:1px solid #d8dce0;background:#f6f7f8;color:var(--blue);margin:16px 0 24px;line-height:1.45}
.stock-notice h2{font-size:22px;margin-bottom:10px}.stock-notice p{font-size:16px;line-height:1.45;margin:8px 0 0}.stock-notice a{display:inline-block;text-decoration:underline;text-underline-offset:3px;margin-top:12px}
.shop-page>.stock-notice{margin-inline:auto;max-width:700px}
.product-actions .button[disabled]{opacity:1;background:#eef0f2;border-color:#d8dce0;color:#626b75;cursor:default}
.form-note a{text-decoration:underline;text-underline-offset:3px}
.form-status:empty{display:none}.form-status{line-height:1.5;padding:16px;border:1px solid var(--line);margin:0}.form-status.success{background:#eef6f0}.form-status.error{background:#fff3f0}
@media(max-width:809px){.shop-page>.stock-notice{margin-inline:var(--mobile-gutter)}.product-actions a.button{display:flex;align-items:center;justify-content:center}.stock-notice{padding:16px}.product-copy .stock-notice p{font-size:15px}}