/*
 * Denuino storefront layout kernel
 *
 * This file owns structural geometry shared by every storefront theme.
 * Theme files are loaded after it and may choose columns, areas, visual
 * treatment and component variants. The final theme-layout-contract.css
 * only enforces non-negotiable overflow and phone safety rules.
 */

body[data-theme-layout]:not(.admin-root) {
  --theme-content-max: 1540px;
  --theme-page-gutter: clamp(12px, 2.2vw, 32px);
  --theme-section-gap: clamp(12px, 1.7vw, 24px);
  --theme-product-gap: clamp(12px, 1.4vw, 20px);
  --theme-product-min: 232px;
  --theme-header-offset: 0px;
  min-inline-size: 320px;
  inline-size: 100%;
  margin: 0;
  padding-block-start: 0 !important;
  overflow-x: clip;
}

body[data-theme-layout]:not(.admin-root),
body[data-theme-layout]:not(.admin-root) *,
body[data-theme-layout]:not(.admin-root) *::before,
body[data-theme-layout]:not(.admin-root) *::after {
  box-sizing: border-box;
}

body[data-theme-layout]:not(.admin-root) :where(img, video, canvas, svg) {
  max-inline-size: 100%;
}

body[data-theme-layout]:not(.admin-root) :where(img, video, canvas) {
  block-size: auto;
}

body[data-theme-layout]:not(.admin-root) :where(
  .theme-header-region,
  .theme-announcement-region,
  .theme-page-frame,
  .theme-sidebar-region,
  .theme-main-region,
  .storefront-stage,
  .storefront-shell,
  .store-sections,
  .store-section,
  .theme-support-panels,
  .product-catalog-main,
  .theme-catalog-products,
  .theme-product-grid,
  .theme-product-card,
  .theme-product-detail,
  .theme-product-detail__layout,
  .theme-product-detail__gallery,
  .theme-product-detail__summary
) {
  min-inline-size: 0;
}

body[data-theme-layout]:not(.admin-root) :where(
  .theme-header-region,
  .theme-announcement-region,
  .theme-footer-region,
  .theme-page-frame,
  .theme-main-region
) {
  inline-size: 100%;
  max-inline-size: none;
}

body[data-theme-layout]:not(.admin-root) .theme-main-region {
  container: theme-main / inline-size;
}

/* Neutralize structural assumptions from the original single storefront. */
body[data-theme-layout]:not(.admin-root) > :where(header, footer),
body[data-theme-layout]:not(.admin-root) :where(.navbar, .storefront-header-shell) {
  transform: none;
}

body[data-theme-layout]:not(.admin-root) .theme-main-region > .storefront-stage,
body[data-theme-layout]:not(.admin-root) .theme-main-region .storefront-stage {
  inline-size: 100% !important;
  max-inline-size: none !important;
  min-block-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-theme-layout]:not(.admin-root) .storefront-shell {
  inline-size: 100% !important;
  max-inline-size: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--theme-section-gap);
  align-items: start;
  position: static !important;
  z-index: auto !important;
  overflow: visible;
}

/* Home shell has exactly one owner. Side columns exist only when Razor rendered them. */
body[data-theme-layout]:not(.admin-root) .theme-home-shell {
  grid-template-areas: "main";
}

body[data-theme-layout]:not(.admin-root) .theme-home-shell > .store-sections {
  grid-area: main;
}

body[data-theme-layout]:not(.admin-root) .theme-home-shell > .store-sidebar:first-child {
  grid-area: left;
}

body[data-theme-layout]:not(.admin-root) .theme-home-shell > .store-sidebar:not(:first-child) {
  grid-area: right;
}

body[data-theme-layout]:not(.admin-root) .theme-home-shell.has-left-sidebar {
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  grid-template-areas: "left main";
}

body[data-theme-layout]:not(.admin-root) .theme-home-shell.has-right-sidebar {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
  grid-template-areas: "main right";
}

body[data-theme-layout]:not(.admin-root) .theme-home-shell.has-left-sidebar.has-right-sidebar {
  grid-template-columns: minmax(200px, 245px) minmax(0, 1fr) minmax(200px, 245px);
  grid-template-areas: "left main right";
}

body[data-theme-layout]:not(.admin-root) .theme-support-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--theme-section-gap);
  inline-size: 100%;
}

body[data-theme-layout]:not(.admin-root) .store-sidebar {
  min-inline-size: 0;
  display: grid;
  gap: var(--theme-section-gap);
  align-content: start;
  position: static !important;
  inset: auto !important;
}

body[data-theme-layout]:not(.admin-root) .store-sections {
  inline-size: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--theme-section-gap);
  align-content: start;
}

body[data-theme-layout]:not(.admin-root) .store-sections > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}

body[data-theme-layout]:not(.admin-root) .store-section {
  grid-column: span var(--span, 12);
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: clip;
  container: storefront-section / inline-size;
}

body[data-theme-layout]:not(.admin-root) :where(
  .row,
  [class*="col-"],
  .catalog-toolbar,
  .catalog-filter-grid,
  .category-block-grid,
  .designer-product-grid,
  .designer-product-mosaic
) {
  min-inline-size: 0;
}

