/**
 * Unified Quote Builder Step 2 Styles (2025-10-17)
 *
 * Purpose: HIGH-SPECIFICITY styles for Step 2 (Add Products) across ALL quote builders
 * Used by: embroidery-quote-builder.html, cap-embroidery-quote-builder.html
 *
 * Architecture Decision:
 * - Uses high-specificity selectors to override page-specific CSS
 * - Loaded AFTER page-specific modern CSS to win cascade
 * - Strategic !important only for critical visual fixes
 * - Single source of truth for Step 2 product selection UI
 */

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

:root {
    /* Spacing */
    --step2-space-xs: 8px;
    --step2-space-sm: 12px;
    --step2-space-md: 16px;
    --step2-space-lg: 24px;
    --step2-space-xl: 32px;

    /* Colors */
    --step2-primary: #3a7c52;
    --step2-primary-light: #4a9d68;
    --step2-success: #10b981;
    --step2-success-light: #d1fae5;

    /* Neutrals */
    --step2-gray-50: #f9fafb;
    --step2-gray-100: #f3f4f6;
    --step2-gray-200: #e5e7eb;
    --step2-gray-300: #d1d5db;
    --step2-gray-600: #4b5563;
    --step2-gray-900: #111827;

    /* Shadows */
    --step2-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --step2-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --step2-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

    /* Border Radius */
    --step2-radius-sm: 6px;
    --step2-radius-md: 12px;
    --step2-radius-lg: 16px;

    /* Transitions */
    --step2-transition: 250ms ease;
}

/* ============================================================================
   SEARCH SECTION - "Find Your Product/Cap"
   ============================================================================ */

#product-phase .qb-search-hero,
#product-phase .product-search-section {
    background: white !important;
    border-radius: var(--step2-radius-lg) !important;
    padding: var(--step2-space-xl) !important;
    box-shadow: var(--step2-shadow-md) !important;
    margin-bottom: var(--step2-space-xl) !important;
}

#product-phase .qb-search-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--step2-gray-900) !important;
    margin-bottom: var(--step2-space-sm) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--step2-space-sm) !important;
}

#product-phase .qb-search-subtitle {
    color: var(--step2-gray-600) !important;
    font-size: 14px !important;
    margin-bottom: var(--step2-space-lg) !important;
}

/* Search Input Row */
#product-phase .qb-search-row,
#product-phase .qb-input-group {
    display: flex !important;
    gap: var(--step2-space-md) !important;
    align-items: flex-start !important;
}

#product-phase .qb-search-input-wrapper,
#product-phase .qb-input-wrapper {
    flex: 1 !important;
    position: relative !important;
}

/* Search icon positioning */
#product-phase .qb-input-icon {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--step2-gray-400) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Search Input - ALL VARIANTS */
#product-phase .qb-search-input,
#product-phase .qb-input,
#product-phase #style-search {
    width: 100% !important;
    padding: 14px 16px 14px 44px !important; /* Left padding for icon */
    border: 2px solid var(--step2-gray-200) !important;
    border-radius: var(--step2-radius-md) !important;
    font-size: 16px !important;
    transition: all var(--step2-transition) !important;
    background: white !important;
}

#product-phase .qb-search-input:focus,
#product-phase .qb-input:focus,
#product-phase #style-search:focus {
    outline: none !important;
    border-color: var(--step2-primary) !important;
    box-shadow: 0 0 0 3px rgba(58, 124, 82, 0.1) !important;
}

/* Autocomplete Suggestions Dropdown */
#product-phase .qb-suggestions-dropdown,
#product-phase #style-suggestions {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    border: 2px solid var(--step2-gray-200) !important;
    border-radius: var(--step2-radius-md) !important;
    box-shadow: var(--step2-shadow-lg) !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    z-index: 100 !important;
}

#product-phase .suggestion-item,
#product-phase .qb-suggestion-item {
    padding: 12px 16px !important;
    cursor: pointer !important;
    transition: background var(--step2-transition) !important;
    border-bottom: 1px solid var(--step2-gray-100) !important;
}

#product-phase .suggestion-item:hover,
#product-phase .qb-suggestion-item:hover {
    background: var(--step2-gray-50) !important;
}

