.site-header .top-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.site-header .top-bar>#menu-toggle{justify-self:start}.site-header .top-bar>.brand{margin:0;justify-self:center}
.site-header .top-actions{justify-self:end;gap:12px}.osaka-account{position:relative}
.top-actions #account-button{gap:9px;padding:7px 9px;text-align:left;white-space:nowrap}
.account-heading{display:grid;gap:3px;line-height:1.2}.account-heading small{font-weight:400;font-size:11px}
.account-heading strong{font-size:13px;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.account-menu{position:absolute;top:100%;right:0;width:280px;max-width:calc(100vw - 32px);padding:22px;background:#fff;border:1px solid #eee;border-radius:16px;box-shadow:0 9px 30px #0002;color:#222;z-index:45}
.account-menu[hidden],.account-guest[hidden],.account-member[hidden]{display:none!important}
.account-welcome{font-size:15px;line-height:1.5;margin:0 0 16px;overflow-wrap:anywhere}
.account-menu button{width:100%;min-height:44px;justify-content:flex-start}
.top-actions .account-menu .account-primary{justify-content:center;background:#e41b2a;color:#fff;border-radius:24px;font-size:16px}
.top-actions .account-register{justify-content:center;font-weight:400}.account-member{display:grid;gap:4px}
.account-menu-error:empty{display:none}.account-menu-error{font-size:13px;line-height:1.5;color:#a40012}
#account-dialog{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:34px 38px 24px;border:0;border-radius:16px;box-sizing:border-box;background:#fff;color:#20242a;overflow:auto}
#account-dialog::backdrop{background:#0007;backdrop-filter:blur(2px)}
#account-dialog .account-close{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;background:transparent;font-size:29px;line-height:1;color:#333;border-radius:5px}
.account-logo{display:block;height:auto;margin:0 auto 18px;width:150px}
#account-dialog h2{font-size:25px;line-height:1.25;text-align:center;margin:0 0 24px}
.account-form{display:flex;flex-direction:column;gap:10px}
.account-form label{font-size:14px;font-weight:600;margin-top:4px}
.account-form input,.account-form select{width:100%;min-height:48px;box-sizing:border-box;border:1px solid #cdd0d4;border-radius:7px;padding:11px 12px;font-size:16px;background:#fff;color:#222;outline-offset:3px}
.account-form input:focus-visible,.account-form select:focus-visible{outline:2px solid #e41b2a;border-color:transparent}
#account-dialog button{cursor:pointer;font:inherit}#account-dialog button:disabled{cursor:wait;opacity:.65}
#account-dialog .account-primary{background:#e41b2a;color:white;border:0;border-radius:7px;min-height:49px;font-size:17px;font-weight:700;margin-top:10px;padding:12px}
#account-dialog .account-text{align-self:flex-start;background:none;border:0;padding:4px 0;color:#555;text-decoration:underline;font-size:13px}
.account-form>p{line-height:1.5;margin:0 0 5px;font-size:14px}
.account-switch{margin:12px 0 0!important;text-align:center}.account-switch button{border:0;background:none;color:#bf1724;text-decoration:underline;padding:5px}
.account-form .account-hint{color:#60666e;font-size:12px;margin:0}
.account-form .account-feedback{font-size:14px;margin:8px 0 0;color:#9b1722;overflow-wrap:anywhere}
.account-feedback:empty{display:none}.account-privacy{font-size:11px;line-height:1.5;color:#777;text-align:center;margin:24px 0 0}
.account-email{padding:0 0 12px;color:#555;overflow-wrap:anywhere}
@media(max-width:700px){.account-heading{display:none}.top-actions #account-button{min-width:40px;padding:8px}.site-header .top-actions{gap:2px}.account-menu{right:-44px}.site-header .top-bar .brand img{width:150px}}
@media(max-width:360px){.site-header .top-bar{padding-left:10px;padding-right:10px;gap:4px}.site-header .top-bar .brand img{width:110px}.site-header #menu-toggle span{display:none}.site-header #menu-toggle{min-width:40px;padding:8px}.top-actions .top-cart{min-width:40px;padding:8px}.top-actions #account-button{padding:6px;min-width:36px}}
@media(max-width:500px){#account-dialog{padding:30px 22px 22px}#account-dialog h2{font-size:23px}.account-logo{width:135px}}
@media(prefers-reduced-motion:reduce){#account-dialog{scroll-behavior:auto}}

.account-location{display:grid;grid-template-columns:1fr 1fr;gap:14px}.account-location>div{display:flex;flex-direction:column;gap:10px;min-width:0}.account-location select{min-width:0}.account-extended .account-logo{width:115px;margin-bottom:12px}#account-dialog.account-extended{padding-top:26px}#account-dialog.account-extended h2{font-size:23px;margin-bottom:18px}.account-extended .account-privacy{margin-top:18px}@media(max-width:400px){.account-location{grid-template-columns:1fr;gap:10px}}

.account-new-link{display:block;width:100%;padding:12px 16px;margin:0 0 12px;border:1px solid #e6192a;border-radius:7px;background:#fff;color:#c60c20;font:inherit;font-weight:600;cursor:pointer}.account-new-link[hidden]{display:none}.account-new-link:hover{background:#fff3f4}.account-new-link:focus-visible{outline:2px solid #e6192a;outline-offset:3px}footer .account-country-credit{font-size:11px;font-weight:400;color:inherit;text-decoration:underline}

#account-dialog.account-orders-dialog{width:min(680px,calc(100vw - 32px))}.account-orders{min-width:0}.account-orders>[role=status]{font-size:14px;line-height:1.6;margin:0 0 16px}.account-order-list{display:grid;gap:12px;margin-bottom:16px}.account-order{padding:0;margin:0;border:1px solid #dedede;border-radius:10px;overflow:hidden}.account-order summary{margin:0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px;background:#fafafa;list-style:none}.account-order summary::-webkit-details-marker{display:none}.account-order summary::after{content:'+';font-size:22px;color:#c51929}.account-order[open] summary::after{content:'−'}.account-order summary>div{display:grid;gap:6px;min-width:0;overflow-wrap:anywhere}.account-order summary>div:nth-child(2){margin-left:auto;text-align:right}.account-order-date,.account-order-status{font-size:12px;color:#60666e}.account-order-items{padding:0 16px;margin:0;list-style:none}.account-order-items li{display:flex;align-items:start;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid #eee;font-size:13px;overflow-wrap:anywhere}.account-order-items li>div{display:grid;gap:5px;min-width:0}.account-order-items small{color:#666}.account-order-total{text-align:right;font-weight:600;font-size:14px;padding:0 16px 12px}.account-orders .account-primary[hidden]{display:none}@media(max-width:400px){.account-order summary{padding:12px;gap:8px;font-size:13px}.account-order-items{padding:0 12px}}

/* Readable authentication feedback and password visibility controls. */
#account-dialog .account-password{position:relative;width:100%}.account-password input{padding-right:52px}.account-password .account-password-toggle{position:absolute;right:3px;top:2px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:#44515d}.account-password-toggle:hover{background:#edf0f2}.account-password-toggle:focus-visible{outline:2px solid #d91a2a;outline-offset:-2px}.account-password-toggle .eye-slash{display:none}.account-password-toggle[aria-pressed=true] .eye-slash{display:block}#account-dialog .account-reset-link{align-self:flex-start;padding:8px 0;min-height:40px;border:0;background:transparent;color:#b90d21;font-size:14px;font-weight:650;text-decoration:underline;text-underline-offset:3px}#account-dialog .account-feedback.account-error{background:#fff1f2;border:1px solid #efb0b8;border-left:4px solid #d8192a;border-radius:9px;padding:14px 16px;margin:8px 0 0;color:#a50f21;font-size:14px;line-height:1.6}.account-error strong{display:block;font-size:15px}.account-error p{margin:5px 0 8px}.account-error:focus{outline:2px solid #d8192a;outline-offset:3px}#account-dialog .account-error-reset{min-height:38px;border:0;border-radius:6px;background:#fff;color:#a50f21;padding:7px 12px;font-weight:700;text-decoration:underline;text-underline-offset:3px}.account-error-reset:hover{background:#ffe0e5}.account-feedback:empty{display:none}

/* Order lines keep the exact variant photo, quantity and amount easy to scan. */
.account-order-items li{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 0}.account-order-picture{position:relative;display:grid;place-items:center;width:72px;height:72px;border:1px solid #e7e7e7;border-radius:9px;background:#f7f7f7;color:#9ba1a7;overflow:hidden}.account-order-picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.account-order-items .account-order-description{display:grid;gap:5px;min-width:0}.account-order-description>strong{line-height:1.5}.account-order-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:3px}.account-order-qty{display:inline-block;padding:5px 8px;border-radius:6px;background:#fff0f2;color:#a41324;font-size:13px;font-weight:750;white-space:nowrap}.account-order-unit{color:#187443;font-size:12px;font-weight:600}.account-order-amount{text-align:right;white-space:nowrap;font-size:14px;color:#242a31}@media(max-width:500px){.account-order-items li{grid-template-columns:60px minmax(0,1fr);gap:10px}.account-order-picture{width:60px;height:60px;align-self:start}.account-order-amount{grid-column:2;text-align:left;margin-top:0}.account-order-qty{font-size:12px}.account-order-unit{font-size:12px}}

#account-dialog.account-orders-dialog{width:min(680px,calc(100vw - 32px))}.account-order summary{display:grid;grid-template-columns:72px minmax(0,1fr) 136px 70px 14px;gap:8px;padding:14px 12px}.account-order-number{font-size:13px;white-space:nowrap}.account-order-date{white-space:nowrap}.account-order-status{text-align:right;white-space:nowrap}.account-order-price{text-align:right;white-space:nowrap;font-size:15px}.account-order summary::after{font-size:20px;text-align:center}.account-orders>[role=status]:empty{display:none}@media(max-width:750px){.account-order summary{grid-template-columns:auto minmax(0,1fr) 14px;gap:8px 10px;padding:12px}.account-order-number{font-size:12px;text-align:right}.account-order-date{font-size:11px}.account-order-status{grid-row:2;grid-column:1 / 3;text-align:left;font-size:11px;padding-right:80px}.account-order-price{grid-row:2;grid-column:2;text-align:right;font-size:14px}.account-order summary::after{grid-column:3;grid-row:1 / 3;align-self:center}}

.account-order-picture{cursor:pointer;text-decoration:none}.account-order-picture:focus-visible{outline:3px solid #187443;outline-offset:2px}

.account-order-number::before{content:"Order #: "}@media(max-width:750px){.account-order-number::before{content:none}.account-order-number{font-size:11px;overflow:hidden;text-overflow:ellipsis}.account-order summary{gap:8px 6px}.account-order-date{font-size:10px}}

.account-order-status{justify-self:end;display:inline-block;padding:6px 8px;border-radius:7px;font-weight:650;font-size:11px;background:#eef1f3;color:#4d5660}.account-order-status.status-pending{background:#ffe0b2;color:#8f4400}.account-order-status.status-cancelled{background:#ffe5e7;color:#b01826}.account-order-status.status-complete{background:#dcf4e5;color:#126b3a}@media(max-width:750px){.account-order-status{justify-self:start;max-width:calc(100% - 72px);padding:5px 6px;font-size:10px;box-sizing:border-box}}

#account-dialog .account-order-print:disabled{opacity:1;cursor:default;background:#fff0d9;border-color:#e8c58f;color:#895521;font-weight:650}

/* Status colours cover the whole header, with soft backgrounds. */
.account-order summary:has(.status-pending){background:#fff4e5}
.account-order summary:has(.status-cancelled){background:#fff0f1}
.account-order summary:has(.status-complete){background:#edf8f1}
.account-order-status.status-pending{background:#ffebcf;color:#8f4400}
.account-order-status.status-cancelled{background:#ffe3e6;color:#9e2230}
.account-order-status.status-complete{background:#ddf1e4;color:#17663d}

.account-order-actions{grid-column:2 / 5;justify-self:end;display:flex;gap:8px;align-items:center}
.account-order-actions button{min-height:34px;padding:5px 13px;border:1px solid #bed4c7;border-radius:7px;background:#f4faf6;color:#17663d;font:inherit;font-size:12px;font-weight:650;cursor:pointer}
.account-order-actions .account-order-cancel{background:#fff4f5;border-color:#edcbd0;color:#a32332}
.account-order-actions button:disabled{opacity:.55;cursor:wait}
.account-order-actions button:focus-visible{outline:2px solid #242a31;outline-offset:2px}
.account-order summary:has(.account-order-actions)::after{grid-column:5;grid-row:1 / 3}
@media(max-width:750px){.account-order-actions{grid-row:3;grid-column:1 / 3}.account-order summary:has(.account-order-actions)::after{grid-column:3;grid-row:1 / 4}}

.account-identity{display:grid;gap:14px;padding:16px;margin-bottom:22px;border:1px solid #dbe4df;border-radius:10px;background:#f7faf8}
.account-identity>div{display:grid;gap:5px;min-width:0}.account-identity span{font-size:12px;color:#53645b;font-weight:600}.account-identity .account-customer-id{font-size:17px;letter-spacing:.4px}.account-identity .account-email{font-size:17px;font-weight:700;color:#242a31;margin:0;overflow-wrap:anywhere}.account-email-verified{justify-self:start;padding:4px 9px;border-radius:6px;background:#e1f3e7;color:#17663d;font-size:13px}
#account-dialog .account-secondary{min-height:40px;padding:9px 14px;border:1px solid #a9cdb8;border-radius:8px;background:#edf7f1;color:#17663d;font:inherit;font-size:14px;font-weight:650;cursor:pointer}.account-change-password{width:100%;margin-top:12px}
#account-dialog .account-success{padding:14px 16px;margin-top:16px;border:1px solid #b9d9c7;border-left:4px solid #187443;border-radius:9px;background:#edf7f1;color:#125b34;font-size:15px;font-weight:650;line-height:1.6}

/* Keep pending-order actions alongside the desktop summary. */
@media(min-width:751px){
 #account-dialog.account-orders-dialog{width:min(760px,calc(100vw - 32px));padding-left:24px;padding-right:24px}
 .account-order summary{grid-template-columns:66px minmax(0,1fr) auto auto 14px;gap:7px}
 .account-order summary:has(.account-order-actions){grid-template-columns:66px minmax(0,1fr) auto auto auto 14px}
 .account-order-date{font-size:11px}
 .account-order-number{font-size:12px}
 .account-order-actions{grid-column:5;grid-row:1;gap:6px}
 .account-order summary:has(.account-order-actions)::after{grid-column:6;grid-row:1}
}
#account-dialog .account-order-actions button{font-size:12px;line-height:1.2;padding:5px 9px;white-space:nowrap}

/* Show one calm loading state before revealing the search and first page together. */
.account-order-search[hidden]{display:none!important}
.account-orders [role=status].is-loading{display:flex;align-items:center;justify-content:center;gap:14px;padding:24px 18px;margin:18px 0;border:1px solid #d7e8de;border-radius:12px;background:#f1f8f4;color:#17663d;font-size:16px;line-height:1.5}
.account-orders[data-initial-loading] [role=status]{min-height:96px}
.account-order-spinner{flex:0 0 24px;width:24px;height:24px;box-sizing:border-box;border:3px solid #cfe3d7;border-top-color:#187443;border-radius:50%;animation:account-orders-spin .85s linear infinite}
#account-dialog:has(.account-orders[data-initial-loading]) .account-privacy{display:none}
@keyframes account-orders-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.account-order-spinner{animation:none}}

#account-button[aria-busy="true"]{opacity:1;cursor:progress}

/* Search is nested so it can be revealed together with loaded orders. */
#account-dialog .account-order-search{display:grid;gap:7px;width:min(100%,460px);margin:0 0 20px;min-width:0}
#account-dialog .account-order-search>label{display:block;margin:0;font-size:13px;line-height:1.4;font-weight:600}
#account-dialog .account-order-search>input{display:block;width:100%;min-height:40px;height:40px;margin:0;padding:8px 12px;font-size:14px;line-height:22px;border-radius:7px;outline-offset:1px}
@media(max-width:600px){#account-dialog .account-order-search>input{min-height:44px;height:44px;font-size:16px}}

/* Compact secondary action within each order card. */
#account-dialog .account-order-print{min-height:34px;padding:6px 12px;font-size:13px;line-height:20px;border-radius:7px;margin:0 16px 16px;width:auto;font-weight:600}
@media(max-width:600px){#account-dialog .account-order-print{min-height:44px;padding:10px 12px}}

#account-dialog .account-order-footer-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 16px}
#account-dialog .account-order-footer-actions .account-order-print{margin:0}
#account-dialog .account-order-save:disabled{background:#edf7f1;color:#17663d;border-color:#bed4c7;opacity:.7;cursor:wait}
#account-dialog .account-order-save-feedback{margin:0 16px 16px;font-size:13px;color:#17663d}
#account-dialog .account-order-save-feedback:empty{display:none}
#account-dialog .account-order-save-feedback.is-error{color:#b51626}