body[data-theme-layout]:not(.admin-root) :where(input, select, textarea, button, table) {
  max-inline-size: 100%;
}

body[data-theme-layout]:not(.admin-root) :where(h1, h2, h3, h4, p, a, span, strong, small, dd, dt) {
  overflow-wrap: anywhere;
}

/* Catalog shell. Theme files decide its desktop columns. */
body[data-theme-layout]:not(.admin-root) .theme-catalog-shell {
  align-items: start;
}

body[data-theme-layout]:not(.admin-root) .theme-catalog-main {
  min-inline-size: 0;
  inline-size: 100%;
}

body[data-theme-layout]:not(.admin-root) .theme-catalog-products,
body[data-theme-layout]:not(.admin-root) .theme-feature-product-grid {
  container: product-zone / inline-size;
}

/* Product grid contract. Desktop density is selected by theme.json/theme CSS. */
body[data-theme-layout]:not(.admin-root) .theme-product-grid,
body[data-theme-layout]:not(.admin-root) .theme-feature-product-grid__track {
  display: grid !important;
  inline-size: 100%;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--theme-product-min)), 1fr));
  gap: var(--theme-product-gap) !important;
  align-items: stretch;
}

body.theme-product-grid-responsive:not(.admin-root) { --theme-product-min: 248px; }
body.theme-product-grid-catalog:not(.admin-root) { --theme-product-min: 230px; }
body.theme-product-grid-dense:not(.admin-root) {
  --theme-product-min: 216px;
  --theme-product-gap: 12px;
}

body[data-theme-layout]:not(.admin-root) .theme-product-grid.is-list-view {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Product card anatomy. Theme files change visual appearance, not geometry safety. */
body[data-theme-layout]:not(.admin-root) .theme-product-card {
  position: relative;
  display: flex !important;
  flex-direction: column;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  overflow: clip;
  isolation: isolate;
  container: product-card / inline-size;
}

body[data-theme-layout]:not(.admin-root) .theme-product-card__media {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 100%;
  aspect-ratio: var(--theme-card-media-ratio, 4 / 3);
  block-size: auto !important;
  min-block-size: 0 !important;
  overflow: clip;
}

body[data-theme-layout]:not(.admin-root) .theme-product-card__media > img {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100% !important;
  block-size: 100% !important;
  object-fit: var(--theme-card-image-fit, contain);
}

body[data-theme-layout]:not(.admin-root) .theme-product-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-inline-size: 0;
  padding: var(--theme-card-padding, clamp(13px, 1.35vw, 20px));
}

body[data-theme-layout]:not(.admin-root) :where(
  .theme-product-card__category,
  .theme-product-card__title,
  .theme-product-card__description,
  .theme-product-card__meta,
  .theme-product-card__action
) {
  inline-size: 100%;
  max-inline-size: 100%;
}

body[data-theme-layout]:not(.admin-root) .theme-product-card__title {
  min-block-size: 0 !important;
  margin-block: 4px 8px;
}

body[data-theme-layout]:not(.admin-root) .theme-product-card__description {
  display: -webkit-box;
  min-block-size: 0 !important;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--theme-card-description-lines, 3);
}

body[data-theme-layout]:not(.admin-root) .theme-product-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-block-start: auto;
}

body[data-theme-layout]:not(.admin-root) .theme-product-card__action {
  margin-block-start: 12px;
}

body[data-theme-layout]:not(.admin-root) .theme-product-card__action > :where(button, a),
body[data-theme-layout]:not(.admin-root) a.theme-product-card__action {
  inline-size: 100%;
  min-block-size: 42px;
}

body.theme-product-card-modern:not(.admin-root) {
  --theme-card-media-ratio: 1 / .78;
  --theme-card-padding: clamp(14px, 1.45vw, 21px);
}

body.theme-product-card-classic:not(.admin-root) {
  --theme-card-media-ratio: 1 / .72;
  --theme-card-padding: 14px;
  --theme-card-description-lines: 2;
}

body.theme-product-card-technical:not(.admin-root) {
  --theme-card-media-ratio: 16 / 11;
  --theme-card-padding: 14px;
  --theme-card-description-lines: 2;
}

/* Featured products use the same deterministic card sizing. */
body[data-theme-layout]:not(.admin-root) .theme-feature-product-card {
  min-inline-size: 0;
  block-size: 100%;
  overflow: clip;
}

body[data-theme-layout]:not(.admin-root) .theme-feature-product-card .designer-product-main-link {
  display: flex;
  min-inline-size: 0;
  block-size: 100%;
  flex-direction: column;
}

body[data-theme-layout]:not(.admin-root) .theme-feature-product-card .designer-product-media {
  inline-size: 100%;
  aspect-ratio: var(--theme-card-media-ratio, 4 / 3);
  overflow: clip;
}

body[data-theme-layout]:not(.admin-root) .theme-feature-product-card .designer-product-media img {
  inline-size: 100% !important;
  block-size: 100% !important;
  object-fit: var(--theme-card-image-fit, contain);
}