#product-phase .suggestion-item:last-child,
#product-phase .qb-suggestion-item:last-child {
    border-bottom: none !important;
}

/* LOAD PRODUCT BUTTON - CRITICAL FIX */
#product-phase .qb-search-btn,
#product-phase .qb-btn-primary,
#product-phase #load-product-btn,
#product-phase button[id*="load"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 28px !important;
    background: var(--step2-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--step2-radius-md) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all var(--step2-transition) !important;
    white-space: nowrap !important;
    box-shadow: var(--step2-shadow-sm) !important;
}

#product-phase .qb-search-btn:hover:not(:disabled),
#product-phase .qb-btn-primary:hover:not(:disabled),
#product-phase #load-product-btn:hover:not(:disabled),
#product-phase button[id*="load"]:hover:not(:disabled) {
    background: var(--step2-primary-light) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--step2-shadow-md) !important;
}

#product-phase .qb-search-btn:disabled,
#product-phase .qb-btn-primary:disabled,
#product-phase #load-product-btn:disabled,
#product-phase button[id*="load"]:disabled {
    background: var(--step2-gray-300) !important;
    color: var(--step2-gray-600) !important;
    cursor: not-allowed !important;
    transform: none !important;
    opacity: 0.6 !important;
    box-shadow: none !important;
}

/* Button icon spacing */
#product-phase .qb-search-btn i,
#product-phase .qb-btn-primary i,
#product-phase #load-product-btn i {
    font-size: 14px !important;
}

/* ============================================================================
   COLOR SWATCHES - CRITICAL FIX
   ============================================================================ */

/* Force horizontal grid layout for color swatches */
#product-phase .qb-swatches-section,
#product-phase #qb-swatches-section,
#product-phase .color-swatches-container {
    display: block !important;
    background: white !important;
    border-radius: var(--step2-radius-lg) !important;
    padding: var(--step2-space-lg) !important;
    margin-bottom: var(--step2-space-lg) !important;
    box-shadow: var(--step2-shadow-sm) !important;
}

#product-phase .qb-swatches-label {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--step2-gray-900) !important;
    margin-bottom: var(--step2-space-md) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--step2-space-sm) !important;
}

/* THE CRITICAL FIX: Force grid layout for swatches container */
/* 🎯 UX IMPROVEMENT (2025-10-17): Bigger swatches for better tap targets */
#product-phase .qb-swatch-grid,
#product-phase #color-swatches-container,
#product-phase .color-swatches-container .row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important; /* 70px → 100px (43% bigger) */
    gap: 20px !important; /* 16px → 20px (more breathing room) */
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Individual color swatch */
#product-phase .qb-swatch,
#product-phase .color-swatch {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    padding: 12px !important;
    border: 2px solid var(--step2-gray-200) !important;
    border-radius: var(--step2-radius-md) !important;
    transition: all var(--step2-transition) !important;
    background: white !important;
    text-align: center !important;
}

#product-phase .qb-swatch:hover,
#product-phase .color-swatch:hover {
    border-color: var(--step2-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--step2-shadow-md) !important;
}

#product-phase .qb-swatch.selected,
#product-phase .color-swatch.selected {
    border-color: var(--step2-primary) !important;
    background: rgba(58, 124, 82, 0.05) !important;
    box-shadow: 0 0 0 3px rgba(58, 124, 82, 0.15) !important;
}

#product-phase .qb-swatch-color,
#product-phase .color-swatch-preview {
    width: 48px !important;
    height: 48px !important;
    border-radius: var(--step2-radius-sm) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    flex-shrink: 0 !important;
}

#product-phase .qb-swatch-name,
#product-phase .color-swatch-name {
    font-size: 12px !important;
    color: var(--step2-gray-600) !important;
    font-weight: 500 !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
}

/* ============================================================================
   SHOW MORE COLORS BUTTON (2025-10-17)
   ============================================================================ */

