@charset "UTF-8";

/*
 * MichaelaStore Account & Authentication v1.3
 * Scoped by michaelastore-account-v1.js to body.ms-account-page.
 * The native Shoptet forms, field names, actions, validation and customer data
 * stay in place; this file changes presentation only.
 */

body.ms-account-page {
  --msa-ink: var(--ms-ink, var(--msc-ink, #211713));
  --msa-muted: var(--ms-muted, var(--msc-muted, #817873));
  --msa-wine: var(--ms-burgundy, var(--msc-wine, #772b35));
  --msa-wine-dark: var(--ms-burgundy-dark, var(--msc-wine-dark, #5e2029));
  --msa-line: var(--ms-line, var(--msc-line, #e7dfda));
  --msa-line-strong: #cfc6bf;
  --msa-cream: var(--ms-cream, var(--msc-cream, #fcfaf7));
  --msa-soft: #f8f5f2;
  --msa-white: #fff;
  --msa-success: #5f7455;
  --msa-info: #74665f;
  --msa-warning: #9a6b32;
  --msa-danger: #8f3944;
  color: var(--msa-ink);
  background: var(--msa-white);
}

/* The native header account icon opens this global Shoptet dialog on every
 * storefront page. It is styled without waiting for a JS marker, preventing a
 * flash of the old login layout while keeping #formLoginIncluded untouched. */
body #login {
  --msa-ink: var(--ms-ink, var(--msc-ink, #211713));
  --msa-muted: var(--ms-muted, var(--msc-muted, #817873));
  --msa-wine: var(--ms-burgundy, var(--msc-wine, #772b35));
  --msa-wine-dark: var(--ms-burgundy-dark, var(--msc-wine-dark, #5e2029));
  --msa-line: var(--ms-line, var(--msc-line, #e7dfda));
  --msa-line-strong: #cfc6bf;
  --msa-cream: var(--ms-cream, var(--msc-cream, #fcfaf7));
  --msa-soft: #f8f5f2;
  --msa-white: #fff;
  --msa-danger: #8f3944;
  box-sizing: border-box;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: rgba(252, 250, 247, .985) !important;
  color: var(--msa-ink) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body #login[open] {
  display: block !important;
}

body #login::backdrop {
  background: rgba(33, 23, 19, .24) !important;
}

body #login *,
body #login *::before,
body #login *::after {
  box-sizing: border-box;
}

body #login.dialog--fullscreen .dialog__wrapper {
  position: relative !important;
  inset: auto !important;
  width: min(100%, 560px) !important;
  min-width: 0 !important;
  margin: auto !important;
  padding: 42px 20px !important;
  display: flex !important;
  min-height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  translate: none !important;
  transform: none !important;
}

body #login .dialog__content--form {
  width: 100% !important;
  max-width: 520px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body #login .dialog__header {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

body #login .dialog__heading {
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: var(--msa-ink) !important;
  font-size: clamp(34px, 4vw, 46px) !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
  letter-spacing: -.035em !important;
  text-transform: none !important;
}

body #login .ms-account-dialog__lede {
  max-width: 500px;
  margin: 0 auto 26px !important;
  color: var(--msa-muted) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  text-align: center !important;
}

body #login #customerLogin {
  width: 100% !important;
}

body #login #formLoginIncluded {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 30px !important;
  border: 1px solid var(--msa-line) !important;
  border-radius: 2px !important;
  background: var(--msa-white) !important;
  box-shadow: none !important;
}

body #login #formLoginIncluded .form-group {
  min-width: 0 !important;
  margin: 0 0 18px !important;
}

body #login #formLoginIncluded label {
  margin-bottom: 7px !important;
  color: var(--msa-ink) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

body #login #formLoginIncluded .form-control-wrapper {
  position: relative !important;
  min-width: 0 !important;
}

body #login #formLoginIncluded :is(input[type="email"], input[type="password"], input[type="text"]) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 50px !important;
  padding: 11px 14px !important;
  border: 1px solid var(--msa-line-strong) !important;
  border-radius: 2px !important;
  background: var(--msa-white) !important;
  color: var(--msa-ink) !important;
  box-shadow: none !important;
  outline: 0 !important;
  font: inherit !important;
  font-size: 15px !important;
}

body #login #formLoginIncluded :is(input[type="email"], input[type="password"], input[type="text"]):focus {
  border-color: var(--msa-wine) !important;
  box-shadow: 0 0 0 2px rgba(119, 43, 53, .08) !important;
}

body #login #formLoginIncluded .submit-wrapper {
  margin: 6px 0 0 !important;
}

body #login #formLoginIncluded button[type="submit"] {
  width: 100% !important;
  min-height: 50px !important;
  padding: 13px 22px !important;
  border: 1px solid var(--msa-wine) !important;
  border-radius: 2px !important;
  background: var(--msa-wine) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: .065em !important;
  text-transform: uppercase !important;
}

body #login #formLoginIncluded button[type="submit"]:hover,
body #login #formLoginIncluded button[type="submit"]:focus-visible {
  border-color: var(--msa-wine-dark) !important;
  background: var(--msa-wine-dark) !important;
}

body #login :is(a, button, input):focus-visible {
  outline: 2px solid rgba(119, 43, 53, .34) !important;
  outline-offset: 3px !important;
}

body #login #formLoginIncluded .alternative-links {
  margin: 18px 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 18px !important;
  align-items: center;
  font-size: 13px !important;
}

body #login #formLoginIncluded .alternative-links a {
  width: auto !important;
  display: inline-flex !important;
  color: var(--msa-muted) !important;
  font-weight: 500 !important;
  text-decoration-color: #cbbdb6 !important;
  text-underline-offset: 3px !important;
}

body #login #formLoginIncluded .ms-account-forgot-link {
  grid-row: 1;
  grid-column: 1 / -1;
  justify-self: center;
}

body #login #formLoginIncluded .ms-account-register-label {
  grid-row: 2;
  grid-column: 1;
  color: var(--msa-muted) !important;
}

body #login #formLoginIncluded .ms-account-register-link {
  grid-row: 2;
  grid-column: 2;
  color: var(--msa-wine) !important;
  font-weight: 650 !important;
}

body #login #formLoginIncluded .social-login-buttons {
  margin-top: 24px !important;
}

body #login #formLoginIncluded .social-login-buttons-divider {
  margin: 0 0 16px !important;
  display: flex !important;
  align-items: center;
  color: var(--msa-muted) !important;
  font-size: 12px !important;
  text-align: center;
}

body #login #formLoginIncluded .social-login-buttons-divider::before,
body #login #formLoginIncluded .social-login-buttons-divider::after {
  content: "" !important;
  height: 1px !important;
  flex: 1 1 auto;
  background: var(--msa-line) !important;
}

