/* Semantic fallback for the body, outside the .ms-ui token scope. */
.storefront-page {
  --ms-color-action-primary-background: var(--ms-color-blue-600, #2563EB);
  --ms-color-action-primary-hover: var(--ms-color-blue-700, #1D4ED8);
  --ms-color-action-primary-active: var(--ms-color-blue-800, #1E40AF);
  --ms-color-action-primary-text: var(--ms-color-white, #FFFFFF);
  --ms-color-background-canvas: var(--ms-color-neutral-50, #F8FAFC);
  --ms-color-background-surface: var(--ms-color-white, #FFFFFF);
  --ms-color-text-primary: var(--ms-color-neutral-900, #0F172A);
  --ms-color-text-muted: var(--ms-color-neutral-600, #475569);
  --ms-color-text-link: var(--ms-color-action-primary-hover);
  --ms-color-text-link-hover: var(--ms-color-action-primary-active);

  /* One-way aliases for legacy consumers. */
  --storefront-background: var(--ms-color-background-canvas);
  --storefront-text: var(--ms-color-text-primary);
  background: var(--storefront-background);
  color: var(--storefront-text);
  min-height: 100vh;
}

/* Existing identities: color overrides only, never structural tokens. */
.storefront-page.storefront-theme-default {
  --ms-color-action-primary-background: #0d6efd;
  --ms-color-background-canvas: #f4f7fb;
  --ms-color-text-primary: #212529;
  --ms-color-text-muted: #5c6670;
}

.storefront-page.storefront-theme-professional {
  --ms-color-action-primary-background: #1f2937;
  --ms-color-action-primary-hover: var(--ms-color-text-primary);
  --ms-color-action-primary-active: var(--ms-color-action-primary-hover);
  --ms-color-background-canvas: #eef1f4;
  --ms-color-text-primary: #172033;
  --ms-color-text-muted: #526071;
  --ms-color-text-link: var(--ms-color-action-primary-background);
  --ms-color-text-link-hover: var(--ms-color-action-primary-hover);
}

.storefront-page.storefront-theme-warm {
  --ms-color-action-primary-background: #9a3412;
  --ms-color-action-primary-hover: var(--ms-color-text-primary);
  --ms-color-action-primary-active: var(--ms-color-action-primary-hover);
  --ms-color-background-surface: #fffaf5;
  --ms-color-background-canvas: #fff3e8;
  --ms-color-text-primary: #431407;
  --ms-color-text-muted: #7c4a35;
  --ms-color-text-link: var(--ms-color-action-primary-background);
  --ms-color-text-link-hover: var(--ms-color-action-primary-hover);
}

/* Re-declare on the actual token root; body aliases are already resolved. */
.storefront-page .ms-ui {
  --ms-color-action-primary-background: inherit;
  --ms-color-action-primary-hover: inherit;
  --ms-color-action-primary-active: inherit;
  --ms-color-action-primary-text: inherit;
  --ms-color-background-canvas: inherit;
  --ms-color-background-surface: inherit;
  --ms-color-text-primary: inherit;
  --ms-color-text-muted: inherit;
  --ms-color-text-link: inherit;
  --ms-color-text-link-hover: inherit;
}

/* Public shell and opening: shared composition across all themes. */
.storefront-shell {
  padding-block: var(--ms-space-8);
}

.storefront-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ms-space-4);
  margin-block-end: var(--ms-section-gap);
  padding-block: var(--ms-space-4);
  padding-inline: var(--ms-space-6);
  background: var(--ms-color-background-surface);
  color: var(--ms-color-text-primary);
  border-radius: var(--ms-surface-radius);
}

.storefront-hero__identity {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--ms-gap-related);
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.storefront-hero .storefront-hero__title {
  margin: var(--ms-space-0);
}

.storefront-hero .storefront-hero__description {
  max-width: var(--ms-content-max-width-form);
  margin: var(--ms-space-0);
  color: var(--ms-color-text-muted);
}

/* Current offers: a distinct commercial unit, without nested card surfaces. */
.storefront-offers {
  display: flex;
  flex-direction: column;
  gap: var(--ms-gap-related);
}

.storefront-offers__label {
  margin: var(--ms-space-0);
  font-size: var(--ms-type-label-size);
  font-weight: var(--ms-type-label-weight);
  line-height: var(--ms-type-label-line-height);
  letter-spacing: var(--ms-type-label-letter-spacing);
  color: var(--ms-color-text-muted);
}

.storefront-offers__list {
  display: grid;
  gap: var(--ms-gap-group);
  min-width: 0;
}

.storefront-offer {
  display: grid;
  gap: var(--ms-gap-group);
  min-width: 0;
  padding: var(--ms-inset-surface-expanded);
  color: var(--ms-color-text-primary);
  background-color: var(--ms-color-background-surface);
  border: var(--ms-border-width-default) var(--ms-border-style-default) var(--ms-border-color-default);
  border-radius: var(--ms-surface-radius);
  box-shadow: var(--ms-shadow-xs);
  overflow-wrap: anywhere;
}

.storefront-offer__media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ms-radius-md);
}

.storefront-offer__content {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-3);
  min-width: 0;
}

.storefront-offer__title,
.storefront-offer__target,
.storefront-offer__price,
.storefront-offer__regular-price,
.storefront-offer__description,
.storefront-offer__details {
  margin: var(--ms-space-0);
}

.storefront-offer .ms-price__current {
  font-size: var(--ms-type-metric-size);
  font-weight: var(--ms-type-metric-weight);
  line-height: var(--ms-type-metric-line-height);
}

.storefront-offer__regular-price,
.storefront-offer__details {
  font-size: var(--ms-type-body-small-size);
  line-height: var(--ms-type-body-small-line-height);
  color: var(--ms-color-text-muted);
}

.storefront-offer .ms-button {
  align-self: flex-start;
}

@media (min-width: 48rem) {
  .storefront-offer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
  }

  .storefront-offer__content {
    grid-column: 1 / -1;
  }

  .storefront-offer__media + .storefront-offer__content {
    grid-column: 2;
  }
}

/* Catalog: one shared, lower-emphasis card language for products and services. */
.storefront-catalog {
  display: flex;
  flex-direction: column;
  gap: var(--ms-gap-group);
}

.storefront-catalog > .storefront-catalog__title {
  margin: var(--ms-space-0);
  color: var(--ms-color-text-primary);
}

.storefront-catalog__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--ms-gap-group);
  min-width: 0;
}

