/* Controlled page characters: editorial flow, spatial canvas, focused task,
   and status-first management. */

body.product-page .mc-page-shell {
  inline-size: min(
    calc(100% - (2 * var(--mc-page-gutter))),
    var(--mc-content-width)
  );
  margin-inline: auto;
  padding-block: clamp(var(--mc-space-8), 7vw, var(--mc-space-20));
}

body.product-page .mc-editorial-flow,
body.product-page [data-product-pattern="editorial"] {
  display: grid;
  grid-template-columns: minmax(0, var(--mc-reading-width)) minmax(14rem, 20rem);
  gap: clamp(var(--mc-space-8), 6vw, var(--mc-space-16));
  inline-size: min(
    calc(100% - (2 * var(--mc-page-gutter))),
    var(--mc-content-width)
  );
  margin-inline: auto;
  align-items: start;
}

body.product-page :where(.mc-editorial-flow__stream,
  [data-editorial-stream]) {
  display: grid;
  gap: var(--mc-space-8);
  min-inline-size: 0;
}

body.product-page :where(.mc-editorial-flow__aside,
  [data-editorial-aside]) {
  position: sticky;
  inset-block-start: var(--mc-space-6);
  display: grid;
  gap: var(--mc-space-4);
}

body.product-page .mc-spatial-surface,
body.product-page [data-product-pattern="spatial"] {
  position: relative;
  isolation: isolate;
  inline-size: 100%;
  min-block-size: min(72dvh, 52rem);
  overflow: clip;
  color: var(--mc-ink);
  background: #eeece5;
  border-block: 1px solid var(--mc-line);
}

body.product-page :where(.mc-spatial-surface__context,
  [data-spatial-context]) {
  position: absolute;
  z-index: 2;
  inset-block-end: var(--mc-space-4);
  inset-inline-start: var(--mc-page-gutter);
  display: grid;
  gap: var(--mc-space-2);
  max-inline-size: min(24rem, calc(100% - (2 * var(--mc-page-gutter))));
  padding: var(--mc-space-4);
  background: rgb(251 250 246 / 96%);
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-radius-compact);
  box-shadow: var(--mc-shadow-low);
}

body.product-page .mc-focused-task,
body.product-page [data-product-pattern="focused-task"] {
  display: grid;
  inline-size: min(
    calc(100% - (2 * var(--mc-page-gutter))),
    58rem
  );
  margin-inline: auto;
  padding-block: clamp(var(--mc-space-8), 8vw, var(--mc-space-20));
}

body.product-page :where(.mc-focused-task__surface,
  [data-focused-task-surface]) {
  display: grid;
  gap: clamp(var(--mc-space-6), 4vw, var(--mc-space-10));
  padding: clamp(var(--mc-space-5), 5vw, var(--mc-space-12));
  background: var(--mc-paper);
  border-radius: var(--mc-radius-major);
  box-shadow: var(--mc-shadow-low);
}

body.product-page :where(.mc-focused-task__actions,
  [data-focused-task-actions]) {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--mc-space-3);
  padding-block-start: var(--mc-space-4);
  border-block-start: 1px solid var(--mc-line);
}

body.product-page .mc-status-first,
body.product-page [data-product-pattern="status-first"] {
  display: grid;
  gap: var(--mc-space-8);
  inline-size: min(
    calc(100% - (2 * var(--mc-page-gutter))),
    72rem
  );
  margin-inline: auto;
  padding-block: clamp(var(--mc-space-8), 7vw, var(--mc-space-16));
}

body.product-page :where(.mc-status-first__summary,
  [data-status-first-summary]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--mc-space-6);
  align-items: end;
  padding-block-end: var(--mc-space-6);
  border-block-end: 1px solid var(--mc-line-strong);
}

body.product-page :where(.mc-status-first__list,
  [data-status-first-list]) {
  display: grid;
  gap: var(--mc-space-3);
}