/* Show More Button - Professional Full-Width Design (2025-10-17 Refinement) */
/* CRITICAL: High-specificity selectors to override grid parent */
#product-phase .qb-show-more-btn,
#product-phase #show-more-colors-btn,
#product-phase .qb-swatch-grid .qb-show-more-btn,
#product-phase .qb-swatch-grid #show-more-colors-btn,
#product-phase #color-swatches-container .qb-show-more-btn,
#product-phase #color-swatches-container #show-more-colors-btn {
    /* Break out of grid layout */
    grid-column: 1 / -1 !important;  /* Span all grid columns */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 14px 20px !important;
    margin-top: 24px !important;

    /* Subtle neutral background instead of transparent */
    background: #f8f9fa !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
    border-radius: var(--step2-radius-md) !important;

    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all var(--step2-transition) !important;
}

#product-phase .qb-show-more-btn:hover,
#product-phase #show-more-colors-btn:hover,
#product-phase .qb-swatch-grid .qb-show-more-btn:hover,
#product-phase .qb-swatch-grid #show-more-colors-btn:hover,
#product-phase #color-swatches-container .qb-show-more-btn:hover,
#product-phase #color-swatches-container #show-more-colors-btn:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
}

/* Expanded state with blue accent to indicate active */
#product-phase .qb-show-more-btn.expanded,
#product-phase #show-more-colors-btn.expanded,
#product-phase .qb-swatch-grid .qb-show-more-btn.expanded,
#product-phase .qb-swatch-grid #show-more-colors-btn.expanded,
#product-phase #color-swatches-container .qb-show-more-btn.expanded,
#product-phase #color-swatches-container #show-more-colors-btn.expanded {
    background: #e7f5ff !important;
    border-color: #74c0fc !important;
    color: #1971c2 !important;
}

#product-phase .qb-show-more-btn .toggle-icon,
#product-phase #show-more-colors-btn .toggle-icon,
#product-phase .qb-swatch-grid .qb-show-more-btn .toggle-icon,
#product-phase .qb-swatch-grid #show-more-colors-btn .toggle-icon,
#product-phase #color-swatches-container .qb-show-more-btn .toggle-icon,
#product-phase #color-swatches-container #show-more-colors-btn .toggle-icon {
    transition: transform var(--step2-transition) !important;
}

#product-phase .qb-show-more-btn.expanded .toggle-icon,
#product-phase #show-more-colors-btn.expanded .toggle-icon,
#product-phase .qb-swatch-grid .qb-show-more-btn.expanded .toggle-icon,
#product-phase .qb-swatch-grid #show-more-colors-btn.expanded .toggle-icon,
#product-phase #color-swatches-container .qb-show-more-btn.expanded .toggle-icon,
#product-phase #color-swatches-container #show-more-colors-btn.expanded .toggle-icon {
    transform: rotate(180deg) !important;
}

/* 🎯 NEW APPROACH (2025-10-17): Simplified "Show More" with class-based hiding */
/* Individual swatches that are initially hidden (colors 13+) */
#product-phase .color-swatch.initially-hidden {
    display: none !important;
}

/* Show hidden swatches when "Show More" is clicked */
#product-phase.show-more-active .color-swatch.initially-hidden {
    display: flex !important;
    animation: fadeInSwatch 0.3s ease-out !important;
}

@keyframes fadeInSwatch {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* OLD APPROACH (deprecated but kept for compatibility) */
/* Hidden swatches container (wrapper div approach - no longer used) */
#product-phase .qb-swatch-grid-hidden,
#product-phase #hidden-swatches {
    display: none !important;
}

#product-phase .qb-swatch-grid-hidden.expanded,
#product-phase #hidden-swatches.expanded {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 20px !important;
    margin-top: 20px !important;
    animation: slideDown 0.3s ease-out !important;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 2000px;
    }
}

/* ============================================================================
   PRODUCT DISPLAY SECTION - COMPACT HORIZONTAL CARD (2025-10-17 REDESIGN)
   ============================================================================ */

#product-phase .product-display,
#product-phase #product-display {
    background: white !important;
    border-radius: var(--step2-radius-lg) !important;
    padding: var(--step2-space-lg) !important; /* Reduced from XL for tighter layout */
    box-shadow: var(--step2-shadow-sm) !important; /* Lighter shadow - more modern */
    margin-top: var(--step2-space-lg) !important;
}

