/**
 * Amazon Demo — Refactored with Modern CSS (2024)
 * 
 * Features demonstrated:
 * - @layer for cascade management
 * - @container for responsive product cards
 * - :has() for cart/item interactions
 * - color-mix() for price discounts
 * - CSS nesting
 * - subgrid for product grids
 * - content-visibility for performance
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * Cascade Layers
 * ──────────────────────────────────────────────────────────────────────────── */
@layer amazon-reset, amazon-tokens, amazon-components, amazon-utilities;

@layer amazon-tokens {
  .amazon-demo {
    /* Brand colors */
    --amazon-orange: oklch(0.65 0.2 50);
    --amazon-orange-hover: color-mix(in oklch, var(--amazon-orange), black 12%);
    --amazon-blue: oklch(0.35 0.1 250);
    --amazon-blue-link: oklch(0.45 0.15 250);
    
    /* Surface */
    --amazon-white: oklch(0.98 0 0);
    --amazon-surface: oklch(0.94 0 0);
    --amazon-card: oklch(1 0 0);
    
    /* Text */
    --amazon-text-primary: oklch(0.15 0 0);
    --amazon-text-secondary: oklch(0.4 0 0);
    --amazon-price-red: oklch(0.45 0.2 25);
    
    /* Typography */
    --amazon-font: 'Arial', system-ui, sans-serif;
    
    /* Animation */
    --amazon-transition: 150ms ease-in-out;
  }
}

@layer amazon-reset {
  .amazon-demo {
    font-family: var(--amazon-font);
    color-scheme: light;
    
    *, *::before, *::after {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
      background: var(--amazon-surface);
      color: var(--amazon-text-primary);
    }
  }
}