body #login #formLoginIncluded .social-login-buttons-divider span {
  padding: 0 14px !important;
}

body #login #formLoginIncluded .social-login-buttons .form-group {
  margin: 10px 0 0 !important;
}

body #login #formLoginIncluded .login-btn {
  position: relative !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 18px 12px 48px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--msa-line-strong) !important;
  border-radius: 2px !important;
  background: #fff !important;
  color: var(--msa-ink) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

body #login #formLoginIncluded .login-btn:hover,
body #login #formLoginIncluded .login-btn:focus-visible {
  border-color: var(--msa-wine) !important;
  background: var(--msa-soft) !important;
  color: var(--msa-wine) !important;
}

body #login #formLoginIncluded .login-btn > span:first-child {
  position: absolute !important;
  left: 17px !important;
}

body #login #formLoginIncluded .ms-account-password-wrap input {
  padding-right: 54px !important;
}

body #login .ms-account-password-toggle {
  position: absolute !important;
  z-index: 2 !important;
  top: 1px !important;
  right: 1px !important;
  width: 48px !important;
  height: 48px !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center;
  border: 0 !important;
  border-left: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--msa-muted) !important;
  box-shadow: none !important;
}

body #login .ms-account-password-toggle:hover,
body #login .ms-account-password-toggle:focus-visible {
  border-left-color: var(--msa-line) !important;
  background: var(--msa-soft) !important;
  color: var(--msa-wine) !important;
}

body #login .ms-account-password-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body #login .ms-account-password-toggle .ms-account-eye-off,
body #login .ms-account-password-toggle.is-visible .ms-account-eye-on {
  display: none;
}

body #login .ms-account-password-toggle.is-visible .ms-account-eye-off {
  display: block;
}

body #login .ms-account-validation-summary {
  position: relative !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 13px 16px 13px 47px !important;
  border: 1px solid #ead1d5 !important;
  border-left: 3px solid var(--msa-wine) !important;
  border-radius: 2px !important;
  background: #fcf5f6 !important;
  color: var(--msa-ink) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  scroll-margin-top: 100px;
}

body #login .ms-account-validation-summary::before {
  content: "!" !important;
  position: absolute !important;
  top: 14px !important;
  left: 16px !important;
  width: 18px !important;
  height: 18px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(119, 43, 53, .38) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--msa-wine) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

body #login .ms-account-validation-summary strong,
body #login .ms-account-validation-summary span {
  display: block !important;
}

body #login .ms-account-validation-summary strong {
  margin-bottom: 2px !important;
  font-size: 13px !important;
}

body #login .ms-account-validation-summary span {
  color: var(--msa-muted) !important;
}

body #login .validator-msg.js-validator-msg.msg-error {
  margin-top: 7px !important;
  display: block !important;
  color: var(--msa-danger) !important;
  font-size: 10.5px !important;
  line-height: 1.45 !important;
}

body #login .ms-account-invalid-field,
body #login .error-field,
body #login .has-error input {
  border-color: #b66a73 !important;
  box-shadow: 0 0 0 2px rgba(119, 43, 53, .07) !important;
}

body #login .dialog__close--arrow .btn {
  color: var(--msa-ink) !important;
}

body #login .dialog__close--arrow {
  position: fixed !important;
  z-index: 5 !important;
  inset: 16px auto auto 16px !important;
  margin: 0 !important;
  display: block !important;
  translate: none !important;
  transform: none !important;
}

body #login .dialog__close--arrow .btn {
  min-height: 42px !important;
  padding: 10px 12px !important;
  display: inline-flex !important;
  align-items: center;
  border: 1px solid var(--msa-line) !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, .92) !important;
  color: var(--msa-ink) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

body.ms-account-page *,
body.ms-account-page *::before,
body.ms-account-page *::after {
  box-sizing: border-box;
}

body.ms-account-page #content-wrapper > .content-wrapper-in {
  width: 100% !important;
  max-width: 1280px !important;
  min-width: 0 !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 20px !important;
  padding-left: 20px !important;
}

body.ms-account-page #content,
body.ms-account-page #content .content-inner {
  width: 100% !important;
  min-width: 0 !important;
}

body.ms-account-page #content {
  padding-bottom: clamp(54px, 7vw, 88px) !important;
}

body.ms-account-page #content h1 {
  margin: 0 0 12px !important;
  color: var(--msa-ink) !important;
  font-size: clamp(34px, 4vw, 48px) !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
  letter-spacing: -.035em !important;
  text-transform: none !important;
}

body.ms-account-page .ms-account-lede {
  max-width: 590px;
  margin: 0 0 28px !important;
  color: var(--msa-muted) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

body.ms-account-page #content a {
  color: var(--msa-ink);
  text-decoration-color: #cbbdb6;
  text-underline-offset: 3px;
}

body.ms-account-page #content a:hover,
body.ms-account-page #content a:focus-visible {
  color: var(--msa-wine);
  text-decoration-color: currentColor;
}

body.ms-account-page #content label {
  margin-bottom: 7px !important;
  color: var(--msa-ink) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

body.ms-account-page #content :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  select,
  textarea
) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 50px !important;
  padding: 11px 14px !important;
  border: 1px solid var(--msa-line-strong) !important;
  border-radius: 2px !important;
  background: var(--msa-white) !important;
  color: var(--msa-ink) !important;
  box-shadow: none !important;
  outline: 0 !important;
  font-family: inherit !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