/* Compact horizontal product card with thumbnail */
#product-phase .product-info {
    display: grid !important;
    grid-template-columns: 80px 1fr !important; /* Fixed 80px thumbnail, rest flexible */
    gap: var(--step2-space-lg) !important;
    padding: var(--step2-space-md) !important;
    background: var(--step2-gray-50) !important;
    border-radius: var(--step2-radius-md) !important;
    border: 1px solid var(--step2-gray-200) !important;
    align-items: center !important; /* Vertical center alignment */
    margin-bottom: var(--step2-space-md) !important; /* Tighter spacing */
}

/* Small thumbnail image - just for reference */
#product-phase .product-info img,
#product-phase #product-image,
#product-phase .product-image {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: var(--step2-radius-sm) !important;
    border: 1px solid var(--step2-gray-200) !important;
    background: white !important;
    flex-shrink: 0 !important;
}

/* Product metadata - compact inline format */
#product-phase .product-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

#product-phase .product-details h3,
#product-phase #product-name {
    font-size: 16px !important; /* Reduced from 24px - more compact */
    font-weight: 600 !important; /* Lighter than 700 - less shouty */
    color: var(--step2-gray-900) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

#product-phase .product-details p,
#product-phase #product-description {
    font-size: 13px !important;
    color: var(--step2-gray-600) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Color badge for selected color */
#product-phase .product-color-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    background: white !important;
    border: 1px solid var(--step2-gray-200) !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    color: var(--step2-gray-700) !important;
    width: fit-content !important;
}

/* ============================================================================
   SIZE INPUTS - HORIZONTAL COMPACT LAYOUT (2025-10-17 REDESIGN)
   ============================================================================ */

#product-phase .size-matrix {
    margin-top: var(--step2-space-md) !important; /* Tighter spacing */
    padding: var(--step2-space-lg) !important;
    background: var(--step2-gray-50) !important;
    border-radius: var(--step2-radius-md) !important;
}

#product-phase .size-matrix h4 {
    font-size: 14px !important; /* Reduced from 18px - less prominent */
    font-weight: 600 !important;
    color: var(--step2-gray-700) !important;
    margin-bottom: var(--step2-space-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Horizontal flex layout for size inputs */
#product-phase .size-inputs,
#product-phase #size-inputs {
    display: flex !important; /* Changed from grid to flex for horizontal flow */
    flex-wrap: wrap !important;
    gap: var(--step2-space-sm) !important;
    margin-bottom: var(--step2-space-md) !important;
}

/* Compact size input pill */
#product-phase .size-input-group {
    background: white !important;
    border: 1.5px solid var(--step2-gray-200) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important; /* Reduced from 16px - more compact */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important; /* Tighter vertical gap */
    min-width: 70px !important; /* Reduced from 110px - smaller pills */
    transition: all 0.2s !important;
    min-height: auto !important; /* Remove fixed height */
}

#product-phase .size-input-group:hover {
    border-color: var(--step2-gray-300) !important;
    box-shadow: var(--step2-shadow-sm) !important;
}

#product-phase .size-input-label,
#product-phase .size-label {
    font-size: 11px !important; /* Reduced from 14px - more compact */
    font-weight: 700 !important;
    color: var(--step2-gray-600) !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

#product-phase .size-input,
#product-phase .size-input-group input[type="number"] {
    width: 45px !important; /* Fixed narrow width - very compact */
    padding: 6px !important; /* Reduced from 10px - smaller */
    border: 1.5px solid var(--step2-gray-200) !important;
    border-radius: 6px !important;
    font-size: 15px !important; /* Slightly smaller from 16px */
    font-weight: 700 !important;
    text-align: center !important;
    background: var(--step2-gray-50) !important;
    transition: all 0.2s !important;
}

#product-phase .size-input:focus,
#product-phase .size-input-group input[type="number"]:focus {
    outline: none !important;
    border-color: var(--step2-primary) !important;
    background: white !important;
    box-shadow: 0 0 0 3px rgba(58, 124, 82, 0.1) !important;
}

/* CRITICAL: Green highlight when input has value */
#product-phase .size-input:not(:placeholder-shown),
#product-phase .size-input-group input:not(:placeholder-shown),
#product-phase .size-input[value]:not([value=""]),
#product-phase .size-input-group input[value]:not([value=""]) {
    background: #ecfdf5 !important;
    border-color: var(--step2-success) !important;
    color: #065f46 !important;
    font-weight: 800 !important;
}