.storefront-catalog-card {
  display: flex;
  flex-direction: column;
  gap: var(--ms-gap-group);
  min-width: 0;
  padding: var(--ms-inset-surface);
  color: var(--ms-color-text-primary);
  background-color: var(--ms-color-background-surface);
  border: var(--ms-border-width-default) var(--ms-border-style-default) var(--ms-border-color-subtle);
  border-radius: var(--ms-surface-radius);
  box-shadow: var(--ms-shadow-xs);
  overflow-wrap: anywhere;
}

.storefront-catalog-card__media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ms-radius-md);
}

.storefront-catalog-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-3);
  min-width: 0;
}

.storefront-catalog-card__title,
.storefront-catalog-card__price,
.storefront-catalog-card__description {
  margin: var(--ms-space-0);
}

.storefront-catalog-card__description {
  color: var(--ms-color-text-muted);
}

@media (min-width: 48rem) {
  .storefront-catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .storefront-catalog__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Public business details: compact label/value units, without invented links. */
.storefront-public-information {
  display: flex;
  flex-direction: column;
  gap: var(--ms-gap-group);
  min-width: 0;
}

.storefront-public-information > .storefront-public-information__title {
  margin: var(--ms-space-0);
  color: var(--ms-color-text-primary);
}

.storefront-public-information__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--ms-gap-group);
  min-width: 0;
}

.storefront-public-information__item {
  display: flex;
  flex-direction: column;
  gap: var(--ms-gap-related);
  min-width: 0;
  margin: var(--ms-space-0);
  padding: var(--ms-inset-surface);
  color: var(--ms-color-text-primary);
  background-color: var(--ms-color-background-surface);
  border: var(--ms-border-width-default) var(--ms-border-style-default) var(--ms-border-color-subtle);
  border-radius: var(--ms-surface-radius);
  overflow-wrap: anywhere;
}

.storefront-public-information__item > strong {
  font-size: var(--ms-type-label-size);
  font-weight: var(--ms-type-label-weight);
  line-height: var(--ms-type-label-line-height);
  color: var(--ms-color-text-muted);
}

