/* /Pages/AccessDenied.cshtml.rz.scp.css */
.page-container[b-rwr240i20o] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100vw;
    background: linear-gradient(135deg, var(--sl-color-primary-600) 0%, var(--sl-color-primary-800) 100%);
    padding: var(--sl-spacing-large);
}

.access-denied-form[b-rwr240i20o] {
    width: 400px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border-radius: var(--sl-border-radius-large);
}

.access-denied-form[b-rwr240i20o]::part(header) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: var(--sl-spacing-large);
    background: var(--sl-color-primary-600);
    color: white;
    border-radius: var(--sl-border-radius-large) var(--sl-border-radius-large) 0 0;
}

.access-denied-form h2[b-rwr240i20o] {
    margin-top: var(--sl-spacing-medium);
    font-size: 1.75rem;
    font-weight: 600;
    text-align: center;
}

.access-denied-form sl-avatar[b-rwr240i20o] {
    width: 64px;
    height: 64px;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.access-denied-form > div[b-rwr240i20o] {
    padding: var(--sl-spacing-large);
}

.access-denied-form sl-alert[b-rwr240i20o] {
    margin-bottom: var(--sl-spacing-large);
}

.access-denied-form sl-button[b-rwr240i20o] {
    height: 48px;
    font-weight: 600;
    margin-right: var(--sl-spacing-small);
}

.access-denied-form sl-button:last-child[b-rwr240i20o] {
    margin-right: 0;
}

/* Responsive design */
@media (max-width: 480px) {
    .page-container[b-rwr240i20o] {
        padding: var(--sl-spacing-medium);
    }
    
    .access-denied-form[b-rwr240i20o] {
        width: 100%;
        max-width: 100%;
    }
    
    .access-denied-form[b-rwr240i20o]::part(header) {
        padding: var(--sl-spacing-medium);
    }
    
    .access-denied-form > div[b-rwr240i20o] {
        padding: var(--sl-spacing-medium);
    }
    
    .access-denied-form sl-button[b-rwr240i20o] {
        width: 100%;
        margin-right: 0;
        margin-bottom: var(--sl-spacing-small);
    }
    
    .access-denied-form sl-button:last-child[b-rwr240i20o] {
        margin-bottom: 0;
    }
}

/* Animation for form elements */
.access-denied-form sl-button[b-rwr240i20o] {
    transition: all 0.2s ease-in-out;
}

.access-denied-form sl-button:hover[b-rwr240i20o] {
    transform: translateY(-1px);
}
/* /Pages/AIDesigner.cshtml.rz.scp.css */
/* 1. Layout */
.designer-container[b-2j8emj2yau] {
    display: grid;
    grid-template-rows: 1fr auto;
    height: 100vh;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}

/* 2. Hero Section */
.hero-section[b-2j8emj2yau] {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: var(--sl-spacing-large);
    text-align: center;
    padding: var(--sl-spacing-2x-large) var(--sl-spacing-large);
    overflow-y: auto;
}

.hero-icon[b-2j8emj2yau] {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sl-color-primary-100), var(--sl-color-secondary-100));
    border-radius: 50%;
    margin-bottom: var(--sl-spacing-medium);
}

.hero-icon sl-icon[b-2j8emj2yau] {
    font-size: 3.5rem;
    color: var(--sl-color-primary-600);
}

.hero-title[b-2j8emj2yau] {
    margin: 0;
    font-size: var(--sl-font-size-2x-large);
    font-weight: var(--sl-font-weight-bold);
    color: var(--sl-color-neutral-900);
}

.hero-description[b-2j8emj2yau] {
    margin: 0;
    font-size: var(--sl-font-size-large);
    color: var(--sl-color-neutral-600);
    max-width: 600px;
}

.hero-section #personalization-section[b-2j8emj2yau] {
    max-width: 900px;
    margin: 0 auto;
}

/* 3. Product Type Selection */
.hero-section #personalization-hero-slot[b-2j8emj2yau] {
    width: 100%;
}

.product-type-section[b-2j8emj2yau] {
    width: 100%;
    max-width: 900px;
    display: grid;
    gap: var(--sl-spacing-small);
}

.product-type-header[b-2j8emj2yau] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-small);
    font-size: var(--sl-font-size-small);
    font-weight: var(--sl-font-weight-semibold);
    color: var(--sl-color-neutral-700);
    justify-content: center;
}

.product-type-header sl-icon[b-2j8emj2yau] {
    font-size: var(--sl-font-size-medium);
    color: var(--sl-color-primary-600);
}

.product-type-grid[b-2j8emj2yau] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sl-spacing-small);
}

.product-type-card[b-2j8emj2yau] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sl-spacing-2x-small);
    padding: var(--sl-spacing-small);
    background: var(--sl-color-neutral-0);
    border: 2px solid var(--sl-color-neutral-200);
    border-radius: var(--sl-border-radius-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    width: 100px;
    flex-shrink: 0;
}

.product-type-card:hover[b-2j8emj2yau] {
    border-color: var(--sl-color-primary-400);
    background: color-mix(in srgb, var(--sl-color-primary-50) 50%, transparent);
    transform: translateY(-2px);
    box-shadow: var(--sl-shadow-small);
}

.product-type-card.selected[b-2j8emj2yau] {
    border-color: var(--sl-color-primary-600);
    background: var(--sl-color-primary-100);
    box-shadow: var(--sl-shadow-small);
}

.product-type-icon[b-2j8emj2yau] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sl-color-primary-100);
    border-radius: 50%;
    flex-shrink: 0;
}

.product-type-card.selected .product-type-icon[b-2j8emj2yau] {
    background: var(--sl-color-primary-600);
}

.product-type-icon sl-icon[b-2j8emj2yau] {
    font-size: 1.25rem;
    color: var(--sl-color-primary-600);
}

.product-type-card.selected .product-type-icon sl-icon[b-2j8emj2yau] {
    color: var(--sl-color-neutral-0);
}

.product-type-name[b-2j8emj2yau] {
    font-size: var(--sl-font-size-x-small);
    font-weight: var(--sl-font-weight-medium);
    color: var(--sl-color-neutral-900);
    line-height: 1.2;
    word-break: break-word;
}

.product-type-card.selected .product-type-name[b-2j8emj2yau] {
    color: var(--sl-color-primary-700);
}

/* 4. Upload Section */
.upload-section[b-2j8emj2yau] {
    width: 100%;
    max-width: 700px;
    max-height: 300px;
    display: grid;
    gap: var(--sl-spacing-medium);
}

.upload-header[b-2j8emj2yau] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-small);
    font-size: var(--sl-font-size-medium);
    font-weight: var(--sl-font-weight-medium);
    color: var(--sl-color-neutral-700);
}

.upload-header sl-icon[b-2j8emj2yau] {
    font-size: var(--sl-font-size-large);
    color: var(--sl-color-primary-600);
}

.upload-dropzone[b-2j8emj2yau] {
    position: relative;
    width: 100%;
    min-height: 200px;
    border: 2px dashed var(--sl-color-neutral-300);
    border-radius: var(--sl-border-radius-large);
    background: var(--sl-color-neutral-50);
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.upload-dropzone:hover[b-2j8emj2yau] {
    border: 2px solid var(--sl-color-primary-500);
    background: var(--sl-color-neutral-100);
}

.upload-dropzone.dragover[b-2j8emj2yau] {
    border: 2px solid var(--sl-color-primary-600);
    background: var(--sl-color-neutral-200);
    transform: scale(1.02);
}

.dropzone-content[b-2j8emj2yau] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sl-spacing-2x-large);
    gap: var(--sl-spacing-medium);
    height: 100%;
    min-height: 200px;
}

.dropzone-text[b-2j8emj2yau] {
    margin: 0;
    font-size: var(--sl-font-size-medium);
    font-weight: var(--sl-font-weight-medium);
    color: var(--sl-color-neutral-700);
}

.dropzone-hint[b-2j8emj2yau] {
    margin: 0;
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-500);
}

.dropzone-preview[b-2j8emj2yau] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
}

.dropzone-preview img[b-2j8emj2yau] {
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: contain;
    display: block;
}

.preview-overlay[b-2j8emj2yau] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.dropzone-preview:hover .preview-overlay[b-2j8emj2yau] {
    opacity: 1;
}

/* 4. Design Workspace */
.design-workspace[b-2j8emj2yau] {
    display: grid;
    grid-template-rows: auto auto 1fr;
    height: 100%;
    overflow: hidden;
}

/* Version Navigation */
.version-navigation[b-2j8emj2yau] {
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sl-spacing-small);
    padding: var(--sl-spacing-medium) var(--sl-spacing-large);
    background: var(--sl-color-neutral-0);
    border-bottom: 1px solid var(--sl-color-neutral-200);
    box-shadow: var(--sl-shadow-small);
}

.version-navigation sl-button-group[b-2j8emj2yau] {
    display: flex;
    align-items: center;
}

#version-label[b-2j8emj2yau] {
    min-width: 120px;
    pointer-events: none;
}

.revision-count[b-2j8emj2yau] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-x-small);
}

/* Design Preview */
.design-preview-container[b-2j8emj2yau] {
    display: grid;
    gap: var(--sl-spacing-medium);
    width: 100%;
    max-width: 512px;
    margin: var(--sl-spacing-large) auto;
}

.design-preview[b-2j8emj2yau] {
    width: 100%;
    border-radius: var(--sl-border-radius-large);
    overflow: hidden;
    box-shadow: var(--sl-shadow-large);
    background: var(--sl-color-neutral-0);
}

.design-preview img[b-2j8emj2yau] {
    width: 100%;
    height: auto;
    display: block;
}

.design-preview .lazy-image-container[b-2j8emj2yau] {
    width: 100%;
    min-height: 512px;
}

.version-prompt[b-2j8emj2yau] {
    background: var(--sl-color-neutral-0);
    border-radius: var(--sl-border-radius-large);
    padding: var(--sl-spacing-large);
    box-shadow: var(--sl-shadow-medium);
}

.prompt-label[b-2j8emj2yau] {
    font-size: var(--sl-font-size-x-small);
    font-weight: var(--sl-font-weight-semibold);
    color: var(--sl-color-neutral-500);
    letter-spacing: var(--sl-letter-spacing-loose);
    margin-bottom: var(--sl-spacing-small);
}

.prompt-text[b-2j8emj2yau] {
    font-size: var(--sl-font-size-medium);
    color: var(--sl-color-neutral-900);
    line-height: 1.6;
}

.version-actions[b-2j8emj2yau] {
    display: flex;
    justify-content: center;
    gap: var(--sl-spacing-medium);
}

/* Revisions Section */
.revisions-section[b-2j8emj2yau] {
    display: grid;
    gap: var(--sl-spacing-medium);
    padding: var(--sl-spacing-large);
    background: var(--sl-color-neutral-50);
    border-radius: var(--sl-border-radius-large);
}

.revisions-header h3[b-2j8emj2yau] {
    margin: 0 0 var(--sl-spacing-x-small) 0;
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-semibold);
    color: var(--sl-color-neutral-900);
}

.revisions-description[b-2j8emj2yau] {
    margin: 0;
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-600);
}

.revisions-grid[b-2j8emj2yau] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: var(--sl-spacing-medium);
}

.revision-card[b-2j8emj2yau] {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: var(--sl-color-neutral-0);
    border-radius: var(--sl-border-radius-medium);
    overflow: hidden;
    box-shadow: var(--sl-shadow-small);
}

.revision-card:hover[b-2j8emj2yau] {
    transform: translateY(-2px);
    box-shadow: var(--sl-shadow-medium);
}

.revision-image-container[b-2j8emj2yau] {
    width: 128px;
    height: 128px;
    overflow: hidden;
    background: var(--sl-color-neutral-100);
    flex-shrink: 0;
}

.revision-image-container img[b-2j8emj2yau] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.revision-info[b-2j8emj2yau] {
    padding: var(--sl-spacing-medium);
}

.revision-prompt[b-2j8emj2yau] {
    margin: 0;
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-700);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* 4. Input Footer */
.input-footer[b-2j8emj2yau] {
    position: relative;
    z-index: 100;
    background: var(--sl-color-neutral-0);
    border-top: 1px solid var(--sl-color-neutral-200);
    padding: var(--sl-spacing-medium) var(--sl-spacing-large);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.input-form[b-2j8emj2yau] {
    display: grid;
    gap: var(--sl-spacing-small);
}

.input-wrapper[b-2j8emj2yau] {
    position: relative;
    display: grid;
    background: var(--sl-color-neutral-50);
    border: 1px solid var(--sl-color-neutral-300);
    border-radius: var(--sl-border-radius-large);
    padding: var(--sl-spacing-small);
}

.input-wrapper:focus-within[b-2j8emj2yau] {
    border-color: var(--sl-color-primary-500);
    box-shadow: 0 0 0 3px var(--sl-color-primary-100);
}

.input-wrapper sl-textarea[b-2j8emj2yau] {
    flex: 1;
}

.input-wrapper sl-textarea[b-2j8emj2yau]::part(base) {
    border: none;
    background: transparent;
}

.input-wrapper sl-textarea[b-2j8emj2yau]::part(base):focus-within {
    box-shadow: none;
}

.input-wrapper sl-textarea[b-2j8emj2yau]::part(textarea) {
    padding: var(--sl-spacing-small);
}

.input-actions[b-2j8emj2yau] {
    position: absolute;
    bottom: var(--sl-spacing-small);
    right: var(--sl-spacing-small);
    display: flex;
    gap: var(--sl-spacing-2x-small);
}

.input-actions sl-icon-button[b-2j8emj2yau] {
    font-size: 1.5rem;
}

.input-actions sl-icon-button[b-2j8emj2yau]::part(base) {
    color: var(--sl-color-neutral-600);
}

.input-actions sl-icon-button:hover[b-2j8emj2yau]::part(base) {
    color: var(--sl-color-primary-600);
}

#submit-button[b-2j8emj2yau]::part(base) {
    color: var(--sl-color-primary-600);
}

#submit-button:hover[b-2j8emj2yau]::part(base) {
    color: var(--sl-color-primary-700);
}

/* 5. Quick Suggestions */
.quick-suggestions[b-2j8emj2yau] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-small);
    flex-wrap: wrap;
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-600);
    margin-top: 12px;
}

.quick-suggestions sl-icon[b-2j8emj2yau] {
    font-size: var(--sl-font-size-medium);
    color: var(--sl-color-warning-500);
}

.suggestion-tag[b-2j8emj2yau] {
    cursor: pointer;
}

.suggestion-tag[b-2j8emj2yau]::part(base) {
    background: var(--sl-color-neutral-100);
    color: var(--sl-color-neutral-700);
    transition: all 0.2s ease;
}

.suggestion-tag:hover[b-2j8emj2yau]::part(base) {
    background: var(--sl-color-primary-100);
    color: var(--sl-color-primary-700);
}

/* 6. Responsive */
@media (max-width: 768px) {
    .designer-container[b-2j8emj2yau] {
        padding: 0;
        height: 100vh;
    }

    .hero-section[b-2j8emj2yau] {
        padding: var(--sl-spacing-large) var(--sl-spacing-small);
    }

    .hero-icon[b-2j8emj2yau] {
        width: 80px;
        height: 80px;
    }

    .hero-icon sl-icon[b-2j8emj2yau] {
        font-size: 2.5rem;
    }

    .hero-title[b-2j8emj2yau] {
        font-size: var(--sl-font-size-x-large);
    }

    .hero-description[b-2j8emj2yau] {
        font-size: var(--sl-font-size-medium);
    }

    .product-type-card[b-2j8emj2yau] {
        width: 80px;
    }

    .design-workspace[b-2j8emj2yau] {
        padding: 0 var(--sl-spacing-medium) var(--sl-spacing-medium);
    }

    .version-navigation[b-2j8emj2yau] {
        padding: var(--sl-spacing-small) var(--sl-spacing-medium);
        margin-left: calc(-1 * var(--sl-spacing-medium));
        margin-right: calc(-1 * var(--sl-spacing-medium));
    }

    .design-preview[b-2j8emj2yau] {
        max-width: 100%;
        border-radius: var(--sl-border-radius-medium);
    }

    .revisions-grid[b-2j8emj2yau] {
        grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    }

    .version-prompt[b-2j8emj2yau] {
        padding: var(--sl-spacing-medium);
    }

    .input-footer[b-2j8emj2yau] {
        padding: var(--sl-spacing-medium);
    }

    .input-actions sl-icon-button[b-2j8emj2yau] {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .hero-title[b-2j8emj2yau] {
        font-size: var(--sl-font-size-large);
    }

    .quick-suggestions[b-2j8emj2yau] {
        font-size: var(--sl-font-size-x-small);
    }
}
/* /Pages/BrandSettings.cshtml.rz.scp.css */
/* BrandSettings Page Styles */

/* Layout Grid */
.page-container[b-ntf8szkd1k] {
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto 1fr auto;
    gap: var(--sl-spacing-large);
}

.page-header[b-ntf8szkd1k] {
    padding: var(--sl-spacing-medium);
}

.page-main[b-ntf8szkd1k] {
    padding: var(--sl-spacing-medium);
    max-width: none;
    margin: 0;
    width: 100%;
}

/* Card Styling */
.brand-settings-card[b-ntf8szkd1k] {
    margin-bottom: var(--sl-spacing-large);
    width: 100%;
}

.brand-settings-card[b-ntf8szkd1k]::part(base) {
    border-radius: var(--sl-border-radius-medium);
    box-shadow: var(--sl-shadow-medium);
}

.brand-settings-card[b-ntf8szkd1k]::part(header) {
    border-bottom: 1px solid var(--sl-color-neutral-200);
    padding: var(--sl-spacing-large);
}

.brand-settings-card h1[b-ntf8szkd1k] {
    margin: 0;
    color: var(--sl-color-neutral-900);
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-semibold);
}

.brand-settings-card p[b-ntf8szkd1k] {
    color: var(--sl-color-neutral-600);
    margin-bottom: var(--sl-spacing-large);
}

/* Form Grid */
.form-grid[b-ntf8szkd1k] {
    display: grid;
    gap: var(--sl-spacing-large);
}

.form-grid > *[b-ntf8szkd1k] {
    margin-bottom: var(--sl-spacing-large);
}

.form-grid > *:last-child[b-ntf8szkd1k] {
    margin-bottom: 0;
}

.form-actions[b-ntf8szkd1k] {
    display: flex;
    justify-content: flex-start;
    gap: var(--sl-spacing-medium);
    margin-top: var(--sl-spacing-medium);
}

/* Input Styling */
sl_input[b-ntf8szkd1k]::part(base) {
    border-radius: var(--sl-border-radius-small);
}

sl_input[b-ntf8szkd1k]::part(input) {
    font-size: var(--sl-font-size-medium);
}

/* Button Styling */
sl_button[b-ntf8szkd1k]::part(base) {
    border-radius: var(--sl-border-radius-small);
    font-weight: var(--sl-font-weight-medium);
}

/* Alert Styling */
sl-alert[b-ntf8szkd1k] {
    margin-top: var(--sl-spacing-medium);
}

sl-alert[b-ntf8szkd1k]::part(base) {
    border-radius: var(--sl-border-radius-small);
}

/* Brand Name Row */
.brand-name-row[b-ntf8szkd1k] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 0;
}

.brand-name-row sl_input[b-ntf8szkd1k] {
    flex: 1 1 0%;
    min-width: 0;
}

/* AI Button Icon */
.ai-button-container[b-ntf8szkd1k] {
    display: flex;
    align-items: center;
    height: 100%;
}

.ai-button-icon[b-ntf8szkd1k] {
    width: 32px;
    height: 32px;
    transition: opacity 0.2s;
}

/* Sparkle Animation */
.ai-sparkle-animation[b-ntf8szkd1k] {
    width: 32px;
    height: 32px;
    display: inline-block;
}

/* AI Suggest Button */
.ai-suggest-btn[b-ntf8szkd1k] {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.5rem;
    display: flex;
    align-items: center;
}

.ai-suggest-btn:active[b-ntf8szkd1k],
.ai-suggest-btn:focus[b-ntf8szkd1k] {
    outline: none;
    box-shadow: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .page-main[b-ntf8szkd1k] {
        padding: var(--sl-spacing-small);
    }
    
    .brand-settings-card[b-ntf8szkd1k]::part(header) {
        padding: var(--sl-spacing-medium);
    }
    
    .form-actions[b-ntf8szkd1k] {
        flex-direction: column;
    }
    
    sl_button[b-ntf8szkd1k] {
        width: 100%;
    }
}
/* /Pages/Chat.cshtml.rz.scp.css */
/* --- Base Layout (Mobile First) --- */
.chat-layout[b-gwh17qumop] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: var(--sl-color-neutral-50);
}

.chat-list[b-gwh17qumop] {
    display: none;
}

.chat-area[b-gwh17qumop] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0; /* Crucial for nested flex scrolling */
    min-height: 400px; /* Ensure minimum height for visibility */
}

/* --- View-Switching Logic for Mobile --- */
.chat-layout.view-chat-list .chat-list[b-gwh17qumop] {
    display: flex;
}

.chat-layout.view-chat-list .chat-area[b-gwh17qumop] {
    display: none;
}

/* --- Chat List Styles --- */
.chat-list[b-gwh17qumop] {
    flex-direction: column;
    height: 100%;
    border-right: 1px solid var(--sl-color-neutral-200);
    background-color: var(--sl-color-neutral-50);
}

.chat-list-header[b-gwh17qumop] {
    padding: var(--sl-spacing-medium);
    border-bottom: 1px solid var(--sl-color-neutral-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.chat-list-body[b-gwh17qumop] {
    flex-grow: 1;
    overflow-y: auto;
}

/* --- Section Headers and Organization --- */
.section-header[b-gwh17qumop] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-small);
    padding: var(--sl-spacing-medium);
    background-color: var(--sl-color-neutral-100);
    border-bottom: 1px solid var(--sl-color-neutral-200);
    cursor: pointer;
    user-select: none;
}

    .section-header[data-collapsible]:hover[b-gwh17qumop] {
        background-color: var(--sl-color-neutral-150);
    }

.section-icon[b-gwh17qumop] {
    color: var(--sl-color-neutral-600);
    font-size: var(--sl-font-size-medium);
}

.section-title[b-gwh17qumop] {
    font-weight: var(--sl-font-weight-semibold);
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-700);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.collapse-icon[b-gwh17qumop] {
    margin-left: auto;
    color: var(--sl-color-neutral-500);
    transition: transform 0.2s ease;
}

.section-header.collapsed .collapse-icon[b-gwh17qumop] {
    transform: rotate(-90deg);
}

.section-content[b-gwh17qumop] {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

    .section-content.collapsed[b-gwh17qumop] {
        max-height: 0;
    }

.section-divider[b-gwh17qumop] {
    height: 1px;
    background-color: var(--sl-color-neutral-300);
    margin: 0px; /*var(--sl-spacing-small) 0;*/
}

/* --- Team Task Styles --- */
.team-task-tab[b-gwh17qumop] {
    display: flex;
    align-items: flex-start;
    gap: var(--sl-spacing-small);
    padding: var(--sl-spacing-medium);
    cursor: pointer;
    border-bottom: 1px solid var(--sl-color-neutral-200);
    position: relative;
}

    .team-task-tab:hover[b-gwh17qumop] {
        background-color: var(--sl-color-neutral-100);
    }

    .team-task-tab.active[b-gwh17qumop] {
        background-color: var(--sl-color-primary-600);
    }

        .team-task-tab.active .team-task-title[b-gwh17qumop],
        .team-task-tab.active .team-task-experts[b-gwh17qumop],
        .team-task-tab.active .team-task-excerpt[b-gwh17qumop],
        .team-task-tab.active .task-date[b-gwh17qumop] {
            color: var(--sl-color-neutral-0);
        }

.task-status-indicator[b-gwh17qumop] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: var(--sl-spacing-2x-small);
    flex-shrink: 0;
}

    .task-status-indicator.status-0[b-gwh17qumop] {
        background-color: var(--sl-color-warning-500); /* Created/Pending */
    }

    .task-status-indicator.status-1[b-gwh17qumop] {
        background-color: var(--sl-color-primary-500); /* In Progress */
    }

    .task-status-indicator.status-2[b-gwh17qumop] {
        background-color: var(--sl-color-success-500); /* Completed */
    }

.team-task-content[b-gwh17qumop] {
    flex-grow: 1;
    overflow: hidden;
}

.team-task-title[b-gwh17qumop] {
    font-weight: var(--sl-font-weight-semibold);
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-900);
    margin-bottom: var(--sl-spacing-3x-small);
}

.team-task-experts[b-gwh17qumop] {
    font-size: var(--sl-font-size-x-small);
    color: var(--sl-color-neutral-600);
    margin-bottom: var(--sl-spacing-3x-small);
}

.experts-label[b-gwh17qumop] {
    font-weight: var(--sl-font-weight-medium);
}

.experts-more[b-gwh17qumop] {
    color: var(--sl-color-neutral-500);
    font-style: italic;
}