/* Highlight parent card when input has value */
#product-phase .size-input-group:has(input:not(:placeholder-shown)),
#product-phase .size-input-group:has(input[value]:not([value=""])) {
    border-color: var(--step2-success) !important;
    background: #f0fdf4 !important;
    box-shadow: 0 0 0 2px var(--step2-success-light) !important;
}

/* ============================================================================
   HORIZONTAL FOOTER: TOTAL + ADD BUTTON (2025-10-17 REDESIGN)
   ============================================================================ */

/* Container for total and button - horizontal layout */
#product-phase .product-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--step2-space-lg) !important;
    margin-top: var(--step2-space-lg) !important;
    padding-top: var(--step2-space-lg) !important;
    border-top: 1px solid var(--step2-gray-200) !important;
}

/* Total quantity display - compact inline */
#product-phase .total-row {
    display: flex !important;
    align-items: center !important;
    gap: var(--step2-space-md) !important;
    padding: var(--step2-space-md) var(--step2-space-lg) !important;
    background: var(--step2-gray-50) !important;
    border-radius: var(--step2-radius-md) !important;
    border: 1.5px solid var(--step2-gray-200) !important;
    flex: 0 0 auto !important; /* Don't grow - stay compact */
}

#product-phase .total-row strong {
    font-size: 14px !important;
    color: var(--step2-gray-600) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

#product-phase .total-row span,
#product-phase #product-total-qty {
    font-size: 24px !important; /* Big and bold for emphasis */
    font-weight: 700 !important;
    color: var(--step2-primary) !important;
}

/* ============================================================================
   ADD TO QUOTE BUTTON - INLINE WITH TOTAL
   ============================================================================ */

#product-phase .qb-add-product-btn,
#product-phase #add-to-quote-btn {
    flex: 1 !important; /* Grow to fill available space */
    max-width: 300px !important; /* Don't get too wide */
    padding: 14px 28px !important;
    background: var(--step2-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--step2-radius-md) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    box-shadow: var(--step2-shadow-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 0 !important; /* Remove top margin - horizontal layout */
}

#product-phase .qb-add-product-btn:hover,
#product-phase #add-to-quote-btn:hover {
    background: var(--step2-primary-light) !important;
    transform: translateY(-1px) !important; /* Subtle lift */
    box-shadow: var(--step2-shadow-md) !important;
}

#product-phase .qb-add-product-btn:disabled,
#product-phase #add-to-quote-btn:disabled {
    background: var(--step2-gray-300) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 0.6 !important;
}

/* ============================================================================
   PRODUCTS IN QUOTE SECTION - HORIZONTAL COMPACT CARDS (2025-10-17 REDESIGN)
   ============================================================================ */

/* Products List Container */
#product-phase #products-list,
#product-phase .products-list {
    background: white !important;
    border-radius: var(--step2-radius-lg) !important;
    padding: var(--step2-space-xl) !important;
    box-shadow: var(--step2-shadow-sm) !important;
    margin-top: var(--step2-space-xl) !important;
}

/* Section Title "Caps in Quote" / "Products in Quote" */
#product-phase #products-list h3,
#product-phase .products-list h3 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--step2-gray-900) !important;
    margin: 0 0 var(--step2-space-lg) 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--step2-space-sm) !important;
}

/* Products Container */
#product-phase #products-container,
#product-phase .qb-products-container {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--step2-space-md) !important;
}

/* Empty State Message */
#product-phase .empty-message {
    text-align: center !important;
    padding: var(--step2-space-xl) !important;
    color: var(--step2-gray-600) !important;
    font-size: 15px !important;
    background: var(--step2-gray-50) !important;
    border-radius: var(--step2-radius-md) !important;
    border: 2px dashed var(--step2-gray-200) !important;
}

/* ============================================================================
   VERTICAL PRODUCT CARD - E-COMMERCE STYLE (2025-10-17 REDESIGN)
   ============================================================================ */

/* Products Container - Responsive Grid Layout */
#product-phase #products-container,
#product-phase .qb-products-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: var(--step2-space-xl) !important;
    padding: 0 !important;
}

