/* Independent rendering of the official menu content. No Ohio runtime dependency. */
:root{--demo33-header-height:80px;--demo33-subheader-height:38px;--demo33-adminbar-height:0px;--demo33-header-visible-bottom:0px}
.header-inner{position:relative;width:100%;max-width:1460px;margin-inline:auto}
.topbar{padding-inline:0;font-size:13.328px}
.topbar-left,.topbar-right{gap:8px}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;max-width:1460px;padding-inline:12px;margin-inline:auto}
.site-brand .d33-logo-dark{display:none}
.site-header .site-brand .d33-logo-dark{display:none}
html[data-theme=dark] .site-brand .d33-logo-light{display:none}
html[data-theme=dark] .site-brand .d33-logo-dark{display:block}
.d33-primary-menu,.d33-mobile-menu,.d33-submenu{list-style:none;padding:0;margin:0}
.d33-primary-menu{display:flex;align-items:stretch;min-height:44px;gap:0;font-size:.96em;font-weight:500;line-height:1.6}
.d33-nav-item{position:relative}
.d33-nav-link{display:flex;align-items:center;gap:8px;color:inherit;font-weight:500;line-height:1.3;border-radius:8px;transition:background-color .3s ease,color .3s ease,opacity .3s ease}
.d33-primary-menu>.d33-nav-item>.d33-nav-link{height:44px;padding:0 12px;font-size:inherit;font-weight:inherit;line-height:inherit;gap:4.8px;border-radius:0;white-space:nowrap}
.d33-nav-text{display:flex;flex-direction:column}
.d33-primary-menu .d33-nav-text{line-height:1.3}
.d33-nav-text small{font-size:12px;line-height:1.5;font-weight:400;color:var(--muted)}
.d33-nav-indicator{display:inline-flex;align-items:center;justify-content:center;width:10px;height:14px;flex:none;opacity:.5}
.d33-nav-indicator>span{width:5px;height:5px;border-bottom:1.4px solid currentColor;border-right:1.4px solid currentColor;transform:rotate(45deg);transition:transform .3s ease}
.d33-is-open>.d33-nav-link>.d33-nav-indicator>span{transform:rotate(225deg)}
.d33-submenu{position:absolute;z-index:50;top:44px;left:0;min-width:250px;background:var(--paper);color:var(--ink);padding:8px;border-radius:11px;box-shadow:0 20px 32px -8px #00000026,0 0 1px #0000000d;visibility:hidden;opacity:0;pointer-events:none;transform:perspective(400px) rotateX(-10deg);transform-origin:center -50px;transition:opacity .3s ease,transform .3s ease,visibility .3s ease}
.d33-is-open>.d33-submenu{visibility:visible;opacity:1;pointer-events:auto;transform:none}
.d33-submenu .d33-nav-link{min-height:38px;padding:8px 16px;font-size:14px;white-space:normal}
.d33-primary-menu .d33-submenu{display:flex;flex-direction:column;gap:2px;font-size:.98em;transition:opacity .35s cubic-bezier(.645,.045,.355,1),transform .35s cubic-bezier(.645,.045,.355,1),visibility .35s cubic-bezier(.645,.045,.355,1)}
.d33-primary-menu .d33-submenu>.d33-nav-item{font-weight:400;line-height:1}
.d33-primary-menu .d33-submenu .d33-nav-link{padding:8px 12px;font-size:inherit;font-weight:inherit;line-height:inherit;gap:0 .5em}
.d33-submenu .d33-nav-link:hover,.d33-submenu .d33-nav-link:focus-visible{background:var(--soft)}
.d33-submenu .d33-submenu{left:calc(100% + 4px);top:-4px;min-width:250px}
.d33-submenu .d33-nav-indicator{margin-left:auto}
.d33-submenu .d33-nav-indicator>span{transform:rotate(-45deg)}
.d33-submenu.d33-opens-left{left:auto;right:calc(100% + 4px)}
.d33-primary-menu>.d33-nav-wide{position:static}
.d33-primary-menu>.d33-nav-wide>.d33-mega-menu{top:44px;left:3vh;right:auto;width:97vw;min-width:0;display:flex;flex-direction:row;align-items:stretch;gap:12px;padding:20px;border-radius:16px;max-height:calc(100vh - 130px);overflow:auto;overscroll-behavior:contain}
.d33-primary-menu .d33-mega-menu>.d33-nav-item,.d33-primary-menu .d33-mega-menu>.d33-nav-image{width:16.6666666667%;min-width:0;display:flex;flex-direction:column;gap:.5em}
.d33-primary-menu .d33-mega-menu>.d33-nav-item>.d33-nav-link{font-size:.9em;font-weight:400;color:inherit;opacity:.75;min-height:unset;padding:0 12px}
.d33-mega-menu>.d33-nav-item>.d33-nav-link:hover{background:transparent;color:var(--ink)}
.d33-mega-menu>.d33-nav-item>.d33-nav-link>.d33-nav-indicator{display:none}
.d33-mega-menu>.d33-nav-item>.d33-submenu{position:static;min-width:0;padding:0;box-shadow:none;border-radius:0;background:transparent;transform:none;visibility:inherit;opacity:1;pointer-events:inherit}
.d33-primary-menu .d33-mega-menu>.d33-nav-item>.d33-submenu .d33-nav-link{padding:8px 12px;min-height:38px}
.d33-nav-image{display:flex;align-items:stretch;min-width:0}
.d33-nav-image img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.d33-nav-icon{width:36px;height:36px;flex:none;object-fit:cover;border-radius:8px}
.d33-nav-badge{display:inline-flex;align-items:center;flex:none;padding:2px 6px;height:16px;border-radius:5px;color:#fff;background:#a578b5;font-size:8.5px;font-weight:650;line-height:1;white-space:nowrap}
.d33-nav-badge.updated{background:#29a366;color:#fff}
.d33-nav-badge.version{background:var(--ink);color:var(--paper)}
.d33-primary-menu .d33-nav-badge{padding:0 .65em;height:20px;font-size:.62em;font-weight:600;border-radius:.75em}
.d33-primary-menu>.d33-nav-item:last-child:not(.d33-nav-icon-menu)>.d33-submenu:not(.d33-mega-menu){left:auto;right:0;min-width:315px}
/* Resources' icon rows retain the source's two-line text metrics. */
.d33-primary-menu>.d33-nav-icon-menu{color:color-mix(in srgb,#111013 98%,white)}
.d33-primary-menu>.d33-nav-icon-menu>.d33-submenu{left:0;right:auto;min-width:240px;border-radius:11.2px;color:inherit}
.d33-primary-menu>.d33-nav-icon-menu>.d33-submenu .d33-nav-link{padding:8px;border-radius:8.8px}
.d33-primary-menu>.d33-nav-icon-menu>.d33-submenu .d33-nav-text small{font-size:.88em;line-height:1.3;color:inherit;opacity:.65}
.d33-primary-menu>.d33-nav-icon-menu>.d33-submenu .d33-nav-badge.version{background:color-mix(in srgb,#111013 98%,white);color:#fff;line-height:calc(1em / .62)}
.d33-primary-menu>.d33-nav-icon-menu>.d33-submenu .d33-nav-link:hover,.d33-primary-menu>.d33-nav-icon-menu>.d33-submenu .d33-nav-link:focus-visible{background:color-mix(in srgb,color-mix(in srgb,#111013 50%,white) 8%,transparent)}
html[data-theme=dark] .d33-primary-menu>.d33-nav-icon-menu{color:var(--ink)}
html[data-theme=dark] .d33-primary-menu>.d33-nav-icon-menu>.d33-submenu .d33-nav-badge.version{background:var(--ink);color:var(--paper)}
html[data-theme=dark] .d33-primary-menu>.d33-nav-icon-menu>.d33-submenu .d33-nav-link:hover,html[data-theme=dark] .d33-primary-menu>.d33-nav-icon-menu>.d33-submenu .d33-nav-link:focus-visible{background:color-mix(in srgb,white 8%,transparent)}
.d33-primary-menu:has(>.d33-is-open)>.d33-nav-item:not(.d33-is-open){opacity:.5}
.d33-header-spacer{display:none}
.site-header.d33-header-sticky{position:fixed;left:0;right:0;top:var(--d33-admin-offset,0px);height:9vh;background:var(--paper);box-shadow:0 1px 0 var(--line);animation:d33-header-arrive .25s ease-out}
@keyframes d33-header-arrive{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.d33-mobile-search{position:absolute;top:30px;right:80px}
.mobile-panel.panel{width:calc(100vw - 72px);left:0;right:auto;transform:translateX(-100%);box-shadow:none}
.mobile-panel.panel.is-open{transform:translateX(0)}
.mobile-panel .panel-inner{padding:100px 12px 24px}
.d33-mobile-menu .d33-nav-link{min-height:40px;padding:8px;font-size:15.68px;font-weight:500;line-height:1.5;border-radius:0}
.d33-mobile-menu>.d33-nav-item{border:0}
.d33-mobile-copyright{font-size:14.896px;font-weight:400;line-height:1.6;margin-top:12px}
.d33-mobile-copyright p{margin:0 0 12px}
.d33-mobile-copyright a:hover{text-decoration:underline}
.d33-mobile-menu .d33-submenu{position:static;left:auto;right:auto;min-width:0;max-height:0;overflow:hidden;padding:0;margin:0;visibility:hidden;opacity:1;box-shadow:none;border-radius:0;transform:none;pointer-events:none;transition:max-height .35s ease,visibility .35s ease}
.d33-mobile-menu .d33-is-open>.d33-submenu{visibility:visible;max-height:var(--d33-submenu-height,2000px);pointer-events:auto}
.d33-mobile-menu .d33-submenu .d33-nav-link{font-size:15px;padding:11px 12px;min-height:44px}
.d33-mobile-menu .d33-submenu .d33-submenu{padding-left:16px}
.d33-mobile-menu .d33-nav-indicator{margin-left:auto;width:25px;height:25px;opacity:.6}
.d33-mobile-menu .d33-nav-indicator>span{position:relative;width:12px;height:2px;background:currentColor;border:0;transform:none}
.d33-mobile-menu .d33-nav-indicator>span::after{content:"";position:absolute;inset:0;background:currentColor;transform:rotate(90deg);transition:transform .3s ease}
.d33-mobile-menu .d33-is-open>.d33-nav-link>.d33-nav-indicator>span{transform:rotate(135deg)}
.d33-mobile-menu .d33-nav-image{display:none}
.d33-mobile-menu .d33-nav-text small{display:none}
.d33-mobile-menu .d33-nav-icon{display:none}
.d33-mobile-menu .d33-nav-badge{margin-left:2px;font-size:9px}
.d33-nav-link:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(min-width:769px){
 .site-header{height:80px}
 .d33-desktop-nav{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
 .site-header .mobile-menu-toggle{display:none}
 .site-header .site-brand{order:0;flex:0 0 110px}
 .site-header .site-brand img{width:auto;height:42px;max-height:42px;display:block}
 .site-header .header-tools{order:0;gap:0}
 .site-header .icon-button{width:48px;height:48px;border-radius:50%}
 .site-header .cart-toggle{width:56px;height:56px;background:#9690a20d}
 .site-header .account-link,.site-header .wishlist-link{display:inline-grid}
 .site-header .cart-total-link{display:inline-flex;font-size:13.328px;font-weight:500;margin:0 8px}
 .site-header .search-toggle{display:inline-grid}
}
@media(min-width:769px) and (max-width:1100px){
 .header-inner{gap:12px}
 .d33-primary-menu>.d33-nav-item>.d33-nav-link{padding:0 7px;font-size:13px}
 .site-header .site-brand{flex-basis:84px}
 .site-header .header-tools{gap:11px}
 .site-header .cart-total-link{font-size:11px}
}
@media(min-width:769px) and (max-width:1180px){.d33-primary-menu>.d33-nav-wide>.d33-mega-menu{width:calc(100vw - 32px);margin-left:-8px}}
@media(max-width:768px){
 :root{--demo33-header-height:12vh;--demo33-subheader-height:38px}
 .d33-desktop-nav{display:none}
 .site-header .mobile-menu-toggle{display:inline-grid;order:0}
 .site-header{height:12vh;min-height:88px}
 .demo33-home .site-header{top:38px}
 .site-header .site-brand{order:1;flex:0 0 82px;min-width:0}
 .site-header .site-brand img{display:block;width:100%;height:auto;max-width:82px;max-height:46px}
 .site-header .header-tools{order:2;gap:0;flex:1 1 auto;min-width:0;margin-left:auto;justify-content:flex-end}
 .site-header .header-tools>.cart-button{flex:none}
 .site-header .header-tools>.cart-button>.cart-button-total{display:inline-flex;align-items:center;justify-content:center;min-width:0;width:auto;max-width:64px;margin:0 8px;font-size:13.328px;overflow:hidden;text-overflow:ellipsis}
 .site-header .header-tools>.cart-button>.cart-button-total a{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .site-header .header-tools>.cart-button>.cart-button-total .amount{font-size:.88em;font-weight:600}
 .site-header .account-link,.site-header .wishlist-link{display:inline-grid;flex:1 1 56px;width:56px;min-width:44px;max-width:56px;height:56px}
 .site-header .header-tools>.account-link>svg,.site-header .header-tools>.wishlist-link>svg,
 .site-header .header-tools>.cart-button>.holder>.icon-button.cart svg{width:24px;height:24px}
 .site-header .cart-total-link{display:inline-flex;font-size:11px}
 .site-header .cart-toggle{width:44px;height:44px;background:transparent}
 .site-header .header-tools>.cart-button>.holder>.icon-button.cart{width:56px;min-width:56px;height:56px;padding:0}
 .site-header .search-toggle{display:none}
 .site-header .mobile-menu-toggle{width:56px;height:56px;margin-inline-end:8px;border-radius:50%;background:#9690a20d;flex:none}
 .topbar{height:38px;font-size:13.328px}
 .topbar-left>span:first-child,.topbar-left>.topbar-divider:nth-child(2),.topbar-right>span:first-child,.topbar-right>.topbar-divider{display:none}
 .topbar-left>a:last-child{display:block}
 .topbar-left>.topbar-divider:nth-child(4){display:block}
 .topbar-right{display:flex;font-size:13.328px}
 .topbar-left{overflow:visible}
 .header-inner{gap:0;padding-inline:12px}
 .mobile-panel .panel-close{left:12px;right:auto;top:24px;width:56px;height:56px;display:grid;place-items:center}
 .mobile-panel .panel-close svg{width:18px;height:18px}
 .d33-mobile-search{left:auto;right:12px;top:24px;width:56px;height:56px}
}
@media(max-width:374px){
 .site-header .mobile-menu-toggle{width:44px;height:44px}
 .site-header .site-brand{flex-basis:72px}
 .site-header .site-brand img{max-width:72px}
 .site-header .account-link,.site-header .wishlist-link{flex:0 0 44px;width:44px;min-width:44px;max-width:44px;height:44px}
 .site-header .header-tools>.cart-button>.holder>.icon-button.cart{width:44px;min-width:44px;height:44px}
}
@media(max-width:360px){
 .header-inner{padding-inline:8px}
 .site-header .mobile-menu-toggle{margin-inline-end:4px}
 .site-header .site-brand{flex-basis:62px}
 .site-header .site-brand img{max-width:62px}
}
@media(max-width:390px){
 .site-header .header-tools>.cart-button>.cart-button-total{max-width:clamp(32px,calc(100vw - 345px),64px);margin-inline:7px}
}
@media(prefers-reduced-motion:reduce){.site-header.d33-header-sticky{animation:none}.d33-submenu,.d33-nav-link,.d33-nav-indicator>span{transition:none}}

/* The header cart glyph follows the current surface immediately without
 * interpolating inherited ink. */
body.demo33-demo20-commerce .site-header .header-tools>.cart-button>.holder>.icon-button.cart{color:var(--ink)}
body.demo33-demo20-commerce .site-header .header-tools>.cart-button>.holder>.icon-button.cart :is(.icon,svg,path){
 color:inherit;
 transition-property:transform,opacity;
}
body.demo33-demo20-commerce .site-header .header-tools>.cart-button>.holder>.icon-button.cart :is(svg,path){fill:currentColor}
/* Switch this dark header control's background in the same frame as its ink.
 * Pointer motion and keyboard feedback are owned by their existing controls. */
html[data-theme=dark] body.demo33-demo20-commerce .site-header .header-tools>.cart-button>.holder>.icon-button.cart{transition:none}

/* The transparent home header sits on the fixed light hero photograph.
 * Keep only its exposed controls in light-surface ink; panels and the sticky
 * header continue to use the selected appearance and Demo20 cart tokens. */
html[data-theme=dark] .demo33-home .site-header:not(.d33-header-sticky){
 color:#171619;
 background:rgb(245 243 239 / 82%);
 -webkit-backdrop-filter:blur(8px);
 backdrop-filter:blur(8px);
}
html[data-theme=dark] .demo33-home .site-header:not(.d33-header-sticky) .site-brand .d33-logo-light{display:block}
html[data-theme=dark] .demo33-home .site-header:not(.d33-header-sticky) .site-brand .d33-logo-dark{display:none}
html[data-theme=dark] .demo33-home .site-header:not(.d33-header-sticky) .d33-primary-menu>.d33-nav-item>.d33-nav-link{color:#171619}
html[data-theme=dark] .demo33-home .site-header:not(.d33-header-sticky) :is(.mobile-menu-toggle,.header-tools>.icon-button,.header-tools>.cart-button>.holder>.icon-button.cart){
 color:#171619;
 --demo33-button-neutral:rgb(136 135 137);
 --demo33-button-fill:rgb(136 135 137 / 8%);
 --demo33-button-focus:rgb(136 135 137 / 15%);
}
html[data-theme=dark] .demo33-home .site-header:not(.d33-header-sticky) .header-tools>.cart-button>.holder>.icon-button.cart{background:rgb(136 135 137 / 8%)}
html[data-theme=dark] .demo33-home .site-header:not(.d33-header-sticky) .header-tools>.cart-button>.holder>.icon-button.cart:hover{background:rgb(136 135 137 / 12%)}
html[data-theme=dark] .demo33-home .site-header:not(.d33-header-sticky) .header-tools>.cart-button>.holder>.badge.cart-count{background:#171619;color:#fff}
html[data-theme=dark] .demo33-home .site-header:not(.d33-header-sticky) :is(.d33-primary-menu>.d33-nav-item>.d33-nav-link,.mobile-menu-toggle,.header-tools>.icon-button,.header-tools>.cart-button>.holder>.icon-button.cart,.cart-button-total a):focus-visible{outline-color:#171619}

/* Official search-popup: 65vh holder, 56px field, 14px close glyph.
   Keep the native search form and the existing panel focus/close lifecycle. */
.site-shell > .search-panel {
 left:0;right:0;width:100%;height:100%;background:rgb(17 16 19 / .99);color:#fff;
}
.site-shell > .search-panel .panel-inner {
 width:min(65vh,100%);margin-inline:auto;padding:var(--demo33-header-height) 12px 0;
 display:block;box-sizing:border-box;
}
.site-shell > .search-panel form {
 position:relative;width:100%;height:56px;margin:0;border:0;border-radius:8px;
 background:rgb(136 135 137 / .1);display:flex;align-items:center;
}
.site-shell > .search-panel input {
 width:100%;min-width:0;height:56px;padding:0 56px 0 16px;border:0;border-radius:8px;
 background:transparent;color:#fff;font:400 .96rem/normal var(--font-body);
 /* Paint above native history/autofill backgrounds, including preview states. */
 color-scheme:dark;caret-color:#fff;-webkit-text-fill-color:#fff;
 box-shadow:inset 0 0 0 1000px #1d1c1f;
}
.site-shell > .search-panel input:is(:autofill,:-webkit-autofill){
 -webkit-text-fill-color:#fff;box-shadow:inset 0 0 0 1000px #1d1c1f;
}
.site-shell > .search-panel input::-webkit-search-cancel-button{
 -webkit-appearance:none;width:24px;height:24px;margin-left:8px;cursor:pointer;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 3 10 10M13 3 3 13' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/14px 14px no-repeat;
}
.site-shell > .search-panel input::placeholder{color:#bbbbbd;-webkit-text-fill-color:#bbbbbd;opacity:1}
.site-shell > .search-panel input:focus-visible{outline:2px solid #b7a0cd;outline-offset:2px}
.site-shell > .search-panel form button {
 position:absolute;right:0;top:0;width:56px;min-width:56px;height:56px;padding:0;
 display:grid;place-items:center;color:#fff;border:0;background:transparent;border-radius:8px;
}
.site-shell > .search-panel form button svg{width:24px;height:24px}
/* The official text submit loops its icon once and changes to brand ink.
   Keep that motion and the cursor outline without its fill, shadow or ripple. */
.site-shell > .search-panel .d33-search-submit{
 opacity:1;box-shadow:none;
 transition:color var(--demo33-button-duration) var(--demo33-button-ease);
}
.site-shell > .search-panel .d33-search-submit:is(:hover,:focus,:active){
 color:var(--demo33-button-hover);background:transparent;box-shadow:none;opacity:1;
}
.site-shell > .search-panel .d33-search-submit::before,
.site-shell > .search-panel .d33-search-submit::after{content:none;animation:none}
.site-shell > .search-panel .d33-search-submit:focus-visible{outline:2px solid #b7a0cd;outline-offset:-5px}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .site-shell > .search-panel .d33-search-submit:hover svg{
  animation:d33-button-arrow-loop var(--demo33-button-duration) ease-out 1;
 }
}
@media(prefers-reduced-motion:reduce){
 .site-shell > .search-panel .d33-search-submit{transition:none}
 .site-shell > .search-panel .d33-search-submit svg{animation:none}
}
.site-shell > .search-panel .panel-close {
 position:absolute;left:1.2rem;right:auto;top:calc((var(--demo33-header-height) - 56px)/2);
 display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:50%;
 color:#fff;background:transparent;font-size:initial;
}
.site-shell > .search-panel .panel-close svg{width:14px;height:14px;fill:currentColor;stroke:none}
.site-shell > .search-panel .panel-close:focus-visible{outline:2px solid #b7a0cd;outline-offset:2px}
@media(max-width:768px){.site-shell > .search-panel .panel-close{left:12px}}