@media (max-width: 48rem) {
  body.product-page .mc-editorial-flow,
  body.product-page [data-product-pattern="editorial"] {
    grid-template-columns: minmax(0, 1fr);
  }

  body.product-page :where(.mc-editorial-flow__aside,
    [data-editorial-aside]) {
    position: static;
    grid-row: 1;
  }

  body.product-page .mc-spatial-surface,
  body.product-page [data-product-pattern="spatial"] {
    min-block-size: 65dvh;
  }

  body.product-page :where(.mc-spatial-surface__context,
    [data-spatial-context]) {
    position: absolute;
    inset-inline: var(--mc-space-3);
    inset-block-end: var(--mc-space-3);
    max-inline-size: none;
  }

  body.product-page :where(.mc-focused-task__actions,
    [data-focused-task-actions]) {
    position: sticky;
    z-index: 3;
    inset-block-end: 0;
    margin-inline: calc(-1 * var(--mc-space-5));
    padding: var(--mc-space-4) var(--mc-space-5);
    background: var(--mc-paper);
  }

  body.product-page :where(.mc-status-first__summary,
    [data-status-first-summary]) {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

/* The global product header floats above ordinary document flow. Supporting
   routes opt into this shell modifier so their first meaningful surface stays
   visible at tablet and mobile widths without changing spatial canvases. */
@media (max-width: 64rem) {
  body.product-page .mc-page-shell--under-floating-header {
    padding-block-start: 8rem;
  }
}

/* One product shell for every end-user route. */
body.product-page .main-header {
  position: absolute;
  z-index: 100;
  inset: 0 0 auto;
  padding: var(--mc-space-4) var(--mc-page-gutter) 0;
  color: var(--mc-ink);
  background: transparent;
}

body.product-page :where(.utility-bar, .utility-content, .banner-ticker,
  .banner-item) {
  display: none;
}

body.product-page .header-shell {
  position: relative;
  display: flex;
  inline-size: min(100%, var(--mc-wide-width));
  min-block-size: 4.25rem;
  align-items: center;
  margin-inline: auto;
  padding: var(--mc-space-2) var(--mc-space-3);
  color: #26312f;
  background: rgb(255 255 255 / 94%);
  border: 1px solid rgb(38 49 47 / 12%);
  border-radius: 32px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 78%),
    0 18px 44px rgb(38 49 47 / 9%);
  backdrop-filter: blur(18px);
}

body.product-page .mobile-header-bar {
  display: none;
}

body.product-page .primary-nav {
  display: flex;
  inline-size: 100%;
  align-items: center;
  justify-content: space-between;
  gap: clamp(var(--mc-space-3), 2vw, var(--mc-space-6));
}

body.product-page :where(.brand-cluster, .logo-link, .brand-copy,
  .action-cluster, .nav-ctas, .auth-controls, .auth-menu,
  .auth-buttons, .user-info, .mobile-header-actions) {
  display: flex;
  align-items: center;
}

body.product-page :where(.brand-cluster, .action-cluster) {
  flex: 0 0 auto;
}

body.product-page .logo-link {
  min-inline-size: var(--mc-target-comfortable);
  min-block-size: var(--mc-target-comfortable);
  gap: var(--mc-space-2);
  color: #26312f;
  text-decoration: none;
}

body.product-page .brand-mark {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  object-fit: cover;
  border-radius: var(--mc-radius-compact);
}

body.product-page .brand-copy {
  min-inline-size: 0;
  align-items: flex-start;
  flex-direction: column;
  line-height: 1.05;
}

body.product-page .brand-title {
  color: #26312f;
  font-size: var(--mc-text-sm);
  font-weight: var(--mc-weight-semibold);
  letter-spacing: -0.02em;
}

body.product-page .brand-subtitle,
body.product-page .nav-link__icon {
  display: none;
}

body.product-page .main-nav {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  gap: var(--mc-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.product-page .main-nav li {
  display: flex;
}

body.product-page .main-nav a {
  display: inline-flex;
  min-block-size: var(--mc-target-comfortable);
  align-items: center;
  justify-content: center;
  padding-inline: var(--mc-space-3);
  color: #26312f;
  border-radius: var(--mc-radius-control);
  font-size: var(--mc-text-sm);
  font-weight: var(--mc-weight-medium);
  text-decoration: none;
}

body.product-page .main-nav a:hover,
body.product-page .main-nav a[aria-current="page"] {
  color: #26312f;
  background: #f7f2e8;
}

body.product-page .action-cluster,
body.product-page .auth-controls,
body.product-page .auth-menu,
body.product-page .auth-buttons,
body.product-page .user-info,
body.product-page .nav-ctas {
  gap: var(--mc-space-2);
}

body.product-page :where(.btn-login, .btn-register, .btn-logout,
  .user-badge, .menu-button) {
  display: inline-flex;
  min-block-size: var(--mc-target-comfortable);
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.8rem;
  color: #26312f;
  background: #fff;
  border: 1px solid rgb(38 49 47 / 20%);
  border-radius: var(--mc-radius-control);
  font: inherit;
  font-size: var(--mc-text-sm);
  font-weight: var(--mc-weight-semibold);
  text-decoration: none;
  cursor: pointer;
}

body.product-page :where(.btn-login, .btn-register, .btn-logout):hover {
  color: var(--mc-cobalt);
  border-color: var(--mc-cobalt);
}

body.product-page .btn-register-wrapper {
  display: inline-flex;
}

body.product-page .user-badge {
  max-inline-size: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.product-page .language-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: #fff;
  border: 1px solid rgb(38 49 47 / 16%);
  border-radius: var(--mc-radius-control);
}

body.product-page .language-switch__option {
  display: inline-flex;
  min-inline-size: var(--mc-target-comfortable);
  min-block-size: var(--mc-target-comfortable);
  align-items: center;
  justify-content: center;
  color: var(--mc-ink-muted);
  border-radius: var(--mc-radius-control);
  font-size: var(--mc-text-xs);
  font-weight: var(--mc-weight-semibold);
  text-decoration: none;
}

body.product-page .language-switch__option[aria-current="page"] {
  color: var(--mc-on-cobalt);
  background: var(--mc-cobalt);
}

body.product-page .menu-button,
body.product-page .header-menu-button {
  inline-size: var(--mc-target-comfortable);
  padding: 0;
}

body.product-page .header-menu-button {
  display: none;
}

body.product-page .auth-menu-skeleton,
body.product-page .skeleton {
  min-block-size: var(--mc-target-comfortable);
  background: #f0f1ef;
  border-radius: var(--mc-radius-control);
}

body.product-page .skeleton-button {
  inline-size: 8rem;
}

body.product-page .main-footer {
  flex: 0 0 auto;
  margin-block-start: auto;
  color: #26312f;
  background: #f7f7f7;
  border-block-start: 1px solid rgb(38 49 47 / 14%);
}

body.product-page .footer-container {
  inline-size: min(
    calc(100% - (2 * var(--mc-page-gutter))),
    var(--mc-content-width)
  );
  margin-inline: auto;
  padding-block: clamp(var(--mc-space-10), 7vw, var(--mc-space-16))
    var(--mc-space-8);
}

body.product-page .footer-content {
  display: grid;
  grid-template-columns: minmax(15rem, 1.4fr) repeat(3, minmax(8rem, 1fr));
  gap: clamp(var(--mc-space-6), 4vw, var(--mc-space-12));
  margin-block-end: var(--mc-space-10);
}

body.product-page .footer-section {
  min-inline-size: 0;
}

body.product-page .footer-section h3,
body.product-page .footer-section h4 {
  margin-block-end: var(--mc-space-3);
  color: #26312f;
  font-size: var(--mc-text-sm);
  font-weight: var(--mc-weight-semibold);
  letter-spacing: 0.04em;
}

body.product-page .footer-section h4 {
  color: rgb(38 49 47 / 76%);
  font-size: var(--mc-text-xs);
  text-transform: uppercase;
}

body.product-page .footer-section p {
  max-inline-size: 34ch;
  color: rgb(38 49 47 / 72%);
  font-size: var(--mc-text-sm);
}

body.product-page .footer-section ul {
  display: grid;
  gap: var(--mc-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.product-page .footer-section a {
  display: inline-flex;
  min-block-size: var(--mc-target-comfortable);
  align-items: center;
  color: #26312f;
  font-size: var(--mc-text-sm);
  text-decoration: none;
}

body.product-page .footer-section a:hover {
  color: var(--mc-cobalt);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

body.product-page .footer-bottom {
  padding-block-start: var(--mc-space-6);
  color: rgb(38 49 47 / 76%);
  border-block-start: 1px solid rgb(38 49 47 / 14%);
  font-size: var(--mc-text-sm);
  text-align: center;
}

body.product-page .main-footer a:focus-visible {
  outline-color: var(--mc-cobalt) !important;
  outline-offset: 4px !important;
}

body.product-page .sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

body.product-page .global-rate-limit-notice {
  position: fixed;
  z-index: 2000;
  inset: var(--mc-space-4) auto auto 50%;
  inline-size: min(42rem, calc(100% - 2rem));
  padding: var(--mc-space-4) var(--mc-space-5);
  color: var(--mc-warning);
  background: var(--mc-warning-soft);
  border: 2px solid var(--mc-warning);
  border-radius: var(--mc-radius-compact);
  box-shadow: var(--mc-shadow-high);
  font-weight: var(--mc-weight-semibold);
  transform: translateX(-50%);
}

body.product-page .global-rate-limit-notice[hidden] {
  display: none;
}

@media (max-width: 64rem) {
  body.product-page .main-header {
    padding: var(--mc-space-3) var(--mc-space-3) 0;
  }

  body.product-page .header-shell {
    display: grid;
    gap: var(--mc-space-2);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  body.product-page .mobile-header-bar {
    display: flex;
    min-block-size: 3.75rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--mc-space-3);
    padding: var(--mc-space-2) var(--mc-space-3);
    background: rgb(255 255 255 / 96%);
    border: 1px solid rgb(38 49 47 / 12%);
    border-radius: var(--mc-radius-compact);
    box-shadow: var(--mc-shadow-low);
    backdrop-filter: blur(16px);
  }

  body.product-page .mobile-header-actions > .menu-button {
    display: none;
  }

  html[data-nav-bootstrap="true"] body.product-page
    .mobile-header-actions > .menu-button {
    display: inline-flex;
    visibility: hidden;
  }

  body.product-page .main-header[data-nav-enhanced="true"]
    .mobile-header-actions > .menu-button {
    display: inline-flex;
    visibility: visible;
  }

  body.product-page .primary-nav {
    flex-direction: column;
    align-items: stretch;
    gap: var(--mc-space-3);
    padding: var(--mc-space-4);
    background: #fff;
    border: 1px solid rgb(38 49 47 / 16%);
    border-radius: var(--mc-radius-compact);
    box-shadow: var(--mc-shadow-medium);
  }

  html[data-nav-bootstrap="true"] body.product-page
    .primary-nav:not(.is-open),
  body.product-page .main-header[data-nav-enhanced="true"]
    .primary-nav:not(.is-open) {
    display: none;
  }

  body.product-page .primary-nav .brand-cluster {
    display: none;
  }

  body.product-page .primary-nav .main-nav,
  body.product-page .primary-nav .action-cluster,
  body.product-page .primary-nav .nav-ctas,
  body.product-page .primary-nav .auth-controls,
  body.product-page .primary-nav .auth-menu {
    inline-size: 100%;
  }

  body.product-page .primary-nav .main-nav,
  body.product-page .primary-nav .action-cluster {
    flex-direction: column;
    align-items: stretch;
  }

  body.product-page .primary-nav .main-nav li,
  body.product-page .primary-nav .main-nav a,
  body.product-page .primary-nav .nav-ctas .btn {
    inline-size: 100%;
  }

  body.product-page .primary-nav .auth-controls,
  body.product-page .primary-nav .auth-menu {
    flex-wrap: wrap;
    justify-content: center;
  }

  body.product-page .main-header[data-nav-enhanced="true"]
    .header-menu-button {
    display: inline-flex;
  }

  body.product-page .footer-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.product-page .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 36rem) {
  body.product-page .footer-content {
    grid-template-columns: minmax(0, 1fr);
  }

  body.product-page .footer-brand {
    grid-column: auto;
  }
}

@media (max-width: 23.75rem) {
  body.product-page .mobile-header-bar .brand-copy {
    display: none;
  }
}