/* Availability notice follows the site's active palette. */
.ps-emailalerts--product {
  --bs-body-color: var(--sn-text);
  --bs-heading-color: var(--sn-text);
  --bs-secondary-color: var(--sn-text-muted);
  --bs-tertiary-bg: var(--sn-bg-card);
}
html body .ps-emailalerts--product .ps-emailalerts__content {
  padding: clamp(1rem, 2vw, 1.5rem);
  background: var(--sn-bg-card) !important;
  color: var(--sn-text) !important;
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-radius-md);
  gap: .875rem;
}
html body .ps-emailalerts--product .ps-emailalerts__content :is(p,h2,h3,h4,.h4,label) {
  color: var(--sn-text) !important;
  background: transparent;
}
html body .ps-emailalerts--product .form-control {
  background: var(--sn-bg-elevated);
  color: var(--sn-text);
  border-color: var(--sn-line-strong);
  min-height: 3rem;
}
html body .ps-emailalerts--product .form-control::placeholder { color: var(--sn-text-muted); }
/* PayPal brand marks have a white surface: never inherit white storefront text. */
html body :is(.paypal-marks, .ps_checkout-mark) .paypal-mark {
  background: #fff !important;
  color: #18181b !important;
  border-color: #d4d4d8;
  color-scheme: only light;
}
html body :is(.paypal-marks, .ps_checkout-mark) .paypal-mark .paypal-button-text {
  color: #18181b !important;
  background: transparent !important;
}

/* Cover checkout and express hosts; mask only the iframe so PayPal menus can expand. */
html body :is(#ps-checkout-express-button, #ps_checkout-paypal-buttons-container, .ps_checkout-button[data-funding-source="paypal"]) .paypal-buttons-context-iframe {
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body :is(#ps-checkout-express-button, #ps_checkout-paypal-buttons-container, .ps_checkout-button[data-funding-source="paypal"]) .paypal-buttons-context-iframe > iframe {
  border-radius: inherit !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  -webkit-clip-path: inset(0 round 999px);
  clip-path: inset(0 round 999px);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Checkout progress uses the same surface and text palette as the order panels. */
body#checkout .checkout-steps {
  --bs-body-color: var(--sn-text);
  --bs-secondary-color: var(--sn-text-muted);
  --bs-tertiary-bg: var(--sn-bg-card);
  --bs-border-color: var(--sn-line);
  padding-block: 1rem;
  background: var(--sn-bg-card);
  color: var(--sn-text);
  border-bottom-color: var(--sn-line);
}
body#checkout .checkout-steps__btn,
body#checkout .checkout-steps__title { color: var(--sn-text); }
body#checkout .checkout-steps__subtitle,
body#checkout .checkout-steps__btn:disabled { color: var(--sn-text-muted); }
body#checkout .checkout-steps__number {
  color: var(--sn-text);
  background: var(--sn-bg-elevated);
  border: 1px solid var(--sn-line-strong);
}
body#checkout .checkout-steps__step::before,
body#checkout .checkout-steps__step::after { background: var(--sn-line-strong); }
body#checkout .checkout-steps__step--current .checkout-steps__number {
  color: #18181b;
  background: var(--sn-accent);
  border-color: var(--sn-accent);
}
body#checkout .checkout-steps__step--current .checkout-steps__btn { color: var(--sn-text); font-weight: 600; }
body#checkout .checkout-steps__step--success .checkout-steps__number {
  color: #052e16;
  background: var(--sn-success);
  border-color: var(--sn-success);
}
body#checkout .checkout-steps__step--success .checkout-steps__btn { color: var(--sn-text); }
body#checkout .checkout-steps__step--success::before,
body#checkout .checkout-steps__step--success::after { background: var(--sn-success); }
body#checkout .checkout-steps .progress-ring__text { fill: var(--sn-text); }
body#checkout .checkout-steps .progress-ring__background-circle { stroke: var(--sn-line-strong); }
body#checkout .checkout-steps .progress-ring__circle { stroke: var(--sn-accent); }
@media (min-width: 768px) { body#checkout .checkout-steps { padding-block: 1.5rem; } }

/* Distinguish the password-reset action from the surrounding login panel. */
html body #login-form .buttons-wrapper > a.btn-basic[rel="nofollow"] {
  --bs-btn-color: var(--sn-text);
  --bs-btn-bg: var(--sn-accent-subtle);
  --bs-btn-border-color: var(--sn-accent);
  --bs-btn-hover-color: var(--sn-text);
  --bs-btn-hover-bg: color-mix(in srgb, var(--sn-accent) 22%, var(--sn-bg-card));
  --bs-btn-hover-border-color: var(--sn-accent-hover);
  background: var(--sn-accent-subtle);
  color: var(--sn-text);
  border: 1px solid var(--sn-accent);
  border-radius: var(--sn-radius-md);
  padding: .75rem 1rem;
  font-weight: 600;
  text-decoration: none;
}
html body #login-form .buttons-wrapper > a.btn-basic[rel="nofollow"]:hover {
  background: color-mix(in srgb, var(--sn-accent) 22%, var(--sn-bg-card));
  border-color: var(--sn-accent-hover);
}
html body #login-form .buttons-wrapper > a.btn-basic[rel="nofollow"]:focus-visible {
  outline: 2px solid var(--sn-accent);
  outline-offset: 3px;
}