body.ms-account-page #content textarea {
  min-height: 148px !important;
  resize: vertical;
}

body.ms-account-page #content :is(input, select, textarea):focus {
  border-color: var(--msa-wine) !important;
  box-shadow: 0 0 0 2px rgba(119, 43, 53, .08) !important;
}

body.ms-account-page #content :is(input, select, textarea):disabled {
  background: #f2efec !important;
  color: #8e8580 !important;
  cursor: not-allowed;
}

body.ms-account-page #content :is(.btn, button[type="submit"], input[type="submit"]) {
  min-height: 50px !important;
  padding: 13px 22px !important;
  border: 1px solid var(--msa-wine) !important;
  border-radius: 2px !important;
  background: var(--msa-wine) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: .065em !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

body.ms-account-page #content :is(.btn, button[type="submit"], input[type="submit"]):hover,
body.ms-account-page #content :is(.btn, button[type="submit"], input[type="submit"]):focus-visible {
  border-color: var(--msa-wine-dark) !important;
  background: var(--msa-wine-dark) !important;
  color: #fff !important;
}

body.ms-account-page #content :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid rgba(119, 43, 53, .34) !important;
  outline-offset: 3px !important;
}

body.ms-account-page #content .form-group {
  min-width: 0;
}

body.ms-account-page #content .form-control-wrapper {
  position: relative;
  min-width: 0;
}

/* --------------------------------------------------------------------------
 * Authentication cards: login, forgotten password and token reset
 * -------------------------------------------------------------------------- */

body.ms-account-page.ms-account-auth #content .content-inner {
  display: flex;
  min-height: 430px;
  align-items: center;
  flex-direction: column;
}

body.ms-account-page.ms-account-auth #content h1,
body.ms-account-page.ms-account-auth #content .ms-account-lede {
  width: min(100%, 520px);
  text-align: center;
}

body.ms-account-page .ms-account-auth-card {
  width: min(100%, 500px) !important;
  margin: 0 auto !important;
  padding: 30px !important;
  border: 1px solid var(--msa-line) !important;
  border-radius: 2px !important;
  background: var(--msa-white) !important;
  box-shadow: none !important;
}

body.ms-account-page .ms-account-auth-card > .form-group:not(:last-child) {
  margin-bottom: 18px !important;
}

body.ms-account-page .ms-account-auth-card .submit-wrapper {
  margin: 6px 0 0 !important;
}

body.ms-account-page .ms-account-auth-card .submit-wrapper :is(button, input[type="submit"]) {
  width: 100% !important;
}

body.ms-account-page .ms-account-password-wrap input[type="password"],
body.ms-account-page .ms-account-password-wrap input[type="text"] {
  padding-right: 54px !important;
}

body.ms-account-page .ms-account-password-toggle {
  position: absolute;
  z-index: 2;
  top: 25px;
  right: 1px;
  width: 48px;
  height: 48px;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid;
  place-items: center;
  border: 0 !important;
  border-left: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--msa-muted) !important;
  box-shadow: none !important;
  cursor: pointer;
}

body.ms-account-page .form-control-wrapper > .ms-account-password-toggle {
  top: 1px;
}

body.ms-account-page .ms-account-password-toggle:hover,
body.ms-account-page .ms-account-password-toggle:focus-visible {
  border-left-color: var(--msa-line) !important;
  background: var(--msa-soft) !important;
  color: var(--msa-wine) !important;
}

body.ms-account-page .ms-account-password-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.ms-account-page .ms-account-password-toggle .ms-account-eye-off,
body.ms-account-page .ms-account-password-toggle.is-visible .ms-account-eye-on {
  display: none;
}

body.ms-account-page .ms-account-password-toggle.is-visible .ms-account-eye-off {
  display: block;
}

body.ms-account-page #formLogin .alternative-links {
  margin: 18px 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 18px;
  align-items: center;
  font-size: 13px;
}

body.ms-account-page #formLogin .alternative-links a {
  display: inline-flex !important;
  width: auto !important;
  align-items: center;
  color: var(--msa-muted) !important;
  font-weight: 500;
}

body.ms-account-page #formLogin .alternative-links .ms-account-forgot-link {
  grid-row: 1;
  grid-column: 1 / -1;
  justify-self: center;
}

body.ms-account-page #formLogin .alternative-links .ms-account-register-label {
  grid-row: 2;
  grid-column: 1;
  color: var(--msa-muted);
}

body.ms-account-page #formLogin .alternative-links .ms-account-register-link {
  grid-row: 2;
  grid-column: 2;
  color: var(--msa-wine) !important;
  font-weight: 650;
}

body.ms-account-page #formLogin .social-login-buttons {
  margin-top: 24px !important;
}

body.ms-account-page #formLogin .social-login-buttons-divider {
  margin: 0 0 16px !important;
  display: flex;
  align-items: center;
  color: var(--msa-muted);
  font-size: 12px;
  text-align: center;
}

body.ms-account-page #formLogin .social-login-buttons-divider::before,
body.ms-account-page #formLogin .social-login-buttons-divider::after {
  height: 1px;
  flex: 1 1 auto;
  background: var(--msa-line) !important;
}

body.ms-account-page #formLogin .social-login-buttons-divider span {
  padding: 0 14px;
}

body.ms-account-page #formLogin .social-login-buttons .form-group {
  margin: 10px 0 0 !important;
}

body.ms-account-page #formLogin .login-btn {
  position: relative;
  width: 100% !important;
  min-height: 48px;
  padding: 12px 18px 12px 48px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--msa-line-strong) !important;
  border-radius: 2px !important;
  background: #fff !important;
  color: var(--msa-ink) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

body.ms-account-page #formLogin .login-btn:hover,
body.ms-account-page #formLogin .login-btn:focus-visible {
  border-color: var(--msa-wine) !important;
  background: var(--msa-soft) !important;
  color: var(--msa-wine) !important;
}