.team-task-excerpt[b-gwh17qumop] {
    font-size: var(--sl-font-size-x-small);
    color: var(--sl-color-neutral-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-task-meta[b-gwh17qumop] {
    flex-shrink: 0;
    text-align: right;
}

.task-date[b-gwh17qumop] {
    font-size: var(--sl-font-size-x-small);
    color: var(--sl-color-neutral-500);
    font-weight: var(--sl-font-weight-medium);
}

.chat-tab[b-gwh17qumop] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-medium);
    padding: var(--sl-spacing-medium);
    cursor: pointer;
    border-bottom: 1px solid var(--sl-color-neutral-200);
}

    .chat-tab:hover[b-gwh17qumop] {
        background-color: var(--sl-color-neutral-100);
    }

    .chat-tab.active[b-gwh17qumop] {
        background-color: var(--sl-color-primary-600);
    }

        .chat-tab.active[b-gwh17qumop]  .chat-tab-excerpt {
            color: var(--sl-color-neutral-100);
        }

.chat-tab-content[b-gwh17qumop] {
    flex-grow: 1;
    overflow: hidden;
}

.chat-tab-title[b-gwh17qumop] {
    font-weight: var(--sl-font-weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-small);
}

.unread-badge[b-gwh17qumop] {
    font-size: var(--sl-font-size-x-small);
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.chat-tab.has-unread[b-gwh17qumop] {
    /*background-color: var(--sl-color-primary-50);*/
    border-left: 3px solid var(--sl-color-primary-600);
}

    .chat-tab.has-unread:hover[b-gwh17qumop] {
        background-color: var(--sl-color-primary-100);
    }

    .chat-tab.has-unread.active[b-gwh17qumop] {
        background-color: var(--sl-color-primary-600);
        border-left-color: var(--sl-color-primary-800);
    }

/* New message highlight animation */
.chat-tab.new-message-highlight[b-gwh17qumop] {
    animation: newMessagePulse-b-gwh17qumop 1s ease-out;
}

@keyframes newMessagePulse-b-gwh17qumop {
    0% {
        background-color: var(--sl-color-neutral-200);
    }

    100% {
        background-color: var(--sl-color-neutral-50);
    }
}

.chat-tab.has-unread.new-message-highlight[b-gwh17qumop] {
    animation: newMessagePulseUnread-b-gwh17qumop 1s ease-out;
}

@keyframes newMessagePulseUnread-b-gwh17qumop {
    0% {
        background-color: var(--sl-color-neutral-200);
        border-left-color: var(--sl-color-neutral-400);
    }

    100% {
        background-color: var(--sl-color-primary-50);
        border-left-color: var(--sl-color-primary-600);
    }
}

.chat-tab.active.new-message-highlight[b-gwh17qumop] {
    animation: newMessagePulseActive-b-gwh17qumop 1s ease-out;
}

@keyframes newMessagePulseActive-b-gwh17qumop {
    0% {
        background-color: var(--sl-color-neutral-200);
    }

    100% {
        background-color: var(--sl-color-primary-600);
    }
}

.chat-tab-excerpt[b-gwh17qumop] {
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Chat Area Styles --- */
.chat-area[b-gwh17qumop] {
    background-color: var(--sl-color-neutral-0);
}

.chat-area-header[b-gwh17qumop] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-medium);
    padding: 0 var(--sl-spacing-medium);
    height: 3.5rem;
    border-bottom: 1px solid var(--sl-color-neutral-200);
    flex-shrink: 0;
}

    .chat-area-header .conversations-button[b-gwh17qumop] {
        display: none;
    }

.chat-area-title[b-gwh17qumop] {
    font-weight: var(--sl-font-weight-semibold);
}

/* Team Task Actions */
.team-task-actions[b-gwh17qumop] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-small);
}

    .team-task-actions sl-button[b-gwh17qumop] {
        font-size: var(--sl-font-size-small);
    }

        .team-task-actions sl-button[b-gwh17qumop]::part(base) {
            padding: var(--sl-spacing-x-small) var(--sl-spacing-small);
            border-radius: var(--sl-border-radius-medium);
            transition: all 0.2s ease;
        }

        .team-task-actions sl-button:hover[b-gwh17qumop]::part(base) {
            background-color: var(--sl-color-primary-100);
            border-color: var(--sl-color-primary-300);
            color: var(--sl-color-primary-700);
        }

        .team-task-actions sl-button[loading][b-gwh17qumop]::part(base) {
            opacity: 0.7;
        }

/* Chat messages styles */
.chat-messages[b-gwh17qumop] {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Crucial for nested flex scrolling */
    background-color: var(--sl-color-neutral-50);
}

/* --- Chat Messages Header --- */
.chat-messages-header[b-gwh17qumop] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sl-spacing-medium);
    padding: var(--sl-spacing-medium);
    border-bottom: 1px solid var(--sl-color-neutral-200);
    flex-shrink: 0;
}

.chat-header-left[b-gwh17qumop] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-medium);
}

.chat-expert-avatar[b-gwh17qumop] {
    --size: 2.5rem;
}

.chat-expert-title[b-gwh17qumop] {
    font-weight: var(--sl-font-weight-semibold);
    font-size: var(--sl-font-size-large);
    color: var(--sl-color-neutral-900);
    margin: 0;
}

.chat-header-tabs[b-gwh17qumop] {
    display: flex;
    align-items: center;
}

.expert-tabs[b-gwh17qumop] {
    --indicator-color: var(--sl-color-primary-600);
    --track-color: var(--sl-color-neutral-200);
    --track-width: 2px;
}

    .expert-tabs[b-gwh17qumop]::part(nav) {
        gap: var(--sl-spacing-small);
    }

    .expert-tabs sl-tab[b-gwh17qumop] {
        font-size: var(--sl-font-size-small);
        font-weight: var(--sl-font-weight-medium);
    }

        .expert-tabs sl-tab[b-gwh17qumop]::part(base) {
            padding: var(--sl-spacing-x-small) var(--sl-spacing-small);
            border-radius: var(--sl-border-radius-medium);
            transition: background-color 0.2s ease;
        }

        .expert-tabs sl-tab:hover[b-gwh17qumop]::part(base) {
            background-color: var(--sl-color-neutral-100);
        }

        .expert-tabs sl-tab[active][b-gwh17qumop]::part(base) {
            background-color: var(--sl-color-primary-50);
            color: var(--sl-color-primary-700);
        }

/* --- Chat Tab Content --- */
.chat-tab-content[b-gwh17qumop] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tab-content-area[b-gwh17qumop] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-tab-panel[b-gwh17qumop] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-tab-panel-active[b-gwh17qumop] {
    display: flex;
}

.chat-tab-panel:not(.chat-tab-panel-active)[b-gwh17qumop] {
    display: none;
}



/* --- Chat Messages Body --- */
.chat-messages-body[b-gwh17qumop] {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--sl-spacing-large);
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-large);
    min-height: 0;
    scroll-behavior: smooth;
}

/* Ensure chat containers have proper height */
.chat-container[b-gwh17qumop] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-messages-wrapper[b-gwh17qumop] {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
}

.chat-messages-body[b-gwh17qumop]  .message {
    display: flex;
    gap: var(--sl-spacing-medium);
    max-width: 80%;
}

    .chat-messages-body[b-gwh17qumop]  .message.user-message {
        align-self: flex-end;
        flex-direction: row-reverse;
    }

.chat-messages-body[b-gwh17qumop]  .message-content {
    padding: var(--sl-spacing-small) var(--sl-spacing-medium);
    border-radius: var(--sl-border-radius-large);
    background-color: var(--sl-color-neutral-100);
}

.chat-messages-body[b-gwh17qumop]  .message.user-message .message-content {
    background-color: var(--sl-color-primary-600);
    color: var(--sl-color-neutral-0);
}

.chat-messages-body[b-gwh17qumop]  .message-content .message-attachment img {
    max-width: 175px;
    max-height: 175px;
    border-radius: var(--sl-border-radius-medium);
    margin-top: var(--sl-spacing-x-small);
}

.file-preview[b-gwh17qumop] {
    padding: 0 var(--sl-spacing-medium) var(--sl-spacing-x-small) var(--sl-spacing-medium);
}

    .file-preview:empty[b-gwh17qumop] {
        padding: 0;
    }

    .file-preview[b-gwh17qumop]  .preview-item {
        display: inline-flex;
        align-items: center;
        gap: var(--sl-spacing-x-small);
        background-color: var(--sl-color-neutral-200);
        border-radius: var(--sl-border-radius-medium);
        padding: var(--sl-spacing-3x-small);
        font-size: var(--sl-font-size-small);
        max-width: 200px;
    }

        .file-preview[b-gwh17qumop]  .preview-item img {
            max-height: 70px !important;
            object-fit: cover;
            border-radius: var(--sl-border-radius-small);
        }

        .file-preview[b-gwh17qumop]  .preview-item span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.chat-messages-body[b-gwh17qumop]  .user-message .message-attachment img {
    max-width: 100px;
    max-height: 100px;
}

.chat-input-area[b-gwh17qumop] {
    padding: var(--sl-spacing-small) var(--sl-spacing-medium);
    border-top: 1px solid var(--sl-color-neutral-200);
    background-color: var(--sl-color-neutral-0);
    flex-shrink: 0;
    margin-top: auto;
}

    .chat-input-area .input-wrapper[b-gwh17qumop] {
        position: relative;
        margin: 12px;
        background-color: var(--sl-color-neutral-100);
        border-radius: var(--sl-border-radius-large);
    }

        .chat-input-area .input-wrapper sl-textarea[b-gwh17qumop]::part(base) {
            background: transparent;
            border: none;
        }

            .chat-input-area .input-wrapper sl-textarea[b-gwh17qumop]::part(base):focus-within {
                box-shadow: none;
            }

        .chat-input-area .input-wrapper sl-textarea[b-gwh17qumop]::part(textarea) {
            padding: var(--sl-spacing-medium);
            padding-left: 3rem;
            padding-right: 3.5rem;
        }

    .chat-input-area .attach-button[b-gwh17qumop] {
        position: absolute;
        bottom: var(--sl-spacing-x-small);
        left: var(--sl-spacing-x-small);
        font-size: 1.25rem;
        color: var(--sl-color-neutral-600);
    }

    .chat-input-area .send-button[b-gwh17qumop] {
        position: absolute;
        bottom: var(--sl-spacing-x-small);
        right: var(--sl-spacing-x-small);
        color: var(--sl-color-primary-600);
    }

        .chat-input-area .send-button[b-gwh17qumop]::part(base) {
            background-color: transparent;
            border-color: transparent;
            font-size: 1.25rem;
            padding: var(--sl-spacing-3x-small);
            border-radius: var(--sl-border-radius-medium);
            box-shadow: none;
        }

            .chat-input-area .send-button[b-gwh17qumop]::part(base):hover {
                background-color: transparent;
                color: var(--sl-color-primary-500);
            }

            .chat-input-area .send-button[b-gwh17qumop]::part(base):focus {
                background-color: var(--sl-color-primary-100);
                box-shadow: var(--sl-shadow-x-small);
            }

/* --- Responsive Desktop Layout --- */
@media (min-width: 768px) {
    .chat-layout[b-gwh17qumop] {
        flex-direction: row;
    }

    .chat-list[b-gwh17qumop] {
        display: flex !important;
        width: 320px;
        flex-shrink: 0;
    }

    .chat-area[b-gwh17qumop] {
        display: flex !important;
        flex: 1;
        background-color: var(--sl-color-neutral-0);
        border-left: 1px solid var(--sl-color-neutral-200);
    }

    .chat-area-header[b-gwh17qumop] {
        display: none;
    }
}
/* --- Responsive Mobile Layout --- */
@media (max-width: 767px) {
    .chat-area-header .conversations-button[b-gwh17qumop] {
        display: inline-flex;
    }
}

.chat-messages-body[b-gwh17qumop]  .message .message-attachment {
    position: relative;
    float: left;
    display: inline;
}

.edit-image-btn[b-gwh17qumop] {
    position: absolute !important;
    top: 8px;
    left: 8px;
    z-index: 2;
    background: var(--sl-color-neutral-1000);
    border-radius: var(--sl-border-radius-circle);
    box-shadow: var(--sl-shadow-x-small);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: auto;
    color: var(--sl-color-neutral-0);
    padding: var(--sl-spacing-x-small);
}

.message-attachment:hover .edit-image-btn[b-gwh17qumop] {
    opacity: 1;
    display: inline-flex !important;
}

.message-attachment .edit-image-btn[b-gwh17qumop] {
    display: none;
}

.create-product-btn[b-gwh17qumop] {
    position: absolute !important;
    top: 8px;
    right: 8px;
    z-index: 2;
    background: var(--sl-color-primary-600);
    border-radius: var(--sl-border-radius-circle);
    box-shadow: var(--sl-shadow-x-small);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: auto;
    color: var(--sl-color-neutral-0);
    padding: var(--sl-spacing-x-small);
}

.message-attachment:hover .create-product-btn[b-gwh17qumop] {
    opacity: 1;
    display: inline-flex !important;
}

.message-attachment .create-product-btn[b-gwh17qumop] {
    display: none;
}

.progress-indicator[b-gwh17qumop] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-small);
    padding: var(--sl-spacing-small);
    background: var(--sl-color-neutral-50);
    border-radius: var(--sl-border-radius-medium);
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-700);
}

    .progress-indicator sl-spinner[b-gwh17qumop] {
        font-size: 1rem;
    }

    .progress-indicator sl-icon[b-gwh17qumop] {
        font-size: 1rem;
    }

/* --- Lazy Image Loader Styles --- */
.lazy-image-placeholder[b-gwh17qumop] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sl-color-neutral-100);
    border-radius: var(--sl-border-radius-medium);
    position: relative;
    overflow: hidden;
}

    .lazy-image-placeholder img[b-gwh17qumop] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        z-index: 0;
        opacity: 0.7;
    }

    .lazy-image-placeholder sl-spinner[b-gwh17qumop] {
        z-index: 1;
    }

.lazy-image-loaded[b-gwh17qumop] {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--sl-border-radius-medium);
    background: var(--sl-color-neutral-0);
    display: block;
}

.lazy-image-error[b-gwh17qumop] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sl-color-danger-50);
    border-radius: var(--sl-border-radius-medium);
    color: var(--sl-color-danger-700);
    font-size: var(--sl-font-size-medium);
    gap: var(--sl-spacing-small);
}

.message-attachment-divider[b-gwh17qumop] {
    height: 1px;
    background: var(--sl-color-neutral-200);
    margin: var(--sl-spacing-small) 0;
    border: none;
    width: 100%;
    display: block;
}

/* Empty chat state */
.empty-chat-state[b-gwh17qumop] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
}

.empty-chat-content[b-gwh17qumop] {
    text-align: center;
    color: var(--sl-color-neutral-600);
}

.empty-chat-content h3[b-gwh17qumop] {
    margin: var(--sl-spacing-medium) 0 var(--sl-spacing-small) 0;
    color: var(--sl-color-neutral-700);
    font-weight: var(--sl-font-weight-semibold);
}

.empty-chat-content p[b-gwh17qumop] {
    margin: 0;
    font-size: var(--sl-font-size-small);
}
/* /Pages/Create.cshtml.rz.scp.css */
/* 1. Layout Grid */
.create-product-container[b-o654i7ucvr] {
    display: grid;
    place-items: center;
    min-height: 100vh;
    background: var(--sl-color-neutral-50);
    padding: var(--sl-spacing-2x-large);
}

.create-product-card[b-o654i7ucvr] {
    max-width: 600px;
    width: 100%;
    box-shadow: var(--sl-shadow-large);
}

.create-product-grid[b-o654i7ucvr] {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--sl-spacing-large);
    align-items: start;
    padding: var(--sl-spacing-large);
}

.product-image-preview[b-o654i7ucvr] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sl-color-neutral-100);
    border-radius: var(--sl-border-radius-large);
    box-shadow: var(--sl-shadow-x-small);
    padding: var(--sl-spacing-medium);
    min-width: 0;
}

.product-image-preview img[b-o654i7ucvr] {
    max-width: 150px;
    max-height: 150px;
    border-radius: var(--sl-border-radius-medium);
    object-fit: contain;
    background: var(--sl-color-neutral-0);
}

.product-form[b-o654i7ucvr] {
    display: grid;
    gap: var(--sl-spacing-large);
}

@media (max-width: 600px) {
    .create-product-card[b-o654i7ucvr] {
        max-width: 100vw;
    }
    .create-product-grid[b-o654i7ucvr] {
        grid-template-columns: 1fr;
        gap: var(--sl-spacing-medium);
        padding: var(--sl-spacing-medium);
    }
    .product-image-preview[b-o654i7ucvr] {
        justify-content: flex-start;
        padding: var(--sl-spacing-small);
    }
}

/* Product Preview Layout */
.product-preview-container[b-o654i7ucvr] {
    display: grid;
    place-items: center;
    min-height: 100vh;
    background: var(--sl-color-neutral-50);
    padding: var(--sl-spacing-large);
}

.product-preview-card[b-o654i7ucvr] {
    max-width: 1200px;
    width: 100%;
    box-shadow: var(--sl-shadow-large);
    background: var(--sl-color-neutral-0);
    border-radius: var(--sl-border-radius-large);
}

.product-preview-grid[b-o654i7ucvr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sl-spacing-3x-large);
    align-items: start;
    padding: var(--sl-spacing-2x-large);
}

/* Gallery Section */
.product-gallery[b-o654i7ucvr] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-large);
    position: sticky;
    top: var(--sl-spacing-large);
}

.product-main-display[b-o654i7ucvr] {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--sl-color-neutral-100);
    border-radius: var(--sl-border-radius-large);
    padding: var(--sl-spacing-large);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sl-shadow-medium);
}

.product-main-image[b-o654i7ucvr] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--sl-border-radius-medium);
    transition: all 0.3s ease;
}

.product-thumbnails[b-o654i7ucvr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sl-spacing-medium);
    margin-top: var(--sl-spacing-medium);
}

.product-thumb[b-o654i7ucvr] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: var(--sl-border-radius-medium);
    border: 2px solid var(--sl-color-neutral-200);
    background: var(--sl-color-neutral-50);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: var(--sl-spacing-small);
}

.product-thumb:hover[b-o654i7ucvr] {
    border-color: var(--sl-color-primary-400);
    box-shadow: var(--sl-shadow-small);
}

.product-thumb.active[b-o654i7ucvr] {
    border-color: var(--sl-color-primary-600);
    box-shadow: 0 0 0 2px var(--sl-color-primary-200);
}

/* Product Info Section */
.product-info[b-o654i7ucvr] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-large);
}

.product-breadcrumb[b-o654i7ucvr] {
    margin-bottom: var(--sl-spacing-medium);
}

.product-title[b-o654i7ucvr] {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--sl-color-neutral-900);
    line-height: 1.2;
}

.product-rating[b-o654i7ucvr] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-small);
}

.review-count[b-o654i7ucvr] {
    color: var(--sl-color-neutral-600);
    font-size: 1rem;
}

.product-price-section[b-o654i7ucvr] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-medium);
    padding: var(--sl-spacing-medium) 0;
    border-bottom: 1px solid var(--sl-color-neutral-200);
}

.product-price[b-o654i7ucvr] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--sl-color-primary-600);
}

/* Product Options */
.product-options[b-o654i7ucvr] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-large);
    padding: var(--sl-spacing-medium) 0;
    border-bottom: 1px solid var(--sl-color-neutral-200);
}

.option-group[b-o654i7ucvr] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-medium);
}

.option-label[b-o654i7ucvr] {
    font-weight: 600;
    color: var(--sl-color-neutral-800);
    font-size: 1.1rem;
}

.product-type-selection[b-o654i7ucvr],
.size-selection[b-o654i7ucvr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sl-spacing-small);
}

.size-guide-btn[b-o654i7ucvr] {
    margin-top: var(--sl-spacing-small);
    align-self: flex-start;
}

/* Color Options */
.color-options[b-o654i7ucvr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sl-spacing-small);
    margin-bottom: var(--sl-spacing-small);
}

.color-swatch[b-o654i7ucvr] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--sl-color-neutral-200);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    outline: none;
}

.color-swatch:hover[b-o654i7ucvr] {
    border-color: var(--sl-color-primary-400);
    transform: scale(1.1);
}

.color-swatch.active[b-o654i7ucvr] {
    border-color: var(--sl-color-primary-600);
    box-shadow: 0 0 0 3px var(--sl-color-primary-200);
    transform: scale(1.1);
}

.color-swatch.active[b-o654i7ucvr]::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--sl-color-neutral-0);
    font-weight: bold;
    font-size: 0.8rem;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.selected-color[b-o654i7ucvr] {
    font-weight: 500;
    color: var(--sl-color-neutral-700);
}

/* Product Actions */
.product-actions[b-o654i7ucvr] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-large);
    padding: var(--sl-spacing-medium) 0;
    border-bottom: 1px solid var(--sl-color-neutral-200);
}

.quantity-selector[b-o654i7ucvr] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-medium);
}

.quantity-selector sl-input[b-o654i7ucvr] {
    width: 100px;
}

.action-buttons[b-o654i7ucvr] {
    display: flex;
    gap: var(--sl-spacing-medium);
}

.add-to-cart-btn[b-o654i7ucvr] {
    flex: 1;
}

.wishlist-btn[b-o654i7ucvr] {
    min-width: 120px;
}

/* Product Details */
.product-details[b-o654i7ucvr] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-medium);
}

.product-detail-section[b-o654i7ucvr] {
    width: 100%;
}

.detail-list[b-o654i7ucvr] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-small);
}

.detail-list li[b-o654i7ucvr] {
    padding: var(--sl-spacing-x-small) 0;
    color: var(--sl-color-neutral-700);
}

.detail-list li[b-o654i7ucvr]::before {
    content: '•';
    color: var(--sl-color-primary-600);
    margin-right: var(--sl-spacing-small);
    font-weight: bold;
}

.shipping-info[b-o654i7ucvr] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-small);
}

.shipping-info p[b-o654i7ucvr] {
    margin: 0;
    color: var(--sl-color-neutral-700);
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .product-preview-grid[b-o654i7ucvr] {
        grid-template-columns: 1fr;
        gap: var(--sl-spacing-2x-large);
        padding: var(--sl-spacing-1x-large);
    }

    .product-gallery[b-o654i7ucvr] {
        position: static;
    }

    .product-title[b-o654i7ucvr] {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .product-preview-container[b-o654i7ucvr] {
        padding: var(--sl-spacing-medium);
    }

    .product-preview-grid[b-o654i7ucvr] {
        padding: var(--sl-spacing-large);
        gap: var(--sl-spacing-large);
    }

    .product-title[b-o654i7ucvr] {
        font-size: 1.75rem;
    }

    .product-price[b-o654i7ucvr] {
        font-size: 1.75rem;
    }

    .product-thumbnails[b-o654i7ucvr] {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--sl-spacing-small);
    }

    .action-buttons[b-o654i7ucvr] {
        flex-direction: column;
    }

    .add-to-cart-btn[b-o654i7ucvr],
    .wishlist-btn[b-o654i7ucvr] {
        width: 100%;
    }

    .quantity-selector[b-o654i7ucvr] {
        flex-direction: column;
        align-items: flex-start;
    }

    .quantity-selector sl-input[b-o654i7ucvr] {
        width: 100%;
        max-width: 150px;
    }
}

@media (max-width: 480px) {
    .product-preview-card[b-o654i7ucvr] {
        border-radius: 0;
        box-shadow: none;
    }

    .product-preview-grid[b-o654i7ucvr] {
        padding: var(--sl-spacing-medium);
    }

    .product-main-display[b-o654i7ucvr] {
        padding: var(--sl-spacing-medium);
    }

    .product-title[b-o654i7ucvr] {
        font-size: 1.5rem;
    }

    .product-price[b-o654i7ucvr] {
        font-size: 1.5rem;
    }

    .product-thumbnails[b-o654i7ucvr] {
        gap: var(--sl-spacing-x-small);
    }

    .color-swatch[b-o654i7ucvr] {
        width: 32px;
        height: 32px;
    }

    .product-type-selection sl-button[b-o654i7ucvr],
    .size-selection sl-button[b-o654i7ucvr] {
        font-size: 0.9rem;
        padding: var(--sl-spacing-x-small) var(--sl-spacing-small);
    }
}

/* Legacy styles for backwards compatibility */
.create-product-container[b-o654i7ucvr] {
    display: grid;
    place-items: center;
    min-height: 100vh;
    background: var(--sl-color-neutral-50);
    padding: var(--sl-spacing-2x-large);
}

.create-product-card[b-o654i7ucvr] {
    max-width: 600px;
    width: 100%;
    box-shadow: var(--sl-shadow-large);
}

.create-product-grid[b-o654i7ucvr] {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--sl-spacing-large);
    align-items: start;
    padding: var(--sl-spacing-large);
}

.product-image-preview[b-o654i7ucvr] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sl-color-neutral-100);
    border-radius: var(--sl-border-radius-large);
    box-shadow: var(--sl-shadow-x-small);
    padding: var(--sl-spacing-medium);
    min-width: 0;
}

.product-image-preview img[b-o654i7ucvr] {
    max-width: 150px;
    max-height: 150px;
    border-radius: var(--sl-border-radius-medium);
    object-fit: contain;
    background: var(--sl-color-neutral-0);
}

.product-form[b-o654i7ucvr] {
    display: grid;
    gap: var(--sl-spacing-large);
} 

