/* Shared viewport layout. Load last so every retained template uses one gutter.
   Dialogs stay bounded; page copy, surfaces and grids follow the shared gutter. */
:root { --page-gutter: clamp(16px, 2vw, 48px); }
body.pev-refined { --maxw: 100%; --home-width: 100%; width: 100%; min-height: 100svh; }
.pev-refined :is(main, section, article, .container, .shell, .home-shell) { min-width: 0; }
.pev-refined :is(.details-container, .steps-container, .products-grid, .footer-content, .footer-social, .text-content, .guide-controls) { max-width: none; }
.pev-refined :is(.details-container, .steps-container, .products-grid, .footer-content) > * { min-width: 0; }
.pev-refined :is(.hei, .job-hero, .hero-banner, .details, .process-section) { padding-inline: var(--page-gutter); }
.pev-refined :is(.details-container, .steps-container, .header-title) { width: 100%; max-width: none; }
.pev-refined .solution-cta { width: calc(100% - 2 * var(--page-gutter)); max-width: none; margin-inline: auto; }
.pev-refined .nav-container { width: 100%; max-width: none; }
@media (min-width: 881px) {
  .pev-refined .navbar { left: var(--page-gutter); width: calc(100% - 2 * var(--page-gutter)); max-width: none; }
  .pev-refined > header { width: calc(100% - 2 * var(--page-gutter)); max-width: none; padding-inline: var(--page-gutter); }
}

/* Homepage and company pages. */
.original-home :is(.home-shell, .about-container),
.pev-refined .about-content {
  width: calc(100% - 2 * var(--page-gutter)); max-width: none;
  margin-inline: auto; padding-inline: 0;
}
.original-home .hero-content { width: 100%; max-width: none; padding-inline: var(--page-gutter); }
.original-home .hero-scroll-cue { right: var(--page-gutter); }
.original-home .hero-footnote { inset-inline: var(--page-gutter); }
.pev-refined .story-video { width: 100%; max-width: none; margin-inline: 0; }
.pev-refined main:has(> .careers-wrapper) { padding-inline: var(--page-gutter); }
.pev-refined .careers-wrapper { width: 100%; max-width: none; }
.pev-refined main:has(> .job-details-container) { width: 100%; max-width: none; padding-inline: var(--page-gutter); }
.pev-refined .requirements-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

/* Contact and product detail: give the outer page a single, consistent inset. */
.pev-refined .main-content,
.pev-refined .main-content:has(.contact-form) { width: 100%; max-width: none; padding-inline: var(--page-gutter); }
.pev-refined .main-content > .container,
.pev-refined .main-content:has(.contact-form) > .container { width: 100%; max-width: none; padding-inline: 0; }
.pev-refined :is(.form-group, .product-hero, .product-details, .tab-content, .products-section) { min-width: 0; }
.pev-refined .product-top-section { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.pev-refined :is(.full-width-section, .vertical-tabs-container, .tab-content) { max-width: 100%; margin-inline: 0; }
.pev-refined :is(.full-width-section, .vertical-tabs-container) { width: 100%; }
.pev-refined .tab-content { flex: 1; }

/* Catalogue grows by adding columns instead of widening the filter sidebar. */
.pev-refined #main-content:has(> .products-section) {
  width: 100%; max-width: none; padding-inline: var(--page-gutter);
  display: grid; grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
}
.pev-refined #main-content > :is(.sidebar, .products-section) { width: 100%; min-width: 0; }
.pev-refined #main-content > .products-section .products-grid {
  width: 100%; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

/* Safety and legal retain all content, across the available page surface. */
.pev-refined :is(.policy-frame, .terms-header, .terms-header + .container) { width: 100%; max-width: none; padding-inline: var(--page-gutter); }
.pev-refined :is(.full-row, .standards-strip) { width: calc(100% - 2 * var(--page-gutter)); max-width: none; margin-inline: auto; }
.pev-refined .standards-strip { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.pev-refined :is(.policy-frame .section-content, .terms-content) :is(p, ul, ol) { max-width: 90ch; }

/* Explorer canvas and supporting sections expand with the window. */
body.powertrain-page .shell { width: calc(100% - 2 * var(--page-gutter)); max-width: none; }
.powertrain-page :is(.guide-controls, .guide-content, .hero-intro) { min-width: 0; }

/* Footer templates use different nesting; normalize the shared outer/inner pair. */
.pev-refined footer .container { width: 100% !important; max-width: none !important; padding-inline: 0 !important; margin-inline: 0 !important; }
.pev-refined footer :is(.footer-content, .footer-social) { width: 100%; max-width: none; padding-inline: var(--page-gutter) !important; }

@media (max-width: 992px) {
  .pev-refined #main-content:has(> .products-section) { grid-template-columns: minmax(0, 1fr); }
  .pev-refined .product-top-section { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  /* Override the old template's !important two-column phone rule. */
  .pev-refined #main-content > .products-section .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)) !important;
    padding-inline: 0 !important;
  }
  .pev-refined .vertical-tabs-container { margin-inline: 0; width: 100%; }
  .pev-refined .tab-content { width: 100%; padding-inline: 18px; }
  .pev-refined :is(.card-header, .form-container) { padding-inline: 20px; }
}

/* The recovery page also occupies the screen instead of a small centered card. */
body:has(> .error-panel) { padding: var(--page-gutter); }
body > .error-panel { width: 100%; max-width: none; min-height: calc(100svh - 2 * var(--page-gutter)); align-content: center; }
body > .error-panel > p { max-width: 65ch; }

/* Page copy fills its existing column. The only outer inset is the shared
   gutter; cards, media and input controls keep their own functional padding. */
:root { --page-gutter: clamp(16px, 1.25vw, 24px); }
body.pev-refined :is(main, .job-hero, .hero-content, .hero-banner, .hei, .impact-main, footer) :is(h1,h2,h3,h4,p,ul,ol,dl) {
  max-width: none;
  text-align: left;
}
body.pev-refined :is(.hero-content,.solution-hero-copy,.hero-intro,.header-title,.text-content,.home-service-content,.legal-heading,.legal-sections,.legal-copy,.legal-help) {
  max-width: none;
  text-align: left;
}
body.pev-refined :is(.hero-content,.solution-hero-copy,.hero-intro) { margin-inline: 0; }
body.pev-refined :is(.hero-buttons,.hero-actions,.cta-buttons) { justify-content: flex-start; }
body.pev-refined :is(.pev-legal,.impact-main) { padding-inline: var(--page-gutter); }
body.pev-refined :is(.policy-frame .section-content,.terms-content) :is(p,ul,ol) { max-width: none; }
body.pev-refined .job-hero#main-content { padding-inline: var(--page-gutter); }
body.pev-refined .job-hero#main-content h1 { max-width: none; }
body.pev-refined #career-detail { width: calc(100% - 2 * var(--page-gutter)); max-width: none; margin-inline: var(--page-gutter); }
body.customer-page .customer-main { width: 100%; max-width: none; padding-inline: var(--page-gutter); }
body.pev-refined footer :is(.footer-section,.footer-bottom,.footer-copyright) { text-align: left; }
body.pev-refined footer .footer-section > h3 { color: #edf5f8 !important; }
/* Inputs and messages retain their type-specific geometry; paragraphs do not
   become centered merely because an older template centers the parent. */
body > .error-panel > p { max-width: none; text-align: left; }

/* Footer copyright and social links follow the same left alignment. */
body.pev-refined footer .footer-social { align-items: flex-start; text-align: left; }
body.pev-refined footer .social-icons { justify-content: flex-start; }