/* Separate the password visibility control from its input. */
html body .input-group.password-field > button[data-ps-action="toggle-password"] {
  margin-inline-start: .5rem !important;
  border-radius: var(--sn-radius-sm) !important;
}
html body .input-group.password-field > .form-control {
  min-width: 0;
  border-radius: var(--sn-radius-sm) !important;
}

/* Keep sign-in errors visible and separate from the login controls. */
html body .sn-auth-error {
  color: var(--sn-text);
  background: color-mix(in srgb, var(--sn-danger) 12%, var(--sn-bg-card));
  border: 1px solid var(--sn-danger);
  border-radius: var(--sn-radius-md);
  padding: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: 1.5rem;
  scroll-margin-top: calc(var(--sn-header-h) + 1rem);
  overflow-wrap: anywhere;
}
html body .sn-auth-error .h4, html body .sn-auth-error p, html body .sn-auth-error li { color: var(--sn-text); }
html body .sn-auth-error .h4 { margin-bottom: .75rem; }
html body .sn-auth-error__messages { font-weight: 600; }
html body .sn-auth-error__messages, html body .sn-auth-error__help { padding-inline-start: 1.25rem; }
html body .sn-auth-error__help { margin-bottom: 0; }
html body .sn-auth-error li + li { margin-top: .5rem; }
html body .sn-auth-error a { color: var(--sn-text); text-decoration: underline; text-underline-offset: .2em; }
html body .sn-auth-error a:hover { color: var(--sn-accent-hover); }
html body .sn-auth-error:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 3px; }

