/* Scoped controls deliberately avoid the legacy top-actions/download span rules. */
.site-header.customer-ordering-header {
    height: 76px; gap: 18px; padding-inline: max(20px, calc((100vw - 1200px) / 2));
    background: #fff; border-bottom: 1px solid #e8eee9; z-index: 1200;
}
.customer-ordering-header .brand { flex-shrink: 0; white-space: nowrap; }
.web-header-place {
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 7px 11px; border-radius: 20px; color: #176347; background: #eef7f1; font-size: 12px; font-weight: 700;
}
.web-header-links { display: flex; align-items: center; gap: 22px; margin-left: auto; font-size: 13px; font-weight: 750; white-space: nowrap; }
.web-header-links a:hover { color: #bc4019; }
.web-header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.web-header-actions svg { display: block; width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.web-header-cart {
    position: relative; width: 46px; height: 46px; display: grid; place-items: center;
    border: 1px solid #dce8e0; border-radius: 14px; background: #f4f8f5; color: #175b40;
}
.web-header-cart b {
    position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 4px;
    display: grid; place-items: center; border: 2px solid #fff; border-radius: 20px;
    color: #fff; background: #ba3c17; font-size: 10px; font-weight: 800; line-height: 1;
}
.web-header-download {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 14px;
    border: 1px solid #f4b99d; border-radius: 14px; color: #9d3412; background: #fff2e9; font-size: 13px; font-weight: 800; white-space: nowrap;
}
.web-header-download svg { width: 19px; height: 19px; }
.web-header-download span { display: inline; }
.web-header-download:hover { background: #ffe5d5; }
.web-header-account { position: relative; border: 0; border-radius: 14px; background: transparent; flex: none; }
.web-header-account > summary {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 12px;
    border: 1px solid #dce8e0; border-radius: 14px; color: #175b40; background: #fff; font-size: 13px; font-weight: 750;
    cursor: pointer; list-style: none;
}
.web-header-account > summary::-webkit-details-marker { display: none; }
.web-header-account[open] > summary { background: #edf7f0; border-color: #88b29a; }
.web-header-account:not([open]) > .web-header-menu { display: none; }
.web-header-menu {
    position: absolute; right: 0; top: calc(100% + 12px); width: min(280px, calc(100vw - 24px));
    display: grid; gap: 4px; padding: 10px; border: 1px solid #dce8e0; border-radius: 18px;
    color: #1c3528; background: #fff; box-shadow: 0 12px 35px rgba(20, 50, 35, .16); z-index: 1;
}
.web-header-menu a, .web-header-menu button {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 10px 12px;
    border: 0; border-radius: 10px; background: transparent; color: #1c3528; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer;
}
.web-header-menu a:hover, .web-header-menu button:hover { background: #f0f7f2; }
.web-header-menu a.web-header-signin { background: #edf7f0; color: #175b40; }
.web-header-menu b { color: #a43a15; font-size: 10px; white-space: nowrap; }
.web-header-menu form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid #e7eee9; }
.web-header-menu-title { padding: 8px 12px; color: #63796c; font-size: 11px; }
.web-header-identity { display: grid; gap: 3px; padding: 8px 12px 12px; margin-bottom: 2px; border-bottom: 1px solid #e7eee9; }
.web-header-identity small { color: #63796c; font-size: 10px; }
.web-header-identity strong { font-size: 13px; overflow-wrap: anywhere; }
.customer-ordering-header a:focus-visible, .web-header-account summary:focus-visible, .web-header-menu button:focus-visible { outline: 3px solid #2b7954; outline-offset: 3px; }
@media (max-width: 1100px) {
    .web-header-links { display: none; }
    .web-header-place { max-width: 220px; }
}
@media (max-width: 600px) {
    .site-header.customer-ordering-header { height: 66px; gap: 8px; padding-inline: 12px; }
    .site-header.customer-ordering-header .brand { gap: 7px; font-size: 15px; }
    .site-header.customer-ordering-header .brand-mark { width: 32px; height: 32px; border-radius: 11px; }
    .web-header-place { display: none; }
    .web-header-actions { gap: 8px; }
    .web-header-cart { width: 44px; height: 44px; border-radius: 13px; }
    .web-header-download { min-height: 44px; padding-inline: 10px; gap: 5px; border-radius: 13px; font-size: 12px; }
    .web-header-download svg { width: 17px; height: 17px; }
    .web-header-account > summary { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 13px; }
    .web-header-account > summary > span { display: none; }
}
@media (max-width: 360px) {
    .site-header.customer-ordering-header { padding-inline: 10px; gap: 6px; }
    .site-header.customer-ordering-header .brand { gap: 5px; font-size: 14px; }
    .site-header.customer-ordering-header .brand-mark { width: 28px; height: 28px; }
    .web-header-actions { gap: 6px; }
    .web-header-download { padding-inline: 7px; font-size: 11px; gap: 4px; }
}