body.ms-account-page #formLogin .login-btn > span:first-child {
  position: absolute;
  left: 17px;
}

/* --------------------------------------------------------------------------
 * Registration
 * -------------------------------------------------------------------------- */

body.ms-account-page.ms-account-registration #content .content-inner {
  display: flex;
  align-items: center;
  flex-direction: column;
}

body.ms-account-page.ms-account-registration #content h1,
body.ms-account-page.ms-account-registration #content .ms-account-lede {
  width: min(100%, 700px);
  text-align: center;
}

body.ms-account-page #register-form {
  width: min(100%, 700px) !important;
  margin: 0 auto !important;
}

body.ms-account-page #register-form > :is(fieldset, .co-box) {
  width: 100% !important;
  margin: 0 0 18px !important;
}

body.ms-account-page #register-form :is(.box, fieldset.stay-in-touch, fieldset.ms-account-confirmation) {
  width: 100% !important;
  margin: 0 !important;
  padding: 30px !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px 20px;
  border: 1px solid var(--msa-line) !important;
  border-radius: 2px !important;
  background: var(--msa-white) !important;
  box-shadow: none !important;
}

body.ms-account-page #register-form :is(.box, fieldset) > :is(h2, .form-legend, legend) {
  grid-column: 1 / -1;
}

body.ms-account-page #register-form h2 {
  margin: 0 0 4px !important;
  padding: 0 0 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--msa-line) !important;
  background: transparent !important;
  color: var(--msa-ink) !important;
  font-size: 21px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
}

body.ms-account-page #register-form .form-legend {
  margin: -5px 0 0 !important;
  color: var(--msa-muted) !important;
  font-size: 11px !important;
  text-align: right;
}

body.ms-account-page #register-form .form-group {
  grid-column: span 3;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.ms-account-page #register-form .ms-account-field--full {
  grid-column: 1 / -1 !important;
}

body.ms-account-page #register-form .ms-account-field--half {
  grid-column: span 3 !important;
}

body.ms-account-page #register-form .ms-account-field--two-thirds {
  grid-column: span 4 !important;
}

body.ms-account-page #register-form .ms-account-field--third {
  grid-column: span 2 !important;
}

body.ms-account-page #register-form fieldset.co-registration:first-of-type > .form-group {
  grid-column: 1 / -1;
  min-height: 52px;
  padding: 13px 15px !important;
  display: flex;
  align-items: center;
  border: 1px solid var(--msa-line) !important;
  border-radius: 2px !important;
  background: var(--msa-white) !important;
}

body.ms-account-page #register-form fieldset.co-registration:first-of-type > .form-group:has(input:checked) {
  border-color: var(--msa-wine) !important;
  background: #fbf6f5 !important;
  box-shadow: inset 3px 0 0 var(--msa-wine) !important;
}

body.ms-account-page #register-form input[type="radio"] {
  position: static !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 0 11px 0 0 !important;
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  accent-color: var(--msa-wine);
}

body.ms-account-page #register-form input[type="radio"] + label {
  width: auto !important;
  margin: 0 !important;
  cursor: pointer;
}

body.ms-account-page #register-form #additionalInformation,
body.ms-account-page #register-form #company-info {
  min-width: 0 !important;
}

body.ms-account-page #register-form #company-info {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px 20px;
}

body.ms-account-page #register-form #company-info > .form-group {
  grid-column: span 2;
}

body.ms-account-page #register-form .company-shopping {
  grid-column: 1 / -1 !important;
}

body.ms-account-page #register-form > fieldset.stay-in-touch,
body.ms-account-page #register-form > fieldset.ms-account-confirmation,
body.ms-account-page #register-form > fieldset:last-of-type {
  grid-template-columns: minmax(0, 1fr);
}

body.ms-account-page #register-form > fieldset.stay-in-touch > *,
body.ms-account-page #register-form > fieldset.ms-account-confirmation > *,
body.ms-account-page #register-form > fieldset:last-of-type > * {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

body.ms-account-page #register-form .stay-in-touch h2,
body.ms-account-page #register-form .ms-account-confirmation h2 {
  margin-bottom: 0 !important;
}

body.ms-account-page #register-form .consents,
body.ms-account-page #register-form .stay-in-touch .form-group {
  color: var(--msa-muted) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}

body.ms-account-page #register-form .submit-wrapper {
  width: 100% !important;
}

body.ms-account-page #register-form .submit-wrapper :is(button, input[type="submit"]) {
  width: 100% !important;
}

/* Real native checkboxes remain focusable and receive native change events. */
body.ms-account-page #content input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 0 10px 0 0 !important;
  display: inline-block !important;
  border: 1px solid #b9aaa1 !important;
  border-radius: 2px !important;
  background: #fff !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer;
  vertical-align: middle !important;
}

body.ms-account-page #content input[type="checkbox"]:checked {
  border-color: var(--msa-wine) !important;
  background-color: var(--msa-wine) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.1 4.65 8.6 10 3.25' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

body.ms-account-page #content input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(119, 43, 53, .25) !important;
  outline-offset: 3px !important;
}

body.ms-account-page #content input[type="checkbox"] + label,
body.ms-account-page #content .form-group:has(input[type="checkbox"]) > label {
  width: auto !important;
  margin: 0 !important;
  display: inline !important;
  cursor: pointer;
}

body.ms-account-page #content input[type="checkbox"] + label::before,
body.ms-account-page #content input[type="checkbox"] + label::after,
body.ms-account-page #content .form-group:has(input[type="checkbox"]) > label::before,
body.ms-account-page #content .form-group:has(input[type="checkbox"]) > label::after {
  content: none !important;
  display: none !important;
}

/* --------------------------------------------------------------------------
 * Customer centre / account dashboard / profile / addresses / password
 * -------------------------------------------------------------------------- */

body.ms-account-page.customer-page:not(.ms-account-auth) #content-wrapper > .content-wrapper-in {
  display: grid !important;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 42px;
  align-items: start;
}

