/**
 * Store Bundle - Customer-Facing CSS
 * 
 * Complete CSS bundle for store-facing pages including:
 * - Product listings and single product pages
 * - Shopping cart and checkout
 * - Search and category browsing
 * - Store components and interactions
 * 
 * This bundle loads for customer-facing store pages.
 */

/* =================================================================
   STORE DESIGN TOKENS
   ================================================================= */

@import '../src/tokens/store-tokens.css';

/* =================================================================
   STORE COMPONENTS
   ================================================================= */

@import '../src/components/product-cards.css';
@import '../src/components/shopping-cart.css';
@import '../src/components/checkout.css';

/* =================================================================
   STORE PAGES
   ================================================================= */

@import '../src/pages/store-shop.css';
@import '../src/pages/store-single-product.css';

/* =================================================================
   STORE-SPECIFIC UTILITIES
   ================================================================= */

/* Product Grid Utilities */
.products-grid-2 { grid-template-columns: repeat(2, 1fr); }
.products-grid-3 { grid-template-columns: repeat(3, 1fr); }
.products-grid-4 { grid-template-columns: repeat(4, 1fr); }
.products-grid-5 { grid-template-columns: repeat(5, 1fr); }

/* Store Text Utilities */
.text-sale { color: var(--moly-product-sale); }
.text-price { color: var(--moly-price-regular); }
.text-price-sale { color: var(--moly-price-sale); }
.text-price-strike { 
  color: var(--moly-price-strike); 
  text-decoration: line-through; 
}

/* Store Background Utilities */
.bg-sale { background-color: var(--moly-product-sale-bg); }
.bg-new { background-color: var(--moly-product-new-bg); }
.bg-featured { background-color: var(--moly-product-featured-bg); }

/* Store Spacing Utilities */
.gap-products { gap: var(--moly-product-grid-gap-desktop); }
.gap-cart { gap: var(--moly-cart-item-gap); }
.p-product { padding: var(--moly-product-card-padding); }

/* Store Animation Utilities */
.transition-cart { transition: var(--moly-add-to-cart-transition); }
.transition-product { transition: var(--moly-product-hover-transition); }

/* =================================================================
   STORE RESPONSIVE UTILITIES
   ================================================================= */

@media (max-width: 768px) {
  .gap-products { gap: var(--moly-product-grid-gap-tablet); }
  .products-grid-3,
  .products-grid-4,
  .products-grid-5 { 
    grid-template-columns: repeat(var(--moly-products-tablet-columns), 1fr); 
  }
}

@media (max-width: 480px) {
  .gap-products { gap: var(--moly-product-grid-gap-mobile); }
  .products-grid-2,
  .products-grid-3,
  .products-grid-4,
  .products-grid-5 { 
    grid-template-columns: repeat(var(--moly-products-mobile-columns), 1fr); 
  }
}

/* =================================================================
   STORE PRINT STYLES
   ================================================================= */

@media print {
  /* Hide interactive elements in print */
  .add-to-cart-button,
  .product-card__quick-actions,
  .mini-cart,
  .cart-overlay,
  .checkout-progress {
    display: none !important;
  }
  
  /* Optimize product cards for print */
  .product-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid var(--moly-neutral-300);
  }
  
  /* Print-friendly pricing */
  .product-price {
    color: #000 !important;
  }
}

/* =================================================================
   STORE HIGH CONTRAST MODE
   ================================================================= */

@media (prefers-contrast: high) {
  .product-card {
    border: 2px solid var(--moly-neutral-900);
  }
  
  .product-badge {
    border: 1px solid var(--moly-neutral-900);
  }
  
  .add-to-cart-button {
    border: 2px solid var(--moly-neutral-900);
  }
}

/* =================================================================
   STORE REDUCED MOTION
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .add-to-cart-button,
  .checkout-button {
    transition: none;
    transform: none !important;
  }
  
  .product-card:hover {
    transform: none;
  }
  
  .product-gallery__main-image {
    transition: none;
  }
  
  .mini-cart {
    transition: none;
  }
}