/* v27.11: one small theme icon, after the menu button. */
header nav .appearance-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:44px;padding:0;border:0;border-radius:0;background:transparent;color:#71518a;cursor:pointer;box-shadow:none}
.appearance-toggle span{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#fff0bc}
.appearance-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.appearance-toggle .theme-moon{display:none}
html[data-resolved-appearance="dark"] .appearance-toggle .theme-sun{display:none}
html[data-resolved-appearance="dark"] .appearance-toggle .theme-moon{display:flex;background:#d2baff;color:#382443}
.appearance-toggle:focus-visible{outline:2px solid #9065ad;outline-offset:1px;border-radius:8px}
@media(max-width:900px){header nav{gap:6px}header nav .pill.small{height:44px;box-sizing:border-box;padding-top:0;padding-bottom:0}}
/* Keep all four header controls on one row, including narrow phones. */
@media(max-width:900px){
 header{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:6px}
 header .wordmark{flex:0 1 auto;min-width:0}
 header nav{width:auto;flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:4px}
 header nav .mobile-menu-toggle{width:36px;flex:0 0 36px;height:44px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#000;appearance:none}
 header nav .mobile-menu-toggle:hover,header nav .mobile-menu-toggle:active{background:transparent;box-shadow:none}
 header nav .mobile-menu-toggle svg{width:24px;height:24px}
 html[data-resolved-appearance="dark"] header nav .mobile-menu-toggle{color:#fcf3ff}
 header nav .mobile-menu-toggle:focus-visible{outline:0;opacity:.65}
}
@media(max-width:500px){
 header{padding:12px 4%;gap:4px;min-height:72px}
 header .wordmark img{width:clamp(80px,25vw,125px);height:auto}
 header nav .pill.small{padding:0 10px;gap:6px;font-size:11px;white-space:nowrap;min-height:44px}
 header nav .appearance-toggle{width:32px;flex-basis:32px}
}

/* No surrounding decoration, including when the dialog focuses its X. */
:is(#status-dialog,#contact-dialog,#cart-dialog,#inquiry-dialog) .close,:is(#status-dialog,#contact-dialog,#cart-dialog,#inquiry-dialog) .close:hover,:is(#status-dialog,#contact-dialog,#cart-dialog,#inquiry-dialog) .close:active,:is(#status-dialog,#contact-dialog,#cart-dialog,#inquiry-dialog) .close:focus,:is(#status-dialog,#contact-dialog,#cart-dialog,#inquiry-dialog) .close:focus-visible{border:0!important;outline:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;appearance:none;color:inherit;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0}
:is(#status-dialog,#contact-dialog,#cart-dialog,#inquiry-dialog) .close:focus-visible{color:#9364b7;text-decoration:underline;text-underline-offset:4px}

#checkout-notice:empty, #pickup-help:empty{display:none}

#status-dialog.payment-confirmed {
  background: #fff4f7;
  color: #2c2533;
}
#status-dialog.payment-confirmed :is(.eyebrow,h2,p) {color: inherit}
#status-dialog.payment-confirmed .pill {background: #2c2533; color: #fff}

html[data-resolved-appearance="light"] #status-dialog.payment-confirmed {
  background: #fff;
}