@use 'ui-design-system/src/styles/semantic/index' as *;

.ui-lp-product-template {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  
  &__main {
    flex: 1;
    
    // Product-focused styling with cleaner backgrounds
    > *:nth-child(odd) {
      background: $semantic-color-surface-primary;
    }
    
    > *:nth-child(even) {
      background: $semantic-color-surface-elevated;
    }
    
    // Hero maintains its special background (image/gradient)
    > ui-lp-hero-image {
      background: unset;
    }
  }
  
  // Product template specific spacing
  section {
    padding: $semantic-spacing-layout-section-lg 0;
  }
  
  // Enhanced visual separation between sections
  section + section {
    border-top: 1px solid $semantic-color-border-subtle;
  }
  
  // Responsive adjustments
  @media (max-width: $semantic-breakpoint-md - 1) {
    section {
      padding: $semantic-spacing-layout-section-md 0;
    }
  }
  
  @media (max-width: $semantic-breakpoint-sm - 1) {
    &__main {
      > * {
        background: $semantic-color-surface-primary !important;
      }
    }
    
    section {
      padding: $semantic-spacing-layout-section-sm 0;
    }
  }
}