.card__body[b-o654i7ucvr] {
    padding: 0px;
}
/* /Pages/Login.cshtml.rz.scp.css */
/* Modern Login Page Styles */
.login-container[b-0d9y22yb7d] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sl-spacing-large);
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

/* Background decoration */
.login-container[b-0d9y22yb7d]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: float-b-0d9y22yb7d 20s ease-in-out infinite;
    pointer-events: none;
}

@keyframes float-b-0d9y22yb7d {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(10px, -10px) rotate(1deg); }
    50% { transform: translate(-5px, 5px) rotate(-1deg); }
    75% { transform: translate(-10px, -5px) rotate(0.5deg); }
}

/* Main Login Card */
.login-card[b-0d9y22yb7d] {
    width: 100%;
    max-width: 420px;
    min-width: 320px;
    background: var(--sl-color-neutral-0);
    border-radius: var(--sl-border-radius-x-large);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    position: relative;
    z-index: 1;
    animation: slideUp-b-0d9y22yb7d 0.6s ease-out;
    margin: 0 auto;
}

@keyframes slideUp-b-0d9y22yb7d {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header Section */
.login-header[b-0d9y22yb7d] {
    background: linear-gradient(135deg, var(--sl-color-primary-600) 0%, var(--sl-color-primary-700) 100%);
    padding: var(--sl-spacing-x-large);
    text-align: center;
    color: white;
    position: relative;
}

.login-header[b-0d9y22yb7d]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--sl-color-success-500), var(--sl-color-warning-500), var(--sl-color-danger-500));
}

.brand-logo[b-0d9y22yb7d] {
    margin-bottom: var(--sl-spacing-medium);
}

.logo-icon[b-0d9y22yb7d] {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.login-title[b-0d9y22yb7d] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 var(--sl-spacing-small) 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.login-subtitle[b-0d9y22yb7d] {
    font-size: var(--sl-font-size-medium);
    opacity: 0.9;
    margin: 0;
    font-weight: 400;
}

/* Form Container */
.login-form-container[b-0d9y22yb7d] {
    padding: var(--sl-spacing-x-large);
}

.login-alert[b-0d9y22yb7d] {
    margin-bottom: var(--sl-spacing-large);
    border-radius: var(--sl-border-radius-medium);
}

/* Form Elements */
.login-form[b-0d9y22yb7d] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-large);
}

.form-group[b-0d9y22yb7d] {
    position: relative;
}

.form-input[b-0d9y22yb7d]::part(base) {
    border-radius: var(--sl-border-radius-medium);
    border: 2px solid var(--sl-color-neutral-200);
    transition: all 0.3s ease;
    background: var(--sl-color-neutral-50);
}

.form-input[b-0d9y22yb7d]::part(base):focus-within {
    border-color: var(--sl-color-primary-500);
    box-shadow: 0 0 0 3px rgba(var(--sl-color-primary-500), 0.1);
    background: var(--sl-color-neutral-0);
    transform: translateY(-1px);
}

.form-input[b-0d9y22yb7d]::part(label) {
    font-weight: 600;
    color: var(--sl-color-neutral-700);
    margin-bottom: var(--sl-spacing-x-small);
}

.form-input[b-0d9y22yb7d]::part(input) {
    font-size: var(--sl-font-size-medium);
    padding: var(--sl-spacing-medium);
}

/* Form Options */
.form-options[b-0d9y22yb7d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--sl-spacing-small);
}

.remember-checkbox[b-0d9y22yb7d] {
    font-weight: 500;
    color: var(--sl-color-neutral-600);
}

.forgot-link[b-0d9y22yb7d] {
    color: var(--sl-color-primary-600);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--sl-font-size-small);
    transition: color 0.2s ease;
}

.forgot-link:hover[b-0d9y22yb7d] {
    color: var(--sl-color-primary-700);
    text-decoration: underline;
}

/* Login Button */
.login-button[b-0d9y22yb7d] {
    width: 100%;
    font-size: var(--sl-font-size-medium);
    font-weight: 600;
    border-radius: var(--sl-border-radius-medium);
    border: none;
    transition: all 0.3s ease;
    margin-top: var(--sl-spacing-medium);
}

.login-button[b-0d9y22yb7d]::part(base) {
    background: linear-gradient(135deg, var(--sl-color-primary-600) 0%, var(--sl-color-primary-700) 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(var(--sl-color-primary-600), 0.3);
}

.login-button[b-0d9y22yb7d]::part(base):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--sl-color-primary-600), 0.4);
}

.login-button[b-0d9y22yb7d]::part(base):active {
    transform: translateY(0);
}

/* Divider Section */
.divider-section[b-0d9y22yb7d] {
    margin: var(--sl-spacing-x-large) 0;
}

.divider-section sl-divider[b-0d9y22yb7d]::part(base) {
    color: var(--sl-color-neutral-500);
    font-weight: 500;
    font-size: var(--sl-font-size-small);
}

/* Google Button */
.google-button[b-0d9y22yb7d] {
    width: 100%;
    height: 52px;
    font-size: var(--sl-font-size-medium);
    font-weight: 500;
    border-radius: var(--sl-border-radius-medium);
    background: var(--sl-color-neutral-0);
    color: var(--sl-color-neutral-700);
    transition: all 0.3s ease;
}

.google-button[b-0d9y22yb7d]::part(base) {
    background: var(--sl-color-neutral-0);
    border: 2px solid var(--sl-color-neutral-200);
    color: var(--sl-color-neutral-700);
}

.google-button[b-0d9y22yb7d]::part(base):hover {
    background: var(--sl-color-neutral-50);
    border-color: var(--sl-color-neutral-300);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.google-button sl-icon[b-0d9y22yb7d] {
    width: 20px;
    height: 20px;
}

/* Footer */
.login-footer[b-0d9y22yb7d] {
    padding: var(--sl-spacing-large);
    text-align: center;
    background: var(--sl-color-neutral-50);
    border-top: 1px solid var(--sl-color-neutral-200);
}

.register-text[b-0d9y22yb7d] {
    margin: 0;
    color: var(--sl-color-neutral-600);
    font-size: var(--sl-font-size-medium);
}

.register-link[b-0d9y22yb7d] {
    color: var(--sl-color-primary-600);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.register-link:hover[b-0d9y22yb7d] {
    color: var(--sl-color-primary-700);
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 480px) {
    .login-container[b-0d9y22yb7d] {
        padding: var(--sl-spacing-medium);
    }
    
    .login-card[b-0d9y22yb7d] {
        max-width: 100%;
        min-width: auto;
        border-radius: var(--sl-border-radius-large);
    }
    
    .login-header[b-0d9y22yb7d] {
        padding: var(--sl-spacing-large);
    }
    
    .login-form-container[b-0d9y22yb7d] {
        padding: var(--sl-spacing-large);
    }
    
    .login-title[b-0d9y22yb7d] {
        font-size: 1.75rem;
    }
    
    .form-options[b-0d9y22yb7d] {
        flex-direction: column;
        gap: var(--sl-spacing-medium);
        align-items: flex-start;
    }
}

/* Desktop specific constraints */
@media (min-width: 481px) {
    .login-card[b-0d9y22yb7d] {
        max-width: 420px;
        min-width: 320px;
        width: auto;
    }
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    .login-card[b-0d9y22yb7d] {
        background: var(--sl-color-neutral-900);
        border: 1px solid var(--sl-color-neutral-700);
    }
    
    .form-input[b-0d9y22yb7d]::part(base) {
        background: var(--sl-color-neutral-800);
        border-color: var(--sl-color-neutral-600);
    }
    
    .form-input[b-0d9y22yb7d]::part(base):focus-within {
        background: var(--sl-color-neutral-700);
    }
    
    .google-button[b-0d9y22yb7d]::part(base) {
        background: var(--sl-color-neutral-800);
        border-color: var(--sl-color-neutral-600);
        color: var(--sl-color-neutral-200);
    }
    
    .google-button[b-0d9y22yb7d]::part(base):hover {
        background: var(--sl-color-neutral-700);
    }
    
    .login-footer[b-0d9y22yb7d] {
        background: var(--sl-color-neutral-800);
        border-top-color: var(--sl-color-neutral-600);
    }
}

/* Loading state */
.login-button[loading][b-0d9y22yb7d]::part(base) {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Focus management */
.login-form:focus-within[b-0d9y22yb7d] {
    outline: none;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .login-container[b-0d9y22yb7d]::before,
    .login-card[b-0d9y22yb7d],
    .form-input[b-0d9y22yb7d]::part(base),
    .login-button[b-0d9y22yb7d]::part(base),
    .google-button[b-0d9y22yb7d]::part(base) {
        animation: none;
        transition: none;
    }
}

.input--medium .input__prefix [b-0d9y22yb7d]::slotted(*) {
    margin-inline-start: auto !important;
    margin: 10px !important;
}
/* /Pages/Logout.cshtml.rz.scp.css */
.page-container[b-du66xvlxpf] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100vw;
    background: linear-gradient(135deg, var(--sl-color-primary-600) 0%, var(--sl-color-primary-800) 100%);
    padding: var(--sl-spacing-large);
}

.logout-form[b-du66xvlxpf] {
    width: 400px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border-radius: var(--sl-border-radius-large);
}

.logout-form[b-du66xvlxpf]::part(header) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: var(--sl-spacing-large);
    background: var(--sl-color-primary-600);
    color: white;
    border-radius: var(--sl-border-radius-large) var(--sl-border-radius-large) 0 0;
}

.logout-form h2[b-du66xvlxpf] {
    margin-top: var(--sl-spacing-medium);
    font-size: 1.75rem;
    font-weight: 600;
    text-align: center;
}

.logout-form sl-avatar[b-du66xvlxpf] {
    width: 64px;
    height: 64px;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.logout-form form[b-du66xvlxpf] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-medium);
    padding: var(--sl-spacing-large);
    text-align: center;
}

.logout-form p[b-du66xvlxpf] {
    margin-bottom: var(--sl-spacing-large);
    font-size: 1.1rem;
    color: var(--sl-color-neutral-700);
}

.logout-form sl-button[b-du66xvlxpf] {
    height: 48px;
    font-weight: 600;
}

.logout-form sl-button[variant="primary"][b-du66xvlxpf] {
    margin-bottom: var(--sl-spacing-small);
}

/* Responsive design */
@media (max-width: 480px) {
    .page-container[b-du66xvlxpf] {
        padding: var(--sl-spacing-medium);
    }
    
    .logout-form[b-du66xvlxpf] {
        width: 100%;
        max-width: 100%;
    }
    
    .logout-form[b-du66xvlxpf]::part(header) {
        padding: var(--sl-spacing-medium);
    }
    
    .logout-form form[b-du66xvlxpf] {
        padding: var(--sl-spacing-medium);
    }
}

/* Animation for form elements */
.logout-form sl-button[b-du66xvlxpf] {
    transition: all 0.2s ease-in-out;
}

.logout-form sl-button:hover[b-du66xvlxpf] {
    transform: translateY(-1px);
}
/* /Pages/MockupCreate.cshtml.rz.scp.css */
/* MockupCreate Page Styles - Dark Theme */

/* Remove mobile header for this page */
.mobile-header[b-zm41p3jgdu] {
    display: none !important;
}

/* Main Layout - now uses the full content area */
.mockup-layout[b-zm41p3jgdu] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--sl-spacing-large) * 2);
}

/* Main Content */
.mockup-main[b-zm41p3jgdu] {
    padding: var(--sl-spacing-large);
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-large);
    overflow-y: auto;
}

/* Drop Zone */
.drop-zone-section[b-zm41p3jgdu] {
    margin-bottom: var(--sl-spacing-large);
}

.drop-zone[b-zm41p3jgdu] {
    background: var(--sl-color-neutral-50);
    border: 2px dashed var(--sl-color-neutral-300);
    border-radius: var(--sl-border-radius-large);
    padding: var(--sl-spacing-3x-large);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.drop-zone:hover[b-zm41p3jgdu],
.drop-zone.drag-over[b-zm41p3jgdu] {
    border: 2px solid var(--sl-color-primary-600);
    background: var(--sl-color-primary-950);
    transform: scale(1.01);
}

.drop-zone.disabled[b-zm41p3jgdu] {
    border: 2px dashed var(--sl-color-neutral-700);
    background: var(--sl-color-neutral-850);
    cursor: not-allowed;
    opacity: 0.6;
}

.drop-zone-content[b-zm41p3jgdu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sl-spacing-medium);
    z-index: 2;
    color: var(--sl-color-neutral-400);
}

.drop-zone:hover .drop-zone-content[b-zm41p3jgdu],
.drop-zone.drag-over .drop-zone-content[b-zm41p3jgdu] {
    color: var(--sl-color-primary-400);
}

.drop-zone.disabled .drop-zone-content[b-zm41p3jgdu] {
    color: var(--sl-color-neutral-600);
}

.drop-zone-icon[b-zm41p3jgdu] {
    font-size: 3rem;
    color: var(--sl-color-neutral-500);
    transition: color 0.3s ease;
}

.drop-zone:hover .drop-zone-icon[b-zm41p3jgdu],
.drop-zone.drag-over .drop-zone-icon[b-zm41p3jgdu] {
    color: var(--sl-color-primary-500);
}

.drop-zone.disabled .drop-zone-icon[b-zm41p3jgdu] {
    color: var(--sl-color-neutral-600);
}

.drop-zone-title[b-zm41p3jgdu] {
    color: var(--sl-color-neutral-300);
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-semibold);
    margin: 0;
}

.drop-zone:hover .drop-zone-title[b-zm41p3jgdu],
.drop-zone.drag-over .drop-zone-title[b-zm41p3jgdu] {
    color: var(--sl-color-primary-300);
}

.drop-zone.disabled .drop-zone-title[b-zm41p3jgdu] {
    color: var(--sl-color-neutral-600);
}

.drop-zone-subtitle[b-zm41p3jgdu] {
    color: var(--sl-color-neutral-500);
    font-size: var(--sl-font-size-medium);
    margin: 0;
}

.drop-zone:hover .drop-zone-subtitle[b-zm41p3jgdu],
.drop-zone.drag-over .drop-zone-subtitle[b-zm41p3jgdu] {
    color: var(--sl-color-primary-400);
}

.drop-zone.disabled .drop-zone-subtitle[b-zm41p3jgdu] {
    color: var(--sl-color-neutral-600);
}

/* Preview thumbnail in hover state */
.drop-zone-preview[b-zm41p3jgdu] {
    position: absolute;
    top: var(--sl-spacing-medium);
    right: var(--sl-spacing-medium);
    width: 60px;
    height: 60px;
    border-radius: var(--sl-border-radius-medium);
    overflow: hidden;
    border: 2px solid var(--sl-color-success-500);
    display: none;
}

.drop-zone.has-preview.drag-over .drop-zone-preview[b-zm41p3jgdu],
.drop-zone.has-preview:hover .drop-zone-preview[b-zm41p3jgdu] {
    display: block;
}

.drop-zone-preview img[b-zm41p3jgdu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.drop-zone-preview[b-zm41p3jgdu]::after {
    content: "✓";
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: var(--sl-color-success-500);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

/* Content Grid */
.content-grid[b-zm41p3jgdu] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--sl-spacing-x-large);
    flex: 1;
}

/* Column Layout */
.left-column[b-zm41p3jgdu] {
    display: flex;
    flex-direction: column;
}

.right-column[b-zm41p3jgdu] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-large);
}

/* Platform Placement Section */
.platform-placement-section[b-zm41p3jgdu] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-medium);
}



.platform-dropdown-container[b-zm41p3jgdu] {
    width: 100%;
}

#platform-select[b-zm41p3jgdu] {
    width: 100%;
}

#platform-select[b-zm41p3jgdu]::part(base) {
    background: var(--sl-color-neutral-900) !important;
    border-color: var(--sl-color-neutral-700) !important;
    color: var(--sl-color-neutral-100) !important;
}

#platform-select[b-zm41p3jgdu]::part(base):focus-within {
    border-color: var(--sl-color-primary-500);
    box-shadow: 0 0 0 1px var(--sl-color-primary-500);
}

#platform-select[b-zm41p3jgdu]::part(display-input) {
    color: var(--sl-color-primary-400);
}

#platform-select[b-zm41p3jgdu]::part(display-input)::placeholder {
    color: var(--sl-color-neutral-500);
}

#platform-select[b-zm41p3jgdu]::part(icon) {
    color: var(--sl-color-neutral-400);
}

#platform-select[b-zm41p3jgdu]::part(menu) {
    background: var(--sl-color-neutral-900) !important;
    border-color: var(--sl-color-neutral-700) !important;
}

#platform-select[b-zm41p3jgdu]::part(listbox) {
    background: var(--sl-color-neutral-100) !important;
    border-color: var(--sl-color-neutral-700) !important;
}

/* Ensure the dropdown panel itself is dark */
#platform-select sl-popup[b-zm41p3jgdu]::part(popup) {
    background: var(--sl-color-neutral-900) !important;
}

    #platform-select sl-option[b-zm41p3jgdu]::part(base) {
        color: var(--sl-color-primary-400) !important;
        background: var(--sl-input-background-color) !important;
    }

        #platform-select sl-option[b-zm41p3jgdu]::part(base):hover {
            background: var(--sl-color-neutral-400) !important;
            color: var(--sl-color-primary-300) !important;
        }

#platform-select sl-option[b-zm41p3jgdu]::part(base)[aria-selected="true"] {
    background: var(--sl-color-neutral-800) !important;
    color: var(--sl-color-primary-400) !important;
}

#platform-select sl-option[b-zm41p3jgdu]::part(checked-icon) {
    color: var(--sl-color-primary-400) !important;
}

/* Additional fallback styles for dropdown options */
#platform-select sl-option[b-zm41p3jgdu] {
    color: var(--sl-color-primary-400) !important;
}

#platform-select sl-option:hover[b-zm41p3jgdu] {
    color: var(--sl-color-primary-300) !important;
}

/* Section Titles */
.section-title[b-zm41p3jgdu] {
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-bold);
    margin: 0 0 var(--sl-spacing-medium) 0;
}

/* Mockup Styles Section */
.mockup-styles-section[b-zm41p3jgdu] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-medium);
}

.mockup-styles-grid[b-zm41p3jgdu] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sl-spacing-medium);
}

.mockup-style-card[b-zm41p3jgdu] {
    background: var(--sl-color-neutral-0);
    border: 2px solid var(--sl-color-neutral-200);
    border-radius: var(--sl-border-radius-medium);
    padding: var(--sl-spacing-medium);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.mockup-style-card:hover[b-zm41p3jgdu] {
    border-color: var(--sl-color-primary-500);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.mockup-style-card.active[b-zm41p3jgdu] {
    border-color: var(--sl-color-primary-600);
    background: var(--sl-color-primary-900);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.card-image[b-zm41p3jgdu] {
    margin-bottom: var(--sl-spacing-small);
    border-radius: var(--sl-border-radius-small);
    overflow: hidden;
}

.card-image img[b-zm41p3jgdu] {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: var(--sl-border-radius-small);
}

.card-content h4[b-zm41p3jgdu] {
    font-size: var(--sl-font-size-medium);
    font-weight: var(--sl-font-weight-semibold);
    color: var(--sl-color-neutral-100);
    margin: 0 0 var(--sl-spacing-2x-small) 0;
}

.card-content p[b-zm41p3jgdu] {
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-400);
    margin: 0;
    line-height: 1.4;
}

/* Text Input Section */
.text-input-section[b-zm41p3jgdu] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-medium);
}

.text-input-container[b-zm41p3jgdu] {
    background: var(--sl-color-neutral-900);
    border: 2px solid var(--sl-color-neutral-700);
    border-radius: var(--sl-border-radius-medium);
    padding: var(--sl-spacing-small);
    height: 300px;
}

.prompt-textarea[b-zm41p3jgdu] {
    width: 100%;
    height: 100%;
}

.prompt-textarea[b-zm41p3jgdu]::part(base) {
    background: transparent;
    border: none;
    color: var(--sl-color-neutral-100);
    height: 100%;
}

.prompt-textarea[b-zm41p3jgdu]::part(base):focus-within {
    box-shadow: none;
}

.prompt-textarea[b-zm41p3jgdu]::part(textarea) {
    color: var(--sl-color-neutral-100);
    height: 100%;
    resize: none;
}

.prompt-textarea[b-zm41p3jgdu]::part(textarea)::placeholder {
    color: var(--sl-color-neutral-500);
}

/* Upload Preview */
.upload-preview[b-zm41p3jgdu] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-medium);
    text-align: center;
    margin-top: var(--sl-spacing-medium);
    align-items: center;
    max-width: 100%;
    overflow: hidden;
}

.upload-preview img[b-zm41p3jgdu] {
    width: 100% !important;
    height: auto !important;
    max-height: 400px;
    max-width: 100% !important;
    border-radius: var(--sl-border-radius-medium);
    object-fit: contain;
    background: var(--sl-color-neutral-900);
    border: 1px solid var(--sl-color-neutral-700);
}

/* Override any image-viewer styles that might be affecting this page */
.upload-preview .image-viewer[b-zm41p3jgdu],
.upload-preview img.image-viewer[b-zm41p3jgdu] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    --width: auto !important;
    --height: auto !important;
}

/* Ensure upload preview container doesn't inherit problematic width values */
.upload-preview[b-zm41p3jgdu] {
    --width: 100% !important;
    --height: auto !important;
}

.remove-image-btn[b-zm41p3jgdu]::part(base) {
    background: var(--sl-color-neutral-700);
    border-color: var(--sl-color-neutral-600);
    color: var(--sl-color-neutral-300);
}

.remove-image-btn[b-zm41p3jgdu]::part(base):hover {
    background: var(--sl-color-neutral-600);
    border-color: var(--sl-color-neutral-500);
    color: var(--sl-color-neutral-100);
}

/* Generate Button */
.generate-section[b-zm41p3jgdu] {
    margin-top: var(--sl-spacing-large);
}

.generate-btn[b-zm41p3jgdu] {
    width: 100%;
    height: 60px;
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-bold);
}

.generate-btn[b-zm41p3jgdu]::part(base) {
    background: var(--sl-color-primary-600);
    border-color: var(--sl-color-primary-600);
    color: var(--sl-color-neutral-0);
    height: 60px;
    border-radius: var(--sl-border-radius-medium);
}

.generate-btn[b-zm41p3jgdu]::part(base):hover:not(:disabled) {
    background: var(--sl-color-primary-500);
    border-color: var(--sl-color-primary-500);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.generate-btn[b-zm41p3jgdu]::part(base):disabled {
    background: var(--sl-color-neutral-700);
    border-color: var(--sl-color-neutral-600);
    color: var(--sl-color-neutral-400);
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .content-grid[b-zm41p3jgdu] {
        grid-template-columns: 1fr;
        gap: var(--sl-spacing-large);
    }
    
    .left-column[b-zm41p3jgdu],
    .right-column[b-zm41p3jgdu] {
        width: 100%;
    }
    
    .text-input-container[b-zm41p3jgdu] {
        height: 200px;
    }
}

@media (max-width: 768px) {
    .mockup-main[b-zm41p3jgdu] {
        padding: var(--sl-spacing-medium);
    }
    
    .mockup-styles-grid[b-zm41p3jgdu] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sl-spacing-small);
    }
    

    
    .drop-zone[b-zm41p3jgdu] {
        min-height: 150px;
        padding: var(--sl-spacing-large);
    }
    
    .upload-preview img[b-zm41p3jgdu] {
        max-height: 250px;
    }
    
    .drop-zone-title[b-zm41p3jgdu] {
        font-size: var(--sl-font-size-x-large);
    }
}

/* Drag and Drop Effects - handled by main .drop-zone:hover, .drop-zone.drag-over styles above */

/* Loading state for generate button */
.generate-btn[loading][b-zm41p3jgdu]::part(base) {
    background: var(--sl-color-primary-700);
    border-color: var(--sl-color-primary-700);
}

/* Success/Error alerts positioning */
sl-alert[b-zm41p3jgdu] {
    position: fixed;
    top: var(--sl-spacing-medium);
    right: var(--sl-spacing-medium);
    z-index: 1000;
    max-width: 300px;
} 
/* /Pages/MyDesigns.cshtml.rz.scp.css */
/* MyDesigns Page Styles */

.designs-layout[b-g721rk6mkw] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-large);
    max-width: 1200px;
    margin: 0 auto;
}

.page-header[b-g721rk6mkw] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-medium);
    text-align: center;
    padding: var(--sl-spacing-large) 0;
}

.page-title[b-g721rk6mkw] {
    font-size: var(--sl-font-size-2x-large);
    font-weight: var(--sl-font-weight-bold);
    margin: 0;
}

.page-description[b-g721rk6mkw] {
    font-size: var(--sl-font-size-large);
    opacity: 0.8;
    margin: 0;
}

.create-link-container[b-g721rk6mkw] {
    margin-top: var(--sl-spacing-small);
    text-align: center;
}

.designs-grid[b-g721rk6mkw] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sl-spacing-large);
}

.design-card[b-g721rk6mkw] {
    background: var(--sl-color-neutral-0);
    border: 1px solid var(--sl-color-neutral-200);
    border-radius: var(--sl-border-radius-large);
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: var(--sl-shadow-small);
}

