/* Navigation behavior and proportions, Shop 04. */
.header-left{display:flex;align-items:center;gap:40px}.header-right{gap:40px}.header-control{display:inline-flex;align-items:center;gap:10px;background:none;border:0;color:inherit;min-height:44px;padding:0;font:400 11px/20px var(--font);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}.header-control:hover{text-decoration:underline;text-underline-offset:3px}.header-control svg{display:block;width:12px;height:12px;flex:none}.header-control .control-close-icon,.account-link .account-icon{display:none}.header-control[data-active=true]>.menu-icon,.header-control[data-active=true]>.search-icon{display:none}.header-control[data-active=true]>.control-close-icon{display:block}.header-control:disabled{opacity:1}
body.shop-panel-open{overflow:hidden}/* Shop 31: use one real header for both the page and the open dialog. The legacy duplicate inside the dialog stays hidden, so Menu/Search, logo, Account and Bag never cross-fade against a second copy. */
.shop-overlay .overlay-header{display:none!important}
.shop-overlay{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--ink);overflow:hidden}.shop-overlay[open]{display:block}.shop-overlay::backdrop{background:transparent;backdrop-filter:none}.shop-overlay .overlay-header{position:absolute;z-index:5}.overlay-surface{position:absolute;left:0;top:0;bottom:0;width:240px;background:#fff;padding-top:100px;overflow:hidden;transition:width .3s ease-out;will-change:transform}.shop-overlay[data-wide=true] .overlay-surface,.shop-overlay[data-mode=search] .overlay-surface{width:480px}.menu-view{height:100%}.nav-root{width:240px;height:100%;padding:0 40px 40px;overflow:auto;overscroll-behavior:contain}.nav-root a,.nav-root button,.nav-branch nav>a,.nav-branch nav>button{display:block;width:100%;min-height:20px;background:none;border:0;padding:0;font:400 11px/20px var(--font);letter-spacing:.08em;text-transform:uppercase;text-align:left;color:#000}.nav-root a:hover,.nav-root button:hover,.nav-branch nav>a:hover,.nav-branch nav>button:hover,.nav-root button[aria-expanded=true],.nav-branch a[aria-current=page]{text-decoration:underline;text-underline-offset:3px}.nav-secondary{margin-top:40px}.nav-note{font-size:11px;line-height:20px;letter-spacing:.08em;text-transform:uppercase;color:#808080;margin:40px 0 0}.nav-chevron{display:none}.nav-branch{position:absolute;left:240px;top:100px;bottom:0;width:240px;padding:0 40px 40px;background:#fff;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}.nav-section+.nav-section{margin-top:31px}.nav-section-title{font:500 11px/20px var(--font);letter-spacing:.08em;text-transform:uppercase;background:none;border:0;padding:0;color:#000;text-align:left;display:block}.nav-section-title:disabled{cursor:default}.nav-branch .nav-back{display:none}.nav-leaf{margin:0}.nav-root a:focus-visible,.nav-root button:focus-visible,.nav-branch button:focus-visible,.nav-branch a:focus-visible{outline:2px solid #000;outline-offset:2px}.nav-section-title:focus-visible{outline:2px solid #000;outline-offset:2px}
.search-view{height:100%;padding:0 40px 40px;overflow:auto;overscroll-behavior:contain}.site-search-form{margin:0}.search-input-row{position:relative;border-bottom:1px solid #000;display:flex;align-items:center;gap:10px;min-height:32px}.search-input-row>svg{width:12px;height:12px;flex:none}.search-input-row input{width:100%;min-width:0;font:400 11px/20px var(--font);letter-spacing:.08em;color:#000;background:none;border:0;border-radius:0;padding:6px 0;outline:none;text-transform:uppercase}.search-input-row input::placeholder{color:#000;opacity:1}.search-input-row:focus-within{outline:1px solid #000;outline-offset:3px}.search-input-row input::-webkit-search-cancel-button{-webkit-appearance:none}.search-clear{font:500 11px/20px var(--font);letter-spacing:.08em;border:0;background:none;padding:6px 0;text-transform:uppercase}.search-heading{font:500 11px/20px var(--font);letter-spacing:.08em;text-transform:uppercase;margin:40px 0 0}.search-results{display:flex;flex-direction:column;align-items:flex-start}.search-results a{display:block;font:400 11px/20px var(--font);letter-spacing:.08em;text-transform:uppercase;min-height:20px;padding:0}.search-results a:hover{text-decoration:underline;text-underline-offset:3px}.search-empty{font-size:12px;color:#777;margin-top:24px}
.site-footer{padding:40px}.footer-direct{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px 25px}.footer-direct a,.footer-direct button{font:400 11px/20px var(--font);letter-spacing:.08em;text-transform:uppercase;color:#757575;background:none;border:0;padding:0;min-height:20px;text-align:left}.footer-direct a:hover,.footer-direct button:hover{text-decoration:underline;text-underline-offset:3px}.site-footer .footer-bottom{margin-top:20px;font-size:11px;line-height:20px;letter-spacing:.06em;color:#757575}.footer-bottom em{font-size:13px}.document-mobile-menu{display:none}.disclosure-content{display:flow-root}.empty-shop-page{min-height:calc(100svh - 140px);padding:120px 40px 80px}.empty-shop-page h1{font:400 14px/20px var(--font);letter-spacing:.08em;text-transform:uppercase;margin:0 0 44px}.empty-shop-page>p{font-size:14px;line-height:1.6;letter-spacing:.03em;margin:0 0 20px}.empty-shop-page .empty-status{color:#777;font-size:12px;text-transform:uppercase;letter-spacing:.05em}.empty-shop-page .empty-status em{text-transform:none;font:italic 20px/1.4 'Times New Roman',Times,serif}.empty-shop-page .text-link{display:inline-block;font-size:11px;line-height:20px;margin-top:30px;text-transform:uppercase;letter-spacing:.08em}.social-page nav{display:flex;flex-direction:column;align-items:flex-start;gap:20px}.social-page nav a{font-size:12px;text-transform:uppercase;letter-spacing:.08em}.social-page nav a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:1023px){.header-inner{padding-left:16px;padding-right:16px}.header-left,.header-right{gap:20px}.header-control svg,.account-link .account-icon{display:block;width:16px;height:16px}.header-control .control-close-icon{display:none}.header-control .nav-word{display:none}.header-control[data-active=true]>.control-close-icon{display:block}.header-control[data-active=true]>.menu-icon,.header-control[data-active=true]>.search-icon{display:none}.header-control{min-width:24px;font-size:12px}.bag-button{min-width:44px}.overlay-surface,.shop-overlay[data-wide=true] .overlay-surface,.shop-overlay[data-mode=search] .overlay-surface{width:100%;transition:none}.nav-root{width:100%;padding:0 16px 40px}.nav-root a,.nav-root button,.nav-branch nav>a,.nav-branch nav>button{font-size:14px;font-weight:500;line-height:22px;min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:7px 0;margin:0 0 14px}.nav-root .nav-primary{display:flex;flex-direction:column}.nav-secondary{margin-top:40px}.nav-chevron{display:inline;margin-left:12px;font:22px/1 Arial,sans-serif}.nav-branch{top:100px;left:0;width:100%;padding:0 16px 40px}.nav-section+.nav-section{margin-top:14px}.nav-section-title{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:14px;line-height:22px;min-height:44px;padding:7px 0}.nav-branch>.nav-back,.nav-branch nav>.nav-back{display:flex;align-items:center;justify-content:flex-start;gap:10px;background:none;border:0;min-height:44px;width:100%;padding:0 0 12px;margin:0 0 20px;font:400 12px/20px var(--font);letter-spacing:.06em;text-transform:uppercase;text-align:left}.nav-back>span{font-size:24px;line-height:1}.nav-leaf{position:absolute;inset:0;padding:0 16px 40px;overflow:auto;background:#fff}.shop-overlay[data-step] .nav-branch>.nav-back,.shop-overlay[data-step] .nav-section-title{visibility:hidden}.search-view{padding:0 16px 40px}.search-input-row input{font-size:16px;line-height:24px}.search-heading{font-size:12px;margin-top:40px}.search-results a{font-size:14px;line-height:24px;min-height:44px;padding:10px 0}.search-clear{font-size:12px;min-height:44px}.site-footer{padding:40px 16px;min-height:74svh;display:flex;flex-direction:column;justify-content:space-between}.footer-direct{flex-direction:column;gap:24px}.footer-direct a,.footer-direct button{font-size:12px;min-height:28px}.site-footer .footer-bottom{margin-top:40px;gap:14px;font-size:11px;flex-direction:column}.empty-shop-page{padding:110px 16px 70px;min-height:80svh}.document-grid>.document-nav{display:none}.document-grid{display:block}.document-mobile-menu{display:block;margin-bottom:30px;border-bottom:1px solid var(--line)}.document-mobile-menu>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;gap:20px;padding:8px 0;list-style:none;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.05em}.document-mobile-menu>summary::-webkit-details-marker{display:none}.document-mobile-menu>summary:after{content:'+';font-size:20px}.document-mobile-menu[open]>summary:after{content:'−'}.document-mobile-menu .document-nav{position:static;max-height:none;display:flex;flex-direction:column;align-items:flex-start;gap:0;border:0;margin:0;padding:14px 0 20px;font-size:12px}.document-mobile-menu .document-nav a{display:block;min-height:40px;padding:10px 0}}
@media(prefers-reduced-motion:reduce){.overlay-surface{transition:none}}
@media print{.shop-overlay,.document-mobile-menu{display:none!important}}

/* Bag hover is intentionally split: only the word is underlined, never the counter. */
.header-right .bag-button:hover,
.header-right .bag-button.header-control:hover{ text-decoration:none !important; }
.header-right .bag-button:hover .bag-word{ text-decoration:underline; text-underline-offset:3px; }
.header-right .bag-button .bag-count{ text-decoration:none !important; }
.header-right .bag-button .bag-word{ display:inline-block; position:relative; }
.header-right .bag-button:hover .bag-word{ text-decoration:none !important; }
.header-right .bag-button:hover .bag-word::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor; pointer-events:none; }

/* Reference-style drawer structure with one untouched header.
   The header never moves into the dialog or cross-fades with a clone. */
.shop-overlay{
  z-index:25;
  background:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.shop-overlay::backdrop{display:none!important;background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.site-header{z-index:30}

/* Shop 36: the dim layer covers the whole page underneath the white drawer.
   This removes the dark placeholder strip that appeared while the drawer was
   still sliding toward its final width. The solid white drawer sits above it,
   while the single real header stays above both. */
body.shop-panel-open::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:24;
  pointer-events:none;
  background:rgba(142,142,142,.72);
  -webkit-backdrop-filter:grayscale(1);
  backdrop-filter:grayscale(1);
  opacity:1;
  animation:shop-dim-in .22s ease-out both;
  transition:opacity .28s ease-out;
}
body.shop-panel-closing::after{
  animation:none;
  opacity:0;
}
@keyframes shop-dim-in{from{opacity:0}to{opacity:1}}


/* The logo keeps its real colours normally, but greys with the rest of the
   exposed page while Menu/Search is open, like the reference. */
[data-main-header] .brand-link{transition:opacity .22s ease,filter .22s ease}
body.shop-panel-open [data-main-header] .brand-link{opacity:.48;filter:grayscale(1)}
@media(max-width:1023px){
  /* The mobile drawer fills the screen, so there is no exposed page area to dim. */
  body.shop-panel-open::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  body.shop-panel-open::after{animation:none;transition:none}
}

/* Bag hover: match Menu/Search/Account underline exactly, but only under BAG. */
.header-right .bag-button:hover { text-decoration:none !important; }
.header-right .bag-button [data-bag-word] { display:inline-block; position:relative; }
.header-right .bag-button [data-bag-count] { text-decoration:none !important; }
.header-right .bag-button:hover [data-bag-word] {
  text-decoration:underline !important;
  text-underline-offset:3px;
  text-decoration-thickness:auto;
}
.header-right .bag-button [data-bag-word]::after { content:none !important; }