body.ms-account-page.customer-page:not(.ms-account-auth) .sidebar.sidebar-left {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.ms-account-page.customer-page:not(.ms-account-auth) .sidebar-inner {
  width: 100% !important;
}

body.ms-account-page .client-center-box {
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--msa-line) !important;
  border-radius: 2px !important;
  background: var(--msa-white) !important;
  box-shadow: none !important;
}

body.ms-account-page .client-center-box ul {
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  gap: 2px;
  list-style: none !important;
}

body.ms-account-page .client-center-box li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.ms-account-page .client-center-box a {
  position: relative;
  min-height: 48px;
  padding: 12px 34px 12px 38px !important;
  display: flex !important;
  align-items: center;
  border: 0 !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: var(--msa-ink) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}

body.ms-account-page .client-center-box a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 14px;
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .65;
  transform: translateY(-50%);
}

body.ms-account-page .client-center-box a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  opacity: .55;
  transform: translateY(-50%) rotate(45deg);
}

body.ms-account-page .client-center-box li.active > a,
body.ms-account-page .client-center-box a[aria-current="page"],
body.ms-account-page .client-center-box a:hover,
body.ms-account-page .client-center-box a:focus-visible {
  background: #fbf6f5 !important;
  color: var(--msa-wine) !important;
  box-shadow: inset 3px 0 0 var(--msa-wine) !important;
}

body.ms-account-page .client-center-box li.logout {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--msa-line);
}

body.ms-account-page .ms-account-menu-toggle {
  display: none;
}

body.ms-account-page.customer-page:not(.ms-account-auth) #content h1 {
  margin-bottom: 12px !important;
}

body.ms-account-page.customer-page #content :is(.box, fieldset.box, .shipping-addresses, .order-information) {
  border-color: var(--msa-line) !important;
  border-radius: 2px !important;
  background: var(--msa-white) !important;
  box-shadow: none !important;
}

body.ms-account-page.customer-page #content :is(.box, fieldset.box) {
  padding: 28px !important;
}

body.ms-account-page.customer-page #content :is(.box, fieldset.box) h2,
body.ms-account-page.customer-page #content .shipping-addresses h2 {
  margin: 0 0 22px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--msa-line) !important;
  color: var(--msa-ink) !important;
  font-size: 21px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

body.ms-account-page.customer-page #content form:not(#formSearchForm):not(#formNewsletter) {
  max-width: 720px;
}

body.ms-account-page.customer-page #content form:not(#formSearchForm):not(#formNewsletter) .form-group {
  margin-bottom: 18px !important;
}

body.ms-account-page.customer-page #content .ms-account-address-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px 20px;
}

body.ms-account-page.customer-page #content .ms-account-address-grid > :is(h2, legend, .form-legend),
body.ms-account-page.customer-page #content .ms-account-address-grid > .submit-wrapper {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

body.ms-account-page.customer-page #content .ms-account-address-grid > .form-group {
  grid-column: span 3;
  margin: 0 !important;
}

body.ms-account-page.customer-page #content .ms-account-address-grid > .ms-account-field--full {
  grid-column: 1 / -1 !important;
}

body.ms-account-page.customer-page #content .ms-account-address-grid > .ms-account-field--two-thirds {
  grid-column: span 4 !important;
}

body.ms-account-page.customer-page #content .ms-account-address-grid > .ms-account-field--third {
  grid-column: span 2 !important;
}

/* Dashboard tiles are understated rows, not coloured blocks. */
body.ms-account-page .ms-account-dashboard-links,
body.ms-account-page .customer-page-links,
body.ms-account-page .client-center-links {
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
  list-style: none !important;
}

body.ms-account-page :is(.ms-account-dashboard-links, .customer-page-links, .client-center-links) > * {
  margin: 0 !important;
  list-style: none !important;
}

