/* Keep the current page behind the account. Preserve the Figma colours/type. */
html:has(.commerce-dialog[open]){overflow:hidden;overscroll-behavior:none}
#account-dialog::backdrop,
#account-dialog[data-step="profile"]::backdrop{background:rgb(23 24 21 / .36)}
#account-dialog[data-step="profile"]{
  width:min(1272px,calc(100% - 64px));
  max-height:calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding:0;background:#fff;translate:none;
}
#account-dialog .profile-panel{
  min-height:min(744px,calc(100dvh - 96px));
  padding:48px 24px 24px;gap:20px;
}
#account-dialog .profile-close{top:4px;right:8px}
#account-dialog .profile-data{min-height:0;padding:22px 18px 18px}
#account-dialog .profile-data h3{margin:0 6px;font-size:40px}
#account-dialog .profile-fields{margin:20px 6px 0}
#account-dialog .profile-fields label{font-size:16px;line-height:22px}
#account-dialog .profile-fields input{height:34px;font-size:17px}
/* Indicate input focus along the existing underline, without a surrounding frame. */
#account-dialog .profile-fields input:focus{outline:none}
#account-dialog .profile-fields input:focus-visible{border-bottom-color:#b92e0e;box-shadow:0 2px 0 #b92e0e}
#account-dialog .profile-fields input+label{margin-top:12px}
#account-dialog .profile-link{flex-shrink:0;min-height:52px;padding:8px 14px;font-size:16px;border-radius:18px}
#account-dialog .profile-link svg{width:28px;height:28px}
#account-dialog .profile-fields+.profile-link{margin-top:20px}
#account-dialog .profile-logout{margin-top:20px}
#account-dialog .cashback-card{height:220px;padding:48px 22px 20px;margin-left:-10px;width:calc(100% + 10px)}
#account-dialog .cashback-card img{width:110px;height:64px;top:16px}
#account-dialog .cashback-label{font-size:22px;color:#a4a69f}
#account-dialog .cashback-value{font-family:Manrope,Arial,sans-serif;font-weight:700;font-size:clamp(32px,3.5vw,46px)}
#account-dialog .history-label{color:#646660;margin-top:22px}
#account-dialog .profile-history h3{font-size:clamp(27px,3vw,38px)}
#account-dialog .profile-link:focus-visible,
#account-dialog .profile-logout:focus-visible,
#account-dialog .profile-close:focus-visible{outline:2px solid #171815;outline-offset:3px}
@media(max-width:760px){
  #account-dialog[data-step="profile"]{
    width:calc(100% - 32px);
    max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  #account-dialog .profile-panel{min-height:0;padding:44px 12px 12px;gap:12px}
  #account-dialog .cashback-card{height:92px;padding:14px 16px;border-left-width:6px;margin-left:-6px;width:calc(100% + 6px)}
  #account-dialog .cashback-card img{width:80px;height:52px;right:4px;top:16px}
  #account-dialog .cashback-label{font-size:15px}
  #account-dialog .cashback-value{font-size:27px;margin-top:9px}
  #account-dialog .history-label{font-size:11px;line-height:15px;margin:10px 0 4px}
  #account-dialog .profile-history h3{font-size:22px}
  #account-dialog .profile-data{padding:16px 12px 12px;border-radius:18px}
  #account-dialog .profile-data h3{font-size:30px}
  #account-dialog .profile-fields{margin-top:12px}
  #account-dialog .profile-fields label{font-size:14px;line-height:20px}
  #account-dialog .profile-fields input{font-size:16px;height:30px}
  #account-dialog .profile-fields input+label{margin-top:8px}
  #account-dialog .profile-fields+.profile-link{margin-top:14px}
  #account-dialog .profile-link{min-height:44px;padding:8px 10px;font-size:14px;border-radius:14px}
  #account-dialog .profile-logout{margin-top:14px}
}
/* Only short/zoomed viewports need inner scrolling; never clip account actions. */
#account-dialog[data-step="profile"]{overscroll-behavior:contain}
#account-dialog .profile-address-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
#account-dialog .profile-address-heading label{min-width:0}
#profile-address-edit{flex:none;min-height:32px;padding:4px 0 4px 8px;background:transparent;color:#575752;font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px}
#account-dialog #profile-address:not([readonly]){border-bottom-color:#b92e0e;background:#fff}
.profile-address-actions{display:flex;gap:8px;margin-top:10px}
.profile-address-actions button{min-height:44px;padding:10px 16px;border-radius:12px;background:#e8e7e3;color:#171815;font:inherit;font-size:14px}
#profile-address-save{background:#b92e0e;color:#fff}
#profile-address-feedback{margin:0;font-size:13px;line-height:1.4;color:#39552a;overflow-wrap:anywhere}
#profile-address-feedback:not(:empty){margin-top:8px}
#profile-address-feedback.is-error{color:#a6250e}
#profile-address-form button:focus-visible{outline:2px solid #171815;outline-offset:3px}
@media(hover:hover){#profile-address-edit:hover{color:#171815}.profile-address-actions button:hover{filter:brightness(.92)}}
@media(max-width:760px){#account-dialog .profile-address-heading{margin-top:8px}}
/* 20% larger desktop profile; smaller screens retain readable, fitted controls. */
@media(min-width:1100px) and (min-height:850px){
  #account-dialog .profile-panel{padding:58px 29px 29px;gap:24px}
  #account-dialog .profile-data{padding:26px 22px 22px}
  #account-dialog .profile-data h3{font-size:48px}
  #account-dialog .profile-fields{margin-top:24px}
  #account-dialog .profile-fields label{font-size:19px;line-height:26px}
  #account-dialog .profile-fields input{height:41px;font-size:20px}
  #account-dialog .profile-fields input+label{margin-top:14px}
  #account-dialog .profile-address-heading{margin-top:14px}
  #account-dialog .profile-link{min-height:62px;padding:10px 17px;font-size:19px;border-radius:22px}
  #account-dialog .profile-link svg{width:34px;height:34px}
  #account-dialog .profile-fields+.profile-link{margin-top:24px}
  #account-dialog .profile-logout{min-height:53px;margin-top:24px;padding:12px 17px;font-size:17px}
  #account-dialog .cashback-card{height:264px;padding:58px 26px 24px;border-left-width:12px;margin-left:-12px;width:calc(100% + 12px)}
  #account-dialog .cashback-card img{width:132px;height:77px;top:19px}
  #account-dialog .cashback-label{font-size:26px}
  #account-dialog .cashback-value{font-size:55px;margin-top:24px}
  #account-dialog .history-label{margin-top:26px;font-size:18px;line-height:24px}
  #account-dialog .profile-history h3{font-size:46px}
  #profile-address-edit{min-height:38px;font-size:16px}
  .profile-address-actions button{min-height:53px;font-size:17px}
  #profile-address-feedback{font-size:15px}
}