/* Zonemory Model 86 logo (REQ-V2-0122): header, footer and login branding.
   One outlined SVG image (assets/images/zonemory-logo.svg, viewBox 300x150, transparent). Each placement sets only
   the width; height follows the 2:1 ratio, so the artwork is never stretched or clipped. */
.zm-logo{display:block;max-width:100%;height:auto;aspect-ratio:2/1;object-fit:contain;border:0;border-radius:0;background:none;box-shadow:none}

/* Header (REQ-V2-0123): the full 2:1 logo sets the .brand width (--zm-logo-w) and the bar is the logo height + 8px
   (--header, which also drives the >=1024px sticky media offsets). Desktop 220x110 from 1280px, easing from the former
   212px .brand width at 1251px; 1101-1250px keeps the former 185px .brand width so the desktop nav does not collide.
   Up to 1100px: 170x85 at 319px rising to 190x95 at 390px and above. */
html .zonemory-app{--zm-logo-w:clamp(212px,calc(212px + (100vw - 1251px) * 8 / 29),220px);--header:calc(var(--zm-logo-w) / 2 + 8px)}
@media(max-width:1250px){html .zonemory-app{--zm-logo-w:185px}}
@media(max-width:1100px){html .zonemory-app{--zm-logo-w:clamp(170px,calc(170px + (100vw - 319px) * 20 / 71),190px)}}
html .zonemory-app .brand{display:flex;align-items:center;width:var(--zm-logo-w)}
.zonemory-app .brand .zm-logo{width:100%;max-width:100%;height:auto;margin:0}
/* Mobile menu, search and cart: 44x44 targets on the logo's row. Below 761px the row loses its fixed gaps (space-between
   still separates the items) and its side inset shrinks from 16px at 390px to 1px at 319px so 170px + 3 x 44px fits. */
@media(max-width:1100px){
html body #site-header :is(.header-actions .icon-button,.zonemory-cart-link,.mobile-menu){width:44px;height:44px;flex:0 0 44px}
html body #site-header .mobile-menu{align-items:center}
html .zonemory-app .brand{flex-shrink:1;min-width:0}
}
@media(max-width:760px){
html .zonemory-app{--zm-hpad:clamp(1px,calc(1px + (100vw - 319px) * 15 / 71),16px)}
.zonemory-app #site-header :is(.header-inner.shell,.shell:has(>.header-inner)){width:calc(100% - 2 * var(--zm-hpad))}
.zonemory-app #site-header .header-inner,.zonemory-app #site-header .header-actions{gap:0}
}
/* REQ-V2-0126, desktop only: every header row item after the logo (nav, currency, account, cart, search) is lowered as
   one level cluster so its text baseline meets the DESIGNED TO DELIGHT tagline. The logo is centred with 4px above it,
   so the tagline baseline sits --zm-tagline-y of the logo height down; nav text baseline is ~5px below the row centre.
   A margin-top of 2x the drop keeps align-items:center and moves the box by the drop only: no new positioning context
   for dropdowns, and the row height (--header), sticky offset and hit targets are unchanged. */
@media(min-width:1101px){
html .zonemory-app{--zm-tagline-y:.8;--zm-nav-drop:calc(var(--zm-logo-w) / 2 * (var(--zm-tagline-y) - .5) - 5px)}
.zonemory-app #site-header .header-inner>:not(.brand){margin-top:calc(2 * var(--zm-nav-drop))}
}

/* Footer: within the former 250px / 200px logo widths. */
.zonemory-app .footer-brand>a{display:inline-flex;max-width:100%;margin-bottom:22px}
.zonemory-app .footer-brand .zm-logo{width:250px;max-width:100%;height:auto;margin:0}
@media(max-width:760px){.zonemory-app .footer-brand>a{margin-bottom:16px}.zonemory-app .footer-brand .zm-logo{width:200px}}

/* Login screen: the logo replaces the WordPress mark. */
body.login{background:#fffdfa}
.login h1{display:none}
.login .zm-login-brand{display:flex;justify-content:center;margin:0 auto 24px;text-decoration:none;box-shadow:none}
.login .zm-login-brand:focus{outline:2px solid #2f3b4e;outline-offset:4px;box-shadow:none}
.login .zm-logo--login{width:280px;max-width:100%;height:auto}
/* REQ-V2-0120: core #login is width:320px, 1px wider than a 319px viewport; cap it so no horizontal scroll appears. */
.login #login{max-width:100%}

/* Sticky header sits below the administrator bar for logged-in users only (REQ-V2-0117); signed-out top:0 is untouched.
   html body raises specificity above zonemory-site.css/zonemory-poster.css .zonemory-app #site-header{top:0}. */
html body.admin-bar #site-header{top:32px}
@media screen and (max-width:782px){html body.admin-bar #site-header{top:46px}}
/* REQ-V2-0118: at <=600px this site hides #wpadminbar (display:none), so drop the offset to avoid a blank 46px gap. */
@media screen and (max-width:600px){html body.admin-bar #site-header{top:0}}
/* REQ-V2-0124: on logged-in desktop the sticky header bottom (32px bar + --header + 1px border) exceeds the existing
   html scroll-padding-top:112px, so Skip to content left ~38.667px of #main covered. The additive scroll-margin affects only
   anchor/focus scrolling (39px at 1280px); scroll-padding and normal layout are untouched. */
@media screen and (min-width:1101px){html body.admin-bar #main{scroll-margin-top:max(0px,calc(var(--header,118px) + 33px - 112px))}}

/* REQ-V2-0126: the Buy 2 discount label stays on one line in Cart totals: the label cell on wide tables and the
   data-title label of the responsive (stacked) row. The label/amount columns and the amount itself are untouched. */
.cart_totals tr.fee:has(td[data-title^="Buy 2"]) th,.cart_totals tr.fee td[data-title^="Buy 2"]::before{white-space:nowrap}