/* Phadin Global Layout V1 — 2026-10-13.
 * One content boundary; template grids and intentional full-bleed backgrounds
 * remain owned by their components. No universal Flatsome row/column override.
 * Width is border-box, max 1440px; viewport gutters are outside that box.
 */
html:root {
  --phadin-container-max: 1440px;
  --phadin-gutter-desktop: 32px;
  --phadin-gutter-tablet: 24px;
  --phadin-gutter-mobile: 16px;
  --phadin-gutter: var(--phadin-gutter-desktop);
  --phadin-container-width: min(var(--phadin-container-max), calc(100% - 2 * var(--phadin-gutter)));
  --phadin-reading-max: 800px;
  --phadin-form-max: var(--phadin-container-max);
  /* Compatibility aliases for existing header, footer and legacy templates. */
  --ph-container-max: var(--phadin-container-max);
  --ph-container-gap: var(--phadin-gutter);
  --phadin-site-max: var(--phadin-container-max);
  --phadin-site-gutter: var(--phadin-gutter);
  --phadin-readable-max: var(--phadin-reading-max);
}
@media (max-width: 1024px) {
  html:root { --phadin-gutter: var(--phadin-gutter-tablet); }
}
@media (max-width: 767px) {
  html:root { --phadin-gutter: var(--phadin-gutter-mobile); }
}

/* Reusable opt-in wrapper and shared site chrome. */
.phadin-main-container,
.ph-container,
html body #header .header-inner.container,
html body #header #masthead .header-inner.container,
html body .phadin-footer-v2 .phadin-footer-v2__frame,
html body .phadin-footer-v2 .phadin-footer-v2__inner,
html body .phadin-footer-v2.phadin-footer-v4 .pf4-wrap,
html body.phadin-menu-orange #header .phadin-menu-v3__shell,
html body #main > .shop-page-title .page-title-inner.container {
  box-sizing: border-box;
  width: var(--phadin-container-width) !important;
  max-width: var(--phadin-container-max) !important;
  min-width: 0;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* WooCommerce archives: one outer boundary for heading, filters and loop.
 * Product taxonomies include categories, tags, brands and attributes.
 */
html body.woocommerce.archive #wrapper #main > .category-page-row {
  box-sizing: border-box;
  width: var(--phadin-container-width) !important;
  max-width: var(--phadin-container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body.woocommerce.archive #main > .category-page-row > .col:only-child {
  padding-left: 0;
  padding-right: 0;
  min-width: 0;
}
/* These archive children already live inside the outer boundary. */
html body.woocommerce.archive #wrapper #main .category-page-row .shop-container > :is(.phadin-native-archive-block, .phadin-fv2, .products, .fv2-load, .phadin-load-more-panel, .container),
html body.woocommerce.archive #main .category-page-row :is(.phadin-catalog-layout, .ph-bl-container, .ph-b2-wrap),
html body.woocommerce.archive #main .category-page-row .pcr > .section-content > .pcr-row {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html body.woocommerce.archive #main .category-page-row .shop-container > .pcr {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (min-width: 850px) and (max-width: 1280px) {
  body.woocommerce.archive .products.large-columns-5 > .product-small {
    flex-basis: 25%;
    max-width: 25%;
  }
}

/* Single-product wrapper consumes the same tokens in product-ui.css.
 * Keep its three-column grid, gallery, buy box and Care rail untouched.
 */
html body.single-product.phadin-pas-enabled.phadin-commerce-layout-enabled {
  --phadin-product-content-max-width: var(--phadin-container-max) !important;
}
html body.single-product #main .phadin-product-standard > .section-content > .row {
  max-width: 100%;
}
html body.single-product #wrapper #main .type-product .phadin-product-standard .phadin-product-v2__breadcrumbs {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body.single-product #main .phadin-product-standard .product-footer > .container {
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Homepage: panels share the same outside edges; their designed inner
 * padding, hero grid, carousels and full-width section backgrounds stay.
 */