/* Main Product Card - Vertical Layout (Shopify/Stripe Style) */
#product-phase .qb-product-card,
#product-phase .product-card,
#product-phase .product-card-modern {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    background: white !important;
    border: 2px solid var(--step2-gray-200) !important;
    border-radius: var(--step2-radius-lg) !important;
    padding: var(--step2-space-lg) !important;

    transition: all var(--step2-transition) !important;
    min-height: auto !important;

    /* Subtle shadow for depth */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;

    /* POLISH (2025-10-17): Constrain max width to prevent stretching */
    max-width: 350px !important;
    margin: 0 auto !important; /* Center in grid cell */
}

#product-phase .qb-product-card:hover,
#product-phase .product-card:hover,
#product-phase .product-card-modern:hover {
    border-color: var(--step2-primary) !important;
    /* POLISH (2025-10-17): Enhanced hover shadow */
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16) !important;
    /* POLISH (2025-10-17): Bigger lift effect */
    transform: translateY(-6px) !important;
}

/* Product Image - Large and Prominent (200x200px) */
#product-phase .qb-product-card img,
#product-phase .product-card img,
#product-phase .product-card-img,
#product-phase .product-card-modern img,
#product-phase .product-card-image {
    width: 100% !important;
    height: 200px !important;
    object-fit: contain !important;
    border-radius: var(--step2-radius-md) !important;
    background: var(--step2-gray-50) !important;
    padding: var(--step2-space-md) !important;
    margin-bottom: var(--step2-space-lg) !important;
    flex-shrink: 0 !important;

    /* Subtle border for definition */
    border: 1px solid var(--step2-gray-200) !important;
}

/* Product Content Area - Centered */
#product-phase .product-card-content,
#product-phase .qb-product-info,
#product-phase .product-card-header,
#product-phase .product-card-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: var(--step2-space-md) !important;
    flex: 1 !important; /* Push actions to bottom */
    min-width: 0 !important; /* Allow text truncation */
}

/* Product Name - Bold and Prominent */
#product-phase .product-card-content h4,
#product-phase .qb-product-info h4,
#product-phase .product-name,
#product-phase .product-card-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--step2-gray-900) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}

/* Product Subtitle - Lighter Weight */
#product-phase .product-card-subtitle {
    font-size: 14px !important;
    color: var(--step2-gray-600) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

/* Product Metadata - Beautiful Badges Centered */
#product-phase .product-meta,
#product-phase .qb-product-meta,
#product-phase .product-card-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--step2-space-sm) !important;
    flex-wrap: wrap !important;
    margin: var(--step2-space-md) 0 !important;
}

/* Redesigned Badges - More Prominent with Icons */
#product-phase .product-meta span,
#product-phase .qb-product-meta span,
#product-phase .meta-badge,
#product-phase .color-badge,
#product-phase .qty-badge {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--step2-gray-900) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
    border: 1.5px solid var(--step2-success) !important;
    border-radius: 24px !important;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.1) !important;
}

/* Size Breakdown Badges - Prominent Blue Gradient (2025-10-17 REDESIGN) */
#product-phase .product-card-sizes,
#product-phase .qb-product-sizes {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    margin: var(--step2-space-md) 0 !important;
}

#product-phase .size-badge {
    font-size: 13px !important;
    color: #1e40af !important; /* Deep blue text */
    background: linear-gradient(135deg, #eff6ff, #dbeafe) !important; /* Blue gradient */
    padding: 6px 12px !important;
    border-radius: 16px !important;
    border: 1.5px solid #3b82f6 !important; /* Blue border */
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.1) !important; /* Subtle blue shadow */

    /* Smooth transition */
    transition: all 0.2s ease !important;
}

#product-phase .size-badge:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2) !important;
}

/* Pricing Summary Line */
#product-phase .product-pricing-summary,
#product-phase .qb-pricing-summary {
    font-size: 13px !important;
    color: var(--step2-gray-600) !important;
    line-height: 1.4 !important;
}

/* Product Card Body - Pricing Breakdown Section */
#product-phase .product-card-body {
    padding: var(--step2-space-sm) 0 !important;
    font-size: 13px !important;
    color: var(--step2-gray-600) !important;
    line-height: 1.5 !important;
}