body.ms-account-page :is(.ms-account-dashboard-links, .customer-page-links, .client-center-links) a {
  position: relative;
  min-height: 68px;
  padding: 17px 44px 17px 18px !important;
  display: flex !important;
  align-items: center;
  border: 1px solid var(--msa-line) !important;
  border-radius: 2px !important;
  background: #fff !important;
  color: var(--msa-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

body.ms-account-page :is(.ms-account-dashboard-links, .customer-page-links, .client-center-links) a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

body.ms-account-page :is(.ms-account-dashboard-links, .customer-page-links, .client-center-links) a:hover,
body.ms-account-page :is(.ms-account-dashboard-links, .customer-page-links, .client-center-links) a:focus-visible {
  border-color: var(--msa-wine) !important;
  background: #fbf6f5 !important;
  color: var(--msa-wine) !important;
}

/* --------------------------------------------------------------------------
 * Order history and detail
 * -------------------------------------------------------------------------- */

body.ms-account-page.customer-page .table {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--msa-line) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 2px !important;
  background: #fff !important;
  overflow: hidden;
}

body.ms-account-page.customer-page .table thead {
  position: static !important;
  background: var(--msa-soft) !important;
}

body.ms-account-page.customer-page .table tr {
  border-color: var(--msa-line) !important;
  background: #fff !important;
}

body.ms-account-page.customer-page .table th,
body.ms-account-page.customer-page .table td {
  padding: 15px 16px !important;
  border-color: var(--msa-line) !important;
  color: var(--msa-ink) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  text-align: left;
  vertical-align: middle !important;
}

body.ms-account-page.customer-page .table th {
  color: var(--msa-muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

body.ms-account-page.customer-page .table tbody tr:hover {
  background: #fcfaf8 !important;
}

body.ms-account-page.customer-page .table .cell--price {
  font-weight: 650 !important;
  white-space: nowrap;
}

body.ms-account-page.customer-page .table .cell--actions :is(a, .btn) {
  min-height: 38px !important;
  padding: 9px 14px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--msa-line-strong) !important;
  background: #fff !important;
  color: var(--msa-wine) !important;
  font-size: 10.5px !important;
}

body.ms-account-page.customer-page .table .cell--actions :is(a, .btn):hover,
body.ms-account-page.customer-page .table .cell--actions :is(a, .btn):focus-visible {
  border-color: var(--msa-wine) !important;
  background: #fbf6f5 !important;
}

body.ms-account-page.customer-page :is(.order-status, .status, [class*="status-"]) {
  display: inline-flex;
  min-height: 28px;
  padding: 5px 9px;
  align-items: center;
  border: 1px solid var(--msa-line);
  border-radius: 2px;
  background: var(--msa-soft);
  color: var(--msa-info);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
}

body.ms-account-page.customer-page .table-order-details .p-name__itemLink,
body.ms-account-page.customer-page .table-order-details .p-name__itemName {
  color: var(--msa-ink) !important;
  font-weight: 600 !important;
}

body.ms-account-page.customer-page .ms-account-order-product__name {
  min-width: 0;
}

body.ms-account-page.customer-page .ms-account-order-product__link {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  color: var(--msa-ink) !important;
  font-weight: 600 !important;
  overflow-wrap: anywhere;
}

body.ms-account-page.customer-page .ms-account-order-product__image-link {
  flex: 0 0 auto;
  display: inline-flex !important;
  text-decoration: none !important;
}

body.ms-account-page.customer-page .ms-account-order-product__image {
  width: 72px !important;
  height: 88px !important;
  display: block !important;
  object-fit: cover !important;
  border: 1px solid var(--msa-line) !important;
  border-radius: 2px !important;
  background: var(--msa-soft) !important;
}

body.ms-account-page.customer-page [data-ms-hidden-technical="CashOrCard"]:empty {
  display: none !important;
}

body.ms-account-page.customer-page .table-order-details .row-summary {
  background: var(--msa-soft) !important;
}

body.ms-account-page.customer-page .table-order-details .row-summary dl {
  margin: 8px 0 !important;
}

body.ms-account-page.customer-page .table-order-details .row-summary dt {
  color: var(--msa-muted) !important;
  font-weight: 500 !important;
}

body.ms-account-page.customer-page .table-order-details .row-summary dd {
  color: var(--msa-ink) !important;
  font-weight: 650 !important;
}

body.ms-account-page.customer-page .table-order-details .row-summary dd:last-child {
  color: var(--msa-wine) !important;
  font-size: 18px !important;
  font-weight: 750 !important;
}

body.ms-account-page.customer-page .shipping-addresses {
  padding: 0 !important;
}

body.ms-account-page.customer-page .table-shipping-addresses {
  min-width: 0 !important;
}

body.ms-account-page.customer-page .default-shipping-address {
  color: var(--msa-wine) !important;
  font-weight: 600 !important;
}

body.ms-account-page .ms-account-empty-state,
body.ms-account-page .empty-content.ms-account-empty-state {
  min-height: 320px;
  padding: clamp(38px, 6vw, 70px) 24px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid var(--msa-line) !important;
  border-radius: 2px !important;
  background: var(--msa-cream) !important;
  color: var(--msa-ink) !important;
  text-align: center;
}

body.ms-account-page .ms-account-empty-state__icon {
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  border: 1px solid #d7cac3;
  border-radius: 50%;
  color: var(--msa-wine);
}

body.ms-account-page .ms-account-empty-state__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

body.ms-account-page .ms-account-empty-state h2 {
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--msa-ink) !important;
  font-size: clamp(22px, 3vw, 30px) !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
}

body.ms-account-page .ms-account-empty-state p {
  max-width: 500px;
  margin: 0 0 24px !important;
  color: var(--msa-muted) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

body.ms-account-page .ms-account-empty-state__cta {
  min-height: 46px;
  padding: 12px 20px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--msa-wine) !important;
  border-radius: 2px !important;
  background: var(--msa-wine) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

/* --------------------------------------------------------------------------
 * Alerts and native Shoptet validation
 * -------------------------------------------------------------------------- */

body.ms-account-page #content .messages {
  position: static !important;
  width: 100% !important;
  max-width: 720px !important;
  min-height: 0 !important;
  margin: 0 auto 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.ms-account-page #content .messages > .msg-wrapper {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body.ms-account-page #content :is(
  .messages .msg,
  .alert,
  .form-error,
  .form-success,
  .ms-account-alert
) {
  scroll-margin-top: 118px;
  position: relative !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 0 18px !important;
  padding: 13px 16px 13px 47px !important;
  border: 1px solid #ead1d5 !important;
  border-left: 3px solid var(--msa-wine) !important;
  border-radius: 2px !important;
  background: #fcf5f6 !important;
  color: var(--msa-ink) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  transform: none !important;
}

body.ms-account-page #content .ms-account-alert strong,
body.ms-account-page #content .ms-account-validation-summary strong {
  margin-bottom: 2px;
  display: block;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.ms-account-page #content .ms-account-alert span,
body.ms-account-page #content .ms-account-validation-summary span {
  display: block;
  color: var(--msa-muted) !important;
}

body.ms-account-page #content .ms-account-invalid-field {
  scroll-margin-top: 118px;
  border-color: #b66a73 !important;
  box-shadow: 0 0 0 2px rgba(119, 43, 53, .07) !important;
}

body.ms-account-page #content .js-validated-element-wrapper::after,
body.ms-account-page #content .form-control-wrapper.success::after,
body.ms-account-page #content .form-group.success::after {
  color: #7b8b72 !important;
  opacity: .72 !important;
}

body.ms-account-page #content input:-webkit-autofill,
body.ms-account-page #content input:-webkit-autofill:hover,
body.ms-account-page #content input:-webkit-autofill:focus,
body #login input:-webkit-autofill,
body #login input:-webkit-autofill:hover,
body #login input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--msa-ink) !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  caret-color: var(--msa-ink) !important;
  transition: background-color 9999s ease-out 0s;
}

body.ms-account-page #content :is(
  .messages .msg,
  .alert,
  .form-error,
  .form-success,
  .ms-account-alert
)::before {
  content: "!" !important;
  position: absolute !important;
  top: 14px !important;
  left: 16px !important;
  width: 18px !important;
  height: 18px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(119, 43, 53, .38) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--msa-wine) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

