/* Shared spacing for public, account, operations, and legacy page frames.
 * The outer frame owns the gutter; nested workspaces must not add it again.
 * Keep this after page/mobile styles so every frame uses the same rhythm.
 */
html[data-theme] body {
  --page-shell-max-width: 100rem;
  --page-work-max-width: 96rem;
  --page-shell-gutter: 1rem;
  --layout-section-gap: 1.25rem;
  --layout-grid-gap: 1rem;
  --layout-card-padding: 1rem;
  --layout-content-gap: 1rem;
  --layout-page-top: 0.75rem;
  --layout-page-bottom: 2rem;
}

@media (min-width: 48rem) {
  html[data-theme] body {
    --page-shell-gutter: 2rem;
    --layout-section-gap: 1.5rem;
    --layout-grid-gap: 1.5rem;
    --layout-card-padding: 1.5rem;
    --layout-page-top: 1rem;
  }
}

html[data-theme] body :is(.public-shell, .shell) {
  box-sizing: border-box;
  width: 100% !important;
  max-width: var(--page-shell-max-width) !important;
  margin-inline: auto !important;
  padding-inline: var(--page-shell-gutter) !important;
  padding-top: var(--layout-page-top) !important;
  padding-bottom: var(--layout-page-bottom) !important;
}

@media (max-width: 47.99875rem) {
  html[data-theme] body {
    --layout-page-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
  }
}

html[data-theme] body :is(.site-header-shell, .topbar) {
  margin-bottom: var(--layout-section-gap) !important;
}

/* Use flow margins here: changing main to a grid would constrain sticky tabs. */
html[data-theme] body .public-shell > main > :not([hidden], .ui-modal-shell, script, style, template) ~ :not([hidden], .ui-modal-shell, script, style, template) {
  margin-block-start: var(--layout-section-gap);
  margin-block-end: 0;
}

html[data-theme] body .public-shell > main {
  padding-bottom: 0 !important;
}

html[data-theme] body .public-shell > .site-footer {
  margin-top: var(--layout-section-gap) !important;
}

html[data-theme] body :is(.directory-page, .search-page-shell, .legal-page-shell) {
  gap: var(--layout-section-gap);
}

html[data-theme] body :is(.ops-shell, .profile-shell) {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  gap: var(--layout-grid-gap) !important;
}

html[data-theme] body :is(.ops-main, .profile-content) {
  min-width: 0;
  gap: var(--layout-section-gap) !important;
}

html[data-theme] body .ops-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

/* A grid gap and Tailwind space-y on the same stack otherwise add together. */
html[data-theme] body .ops-main > :not([hidden]) ~ :not([hidden]) {
  margin-block: 0;
}

html[data-theme] body :is(.profile-mobile-bar, .cockpit-mobile-bar) {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  margin-bottom: var(--layout-section-gap) !important;
}

html[data-theme] body :is(.page-shell, .ops-panel, .ops-page-header),
html[data-theme] body > .shell :is(.card, .panel) {
  padding: var(--layout-card-padding) !important;
}

html[data-theme] body.profile-layout-page,
html[data-theme] body .profile-shell {
  --profile-shell-max-width: var(--page-shell-max-width);
  --profile-shell-inline-offset: var(--page-shell-gutter);
}

html[data-theme] body :is(
  .review-console--queue,
  .catalog-dashboard-shell,
  .product-class-list-page,
  .attribute-option-management-page
) {
  max-width: var(--page-work-max-width) !important;
  margin-inline: auto !important;
}

html[data-theme] body .industrial-detail-shell {
  gap: var(--layout-section-gap);
}

html[data-theme] body :is(.industrial-detail-hero, .industrial-detail-grid) {
  gap: var(--layout-grid-gap);
}

html[data-theme] body :is(.industrial-detail-main, .industrial-detail-aside) {
  gap: var(--layout-section-gap);
}

html[data-theme] body :is(.industrial-detail-hero, .industrial-section) {
  padding: var(--layout-card-padding);
}

html[data-theme] body :is(#intro, #specs).industrial-section {
  padding: var(--layout-card-padding);
  gap: var(--layout-content-gap);
}

html[data-theme] body .industrial-product-summary {
  padding: 0;
  gap: var(--layout-content-gap);
}

html[data-theme] body .industrial-detail-shell .industrial-product-summary h1 {
  font-size: 1.5rem !important;
  line-height: 1.6 !important;
}

html[data-theme] body .industrial-fact-grid {
  gap: 0.625rem;
}

html[data-theme] body .industrial-section {
  gap: var(--layout-content-gap);
}

/* The current product frame has its own high-specificity layout rules.
 * Keep its gallery/order grid while sharing the spacing used by other pages.
 */
html[data-theme][data-theme] body#product-detail-page .industrial-detail-shell,
html[data-theme][data-theme] body#product-detail-page .industrial-detail-main {
  gap: var(--layout-section-gap) !important;
}

html[data-theme][data-theme] body#product-detail-page .industrial-detail-hero,
html[data-theme][data-theme] body#product-detail-page .industrial-detail-grid {
  gap: var(--layout-grid-gap) !important;
}

html[data-theme][data-theme] body#product-detail-page .industrial-detail-hero,
html[data-theme][data-theme] body#product-detail-page .industrial-section {
  padding: var(--layout-card-padding) !important;
}

html[data-theme][data-theme] body#product-detail-page .industrial-product-summary {
  gap: var(--layout-content-gap) !important;
}

html[data-theme][data-theme] body#product-detail-page .site-header-shell {
  margin-block-end: var(--layout-section-gap) !important;
}

/* Category cards contain both a visual and a description: reserve readable
 * space for both instead of squeezing four two-column cards into one row. */
html[data-theme] body .directory-category-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  gap: var(--layout-grid-gap);
}

html[data-theme] body .directory-category-card {
  gap: var(--layout-content-gap);
  padding: var(--layout-card-padding);
  align-items: start;
}

html[data-theme] body .directory-category-visual {
  min-height: 8rem;
  aspect-ratio: 1;
}

html[data-theme] body .directory-category-body {
  gap: var(--layout-content-gap);
}

@media (max-width: 39.99875rem) {
  html[data-theme] body .industrial-detail-shell .industrial-product-summary h1 {
    font-size: 1.25rem !important;
  }

  html[data-theme] body .directory-category-visual {
    min-height: 7rem;
    aspect-ratio: auto;
  }

  html[data-theme] body .industrial-product-summary .industrial-rating-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  html[data-theme] body .industrial-detail-hero .industrial-gallery-zoom-panel {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    gap: 0.5rem;
  }

  html[data-theme] body .industrial-detail-hero .industrial-gallery-hint {
    width: 100%;
    text-align: center;
  }

  html[data-theme] body .industrial-detail-hero .industrial-gallery-hint strong {
    white-space: normal;
  }
}