/* Product Card Footer - Total Price Section */
#product-phase .product-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: var(--step2-space-sm) 0 !important;
    margin-top: var(--step2-space-sm) !important;
    border-top: 1px solid var(--step2-gray-200) !important;
}

#product-phase .footer-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--step2-gray-700) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

#product-phase .footer-amount {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--step2-success) !important;
}

/* Product Actions - Bottom of Card, Centered */
#product-phase .product-card-actions,
#product-phase .qb-product-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--step2-space-md) !important;
    padding-top: var(--step2-space-lg) !important;
    margin-top: var(--step2-space-lg) !important;
    border-top: 1px solid var(--step2-gray-200) !important;
    width: 100% !important;
}

/* Total Price Display - Prominent at Bottom */
#product-phase .product-total-price,
#product-phase .qb-product-total {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--step2-success) !important;
    margin: 0 !important;
}

/* Action Buttons Container - Horizontal Row */
/* POLISH (2025-10-17): Added subtle background bar for better visual separation */
#product-phase .action-buttons,
#product-phase .qb-action-buttons {
    display: flex !important;
    gap: var(--step2-space-sm) !important;
    width: 100% !important;
    justify-content: center !important;

    /* Subtle background bar */
    background: var(--step2-gray-50) !important;
    padding: var(--step2-space-md) !important;
    margin: 0 calc(var(--step2-space-lg) * -1) calc(var(--step2-space-lg) * -1) !important; /* Negative margins to extend to card edges */
    border-radius: 0 0 var(--step2-radius-lg) var(--step2-radius-lg) !important; /* Match card's bottom corners */
    border-top: 1px solid var(--step2-gray-200) !important;
}

/* Icon Buttons - Larger, More Prominent */
/* POLISH (2025-10-17): Increased size 44px → 48px for better tap targets */
#product-phase .btn-edit,
#product-phase .btn-delete,
#product-phase .qb-btn-edit,
#product-phase .qb-btn-delete,
#product-phase .btn-icon {
    width: 48px !important;  /* 44px → 48px */
    height: 48px !important; /* 44px → 48px */
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 2px solid var(--step2-gray-300) !important;
    border-radius: 50% !important; /* Circular buttons */
    background: white !important;

    font-size: 18px !important; /* 16px → 18px for better visibility */
    cursor: pointer !important;
    transition: all var(--step2-transition) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* Edit Button - Blue accent */
#product-phase .btn-edit,
#product-phase .qb-btn-edit {
    color: #3b82f6 !important;
}

#product-phase .btn-edit:hover,
#product-phase .qb-btn-edit:hover {
    background: #eff6ff !important;
    border-color: #3b82f6 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2) !important;
}

/* Delete Button - Red accent */
#product-phase .btn-delete,
#product-phase .qb-btn-delete,
#product-phase .btn-icon.btn-danger {
    color: #ef4444 !important;
}

#product-phase .btn-delete:hover,
#product-phase .qb-btn-delete:hover,
#product-phase .btn-icon.btn-danger:hover {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.2) !important;
}

/* ============================================================================
   AGGREGATE TOTAL DISPLAY - MODERN CARD (2025-10-17 REDESIGN)
   ============================================================================ */

#product-phase .aggregate-total {
    background: white !important;
    border: 2px solid var(--step2-gray-200) !important;
    border-radius: var(--step2-radius-lg) !important;
    padding: var(--step2-space-xl) !important;
    margin-top: var(--step2-space-xl) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: var(--step2-space-lg) !important;

    /* Subtle shadow for depth */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

#product-phase .aggregate-total strong {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--step2-gray-700) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#product-phase .aggregate-total span,
#product-phase #aggregate-total {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--step2-gray-900) !important;
    margin-left: var(--step2-space-sm) !important;
}

/* Tier Indicator Badge - Beautiful Green Gradient Pill */
#product-phase .tier-indicator,
#product-phase #tier-indicator {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important; /* Green gradient */
    border: 2px solid #10b981 !important; /* Green border */
    border-radius: 24px !important; /* Pill shape */
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #065f46 !important; /* Deep green text */
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15) !important; /* Subtle green shadow */
    transition: all 0.2s ease !important;
}