/* Shared customer navigation and account dashboard surfaces. */
body#my-account #center-column {
  --bs-body-color: var(--sn-text);
  --bs-heading-color: var(--sn-text);
  --bs-secondary-color: var(--sn-text-muted);
  --bs-border-color: var(--sn-line);
  padding-block: clamp(1.25rem, 3vw, 2.5rem);
  color: var(--sn-text);
}
body#my-account #center-column > .row { row-gap: 1.5rem; }
/* Customer layout shared by the dashboard, profile forms and module pages. */
html body #center-column .page-header:has(~ .page-content--customer) {
  margin-bottom: 1.5rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  color: var(--sn-text);
  background: var(--sn-bg-card);
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-radius-md);
  box-shadow: none;
}
html body #center-column .page-header:has(~ .page-content--customer) :is(h1, .page-title-section) {
  margin: 0;
  padding: 0;
  color: var(--sn-text);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow-wrap: anywhere;
}
/* Leave a clear gap before the footer on every customer profile page. */
html body #center-column:has(.page-content--customer) {
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
html body .account-menu--sidebar .account-menu__link {
  background: var(--sn-bg-card);
  color: var(--sn-text);
  border-color: var(--sn-line);
}
html body .account-menu--sidebar .account-menu__link:hover,
html body .account-menu--sidebar .account-menu__link--active {
  background: var(--sn-bg-elevated);
  border-color: var(--sn-accent);
}
body#my-account .page-header :is(h1, h2, p) { color: var(--sn-text); }
body#my-account .page-content--customer { padding: 0; background: transparent; border: 0; }
html body .account-menu--sidebar {
  padding: 1.25rem;
  background: var(--sn-bg-card);
  color: var(--sn-text);
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-radius-md);
}
html body .account-menu__title { color: var(--sn-text); margin-bottom: 1rem; }
html body .account-menu__nav { display: grid; gap: .5rem; }
body#my-account .account-menu--main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 0;
  background: transparent;
}
html body .account-menu__link {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  padding: .875rem 1rem;
  color: var(--sn-text);
  background: var(--sn-bg-card);
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-radius-md);
  text-decoration: none;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
body#my-account .account-menu--main > .account-menu__link {
  flex-direction: column;
  justify-content: center;
  min-height: 9rem;
  padding: 1.5rem;
  text-align: center;
}
html body .account-menu__icon { color: var(--sn-accent); flex-shrink: 0; }
html body .account-menu__link:hover,
html body .account-menu__link--active {
  color: var(--sn-text);
  background: var(--sn-bg-elevated);
  border-color: var(--sn-accent);
}
html body .account-menu__link:focus-visible {
  outline: 2px solid var(--sn-accent);
  outline-offset: 3px;
}
@media (max-width: 575.98px) {
  body#my-account .account-menu--main { grid-template-columns: minmax(0, 1fr); }
  body#my-account .account-menu--main > .account-menu__link {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 4.5rem;
    padding: 1.125rem;
    text-align: start;
  }
}

/* Address cards inherit the readable customer palette, including inner surfaces. */
html body #center-column .address-card,
html body #center-column .address-card__container,
html body #center-column .address-card__header,
html body #center-column .address-card__actions {
  color: var(--sn-text);
  background: var(--sn-bg-card);
  border-color: var(--sn-line);
}
html body #center-column .address-card { border: 1px solid var(--sn-line); border-radius: var(--sn-radius-md); }
html body #center-column .address-card__container { padding: 1.5rem; border-radius: inherit; }
html body #center-column .address-card__header { padding-bottom: .75rem; }
html body #center-column .address-card__alias,
html body #center-column .address-card__content,
html body #center-column .address-card__extra,
html body #center-column .address-card__add-text { color: var(--sn-text); }
html body #center-column .address-card__content { margin-bottom: 1rem; line-height: 1.65; }
html body #center-column .address-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sn-line);
}
html body #center-column :is(.address-card__edit, .address-card__delete) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .625rem 1rem;
  border: 1px solid;
  border-radius: var(--sn-radius-sm);
  font-weight: 600;
  font-size: .875rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
html body #center-column .address-card__edit {
  color: #fff !important;
  background: #9a3412;
  border-color: #9a3412;
}
html body #center-column .address-card__edit:hover {
  color: #fff !important;
  background: #7c2d12;
  border-color: #7c2d12;
}
html body #center-column .address-card__delete {
  color: var(--sn-danger) !important;
  background: transparent;
  border-color: color-mix(in srgb, var(--sn-danger) 55%, var(--sn-line));
}
html body #center-column .address-card__delete:hover {
  background: color-mix(in srgb, var(--sn-danger) 10%, var(--sn-bg-card));
  border-color: var(--sn-danger);
}
html body #center-column .address-card--add-address { padding: 1.5rem; }
html body #center-column .address-card a:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 3px; }

/* Give the adjacent brand buttons a little more separation. */
.sn-header__nav-link--brand + .sn-header__nav-link--brand {
  margin-inline-start: 2px;
}