@layer amazon-components {
  /* ──────────────────────────────────────────────────────────────────────────
   * Header - sticky with search
   * ──────────────────────────────────────────────────────────────────────── */
  .amazon-header {
    background: var(--amazon-surface);
    padding: var(--pad-sm) var(--pad-lg);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--color-border);
    content-visibility: auto;
    contain: layout style;
    
    & .header-top {
      display: flex;
      align-items: center;
      gap: var(--gutter-lg);
      flex-wrap: wrap;
      
      & .logo {
        font-size: var(--text-xl);
        font-weight: var(--font-bold);
        color: var(--amazon-text-primary);
        text-decoration: none;
        
        & span {
          color: var(--amazon-orange);
        }
      }
      
      & .search-bar {
        flex: 1;
        min-width: 280px;
        max-width: 600px;
        display: flex;
        
        & input {
          flex: 1;
          padding: var(--pad-sm) var(--pad-md);
          border: 2px solid var(--amazon-orange);
          border-radius: var(--radius-md) 0 0 var(--radius-md);
          font-size: var(--text-base);
          
          &:focus {
            outline: none;
            box-shadow: 0 0 0 3px color-mix(in oklch, var(--amazon-orange), transparent 70%);
          }
        }
        
        & button {
          background: var(--amazon-orange);
          border: none;
          padding: var(--pad-sm) var(--pad-lg);
          border-radius: 0 var(--radius-md) var(--radius-md) 0;
          cursor: pointer;
          transition: background var(--amazon-transition);
          
          &:hover {
            background: var(--amazon-orange-hover);
          }
        }
      }
      
      & .header-actions {
        display: flex;
        gap: var(--gutter-md);
        align-items: center;
        
        & .cart-link {
          position: relative;
          text-decoration: none;
          color: var(--amazon-text-primary);
          
          /* :has() for cart badge */
          &:has(.cart-count) .cart-icon {
            color: var(--amazon-orange);
          }
          
          & .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--amazon-orange);
            color: white;
            font-size: var(--text-xs);
            font-weight: var(--font-bold);
            min-width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
    
    & .nav-categories {
      display: flex;
      gap: var(--gutter-md);
      padding-top: var(--pad-sm);
      overflow-x: auto;
      
      & a {
        text-decoration: none;
        color: var(--amazon-text-secondary);
        font-size: var(--text-sm);
        white-space: nowrap;
        padding: var(--pad-xs) var(--pad-sm);
        border-radius: var(--radius-sm);
        transition: all var(--amazon-transition);
        
        &:hover {
          background: color-mix(in oklch, var(--amazon-orange), transparent 85%);
          color: var(--amazon-text-primary);
        }
      }
    }
  }
  
  /* ──────────────────────────────────────────────────────────────────────────
   * Product Grid - subgrid alignment
   * ──────────────────────────────────────────────────────────────────────── */
  .amazon-products {
    padding: var(--pad-lg);
    max-width: 1400px;
    margin: 0 auto;
    
    & .section-title {
      font-size: var(--text-2xl);
      margin-bottom: var(--marg-lg);
      font-weight: var(--font-bold);
    }
    
    & .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: var(--gutter-md);
      
      /* Subgrid for consistent card structure */
      & .product-card {
        background: var(--amazon-card);
        border-radius: var(--radius-md);
        padding: var(--pad-md);
        display: grid;
        grid-template-rows: auto 1fr auto auto;
        gap: var(--gutter-sm);
        transition: box-shadow var(--amazon-transition);
        content-visibility: auto;
        contain: layout style;
        
        &:hover {
          box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        
        /* Container queries for responsive card layout */
        container-type: inline-size;
        
        & .product-image {
          aspect-ratio: 1;
          background: var(--amazon-surface);
          border-radius: var(--radius-sm);
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          
          & img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
          }
        }
        
        & .product-info {
          display: grid;
          gap: var(--gutter-xs);
          
          & .product-title {
            font-size: var(--text-sm);
            line-height: 1.4;
            color: var(--amazon-text-primary);
            text-decoration: none;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            
            &:hover {
              color: var(--amazon-blue-link);
            }
          }
          
          & .product-rating {
            display: flex;
            align-items: center;
            gap: var(--gutter-xs);
            font-size: var(--text-sm);
            
            & .stars {
              color: #ffa41c;
            }
          }
          
          & .product-price {
            display: flex;
            align-items: baseline;
            gap: var(--gutter-sm);
            
            & .price-current {
              font-size: var(--text-xl);
              font-weight: var(--font-bold);
              color: var(--amazon-text-primary);
            }
            
            & .price-original {
              font-size: var(--text-sm);
              color: var(--amazon-text-secondary);
              text-decoration: line-through;
            }
            
            /* color-mix() for discount badge */
            & .discount-badge {
              background: color-mix(in oklch, var(--amazon-price-red), transparent 85%);
              color: var(--amazon-price-red);
              font-size: var(--text-xs);
              font-weight: var(--font-semibold);
              padding: 2px var(--pad-xs);
              border-radius: var(--radius-sm);
            }
          }
          
          & .product-prime {
            font-size: var(--text-xs);
            color: var(--amazon-blue);
            font-weight: var(--font-semibold);
            
            &::before {
              content: '✓ ';
            }
          }
        }
        
        & .product-actions {
          display: flex;
          gap: var(--gutter-sm);
          
          /* @container for button layout */
          @container (max-width: 180px) {
            flex-direction: column;
          }
          
          & .btn-add-cart {
            flex: 1;
            background: var(--amazon-orange);
            border: none;
            padding: var(--pad-sm);
            border-radius: var(--radius-md);
            font-size: var(--text-sm);
            cursor: pointer;
            transition: background var(--amazon-transition);
            
            &:hover {
              background: var(--amazon-orange-hover);
            }
          }
          
          & .btn-buy-now {
            flex: 1;
            background: color-mix(in oklch, #ffd814, black 5%);
            border: none;
            padding: var(--pad-sm);
            border-radius: var(--radius-md);
            font-size: var(--text-sm);
            cursor: pointer;
            transition: background var(--amazon-transition);
            
            &:hover {
              background: color-mix(in oklch, #ffd814, black 12%);
            }
          }
        }
      }
    }
  }
  
  /* ──────────────────────────────────────────────────────────────────────────
   * Deal Banner
   * ──────────────────────────────────────────────────────────────────────── */
  .amazon-deals {
    margin: var(--marg-lg) var(--pad-lg);
    padding: var(--pad-lg);
    background: linear-gradient(135deg, color-mix(in oklch, var(--amazon-orange), transparent 80%), transparent);
    border-radius: var(--radius-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gutter-md);
    
    & .deals-content {
      flex: 1;
      
      & h3 {
        margin: 0 0 var(--marg-sm);
        color: var(--amazon-text-primary);
      }
      
      & .countdown {
        display: flex;
        gap: var(--gutter-sm);
        
        & .time-unit {
          background: var(--amazon-text-primary);
          color: white;
          padding: var(--pad-xs) var(--pad-sm);
          border-radius: var(--radius-sm);
          text-align: center;
          
          & .value {
            font-size: var(--text-lg);
            font-weight: var(--font-bold);
            display: block;
          }
          
          & .label {
            font-size: var(--text-xs);
            text-transform: uppercase;
          }
        }
      }
    }
    
    & .deals-cta {
      .btn {
        background: var(--amazon-orange);
        color: white;
        border: none;
        padding: var(--pad-md) var(--pad-xl);
        border-radius: var(--radius-md);
        font-weight: var(--font-semibold);
        cursor: pointer;
        transition: background var(--amazon-transition);
        
        &:hover {
          background: var(--amazon-orange-hover);
        }
      }
    }
  }
  
  /* ──────────────────────────────────────────────────────────────────────────
   * Footer
   * ──────────────────────────────────────────────────────────────────────── */
  .amazon-footer {
    margin-top: var(--marg-xl);
    background: var(--amazon-surface);
    border-top: 1px solid var(--color-border);
    
    & .footer-back-top {
      background: var(--amazon-surface);
      padding: var(--pad-lg);
      text-align: center;
      
      & a {
        color: var(--amazon-text-primary);
        text-decoration: none;
        font-size: var(--text-sm);
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
    
    & .footer-links {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: var(--gutter-lg);
      padding: var(--pad-xl) var(--pad-lg);
      max-width: 1200px;
      margin: 0 auto;
      
      & .footer-column {
        display: grid;
        gap: var(--gutter-sm);
        
        & h4 {
          margin: 0 0 var(--marg-sm);
          font-size: var(--text-sm);
          font-weight: var(--font-semibold);
        }
        
        & a {
          color: var(--amazon-text-secondary);
          text-decoration: none;
          font-size: var(--text-sm);
          transition: color var(--amazon-transition);
          
          &:hover {
            color: var(--amazon-blue-link);
          }
        }
      }
    }
    
    & .footer-legal {
      border-top: 1px solid var(--color-border);
      padding: var(--pad-lg);
      text-align: center;
      color: var(--amazon-text-secondary);
      font-size: var(--text-sm);
    }
  }
}

@layer amazon-utilities {
  .amazon-demo {
    & .text-link {
      color: var(--amazon-blue-link);
      text-decoration: none;
      
      &:hover {
        text-decoration: underline;
        color: color-mix(in oklch, var(--amazon-blue-link), black 15%);
      }
    }
    
    & .badge-lightning {
      background: var(--amazon-price-red);
      color: white;
      padding: var(--pad-xs) var(--pad-sm);
      border-radius: var(--radius-sm);
      font-size: var(--text-xs);
      font-weight: var(--font-bold);
      text-transform: uppercase;
    }
  }
}