#product-phase .tier-indicator:hover,
#product-phase #tier-indicator:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25) !important;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
    /* Stack product info vertically on mobile (2025-10-17 REDESIGN) */
    #product-phase .product-info {
        grid-template-columns: 1fr !important; /* Single column - stack vertically */
        text-align: center !important;
    }

    /* Thumbnail stays 80px but centered */
    #product-phase .product-info img,
    #product-phase #product-image,
    #product-phase .product-image {
        margin: 0 auto !important; /* Center the thumbnail */
    }

    /* Center product details text */
    #product-phase .product-details {
        align-items: center !important;
    }

    /* Adjust horizontal size pills for mobile - keep flex but adjust sizing */
    #product-phase .size-inputs,
    #product-phase #size-inputs {
        justify-content: center !important; /* Center pills on mobile */
        gap: 8px !important; /* Tighter gap on mobile */
    }

    #product-phase .size-input-group {
        min-width: 65px !important; /* Slightly smaller on mobile */
    }

    /* Stack footer vertically on mobile (2025-10-17 REDESIGN) */
    #product-phase .product-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--step2-space-md) !important;
    }

    #product-phase .total-row {
        justify-content: center !important; /* Center total on mobile */
        width: 100% !important;
    }

    /* Full width button on mobile */
    #product-phase .qb-add-product-btn,
    #product-phase #add-to-quote-btn {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Fewer swatch columns on mobile - keep bigger size */
    #product-phase .qb-swatch-grid,
    #product-phase #color-swatches-container,
    #product-phase .qb-swatch-grid-hidden.expanded,
    #product-phase #hidden-swatches.expanded {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important; /* Slightly smaller on mobile but still bigger than before */
        gap: 16px !important;
    }

    /* Stack search row vertically */
    #product-phase .qb-search-row {
        flex-direction: column !important;
    }

    #product-phase .qb-search-btn {
        width: 100% !important;
    }

    /* PRODUCT CARDS IN QUOTE - Mobile Responsive (Vertical Layout Already Mobile-Friendly) */
    /* Cards container - single column on mobile */
    #product-phase #products-container,
    #product-phase .qb-products-container {
        grid-template-columns: 1fr !important; /* Single column on mobile */
        gap: var(--step2-space-lg) !important;
    }

    /* Product cards maintain vertical layout (already perfect for mobile) */
    #product-phase .qb-product-card,
    #product-phase .product-card,
    #product-phase .product-card-modern {
        /* Already vertical - no changes needed */
        padding: var(--step2-space-md) !important; /* Slightly tighter on mobile */
    }

    /* Product image - slightly smaller on mobile */
    #product-phase .qb-product-card img,
    #product-phase .product-card img,
    #product-phase .product-card-img,
    #product-phase .product-card-modern img,
    #product-phase .product-card-image {
        height: 180px !important; /* Reduce from 200px on mobile */
    }

    /* Aggregate total - stack on mobile */
    #product-phase .aggregate-total {
        flex-direction: column !important;
        text-align: center !important;
        gap: var(--step2-space-sm) !important;
    }
}

@media (max-width: 480px) {
    /* Smaller size pills on very small screens (2025-10-17 REDESIGN) */
    #product-phase .size-input-group {
        min-width: 60px !important; /* Even more compact on tiny screens */
        padding: 6px 10px !important; /* Tighter padding */
    }

    #product-phase .size-input {
        width: 40px !important; /* Narrower input box */
    }

    /* Smaller swatches on tiny screens but still bigger than before */
    #product-phase .qb-swatch-grid,
    #product-phase #color-swatches-container,
    #product-phase .qb-swatch-grid-hidden.expanded,
    #product-phase #hidden-swatches.expanded {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important; /* Was 50px, now 80px */
        gap: 12px !important;
    }
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

#product-phase .qb-hidden {
    display: none !important;
}

#product-phase .qb-fade-in {
    animation: qbFadeIn var(--step2-transition) ease-out !important;
}

@keyframes qbFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Focus visible for accessibility */
#product-phase *:focus-visible {
    outline: 2px solid var(--step2-primary) !important;
    outline-offset: 2px !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    #product-phase * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}