/* Main: CSS Cascade Layers + Import all modules */

/* Define layer order - critical for cascade control */
@layer reset, base, layout, components, pages, woo, overrides;

/* ============================================
   LAYER: BASE
   ============================================ */
@import url('./base.css') layer(base);

/* ============================================
   LAYER: LAYOUT
   ============================================ */
@import url('./layout.css') layer(layout);

/* ============================================
   LAYER: COMPONENTS
   ============================================ */
@import url('./components.css') layer(components);
/* Note: cart-drawer.css is loaded globally via functions.php to avoid URL resolution issues */

/* ============================================
   LAYER: PAGES
   ============================================ */
@import url('./pages.css') layer(pages);
@import url('./pages/product.css') layer(pages);

/* ============================================
   LAYER: WOO
   ============================================ */
/* WooCommerce styles - loaded after components/pages to override defaults */
@import url('./woo/global.css') layer(woo);
/* Note: cart.css and checkout.css are loaded conditionally via functions.php */
/* They are NOT imported here to avoid loading on all pages */

/* ============================================
   LAYER: OVERRIDES
   ============================================ */
/* Only exceptional overrides go here - use sparingly */
@layer overrides {
  /* Hero section: Override global h1 color from design system */
  /* This must win over krx-ui.css h1 rule */
  .krx-hero .krx-hero__content h1.krx-hero__title,
  .krx-hero .krx-hero__content .krx-hero__title {
    color: var(--color-white) !important;
  }
}