body[data-theme-layout]:not(.admin-root) .theme-feature-product-card .designer-product-copy {
  min-inline-size: 0;
}

/* Product detail has no Bootstrap row/column ownership. */
body[data-theme-layout]:not(.admin-root) .theme-product-detail {
  inline-size: min(calc(100% - (2 * var(--theme-page-gutter))), var(--theme-content-max)) !important;
  max-inline-size: var(--theme-content-max) !important;
  margin-inline: auto !important;
  padding-block: clamp(18px, 3vw, 44px) !important;
  container: product-detail / inline-size;
}

body[data-theme-layout]:not(.admin-root) .theme-product-detail__layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .92fr);
  align-items: start;
  gap: clamp(22px, 4vw, 64px) !important;
  margin: 0 !important;
}

body[data-theme-layout]:not(.admin-root) :where(
  .theme-product-detail__gallery,
  .theme-product-detail__summary
) {
  inline-size: auto !important;
  max-inline-size: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-theme-layout]:not(.admin-root) .theme-product-detail__gallery .detail-image-shell {
  inline-size: 100%;
  min-block-size: 0;
  aspect-ratio: var(--theme-detail-media-ratio, 1 / .82);
  overflow: clip;
}

body[data-theme-layout]:not(.admin-root) .theme-product-detail__gallery :where(.detail-image-button, .detail-image) {
  inline-size: 100%;
  block-size: 100%;
}

body[data-theme-layout]:not(.admin-root) .theme-product-detail__gallery .detail-image {
  object-fit: contain;
}

body.theme-product-detail-split:not(.admin-root) .theme-product-detail__gallery {
  position: sticky;
  inset-block-start: calc(var(--theme-header-offset) + 20px);
}

body.theme-product-detail-classic:not(.admin-root) .theme-product-detail__layout {
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
}

body.theme-product-detail-technical:not(.admin-root) .theme-product-detail__layout {
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
}

/* Components react to their actual available width, not only the viewport. */
@container product-zone (max-width: 980px) {
  body[data-theme-layout]:not(.admin-root) .theme-product-grid,
  body[data-theme-layout]:not(.admin-root) .theme-feature-product-grid__track {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@container product-zone (max-width: 700px) {
  body[data-theme-layout]:not(.admin-root) .theme-product-grid,
  body[data-theme-layout]:not(.admin-root) .theme-feature-product-grid__track {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@container product-zone (max-width: 350px) {
  body[data-theme-layout]:not(.admin-root) .theme-product-grid,
  body[data-theme-layout]:not(.admin-root) .theme-feature-product-grid__track {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@container product-card (max-width: 225px) {
  body[data-theme-layout]:not(.admin-root) .theme-product-card__body {
    padding: 11px;
  }

  body[data-theme-layout]:not(.admin-root) .theme-product-card__description {
    display: none;
  }

  body[data-theme-layout]:not(.admin-root) .theme-product-card__meta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@container product-detail (max-width: 820px) {
  body[data-theme-layout]:not(.admin-root) .theme-product-detail__layout {
    display: flex !important;
    flex-direction: column;
    gap: 20px !important;
  }

  body[data-theme-layout]:not(.admin-root) :where(
    .theme-product-detail__gallery,
    .theme-product-detail__summary
  ) {
    order: initial !important;
    position: static !important;
    inline-size: 100% !important;
  }
}

@media (min-width: 761px) {
  body[data-theme-layout]:not(.admin-root) .theme-product-grid.is-list-view .theme-product-card {
    display: grid !important;
    grid-template-columns: minmax(170px, 24%) minmax(0, 1fr);
  }

  body[data-theme-layout]:not(.admin-root) .theme-product-grid.is-list-view .theme-product-card__media {
    block-size: 100% !important;
    min-block-size: 190px !important;
    aspect-ratio: auto;
  }
}

@media (max-width: 1100px) {
  body[data-theme-layout]:not(.admin-root) {
    --theme-page-gutter: 18px;
    --theme-product-min: 208px;
  }

  body[data-theme-layout]:not(.admin-root) .theme-home-shell.has-left-sidebar.has-right-sidebar {
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
    grid-template-areas:
      "left main"
      "right main";
  }
}

@media (max-width: 820px) {
  body[data-theme-layout]:not(.admin-root) .theme-home-shell,
  body[data-theme-layout]:not(.admin-root) .theme-home-shell.has-left-sidebar,
  body[data-theme-layout]:not(.admin-root) .theme-home-shell.has-right-sidebar,
  body[data-theme-layout]:not(.admin-root) .theme-home-shell.has-left-sidebar.has-right-sidebar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "left"
      "right";
  }

  body[data-theme-layout]:not(.admin-root) .store-sections {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-theme-layout]:not(.admin-root) .store-sections > * {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  body[data-theme-layout]:not(.admin-root) {
    --theme-page-gutter: 12px;
    --theme-section-gap: 12px;
    --theme-product-gap: 10px;
    overflow-x: hidden;
  }

  body[data-theme-layout]:not(.admin-root) .theme-product-detail {
    inline-size: calc(100% - 24px) !important;
    padding-block: 16px 30px !important;
  }
}