/* Contact composition only; form controls and validation remain unchanged. */
.storefront-contact.storefront-contact-panel {
  display: flex;
  flex-direction: column;
  gap: var(--ms-gap-field);
  width: 100%;
  max-width: var(--ms-content-max-width-form);
  padding: var(--ms-inset-surface-expanded);
  color: var(--ms-color-text-primary);
  background-color: var(--ms-color-background-surface);
  border: var(--ms-border-width-default) var(--ms-border-style-default) var(--ms-border-color-default);
  border-radius: var(--ms-surface-radius);
  box-shadow: var(--ms-shadow-xs);
}

.storefront-contact > .storefront-contact-panel__title {
  margin: var(--ms-space-0);
  color: var(--ms-color-text-primary);
}

.storefront-contact-panel > form {
  width: 100%;
  min-width: 0;
}

.storefront-consent.ms-form-field {
  display: grid;
  grid-template-columns: var(--ms-interaction-target-min) minmax(0, 1fr);
  align-items: start;
  gap: var(--ms-gap-related) var(--ms-space-3);
  margin-block-start: var(--ms-gap-group);
}

.storefront-consent > .storefront-consent__label,
.storefront-consent > .errorlist {
  grid-column: 2;
}

.storefront-consent > .storefront-consent__label {
  min-height: var(--ms-interaction-target-min);
}

.storefront-consent.ms-form-field > .storefront-consent__control {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  width: var(--ms-interaction-target-min);
  height: var(--ms-interaction-target-min);
  cursor: pointer;
}

.storefront-consent__control > input[type="checkbox"] {
  flex: none;
  width: var(--ms-space-4);
  height: var(--ms-space-4);
  margin-block-start: var(--ms-space-1);
  accent-color: var(--ms-color-action-primary-background);
  appearance: auto;
  cursor: pointer;
}

.storefront-consent__control > input[type="checkbox"]:not(:disabled):not([aria-disabled="true"]):hover {
  accent-color: var(--ms-color-action-primary-hover);
}

.storefront-consent__control > input[type="checkbox"][aria-invalid="true"] {
  box-shadow: var(--ms-space-0) var(--ms-space-0) var(--ms-space-0) var(--ms-border-width-strong) var(--ms-color-control-border-error);
}

.storefront-footer {
  margin-block-start: var(--ms-section-gap);
}

.storefront-footer__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-gap-related) var(--ms-gap-group);
  padding-block-start: var(--ms-space-4);
  padding-block-end: var(--ms-space-4);
  font-size: var(--ms-type-body-small-size);
  line-height: var(--ms-type-body-small-line-height);
  color: var(--ms-color-text-muted);
  border-block-start: var(--ms-border-width-default) var(--ms-border-style-default) var(--ms-border-color-subtle);
}

.storefront-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-interaction-target-min);
}

.storefront-footer__attribution {
  overflow-wrap: anywhere;
}

.storefront-confirmation-shell {
  padding-block: var(--ms-space-8);
}

.storefront-confirmation {
  display: flex;
  justify-content: center;
}

.storefront-confirmation__panel {
  display: flex;
  flex-direction: column;
  gap: var(--ms-gap-group);
  width: 100%;
  max-width: var(--ms-content-max-width-form);
  padding: var(--ms-inset-surface-expanded);
  overflow-wrap: anywhere;
}

.storefront-confirmation__header {
  margin-block-end: var(--ms-space-0);
}

.storefront-confirmation__message,
.storefront-confirmation__continuation {
  margin: var(--ms-space-0);
}

.storefront-confirmation__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-gap-related);
}

.storefront-privacy-shell {
  min-height: 100vh;
  padding-block: var(--ms-space-8);
  color: var(--ms-color-text-primary);
  background-color: var(--ms-color-background-canvas);
}

.storefront-privacy__content {
  max-width: 50rem;
  margin-inline: auto;
  overflow-wrap: anywhere;
}

.storefront-privacy__header {
  margin-block-end: var(--ms-section-gap);
}

.storefront-privacy__version {
  color: var(--ms-color-text-muted);
}

.storefront-privacy__section + .storefront-privacy__section {
  margin-block-start: var(--ms-section-gap);
}

.storefront-privacy__section > :last-child {
  margin-block-end: var(--ms-space-0);
}

/* Existing shared structural styles. */
.storefront-section {
  margin-top: 2rem;
}

.storefront-contact {
  margin-bottom: 1rem;
}

.storefront-page .text-muted {
  /* Bootstrap already consumes this variable, including its text utility. */
  --bs-secondary-color: var(--ms-color-text-muted);
  color: var(--ms-color-text-muted);
}

.storefront-page a:where(:not(.btn, .ms-button)) {
  color: var(--ms-color-text-link);
}