html body.home #main .ph-home-redesign-v1 > .section-content,
html body.home #main .po-container {
  box-sizing: border-box;
  width: var(--phadin-container-width) !important;
  max-width: var(--phadin-container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Knowledge hub rows are deliberate shells, including nested UX Blocks.
 * Their columns already have zero gutters in the original hub design.
 */
html body #wrapper #main .section.phadin-tech-hub .section.pth-section > .section-content > .row.pth-container,
html body #wrapper #main .section.phadin-tech-hub .section.kh-section > .section-content > .row {
  box-sizing: border-box;
  width: var(--phadin-container-width) !important;
  max-width: var(--phadin-container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Native page/blog shells only. Nested rows and custom narrow UX rows are
 * never selected. Preserve .row-full-width and explicit inline widths.
 */
html body #main > .page-wrapper:not(.blog-wrapper):not(:has(.woocommerce)) > .row.row-main,
html body #main > .content-area > .row:not(.row-full-width):not(.row-collapse):not([style]),
html body #main > .content-area > .section:not(.ph-home-redesign-v1):not(.phadin-tech-hub) > .section-content > .row:not(.row-full-width):not(.row-collapse):not([style]),
html body #main > .page-wrapper > .section > .section-content > .row:not(.row-full-width):not(.row-collapse):not([style]),
html body #wrapper #main > #content.blog-wrapper > .row {
  box-sizing: border-box;
  width: var(--phadin-container-width) !important;
  max-width: var(--phadin-container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* The commitment strip formerly added an extra 8px parent inset on mobile. */
html body .phadin-footer-v2 .phadin-footer-v2__commitments {
  padding-left: 0;
  padding-right: 0;
}
html body.single-post #main .entry-content,
html body.single-post #main #comments {
  box-sizing: border-box;
  max-width: var(--phadin-reading-max);
  margin-left: auto;
  margin-right: auto;
  overflow-wrap: anywhere;
}
html body.single-post #main .entry-content :is(img, video, iframe) {
  max-width: 100%;
}
html body.single-post #main .entry-content :is(.wp-block-table, .phadin-table-wrap) {
  max-width: 100%;
  overflow-x: auto;
}

/* Shared spacing for cart, account and checkout. */
html body.woocommerce-cart #main #pcf-main,
html body.woocommerce-account #main #paf-app,
html body.woocommerce-checkout #main > #content > .row.row-main {
  box-sizing: border-box;
  width: var(--phadin-container-width) !important;
  max-width: var(--phadin-container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Cart, checkout and account use the requested 1280px content cap. */
html body.woocommerce-cart #main #pcf-main,
html body.woocommerce-account #main #paf-app,
html body.woocommerce-checkout #main > #content > .row.row-main {
  max-width: 1280px !important;
}
html body.woocommerce-checkout #main > #content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Static-page template registry, audited across all 134 published pages.
 * Exact outer wrapper classes only; never inner tables, forms or widgets. */
html body.page #wrapper #main :is(
  .phadin-about-container,
  .phadin-advisory-container,
  .phadin-appraisal-container,
  .phadin-b2b-container,
  .phadin-chain-container,
  .phadin-complaint-container,
  .phadin-config-container,
  .phadin-diagnosis-container,
  .phadin-horeca-container,
  .phadin-kiosk-container,
  .phadin-milktea-container,
  .phadin-office-container,
  .phadin-open-container,
  .phadin-payment-container,
  .phadin-projects-container,
  .phadin-repair-container,
  .phadin-return-container,
  .phadin-services-container,
  .phadin-setup-container,
  .phadin-shipping-container,
  .phadin-showroom-container,
  .phadin-sol-container,
  .phadin-standard-container,
  .phadin-upgrade-container,
  .phadin-warranty-container
) {
  box-sizing: border-box;
  width: var(--phadin-container-width) !important;
  max-width: var(--phadin-container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The native shop can retain a hidden sidebar as a sibling in the DOM. */
html body.woocommerce.archive #main > .category-page-row > .col:last-child {
  padding-left: 0;
  padding-right: 0;
}

/* Legacy landing shells used 100vw plus negative margins. Their parents
 * already span the canvas; use the scrollable viewport width instead. */
html body.page #main > #content > :is(
  .phadin-warranty-lp, .phadin-b2b-lp, .phadin-milktea-lp,
  .phadin-horeca-lp, .phadin-office-lp, .phadin-upgrade-lp,
  .phadin-kiosk-lp, .phadin-open-lp, .phadin-sol-lp,
  .phadin-about-lp, .phadin-showroom-lp
),
html body.page #main #content .phadin-config-lp {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
/* The configuration landing page is embedded in a native full-bleed row. */
html body.page #main > #content > .row.row-main:has(> .col > .col-inner > .phadin-config-lp) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html body.page #wrapper #main > #content > .row.row-main > .col:has(> .col-inner > .phadin-config-lp) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Approved GMB-990 layout, extended to the shared product template.
 * Equal image and purchase columns; retain the existing Phadin Care rail. */
@media (min-width: 1025px) {
  html body.single-product.phadin-product-standard-active #wrapper #main .phadin-product-standard-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr)) var(--pd-sidebar-width, 300px) !important;
  }
}