/* Compact branding and a calm, responsive navigation. */
:root{--header-height:86px;--ease-out:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:calc(var(--header-height) + 78px)}
.header{height:var(--header-height);position:sticky;top:0;z-index:40;background:#fffffffa;backdrop-filter:blur(16px);transition:box-shadow .25s,border-color .25s}
.header.is-scrolled{box-shadow:0 3px 18px #20384408;border-bottom-color:#dde5e9}
.header .wordmark>img{width:150px;height:auto}
.footer-brand .wordmark{padding:11px 14px}.footer-brand .wordmark>img{width:150px}
.menu-dialog .wordmark>img{width:145px}
.section-nav{top:var(--header-height);z-index:25}
.main-nav{gap:29px;font-size:14px}
.main-nav .active:after{content:none}
.nav-dropdown{border:0;height:100%;margin:0}
.nav-dropdown>summary{display:flex;height:100%;align-items:center;gap:5px;padding:0;position:relative;font-size:14px;white-space:nowrap;font-weight:450;list-style:none}
.nav-dropdown>summary::-webkit-details-marker{display:none}
.nav-dropdown>summary>svg{width:14px;height:14px;stroke-width:1.6;opacity:.6;transition:transform .25s}
.nav-dropdown[open]>summary>svg{transform:rotate(180deg);opacity:1}
.nav-dropdown>summary:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease-out)}
.nav-dropdown.active>summary:after,.nav-dropdown[open]>summary:after{transform:scaleX(1)}
.nav-dropdown>summary:hover{color:#4f7c8d}
.mega-panel{position:absolute;top:calc(100% - 1px);left:0;right:0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 16px 25px #1b34400a;animation:menu-in .24s var(--ease-out);max-height:calc(100dvh - var(--header-height) - 32px);overflow-y:auto;overscroll-behavior:contain}
.mega-inner{display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:70px;padding-block:34px 39px}
.mega-label{font-size:10px;letter-spacing:.16em;color:var(--muted);margin:0 0 18px}
.mega-collections,.mega-guides{display:flex;flex-direction:column;align-items:flex-start}
.main-nav .mega-panel a{height:auto;display:flex;font-size:14px;line-height:1.5;align-items:center;padding:8px 0;transition:color .2s,transform .2s}
.main-nav .mega-panel a:hover{color:#3b778e;transform:translateX(3px)}
.main-nav .mega-panel .mega-all{font-size:12px;margin-top:14px;border-bottom:1px solid #aab9c0;padding-bottom:7px;gap:20px}
.mega-all svg{width:16px;height:16px}
.main-nav .mega-panel .mega-feature{padding:0;display:grid;grid-template-columns:1.1fr 1fr;align-self:stretch;align-items:center;background:var(--pale);overflow:hidden;min-height:190px;gap:8px}
.mega-feature img{width:100%;height:100%;max-height:225px;object-fit:contain;mix-blend-mode:multiply;transition:transform .45s var(--ease-out)}
.mega-feature>div{padding:22px 20px 22px 0;display:flex;flex-direction:column;gap:12px}
.mega-feature span{font-size:9px;letter-spacing:.14em;color:var(--muted)}
.mega-feature strong{font-size:20px;line-height:1.3;letter-spacing:-.035em;font-weight:450}
.mega-feature small{display:flex;gap:10px;font-size:11px;line-height:1.6;align-items:center}.mega-feature small svg{width:15px;height:15px}
.main-nav .mega-panel .mega-feature:hover{transform:none}.mega-feature:hover img{transform:scale(1.04)}
.mega-advice{background:var(--pale);padding:28px 30px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.mega-advice>svg{width:27px;height:27px;color:#6b8a98}
.mega-advice h3{font-weight:450;font-size:22px;letter-spacing:-.03em;margin:17px 0 10px}
.mega-advice p{font-size:14px;line-height:1.75;color:var(--muted);margin:0 0 16px;max-width:240px}
.main-nav .mega-panel .mega-advice>a{font-size:14px;gap:27px}.mega-advice a svg{width:17px;height:17px}
.nav-scrim{position:fixed;inset:0;background:#1c33452e;z-index:35;backdrop-filter:blur(2px);animation:fade-in .2s}

/* Touch navigation retains the native disclosure and dialog semantics. */
.menu-dialog{width:min(450px,100vw);margin:0;max-width:100vw;padding:25px 28px 32px;overscroll-behavior:contain}
.menu-dialog .dialog-heading{padding-bottom:20px;border-bottom:1px solid var(--line)}
.menu-dialog nav{padding-top:14px}
.mobile-nav-group{border-bottom:1px solid var(--line)}
.mobile-nav-group>summary{font-size:22px;letter-spacing:-.025em;padding:21px 0;font-weight:400;gap:20px}
.mobile-nav-group>summary svg{width:18px;height:18px}
.mobile-nav-group[open]>summary svg{transform:rotate(180deg)}
.mobile-submenu{display:flex;flex-direction:column;align-items:stretch;padding:0 0 15px 14px;animation:menu-in .22s var(--ease-out)}
.menu-dialog nav .mobile-submenu>a{padding:10px 0;border:0;font-size:15px;color:var(--muted);line-height:1.5}
.menu-dialog nav .mobile-submenu>.mobile-all{display:flex;align-items:center;gap:18px;color:var(--ink);font-size:13px;padding-top:16px}.mobile-all svg{width:16px;height:16px}
.menu-dialog nav .mobile-contact{display:flex;align-items:center;gap:15px;font-size:13px;border:0;padding:30px 0 0;line-height:1.5}
.mobile-contact>span{display:flex;flex-direction:column;gap:6px;color:var(--muted)}.mobile-contact strong{font-weight:500;color:var(--ink);font-size:15px}.mobile-contact>svg:last-child{margin-left:auto;width:18px}

/* Feedback, reading rhythm and photo transitions. */
.primary,.outline-button,.icon-button,.thumbnails button,.viewer-presets button,.viewer-rotate{transition:background .2s,border-color .2s,box-shadow .2s,transform .2s var(--ease-out),color .2s}
.primary>svg,.outline-button>svg,.text-link>svg,.gallery-3d-link>span{transition:transform .25s var(--ease-out)}
.primary:hover>svg,.outline-button:hover>svg,.text-link:hover>svg{transform:translateX(4px)}
.primary:active,.outline-button:active,.icon-button:active{transform:scale(.98)}
.primary.is-added{background:#436a62}
.thumbnails button:hover:not(.selected){border-color:#bdcbd1;background:#eaf0f2}
.thumbnails button.selected{box-shadow:inset 0 -2px 0 var(--navy)}
.thumbnails button{position:relative;overflow:hidden}
.main-image{touch-action:pan-y}
.main-image.is-loading:after{content:'';position:absolute;left:26px;right:26px;bottom:0;height:2px;background:#7ea5b5;transform-origin:left;animation:photo-progress 1s ease-in-out infinite}
.favorite.pulse svg{animation:favorite-pop .4s var(--ease-out)}
.section-nav a{position:relative;border:0;transition:color .2s}
.section-nav a:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.section-nav a.current:after,.section-nav a:hover:after{transform:scaleX(1)}
.section-nav a.current{color:#254957}
.cart-dialog{height:100dvh;max-height:100dvh;width:470px;max-width:100vw;margin:0 0 0 auto;padding:34px;box-shadow:-20px 0 65px #112b3b20}
.cart-dialog[open]{animation:drawer-in .32s var(--ease-out)}
.menu-dialog[open]{animation:mobile-drawer-in .28s var(--ease-out)}
.zoom-dialog[open]{animation:zoom-in .24s var(--ease-out)}
dialog[open]::backdrop{animation:fade-in .22s}
.cart-total strong{font-variant-numeric:tabular-nums}.quantity button:hover{background:var(--pale)}
.footer-column>a{position:relative}.footer-column>a:after{content:'';height:1px;position:absolute;left:0;right:0;bottom:-3px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out)}.footer-column>a:hover:after{transform:scaleX(1)}.footer-column>a:hover{text-decoration:none}
.notification{border-radius:3px;top:calc(var(--header-height) + 14px)}
.intro,.feature-grid p,.experience-copy>p:not(.eyebrow),details p{font-size:16px}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes drawer-in{from{opacity:.6;transform:translateX(35px)}to{opacity:1;transform:translateX(0)}}
@keyframes mobile-drawer-in{from{opacity:.6;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
@keyframes zoom-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@keyframes favorite-pop{0%,100%{transform:scale(1)}40%{transform:scale(1.25)}}
@keyframes photo-progress{0%{transform:scaleX(.1);opacity:.3}60%{transform:scaleX(.8);opacity:1}100%{transform:scaleX(1);opacity:0}}
@media(min-width:901px) and (max-width:1180px){.main-nav{gap:20px}.nav-dropdown>summary{font-size:13px}.mega-inner{gap:35px}.mega-feature strong{font-size:17px}.header .wordmark>img{width:142px}}
@media(max-width:900px){:root{--header-height:78px}.header .wordmark>img{width:148px}.mega-panel,.nav-scrim{display:none!important}.main-nav{display:none}.main-image.is-loading:after{left:18px;right:18px}}
@media(max-width:650px){:root{--header-height:70px}.header{padding-inline:12px;gap:10px}.header .wordmark>img{width:138px}.header .wordmark{margin-left:2px}.footer-brand .wordmark>img{width:145px}.footer-brand .wordmark{padding:10px 12px}.menu-dialog .wordmark>img{width:145px}.menu-dialog{padding:23px 24px 30px}.section-nav{gap:22px}.cart-dialog{width:min(440px,100%);padding:27px 24px}.notification{max-width:calc(100% - 32px)}.intro,.feature-grid p,details p{font-size:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}