@layer reset, tokens, base, layout, components, sections, product-template, pages, motion, utilities;

@import url("./tokens.css?v=20260509-font-author") layer(tokens);
@import url("./base.css") layer(base);
@import url("./layout.css") layer(layout);
@import url("./components.css?v=20260509-header-logo-icon") layer(components);
@import url("./sections.css") layer(sections);
@import url("./product-template.css") layer(product-template);
@import url("./pages.css?v=20260509-testimonials") layer(pages);
@import url("./motion.css?v=20260504-coupon-email-system") layer(motion);
@import url("./utilities.css") layer(utilities);

.products-page #recommended-path .recommended-path-layout {
  align-items: start;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}

.products-page #recommended-path .recommended-path-support {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 820px) {
  .products-page #recommended-path .recommended-path-layout {
    grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.9fr);
  }
}