.design-card:hover[b-g721rk6mkw] {
    transform: translateY(-4px);
    box-shadow: var(--sl-shadow-large);
}

.design-image-container[b-g721rk6mkw] {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--sl-color-neutral-50);
}

.design-meta[b-g721rk6mkw] {
    padding: var(--sl-spacing-medium);
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-small);
}

.meta-row[b-g721rk6mkw] { display: flex; justify-content: space-between; font-size: var(--sl-font-size-small); }
.meta-label[b-g721rk6mkw] { color: var(--sl-color-neutral-600); }
.meta-value[b-g721rk6mkw] { color: var(--sl-color-neutral-900); }

.design-actions[b-g721rk6mkw] { display: flex; gap: var(--sl-spacing-small); margin-top: var(--sl-spacing-small); flex-wrap:wrap; align-items:center; }

/* Make create product button more compact on small screens */
.create-product-btn[b-g721rk6mkw] {
    --sl-button-padding: 0.25rem 0.5rem;
}
.create-product-text[b-g721rk6mkw] { margin-left: 6px; }

@media (max-width: 700px) {
    .designs-grid[b-g721rk6mkw] { grid-template-columns: repeat(2, 1fr); }
    .create-product-text[b-g721rk6mkw] { display: none; }
    .design-actions sl_button[b-g721rk6mkw] { font-size: 12px; }
}

@media (max-width: 420px) {
    .designs-grid[b-g721rk6mkw] { grid-template-columns: 1fr; }
}

.empty-state[b-g721rk6mkw] { text-align: center; padding: var(--sl-spacing-3x-large) var(--sl-spacing-large); }
.empty-icon[b-g721rk6mkw] { font-size: 4rem; opacity: 0.3; }
/* /Pages/MyMockups.cshtml.rz.scp.css */
/* MyMockups Page Styles */

.mockups-layout[b-vf3c1poyoj] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-large);
    max-width: 1200px;
    margin: 0 auto;
}

/* Page Header */
.page-header[b-vf3c1poyoj] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-medium);
    text-align: center;
    padding: var(--sl-spacing-large) 0;
}

.page-title[b-vf3c1poyoj] {
    font-size: var(--sl-font-size-2x-large);
    font-weight: var(--sl-font-weight-bold);
    margin: 0;
}

.page-description[b-vf3c1poyoj] {
    font-size: var(--sl-font-size-large);
    opacity: 0.8;
    margin: 0;
}

/* Filter Container */
.filter-container[b-vf3c1poyoj] {
    max-width: 600px;
    margin: 0 auto;
}

.filter-input-wrapper[b-vf3c1poyoj] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-medium);
    margin-bottom: var(--sl-spacing-medium);
}

#mockup-filter[b-vf3c1poyoj] {
    flex: 1;
}

/* Grid Size Buttons */
.grid-size-buttons[b-vf3c1poyoj] {
    display: flex;
    border-radius: var(--sl-border-radius-medium);
    overflow: hidden;
    border: 1px solid var(--sl-color-neutral-300);
    background: var(--sl-color-neutral-0);
}

.grid-size-btn[b-vf3c1poyoj] {
    background: var(--sl-color-neutral-0);
    border: none;
    border-right: 1px solid var(--sl-color-neutral-300);
    padding: var(--sl-spacing-small);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    position: relative;
}

.grid-size-btn:last-child[b-vf3c1poyoj] {
    border-right: none;
}

.grid-size-btn:hover[b-vf3c1poyoj] {
    background: var(--sl-color-neutral-100);
}

.grid-size-btn.active[b-vf3c1poyoj] {
    background: var(--sl-color-primary-600);
    color: var(--sl-color-neutral-0);
}

.grid-size-btn.active:hover[b-vf3c1poyoj] {
    background: var(--sl-color-primary-700);
}

.grid-size-btn sl-icon[b-vf3c1poyoj] {
    font-size: 1.1rem;
    color: inherit;
}

.grid-size-btn:not(.active) sl-icon[b-vf3c1poyoj] {
    color: var(--sl-color-neutral-600);
}

.grid-size-btn:hover:not(.active) sl-icon[b-vf3c1poyoj] {
    color: var(--sl-color-neutral-800);
}

#mockup-filter[b-vf3c1poyoj] {
    width: 100%;
}

#mockup-filter[b-vf3c1poyoj]::part(base) {
    background: var(--sl-color-neutral-0);
    border: 2px solid var(--sl-color-neutral-300);
    border-radius: var(--sl-border-radius-medium);
}

#mockup-filter[b-vf3c1poyoj]::part(base):focus-within {
    border-color: var(--sl-color-primary-500);
    box-shadow: 0 0 0 1px var(--sl-color-primary-500);
}

#mockup-filter[b-vf3c1poyoj]::part(input) {
    font-size: var(--sl-font-size-medium);
}

.create-link-container[b-vf3c1poyoj] {
    margin-top: var(--sl-spacing-small);
    text-align: center;
}

.create-link-container sl-button[b-vf3c1poyoj] {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.create-link-container sl-button:hover[b-vf3c1poyoj] {
    opacity: 1;
}

/* Bulk Actions Bar */
.bulk-actions-bar[b-vf3c1poyoj] {
    background: rgba(34, 197, 94, 0.1); /* Green with 10% opacity */
    border: 2px solid var(--sl-color-success-600);
    border-radius: var(--sl-border-radius-medium);
    padding: var(--sl-spacing-medium);
    margin-bottom: var(--sl-spacing-large);
    animation: slideDown-b-vf3c1poyoj 0.3s ease-out;
    box-shadow: 0 0 0 2px var(--sl-color-success-200);
}

.bulk-actions-content[b-vf3c1poyoj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.selection-count[b-vf3c1poyoj] {
    font-size: var(--sl-font-size-medium);
    font-weight: var(--sl-font-weight-semibold);
    color: var(--sl-color-success-700);
}

.bulk-actions-buttons[b-vf3c1poyoj] {
    display: flex;
    gap: var(--sl-spacing-small);
}

@keyframes slideDown-b-vf3c1poyoj {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mockups Grid */
.mockups-grid[b-vf3c1poyoj] {
    display: grid;
    gap: var(--sl-spacing-large);
    transition: all 0.3s ease;
}

/* Grid Size Variations */
.mockups-grid.grid-small[b-vf3c1poyoj] {
    grid-template-columns: repeat(2, 1fr);
}

.mockups-grid.grid-medium[b-vf3c1poyoj] {
    grid-template-columns: repeat(4, 1fr);
}

.mockups-grid.grid-large[b-vf3c1poyoj] {
    grid-template-columns: repeat(6, 1fr);
}

/* Default grid size (medium) */
.mockups-grid:not([class*="grid-"])[b-vf3c1poyoj] {
    grid-template-columns: repeat(4, 1fr);
}

/* Mockup Card */
.mockup-card[b-vf3c1poyoj] {
    background: var(--sl-color-neutral-0);
    border: 1px solid var(--sl-color-neutral-200);
    border-radius: var(--sl-border-radius-large);
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: var(--sl-shadow-small);
}

.mockup-card[style*="display: none"][b-vf3c1poyoj] {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.2s ease;
}

.mockup-card:hover[b-vf3c1poyoj] {
    transform: translateY(-4px);
    box-shadow: var(--sl-shadow-large);
}

/* Image Container */
.mockup-image-container[b-vf3c1poyoj] {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--sl-color-neutral-50);
    cursor: pointer;
    transition: all 0.3s ease;
}

.mockup-image-container .lazy-image-container[b-vf3c1poyoj] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mockup-image-container .lazy-image-loaded[b-vf3c1poyoj],
.mockup-image-container .lazy-image-placeholder[b-vf3c1poyoj],
.mockup-image-container .lazy-image-placeholder img[b-vf3c1poyoj] {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Ensure lazy image components fill container */
.mockup-image-container .lazy-image-placeholder[b-vf3c1poyoj] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.mockup-image-container .lazy-image-placeholder .loading-spinner[b-vf3c1poyoj] {
    position: absolute;
    z-index: 2;
}

.mockup-card:hover .lazy-image-loaded[b-vf3c1poyoj],
.mockup-card:hover .lazy-image-placeholder img[b-vf3c1poyoj] {
    transform: scale(1.05);
}

/* Selection Indicator */
.selection-indicator[b-vf3c1poyoj] {
    position: absolute;
    top: var(--sl-spacing-small);
    right: var(--sl-spacing-small);
    width: 32px;
    height: 32px;
    background: var(--sl-color-success-600);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.selection-indicator sl-icon[b-vf3c1poyoj] {
    color: var(--sl-color-neutral-0);
    font-size: 1.2rem;
}

.mockup-card.selected .selection-indicator[b-vf3c1poyoj] {
    display: flex;
}

.mockup-card.selected .mockup-image-container[b-vf3c1poyoj] {
    border: 3px solid var(--sl-color-success-600);
    box-shadow: 0 0 0 2px var(--sl-color-success-200);
}

.mockup-card.selected .mockup-actions[b-vf3c1poyoj] {
    background: rgba(34, 197, 94, 0.1); /* Green with 10% opacity */
    border-top: 1px solid var(--sl-color-success-300);
    border-left: 3px solid var(--sl-color-success-600);
    border-right: 3px solid var(--sl-color-success-600);
    border-bottom: 3px solid var(--sl-color-success-600);
}

/* Action Buttons */
.mockup-actions[b-vf3c1poyoj] {
    display: flex;
    background: var(--sl-color-neutral-0);
    border-top: 1px solid var(--sl-color-neutral-200);
    height: 48px;
}

.action-btn[b-vf3c1poyoj] {
    flex: 1;
    height: 100%;
    border-radius: 0;
    position: relative;
}

.view-btn[b-vf3c1poyoj]::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    bottom: 25%;
    width: 1px;
    background: var(--sl-color-neutral-300);
}

.action-btn[b-vf3c1poyoj]::part(base) {
    background: transparent;
    border: none;
    color: var(--sl-color-neutral-600);
    height: 100%;
    border-radius: 0;
    padding: 0;
    transition: all 0.2s ease;
}

.action-btn[b-vf3c1poyoj]::part(base):hover {
    background: var(--sl-color-neutral-100);
    color: var(--sl-color-neutral-800);
}

.view-btn[b-vf3c1poyoj]::part(base):hover {
    background: var(--sl-color-primary-50);
    color: var(--sl-color-primary-700);
}

.download-btn[b-vf3c1poyoj]::part(base):hover {
    background: var(--sl-color-success-50);
    color: var(--sl-color-success-700);
}

.action-btn sl-icon[b-vf3c1poyoj] {
    font-size: 1.2rem;
}

/* Selected card button states */
.mockup-card.selected .action-btn[b-vf3c1poyoj]::part(base) {
    color: var(--sl-color-success-700);
}

.mockup-card.selected .view-btn[b-vf3c1poyoj]::part(base):hover {
    background: var(--sl-color-primary-100);
    color: var(--sl-color-primary-800);
}

.mockup-card.selected .download-btn[b-vf3c1poyoj]::part(base):hover {
    background: var(--sl-color-success-100);
    color: var(--sl-color-success-800);
}

/* No Results State */
.no-results[b-vf3c1poyoj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sl-spacing-medium);
    padding: var(--sl-spacing-3x-large) var(--sl-spacing-large);
    text-align: center;
    opacity: 0.8;
}

.no-results-icon[b-vf3c1poyoj] {
    font-size: 3rem;
    opacity: 0.5;
    color: var(--sl-color-neutral-500);
}

.no-results h3[b-vf3c1poyoj] {
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-semibold);
    margin: 0;
    color: var(--sl-color-neutral-700);
}

.no-results p[b-vf3c1poyoj] {
    font-size: var(--sl-font-size-medium);
    margin: 0;
    color: var(--sl-color-neutral-600);
}

.no-results a[b-vf3c1poyoj] {
    color: var(--sl-color-primary-600);
    text-decoration: none;
}

.no-results a:hover[b-vf3c1poyoj] {
    text-decoration: underline;
}

/* Empty State */
.empty-state[b-vf3c1poyoj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sl-spacing-large);
    padding: var(--sl-spacing-3x-large) var(--sl-spacing-large);
    text-align: center;
}

.empty-icon[b-vf3c1poyoj] {
    font-size: 4rem;
    opacity: 0.3;
}

.empty-state h2[b-vf3c1poyoj] {
    font-size: var(--sl-font-size-x-large);
    font-weight: var(--sl-font-weight-semibold);
    margin: 0;
}

.empty-state p[b-vf3c1poyoj] {
    font-size: var(--sl-font-size-large);
    opacity: 0.7;
    margin: 0;
    max-width: 400px;
}

/* Image Viewer Modal */
.image-viewer[b-vf3c1poyoj] {
    max-width: 90vw;
    max-height: 90vh;
}

.viewer-content[b-vf3c1poyoj] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.viewer-content img[b-vf3c1poyoj] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--sl-border-radius-medium);
}

/* Edit Mockup Dialog */
.edit-mockup-dialog[b-vf3c1poyoj] {
    max-width: 500px;
    width: 90vw;
}

.edit-content[b-vf3c1poyoj] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-medium);
}

.edit-image-preview[b-vf3c1poyoj] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sl-spacing-medium);
    background: var(--sl-color-neutral-50);
    border: 1px solid var(--sl-color-neutral-200);
    border-radius: var(--sl-border-radius-medium);
}

#edit-preview-image[b-vf3c1poyoj] {
    max-width: 250px;
    max-height: 250px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--sl-border-radius-small);
    box-shadow: var(--sl-shadow-small);
    background: var(--sl-color-neutral-0);
    transition: opacity 0.3s ease;
}

.edit-description[b-vf3c1poyoj] {
    margin: 0;
    font-size: var(--sl-font-size-medium);
    color: var(--sl-color-neutral-700);
}

#edit-description-input[b-vf3c1poyoj] {
    width: 100%;
}

#edit-description-input[b-vf3c1poyoj]::part(base) {
    border: 2px solid var(--sl-color-neutral-300);
    border-radius: var(--sl-border-radius-medium);
}

#edit-description-input[b-vf3c1poyoj]::part(base):focus-within {
    border-color: var(--sl-color-primary-500);
    box-shadow: 0 0 0 1px var(--sl-color-primary-500);
}

.edit-note[b-vf3c1poyoj] {
    display: flex;
    align-items: flex-start;
    gap: var(--sl-spacing-small);
    padding: var(--sl-spacing-small);
    background: var(--sl-color-primary-50);
    border: 1px solid var(--sl-color-primary-200);
    border-radius: var(--sl-border-radius-medium);
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-primary-700);
}

.edit-note sl-icon[b-vf3c1poyoj] {
    color: var(--sl-color-primary-500);
    margin-top: 2px;
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .mockups-layout[b-vf3c1poyoj] {
        padding: 0 var(--sl-spacing-medium);
    }
    
    .page-header[b-vf3c1poyoj] {
        padding: var(--sl-spacing-medium) 0;
    }
    
    .page-title[b-vf3c1poyoj] {
        font-size: var(--sl-font-size-x-large);
    }
    
    /* Mobile Grid Sizes */
    .mockups-grid.grid-small[b-vf3c1poyoj] {
        grid-template-columns: repeat(1, 1fr);
    }

    .mockups-grid.grid-medium[b-vf3c1poyoj] {
        grid-template-columns: repeat(2, 1fr);
    }

    .mockups-grid.grid-large[b-vf3c1poyoj] {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Default mobile grid (medium) */
    .mockups-grid:not([class*="grid-"])[b-vf3c1poyoj] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mockups-grid[b-vf3c1poyoj] {
        gap: var(--sl-spacing-medium);
    }
    
    .filter-input-wrapper[b-vf3c1poyoj] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sl-spacing-small);
    }
    
    .grid-size-buttons[b-vf3c1poyoj] {
        align-self: center;
    }
    
    .mockup-actions[b-vf3c1poyoj] {
        height: 40px;
    }
    
    .action-btn sl-icon[b-vf3c1poyoj] {
        font-size: 1rem;
    }
    
    .bulk-actions-content[b-vf3c1poyoj] {
        flex-direction: column;
        gap: var(--sl-spacing-small);
        text-align: center;
    }
    
    .image-viewer[b-vf3c1poyoj] {
        max-width: 95vw;
        max-height: 95vh;
    }
    
    .edit-mockup-dialog[b-vf3c1poyoj] {
        max-width: 95vw;
    }
    
    #edit-preview-image[b-vf3c1poyoj] {
        max-width: 180px;
        max-height: 180px;
    }
}

@media (max-width: 480px) {
    .mockups-grid[b-vf3c1poyoj] {
        grid-template-columns: 1fr;
    }
    
    .mockup-actions[b-vf3c1poyoj] {
        height: 36px;
    }
}

/* Page-specific hover effect for pie chart */
.mockup-card:hover .pie-chart-container[b-vf3c1poyoj] {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

/* Animations */
@keyframes fadeIn-b-vf3c1poyoj {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mockup-card[b-vf3c1poyoj] {
    animation: fadeIn-b-vf3c1poyoj 0.5s ease-out;
}

.mockup-card:nth-child(1)[b-vf3c1poyoj] { animation-delay: 0.1s; }
.mockup-card:nth-child(2)[b-vf3c1poyoj] { animation-delay: 0.2s; }
.mockup-card:nth-child(3)[b-vf3c1poyoj] { animation-delay: 0.3s; }
.mockup-card:nth-child(4)[b-vf3c1poyoj] { animation-delay: 0.4s; }
.mockup-card:nth-child(5)[b-vf3c1poyoj] { animation-delay: 0.5s; }
.mockup-card:nth-child(6)[b-vf3c1poyoj] { animation-delay: 0.6s; }
/* /Pages/Register.cshtml.rz.scp.css */
/* Simplified styles since body handles centering */
.page-container[b-ap47ij70ss] {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--sl-spacing-large);
    box-sizing: border-box;
}

.register-form[b-ap47ij70ss] {
    width: 450px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border-radius: var(--sl-border-radius-large);
    margin: 0;
    flex-shrink: 0;
}

.register-form[b-ap47ij70ss]::part(header) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: var(--sl-spacing-large);
    background: var(--sl-color-primary-600);
    color: white;
    border-radius: var(--sl-border-radius-large) var(--sl-border-radius-large) 0 0;
}

.register-form h2[b-ap47ij70ss] {
    margin-top: var(--sl-spacing-medium);
    font-size: 1.75rem;
    font-weight: 600;
    text-align: center;
}

.register-form sl-avatar[b-ap47ij70ss] {
    width: 64px;
    height: 64px;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.register-form form[b-ap47ij70ss] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-medium);
    padding: var(--sl-spacing-large);
}

/* More specific selector for input spacing */
.register-form form sl-input[b-ap47ij70ss] {
    margin-bottom: var(--sl-spacing-medium) !important;
}

.register-form sl-input[b-ap47ij70ss]::part(base) {
    border-radius: var(--sl-border-radius-medium);
}

.register-form sl-button[type="submit"][b-ap47ij70ss] {
    width: 100%;
    margin-top: var(--sl-spacing-medium);
    height: 48px;
    font-weight: 600;
}

.register-form sl-alert[b-ap47ij70ss] {
    margin-bottom: var(--sl-spacing-medium);
}

.register-form a[b-ap47ij70ss] {
    color: var(--sl-color-primary-600);
    text-decoration: none;
    font-weight: 500;
}

.register-form a:hover[b-ap47ij70ss] {
    text-decoration: underline;
}

/* Responsive design */
@media (max-width: 480px) {
    .page-container[b-ap47ij70ss] {
        padding: var(--sl-spacing-medium);
    }
    
    .register-form[b-ap47ij70ss] {
        width: 100%;
        max-width: 100%;
    }
    
    .register-form[b-ap47ij70ss]::part(header) {
        padding: var(--sl-spacing-medium);
    }
    
    .register-form form[b-ap47ij70ss] {
        padding: var(--sl-spacing-medium);
    }
}

/* Animation for form elements */
.register-form sl-input[b-ap47ij70ss],
.register-form sl-button[b-ap47ij70ss] {
    transition: all 0.2s ease-in-out;
}

.register-form sl-input:focus-within[b-ap47ij70ss],
.register-form sl-button:hover[b-ap47ij70ss] {
    transform: translateY(-1px);
}

/* Global input spacing as fallback */
sl-input[b-ap47ij70ss] {
    margin-bottom: 16px;
}
/* /Pages/RemixDesign.cshtml.rz.scp.css */
/* RemixDesign Page Styles - Dark Theme */

/* Remove mobile header for this page */
.mobile-header[b-76ietoi6hv] {
    display: none !important;
}

/* Main Layout - now uses the full content area */
.remix-layout[b-76ietoi6hv] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--sl-spacing-large) * 2);
}

/* Main Content */
.remix-main[b-76ietoi6hv] {
    padding: var(--sl-spacing-large);
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-large);
    overflow-y: auto;
}

/* Responsive Content Grid */
.responsive-content-grid[b-76ietoi6hv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sl-spacing-x-large);
    flex: 1;
    align-items: start;
}

/* Upload Section */
.upload-section[b-76ietoi6hv] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Controls Section */
.controls-section[b-76ietoi6hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-large);
    height: 100%;
}

/* Drop Zone */
.drop-zone-section[b-76ietoi6hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-medium);
    flex: 1;
}

.drop-zone[b-76ietoi6hv] {
    background: var(--sl-color-neutral-50);
    border: 2px dashed var(--sl-color-neutral-300);
    border-radius: var(--sl-border-radius-large);
    padding: var(--sl-spacing-3x-large);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex: 1;
}

.drop-zone:hover[b-76ietoi6hv],
.drop-zone.drag-over[b-76ietoi6hv] {
    border: 2px solid var(--sl-color-primary-600);
    background: var(--sl-color-primary-950);
    transform: scale(1.01);
}

.drop-zone.disabled[b-76ietoi6hv] {
    border: 2px dashed var(--sl-color-neutral-700);
    background: var(--sl-color-neutral-850);
    cursor: not-allowed;
    opacity: 0.6;
}

.drop-zone-content[b-76ietoi6hv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sl-spacing-medium);
    z-index: 2;
    color: var(--sl-color-neutral-400);
}

.drop-zone:hover .drop-zone-content[b-76ietoi6hv],
.drop-zone.drag-over .drop-zone-content[b-76ietoi6hv] {
    color: var(--sl-color-primary-400);
}

.drop-zone.disabled .drop-zone-content[b-76ietoi6hv] {
    color: var(--sl-color-neutral-600);
}

.drop-zone-icon[b-76ietoi6hv] {
    font-size: 3rem;
    color: var(--sl-color-neutral-500);
    transition: color 0.3s ease;
}

.drop-zone:hover .drop-zone-icon[b-76ietoi6hv],
.drop-zone.drag-over .drop-zone-icon[b-76ietoi6hv] {
    color: var(--sl-color-primary-500);
}

.drop-zone.disabled .drop-zone-icon[b-76ietoi6hv] {
    color: var(--sl-color-neutral-600);
}

.drop-zone-title[b-76ietoi6hv] {
    color: var(--sl-color-neutral-300);
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-semibold);
    margin: 0;
}

.drop-zone:hover .drop-zone-title[b-76ietoi6hv],
.drop-zone.drag-over .drop-zone-title[b-76ietoi6hv] {
    color: var(--sl-color-primary-300);
}

.drop-zone.disabled .drop-zone-title[b-76ietoi6hv] {
    color: var(--sl-color-neutral-600);
}

.drop-zone-subtitle[b-76ietoi6hv] {
    color: var(--sl-color-neutral-500);
    font-size: var(--sl-font-size-medium);
    margin: 0;
}

.drop-zone:hover .drop-zone-subtitle[b-76ietoi6hv],
.drop-zone.drag-over .drop-zone-subtitle[b-76ietoi6hv] {
    color: var(--sl-color-primary-400);
}

.drop-zone.disabled .drop-zone-subtitle[b-76ietoi6hv] {
    color: var(--sl-color-neutral-600);
}

/* Preview thumbnail in hover state */
.drop-zone-preview[b-76ietoi6hv] {
    position: absolute;
    top: var(--sl-spacing-medium);
    right: var(--sl-spacing-medium);
    width: 60px;
    height: 60px;
    border-radius: var(--sl-border-radius-medium);
    overflow: hidden;
    border: 2px solid var(--sl-color-success-500);
    display: none;
}

.drop-zone.has-preview.drag-over .drop-zone-preview[b-76ietoi6hv],
.drop-zone.has-preview:hover .drop-zone-preview[b-76ietoi6hv] {
    display: block;
}

.drop-zone-preview img[b-76ietoi6hv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.drop-zone-preview[b-76ietoi6hv]::after {
    content: "✓";
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: var(--sl-color-success-500);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

/* Legacy styles - kept for compatibility but overridden by responsive grid */

/* Section Titles */
.section-title[b-76ietoi6hv] {
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-bold);
    margin: 0 0 0 0;
}

/* Product Types Section */
.product-types-section[b-76ietoi6hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-medium);
}

.product-type-dropdown-container[b-76ietoi6hv] {
    width: 100%;
}

#product-type-dropdown[b-76ietoi6hv] {
    width: 100%;
}

#product-type-dropdown sl-button[b-76ietoi6hv] {
    width: 100%;
}