body.ms-account-page #content :is(
  .messages .msg.msg-success,
  .alert.alert-success,
  .form-success,
  .ms-account-alert.ms-account-alert--success
) {
  border-color: #d9e1d4 !important;
  border-left-color: var(--msa-success) !important;
  background: #f6f8f4 !important;
}

body.ms-account-page #content :is(
  .messages .msg.msg-success,
  .alert.alert-success,
  .form-success,
  .ms-account-alert.ms-account-alert--success
)::before {
  content: "✓" !important;
  border-color: rgba(95, 116, 85, .38) !important;
  color: var(--msa-success) !important;
}

body.ms-account-page #content :is(
  .messages .msg.msg-info,
  .alert.alert-info,
  .ms-account-alert.ms-account-alert--info
) {
  border-color: #ded7d2 !important;
  border-left-color: var(--msa-info) !important;
  background: var(--msa-soft) !important;
}

body.ms-account-page #content :is(
  .messages .msg.msg-info,
  .alert.alert-info,
  .ms-account-alert.ms-account-alert--info
)::before {
  content: "i" !important;
  border-color: rgba(116, 102, 95, .38) !important;
  color: var(--msa-info) !important;
}

body.ms-account-page #content :is(
  .messages .msg.msg-warning,
  .alert.alert-warning,
  .ms-account-alert.ms-account-alert--warning
) {
  border-color: #eadfce !important;
  border-left-color: var(--msa-warning) !important;
  background: #fbf8f2 !important;
}

body.ms-account-page #content :is(
  .messages .msg.msg-warning,
  .alert.alert-warning,
  .ms-account-alert.ms-account-alert--warning
)::before {
  border-color: rgba(154, 107, 50, .38) !important;
  color: var(--msa-warning) !important;
}

body.ms-account-page #content :is(
  input.error-field,
  select.error-field,
  textarea.error-field,
  .has-error input,
  .has-error select,
  .has-error textarea
) {
  border-color: #b66a73 !important;
  box-shadow: 0 0 0 2px rgba(119, 43, 53, .07) !important;
}

body.ms-account-page #content .validator-msg.js-validator-msg.msg-error,
body.ms-account-page #content .form-group :is(.error, .field-validation-error, .validation-error) {
  position: relative !important;
  margin: 7px 0 0 !important;
  padding: 0 0 0 15px !important;
  display: block !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--msa-danger) !important;
  box-shadow: none !important;
  font-size: 10.5px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

body.ms-account-page #content .validator-msg.js-validator-msg.msg-error::before,
body.ms-account-page #content .form-group :is(.error, .field-validation-error, .validation-error)::before {
  content: "!" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--msa-wine) !important;
  font-weight: 700 !important;
}

body.ms-account-page .password-helper,
body.ms-account-page .password-strength,
body.ms-account-page [class*="password-strength"] {
  margin-top: 8px !important;
  color: var(--msa-muted) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

/* Forgotten password is an authentication card, not a two-column customer page. */
body.ms-account-page.ms-account-forgot.customer-page #content-wrapper > .content-wrapper-in,
body.ms-account-page.ms-account-reset.customer-page #content-wrapper > .content-wrapper-in {
  display: block !important;
  max-width: 1280px !important;
}

body.ms-account-page.ms-account-forgot .sidebar.sidebar-left,
body.ms-account-page.ms-account-reset .sidebar.sidebar-left {
  display: none !important;
}

body.ms-account-page.ms-account-forgot #content > .content-inner,
body.ms-account-page.ms-account-reset #content > .content-inner {
  max-width: none !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
 * Responsive rules
 * -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  body.ms-account-page.customer-page:not(.ms-account-auth) #content-wrapper > .content-wrapper-in {
    grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
    gap: 24px;
  }

  body.ms-account-page.customer-page .table th,
  body.ms-account-page.customer-page .table td {
    padding: 13px 12px !important;
  }
}

@media (min-width: 768px) {
  body.ms-account-page.customer-page .table .client-table-heading {
    display: none !important;
  }
}