#product-type-dropdown sl-button[b-76ietoi6hv]::part(base) {
    width: 100%;
    justify-content: space-between;
    padding: var(--sl-spacing-medium);
    background: var(--sl-color-neutral-0);
    border: 2px solid var(--sl-color-neutral-200);
    color: var(--sl-color-neutral-900);
    height: auto;
    min-height: 60px;
}

#product-type-dropdown sl-button[b-76ietoi6hv]::part(base):hover {
    border-color: var(--sl-color-primary-500);
    background: var(--sl-color-neutral-50);
}

#product-type-dropdown sl-button[b-76ietoi6hv]::part(label) {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-medium);
    width: 100%;
    justify-content: flex-start;
}

#selected-product-icon[b-76ietoi6hv] {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: var(--sl-border-radius-small);
    flex-shrink: 0;
}

#selected-product-name[b-76ietoi6hv] {
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-semibold);
    color: var(--sl-color-neutral-900);
}

/* Dropdown menu items */
#product-type-dropdown sl-menu-item[b-76ietoi6hv] {
    padding: var(--sl-spacing-medium);
}

#product-type-dropdown sl-menu-item[b-76ietoi6hv]::part(base) {
    padding: var(--sl-spacing-medium);
}

.product-icon[b-76ietoi6hv] {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: var(--sl-border-radius-small);
}

.product-info[b-76ietoi6hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-2x-small);
    flex: 1;
}

.product-name[b-76ietoi6hv] {
    font-size: var(--sl-font-size-medium);
    font-weight: var(--sl-font-weight-semibold);
    color: var(--sl-color-neutral-900);
    line-height: 1.2;
}

.product-desc[b-76ietoi6hv] {
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-600);
    line-height: 1.3;
    margin: 0;
}

/* Text Input Section */
.text-input-section[b-76ietoi6hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-medium);
    flex: 1;
}

.text-input-container[b-76ietoi6hv] {
    background: var(--sl-color-neutral-900);
    border: 2px solid var(--sl-color-neutral-700);
    border-radius: var(--sl-border-radius-medium);
    padding: var(--sl-spacing-small);
    height: 150px;
    flex: 1;
    min-height: 100px;
}

.prompt-textarea[b-76ietoi6hv] {
    width: 100%;
    height: 100%;
}

.prompt-textarea[b-76ietoi6hv]::part(base) {
    background: transparent;
    border: none;
    color: var(--sl-color-neutral-100);
    height: 100%;
}

.prompt-textarea[b-76ietoi6hv]::part(base):focus-within {
    box-shadow: none;
}

.prompt-textarea[b-76ietoi6hv]::part(textarea) {
    color: var(--sl-color-neutral-100);
    height: 100%;
    resize: none;
}

.prompt-textarea[b-76ietoi6hv]::part(textarea)::placeholder {
    color: var(--sl-color-neutral-500);
}

/* Upload Preview */
.upload-preview[b-76ietoi6hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-medium);
    text-align: center;
    margin-top: var(--sl-spacing-medium);
    align-items: center;
    max-width: 100%;
    overflow: hidden;
}

.upload-preview img[b-76ietoi6hv] {
    width: 100% !important;
    height: auto !important;
    max-height: 400px;
    max-width: 100% !important;
    border-radius: var(--sl-border-radius-medium);
    object-fit: contain;
    background: var(--sl-color-neutral-900);
    border: 1px solid var(--sl-color-neutral-700);
}

/* Override any image-viewer styles that might be affecting this page */
.upload-preview .image-viewer[b-76ietoi6hv],
.upload-preview img.image-viewer[b-76ietoi6hv] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    --width: auto !important;
    --height: auto !important;
}

/* Ensure upload preview container doesn't inherit problematic width values */
.upload-preview[b-76ietoi6hv] {
    --width: 100% !important;
    --height: auto !important;
}

.remove-image-btn[b-76ietoi6hv]::part(base) {
    background: var(--sl-color-neutral-700);
    border-color: var(--sl-color-neutral-600);
    color: var(--sl-color-neutral-300);
}

.remove-image-btn[b-76ietoi6hv]::part(base):hover {
    background: var(--sl-color-neutral-600);
    border-color: var(--sl-color-neutral-500);
    color: var(--sl-color-neutral-100);
}

/* Generate Button */
.generate-section[b-76ietoi6hv] {
    margin-top: var(--sl-spacing-large);
}

.results-section[b-76ietoi6hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-medium);
    margin-top: var(--sl-spacing-x-large);
    padding-top: var(--sl-spacing-large);
    border-top: 1px solid var(--sl-color-neutral-700);
}

.results-section .section-title[b-76ietoi6hv] {
    text-align: center;
    margin-bottom: var(--sl-spacing-large);
    color: var(--sl-color-neutral-200);
    font-size: var(--sl-font-size-x-large);
    font-weight: var(--sl-font-weight-bold);
}

.remix-results-grid[b-76ietoi6hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sl-spacing-large);
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--sl-spacing-medium);
}

.remix-result-card[b-76ietoi6hv] {
    background: var(--sl-color-neutral-900);
    border: 1px solid var(--sl-color-neutral-700);
    border-radius: var(--sl-border-radius-medium);
    padding: var(--sl-spacing-medium);
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-small);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    max-width: 350px;
    margin: 0 auto;
    width: 100%;
    transition: all 0.3s ease;
    cursor: pointer;
}

.remix-result-card:hover[b-76ietoi6hv] {
    border-color: var(--sl-color-primary-500);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.remix-result-image[b-76ietoi6hv] {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--sl-border-radius-small);
    overflow: hidden;
    background: var(--sl-color-neutral-800);
    display: flex;
    align-items: center;
    justify-content: center;
}

.remix-result-image sl-skeleton[b-76ietoi6hv] {
    width: 100%;
    height: 100%;
}

.remix-result-image img[b-76ietoi6hv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
    background: var(--sl-color-neutral-900);
    max-width: 100%;
    display: block;
}

.remix-result-image img.loaded[b-76ietoi6hv] {
    opacity: 1;
}

.remix-result-image img[src][b-76ietoi6hv] {
    opacity: 1;
}

/* Loading progress indicator */
.remix-result-card.generating[b-76ietoi6hv]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        var(--sl-color-primary-600) 0%, 
        var(--sl-color-primary-400) 50%, 
        var(--sl-color-primary-600) 100%);
    background-size: 200% 100%;
    animation: loading-progress-b-76ietoi6hv 2s ease-in-out infinite;
}

@keyframes loading-progress-b-76ietoi6hv {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.remix-result-meta[b-76ietoi6hv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-300);
}

.remix-result-meta sl-button[b-76ietoi6hv]::part(base) {
    font-size: var(--sl-font-size-small);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .responsive-content-grid[b-76ietoi6hv] {
        grid-template-columns: 1fr;
        gap: var(--sl-spacing-large);
    }
    
    .upload-section[b-76ietoi6hv] {
        order: 1;
    }
    
    .controls-section[b-76ietoi6hv] {
        order: 2;
    }
    
    .text-input-container[b-76ietoi6hv] {
        height: 200px;
    }
}

@media (max-width: 768px) {
    .remix-main[b-76ietoi6hv] {
        padding: var(--sl-spacing-medium);
    }
    
    .responsive-content-grid[b-76ietoi6hv] {
        gap: var(--sl-spacing-medium);
    }
    
    .controls-section[b-76ietoi6hv] {
        gap: var(--sl-spacing-medium);
    }
    
    .drop-zone[b-76ietoi6hv] {
        min-height: 150px;
        padding: var(--sl-spacing-large);
    }
    
    .upload-preview img[b-76ietoi6hv] {
        max-height: 250px;
    }
    
    .drop-zone-title[b-76ietoi6hv] {
        font-size: var(--sl-font-size-x-large);
    }
    
    #product-type-dropdown sl-button[b-76ietoi6hv]::part(base) {
        min-height: 50px;
        padding: var(--sl-spacing-small);
    }
    
    #selected-product-icon[b-76ietoi6hv] {
        width: 24px;
        height: 24px;
    }
    
    #selected-product-name[b-76ietoi6hv] {
        font-size: var(--sl-font-size-medium);
    }
    
    .text-input-container[b-76ietoi6hv] {
        height: 150px;
    }

    .remix-results-grid[b-76ietoi6hv] {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--sl-spacing-medium);
        padding: 0 var(--sl-spacing-small);
        max-width: 100%;
    }

    .remix-result-card[b-76ietoi6hv] {
        padding: var(--sl-spacing-small);
        max-width: 300px;
    }
    
    .remix-result-image[b-76ietoi6hv] {
        aspect-ratio: 1 / 1;
    }
}

/* Additional responsive breakpoints for results grid */
@media (max-width: 900px) {
    .remix-results-grid[b-76ietoi6hv] {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: var(--sl-spacing-medium);
    }
    
    .remix-result-card[b-76ietoi6hv] {
        max-width: 280px;
    }
}

@media (max-width: 600px) {
    .remix-results-grid[b-76ietoi6hv] {
        grid-template-columns: 1fr;
        gap: var(--sl-spacing-medium);
        padding: 0;
    }
    
    .remix-result-card[b-76ietoi6hv] {
        max-width: 100%;
        margin: 0;
    }
    
    .remix-result-image[b-76ietoi6hv] {
        max-height: 300px;
    }
}

/* Drag and Drop Effects - handled by main .drop-zone:hover, .drop-zone.drag-over styles above */

/* Loading state for generate button */
.generate-btn[loading][b-76ietoi6hv]::part(base) {
    background: var(--sl-color-primary-700);
    border-color: var(--sl-color-primary-700);
}

/* Success/Error alerts positioning */
sl-alert[b-76ietoi6hv] {
    position: fixed;
    top: var(--sl-spacing-medium);
    right: var(--sl-spacing-medium);
    z-index: 1000;
    max-width: 300px;
}
/* /Pages/Shared/_Layout.cshtml.rz.scp.css */
/* Layout styles moved to wwwroot/css/site.css to avoid CSS isolation issues */

/* /Pages/Store/Admin/AIProduct.cshtml.rz.scp.css */
/* AI Product Designer Page Specific Styles */

/* 1. Layout Grid */
.page-container[b-wjf9wfco6g] {
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto 1fr;
    gap: var(--sl-spacing-3x-large);
    padding: var(--sl-spacing-3x-large) var(--sl-spacing-4x-large);
    background: var(--sl-color-neutral-50);
}

.page-header[b-wjf9wfco6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sl-spacing-large);
}

.page-main[b-wjf9wfco6g] {
    display: grid;
    gap: var(--sl-spacing-2x-large);
}

.designer-header[b-wjf9wfco6g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sl-spacing-large);
}

.designer-header h1[b-wjf9wfco6g] {
    margin: 0;
    font-size: var(--sl-font-size-2x-large);
    font-weight: var(--sl-font-weight-semibold);
}

.designer-header p[b-wjf9wfco6g] {
    margin: var(--sl-spacing-x-small) 0 0;
    color: var(--sl-color-neutral-600);
}

.designer-layout[b-wjf9wfco6g] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sl-spacing-3x-large);
    align-items: start;
}

/* 2. Component Overrides */
.designer-form__body[b-wjf9wfco6g] {
    display: grid;
    gap: var(--sl-spacing-2x-large);
    min-width: 0;
}

.form-grid[b-wjf9wfco6g] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sl-spacing-2x-large);
}

.card-section sl-card[b-wjf9wfco6g]::part(base) {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.prompt-controls[b-wjf9wfco6g] {
    display: grid;
    gap: var(--sl-spacing-large);
}

.prompt-actions[b-wjf9wfco6g] {
    display: flex;
    gap: var(--sl-spacing-medium);
    flex-wrap: wrap;
}

.prompt-metadata[b-wjf9wfco6g] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sl-spacing-medium);
}


.upload-zone[b-wjf9wfco6g] {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: var(--sl-spacing-large);
    padding: var(--sl-spacing-2x-large);
    border: 2px dashed var(--sl-color-neutral-300);
    border-radius: var(--sl-border-radius-x-large);
    background: var(--sl-color-neutral-0);
    min-height: 260px;
}

.upload-preview[b-wjf9wfco6g] {
    display: grid;
    gap: var(--sl-spacing-medium);
    justify-items: center;
}

.upload-preview img[b-wjf9wfco6g] {
    width: clamp(200px, 65%, 320px);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--sl-border-radius-large);
    box-shadow: var(--sl-shadow-large);
}

.validation-summary[b-wjf9wfco6g] {
    color: var(--sl-color-danger-600);
}

.validation-message[b-wjf9wfco6g] {
    color: var(--sl-color-danger-600);
}

.designer-actions[b-wjf9wfco6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sl-spacing-large);
}

.designer-actions .status[b-wjf9wfco6g] {
    flex: 1;
}

.designer-actions .action-buttons[b-wjf9wfco6g] {
    display: inline-flex;
    gap: var(--sl-spacing-medium);
    flex-wrap: wrap;
}

.designer-preview[b-wjf9wfco6g] {
    display: grid;
    gap: var(--sl-spacing-2x-large);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.preview-card sl-card[b-wjf9wfco6g]::part(base),
.history-card sl-card[b-wjf9wfco6g]::part(base) {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-large);
    max-width: 100%;
    box-sizing: border-box;
}

.preview-header[b-wjf9wfco6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.preview-layout[b-wjf9wfco6g] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sl-spacing-large);
    align-items: start;
    max-width: 100%;
    overflow: hidden;
}

.customer-upload-panel[b-wjf9wfco6g] {
    background: var(--sl-color-neutral-50);
    border-radius: var(--sl-border-radius-large);
    padding: 0px;
    display: grid;
    gap: var(--sl-spacing-medium);
    width: 100%;
    box-sizing: border-box;
}

.test-prompt-section[b-wjf9wfco6g] {
    display: flex;
    width: 100%;
}

.test-prompt-button[b-wjf9wfco6g] {
    width: 100%;
}

/* Attributes Section Styles */
.attributes-section[b-wjf9wfco6g] {
    display: grid;
    gap: var(--sl-spacing-medium);
    padding: var(--sl-spacing-medium);
    background: var(--sl-color-neutral-50);
    border-radius: var(--sl-border-radius-large);
}

.attributes-header[b-wjf9wfco6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.attributes-header h3[b-wjf9wfco6g] {
    margin: 0;
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-semibold);
}

.attributes-list[b-wjf9wfco6g] {
    display: grid;
    gap: var(--sl-spacing-small);
}

.attribute-item[b-wjf9wfco6g] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--sl-spacing-small);
    align-items: end;
    padding: var(--sl-spacing-small);
    background: var(--sl-color-neutral-0);
    border-radius: var(--sl-border-radius-medium);
}

.help-text[b-wjf9wfco6g] {
    margin: 0;
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-600);
}

.customer-upload-panel h3[b-wjf9wfco6g] {
    margin: 0;
    font-size: var(--sl-font-size-large);
}

.customer-upload-panel__subtitle[b-wjf9wfco6g] {
    margin: 0;
    color: var(--sl-color-neutral-600);
    font-size: var(--sl-font-size-small);
}

.mini-drop-zone[b-wjf9wfco6g] {
    position: relative;
    border: 2px dashed var(--sl-color-neutral-300);
    border-radius: var(--sl-border-radius-large);
    padding: var(--sl-spacing-large);
    min-height: 220px;
    background: var(--sl-color-neutral-0);
    display: grid;
    justify-items: center;
    gap: var(--sl-spacing-small);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

#upload-empty-state[b-wjf9wfco6g] {
    margin-top: 56px;
}

.mini-drop-zone__content sl-icon[b-wjf9wfco6g]::part(svg) {
    width: 32px;
    height: 32px;
    color: var(--sl-color-neutral-500);
}

.mini-drop-zone__content p[b-wjf9wfco6g] {
    margin: 20px;
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-500);
}

.mini-drop-zone__preview[b-wjf9wfco6g] {
    display: grid;
    gap: var(--sl-spacing-small);
    justify-items: center;
}

.mini-drop-zone__preview img[b-wjf9wfco6g] {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--sl-border-radius-medium);
    box-shadow: var(--sl-shadow-small);
}

.mini-drop-zone.drag-over[b-wjf9wfco6g] {
    border-color: var(--sl-color-primary-500);
    background: var(--sl-color-primary-50);
}

.mini-drop-zone.has-preview[b-wjf9wfco6g] {
    border-color: var(--sl-color-neutral-200);
}

.preview-canvas[b-wjf9wfco6g] {
    position: relative;
    min-height: 360px;
    max-width: 100%;
    background: var(--sl-color-neutral-0);
    border-radius: var(--sl-border-radius-large);
    border: 1px solid var(--sl-color-neutral-200);
    display: grid;
    align-items: center;
    justify-items: center;
    padding: var(--sl-spacing-2x-large);
    overflow: hidden;
    box-sizing: border-box;
}

.preview-placeholder[b-wjf9wfco6g] {
    display: grid;
    gap: var(--sl-spacing-small);
    justify-items: center;
    color: var(--sl-color-neutral-500);
    text-align: center;
}

.preview-placeholder p[b-wjf9wfco6g] {
    margin-top: 28px;
}

.preview-placeholder sl-icon[b-wjf9wfco6g]::part(svg) {
    width: 48px;
    height: 48px;
}

.preview-progress[b-wjf9wfco6g] {
    display: grid;
    gap: var(--sl-spacing-medium);
    justify-items: center;
}

.preview-gallery[b-wjf9wfco6g] {
    width: 100%;
}

.preview-gallery__images[b-wjf9wfco6g] {
    display: grid;
    gap: var(--sl-spacing-large);
    max-width: 100%;
    justify-items: center;
}

.preview-image[b-wjf9wfco6g] {
    width: 100%;
    max-width: 420px;
    border-radius: var(--sl-border-radius-large);
    box-shadow: var(--sl-shadow-large);
}

.preview-meta[b-wjf9wfco6g] {
    display: grid;
    gap: var(--sl-spacing-medium);
}

.preview-actions[b-wjf9wfco6g] {
    display: inline-flex;
    gap: var(--sl-spacing-small);
    flex-wrap: wrap;
}

.history-card[b-wjf9wfco6g] {
    display: grid;
}

.history-header[b-wjf9wfco6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-list[b-wjf9wfco6g],
#history-list[b-wjf9wfco6g] {
    display: grid;
    gap: var(--sl-spacing-medium);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.history-entry[b-wjf9wfco6g] {
    border-radius: var(--sl-border-radius-large);
    padding: var(--sl-spacing-medium);
    background: var(--sl-color-neutral-0);
    border: 1px solid var(--sl-color-neutral-200);
    max-width: 100%;
    overflow: hidden;
}

.history-entry__meta pre[b-wjf9wfco6g],
.history-entry pre[b-wjf9wfco6g],
#history-list pre[b-wjf9wfco6g] {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-wrap: wrap !important;
    max-width: 100%;
    width: 100%;
    margin: var(--sl-spacing-small) 0 0;
    font-size: var(--sl-font-size-small);
    font-family: var(--sl-font-mono);
    color: var(--sl-color-neutral-700);
    overflow: hidden;
    box-sizing: border-box;
}

.history-entry__meta[b-wjf9wfco6g] {
    display: flex;
    justify-content: space-between;
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-500);
    text-wrap: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.hidden[b-wjf9wfco6g] {
    display: none !important;
}

/* 3. Utility Classes */
.sr-only[b-wjf9wfco6g] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* 4. Responsive */
@media (max-width: 1200px) {
    .page-container[b-wjf9wfco6g] {
        padding: var(--sl-spacing-2x-large) var(--sl-spacing-x-large);
    }

    .designer-layout[b-wjf9wfco6g] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-container[b-wjf9wfco6g] {
        padding: var(--sl-spacing-large);
    }

    .designer-form__header[b-wjf9wfco6g] {
        flex-direction: column;
        align-items: flex-start;
    }

    .designer-actions[b-wjf9wfco6g] {
        flex-direction: column;
        align-items: stretch;
    }

    .designer-actions .action-buttons[b-wjf9wfco6g] {
        width: 100%;
        justify-content: stretch;
    }

    .designer-actions .action-buttons sl-button[b-wjf9wfco6g] {
        flex: 1 1 auto;
    }

    .preview-layout[b-wjf9wfco6g] {
        grid-template-columns: 1fr;
        gap: var(--sl-spacing-large);
    }
}

#preview-images[b-wjf9wfco6g]  img.preview-image {
    width: 100%;
}

/* /Pages/Store/Admin/Products.cshtml.rz.scp.css */
/* Moved to wwwroot/css/products.css for non-isolated styling that applies to JS-injected content. */
/* /Pages/Store/Checkout/Cancel.cshtml.rz.scp.css */
/* Checkout Cancel Page Styles */

.checkout-cancel-container[b-r1ulueyoe6] {
    display: grid;
    min-height: 100vh;
    grid-template-rows: 1fr;
    padding: var(--sl-spacing-large);
    background: linear-gradient(135deg, var(--sl-color-warning-50) 0%, var(--sl-color-neutral-50) 100%);
}

.checkout-cancel-main[b-r1ulueyoe6] {
    display: grid;
    gap: var(--sl-spacing-large);
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.cancel-header[b-r1ulueyoe6] {
    text-align: center;
    padding: var(--sl-spacing-large);
}

.cancel-icon[b-r1ulueyoe6] {
    margin-bottom: var(--sl-spacing-medium);
}

.cancel-header h1[b-r1ulueyoe6] {
    font-size: var(--sl-font-size-2x-large);
    font-weight: var(--sl-font-weight-bold);
    color: var(--sl-color-neutral-900);
    margin: 0 0 var(--sl-spacing-small) 0;
}

.cancel-subtitle[b-r1ulueyoe6] {
    font-size: var(--sl-font-size-large);
    color: var(--sl-color-neutral-700);
    margin: 0;
}

.cancel-details[b-r1ulueyoe6] {
    display: grid;
    gap: var(--sl-spacing-medium);
}

.cancel-info-card[b-r1ulueyoe6] {
    background: var(--sl-color-neutral-0);
}

.cancel-explanation[b-r1ulueyoe6] {
    margin-bottom: var(--sl-spacing-large);
}

.cancel-actions h3[b-r1ulueyoe6] {
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-semibold);
    color: var(--sl-color-neutral-900);
    margin: 0 0 var(--sl-spacing-medium) 0;
}

.action-buttons[b-r1ulueyoe6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sl-spacing-medium);
    justify-items: center;
}

.help-section[b-r1ulueyoe6] {
    background: var(--sl-color-neutral-0);
    border-radius: var(--sl-border-radius-medium);
}

.help-content p[b-r1ulueyoe6] {
    margin: 0 0 var(--sl-spacing-medium) 0;
    color: var(--sl-color-neutral-700);
}

.help-options[b-r1ulueyoe6] {
    display: grid;
    gap: var(--sl-spacing-medium);
}

.help-option[b-r1ulueyoe6] {
    display: flex;
    align-items: flex-start;
    gap: var(--sl-spacing-medium);
}

.help-option sl-icon[b-r1ulueyoe6] {
    font-size: var(--sl-font-size-large);
    margin-top: var(--sl-spacing-2x-small);
}

.help-option div[b-r1ulueyoe6] {
    flex: 1;
}

.help-option strong[b-r1ulueyoe6] {
    display: block;
    margin-bottom: var(--sl-spacing-2x-small);
    color: var(--sl-color-neutral-900);
}

.help-option p[b-r1ulueyoe6] {
    margin: 0;
    color: var(--sl-color-neutral-700);
    font-size: var(--sl-font-size-small);
}

.help-option a[b-r1ulueyoe6] {
    color: var(--sl-color-primary-600);
    text-decoration: none;
}

.help-option a:hover[b-r1ulueyoe6] {
    text-decoration: underline;
}

.security-note[b-r1ulueyoe6] {
    margin-top: var(--sl-spacing-medium);
}

/* Responsive Design */
@media (max-width: 768px) {
    .checkout-cancel-container[b-r1ulueyoe6] {
        padding: var(--sl-spacing-medium);
    }
    
    .cancel-header[b-r1ulueyoe6] {
        padding: var(--sl-spacing-medium);
    }
    
    .cancel-header h1[b-r1ulueyoe6] {
        font-size: var(--sl-font-size-x-large);
    }
    
    .action-buttons[b-r1ulueyoe6] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Store/Checkout/Embedded.cshtml.rz.scp.css */
/* EMBEDDED CHECKOUT STYLES - THIS SHOULD APPEAR IN BUNDLE */
/* Embedded Checkout Page Styles */

.checkout-page[b-ljsp85fz6z] {
    padding: var(--sl-spacing-large) 0;
    flex: 1; /* Take up remaining space in flex container */
}

.checkout-header[b-ljsp85fz6z] {
    margin-bottom: var(--sl-spacing-x-large);
}

.checkout-breadcrumb a[b-ljsp85fz6z] {
    color: var(--sl-color-primary-600);
    text-decoration: none;
    font-weight: var(--sl-font-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: var(--sl-spacing-x-small);
}

.checkout-breadcrumb a:hover[b-ljsp85fz6z] {
    color: var(--sl-color-primary-700);
    text-decoration: underline;
}

.checkout-title[b-ljsp85fz6z] {
    font-size: var(--sl-font-size-2x-large);
    font-weight: var(--sl-font-weight-bold);
    color: var(--sl-color-neutral-900);
    margin: 0;
    text-align: center;
}

.checkout-content[b-ljsp85fz6z] {
    display: grid;
    gap: var(--sl-spacing-x-large);
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.checkout-main[b-ljsp85fz6z] {
    display: grid;
    gap: var(--sl-spacing-large);
}

/* Order Summary */
.order-summary[b-ljsp85fz6z] {
    background: var(--sl-color-neutral-0);
    border-radius: var(--sl-border-radius-medium);
    padding: var(--sl-spacing-x-large);
    border: 1px solid var(--sl-color-neutral-200);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    width: 100%;
    box-sizing: border-box;
}

.order-summary h2[b-ljsp85fz6z] {
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-semibold);
    color: var(--sl-color-neutral-900);
    margin: 0 0 var(--sl-spacing-medium) 0;
    padding-bottom: var(--sl-spacing-small);
    border-bottom: 1px solid var(--sl-color-neutral-200);
}

.order-items[b-ljsp85fz6z] {
    /* Container for all order items and loading states */
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-medium);
    min-height: 200px;
    width: 100%;
    overflow-x: hidden;
}

.loading-summary[b-ljsp85fz6z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sl-spacing-small);
    padding: var(--sl-spacing-large);
    color: var(--sl-color-neutral-600);
    min-height: 150px;
    justify-content: center;
}

.summary-item[b-ljsp85fz6z] {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: var(--sl-spacing-large);
    padding: var(--sl-spacing-large);
    border-bottom: 1px solid var(--sl-color-neutral-200);
    align-items: start;
    background: var(--sl-color-neutral-50);
    border-radius: var(--sl-border-radius-medium);
    margin-bottom: var(--sl-spacing-medium);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.summary-item:last-child[b-ljsp85fz6z] {
    border-bottom: none;
    margin-bottom: 0;
}

.summary-item-images[b-ljsp85fz6z] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-small);
}

.summary-item-image[b-ljsp85fz6z] {
    width: 80px;
    height: 80px;
    background: var(--sl-color-neutral-200);
    border-radius: var(--sl-border-radius-medium);
    background-size: cover;
    background-position: center;
    border: 2px solid var(--sl-color-neutral-300);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.summary-item-thumbnails[b-ljsp85fz6z] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-x-small);
}

.thumbnail-item[b-ljsp85fz6z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sl-spacing-2x-small);
}

.thumbnail-item img[b-ljsp85fz6z] {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--sl-border-radius-small);
    border: 1px solid var(--sl-color-neutral-300);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.thumbnail-label[b-ljsp85fz6z] {
    font-size: var(--sl-font-size-x-small);
    color: var(--sl-color-neutral-600);
    text-align: center;
    max-width: 60px;
    word-wrap: break-word;
    line-height: 1.2;
}

.summary-item-details[b-ljsp85fz6z] {
    min-width: 0; /* Allows flex item to shrink below content size */
}

.summary-item-details h4[b-ljsp85fz6z] {
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-bold);
    color: var(--sl-color-neutral-900);
    margin: 0 0 var(--sl-spacing-small) 0;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.summary-item-details p[b-ljsp85fz6z] {
    font-size: var(--sl-font-size-medium);
    color: var(--sl-color-neutral-700);
    margin: var(--sl-spacing-x-small) 0;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.summary-item-details .item-quantity[b-ljsp85fz6z] {
    font-weight: var(--sl-font-weight-semibold);
    color: var(--sl-color-primary-600);
}

.summary-item-price[b-ljsp85fz6z] {
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-bold);
    color: var(--sl-color-primary-600);
    text-align: right;
    background: var(--sl-color-primary-50);
    padding: var(--sl-spacing-small) var(--sl-spacing-medium);
    border-radius: var(--sl-border-radius-medium);
    border: 1px solid var(--sl-color-primary-200);
}

.summary-totals[b-ljsp85fz6z] {
    margin-top: var(--sl-spacing-large);
    padding: var(--sl-spacing-large);
    border-top: 2px solid var(--sl-color-neutral-300);
    background: var(--sl-color-neutral-25);
    border-radius: var(--sl-border-radius-medium);
}

.total-row[b-ljsp85fz6z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sl-spacing-medium);
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-medium);
    padding: var(--sl-spacing-small) 0;
}

.total-row.order-total[b-ljsp85fz6z] {
    font-size: var(--sl-font-size-x-large);
    font-weight: var(--sl-font-weight-bold);
    padding: var(--sl-spacing-large);
    margin-top: var(--sl-spacing-large);
    background: var(--sl-color-primary-50);
    border: 2px solid var(--sl-color-primary-300);
    border-radius: var(--sl-border-radius-medium);
    color: var(--sl-color-primary-700);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.total-row.order-total .total-amount[b-ljsp85fz6z] {
    background: var(--sl-color-primary-600);
    color: var(--sl-color-neutral-0);
    padding: var(--sl-spacing-small) var(--sl-spacing-medium);
    border-radius: var(--sl-border-radius-medium);
    font-weight: var(--sl-font-weight-bold);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    text-align: center;
    min-width: 80px;
}

.total-row:last-child[b-ljsp85fz6z] {
    margin-bottom: 0;
}

.total-final[b-ljsp85fz6z] {
    padding: var(--sl-spacing-medium);
    margin-top: var(--sl-spacing-medium);
    border-top: 2px solid var(--sl-color-primary-300);
    font-size: var(--sl-font-size-x-large);
    background: var(--sl-color-primary-50);
    border-radius: var(--sl-border-radius-medium);
    color: var(--sl-color-primary-700);
}

.free-shipping[b-ljsp85fz6z] {
    color: var(--sl-color-success-600);
    font-weight: var(--sl-font-weight-medium);
}

/* Shipping Section */
.shipping-section[b-ljsp85fz6z] {
    background: var(--sl-color-neutral-0);
    border-radius: var(--sl-border-radius-medium);
    padding: var(--sl-spacing-x-large);
    border: 1px solid var(--sl-color-neutral-200);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    width: 100%;
    box-sizing: border-box;
}

.shipping-section h2[b-ljsp85fz6z] {
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-semibold);
    color: var(--sl-color-neutral-900);
    margin: 0 0 var(--sl-spacing-medium) 0;
    padding-bottom: var(--sl-spacing-small);
    border-bottom: 1px solid var(--sl-color-neutral-200);
}

.shipping-form[b-ljsp85fz6z] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-medium);
}

.form-row[b-ljsp85fz6z] {
    display: flex;
    flex-direction: column;
}

.form-row-group[b-ljsp85fz6z] {
    display: grid;
    grid-template-columns: 1fr 120px 120px;
    gap: var(--sl-spacing-medium);
}

.shipping-form sl-input[data-invalid][b-ljsp85fz6z],
.shipping-form sl-select[data-invalid][b-ljsp85fz6z] {
    --sl-input-border-color: var(--sl-color-danger-600);
    --sl-input-border-color-focus: var(--sl-color-danger-600);
}

.shipping-form sl-checkbox[b-ljsp85fz6z] {
    margin-top: var(--sl-spacing-small);
}

/* Payment Section */
.payment-section[b-ljsp85fz6z] {
    background: var(--sl-color-neutral-0);
    border-radius: var(--sl-border-radius-medium);
    padding: var(--sl-spacing-x-large);
    border: 1px solid var(--sl-color-neutral-200);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    width: 100%;
    box-sizing: border-box;
}

.payment-section h2[b-ljsp85fz6z] {
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-semibold);
    color: var(--sl-color-neutral-900);
    margin: 0 0 var(--sl-spacing-medium) 0;
    padding-bottom: var(--sl-spacing-small);
    border-bottom: 1px solid var(--sl-color-neutral-200);
}

.payment-message[b-ljsp85fz6z] {
    margin-bottom: var(--sl-spacing-medium);
}

#payment-form[b-ljsp85fz6z] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-large);
}

#payment-element[b-ljsp85fz6z] {
    margin-bottom: var(--sl-spacing-medium);
    xmin-height: 400px; /* Accommodate billing address fields */
    width: 100%;
}

.payment-actions[b-ljsp85fz6z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sl-spacing-medium);
}

#submit-payment[b-ljsp85fz6z] {
    width: 100%;
    max-width: 300px;
}

#payment-loading[b-ljsp85fz6z] {
    display: none;
    align-items: center;
    gap: var(--sl-spacing-small);
    color: var(--sl-color-neutral-600);
    font-size: var(--sl-font-size-medium);
}

/* Security Badges */
.security-badges[b-ljsp85fz6z] {
    display: flex;
    justify-content: center;
    gap: var(--sl-spacing-large);
    margin-top: var(--sl-spacing-large);
    padding: var(--sl-spacing-medium);
    background: var(--sl-color-neutral-50);
    border-radius: var(--sl-border-radius-medium);
    border: 1px solid var(--sl-color-neutral-200);
}

.security-item[b-ljsp85fz6z] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-x-small);
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-700);
    font-weight: var(--sl-font-weight-medium);
}

/* Responsive Design */
@media (max-width: 768px) {
    .checkout-page[b-ljsp85fz6z] {
        padding: var(--sl-spacing-small) 0;
    }
    
    .checkout-header[b-ljsp85fz6z] {
        margin-bottom: var(--sl-spacing-large);
        padding: 0 var(--sl-spacing-medium);
    }
    
    .checkout-content[b-ljsp85fz6z] {
        padding: 0 var(--sl-spacing-medium);
        gap: var(--sl-spacing-medium);
    }
    
    .checkout-main[b-ljsp85fz6z] {
        gap: var(--sl-spacing-medium);
    }
    
    .order-summary[b-ljsp85fz6z],
    .shipping-section[b-ljsp85fz6z],
    .payment-section[b-ljsp85fz6z],
    .shipping-method-section[b-ljsp85fz6z] {
        padding: var(--sl-spacing-medium);
        margin-left: 0;
        margin-right: 0;
        border-radius: var(--sl-border-radius-small);
    }

    .order-summary h2[b-ljsp85fz6z],
    .shipping-section h2[b-ljsp85fz6z],
    .payment-section h2[b-ljsp85fz6z],
    .shipping-method-section h2[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-medium);
        margin-bottom: var(--sl-spacing-small);
    }

    .summary-item[b-ljsp85fz6z] {
        grid-template-columns: 60px 1fr;
        gap: var(--sl-spacing-medium);
        padding: var(--sl-spacing-medium);
        margin-bottom: var(--sl-spacing-small);
    }

    .summary-item-images[b-ljsp85fz6z] {
        gap: var(--sl-spacing-x-small);
    }

    .summary-item-image[b-ljsp85fz6z] {
        width: 60px;
        height: 60px;
    }

    .thumbnail-item img[b-ljsp85fz6z] {
        width: 50px;
        height: 50px;
    }

    .thumbnail-label[b-ljsp85fz6z] {
        font-size: 10px;
        max-width: 50px;
    }

    .summary-item-details h4[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-medium);
        margin-bottom: var(--sl-spacing-2x-small);
    }

    .summary-item-details p[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-small);
        margin: var(--sl-spacing-2x-small) 0;
    }

    .summary-item-price[b-ljsp85fz6z] {
        grid-column: 2;
        justify-self: end;
        margin-top: var(--sl-spacing-small);
        font-size: var(--sl-font-size-medium);
        padding: var(--sl-spacing-2x-small) var(--sl-spacing-small);
    }

    .summary-totals[b-ljsp85fz6z] {
        padding: var(--sl-spacing-medium);
        margin-top: var(--sl-spacing-medium);
    }

    .total-row[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-medium);
        margin-bottom: var(--sl-spacing-small);
        padding: var(--sl-spacing-2x-small) 0;
    }

    .total-row.order-total[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-large);
        padding: var(--sl-spacing-medium);
        margin-top: var(--sl-spacing-medium);
    }

    .total-row.order-total .total-amount[b-ljsp85fz6z] {
        padding: var(--sl-spacing-2x-small) var(--sl-spacing-small);
        min-width: 70px;
        font-size: var(--sl-font-size-large);
    }

    .form-row-group[b-ljsp85fz6z] {
        grid-template-columns: 1fr;
        gap: var(--sl-spacing-small);
    }

    #payment-element[b-ljsp85fz6z] {
        xmin-height: 300px;
    }

    #submit-payment[b-ljsp85fz6z] {
        max-width: 100%;
    }

    .security-badges[b-ljsp85fz6z] {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--sl-spacing-small);
        padding: var(--sl-spacing-small);
    }

    .security-item[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-x-small);
    }

    .checkout-title[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-x-large);
    }
}

@media (max-width: 480px) {
    .checkout-page[b-ljsp85fz6z] {
        padding: var(--sl-spacing-2x-small) 0;
    }

    .checkout-header[b-ljsp85fz6z] {
        padding: 0 var(--sl-spacing-small);
        margin-bottom: var(--sl-spacing-medium);
    }

    .checkout-content[b-ljsp85fz6z] {
        padding: 0 var(--sl-spacing-small);
        gap: var(--sl-spacing-small);
    }
    
    .order-summary[b-ljsp85fz6z],
    .shipping-section[b-ljsp85fz6z],
    .payment-section[b-ljsp85fz6z],
    .shipping-method-section[b-ljsp85fz6z] {
        padding: var(--sl-spacing-small);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .order-summary h2[b-ljsp85fz6z],
    .shipping-section h2[b-ljsp85fz6z],
    .payment-section h2[b-ljsp85fz6z],
    .shipping-method-section h2[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-small);
        padding-bottom: var(--sl-spacing-2x-small);
    }
    
    .summary-item[b-ljsp85fz6z] {
        grid-template-columns: 1fr;
        gap: var(--sl-spacing-small);
        padding: var(--sl-spacing-small);
        margin-bottom: var(--sl-spacing-2x-small);
    }

    .summary-item-images[b-ljsp85fz6z] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sl-spacing-x-small);
        margin-bottom: var(--sl-spacing-small);
    }

    .summary-item-image[b-ljsp85fz6z] {
        width: 100%;
        height: 120px;
        max-width: 200px;
    }

    .summary-item-thumbnails[b-ljsp85fz6z] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--sl-spacing-x-small);
        max-width: 200px;
    }

    .thumbnail-item[b-ljsp85fz6z] {
        flex-direction: column;
    }

    .thumbnail-item img[b-ljsp85fz6z] {
        width: 45px;
        height: 45px;
    }

    .thumbnail-label[b-ljsp85fz6z] {
        font-size: 9px;
        max-width: 45px;
    }

    .summary-item-details[b-ljsp85fz6z] {
        text-align: center;
    }

    .summary-item-details h4[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-small);
    }

    .summary-item-details p[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-x-small);
    }

    .summary-item-price[b-ljsp85fz6z] {
        justify-self: center;
        grid-column: 1;
        margin-top: var(--sl-spacing-2x-small);
        font-size: var(--sl-font-size-small);
    }

    .summary-totals[b-ljsp85fz6z] {
        padding: var(--sl-spacing-small);
        margin-top: var(--sl-spacing-small);
    }

    .total-row[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-small);
        flex-wrap: wrap;
    }

    .total-row.order-total[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-medium);
        padding: var(--sl-spacing-small);
        margin-top: var(--sl-spacing-small);
    }

    .total-row.order-total .total-amount[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-medium);
        padding: var(--sl-spacing-2x-small) var(--sl-spacing-small);
    }

    .shipping-form[b-ljsp85fz6z] {
        gap: var(--sl-spacing-small);
    }

    #payment-element[b-ljsp85fz6z] {
        xmin-height: 250px;
    }

    .payment-actions[b-ljsp85fz6z] {
        gap: var(--sl-spacing-small);
    }

    #payment-loading[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-small);
    }

    .security-badges[b-ljsp85fz6z] {
        flex-direction: column;
        align-items: center;
        gap: var(--sl-spacing-2x-small);
        padding: var(--sl-spacing-2x-small);
    }

    .security-item[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-x-small);
    }
    
    .checkout-title[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-large);
    }
}

/* Shipping Method Section */
.shipping-method-section[b-ljsp85fz6z] {
    background: var(--sl-color-neutral-0);
    border: 1px solid var(--sl-color-neutral-200);
    border-radius: var(--sl-border-radius-medium);
    padding: var(--sl-spacing-x-large);
    margin-bottom: var(--sl-spacing-large);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    width: 100%;
    box-sizing: border-box;
}

.shipping-method-section h2[b-ljsp85fz6z] {
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-semibold);
    color: var(--sl-color-neutral-900);
    margin: 0 0 var(--sl-spacing-medium) 0;
    padding-bottom: var(--sl-spacing-small);
    border-bottom: 1px solid var(--sl-color-neutral-200);
}

.shipping-methods[b-ljsp85fz6z] {
    display: grid;
    gap: var(--sl-spacing-small);
}

.shipping-methods sl-radio-group[b-ljsp85fz6z] {
    width: 100% !important;
    display: block !important;
}

.shipping-method-option[b-ljsp85fz6z] {
    border: 1px solid var(--sl-color-neutral-200);
    border-radius: var(--sl-border-radius-medium);
    padding: var(--sl-spacing-medium);
    transition: all 0.2s ease;
    cursor: pointer;
    background: var(--sl-color-neutral-50);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.shipping-method-option:hover[b-ljsp85fz6z] {
    border-color: var(--sl-color-primary-300);
    background: var(--sl-color-primary-50);
}

.shipping-method-option:has(sl-radio[checked])[b-ljsp85fz6z] {
    border-color: var(--sl-color-primary-600);
    background: var(--sl-color-primary-50);
}

.shipping-method-radio[b-ljsp85fz6z] {
    width: 100% !important;
    display: block !important;
}

.shipping-method-radio[b-ljsp85fz6z]::part(base) {
    width: 100% !important;
    display: flex !important;
}

.shipping-method-radio[b-ljsp85fz6z]::part(control) {
    margin-right: var(--sl-spacing-small) !important;
    flex-shrink: 0 !important;
}

.shipping-method-radio[b-ljsp85fz6z]::part(label) {
    width: 100% !important;
    flex: 1 !important;
}

.shipping-method-details[b-ljsp85fz6z] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-left: var(--sl-spacing-medium);
    flex-wrap: nowrap !important;
}

.shipping-method-info[b-ljsp85fz6z] {
    flex: 1;
    min-width: 0; /* Allows flex item to shrink below its content size */
}

.shipping-method-info strong[b-ljsp85fz6z] {
    display: block;
    color: var(--sl-color-neutral-900);
    font-weight: var(--sl-font-weight-semibold);
    margin-bottom: var(--sl-spacing-2x-small);
}

.shipping-method-description[b-ljsp85fz6z] {
    color: var(--sl-color-neutral-600);
    font-size: var(--sl-font-size-small);
}

.shipping-method-price[b-ljsp85fz6z] {
    font-weight: var(--sl-font-weight-bold);
    color: var(--sl-color-primary-600);
    font-size: var(--sl-font-size-medium);
    background: var(--sl-color-primary-50);
    padding: var(--sl-spacing-small) var(--sl-spacing-medium);
    border-radius: var(--sl-border-radius-medium);
    border: 1px solid var(--sl-color-primary-200);
    text-align: center;
    min-width: 80px;
    flex-shrink: 0 !important;
    margin-left: var(--sl-spacing-medium) !important;
}

.loading-shipping[b-ljsp85fz6z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sl-spacing-medium);
    padding: var(--sl-spacing-large);
    color: var(--sl-color-neutral-600);
}

.shipping-error[b-ljsp85fz6z] {
    margin-top: var(--sl-spacing-medium);
}

/* Order Summary Updates - shipping line item inherits from .total-row styling */

/* Responsive Design for Shipping Methods */
@media (max-width: 768px) {
    .shipping-method-option[b-ljsp85fz6z] {
        padding: var(--sl-spacing-small);
    }

    .shipping-method-details[b-ljsp85fz6z] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--sl-spacing-small);
        margin-left: var(--sl-spacing-small);
    }

    .shipping-method-info strong[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-small);
    }

    .shipping-method-description[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-x-small);
    }
    
    .shipping-method-price[b-ljsp85fz6z] {
        align-self: flex-end !important;
        min-width: 80px;
        margin-left: 0 !important;
        margin-top: var(--sl-spacing-2x-small) !important;
        font-size: var(--sl-font-size-small);
        padding: var(--sl-spacing-2x-small) var(--sl-spacing-small);
    }
}

@media (max-width: 480px) {
    .shipping-method-option[b-ljsp85fz6z] {
        padding: var(--sl-spacing-2x-small);
    }

    .shipping-method-details[b-ljsp85fz6z] {
        margin-left: var(--sl-spacing-2x-small);
    }

    .shipping-method-info strong[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-x-small);
        margin-bottom: var(--sl-spacing-3x-small);
    }

    .shipping-method-description[b-ljsp85fz6z] {
        font-size: 10px;
        line-height: 1.3;
    }

    .shipping-method-price[b-ljsp85fz6z] {
        font-size: var(--sl-font-size-x-small);
        min-width: 60px;
        padding: var(--sl-spacing-3x-small) var(--sl-spacing-2x-small);
    }
}
/* /Pages/Store/Checkout/Success.cshtml.rz.scp.css */
/* Checkout Success Page Styles */

.page-container[b-ww4nctiyoa] {
    display: grid;
    gap: var(--sl-spacing-large);
    padding: var(--sl-spacing-large);
    background: linear-gradient(135deg, var(--sl-color-success-50) 0%, var(--sl-color-primary-50) 100%);
    border-radius: var(--sl-border-radius-large);
    margin: var(--sl-spacing-medium);
    min-height: calc(100vh - 2 * var(--sl-spacing-medium));
}

.page-main[b-ww4nctiyoa] {
    display: grid;
    gap: var(--sl-spacing-large);
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.success-header[b-ww4nctiyoa] {
    text-align: center;
    padding: var(--sl-spacing-medium) 0;
}

.success-icon[b-ww4nctiyoa] {
    margin-bottom: var(--sl-spacing-medium);
}

.success-header h1[b-ww4nctiyoa] {
    font-size: var(--sl-font-size-2x-large);
    font-weight: var(--sl-font-weight-bold);
    color: var(--sl-color-neutral-900);
    margin: 0 0 var(--sl-spacing-small) 0;
}

.success-subtitle[b-ww4nctiyoa] {
    font-size: var(--sl-font-size-large);
    color: var(--sl-color-neutral-700);
    margin: 0;
}

.order-details[b-ww4nctiyoa] {
    display: grid;
    gap: var(--sl-spacing-medium);
}

.order-summary-card[b-ww4nctiyoa],
.order-items-card[b-ww4nctiyoa],
.order-totals-card[b-ww4nctiyoa],
.shipping-info sl-card[b-ww4nctiyoa],
.support-info sl-card[b-ww4nctiyoa] {
    background: var(--sl-color-neutral-0);
    --sl-panel-border-width: 1px;
    --sl-panel-border-color: var(--sl-color-neutral-200);
}

.order-info[b-ww4nctiyoa] {
    display: grid;
    gap: var(--sl-spacing-small);
    margin-bottom: var(--sl-spacing-medium);
}

.order-info > div[b-ww4nctiyoa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sl-spacing-small);
    border-bottom: 1px solid var(--sl-color-neutral-200);
}

.order-info > div:last-child[b-ww4nctiyoa] {
    border-bottom: none;
}

.order-status[b-ww4nctiyoa] {
    margin-top: var(--sl-spacing-medium);
}

/* Order Items List Styles */
.order-items-list[b-ww4nctiyoa] {
    display: grid;
    gap: var(--sl-spacing-medium);
}

.order-item[b-ww4nctiyoa] {
    display: grid;
    grid-template-columns: 100px 1fr auto auto;
    gap: var(--sl-spacing-medium);
    padding: var(--sl-spacing-medium);
    border-bottom: 1px solid var(--sl-color-neutral-200);
    align-items: start;
}

.order-item:last-child[b-ww4nctiyoa] {
    border-bottom: none;
}

.order-item-image[b-ww4nctiyoa] {
    width: 100px;
    height: 100px;
    border-radius: var(--sl-border-radius-medium);
    overflow: hidden;
    background: var(--sl-color-neutral-100);
}

.order-item-image img[b-ww4nctiyoa] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-item-details[b-ww4nctiyoa] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-2x-small);
}

.order-item-title[b-ww4nctiyoa] {
    font-size: var(--sl-font-size-medium);
    font-weight: var(--sl-font-weight-semibold);
    color: var(--sl-color-neutral-900);
    margin: 0;
}

.order-item-description[b-ww4nctiyoa] {
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-600);
    margin: 0;
    line-height: 1.4;
}

.order-item-sku[b-ww4nctiyoa] {
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-500);
    margin: 0;
}

.order-item-quantity[b-ww4nctiyoa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sl-spacing-2x-small);
    padding: var(--sl-spacing-small);
    background: var(--sl-color-neutral-50);
    border-radius: var(--sl-border-radius-medium);
    min-width: 60px;
}

.quantity-label[b-ww4nctiyoa] {
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-600);
    font-weight: var(--sl-font-weight-semibold);
}

.quantity-value[b-ww4nctiyoa] {
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-bold);
    color: var(--sl-color-neutral-900);
}

.order-item-pricing[b-ww4nctiyoa] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sl-spacing-2x-small);
    min-width: 100px;
}