@media (max-width: 767px) {
  body #login.dialog--fullscreen .dialog__wrapper {
    width: 100% !important;
    min-height: 100dvh !important;
    padding: 66px 16px 24px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  body #login .dialog__heading {
    font-size: clamp(31px, 9vw, 40px) !important;
  }

  body #login .ms-account-dialog__lede {
    margin-bottom: 22px !important;
    font-size: 13px !important;
  }

  body #login #formLoginIncluded {
    padding: 22px !important;
  }

  body #login #formLoginIncluded :is(input[type="email"], input[type="password"], input[type="text"]) {
    min-height: 52px !important;
    font-size: 16px !important;
  }

  body #login #formLoginIncluded .alternative-links {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px !important;
    text-align: center;
  }

  body #login #formLoginIncluded :is(.ms-account-register-label, .ms-account-register-link, .ms-account-forgot-link) {
    grid-row: auto;
    grid-column: 1;
    justify-self: center;
  }

  body #login #formLoginIncluded .ms-account-register-label {
    margin-top: 8px;
  }

  body.ms-account-page #content-wrapper > .content-wrapper-in {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  body.ms-account-page #content {
    padding-bottom: 54px !important;
  }

  body.ms-account-page #content h1 {
    margin-bottom: 10px !important;
    font-size: clamp(31px, 9vw, 40px) !important;
  }

  body.ms-account-page .ms-account-lede {
    margin-bottom: 22px !important;
    font-size: 13px !important;
  }

  body.ms-account-page #content :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    input[type="password"],
    input[type="number"],
    select,
    textarea
  ) {
    min-height: 52px !important;
    font-size: 16px !important;
  }

  body.ms-account-page .ms-account-auth-card {
    width: 100% !important;
    padding: 22px !important;
  }

  body.ms-account-page #formLogin .alternative-links {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    text-align: center;
  }

  body.ms-account-page #formLogin .alternative-links .ms-account-register-label,
  body.ms-account-page #formLogin .alternative-links .ms-account-register-link,
  body.ms-account-page #formLogin .alternative-links .ms-account-forgot-link {
    grid-row: auto;
    grid-column: 1;
    justify-self: center;
  }

  body.ms-account-page #formLogin .alternative-links .ms-account-register-label {
    margin-top: 8px;
  }

  body.ms-account-page #register-form :is(.box, fieldset.stay-in-touch, fieldset.ms-account-confirmation) {
    padding: 22px !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  body.ms-account-page #register-form :is(
    .form-group,
    .ms-account-field--full,
    .ms-account-field--half,
    .ms-account-field--two-thirds,
    .ms-account-field--third
  ) {
    grid-column: 1 !important;
  }

  body.ms-account-page #register-form #company-info {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  body.ms-account-page #register-form #company-info > .form-group {
    grid-column: 1 !important;
  }

  body.ms-account-page.customer-page:not(.ms-account-auth) #content-wrapper > .content-wrapper-in {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  body.ms-account-page.customer-page:not(.ms-account-auth) .client-center-box {
    padding: 6px !important;
  }

  body.ms-account-page.customer-page:not(.ms-account-auth) .ms-account-menu-toggle {
    width: 100% !important;
    min-height: 50px !important;
    padding: 13px 46px 13px 16px !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    border: 1px solid var(--msa-line) !important;
    border-radius: 2px !important;
    background: var(--msa-cream) !important;
    color: var(--msa-ink) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 650 !important;
    text-align: left !important;
  }

  body.ms-account-page.customer-page:not(.ms-account-auth) .ms-account-menu-toggle i {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 8px;
    height: 8px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .2s ease;
  }

  body.ms-account-page.customer-page:not(.ms-account-auth) .ms-account-menu-toggle[aria-expanded="true"] i {
    transform: translateY(-30%) rotate(225deg);
  }

  body.ms-account-page.customer-page:not(.ms-account-auth) .ms-account-menu-toggle + .client-center-box {
    display: none !important;
    margin-top: 8px !important;
  }

  body.ms-account-page.customer-page:not(.ms-account-auth) .ms-account-menu-toggle + .client-center-box.is-open {
    display: block !important;
  }

  body.ms-account-page.customer-page:not(.ms-account-auth) .client-center-box ul {
    grid-template-columns: minmax(0, 1fr);
  }

  body.ms-account-page.customer-page #content :is(.box, fieldset.box) {
    padding: 22px !important;
  }

  body.ms-account-page.customer-page #content .ms-account-address-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  body.ms-account-page.customer-page #content .ms-account-address-grid > :is(
    .form-group,
    .ms-account-field--full,
    .ms-account-field--two-thirds,
    .ms-account-field--third
  ) {
    grid-column: 1 !important;
  }

  body.ms-account-page :is(.ms-account-dashboard-links, .customer-page-links, .client-center-links) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ms-account-page.customer-page .table,
  body.ms-account-page.customer-page .table tbody {
    width: 100% !important;
    display: block !important;
    border: 0 !important;
    overflow: visible !important;
  }

  body.ms-account-page.customer-page .table thead {
    display: none !important;
  }

  body.ms-account-page.customer-page .table tr {
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 14px 16px !important;
    display: block !important;
    border: 1px solid var(--msa-line) !important;
    border-radius: 2px !important;
    background: #fff !important;
  }

  body.ms-account-page.customer-page .table td,
  body.ms-account-page.customer-page .table-mobile-enriched td {
    width: 100% !important;
    min-height: 38px;
    padding: 8px 0 !important;
    display: grid !important;
    grid-template-columns: minmax(105px, .78fr) minmax(0, 1.22fr) !important;
    gap: 12px !important;
    align-items: start;
    border: 0 !important;
    border-bottom: 1px solid #eee8e3 !important;
    text-align: left !important;
  }

  body.ms-account-page.customer-page .table td:last-child {
    border-bottom: 0 !important;
  }

  body.ms-account-page.customer-page .table td:empty {
    display: none !important;
  }

  body.ms-account-page.customer-page .table .client-table-heading {
    width: auto !important;
    display: block !important;
    color: var(--msa-muted) !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    letter-spacing: .035em;
    text-transform: uppercase;
  }

  body.ms-account-page.customer-page .table .client-table-heading::after {
    content: "" !important;
  }

  body.ms-account-page.customer-page .table .cell--actions :is(a, .btn) {
    width: 100% !important;
  }

  body.ms-account-page.customer-page .table-order-details .ms-account-order-product__name,
  body.ms-account-page.customer-page .table-order-details td:first-child {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
  }

  body.ms-account-page.customer-page .ms-account-order-product__image {
    width: 64px !important;
    height: 80px !important;
  }

  body.ms-account-page .ms-account-empty-state {
    min-height: 290px;
    padding: 42px 20px !important;
  }

  /* Global rule requested for account/auth pages: reviews stay, newsletter is hidden. */
  body.ms-account-page .footer-newsletter.ms-newsletter .ms-newsletter__inner,
  body.ms-account-page .footer-newsletter.ms-newsletter.ms-newsletter--reviews-ready .ms-newsletter__inner {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  body.ms-account-page .footer-newsletter.ms-newsletter .ms-newsletter__newsletter {
    display: none !important;
  }

  body.ms-account-page .footer-newsletter.ms-newsletter:not(.ms-newsletter--reviews-ready) {
    display: none !important;
  }

  body.ms-account-page .footer-newsletter.ms-newsletter .ms-newsletter__reviews {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: grid !important;
  }
}

@media (max-width: 430px) {
  body.ms-account-page #content-wrapper > .content-wrapper-in {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  body.ms-account-page .ms-account-auth-card,
  body.ms-account-page #register-form :is(.box, fieldset.stay-in-touch, fieldset.ms-account-confirmation),
  body.ms-account-page.customer-page #content :is(.box, fieldset.box) {
    padding: 20px !important;
  }

  body.ms-account-page #formLogin .login-btn {
    padding-right: 12px !important;
    padding-left: 42px !important;
    font-size: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ms-account-page *,
  body.ms-account-page *::before,
  body.ms-account-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}