.unit-price[b-ww4nctiyoa] {
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-600);
}

.line-price[b-ww4nctiyoa] {
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-bold);
    color: var(--sl-color-neutral-900);
}

/* Order Totals Styles */
.order-totals[b-ww4nctiyoa] {
    display: grid;
    gap: var(--sl-spacing-small);
}

.total-row[b-ww4nctiyoa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sl-spacing-small);
    font-size: var(--sl-font-size-medium);
}

.total-row.discount[b-ww4nctiyoa] {
    color: var(--sl-color-success-600);
}

.total-row.grand-total[b-ww4nctiyoa] {
    border-top: 2px solid var(--sl-color-neutral-300);
    margin-top: var(--sl-spacing-small);
    padding-top: var(--sl-spacing-medium);
    font-size: var(--sl-font-size-large);
}

.next-steps[b-ww4nctiyoa] {
    display: grid;
    gap: var(--sl-spacing-medium);
}

.action-buttons[b-ww4nctiyoa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sl-spacing-medium);
    justify-items: center;
}

/* Shipping and support sections use sl-card styling */

.shipping-details[b-ww4nctiyoa],
.support-options[b-ww4nctiyoa] {
    display: grid;
    gap: var(--sl-spacing-medium);
    padding: var(--sl-spacing-medium);
}

.shipping-method[b-ww4nctiyoa],
.guarantee[b-ww4nctiyoa],
.support-option[b-ww4nctiyoa] {
    display: flex;
    align-items: flex-start;
    gap: var(--sl-spacing-medium);
}

.shipping-method sl-icon[b-ww4nctiyoa],
.guarantee sl-icon[b-ww4nctiyoa],
.support-option sl-icon[b-ww4nctiyoa] {
    font-size: var(--sl-font-size-large);
    margin-top: var(--sl-spacing-2x-small);
}

.shipping-method div[b-ww4nctiyoa],
.guarantee div[b-ww4nctiyoa],
.support-option div[b-ww4nctiyoa] {
    flex: 1;
}

.shipping-method strong[b-ww4nctiyoa],
.guarantee strong[b-ww4nctiyoa],
.support-option strong[b-ww4nctiyoa] {
    display: block;
    margin-bottom: var(--sl-spacing-2x-small);
    color: var(--sl-color-neutral-900);
}

.shipping-method p[b-ww4nctiyoa],
.guarantee p[b-ww4nctiyoa],
.support-option p[b-ww4nctiyoa] {
    margin: 0;
    color: var(--sl-color-neutral-700);
    font-size: var(--sl-font-size-small);
}

.support-option a[b-ww4nctiyoa] {
    color: var(--sl-color-primary-600);
    text-decoration: none;
}

.support-option a:hover[b-ww4nctiyoa] {
    text-decoration: underline;
}

/* Error Section Styles */
.error-section[b-ww4nctiyoa] {
    text-align: center;
    padding: var(--sl-spacing-large);
    display: grid;
    gap: var(--sl-spacing-medium);
    justify-items: center;
}

.error-icon[b-ww4nctiyoa] {
    margin-bottom: var(--sl-spacing-small);
}

.error-section h1[b-ww4nctiyoa] {
    font-size: var(--sl-font-size-2x-large);
    color: var(--sl-color-warning-600);
    margin: 0;
}

.error-subtitle[b-ww4nctiyoa] {
    font-size: var(--sl-font-size-large);
    color: var(--sl-color-neutral-700);
    margin: 0 0 var(--sl-spacing-medium) 0;
    max-width: 600px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .page-container[b-ww4nctiyoa] {
        margin: var(--sl-spacing-small);
        padding: var(--sl-spacing-medium);
    }
    
    .page-main[b-ww4nctiyoa] {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .page-container[b-ww4nctiyoa] {
        margin: 0;
        padding: var(--sl-spacing-medium);
        border-radius: 0;
        min-height: 100vh;
    }
    
    .success-header[b-ww4nctiyoa] {
        padding: var(--sl-spacing-small) 0;
    }
    
    .success-header h1[b-ww4nctiyoa] {
        font-size: var(--sl-font-size-x-large);
    }
    
    .action-buttons[b-ww4nctiyoa] {
        grid-template-columns: 1fr;
        gap: var(--sl-spacing-small);
    }
    
    .order-info > div[b-ww4nctiyoa] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sl-spacing-2x-small);
        padding: var(--sl-spacing-small);
    }
    
    .order-item[b-ww4nctiyoa] {
        grid-template-columns: 80px 1fr;
        gap: var(--sl-spacing-small);
    }
    
    .order-item-quantity[b-ww4nctiyoa] {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        min-width: 80px;
    }
    
    .order-item-pricing[b-ww4nctiyoa] {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
    
    .shipping-details[b-ww4nctiyoa],
    .support-options[b-ww4nctiyoa] {
        padding: var(--sl-spacing-small);
    }
    
    .error-section[b-ww4nctiyoa] {
        padding: var(--sl-spacing-medium);
    }
    
    .error-section h1[b-ww4nctiyoa] {
        font-size: var(--sl-font-size-x-large);
    }
}

@media (max-width: 480px) {
    .page-container[b-ww4nctiyoa] {
        padding: var(--sl-spacing-small);
    }
    
    .page-main[b-ww4nctiyoa] {
        gap: var(--sl-spacing-medium);
    }
    
    .success-header h1[b-ww4nctiyoa] {
        font-size: var(--sl-font-size-large);
    }
    
    .success-subtitle[b-ww4nctiyoa] {
        font-size: var(--sl-font-size-medium);
    }
    
    .order-item[b-ww4nctiyoa] {
        grid-template-columns: 1fr;
        gap: var(--sl-spacing-small);
    }
    
    .order-item-image[b-ww4nctiyoa] {
        width: 100%;
        height: 200px;
    }
    
    .order-item-quantity[b-ww4nctiyoa],
    .order-item-pricing[b-ww4nctiyoa] {
        grid-column: 1 / 2;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }
    
    .shipping-method[b-ww4nctiyoa],
    .guarantee[b-ww4nctiyoa],
    .support-option[b-ww4nctiyoa] {
        flex-direction: column;
        gap: var(--sl-spacing-small);
        text-align: center;
    }
    
    .shipping-method sl-icon[b-ww4nctiyoa],
    .guarantee sl-icon[b-ww4nctiyoa],
    .support-option sl-icon[b-ww4nctiyoa] {
        margin-top: 0;
        align-self: center;
    }
    
    .error-section[b-ww4nctiyoa] {
        padding: var(--sl-spacing-small);
    }
    
    .error-section h1[b-ww4nctiyoa] {
        font-size: var(--sl-font-size-large);
    }
    
    .error-subtitle[b-ww4nctiyoa] {
        font-size: var(--sl-font-size-medium);
    }
}
/* /Pages/Store/Product.cshtml.rz.scp.css */
/* High-Converting Product Page Styles */

:root[b-u6rwlq8uya]{
  --brand-50:#eef6ff; --brand-100:#dbeafe; --brand-200:#bfdbfe; --brand-300:#93c5fd; --brand-400:#60a5fa; --brand-500:#3b82f6; --brand-600:#2563eb; --brand-700:#1d4ed8; --brand-800:#1e40af; --brand-900:#1e3a8a;
  --accent:#10b981; /* used for success/guarantee */
  --danger:#ef4444; /* used for errors */
  --text:#0f172a; --muted:#475569; --line:#e2e8f0; --bg:#ffffff; --bg-muted:#f8fafc;
  --radius:16px;
  --shadow:0 10px 25px rgba(2,6,23,.08), 0 2px 8px rgba(2,6,23,.06);
  --container:1200px;
}

/* Prevent horizontal overflow on mobile */
@media (max-width: 768px) {
  *[b-u6rwlq8uya] {
    max-width: 100vw;
    box-sizing: border-box;
  }
}

*[b-u6rwlq8uya], *[b-u6rwlq8uya]::before, *[b-u6rwlq8uya]::after{ box-sizing:border-box; }
html[b-u6rwlq8uya], body[b-u6rwlq8uya]{ height:100%; }
body[b-u6rwlq8uya]{ margin:0; font:16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color:var(--text); background:var(--bg); }
img[b-u6rwlq8uya]{ max-width:100%; display:block; }
a[b-u6rwlq8uya]{ color:var(--brand-700); text-decoration:none; }
a:hover[b-u6rwlq8uya]{ text-decoration:underline; }
.container[b-u6rwlq8uya]{ max-width:var(--container); margin-inline:auto; padding:24px; }

/* Draft Banner */
.draft-banner[b-u6rwlq8uya] {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-bottom: 1px solid #fbbf24;
    font-size: 0.875rem;
    font-weight: 600;
    color: #92400e;
    min-height: 32px;
}

.draft-banner-text[b-u6rwlq8uya] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.draft-banner-publish[b-u6rwlq8uya] {
    appearance: none;
    border: 1px solid #d97706;
    background: #fff;
    color: #92400e;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 3px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.draft-banner-publish:hover[b-u6rwlq8uya] {
    background: #fffbeb;
    border-color: #b45309;
}

@media (max-width: 768px) {
    .draft-banner[b-u6rwlq8uya] {
        font-size: 0.75rem;
        padding: 5px 8px;
        gap: 8px;
        min-height: 28px;
    }
    
    .draft-banner-publish[b-u6rwlq8uya] {
        font-size: 0.7rem;
        padding: 2px 8px;
    }
}

/* Header / Breadcrumb */
.breadcrumb[b-u6rwlq8uya]{ 
    font-size:.875rem; 
    color:var(--muted); 
    display:flex; 
    gap:8px; 
    flex-wrap:wrap;
    margin-bottom: 20px;
    margin-top: 12px;
}
.breadcrumb a[b-u6rwlq8uya]{ 
    color:inherit; 
    transition: color 0.2s;
}
.breadcrumb a:hover[b-u6rwlq8uya] {
    color: var(--brand-600);
    text-decoration: none;
}
.breadcrumb a:last-child[b-u6rwlq8uya] {
    font-weight: 600;
    color: var(--text);
}

/* Product grid */
.product[b-u6rwlq8uya]{ 
    display:grid; 
    grid-template-columns: .9fr 1.1fr; 
    gap:20px; 
    align-items:start; 
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 var(--sl-spacing-medium);
}
@media (max-width: 980px){ 
    .product[b-u6rwlq8uya]{ 
        grid-template-columns:1fr; 
        gap: 20px;
        padding: 0px;
    } 
}
@media (max-width: 768px) {
    .product[b-u6rwlq8uya] {
        padding: 0px;
        gap: 0; /*var(--sl-spacing-medium);*/
    }
}

/* Gallery */
.gallery[b-u6rwlq8uya]{ 
    position:relative; 
    width: 100%;
    box-sizing: border-box;
    padding: var(--sl-spacing-medium);
}
.main-image[b-u6rwlq8uya]{ 
    width:100%; 
    max-width: 500px;
    aspect-ratio: 1;
    border-radius:var(--radius); 
    background:#e5e7eb; 
    box-shadow:var(--shadow); 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0 auto;
}

.main-image-img[b-u6rwlq8uya] {
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
}

.thumbs[b-u6rwlq8uya]{ 
    margin-top:12px; 
    display:grid; 
    grid-template-columns: repeat(6, 1fr); 
    gap:10px; 
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .main-image[b-u6rwlq8uya] {
        max-width: 100%;
        width: 100%;
        margin: 0;
        aspect-ratio: 1;
    }
    
    .thumbs[b-u6rwlq8uya] {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .main-image[b-u6rwlq8uya] {
        max-width: 100%;
        width: 100%;
        margin: 0;
        aspect-ratio: 1;
    }

    .thumbs[b-u6rwlq8uya] {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
        max-width: 100%;
        width: 100%;
    }
}
.thumb[b-u6rwlq8uya]{ 
    border:1px solid var(--line); 
    background:#fff center/cover no-repeat; 
    aspect-ratio:1; 
    border-radius:12px; 
    cursor:pointer; 
    position:relative; 
    width: 100%;
    height: auto;
    max-width: 80px;
    max-height: 80px;
    min-width: 0;
    min-height: 0;
}
.thumb[aria-selected="true"][b-u6rwlq8uya]{ outline:2px solid var(--brand-600); outline-offset:2px; }

/* Summary */
.summary[b-u6rwlq8uya] {
    width: 100%;
    box-sizing: border-box;
    padding: 0 var(--sl-spacing-medium);
}

.summary h1[b-u6rwlq8uya]{ 
    font-size: clamp(1.75rem, 3.5vw, 2.5rem); 
    line-height:1.2; 
    margin:0 0 12px; 
    word-wrap: break-word;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.subhead[b-u6rwlq8uya]{ 
    color:var(--muted); 
    font-size:.95rem; 
    margin-bottom:10px; 
    word-wrap: break-word;
}

/* Product quick info panel */
.product-quick-info[b-u6rwlq8uya] {
    display: grid;
    /*
    gap: var(--sl-spacing-medium);
    padding: var(--sl-spacing-large);
    background: var(--bg-muted);
    border-radius: var(--sl-border-radius-large, 18px);
    border: 1px solid var(--line);
    */
}

.product-quick-info__rating[b-u6rwlq8uya] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-small);
    font-size: 0.95rem;
}

.product-quick-info__rating sl-rating[b-u6rwlq8uya]::part(base) {
    color: var(--brand-500);
}

.product-quick-info__rating sl-rating[b-u6rwlq8uya]::part(inactive-symbol) {
    color: var(--sl-color-neutral-300);
}

.product-quick-info__rating-score[b-u6rwlq8uya] {
    font-weight: 700;
    font-size: 1.1rem;
}

.product-quick-info__rating-count[b-u6rwlq8uya] {
    color: var(--muted);
}

.product-quick-info__price[b-u6rwlq8uya] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-small);
}

.product-quick-info__price-main[b-u6rwlq8uya] {
    display: flex;
    align-items: baseline;
    gap: var(--sl-spacing-medium);
    flex-wrap: wrap;
}

.product-quick-info__price-value[b-u6rwlq8uya] {
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--text);
}

.product-quick-info__price-compare[b-u6rwlq8uya] {
    color: var(--muted);
    text-decoration: line-through;
    font-size: 1rem;
}

.product-quick-info__price sl-badge[b-u6rwlq8uya]::part(base) {
    background: var(--accent);
    color: #fff;
    letter-spacing: 0.03em;
}

.product-quick-info__location[b-u6rwlq8uya] {
    display: inline-flex;
    align-items: center;
    gap: var(--sl-spacing-small);
    font-size: 0.95rem;
    color: var(--text);
}

.product-quick-info__location sl-icon[b-u6rwlq8uya] {
    color: var(--brand-600);
    font-size: 1.1rem;
}

.product-quick-info__shipping-grid[b-u6rwlq8uya] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sl-spacing-medium);
    margin-top: 12px;
}

    .product-quick-info__shipping-grid slot[b-u6rwlq8uya] {
        padding: 6px 12px;
    }

.product-quick-info__shipping-card[b-u6rwlq8uya]::part(base) {
    border-radius: var(--sl-border-radius-large, 16px);
    border: 1px solid var(--line);
    background: var(--bg-muted);
    box-shadow: none;
    padding: 0px;
}

.product-quick-info__shipping-name[b-u6rwlq8uya] {
    font-weight: 700;
    margin-bottom: var(--sl-spacing-x-small);
}

.product-quick-info__shipping-window[b-u6rwlq8uya] {
    color: var(--muted);
    font-size: 0.95rem;
}

.product-quick-info sl-divider[b-u6rwlq8uya]::part(base) {
    border-color: var(--line);
}

.product-quick-info__bundle[b-u6rwlq8uya]::part(base) {
    border-radius: var(--sl-border-radius-large, 18px);
    border: 1px solid rgba(16, 185, 129, 0.15);
    background: linear-gradient(135deg, #fff 0%, rgba(16, 185, 129, 0.06) 100%);
    box-shadow: none;
    padding: var(--sl-spacing-large);
    display: none;
}

.product-quick-info__bundle-header[b-u6rwlq8uya] {
    display: flex;
    align-items: flex-start;
    gap: var(--sl-spacing-small);
    margin-bottom: var(--sl-spacing-small);
    color: var(--brand-700);
}

.product-quick-info__bundle-header sl-icon[b-u6rwlq8uya] {
    font-size: 1.4rem;
    color: var(--brand-500);
}

.product-quick-info__bundle-title[b-u6rwlq8uya] {
    font-weight: 700;
}

.product-quick-info__bundle-subtitle[b-u6rwlq8uya] {
    font-size: 0.85rem;
    color: var(--muted);
}

.product-quick-info__bundle-list[b-u6rwlq8uya] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sl-spacing-x-small);
    font-size: 0.95rem;
    color: var(--text);
}

.product-quick-info__bundle-list li[b-u6rwlq8uya] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-small);
}

.product-quick-info__bundle-icon[b-u6rwlq8uya] {
    color: var(--brand-500);
    font-size: 1.25rem;
}

.product-quick-info__bundle-footnote[b-u6rwlq8uya] {
    display: block;
    margin-top: var(--sl-spacing-small);
    font-size: 0.8rem;
    color: var(--muted);
}

@media (max-width: 768px) {
    .product-quick-info[b-u6rwlq8uya] {
        padding: var(--sl-spacing-medium);
    }

    .product-quick-info__price-main[b-u6rwlq8uya] {
        gap: var(--sl-spacing-small);
    }
}

@media (max-width: 768px) {
    .summary[b-u6rwlq8uya] {
        padding: 0 var(--sl-spacing-small);
    }
}

.urgency[b-u6rwlq8uya]{ background:var(--bg-muted); border:1px solid var(--line); padding:10px 12px; border-radius:12px; display:grid; gap:8px; }
.countdown[b-u6rwlq8uya]{ font-weight:600; }
.stock[b-u6rwlq8uya]{ 
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bar[b-u6rwlq8uya]{ background:#e5e7eb; height:8px; border-radius:999px; overflow:hidden; }
.bar > span[b-u6rwlq8uya]{ display:block; height:100%; background:linear-gradient(90deg, var(--brand-500), var(--brand-700)); width:40%; }
.stock small[b-u6rwlq8uya]{ color:var(--muted); }

.opts[b-u6rwlq8uya]{ 
    margin:16px 0; 
    display:grid; 
    gap:14px; 
    width: 100%;
    box-sizing: border-box;
}

.labelrow[b-u6rwlq8uya]{ 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    gap:8px; 
    flex-wrap: wrap;
}

.labelrow .help[b-u6rwlq8uya]{ 
    font-size:.9rem; 
    color:var(--brand-700); 
    cursor:pointer; 
    white-space: nowrap;
}

.swatches[b-u6rwlq8uya]{ 
    display:flex; 
    gap:10px; 
    flex-wrap:wrap; 
    width: 100%;
    box-sizing: border-box;
}

.swatch[b-u6rwlq8uya]{ 
    width:34px; 
    height:34px; 
    border-radius:999px; 
    border:2px solid #fff; 
    box-shadow:0 0 0 1px var(--line); 
    cursor:pointer; 
    position:relative; 
    flex-shrink: 0;
}

.swatch[aria-pressed="true"][b-u6rwlq8uya]{ 
    box-shadow:0 0 0 2px var(--brand-600), 0 0 0 1px #fff inset; 
}

.swatch[title][b-u6rwlq8uya]{ 
    outline:0; 
}

.sizes[b-u6rwlq8uya]{ 
    display:flex; 
    gap:8px; 
    flex-wrap:wrap; 
    width: 100%;
    box-sizing: border-box;
}

.chip[b-u6rwlq8uya]{ 
    padding:10px 14px; 
    min-width:42px; 
    text-align:center; 
    border:1px solid var(--line); 
    border-radius:12px; 
    background:#fff; 
    cursor:pointer; 
    font-weight:600; 
    flex-shrink: 0;
}

.chip[disabled][b-u6rwlq8uya]{ 
    opacity:.4; 
    cursor:not-allowed; 
}

.chip[aria-pressed="true"][b-u6rwlq8uya]{ 
    outline:2px solid var(--brand-600); 
    outline-offset:2px; 
}

.qtyrow[b-u6rwlq8uya]{ 
    display:flex; 
    gap:12px; 
    align-items:center; 
    flex-wrap: wrap;
}

.qty[b-u6rwlq8uya]{ 
    display:inline-flex; 
    border:1px solid var(--line); 
    border-radius:12px; 
    overflow:hidden; 
    flex-shrink: 0;
    height: 44px;
}

.qty button[b-u6rwlq8uya]{ 
    width:40px; 
    height:40px; 
    border:0; 
    background:#fff; 
    cursor:pointer; 
    font-size:18px; 
}

.qty input[b-u6rwlq8uya]{ 
    width:56px; 
    height:40px; 
    border:0; 
    text-align:center; 
    font-size:15px; 
}

.cta[b-u6rwlq8uya] {
    display: grid;
    grid-template-columns: 0.3fr 1fr;
    gap: 10px;
    margin: 6px 0 2px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 640px){ 
    .cta[b-u6rwlq8uya]{ 
        grid-template-columns: 1fr; 
    }
    
    .cta .btn.primary[b-u6rwlq8uya] {
        width: 100%;
    }
    
    .labelrow[b-u6rwlq8uya] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .qtyrow[b-u6rwlq8uya] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Hide the entire qty control on small screens to simplify mobile UI */
    .qty[b-u6rwlq8uya] {
        display: none !important;
    }
}
.btn[b-u6rwlq8uya]{ 
    appearance:none; 
    border:0; 
    cursor:pointer; 
    border-radius:12px; 
    font-weight:700; 
    padding:16px 24px; 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    gap:8px;
    font-size: 1.05rem;
    transition: all 0.2s ease;
}
.btn.primary[b-u6rwlq8uya]{ 
    background:linear-gradient(180deg, var(--brand-500), var(--brand-600)); 
    color:#fff; 
    box-shadow:0 4px 12px rgba(37, 99, 235, 0.3), 0 2px 4px rgba(37, 99, 235, 0.2);
}
.btn.primary:hover[b-u6rwlq8uya] {
    transform: translateY(-2px);
    box-shadow:0 6px 20px rgba(37, 99, 235, 0.4), 0 4px 8px rgba(37, 99, 235, 0.2);
}
.btn.primary:active[b-u6rwlq8uya] {
    transform: translateY(0);
}
.btn.primary:disabled[b-u6rwlq8uya]{ opacity:.6; cursor:not-allowed; }
.btn.buy[b-u6rwlq8uya]{ background:#111827; color:#fff; }
.btn.stripe-checkout[b-u6rwlq8uya]{ background:linear-gradient(180deg, #635bff, #5a52e5); color:#fff; box-shadow:var(--shadow); }
.btn.stripe-checkout:hover[b-u6rwlq8uya]{ background:linear-gradient(180deg, #5a52e5, #4f46e5); }
.btn.stripe-checkout:disabled[b-u6rwlq8uya]{ opacity:.6; cursor:not-allowed; }

.trust[b-u6rwlq8uya]{ 
    display:flex; 
    gap:12px; 
    flex-wrap:wrap; 
    margin-top:12px; 
    color:#0f5132; 
    background:#ecfdf5; 
    border:1px solid #bbf7d0; 
    padding:12px 14px; 
    border-radius:12px; 
    align-items:center;
    font-size: 0.95rem;
}
.trust svg[b-u6rwlq8uya]{ width:18px; height:18px; }

.payments[b-u6rwlq8uya]{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:.9rem; }
.payicon[b-u6rwlq8uya]{ padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; }

.bullets[b-u6rwlq8uya]{ 
    margin:18px 0; 
    display:grid; 
    gap:10px; 
}
.bullets li[b-u6rwlq8uya]{ 
    list-style:none; 
    padding-left:28px; 
    position:relative;
    font-size: 0.95rem;
    line-height: 1.5;
}
.bullets li[b-u6rwlq8uya]:before{ 
    content:"✓"; 
    position:absolute; 
    left:0; 
    top:0; 
    color:#059669; 
    font-weight:900;
    font-size: 1.1rem;
}

/* Sections */
.section[b-u6rwlq8uya]{ 
    margin-top:40px; 
    padding: 0 var(--sl-spacing-medium);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
    left: 0;
    right: 0;
}

.section h2[b-u6rwlq8uya]{ 
    font-size: clamp(1.35rem, 2.8vw, 1.75rem); 
    margin:0 0 20px; 
    word-wrap: break-word;
    font-weight: 700;
    letter-spacing: -0.01em;
}


@media (max-width: 768px) {
    .section[b-u6rwlq8uya] {
        padding: 0 var(--sl-spacing-small);
        max-width: 100vw;
        overflow-x: hidden;
        position: relative;
    }
    
}

@media (max-width: 480px) {
    .section[b-u6rwlq8uya] {
        padding: 0 var(--sl-spacing-small);
    }
}

details[b-u6rwlq8uya]{ border:1px solid var(--line); border-radius:12px; background:#fff; }
details + details[b-u6rwlq8uya]{ margin-top:10px; }
summary[b-u6rwlq8uya]{ list-style:none; padding:14px 16px; cursor:pointer; font-weight:700; }
summary[b-u6rwlq8uya]::-webkit-details-marker{ display:none; }
details .content[b-u6rwlq8uya]{ padding:0 16px 14px; color:#334155; }

/* Cross-sell */
.grid[b-u6rwlq8uya]{ 
    display:grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap:18px; 
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 980px){ 
    .grid[b-u6rwlq8uya]{ 
        grid-template-columns: repeat(2, 1fr); 
    } 
}

@media (max-width: 480px) {
    .grid[b-u6rwlq8uya] {
        grid-template-columns: 1fr;
    }
}

.tile[b-u6rwlq8uya]{ 
    border:1px solid var(--line); 
    border-radius:16px; 
    overflow:hidden; 
    background:#fff; 
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    cursor: pointer;
}

.tile:hover[b-u6rwlq8uya] {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--brand-300);
}

.tile .ph[b-u6rwlq8uya]{ 
    aspect-ratio: 1; 
    background:#e5e7eb center/cover; 
    object-fit: cover;
}

.tile .info[b-u6rwlq8uya]{ 
    padding:10px 12px; 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    gap:10px; 
}

.tile .info span[b-u6rwlq8uya]{ 
    font-weight:600; 
}

/* Reviews */
.reviews[b-u6rwlq8uya]{ 
    display:grid; 
    gap:16px; 
    width: 100%;
    box-sizing: border-box;
    padding: var(--sl-spacing-large);
    background: var(--bg-muted);
    border-radius: 16px;
    border: 1px solid var(--line);
}

.review[b-u6rwlq8uya]{ 
    border:1px solid var(--line); 
    border-radius:14px; 
    padding:16px; 
    background:#fff; 
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.review .meta[b-u6rwlq8uya]{ 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    gap:10px; 
    color:var(--muted); 
    font-size:.9rem; 
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.review .meta strong[b-u6rwlq8uya] {
    color: var(--text);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.review .meta strong[b-u6rwlq8uya]::before {
    content: "⭐";
    font-size: 1rem;
}

/* Sticky mobile bar */
.stickybar[b-u6rwlq8uya]{ 
    position:fixed; 
    left:0; 
    right:0; 
    bottom:0; 
    background:rgba(255,255,255,.96); 
    backdrop-filter:saturate(1.2) blur(6px); 
    border-top:1px solid var(--line); 
    padding:10px 12px; 
    display:none; 
    gap:10px; 
    align-items:center; 
    z-index:50; 
    box-sizing: border-box;
    max-width: 100vw;
    overflow: hidden;
}

@media (max-width: 980px){ 
    .stickybar[b-u6rwlq8uya]{ 
        display:flex; 
    } 
}

.stickybar .title[b-u6rwlq8uya]{ 
    font-weight:700; 
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stickybar .price[b-u6rwlq8uya]{ 
    margin-left:auto; 
    font-weight:700; 
    flex-shrink: 0;
}

.stickybar .btn[b-u6rwlq8uya]{ 
    padding:10px 14px; 
    flex-shrink: 0;
}

/* Size Guide Modal */
.modal[b-u6rwlq8uya]{ 
    position:fixed; 
    inset:0; 
    background:rgba(15,23,42,.5); 
    display:none; 
    align-items:center; 
    justify-content:center; 
    z-index:60; 
    padding: var(--sl-spacing-medium);
    box-sizing: border-box;
}

.modal[open][b-u6rwlq8uya]{ 
    display:flex; 
}

.dialog[b-u6rwlq8uya]{ 
    background:#fff; 
    width:min(640px, 100%); 
    max-height: 90vh;
    border-radius:16px; 
    overflow:hidden; 
    box-shadow:var(--shadow); 
    box-sizing: border-box;
}

.dialog header[b-u6rwlq8uya]{ 
    padding:12px 16px; 
    font-weight:800; 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    border-bottom:1px solid var(--line); 
}

.dialog .body[b-u6rwlq8uya]{ 
    padding:14px 16px; 
    overflow-y: auto;
    max-height: calc(90vh - 60px);
}

.dialog table[b-u6rwlq8uya]{ 
    width:100%; 
    border-collapse:collapse; 
    font-size:.95rem; 
}

.dialog th[b-u6rwlq8uya], .dialog td[b-u6rwlq8uya]{ 
    border-bottom:1px solid var(--line); 
    padding:8px 6px; 
    text-align:center; 
}

@media (max-width: 480px) {
    .dialog[b-u6rwlq8uya] {
        width: 95vw;
        max-height: 95vh;
    }
    
    .dialog th[b-u6rwlq8uya], .dialog td[b-u6rwlq8uya] {
        padding: 6px 4px;
        font-size: 0.85rem;
    }
}

/* Toast */
.toast[b-u6rwlq8uya]{ position:fixed; left:50%; transform:translateX(-50%); bottom:90px; background:#111827; color:#fff; padding:12px 16px; border-radius:12px; box-shadow:var(--shadow); display:none; z-index:70; }

/* Unavailable variant styles */
.swatch.unavailable[b-u6rwlq8uya],
.chip.unavailable[b-u6rwlq8uya] {
    opacity: 0.3;
    cursor: not-allowed;
    position: relative;
}

.swatch.unavailable[b-u6rwlq8uya]::after,
.chip.unavailable[b-u6rwlq8uya]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 1px;
    background: #ef4444;
    transform: translateY(-50%) rotate(-45deg);
}

.swatch.unavailable:hover[b-u6rwlq8uya],
.chip.unavailable:hover[b-u6rwlq8uya] {
    transform: none;
    box-shadow: none;
}

/* Out of stock button styles */
.btn:disabled[b-u6rwlq8uya] {
    background: #9ca3af !important;
    color: #fff !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

/* Helpers */
.muted[b-u6rwlq8uya]{ color:var(--muted); }
.sr-only[b-u6rwlq8uya]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Personalization Section */
.personalization-section[b-u6rwlq8uya] {
    margin-top: var(--sl-spacing-large);
    padding: var(--sl-spacing-x-large);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(59, 130, 246, 0.08) 100%);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

.personalization-header[b-u6rwlq8uya] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-small);
    margin-bottom: var(--sl-spacing-large);
    color: var(--brand-700);
    font-size: 1.15rem;
    font-weight: 700;
}

.personalization-header sl-icon[b-u6rwlq8uya] {
    font-size: 1.5rem;
    color: var(--brand-500);
}

.personalization-field[b-u6rwlq8uya] {
    margin-bottom: var(--sl-spacing-medium);
}

.personalization-field:last-child[b-u6rwlq8uya] {
    margin-bottom: 0;
}

.personalization-field sl-input[b-u6rwlq8uya],
.personalization-field sl-select[b-u6rwlq8uya],
.personalization-field sl-color-picker[b-u6rwlq8uya] {
    width: 100%;
}

.personalization-field sl-input[b-u6rwlq8uya]::part(base),
.personalization-field sl-select[b-u6rwlq8uya]::part(combobox),
.personalization-field sl-textarea[b-u6rwlq8uya]::part(base) {
    border-radius: 12px;
    border-color: var(--sl-color-neutral-300);
}

.personalization-field sl-input[b-u6rwlq8uya]::part(base):focus-within,
.personalization-field sl-select[b-u6rwlq8uya]::part(combobox):focus-within,
.personalization-field sl-textarea[b-u6rwlq8uya]::part(base):focus-within {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.personalization-field sl-input[b-u6rwlq8uya]::part(help-text),
.personalization-field sl-select[b-u6rwlq8uya]::part(help-text),
.personalization-field sl-textarea[b-u6rwlq8uya]::part(help-text) {
    color: var(--sl-color-neutral-500);
    font-size: 0.875rem;
    font-style: italic;
}

.attribute-field sl-input[b-u6rwlq8uya]::part(help-text),
.attribute-field sl-select[b-u6rwlq8uya]::part(help-text),
.attribute-field sl-textarea[b-u6rwlq8uya]::part(help-text) {
    color: var(--sl-color-neutral-500);
    font-size: 0.875rem;
    font-style: italic;
}

@media (max-width: 768px) {
    .personalization-section[b-u6rwlq8uya] {
        padding: var(--sl-spacing-large);
        margin-top: var(--sl-spacing-medium);
    }
}

/* How It Works Section */
.how-it-works[b-u6rwlq8uya] {
    scroll-margin-top: 20px;
}

.how-it-works h2[b-u6rwlq8uya] {
    text-align: center;
    margin-bottom: 48px;
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}

.how-it-works-steps[b-u6rwlq8uya] {
    display: grid;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
}

.how-it-works-step[b-u6rwlq8uya] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

/* Alternating layout for desktop */
.how-it-works-step-reverse[b-u6rwlq8uya] {
    direction: rtl;
}

.how-it-works-step-reverse > *[b-u6rwlq8uya] {
    direction: ltr;
}

.how-it-works-step-image[b-u6rwlq8uya] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#step1[b-u6rwlq8uya] {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.how-it-works-step:hover .how-it-works-step-image img[b-u6rwlq8uya] {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.how-it-works-step-content[b-u6rwlq8uya] {
    position: relative;
    padding: 24px;
    border: solid 10px var(--store-accent-1);
    border-radius: 16px;
    background-color: white;
}

.how-it-works-step-number[b-u6rwlq8uya] {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    z-index: 1;
}

.how-it-works-step-title[b-u6rwlq8uya] {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 700;
    margin: 0 0 16px 80px;
    color: var(--text);
    letter-spacing: -0.01em;
}

.how-it-works-step-list[b-u6rwlq8uya] {
    list-style: none;
    margin: 0;
    padding: 0 0 0 80px;
    display: grid;
    gap: 12px;
}

.how-it-works-step-list li[b-u6rwlq8uya] {
    position: relative;
    padding-left: 32px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--muted);
}

.how-it-works-step-list li[b-u6rwlq8uya]::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent);
    font-weight: 900;
    font-size: 1.25rem;
}

/* Mobile Layout: Stack vertically (image then text) */
@media (max-width: 980px) {
    .how-it-works-steps[b-u6rwlq8uya] {
        gap: 48px;
    }

    .how-it-works-step[b-u6rwlq8uya],
    .how-it-works-step-reverse[b-u6rwlq8uya] {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: 24px;
    }

    .how-it-works-step-reverse > *[b-u6rwlq8uya] {
        direction: ltr;
    }

    /* Image always comes first on mobile */
    .how-it-works-step-image[b-u6rwlq8uya] {
        order: 1;
        padding: 0;
    }

    .how-it-works-step-content[b-u6rwlq8uya] {
        order: 2;
        padding: 16px;
    }

    .how-it-works-step-number[b-u6rwlq8uya] {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .how-it-works-step-title[b-u6rwlq8uya] {
        margin-left: 70px;
        font-size: 1.25rem;
    }

    .how-it-works-step-list[b-u6rwlq8uya] {
        padding-left: 70px;
    }

    .how-it-works-step-list li[b-u6rwlq8uya] {
        padding-left: 28px;
        font-size: 0.95rem;
    }
}

@media (max-width: 640px) {
    .how-it-works h2[b-u6rwlq8uya] {
        margin-bottom: 32px;
    }

    .how-it-works-steps[b-u6rwlq8uya] {
        gap: 40px;
    }

    .how-it-works-step-image img[b-u6rwlq8uya] {
        max-width: 300px;
    }

    .how-it-works-step-content[b-u6rwlq8uya] {
        padding: 8px;
    }

    .how-it-works-step-number[b-u6rwlq8uya] {
        width: 45px;
        height: 45px;
        font-size: 1.35rem;
    }

    .how-it-works-step-title[b-u6rwlq8uya] {
        margin-left: 60px;
        font-size: 1.15rem;
    }

    .how-it-works-step-list[b-u6rwlq8uya] {
        padding-left: 60px;
        gap: 10px;
    }

    .how-it-works-step-list li[b-u6rwlq8uya] {
        padding-left: 24px;
        font-size: 0.9rem;
    }

    .how-it-works-step-list li[b-u6rwlq8uya]::before {
        font-size: 1.1rem;
    }
}

/* Transformations Section */
.transformations[b-u6rwlq8uya] { 
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.02) 0%, rgba(15, 23, 42, 0.01) 100%);
  padding: 48px 0 36px;
}
.transformations .container[b-u6rwlq8uya] { max-width: 1100px; padding: 0 16px; }
.transformations h2[b-u6rwlq8uya] {
  text-align: center;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  margin: 0 0 8px;
  font-weight: 900;
  color: var(--text);
}
.transform-subhead[b-u6rwlq8uya] {
  text-align: center;
  color: var(--brand-700);
  margin: 0 0 28px;
  font-size: 1.05rem;
}
.transform-grid[b-u6rwlq8uya] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 36px;
  align-items: center;
  justify-items: center;
  margin: 0 auto;
}
.transform-pair[b-u6rwlq8uya] {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  gap: 12px;
  align-items: center;
  width: 100%;
  max-width: 520px;
}
.transform-card[b-u6rwlq8uya] {
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 12px;
  box-shadow: 0 8px 24px rgba(2,6,23,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.transform-card.before[b-u6rwlq8uya] { padding: 18px; }
.transform-card.after[b-u6rwlq8uya] { padding: 20px; background: linear-gradient(180deg, #fff 0%, rgba(59,130,246,0.03) 100%); }
.transform-label[b-u6rwlq8uya] { font-weight: 800; margin-bottom: 8px; color: var(--text); }
.transform-img[b-u6rwlq8uya] { width: 100%; max-width: 220px; height: auto; display:flex; align-items:center; justify-content:center; }
/* Ensure SVG inherits color and scales nicely */
.transform-arrow svg[b-u6rwlq8uya] { width: 64px; height: 64px; display: block; color: var(--store-accent-1, var(--brand-500)); }
.transform-arrow svg path[b-u6rwlq8uya] { fill: currentColor; }
.transform-footer[b-u6rwlq8uya] { display:flex; justify-content:center; margin-top: 28px; }
.transform-footer img[b-u6rwlq8uya] { height: 44px; opacity: 0.95; }

@media (max-width: 980px) {
  .transform-grid[b-u6rwlq8uya] { grid-template-columns: 1fr; gap: 20px; }
  .transform-pair[b-u6rwlq8uya] { grid-template-columns: 1fr 36px 1fr; max-width: 680px; }
  .transform-img[b-u6rwlq8uya] { max-width: 260px; }
}

@media (max-width: 480px) {
  .transform-pair[b-u6rwlq8uya] { grid-template-columns: 1fr; gap: 12px; max-width: 100%; }
  .transform-arrow[b-u6rwlq8uya] { display:none; }
  .transform-img[b-u6rwlq8uya] { max-width: 100%; }
}

/* Larger/thicker arrow on hover */
@media (prefers-reduced-motion: no-preference) {
  .transform-pair:hover .transform-arrow svg[b-u6rwlq8uya] { transform: translateY(-6px) scale(1.05); filter: drop-shadow(0 8px 24px rgba(59,130,246,0.08)); transition: transform 200ms ease, filter 200ms ease; }
}

/* Make arrow slightly bigger on medium screens */
@media (min-width: 1200px) {
  .transform-arrow svg[b-u6rwlq8uya] { width: 64px; height: 64px; }
}

.transform-arrow[b-u6rwlq8uya] { margin-left: -10px; }
.cta-hero[b-u6rwlq8uya] {
    background: white;
    border-radius: 20px;
    text-align: center;
}
#createPosterBtn[b-u6rwlq8uya] {
    width: 300px;
    max-width: 100%;
}
/* /Pages/Store/Products.cshtml.rz.scp.css */
/* Styles for /Products page - Products.cshtml */
.store-products-page[b-q5t4hyh5ki] {
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  color: var(--sl-color-gray-900, #111827);
}

.page-header[b-q5t4hyh5ki] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.page-header h1[b-q5t4hyh5ki] {
  margin: 0;
  font-size: 1.5rem;
}

.actions a.btn[b-q5t4hyh5ki] {
  text-decoration: none;
}

.products-list .empty[b-q5t4hyh5ki] {
  padding: 2rem;
  text-align: center;
  color: var(--sl-color-neutral-700, #6b7280);
}

/* Custom gridjs theme overrides */
.gridjs-table[b-q5t4hyh5ki] {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--sl-color-neutral-200, #e5e7eb);
  background: var(--sl-color-neutral-0, #fff);
  font-family: inherit;
  color: var(--sl-color-gray-900, #111827);
}

.gridjs-th[b-q5t4hyh5ki] {
  background: var(--sl-color-primary-50, #eef2ff);
  color: var(--sl-color-primary-700, #4338ca);
  font-weight: 600;
  border-bottom: 1px solid var(--sl-color-primary-200, #c7d2fe);
  padding: 0.75rem 0.5rem;
}

.gridjs-td[b-q5t4hyh5ki] {
  background: var(--sl-color-neutral-0, #fff);
  color: var(--sl-color-gray-900, #111827);
  border-bottom: 1px solid var(--sl-color-neutral-100, #f3f4f6);
  padding: 0.7rem 0.5rem;
}

.gridjs-tr[b-q5t4hyh5ki] {
  transition: background 0.15s;
}

.gridjs-tr:hover .gridjs-td[b-q5t4hyh5ki] {
  background: var(--sl-color-primary-25, #f5f7ff);
}

.gridjs-footer[b-q5t4hyh5ki] {
  background: var(--sl-color-neutral-50, #f9fafb);
  border-top: 1px solid var(--sl-color-neutral-100, #f3f4f6);
}

.gridjs-search[b-q5t4hyh5ki] {
  margin-bottom: 1rem;
}

.gridjs-pagination .gridjs-pages button[b-q5t4hyh5ki] {
  background: var(--sl-color-primary-50, #eef2ff);
  color: var(--sl-color-primary-700, #4338ca);
  border: 1px solid var(--sl-color-primary-200, #c7d2fe);
  border-radius: 6px;
  margin: 0 2px;
  padding: 0.3rem 0.7rem;
  font-size: 0.95rem;
  transition: background 0.15s, color 0.15s;
}

.gridjs-pagination .gridjs-pages button.active[b-q5t4hyh5ki],
.gridjs-pagination .gridjs-pages button:focus[b-q5t4hyh5ki] {
  background: var(--sl-color-primary-600, #6366f1);
  color: #fff;
  border-color: var(--sl-color-primary-600, #6366f1);
}

.gridjs-search input[b-q5t4hyh5ki] {
  border: 1px solid var(--sl-color-primary-200, #c7d2fe);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  font-size: 1rem;
  background: var(--sl-color-neutral-0, #fff);
  color: var(--sl-color-gray-900, #111827);
}

.gridjs-sort[b-q5t4hyh5ki] {
  color: var(--sl-color-primary-600, #6366f1);
}

.gridjs-table img[b-q5t4hyh5ki] {
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  border-radius: 6px;
  background: var(--sl-color-neutral-100, #f3f4f6);
}

@media (max-width: 640px) {
  .page-header[b-q5t4hyh5ki] {
    flex-direction: column;
    align-items: flex-start;
  }

  .products-grid[b-q5t4hyh5ki] {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px) {
  .products-grid[b-q5t4hyh5ki] {
    grid-template-columns: 1fr;
  }
}
/* /Pages/TikTok.cshtml.rz.scp.css */
/* TikTok Management Page Styles */
.tiktok-management-container[b-9rj2521j4a] {
    display: grid;
    gap: var(--sl-spacing-large);
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--sl-spacing-large);
}

.page-header[b-9rj2521j4a] {
    text-align: center;
    margin-bottom: var(--sl-spacing-large);
}

.page-title[b-9rj2521j4a] {
    color: var(--sl-color-primary-600);
    margin: var(--sl-spacing-medium) 0 var(--sl-spacing-small) 0;
    font-size: var(--sl-font-size-2x-large);
    font-weight: 700;
}

.page-description[b-9rj2521j4a] {
    color: var(--sl-color-neutral-600);
    font-size: var(--sl-font-size-medium);
    margin: 0;
}

.page-main[b-9rj2521j4a] {
    display: grid;
    gap: var(--sl-spacing-large);
}

/* Status Card */
.status-card[b-9rj2521j4a] {
    border-radius: var(--sl-border-radius-large);
}

.card-header[b-9rj2521j4a] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-small);
    font-weight: 600;
}

.platform-icon[b-9rj2521j4a] {
    font-size: 1.5rem;
    color: var(--sl-color-primary-600);
}

.connected-status[b-9rj2521j4a],
.disconnected-status[b-9rj2521j4a] {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-medium);
    padding: var(--sl-spacing-medium);
}

.status-icon[b-9rj2521j4a] {
    font-size: 2rem;
    flex-shrink: 0;
}

.status-icon.success[b-9rj2521j4a] {
    color: var(--sl-color-success-600);
}

.status-icon.error[b-9rj2521j4a] {
    color: var(--sl-color-danger-600);
}

.status-info h3[b-9rj2521j4a] {
    margin: 0 0 var(--sl-spacing-x-small) 0;
    color: var(--sl-color-neutral-900);
    font-size: var(--sl-font-size-large);
}

.status-info p[b-9rj2521j4a] {
    margin: var(--sl-spacing-x-small) 0;
    color: var(--sl-color-neutral-600);
    font-size: var(--sl-font-size-small);
}

.card-actions[b-9rj2521j4a] {
    display: flex;
    gap: var(--sl-spacing-small);
    flex-wrap: wrap;
}

/* Account Info Card */
.account-info-card[b-9rj2521j4a] {
    border-radius: var(--sl-border-radius-large);
}

.loading-state[b-9rj2521j4a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sl-spacing-small);
    padding: var(--sl-spacing-large);
    color: var(--sl-color-neutral-600);
}

.account-stats[b-9rj2521j4a] {
    display: grid;
    gap: var(--sl-spacing-medium);
}

.stat-item[b-9rj2521j4a] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--sl-spacing-small) 0;
    border-bottom: 1px solid var(--sl-color-neutral-200);
}

.stat-item:last-child[b-9rj2521j4a] {
    border-bottom: none;
}

.stat-item.bio-item[b-9rj2521j4a] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sl-spacing-x-small);
}

.stat-label[b-9rj2521j4a] {
    font-weight: 600;
    color: var(--sl-color-neutral-700);
    font-size: var(--sl-font-size-small);
}

.stat-value[b-9rj2521j4a] {
    color: var(--sl-color-neutral-900);
    font-size: var(--sl-font-size-medium);
    text-align: right;
}

.bio-item .stat-value[b-9rj2521j4a] {
    text-align: left;
    word-wrap: break-word;
    max-width: 100%;
}

/* Content Creation Grid */
.content-creation-grid[b-9rj2521j4a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--sl-spacing-large);
}

.creation-card[b-9rj2521j4a],
.bio-card[b-9rj2521j4a] {
    border-radius: var(--sl-border-radius-large);
}

.creation-card h3[b-9rj2521j4a],
.bio-card h3[b-9rj2521j4a] {
    margin: 0 0 var(--sl-spacing-x-small) 0;
    color: var(--sl-color-neutral-900);
    font-size: var(--sl-font-size-large);
}

.creation-card p[b-9rj2521j4a] {
    margin: 0;
    color: var(--sl-color-neutral-600);
    font-size: var(--sl-font-size-small);
}

.creation-card form[b-9rj2521j4a],
.bio-card form[b-9rj2521j4a] {
    display: grid;
    gap: var(--sl-spacing-medium);
    margin: var(--sl-spacing-medium) 0;
}

/* Media Preview */
.media-preview[b-9rj2521j4a] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--sl-spacing-medium);
    border: 2px dashed var(--sl-color-neutral-300);
    border-radius: var(--sl-border-radius-medium);
    background-color: var(--sl-color-neutral-50);
}

.media-preview img[b-9rj2521j4a],
.media-preview video[b-9rj2521j4a] {
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--sl-border-radius-medium);
    box-shadow: var(--sl-shadow-small);
}

/* Bio Card */
.bio-card[b-9rj2521j4a] {
    grid-column: 1 / -1;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .tiktok-management-container[b-9rj2521j4a] {
        padding: var(--sl-spacing-medium);
        gap: var(--sl-spacing-medium);
    }
    
    .content-creation-grid[b-9rj2521j4a] {
        grid-template-columns: 1fr;
        gap: var(--sl-spacing-medium);
    }
    
    .connected-status[b-9rj2521j4a],
    .disconnected-status[b-9rj2521j4a] {
        flex-direction: column;
        text-align: center;
        gap: var(--sl-spacing-small);
    }
    
    .status-icon[b-9rj2521j4a] {
        font-size: 1.5rem;
    }
    
    .card-actions[b-9rj2521j4a] {
        justify-content: center;
    }
    
    .stat-item[b-9rj2521j4a] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sl-spacing-x-small);
    }
    
    .stat-value[b-9rj2521j4a] {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .page-title[b-9rj2521j4a] {
        font-size: var(--sl-font-size-x-large);
    }
    
    .creation-card[b-9rj2521j4a],
    .bio-card[b-9rj2521j4a],
    .account-info-card[b-9rj2521j4a],
    .status-card[b-9rj2521j4a] {
        margin: 0 calc(var(--sl-spacing-medium) * -1);
    }
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    .media-preview[b-9rj2521j4a] {
        background-color: var(--sl-color-neutral-800);
        border-color: var(--sl-color-neutral-600);
    }
    
    .stat-item[b-9rj2521j4a] {
        border-bottom-color: var(--sl-color-neutral-700);
    }
}