@import url('https://fonts.googleapis.com/css2?family=Titan+One&display=swap');

/* === Main Layout === */

/* === Reset === */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    font-size: 16px;
    overflow-x: hidden;
    font-family: Arial, sans-serif; /* optional global font */
    background-color: #0a0e27;
    color: #7c8ff0;
}

#outer_block {
    min-width: 100%;
    min-height: 100vh;
}

#centered_block {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-bottom: 250px;
    width: 100%;
    min-width: 0;
}

/* When the design/dashboard studio is active, lock the page to viewport height
   so the canvas editor fills the screen without a scrollbar */

body.studio-active,
body.studio-active #outer_block {
    height: 100vh;
    overflow: hidden;
}

body.studio-active #centered_block {
    margin-bottom: 0;
    overflow: hidden;
    height: 100%;
}

.landing-wrapper {
    width: 100%;
    min-width: 300px;
    max-width: 1000px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    padding-top: 2rem;
    gap: 0.5rem;
}

/*h1*/
#mainTitle {
    color: #667eea;
    font-family: 'Titan One', sans-serif;
    padding: 10px 0;
    font-weight: bolder;
}


.main-header-card{
    background: linear-gradient(135deg, #12172e 0%, #1e2647 100%);
    border-radius: 16px;
    padding: 60px 40px;
    margin: 24px 0;
    text-align: center;
    min-height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.main-header-title{
    font-size: 2.5rem;
    color: #8a90b8;
    margin-bottom: 16px;
    font-weight: 700;
    font-family: 'Titan One', sans-serif;
}

.main-header-content{
    max-width: 700px;
    margin: 0 auto;
}

.main-header-cta {
    display: inline-block;
    padding: 14px 36px;
    background: linear-gradient(135deg, #764ba2, #667eea);
    color: white;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}



.main-header-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

/* === Dashboard Header (extends main-header-card) === */
.dashboard-header {
    padding: 40px 40px 30px;
}

.dashboard-store-info {
    max-width: 560px;
    margin: 20px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.dashboard-info-label {
    flex: 0 0 90px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #7c8ff0;
}

.dashboard-info-value {
    font-size: 0.95rem;
    color: #e0e0e0;
    font-weight: 500;
}

.dashboard-link-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.dashboard-link-code {
    flex: 1;
    background: rgba(17, 22, 40, 0.7);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #d0d8e0;
    color: #7c8ff0;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow-x: auto;
    min-width: 0;
    scrollbar-width: thin;
}

.dashboard-link-code::-webkit-scrollbar {
    height: 4px;
}

.dashboard-link-code::-webkit-scrollbar-thumb {
    background: #c0c8d0;
    border-radius: 4px;
}

.dashboard-copy-btn {
    flex-shrink: 0;
    background: #764ba2;
    border: none;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.dashboard-copy-btn:hover {
    background: #5568d3;
}

.dashboard-header-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
    flex-wrap: wrap;
}

/* === Edit Account Modal === */
.edit-account-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}

.edit-account-modal {
    background: #111628;
    border-radius: 20px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.edit-account-header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 22px 76px 22px 28px;
    background: linear-gradient(135deg, #764ba2, #667eea);
    color: white;
}

.edit-account-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    margin: 0;
    text-align: center;
    width: 100%;
}

.edit-account-close {
    z-index: 2;
}

.edit-account-body {
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: #2d3561 transparent;
}

.edit-account-body::-webkit-scrollbar {
    width: 6px;
}

.edit-account-body::-webkit-scrollbar-track {
    background: transparent;
}

.edit-account-body::-webkit-scrollbar-thumb {
    background: #2d3561;
    border-radius: 3px;
}

/* Section labels (Profile, Store Bio, Social Links) */
.edit-account-section-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #7c8ff0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 10px 0 4px;
    margin-top: 4px;
    border-bottom: 2px solid #1e2647;
}

.edit-account-section-label:first-child {
    margin-top: 0;
    padding-top: 0;
}

/* Individual field group */
.edit-account-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.edit-account-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.edit-account-input-row {
    display: flex;
    gap: 8px;
}

.edit-account-input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid #2d3561;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #e0e0e0;
    background: #f0f2f4;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    min-width: 0;
    font-family: inherit;
}

.edit-account-input:not([readonly]):not(:disabled) {
    border-color: #764ba2;
    background: #111628;
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Field buttons (Edit / Save) */
.edit-account-field-btn {
    flex-shrink: 0;
    padding: 10px 18px;
    margin: auto;
    border: 1.5px solid #2d3561;
    border-radius: 10px;
    background: #111628;
    font-size: 0.85rem;
    font-weight: 600;
    color: #7c8ff0;
    cursor: pointer;
    transition: all 0.2s;
}

.edit-account-field-btn:hover {
    background: #17203a;
    border-color: #7c8ff0;
}

.edit-account-field-btn.save-mode {
    background: #764ba2;
    color: white;
    border-color: #764ba2;
}

.edit-account-field-btn.save-mode:hover {
    background: #5568d3;
    border-color: #5568d3;
}

/* Bio textarea */
.edit-account-textarea {
    width: 100%;
    min-height: 90px;
    padding: 12px 14px;
    border: 1.5px solid #2d3561;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #e0e0e0;
    background: #f0f2f4;
    resize: vertical;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    line-height: 1.5;
    box-sizing: border-box;
}

.edit-account-textarea:not([readonly]) {
    border-color: #764ba2;
    background: #111628;
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.edit-account-bio-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.edit-account-char-count {
    font-size: 0.78rem;
    color: #4b5280;
    font-weight: 500;
}

/* Social links grid */
.edit-account-socials-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.edit-account-social-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edit-account-social-input {
    padding: 9px 12px;
    font-size: 0.88rem;
}

/* Save social links row */
.edit-account-save-row {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
}

.edit-account-save-btn {
    padding: 11px 28px;
    background: linear-gradient(135deg, #764ba2, #667eea);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.edit-account-save-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.edit-account-delete-btn {
    background: linear-gradient(135deg, #f87171, #f87171);
}

/* Message toast */
.edit-account-message {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
}

.edit-account-message.success {
    background: #e8f5e9;
    color: #34d399;
}

.edit-account-message.error {
    background: #fce4ec;
    color: #f87171;
}

/* Responsive */
@media (max-width: 768px) {
    .main-header-card {
        padding: 40px 20px;
        margin: 16px 0;
        min-height: auto;
    }

    .main-header-title {
        font-size: 1.8rem;
    }

    .main-header-subtitle {
        font-size: 1rem;
    }

    .dashboard-header {
        padding: 30px 16px 24px;
    }

    .dashboard-info-row {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }

    .dashboard-info-label {
        flex: none;
    }

    .dashboard-header-actions {
        flex-direction: column;
        align-items: center;
    }

    .edit-account-overlay {
        padding: 10px;
    }

    .edit-account-modal {
        max-width: 100%;
        max-height: 95vh;
    }

    .edit-account-header {
        padding: 18px 68px 18px 20px;
    }

    .edit-account-body {
        padding: 20px 18px 24px;
    }

    .edit-account-socials-grid {
        grid-template-columns: 1fr;
    }
}


/* Cards */
.standard-card {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #111628;
    border-radius: 12px;
    box-shadow: 0 8px 20px #764ba2;
    display: flex;
    flex-direction: column;
}

/* centered */
.standard-card2 {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #111628;
    border-radius: 12px;
    box-shadow: 0 8px 20px #764ba2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Utility Pages (Contact, Check Order) */
.utility-page-header {
    text-align: center;
    padding: 40px 20px 24px;
}

.utility-page-title {
    font-size: 1.8rem;
    color: #667eea;
    font-weight: 700;
    font-family: 'Titan One', sans-serif;
    margin: 0 0 8px 0;
}

.utility-page-subtitle {
    font-size: 1rem;
    color: #8a90b8;
    margin: 0;
}

.utility-page-card {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 24px;
    padding: 2rem;
    background-color: #111628;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .utility-page-header {
        padding: 24px 16px 16px;
    }

    .utility-page-title {
        font-size: 1.4rem;
    }

    .utility-page-card {
        margin: 0 16px 24px;
        padding: 1.5rem;
    }
}

.shipment-card {
    border: 1px solid #2d3561;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #111628;
    box-shadow: 0 10px 20px #764ba2;
}

/* === Sticky Side Navigation === */
.side-nav {
    position: fixed;
    top: 0;
    left: -250px;
    width: 220px;
    min-height: 100%;
    background: #0c1022;
    border-right: 1px solid #1e2647;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 999;
    transition: left 0.3s ease;
    padding-top: 20px;
}

.side-nav.active {
    left: 0;
}

/* Close hamburger button in side nav */
.side-nav-close {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: 1.8rem;
    color: white;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(102, 126, 234, 0.1);
    transition: all 0.2s ease;
    font-weight: bold;
    user-select: none;
}

.side-nav-close:hover {
    background: rgba(102, 126, 234, 0.18);
    transform: scale(1.05);
}

.side-nav-close:active {
    transform: scale(0.95);
}

.side-logo {
    text-align: center;
    margin-bottom: 2rem;
    margin-top: 40px;
}

.side-logo-img {
    min-width: 60px;
    min-height: 60px;
    max-width: 60px;
    max-height: 60px;
    margin-bottom: 0px;
    display: block;
    margin: auto;
    border-radius: 50%;
    object-fit: cover;
}

.side-brand {
    color: white;
    font-family: 'Inter', 'Segoe UI', -apple-system, sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
}

.side-links {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    width: 100%;

}

.side-link {
    color: #fff;
    text-decoration: none;
    font-size: .85rem;
    text-align: center;
    font-family: 'Inter', 'Segoe UI', -apple-system, sans-serif;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.12);
    display: block;
    font-weight: 600;
}

.side-link:hover {
    opacity: 0.9;
    background: rgba(102, 126, 234, 0.15);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* === Hamburger === */
.burger {
    display: block;
    position: fixed;
    top: 1rem;
    left: 1rem;
    font-size: 2rem;
    background: #1a1f3a;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    color: #c0c0d0;
    border: 1px solid #2d3561;
    font-weight: bold;
    z-index: 1000;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.burger:hover {
    transform: scale(1.05);
}


@media screen and (max-width: 500px) {
    .side-nav {
        left: -250px;
    }

    .side-nav.active {
        left: 0;
    }

    .burger {
        display: block;
    }

}

/* === Footer === */
.footer-centered {
    background: #0c1022;
    border-top: 1px solid #1e2647;
    padding: 2.5rem 1rem;
    color: white;
    text-align: center;
    font-family: 'Helvetica Neue', sans-serif;
    width: 100%;
}

.footer-brand {
    font-family: 'Titan One', sans-serif;
    color: #f1f1f1;
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.footer-tagline {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: #f1f1f1;
    text-align: center;
}

.footer-links-wrap {
    margin: 1.2rem 0 1rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer-link {
    color: white;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    
}

.footer-link:hover {
    background-color: rgba(102, 126, 234, 0.1);
    opacity: 0.9;
    text-decoration: none;
}

.footer-copy {
    font-size: 0.8rem;
    color: #e1e1e1;
    margin-top: 0.8rem;
    text-align: center;
}


.footer-socials {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.social-link {
    display: inline-block;
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-link:hover {
    opacity: 0.8;
    transform: scale(1.2);
}

.social-icon {
    width: 100%;
    height: auto;
    display: block;
}

.invert-icon {
    filter: invert(.45);
}

/* === Hero Section === */
.hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
}

.hero-section2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-logo {
    min-width: 300px;
    min-height: 300px;
    max-width: 300px;
    max-height: 300px;
    margin-bottom: 0px;
    display: block;
    margin: auto;
    border-radius: 50%;
    object-fit: cover;
}

.hero-subtitle {
    font-size: 1.3rem;
    color: #667eea;
}

/* SHIMMER */
.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to right, 
        rgba(102, 126, 234, 0) 0%, 
        rgba(102, 126, 234, 0.06) 50%, 
        rgba(102, 126, 234, 0) 100%
    );
    animation: shimmer 2s infinite;
    background-size: 200% 100%;
}

@keyframes shimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 100% 0;
    }
}

.hero-section2::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to right, 
        rgba(102, 126, 234, 0) 0%, 
        rgba(102, 126, 234, 0.06) 50%, 
        rgba(102, 126, 234, 0) 100%
    );
    animation: shimmer 2s infinite;
    background-size: 200% 100%;
}

@keyframes shimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 100% 0;
    }
}

#createAccountFieldsPassword1 {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    transition: box-shadow 0.3s, border-color 0.3s;
}

input, select, textarea, number {
    box-shadow: 5px 5px 5px #764ba2;
    width: 100%;
    padding: 12px;
    border: 2px solid #2d3561;
    border-radius: 6px;
    font-size: 16px;
    transition: all 0.3s;
    background: #0c1022;
    color: #e0e0e0;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #7c8ff0;
    box-shadow: 0 0 6px rgba(102, 126, 234, 0.5);
}

input[type=submit], input[type=button], button {
    background-color: #764ba2;
    color: white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.9); /* Subtle shadow for a 'raised' effect */
    margin: auto;
    margin-bottom: 20px;
    /* width: 80%; */
    border: none;
}

input[type=submit]:hover, input[type=button]:hover, button:hover {
    background-color: #7c8ff0;
    color: white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.9); /* Subtle shadow for a 'raised' effect */
    cursor: pointer;
    /* border: none; */
}

/* Center select menu */
select {
    text-align: center;
    text-align: --webkit-center;
}
option {
    text-align: center;
    text-align: --webkit-center;
}

input.delete-btn {
    background-color: red;
    width: 50%;
}

input.delete-btn:hover {
    background-color: lightcoral;
}

#delete_account_button {
    margin-top: 150px;
}

#togglePassword {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 0.7rem;
    user-select: none;
    color: #6b7280;
}

#togglePassword:hover {
    color: #667eea;
}

/* === Product Page Styling === */
#colorGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
    gap: 10px;
    justify-items: center;
    padding: 0;
    max-width: 240px;
    list-style: none;
    margin-left: 0;
    margin-bottom: 0;
    padding-bottom: 20px;
    padding-top: 20px;
}

/* Each color block */
#colorGrid li.color-square {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #2d3561;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.color-square {
    position: relative;
}

/* Tooltip bubble */
.color-square::after {
    content: attr(data-color);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #7c8ff0;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease-in-out;
    z-index: 10;
}

/* Tooltip arrow */
.color-square::before {
    content: "";
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #7c8ff0;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
    z-index: 9;
}

/* Show on hover instantly */
.color-square:hover::after,
.color-square:hover::before {
    opacity: 1;
}

#colorGrid li.color-square:hover {
    transform: scale(1.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.color-square.selected {
    outline: 2px solid #7c8ff0;
    outline-offset: 2px;
}

#product_sizes {
    margin-top:10px;
    margin-bottom: 0;
}

/*$$$   Flipping Button   $$$ */
.flip-container {
    perspective: 1000px;
    display: inline-block;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for transform and box-shadow */
    border-radius: 50px;
}

.flip-container:hover {
    transform: scale(1.05);
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: adds shadow for depth */
}

.front:hover {
    background: #5568d3;
}

.back:hover {
    background: #5568d3;
}

.flip-container, .front, .back {
    width: 200px;
    height: 100px;
    position: relative;
}
  
.front, .back {
    backface-visibility: hidden;
    transition: transform 1s;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    font-size: 18px;
    color: #FFFFFF;
    border-radius: 50px;
    padding: 10px;
}
  
.front {
    /*background: #764ba2;*/
    background: #764ba2;
}

.back {
    /*background: #764ba2;*/
    background: #764ba2;
    transform: rotateY(-180deg);
}

.flip-container.flipped .front {
    transform: rotateY(180deg);
}

.flip-container.flipped .back {
    transform: rotateY(0deg);
}

/* Links on Products Page */
.doc_a {
    text-decoration: none;
    color: #764ba2; 
    /* color: #1d706d; */ 
}

.doc_a:hover {
    color: #003296;
    text-decoration: none;
    /*text-decoration: underline;*/
}

/* paragraph styling */
.doc_h3 {
    text-align: left;
    margin-top: 16px;
    margin-bottom: 16px;
}

.doc_p, .doc_p2 {
    text-align: left;
    margin-bottom: 0;
}

.doc_p_center {
    text-align: center;
}

/* IMAGES - Home Page Flexible Container */

.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.art{
    width: 300px;
    height: 300px;
    object-fit: cover;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
    border: black;
    border-width: 2px;
    border-style: solid;
}

/* Styling for the product card */
.product-card {
    background-color: #111628; /* White background */
    border-radius: 25px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.9); /* Subtle shadow for a 'raised' effect */
    padding: 15px;
    margin-bottom: 20px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.product-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* Creates two columns */
    gap: 10px 20px;  /* Space between rows and columns */
    background: #f8f8f8;  /* Light background for the grid */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);  /* Subtle shadow for depth */
    align-items: start;
}

.label-info {
    font-weight: bold;
    color: #e0e0e0;  /* Dark color for labels to stand out */
    margin-right: 5px;  /* Space after label */

}
.product-info-grid div {
    padding: 5px 0;  /* Padding for each item for vertical alignment */
    text-align: left;
}

.button-container {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically if needed */
    height: 50px; /* Optional: Set a height for the container */
    margin-top: 20px;
    margin-bottom: 15px;
}

.purchase-button-container {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically if needed */
    height: 50px; /* Optional: Set a height for the container */
    min-width: 300px;
    padding-top: 50px;
    padding-bottom: 80px;
}

/* Table */
table {
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #2d3561;
    padding: 8px;
    text-align: center;
}

.order-id-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

#order_id_input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #2d3561;
    border-radius: 4px;
    font-family: monospace;
    background-color: #f9f9f9;
}

.copy-button {
    width: 32px;
    height: 32px;
    background: url('/static/icons/copy.png') no-repeat center center;
    background-size: 20px 20px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 0.5rem;
    outline: none;
    transition: transform 0.2s ease;
}

.copy-button:hover {
    transform: scale(1.1);
}

#design_unique {
    font-family: 'Anton', sans-serif; /* blocky uppercase style */
    /*font-size: 2.5rem;*/
    text-transform: uppercase;
    background: linear-gradient(90deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px rgba(0, 255, 255, 0.5);
    margin: 20px 0;
    padding: 10px 0;
    width: 80%;
}

/* LOADER OVERLAY SECTION */
#global_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(30, 30, 30, 0.85); /* dark grey, semi-opaque */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: all;
}

.loader {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #667eea;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Dashboard Edit Account Section=== */
.editable-settings input {
    max-width: unset !important;
    width: auto !important;
}

/* === Each editable row (input + button grouped) === */
.setting-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
    width: 100%;
}

/* === Input and button wrap together, responsive === */
.input-button-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* === Input field styling === */
.setting-input {
    flex: 1 1 auto;
    min-width: 180px;
    max-width: 100%;
}

/* === Button styling === */
.setting-button {
    flex: 0 0 auto;
    min-width: 100px; /* 👈 Wider button */
    padding: 8px 16px;
    white-space: nowrap;
    background-color: #764ba2;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.9);
    transition: background 0.3s ease;
}

.setting-button:hover {
    background-color: #5568d3;
}

/* === Responsive stacking on mobile === */
@media screen and (max-width: 600px) {
    .input-button-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .setting-input,
    .setting-button {
        width: 100%;
    }
}

/* IMAGES */
#productShowcaseImage {
    height:300px;
    width: 300px;
    border: none;
}

#productShowcaseMessage {
    padding-top: 5px;
    padding-bottom: 15px;
}

.parent {
    position: relative;
    margin: auto; /* This will work only if the width is set or content width is determinable */
    position: relative;
    /*width: fit-content;*/
    height: 300px;
    width: 300px;
}

.plainShirt {
    position: relative;
    top: 0;
    left: 0;
    height: 300px;
    width: 300px;
    border: black;
    border-width: 2px;
    border-style: solid;
}

#shirtImage {
    position: absolute;
    top: 80px;
    left: 115px;
    height: 75px;
    width: 75px;
    border: none;
    background-color: transparent;
}

#shirtImage2 {
    position: absolute;
    top: 80px;
    left: 115px;
    height: 75px;
    width: 75px;
    border: none;
    background-color: transparent;
}

.shirtImage {
    background-color: transparent !important;
}

.shirtImage2 {
    background-color: transparent !important;
}

.shirtImageOrders {
    position: absolute;
    top: 80px;
    left: 115px;
    height: 75px;
    width: 75px;
    border: none;
    object-fit: contain;
}

.shirtImage2Orders {
    position: absolute;
    top: 80px;
    left: 115px;
    height: 75px;
    width: 75px;
    border: none;
    object-fit: contain;
}

/* CREATE PRODUCT in design_studio and dashboard */
#createProductFormCol{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 0px;
}
.hiddenSubProduct {
    display: block;
}
.hiddenSize {
    display: block;
}
.hiddenColor {
    display: block;
}
.hiddenQuantity {
    display: block;
}
.hiddenCountry {
    display: block;
}
.hiddenShipping {
    display: none;
}
.hiddenPrice {
    display: block;
}
.hiddenSubProduct:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.hiddenSize:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.hiddenColor:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.hiddenQuantity:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.hiddenCountry:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.hiddenShipping:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.hiddenPrice:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* DESIGN CONTAINER in design_studio and dashboard */
.design-container {
    display: flex;
    justify-content: center; /* Changed from space-between to center */
    align-items: flex-start; /* Vertically center all three columns */
    padding: 20px;
    margin: auto; /* Center the container on the page */
    max-width: 1080px; /* Adjust this based on your total width of canvas and tools */
    min-height: 600px; /* Ensure sufficient height for vertical centering */
}


/* Hide .design-container on screens narrower than 1080px */
@media (max-width: 1079px) {
    .design-container {
        min-height: auto; /* Remove fixed height on mobile */
        align-items: flex-start; /* Reset to top alignment on mobile */
        flex-direction: column; /* Stack vertically on mobile */
        align-items: center;
    }
    .canvas-container-main {
        display: none !important; /* Hide entire canvas container on mobile */
    }
    /* Only hide legacy canvas outside the new studio — the upgraded studio manages its own canvas */
    .canvas-container:not(.ce-canvas-area .canvas-container) {
        display: none !important;
    }
    #c:not(.ce-canvas-area #c) {
        display: none !important;
    }
    .tools-container {
        display: none !important;
    }
    .products-container {
        max-width: 100%; /* Full width on mobile */
        width: 100%;
        margin: 0 auto; /* Center the container */
        padding: 20px;
        box-shadow: none; /* Remove shadow on mobile */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center content vertically */
        align-items: center; /* Center content horizontally */
    }

    #productSelectionContainer {
        width: 100%; /* Full width */
        text-align: center; /* Center the button */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    .designStudioDescription {
        display: none;
    }
    #fullsize_version_message {
        display: block;
    }
    #carousel-add-btn {
        display: inline;
    }

    #capture-btn-original {
        display: none;
    }
    #capture-btn3 {
        display: block;
    }
}

/* Optional: Explicitly define display for wider screens if needed for clarity */
@media (min-width: 1080px) {
    .design-container {
        display: flex; /* Reiterate display flex for clarity and maintenance */
    }
    #fullsize_version_message {
        display: none;
    }
    #carousel-add-btn {
        display: none;
    }
    #capture-btn-original {
        display: block;
    }
    #capture-btn3 {
        display: none;
    }
    /*#capture-btn-message {
        display: block;
    }*/
}

#capture-btn2 {
    margin-top: 15px;
}


/* TOOLS CONTAINER in design_studio and dashboard */
/* OLD STYLES - Overridden by editor-workspace */
.products-container {
    flex: 1 1 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 350px;
    margin: 0;
    box-shadow: none;
}

/* Canvas container styling - Fabric.js generated wrapper, do NOT use flex on this
   or the IText editing textarea will be offset from the rendered text */
.canvas-container {
    position: relative !important;
    margin: 0 auto;
    padding: 0;
}

#c {
    box-shadow: 0 10px 20px rgba(0,0,0,0.9);
    display: block;
    margin: 0 auto !important;
    position: relative;
    left: 0 !important;
    right: 0 !important;
}

/* Tools container styling - Overridden by editor-sidebar-right */
.tools-container {
    flex: 1 1 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 350px;
    margin: 0;
}

.tools-container .tool input[type="range"] {
    width: 90%;
    background: #2d3561;
    height: 15px;
    border-radius: 5px;
}

.tools-container .tool input[type="button"],
.tools-container .tool button {
    /*background-color: #151a30;*/
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background-color: #764ba2;
    color: white;
    width: 90%;
    transition: all 0.2s ease-out;
}

.tools-container .tool button:active {
    box-shadow: 0 1px #5568d3; /* Smaller shadow to simulate being pressed down */
    transform: translateY(3px); /* Slightly move the button down */
    transition: all 0.1s ease-in; /* Quick transition to simulate the press */
}

.tools-container .tool button:focus:not(:active) {
    animation: bounce-back 0.3s ease-out forwards; /* Animation to bounce the button back */
}

/* Disable transform for editor workspace buttons/inputs to prevent shrinking */
.editor-workspace input:active,
.editor-workspace input:focus:not(:active),
.editor-workspace select:active,
.editor-workspace select:focus:not(:active),
.editor-workspace button:active,
.editor-workspace button:focus:not(:active) {
    transform: none !important;
    animation: none !important;
}

input:active {
    transform: translateY(1px); /* Slightly move the button down */
    transition: all 0.1s ease-in; /* Quick transition to simulate the press */
}

input:focus:not(:active) {
    animation: bounce-back 0.1s ease-out forwards; /* Animation to bounce the button back */
}

select:active {
    transform: translateY(1px); /* Slightly move the button down */
    transition: all 0.1s ease-in; /* Quick transition to simulate the press */
}

select:focus:not(:active) {
    animation: bounce-back 0.1s ease-out forwards; /* Animation to bounce the button back */
}


@keyframes bounce-back {
    0% {
        transform: translateY(1px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Basic styling for the tools container */
#tools-container {
    align-items: center;
    flex: 1 1 20%; /* Maintain smaller space for tools */
    position: fixed;       /* Fix its position to the right of the screen */
    right: 0;              /* Align to the right */
    top: 0;                /* Align to the top */
    background-color: #2c3e50; /* Dark background for the tools menu */
    color: #ecf0f1;       /* Light color for text for contrast */
    padding: 10px;        /* Padding around the container */
    box-shadow: -4px 0 6px rgba(0,0,0,0.1); /* Shadow to lift the panel off the page */
    display: flex;        /* Use flexbox for layout */
    flex-direction: column; /* Stack children vertically */
    align-items: center;  /* Center-align the items */
    gap: 10px;            /* Space between items */
    overflow-y: auto;     /* Allow scrolling for overflow */
    z-index: 1000;        /* Ensure it's above other content */
}

/* Styling for individual tool sections within the container */
.tool {
    padding-top: 5px;
    width: 100%;          /* Full width to align nicely */
    display: flex;        /* Use flexbox for alignment */
    flex-direction: column; /* Stack inputs and labels vertically */
    align-items: center;  /* Center-align the content */
    box-shadow: 0 10px 20px rgba(0,0,0,0.9); /* Subtle shadow for a 'raised' effect */
    margin-left: 10px;
    margin-right: 10px;
}

#text-color-picker, #text-font-size, #bg-color-picker {
    width: 90%;
    margin-bottom: 10px;
}

.toolLabel {
    text-transform: uppercase; /* Uppercase for a touch of design */
    padding-top: 10px;
    width: 100%;
    font-size: 12px; 
    color: black;
}

.toolButton, #font-family{
    margin-bottom: 10px;
    width: 100%;
    height: 50px;
}

.toolButton {
    width: 100%;
    height: 50px;
}
.toolButton:hover {
    background-color: #5568d3; /* Darker blue on hover for feedback */
    transform: none !important; /* Prevent button shrinking */
}

/* Adjust the font family dropdown specifically */
select#font-family {
    width: 90%;           /* Consistent width with other inputs */
    box-shadow: 5px 5px 5px #764ba2;
}

/* Optional: custom styles for specific buttons or inputs */
#bg-color-picker, #text-color-picker, #text-font-size {
    cursor: pointer;      /* Indicates these are clickable */
}

.gallery-container {

    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* IMAGE CAROUSELS */
#rightCarousel {
    position: relative; 
    max-width: 420px;
    min-width: 420px;
    min-height: 300px;
    max-height: 300px;
    margin: auto; 
    display: flex; 
    align-items: center;
    margin-bottom: 20px;
}

#leftCarousel {
    position: relative; 
    max-width: 420px;
    min-width: 420px;
    min-height: 300px;
    max-height: 300px;
    margin: auto; 
    display: flex; 
    align-items: center;
    margin-bottom: 20px;
}

.carouselImage {
    min-height: 300px;
    max-height: 300px;
    min-width: 300px;
    max-width: 300px;
    flex-shrink: 0;
    margin: auto;
}

.galleryCols {
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 5px;
    margin-right: 5px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.9);
}

/* Smallest size screens */
@media (max-width: 600px) {

    #rightCarousel {
        position: relative;
        max-width: 320px;
        min-width: 320px;
        min-height: 300px;
        max-height: 300px;
        margin: auto;
        display: flex;
        align-items: center;
    }
    #leftCarousel {
        position: relative;
        max-width: 320px;
        min-width: 320px;
        min-height: 300px;
        max-height: 300px;
        margin: auto;
        display: flex;
        align-items: center;
    }
    
    #deleteCarouselImageDiv {
        margin-bottom: 20px;
    }

    .yourImagesHeader {
        padding-top: 20px;
    }

    .carouselImage {
        min-height: 200px;
        max-height: 200px;
        min-width: 200px;
        max-width: 200px;
        flex-shrink: 0;
        margin: auto;
    }

    .galleryCols {
        padding-top: 20px;
        padding-bottom: 20px;
        margin: auto;
        max-width: 350px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.9); /* Subtle shadow for a 'raised' effect */
    }

}

.carousel-inner {
    position: relative;
    display: flex;
    align-items: center;
}

.carousel-control-prev, .carousel-control-next {
    font-size: 28px; /* Size of the arrows */
    color: black; /* Color of the arrows */
    cursor: pointer;
    padding: 10px; /* Padding for larger clickable area */
    text-decoration: none; /* Remove any underline */
    z-index: 10;
}

#rightCarousel .carousel-control-prev {
    margin-right: auto;
    color: black;
}

#rightCarousel  .carousel-control-next {
    margin-left: auto;
    color: black;
}

#leftCarousel .carousel-control-prev {
    margin-right: auto;
    color: black;
}

#leftCarousel  .carousel-control-next {
    margin-left: auto;
    color: black;
}

.canvas-container-main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex: 1;
}

.shirt-selection-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    flex-wrap: wrap;
    width: 300px;
    margin: auto;
    margin-top: 0px;
}

.shirt-option {
    position: relative;
    border: none;
    background: none;
    cursor: pointer;
    padding: 10px;
    flex: 0 1 auto;
    opacity: 0.5;
}

.blank_display_shirt {
    width: 280px;
    height: 300px;
}

.shirt-option img {
    display: block;
    transition: transform 0.3s ease;
}

.shirt-option:focus, .shirt-option:hover {
    outline: none;
    background-color: #764ba2;
    transform: scale(1.02);
}

.shirt-option.selected {
    opacity: 1.0;
}

.shirt-canvas-overlay-centered {
    position: absolute;
    top: 70px; /* Centers the overlay vertically on the shirt */
    left: 110px; /* Centers the overlay horizontally on the shirt */
    width: 80px; /* Specific width for overlay */
    height: 80px; /* Specific height for overlay */
    pointer-events: none; /* Allows clicking through the overlay to the button below */
    border: none;
}

.shirt-canvas-overlay-whole {
    position: absolute;
    top: 70px; /* Centers the overlay vertically on the shirt */
    left: 90px; /* Centers the overlay horizontally on the shirt */
    width: 120px; /* Specific width for overlay */
    height: 120px; /* Specific height for overlay */
    pointer-events: none; /* Allows clicking through the overlay to the button below */
    border: none;
}

#designStudioDescription {
    margin: 30px;
    font-size: large;
}

#h3_money_matters {
    text-align: center;
}

/* COLORS */
/* Black text on colored background */
#apple, #butter, #fuschia, #heatherGrey, #lightBlue, #lightPink, #pink, #babyBlue, #hotPink, #kelly, #orange, #arcticWhite, #fireRed, #kellyGreen, #skyBlue, #sunYellow, #ash, #azalea, #cardinal, #cornsilk, #daisy, #irishGreen, #purple, #silver, #sportGrey, #cottonPink, #ochre, #airforceBlue, #orangeCrush, #limeGreen, #hawaiianBlue, #sapphireBlue, #candyPink, #sunsetOrange, #ashHeather, #neonPink, #safetyPink, #mushroom, #brightBlue, #desertDust, #brightRed, #keyLime, #mandarinOrange, #greenApple, #charityPink, #stormGrey, #kiwi, #heliconia, #lime, #camel, #softCream, #creamHeatherGrey, #khaki, #midHeatherGrey, #darkHeatherIndigo, #heatherMint, #heatherIceBlue, #softPink, #freshGreen, #goldenYellow, #caribbeanBlue, #sage, #midHeatherBlue, #lavaGrey, #oatmealHeather, #turquoiseSurf, #canyonPink, #spectraYellow, #oceanDepth, #jade, #sand, #slate, #anthracite {
    color: #000000;
}

/* White text on colored background */
#asphalt, #black, #charcoal, #charcoalHeather, #denimHeather, #navy, #red, #royalBlue, #bottleGreen, #burgundy, #jetBlack, #oxfordNavy, #royal, #darkChocolate, #darkHeather, #darkHeatherGrey, #darkGrey, #darkGreyHeather, #militaryGreen, #britishKhaki, #majorelleBlue, #newFrenchNavy, #plum, #athleticNavy, #lake, #independenceRed, #cityGreen, #sapphire, #cherryRed, #moss, #varsityGreen, #forest, #teamPurple, #glazedGreen, #stargazer, #frenchNavy, #brown, #chocolate {
    color: #ffffff;
}

/* Borders with black text */
#white, #arcticWhite, #vintageWhite, #offWhite {
    border-style: solid;
    border-color: #000000;
    border-width: 1px;
    color: #000000;
}

/* Unique background colors */
#apple {background-color: #3bae48;}
#asphalt {background-color: #575956;}
#black {background-color: #101010;}
#butter {background-color: #fde8b0;}
#charcoal {background-color: #4d4b4c;}
#fuschia {background-color: #e71865;}
#heatherGrey {background-color: #8e8e92;}
#lightBlue {background-color: #b1d1ed;}
#lightPink {background-color: #fbc3d2;}
#navy {background-color: #121a2c;}
#pink {background-color: #f3bfc4;}
#red {background-color: #ce1d32;}
#royalBlue {background-color: #2a54a2;}
#white {background-color: #f5f4f8;}
#babyBlue {background-color: #a5c1da;}
#hotPink {background-color: #d1006c;}
#kelly {background-color: #02765a;}
#orange {background-color: #fa6d28;}
#arcticWhite {background-color: #f8f8fa;}
#bottleGreen {background-color: #245a3a;}
#burgundy {background-color: #5b0d3f;}
#fireRed {background-color: #bf0c19;}
#jetBlack {background-color: #111111;}
#kellyGreen {background-color: #02775a;}
#oxfordNavy {background-color: #20283a;}
#royal {background-color: #1c448e;}
#skyBlue {background-color: #afd6ff;}
#sunYellow {background-color: #fdc929;}
#ash {background-color: #dadada;}
#azalea {background-color: #fd79b3;}
#cardinal {background-color: #a00b34;}
#cornsilk {background-color: #eeeb70;}
#daisy {background-color: #fcd75f;}
#darkChocolate {background-color: #221e1b;}
#darkHeather {background-color: #3f424b;}
#irishGreen {background-color: #26a659;}
#maroon {background-color: #452127;}
#purple {background-color: #5d426d;}
#silver {background-color: #d2d1cd;}
#sportGrey {background-color: #a6a4aa;}
#darkHeatherGrey {background-color: #3d3b3c;}
#darkGrey {background-color: #272729;}
#darkGreyHeather {background-color: #454344;}
#gold {background-color: #fdaf2c;}
#militaryGreen {background-color: #515640;}
#natural {background-color: #fdf4de;}
#trueRoyal {background-color: #1c448f;}
#vintageRoyal {background-color: #1d448f;}
#denimHeather {background-color: #4c5366;}
#athleticHeather {background-color: #a6a4aa;}
#charcoalHeather {background-color: #464445;}
#army {background-color: #534424;}
#brown {background-color: #46332a;}
#chocolate {background-color: #302b28;}
#heatherPurple {background-color: #665582;}
#jade {background-color: #195d5c;}
#sand {background-color: #ddcfb7;}
#turquoiseSurf {background-color: #48d3e8;}
#stargazer {background-color: #275865;}
#oceanDepth {background-color: #005e70;}
#canyonPink {background-color: #f0ada8;}
#spectraYellow {background-color: #fab500;}
#berry {background-color: #7f2952;}
#sage {background-color: #c1ba9c;}
#caribbeanBlue {background-color: #add6d3;}
#anthracite {background-color: #4f5354;}
#frenchNavy {background-color: #1d2f3c;}
#midHeatherBlue {background-color: #7d9dc1;}
#lavaGrey {background-color: #8c8b98;}
#cottonPink {background-color: #f7c0cf;}
#vintageWhite {background-color: #f2ebe6;}
#ochre {background-color: #cd9a38;}
#britishKhaki {background-color: #625a3f;}
#majorelleBlue {background-color: #004d88;}
#airforceBlue {background-color: #4f758b;}
#redHotChilli {background-color: #7f0019;}
#orangeCrush {background-color: #e16c06;}
#limeGreen {background-color: #79c753;}
#hawaiianBlue {background-color: #00a9e0;}
#sapphireBlue {background-color: #006cb7;}
#newFrenchNavy {background-color: #20284e;}
#plum {background-color: #612c51;}
#candyPink {background-color: e782a9;}
#sunsetOrange {background-color: #e03c31;}
#ashHeather {background-color: #e8edee;}
#athleticNavy {background-color: #1b2849;}
#putty{background-color: #dcd0c0;}
#neonPink{background-color: #fd64a9;}
#slate {background-color: #5b7a93;}
#safetyPink {background-color: #fe63aa;}
#mushroom {background-color: #d6956c;}
#indiaInkGrey {background-color: #434f5b;}
#brightBlue {background-color: #567baa;}
#desertDust {background-color: #d1bca3;}
#brightRed {background-color: #e41f17;}
#glazedGreen {background-color: #214847;}
#midHeatherGreen {background-color: #87b1a8;}
#keyLime {background-color: #b7dd79;}
#mandarinOrange {background-color: #ff8f1c;}
#greenApple {background-color: #509e2f;}
#charityPink {background-color: #f8a3bc;}
#stormGrey {background-color: #898d8d;}
#lake {background-color: #4f758b;}
#independenceRed {background-color: #862633;}
#cityGreen {background-color: #3f4729;}
#kiwi {background-color: #90a94c;}
#sapphire {background-color: #0079b8;}
#heliconia {background-color: #db3e79;}
#cherryRed {background-color: #ac2b37;}
#lime {background-color: #92bf55;}
#moss {background-color: #00594c;}
#camel {background-color: #ac8669;}
#softCream {background-color: #d6bea6;}
#creamHeatherGrey {background-color: #dedede;}
#offWhite {background-color: #f5f1ed;}
#varsityGreen {background-color: #00744a;}
#khaki {background-color: #57564a;}
#midHeatherGrey {background-color: #898888;}
#darkHeatherIndigo {background-color: #5b6770;}
#heatherMint {background-color: #a6dbbf;}
#heatherIceBlue {background-color: #dbebeb;}
#teamPurple {background-color: #4d2d80;}
#softPink {background-color: #fae5ec;}
#forest {background-color: #214c30;}
#whiteBlue {background-color: #2865a3;}
#whiteEvergreen {background-color: #3c553c;}
#whiteNeonpink {background-color: #ed6995;}
#oatmealHeather {background-color: #e7e4de;}
#freshGreen {background-color: #009841;}
#goldenYellow {background-color: #ffd700;}

#ResetPasswordForm {
    max-width: 300px;
    width: 100%;
}

#loginForm {
    margin: 0;
}

#createItemForm {
    width: 90%;
    justify-content: center;
    align-items: center;
}
/* ========================================
   PRODUCT CATALOG MODAL STYLES
   ======================================== */

/* Modal Overlay */
.catalog-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.catalog-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10001;
}

/* Modal Content */
.catalog-modal-content {
    position: relative;
    background-color: #111628;
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    z-index: 10002;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Modal Header */
.catalog-modal-header {
    padding: 1.5rem;
    border-bottom: 2px solid #1e2647;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #7c8ff0 100%);
    border-radius: 12px 12px 0 0;
}

.catalog-modal-header h2 {
    margin: 0;
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Modal Body */
.catalog-modal-body {
    padding: 2rem;
    flex: 1;
    overflow-y: auto;
    min-height: 300px;
}

/* Modal Footer */
.catalog-modal-footer {
    padding: 1.5rem;
    border-top: 2px solid #1e2647;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

/* Modal Footer Buttons */
.catalog-modal-footer button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

#catalogBackBtn {
    background-color: #0c1022;
    color: #e0e0e0;
    border: 2px solid #1e2647;
}

#catalogBackBtn:hover {
    background-color: #1e2647;
    border-color: #2d3561;
}

#catalogContinueBtn {
    background: linear-gradient(135deg, #667eea 0%, #7c8ff0 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

#catalogContinueBtn:hover {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    filter: brightness(1.05);
}

#catalogAddToCartBtn {
    background: linear-gradient(135deg, #28a745 0%, #20833a 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

#catalogAddToCartBtn:hover {
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
    filter: brightness(1.05);
}

/* Improved Close Button */
.catalog-modal-close {
    background: rgba(102, 126, 234, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-size: 1.75rem;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.3s ease;
    line-height: 1;
    font-weight: 300;
}

.catalog-modal-close:hover {
    background-color: rgba(102, 126, 234, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    transform: rotate(90deg);
}

/* Loading State */
.catalog-loading {
    text-align: center;
    padding: 3rem;
    font-size: 1.2rem;
    color: #8a90b8;
}

.catalog-loading::after {
    content: '...';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Error State */
.catalog-error {
    text-align: center;
    padding: 3rem;
    color: #d32f2f;
    font-size: 1.1rem;
}

/* Grid Layout for Categories/Product Types */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
}

/* Card for each item */
.catalog-card {
    background: #111628;
    border: 2px solid #1e2647;
    border-radius: 8px;
    padding: 1.5rem;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    text-align: center;
    min-height: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
}

.catalog-card:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    background-color: #f8fbff;
}

.catalog-card.selected {
    border-color: #667eea;
    background-color: #e3f2fd;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.catalog-card-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.catalog-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #7c8ff0;
}

/* Variant Selection View */
.catalog-variant-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 768px) {
    .catalog-variant-container {
        grid-template-columns: 1fr;
    }
}

.catalog-product-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0c1022;
    border-radius: 8px;
    padding: 2rem;
    min-height: 400px;
}

.catalog-product-preview img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}

.catalog-attributes {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.catalog-attribute-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.catalog-attribute-label {
    font-weight: 600;
    color: #7c8ff0;
    font-size: 1.1rem;
}

.catalog-attribute-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.catalog-option-btn {
    padding: 0.5rem 1rem;
    border: 2px solid #1e2647;
    border-radius: 6px;
    background: #111628;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.95rem;
}

.catalog-option-btn:hover {
    border-color: #667eea;
    background-color: #17203a;
}

.catalog-option-btn.selected {
    border-color: #667eea;
    background-color: #667eea;
    color: white;
    font-weight: 600;
}

/* Finalize View */
.catalog-finalize-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.catalog-product-summary {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    background: #0c1022;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .catalog-product-summary {
        grid-template-columns: 1fr;
    }
}

.catalog-product-summary img {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 8px;
}

.catalog-summary-details h3 {
    margin: 0 0 1rem 0;
    color: #7c8ff0;
}

.catalog-summary-details p {
    margin: 0.5rem 0;
    color: #8a90b8;
}

.catalog-finalize-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.catalog-finalize-field label {
    font-weight: 600;
    color: #7c8ff0;
}

.catalog-finalize-field select {
    padding: 0.75rem;
    border: 2px solid #1e2647;
    border-radius: 6px;
    font-size: 1rem;
}

.catalog-finalize-field select:focus {
    outline: none;
    border-color: #667eea;
}

/* Country Dropdown Container */
.country-dropdown-container {
    margin: 1rem 0;
}

.country-dropdown-container select {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border-radius: 8px;
    border: 2px solid #1e2647;
    background-color: #111628;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.country-dropdown-container select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: none;
}

.country-dropdown-container select:hover {
    border-color: #4b5280;
}

/* ============================================================
   NEW PRODUCT SELECTION MODAL STYLES
   ============================================================ */

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Content */
.modal-content {
    background: #111628;
    border-radius: 12px;
    max-width: 800px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-large {
    max-width: 1000px;
}

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

/* Modal Header */
.modal-header {
    padding: 1.5rem 2rem;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: #111628;
    z-index: 10;
    border-radius: 12px 12px 0 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #e0e0e0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: #8a90b8;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: #e0e0e0;
}

.app-modal-header {
    position: relative;
    padding-right: 72px !important;
}

.app-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(102, 126, 234, 0.15);
    border-radius: 10px;
    background: linear-gradient(135deg, #764ba2, #667eea);
    color: #fff;
    font-size: 1.55rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.app-modal-close:hover {
    color: #fff;
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(118, 75, 162, 0.35);
}

.app-modal-close svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.app-modal-close--right {
    left: auto;
    right: 14px;
}

/* Modal Body */
.modal-body {
    padding: 2rem;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
}

/* Category Accordion Picker */
.category-accordion {
    border: 1px solid #1e2647;
    border-radius: 8px;
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
}

.category-accordion::-webkit-scrollbar {
    width: 4px;
}
.category-accordion::-webkit-scrollbar-thumb {
    background: #2d3561;
    border-radius: 4px;
}

.category-accordion-loading {
    padding: 16px;
    color: #4b5280;
    font-size: 0.85em;
    text-align: center;
}

.category-accordion-header {
    padding: 11px 16px;
    font-size: 0.92em;
    font-weight: 500;
    color: #e0e0e0;
    cursor: pointer;
    border-bottom: 1px solid #151a30;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s;
    user-select: none;
}

.category-accordion-header:hover {
    background: #0c1022;
}

.category-accordion-header.expanded {
    background: #17203a;
    color: #667eea;
}

.category-accordion-chevron {
    font-size: 0.75em;
    width: 12px;
    display: inline-block;
    transition: transform 0.2s;
}

.category-accordion-body {
    background: #0c1022;
}

.category-accordion-item {
    padding: 9px 16px 9px 36px;
    font-size: 0.88em;
    color: #c0c0d0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #151a30;
    transition: background 0.15s;
}

.category-accordion-item:last-child {
    border-bottom: none;
}

.category-accordion-item:hover {
    background: #17203a;
}

.category-accordion-item.selected {
    background: #17203a;
    color: #667eea;
    font-weight: 500;
}

.category-accordion-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid #2d3561;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #667eea;
    flex-shrink: 0;
}

.category-accordion-item.selected .category-accordion-checkbox {
    border-color: #667eea;
    background: #667eea;
    color: white;
}

.category-selected-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #17203a;
    border: 1px solid #b3d4f7;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 0.9em;
    color: #667eea;
    font-weight: 500;
}

.category-clear-btn {
    margin: 0;
    background: none;
    border: none;
    font-size: 18px;
    color: #667eea;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    margin-left: auto;
}

.category-clear-btn:hover {
    color: #f87171;
}

/* Breadcrumb Navigation */
.breadcrumb {
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    background: #0c1022;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #8a90b8;
}

.breadcrumb-item {
    cursor: pointer;
    transition: color 0.2s;
}

.breadcrumb-item:hover {
    color: #667eea;
}

.breadcrumb-separator {
    margin: 0 0.5rem;
    color: #4b5280;
}

/* Country Grid */
.country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.country-button {
    padding: 1rem;
    background: #0c1022;
    border: 2px solid #1e2647;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1rem;
    font-weight: 500;
    color: #e0e0e0;
}

.country-button:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

/* Category Grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.category-button {
    padding: 1.25rem;
    min-height: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0c1022 0%, #1a1f3a 100%);
    border: 2px solid #1e2647;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    font-size: 1.05rem;
    font-weight: 600;
    color: #e0e0e0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-button:hover {
    background: linear-gradient(135deg, #667eea 0%, #5568d3 100%);
    color: white;
    border-color: #667eea;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25);
}

/* Product Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.product-card {
    background: #111628;
    border: 2px solid #1e2647;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
}

.product-card:hover {
    border-color: #667eea;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
    background-color: #f8fbff;
}

.product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: #0c1022;
}

.product-card h4 {
    padding: 1rem 1rem 0.5rem;
    margin: 0;
    font-size: 1.1rem;
    color: #e0e0e0;
}

.product-card p {
    padding: 0 1rem 1rem;
    margin: 0;
    font-size: 0.9rem;
    color: #8a90b8;
    line-height: 1.4;
}

/* Product Detail View */
.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

.product-image img {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #1e2647;
}

.product-info h3 {
    margin: 0 0 1rem;
    font-size: 1.3rem;
    color: #e0e0e0;
}

.product-info p {
    margin: 0 0 1.5rem;
    color: #8a90b8;
    line-height: 1.6;
}

/* Attribute Selection */
.attribute-selection {
    margin-bottom: 2rem;
}

.attribute-group {
    margin-bottom: 1.5rem;
}

.attribute-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #e0e0e0;
    font-size: 0.95rem;
}

.attribute-select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #1e2647;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: border-color 0.2s;
    background: #111628;
}

.attribute-select:hover {
    border-color: #667eea;
}

.attribute-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Buttons */
.back-button {
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background: #0c1022;
    border: 1px solid #1e2647;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #8a90b8;
    transition: all 0.2s;
}

.back-button:hover {
    background: #1a1f3a;
    color: #e0e0e0;
}



/* Responsive Design */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-height: 90vh;
    }

    .modal-body {
        padding: 1rem;
    }

    .country-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.75rem;
    }

    .category-grid {
        grid-template-columns: 1fr;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .product-detail {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .modal-header h2 {
        font-size: 1.2rem;
    }

    .app-modal-header {
        padding-right: 64px !important;
    }

    .app-modal-close {
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
        font-size: 1.45rem;
    }

    .app-modal-close--right {
        left: auto;
        right: 10px;
    }
}

/* ========================================
   LIGHTSPEED PRODUCT SELECTION STYLES
   Color buttons, compatibility filtering
   ======================================== */

/* Color Button Group */
.color-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.color-button {
    width: 40px;
    height: 40px;
    border: 3px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.color-button:hover:not(.disabled) {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.color-button.selected {
    border-color: #667eea;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #667eea;
    transform: scale(1.05);
}

.color-button.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    position: relative;
}

.color-button.disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 120%;
    background-color: rgba(255, 0, 0, 0.7);
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Dimension info text */
.dimension-info {
    margin: 0.5rem 0;
    padding: 0.75rem;
    background-color: #17203a;
    border-left: 4px solid #667eea;
    border-radius: 4px;
    font-weight: 500;
    color: #7c8ff0;
}

/* No options text */
.no-options-text {
    padding: 1rem;
    text-align: center;
    color: #8a90b8;
    font-style: italic;
}

/* Dropdown disabled options */
.attribute-select option:disabled {
    color: #2d3561;
    font-style: italic;
}


/* Attribute group spacing */
.attribute-group {
    margin-bottom: 1.25rem;
}

.attribute-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #7c8ff0;
    font-size: 0.95rem;
}

/* Responsive adjustments for color buttons */
@media (max-width: 768px) {
    .color-button {
        width: 36px;
        height: 36px;
    }

    .color-button-group {
        gap: 0.4rem;
    }
}






















/* INTRO SECTION */
.aip-intro-section {
    max-width: 800px;
    margin: 0 auto 70px;
    padding: 0 20px;
}

.aip-intro-card {
    background: linear-gradient(135deg, #764ba2, #667eea);
    padding: 50px 40px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
}

.aip-intro-headline {
    font-size: 2.8rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    line-height: 1.2;
}

.aip-intro-text {
    font-size: 1.15rem;
    color: white;
    margin-bottom: 30px;
    line-height: 1.7;
    opacity: 0.95;
}

.aip-btn-start {
    display: inline-block;
    background: #111628;
    color: #667eea;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.aip-btn-start:hover {
    background: #2d3561;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* HOW IT WORKS */
.aip-how-section {
    max-width: 1000px;
    margin: 0 auto 70px;
    padding: 0 20px;
}

.aip-how-title {
    text-align: center;
    font-size: 2.2rem;
    color: #667eea;
    margin-bottom: 40px;
    font-weight: 700;
}

.aip-steps-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.aip-step-box {
    background: #0c1022;
    padding: 30px 25px;
    border-radius: 12px;
    text-align: center;
    border: 2px solid #2d3561;
    transition: all 0.3s ease;
}

.aip-step-box:hover {
    border-color: #764ba2;
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.15);
}

.aip-step-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #764ba2;
    margin-bottom: 10px;
}

.aip-step-title {
    font-size: 1.4rem;
    color: #764ba2;
    margin-bottom: 10px;
    font-weight: 600;
}

.aip-step-text {
    color: #8a90b8;
    line-height: 1.6;
    margin: 0;
}

/* GALLERY STRIP */
.aip-gallery-strip {
    margin-bottom: 60px;
    text-align: center;
    padding: 0 20px;
}

.aip-gallery-label {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.aip-gallery-row {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.aip-thumb-box {
    width: 120px;
}

.aip-thumb-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.aip-thumb-img:hover {
    transform: scale(1.05);
}

/* FINAL CTA */
.aip-final-block {
    text-align: center;
    padding: 50px 20px;
    margin-bottom: 60px;
}

.aip-final-title {
    font-size: 2rem;
    color: #667eea;
    margin-bottom: 25px;
    font-weight: 700;
}

.aip-btn-action {
    display: inline-block;
    background: linear-gradient(135deg, #764ba2, #667eea);
    color: white;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.aip-btn-action:hover {
    background: linear-gradient(135deg, #667eea, #667eea);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.3);
}

/* TRANSITION SECTION */
.aip-transition-section {
    max-width: 800px;
    margin: 0 auto 60px;
    padding: 40px 30px;
    background: #0c1022;
    border-radius: 12px;
    text-align: center;
    border-left: 4px solid #764ba2;
}

.aip-transition-title {
    font-size: 2rem;
    color: #667eea;
    margin-bottom: 15px;
    font-weight: 700;
}

.aip-transition-text {
    font-size: 1.1rem;
    color: #8a90b8;
    line-height: 1.7;
    margin: 0;
}

/* CREATOR SECTION */
.aip-creator-block {
    background: linear-gradient(135deg, #7c8ff0, #667eea);
    color: white;
    padding: 50px 30px;
    border-radius: 15px;
    margin-bottom: 60px;
    text-align: center;
}

.aip-creator-title {
    font-size: 2.2rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.aip-creator-intro {
    font-size: 1.1rem;
    margin-bottom: 40px;
    opacity: 0.95;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

.aip-perks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    max-width: 900px;
    margin: 0 auto 40px;
}

.aip-perk-card {
    background: rgba(102, 126, 234, 0.1);
    padding: 25px 20px;
    border-radius: 10px;
    transition: background 0.3s ease;
}

.aip-perk-card:hover {
    background: rgba(102, 126, 234, 0.12);
}

.aip-perk-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.aip-perk-title {
    font-size: 1.1rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.aip-perk-text {
    font-size: 0.9rem;
    opacity: 0.9;
    line-height: 1.5;
    margin: 0;
}

.aip-btn-creator {
    display: inline-block;
    background: #111628;
    color: #667eea;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.aip-btn-creator:hover {
    background: #2d3561;
    transform: translateY(-2px);
}

/* STRIPE SECTION */
.aip-stripe-section {
    background-color: #2d3561;
    text-align: center;
    padding: 30px 20px;
    margin-bottom: 60px;
    border-radius: 8px;
}

.aip-stripe-text {
    font-size: 0.95rem;
    margin: 0 0 10px 0;
    color: #6b7280;
}

.aip-stripe-logo-text {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    color: #6772E5;
    letter-spacing: 1px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .aip-intro-headline {
        font-size: 2rem;
    }
    
    .aip-intro-card {
        padding: 40px 25px;
    }
    
    .aip-how-title {
        font-size: 1.8rem;
    }
    
    .aip-steps-container {
        grid-template-columns: 1fr;
    }
    
    .aip-transition-title {
        font-size: 1.6rem;
    }
    
    .aip-creator-title {
        font-size: 1.8rem;
    }
    
    .aip-perks-grid {
        grid-template-columns: 1fr;
    }
    
    .aip-thumb-box {
        width: 100px;
    }
}





.aip-store-link-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    max-width: 100%;
}

.aip-link-code {
    background: #0c1022;
    padding: 8px 12px;
    border: 1px solid #1e2647;
    border-radius: 6px;
    font-family: monospace;
    color: #667eea;
    font-size: 14px;
    word-break: break-all;
    flex: 1;
    min-width: 0;
}

.aip-copy-btn {
    background: #111628;
    border: 1px solid #cbd5e0;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    min-width: auto;
    width: auto;
    flex-shrink: 0;
    align-self: flex-start;
}

.aip-copy-btn img {
    width: 16px;
    height: 16px;
    display: block;
}







#submitBtnMoney {
    margin-top: 20px;
}


/* ===========================
   LEAF BUTTONS (NO SHRINK)
   =========================== */

/* Base state */
button.action-button-leaf {
  box-sizing: border-box !important;

  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 10px 22px !important;

  background: linear-gradient(135deg, #7c8ff0 0%, #764ba2 100%) !important;
  color: #ffffff !important;

  border: none !important;
  border-radius: 12px !important;

  font-size: 0.88rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;

  cursor: pointer !important;
  transition: opacity 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease !important;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.18) !important;
  filter: none !important;
  animation: none !important;
}

button.action-button-leaf:hover,
button.action-button-leaf:focus,
button.action-button-leaf:focus-visible {
  box-sizing: border-box !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 22px !important;
  border: none !important;
  background: linear-gradient(135deg, #5568d3 0%, #5568d3 100%) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(102, 126, 234, 0.28) !important;
  filter: none !important;
  animation: none !important;
  text-shadow: none !important;
  outline: none !important;
}

button.action-button-leaf:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.18) !important;
}

button.action-button-leaf:disabled,
button.action-button-leaf[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}



/* Your existing price display styles extracted too */
.price-display {
    display: none;
    margin: 20px 0;
    font-size: 1.2em;
    font-weight: bold;
    padding: 1rem;
    background-color: #17203a;
    border-radius: 8px;
    text-align: center;
    border: 2px solid #667eea;
}

.price-display #priceValue {
    color: #667eea;
    font-size: 1.5em;
}

/* ========================================== */
/* IMAGE LIBRARY SECTION (Horizontal)         */
/* ========================================== */

.image-library-section {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 20px auto;
    background: #111628;
    border: 1px solid #1e2647;
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Tabs */
.image-library-tabs {
    display: flex;
    gap: 8px;
    padding: 10px;
    background: #0c1022;
    border-bottom: 1px solid #1e2647;
}

.image-library-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: #764ba2;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    transition: all 0.2s ease;
    box-shadow: none;
    margin-top: 10px;
    margin-bottom: 10px;
}

.image-library-tab:hover {
    background: #667eea;
}

.image-library-tab.active {
    background: #667eea;
    color: #fff;
}

/* Panels */
.image-library-panel {
    display: none;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
}

.image-library-panel.active {
    display: block;
}

/* Horizontal scrolling image grid */
.image-library-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    min-height: 100px;
    width: 100%;
}

.image-library-grid::-webkit-scrollbar {
    height: 6px;
}

.image-library-grid::-webkit-scrollbar-track {
    background: #151a30;
    border-radius: 3px;
}

.image-library-grid::-webkit-scrollbar-thumb {
    background: #2d3561;
    border-radius: 3px;
}

.image-library-grid::-webkit-scrollbar-thumb:hover {
    background: #4b5280;
}

/* Image items */
.image-library-item {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    background: #151a30;
}

.image-library-item:hover {
    border-color: #764ba2;
    transform: scale(1.05);
}

.image-library-item.selected {
    border-color: #764ba2;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
}

.image-library-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Empty state */
.image-library-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100px;
    color: #4b5280;
    font-size: 0.9rem;
    text-align: center;
}

/* Delete button on image items */
.image-library-item {
    position: relative;
}

.image-library-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(220, 53, 69, 0.9);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
}

.image-library-item:hover .image-library-delete-btn {
    opacity: 1;
}

.image-library-delete-btn:hover {
    background: #f87171;
    /* transform: scale(1.1); */
}

/* Add to Store button */
.image-library-add-btn {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(23, 162, 184, 0.9);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.image-library-item:hover .image-library-add-btn {
    opacity: 1;
}

.image-library-add-btn:hover {
    background: #3a9a93;
}

/* Selected image state */
.image-library-item.selected {
    outline: 3px solid #764ba2;
    outline-offset: -3px;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.image-library-item.selected::after {
    content: '✓';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    background: #764ba2;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    z-index: 3;
}

/* ========================================== */
/* SIDEBAR IMAGE LIBRARY (Vertical)           */
/* ========================================== */

.image-library-sidebar {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.image-library-sidebar .image-library-tabs {
    padding: 6px;
    gap: 4px;
    background: #0c1022;
    border-radius: 8px;
    margin-bottom: 8px;
    border-bottom: none;
    flex-shrink: 0;
}

.image-library-sidebar .image-library-tab {
    padding: 6px 8px;
    font-size: 0.72rem;
}

.image-library-sidebar .image-library-panel {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: none;
    flex-direction: column;
}

.image-library-sidebar .image-library-panel.active {
    display: flex;
}

.image-library-sidebar .image-library-panel::-webkit-scrollbar {
    width: 4px;
}

.image-library-sidebar .image-library-panel::-webkit-scrollbar-thumb {
    background: #2d3561;
    border-radius: 2px;
}

.image-library-sidebar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 0;
}

.image-library-sidebar-grid .image-library-item {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    flex-shrink: unset;
}

.image-library-sidebar-grid .image-library-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-library-sidebar .image-library-expand-btn {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: 8px 8px;
    flex-shrink: 0;
    background: #111628;
    z-index: 2;
}

.image-library-sidebar .image-library-empty {
    font-size: 0.8rem;
    padding: 20px 8px;
    text-align: center;
    color: #6b7280;
    flex: 1;
}

.image-library-sidebar .image-library-sidebar-grid:has(.image-library-empty) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sidebar divider between library and action buttons */
.sidebar-divider {
    height: 1px;
    background: #1e2647;
    margin: 12px 0;
    flex-shrink: 0;
}

/* Responsive: hide horizontal library on desktop, show on mobile */
@media (min-width: 1081px) {
    .image-library-horizontal-only {
        display: none !important;
    }
}

/* Mobile-only Browse Products button */
.mobile-browse-products-btn {
    width: 30%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #667eea 0%, #7c8ff0 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    transition: opacity 0.2s;
}

.mobile-browse-products-btn:hover {
    opacity: 0.9;
}

/* Delete confirmation dialog overlay */
.delete-image-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.delete-image-dialog {
    background: #111628;
    border-radius: 12px;
    padding: 24px;
    max-width: 320px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.delete-image-preview {
    width: 120px;
    height: 120px;
    margin: 0 auto 16px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #1e2647;
}

.delete-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.delete-image-dialog p {
    margin: 0 0 20px;
    color: #e0e0e0;
    font-size: 1rem;
}

.delete-image-dialog small {
    color: #8a90b8;
}

.delete-image-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.delete-image-cancel-btn,
.delete-image-confirm-btn {
    padding: 10px 24px;
    border-radius: 6px;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.delete-image-cancel-btn {
    background: #1a1f3a;
    color: #c0c0d0;
}

.delete-image-cancel-btn:hover {
    background: #1e2647;
}

.delete-image-confirm-btn {
    background: #f87171;
    color: #fff;
}

.delete-image-confirm-btn:hover {
    background: #f87171;
}

/* ========================================== */
/* IMAGE LIBRARY LAZY LOADING & MODAL         */
/* ========================================== */

/* Loading skeleton for horizontal scroll */
.image-library-loading-item {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    background: linear-gradient(90deg, #151a30 25%, #1e2647 50%, #151a30 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Expand/View All button */
.image-library-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    margin-bottom: 20px;
    padding: 8px 16px;
    background: #0c1022;
    border: 1px solid #1e2647;
    border-radius: 8px;
    color: #764ba2;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    width: 100% !important;
    box-sizing: border-box;
}

.image-library-expand-btn:hover {
    background: #764ba2;
    color: #fff;
    border-color: #764ba2;
}

.image-library-expand-btn span {
    flex-shrink: 0;
    white-space: nowrap;
}

.image-library-expand-btn svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* Modal overlay */
.image-library-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

/* Modal content */
.image-library-modal-content {
    position: relative;
    background: #111628;
    border-radius: 12px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Modal header */
.image-library-modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 16px 72px 16px 20px;
    border-bottom: 1px solid #1e2647;
    background: #0c1022;
}

.image-library-modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #e0e0e0;
}

.image-library-modal-close {
    z-index: 20;
}

.add-social-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.add-social-modal {
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
}

.add-social-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    padding-right: 56px;
}

/* Modal tabs */
.image-library-modal-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    background: #111628;
    border-bottom: 1px solid #1e2647;
}

.modal-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    background: #764ba2;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    transition: all 0.2s ease;
}

.modal-tab:hover {
    background: #5568d3;
}

.modal-tab.active {
    background: #5568d3;
}

/* Modal body */
.image-library-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #0c1022;
}

/* Modal grid */
.image-library-modal-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

/* Modal grid items */
.image-library-modal-item {
    aspect-ratio: 1;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    background: #151a30;
}

.image-library-modal-item:hover {
    border-color: #764ba2;
    transform: scale(1.02);
}

.image-library-modal-item.selected {
    border-color: #764ba2;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}

.image-library-modal-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Delete button on modal items */
.image-library-modal-item .image-library-delete-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(220, 53, 69, 0.9);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
}

.image-library-modal-item:hover .image-library-delete-btn {
    opacity: 1;
}

.image-library-modal-item .image-library-delete-btn:hover {
    background: #f87171;
    transform: scale(1.1);
}

/* Modal loading indicator */
.image-library-modal-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px 20px;
    color: #8a90b8;
}

.image-library-modal-loader .spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #1e2647;
    border-top-color: #764ba2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Modal end indicator */
.image-library-modal-end {
    text-align: center;
    padding: 20px;
    color: #4b5280;
    font-size: 0.9rem;
}

/* Body scroll lock when modal is open */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* ========================================== */
/* IMAGE LIBRARY MODAL - RESPONSIVE           */
/* ========================================== */

/* Tablet: 4 columns */
@media (min-width: 481px) and (max-width: 768px) {
    .image-library-modal-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .image-library-modal-content {
        max-width: 95%;
    }
}

/* Mobile: 3 columns, full screen modal */
@media (max-width: 480px) {
    .image-library-modal-overlay {
        padding: 0;
    }

    .image-library-modal-content {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .image-library-modal-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .image-library-modal-body {
        padding: 12px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .image-library-modal-header {
        padding: 12px 64px 12px 16px;
    }

    .image-library-modal-title {
        font-size: 1.1rem;
    }

    .image-library-modal-tabs {
        padding: 8px 12px;
        gap: 6px;
    }

    .modal-tab {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    /* Larger touch targets for delete buttons on mobile */
    .image-library-modal-item .image-library-delete-btn {
        width: 28px;
        height: 28px;
        opacity: 1; /* Always visible on mobile */
    }
}

/* Small mobile */
@media (max-width: 360px) {
    .image-library-modal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Design container - DISABLED, using editor-workspace instead */
.design-container-with-sidebar {
    display: none !important;
}


/* ============================================================================
   NEW HOME PAGE STYLES
   ============================================================================ */

/* Top Search Bar - Reusable across pages */
.top-search-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: #12172e;
    border-bottom: 1px solid #1e2647;
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 20px;
    width: 100%;
    min-width: 0;
}

/* Left section with hamburger + logo */
.top-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Hamburger button in top bar */
.top-bar-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(102, 126, 234, 0.1);
    transition: all 0.2s ease;
    font-weight: bold;
    user-select: none;
}

.top-bar-hamburger:hover {
    background: rgba(102, 126, 234, 0.15);
    transform: scale(1.05);
}

.top-bar-hamburger:active {
    transform: scale(0.95);
}

.top-bar-logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 6px;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.top-bar-logo:hover {
    background: rgba(102, 126, 234, 0.15);
}

.top-bar-logo-img {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    transition: transform 0.2s ease;
}

.top-bar-logo:hover .top-bar-logo-img {
    transform: scale(1.1);
}

.top-bar-search {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 850px;
    min-width: 0;
    background: transparent;
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.top-bar-search:focus-within {
    background: transparent;
    /* border-color: rgba(255, 255, 255, 0.5); */
    /* box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15); */
}

.top-bar-search-input {
    flex: 1;
    padding: 14px 18px;
    border: none;
    font-size: 15px;
    outline: none;
    background: rgba(26, 31, 58, 0.95);
    color: #1f2937;
    box-shadow: none;
}

.top-bar-search-input::placeholder {
    color: #6b7280;
}

.top-bar-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 3px;
    background: #667eea;
    color: white;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.top-bar-search-btn:hover {
    background: #5568d3;
    transform: scale(1.02);
}

.top-bar-search-btn svg {
    width: 20px;
    height: 20px;
}

.top-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.top-bar-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(102, 126, 234, 0.15);
    border-radius: 10px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.top-bar-action-btn:hover {
    background: rgba(102, 126, 234, 0.25);
    color: white;
}

.top-bar-action-btn svg {
    width: 20px;
    height: 20px;
}

.top-bar-country-btn {
    width: auto;
    padding: 0 10px;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.top-bar-cart-btn {
    position: relative;
}

.cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.top-bar-login-btn {
    width: auto;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 600;
    background: rgba(26, 31, 58, 0.95);
    color: #667eea;
}

.top-bar-login-btn:hover {
    background: #111628;
    color: #5568d3;
}

/* Hide the old burger when top-search-bar is present */
.top-search-bar ~ .burger,
.burger:has(~ .top-search-bar) {
    display: none !important;
}

@media (max-width: 768px) {
    .top-search-bar {
        padding: 8px 10px;
        gap: 6px;
    }

    .top-bar-left {
        gap: 6px;
    }

    .top-bar-hamburger {
        padding: 6px 8px;
        font-size: 1.2rem;
    }

    .top-bar-logo-img {
        width: 34px;
        height: 34px;
    }

    /* Search: keep input, hide the button (use Enter to search) */
    .top-bar-search {
        flex: 1;
        min-width: 0;
    }

    .top-bar-search-input {
        padding: 10px 14px;
        font-size: 14px;
        border-radius: 10px;
    }

    .top-bar-search-btn {
        display: none;
    }

    .top-bar-actions {
        gap: 4px;
    }

    .top-bar-action-btn {
        width: 38px;
        height: 38px;
    }

    /* Shrink country label */
    .top-bar-country-btn {
        padding: 0 6px;
        font-size: 0.8rem;
    }

    /* Hide login button text, show as icon-size */
    .top-bar-login-btn {
        padding: 0 10px;
        font-size: 12px;
    }
}

/* Home Main Wrapper */
.home-main-wrapper {
    width: 100%;
    max-width: 1400px;
    min-width: 0;
    margin: 0 auto;
    padding: 0 20px;
}


/* Home Sections */
.home-section {
    margin: 40px 0;
}

.home-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.home-section-title {
    font-size: 1.5rem;
    color: #8a90b8;
    font-weight: 700;
    font-family: 'Titan One', sans-serif;
}

.home-section-see-all {
    color: #667eea;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
}

.home-section-see-all:hover {
    color: #5568d3;
    text-decoration: underline;
}

/* Image Grid */
.home-image-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.home-image-card {
    background: #111628;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.home-image-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.home-image-wrapper {
    aspect-ratio: 1;
    overflow: hidden;
}

.home-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.home-image-card:hover .home-image-img {
    transform: scale(1.05);
}

.home-image-info {
    padding: 10px 12px;
}

.home-image-store {
    font-size: 0.85rem;
    color: #8a90b8;
    font-weight: 500;
}

/* Stores Grid */
.home-stores-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.home-store-card {
    position: relative;
    background: #111628;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.store-flag-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 20px;
    line-height: 1;
}

.home-store-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.home-store-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #7c8ff0 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 12px;
}

.home-store-info {
    text-align: center;
}

.home-store-name {
    font-weight: 600;
    color: #7c8ff0;
    margin-bottom: 4px;
}

.home-store-count {
    font-size: 0.85rem;
    color: #6b7280;
}

/* Category Section */
.home-category-section {
    background: #0c1022;
    padding: 40px;
    border-radius: 16px;
    margin: 40px 0;
}

.home-category-section .home-section-title {
    text-align: center;
    margin-bottom: 24px;
}

.home-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.home-category-card {
    background: #111628;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.home-category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.home-category-card:hover .home-category-collage-img {
    transform: scale(1.05);
}

.home-category-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 1;
    overflow: hidden;
    gap: 2px;
    background: #1e2647;
}

.home-category-collage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.home-category-collage-placeholder {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: #0c1022;
}

.home-category-name {
    font-size: 0.85rem;
    color: #e0e0e0;
    font-weight: 600;
    line-height: 1.3;
    padding: 10px 12px;
    text-align: center;
}

.home-no-results {
    grid-column: 1 / -1;
    text-align: center;
    color: #6b7280;
    padding: 40px;
}

/* View More Button */
.home-view-more-container {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.home-view-more-btn {
    background: linear-gradient(135deg, #667eea 0%, #7c8ff0 100%);
    color: white;
    padding: 12px 32px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.home-view-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.home-view-more-btn:active {
    transform: translateY(0);
}

/* Store Avatar with Image */
.home-store-avatar-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.home-store-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .home-image-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .home-stores-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .home-category-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }

    .top-bar-search {
        max-width: 400px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .top-search-bar {
        padding: 10px 12px;
        gap: 10px;
    }

    .top-bar-logo {
        padding: 4px;
    }

    .top-bar-logo-img {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .top-bar-search {
        flex: 1;
        max-width: none;
        border-radius: 10px;
    }

    .top-bar-search-input {
        padding: 12px 14px;
        font-size: 14px;
    }

    .top-bar-search-btn {
        width: 38px;
        height: 38px;
        border-radius: 8px;
    }

    .top-bar-search-btn svg {
        width: 18px;
        height: 18px;
    }

    .top-bar-actions {
        gap: 6px;
    }

    .top-bar-action-btn {
        width: 38px;
        height: 38px;
        border-radius: 8px;
    }

    .top-bar-action-btn svg {
        width: 18px;
        height: 18px;
    }

    .top-bar-login-btn {
        padding: 0 14px;
        font-size: 13px;
    }

    .home-hero-section {
        padding: 40px 20px;
        margin: 16px 0;
    }

    .home-hero-title {
        font-size: 1.8rem;
    }

    .home-hero-subtitle {
        font-size: 1rem;
    }

    .home-image-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .home-stores-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .home-category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .home-category-name {
        font-size: 0.8rem;
        padding: 8px 10px;
    }

    .home-section-title {
        font-size: 1.25rem;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 480px) {
    .home-category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .top-bar-action-btn {
        padding: 8px 10px;
        font-size: 16px;
    }

    .top-bar-login-btn {
        padding: 8px 14px;
        font-size: 13px;
    }
}


/* ============================================================================
   STOREFRONT PAGE STYLES
   ============================================================================ */

.storefront-main-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px;
}

/* Storefront Header */
.storefront-header {
    position: relative;
    display: flex;
    gap: 32px;
    padding: 32px;
    background: #111628;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 32px;
}

.storefront-loading {
    text-align: center;
    color: #6b7280;
    padding: 40px;
    width: 100%;
}

.storefront-error {
    text-align: center;
    color: #f87171;
    padding: 40px;
    width: 100%;
}

/* Featured Image Section */
.storefront-featured {
    flex-shrink: 0;
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.storefront-featured-wrapper {
    width: 280px;
    height: 280px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.storefront-featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.storefront-featured-wrapper:hover .storefront-featured-img {
    transform: scale(1.02);
}

.storefront-featured-cta {
    background: linear-gradient(135deg, #667eea 0%, #7c8ff0 100%);
    color: white;
    text-align: center;
    padding: 14px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.storefront-featured-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.storefront-no-featured {
    width: 280px;
    height: 280px;
    border-radius: 12px;
    background: #151a30;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}

/* Store Info Section */
.storefront-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.storefront-name {
    font-size: 2rem;
    font-weight: 700;
    color: #7c8ff0;
    margin: 0;
}

.storefront-tagline {
    font-size: 1.1rem;
    color: #8a90b8;
    line-height: 1.5;
    margin: 0;
}

.storefront-socials {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.storefront-social-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.storefront-social-link:hover {
    color: #5568d3;
    text-decoration: underline;
}

.storefront-social-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #151a30;
    border-radius: 50%;
    transition: all 0.3s ease;
    text-decoration: none;
}

.storefront-social-icon-link:hover {
    background: #1e2647;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.storefront-social-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.storefront-website-link {
    font-size: 20px;
}

.storefront-design-count {
    font-size: 1.1rem;
    font-weight: 600;
    color: #c0c0d0;
}

/* Category Pills - Reusable across storefront header & store cards */
.category-pills-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    align-self: flex-start;
}

.category-pill {
    display: inline-block;
    background: #17203a;
    color: #667eea;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.category-pill-hidden {
    display: none;
}

.category-pill-more {
    background: #667eea;
    color: white;
    cursor: pointer;
    transition: background 0.2s ease;
}

.category-pill-more:hover {
    background: #764ba2;
}

/* Small variant for store cards */
.category-pills-sm .category-pill {
    padding: 3px 8px;
    font-size: 0.7rem;
}

/* Sorting Tabs */
.storefront-sorting {
    margin-bottom: 24px;
}

.storefront-sort-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid #eee;
    padding-bottom: 12px;
}

.storefront-sort-tab {
    padding: 10px 20px;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    color: #8a90b8;
    font-weight: 500;
    transition: all 0.2s;
    position: relative;
}

.storefront-sort-tab:hover {
    color: #667eea;
    background: #0c1022;
}

.storefront-sort-tab.active {
    color: #667eea;
    background: #17203a;
}

.storefront-sort-tab.active::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 0;
    right: 0;
    height: 3px;
    background: #667eea;
    border-radius: 3px 3px 0 0;
}

/* Image Grid */
.storefront-grid-section {
    margin-bottom: 24px;
}

.storefront-image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.storefront-image-card {
    background: #111628;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.storefront-image-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.storefront-image-wrapper {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.storefront-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s;
}

.storefront-image-card:hover .storefront-image-img {
    transform: scale(1.05);
}

.storefront-image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.storefront-image-card:hover .storefront-image-overlay {
    opacity: 1;
}

.storefront-quick-buy {
    background: #111628;
    color: #667eea;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}

.storefront-quick-buy:hover {
    background: #667eea;
    color: white;
    transform: scale(1.05);
}

/* Product card variant */
.storefront-product-card {
    border-color: rgba(102, 126, 234, 0.3);
}

/* Item type badge (Product / Design) */
.storefront-item-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 2;
}

.storefront-item-badge--product {
    background: linear-gradient(135deg, #7c8ff0, #764ba2);
    color: #fff;
}

/* Replacement modal */
.storefront-replacement-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.storefront-replacement-dialog {
    background: #111628;
    border-radius: 20px;
    padding: 36px 32px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.storefront-replacement-icon {
    font-size: 2.4rem;
}

.storefront-replacement-title {
    margin: 0;
    font-size: 1.2rem;
    color: #7c8ff0;
}

.storefront-replacement-body {
    margin: 0;
    font-size: 0.92rem;
    color: #8a90b8;
    line-height: 1.55;
}

.storefront-replacement-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.storefront-replacement-cancel {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 6px;
}

.storefront-replacement-cancel:hover {
    color: #7c8ff0;
}

.storefront-image-info {
    padding: 12px;
}

.storefront-image-desc {
    font-size: 0.9rem;
    color: #c0c0d0;
    line-height: 1.4;
    margin-bottom: 4px;
}

.storefront-image-purchases {
    font-size: 0.8rem;
    color: #6b7280;
}

.storefront-no-images {
    grid-column: 1 / -1;
    text-align: center;
    color: #6b7280;
    padding: 60px 20px;
    background: #0c1022;
    border-radius: 12px;
}

/* Load More Button */
.storefront-load-more-container {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .storefront-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .storefront-featured {
        width: 100%;
        max-width: 300px;
    }

    .storefront-featured-wrapper {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .storefront-info {
        align-items: center;
    }

    .storefront-socials {
        justify-content: center;
    }

    .category-pills-wrapper {
        justify-content: center;
    }

    .storefront-image-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .storefront-main-wrapper {
        padding: 16px;
    }

    .storefront-header {
        padding: 20px;
        gap: 20px;
    }

    .storefront-name {
        font-size: 1.5rem;
    }

    .storefront-sort-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .storefront-sort-tab {
        padding: 8px 16px;
        white-space: nowrap;
    }

    .storefront-image-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 480px) {
    .storefront-featured {
        max-width: 100%;
    }

    .storefront-image-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .storefront-image-info {
        padding: 8px;
    }

    .storefront-image-desc {
        font-size: 0.8rem;
    }
}

/* ============================================================================
   SEARCH RESULTS PAGE
   ============================================================================ */

.search-results-wrapper {
    max-width: 1400px;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    padding: 24px;
}

.search-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #1e2647;
}

.search-title {
    font-size: 1.5rem;
    color: #7c8ff0;
    margin-bottom: 8px;
}

.search-results-count {
    font-size: 0.95rem;
    color: #8a90b8;
}

.search-loading {
    text-align: center;
    padding: 60px 20px;
    font-size: 1.1rem;
    color: #8a90b8;
}

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: start;
    width: 100%;
    min-width: 0;
}

.search-result-card {
    background: #111628;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width: 0;
    width: 100%;
}

.search-result-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.search-result-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: #0c1022;
    min-width: 0;
}

.search-result-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.search-result-card:hover .search-result-image {
    transform: scale(1.05);
}

.search-result-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.search-result-card:hover .search-result-overlay {
    opacity: 1;
}

.search-result-quick-buy {
    background: #764ba2;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.search-result-quick-buy:hover {
    background: #3a9a93;
}

.search-result-info {
    padding: 12px;
    min-width: 0;
}

.search-result-description {
    font-size: 0.9rem;
    color: #e0e0e0;
    margin-bottom: 8px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.search-result-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #6b7280;
    min-width: 0;
}

.search-result-store {
    min-width: 0;
    flex: 1;
}

.search-result-store span {
    color: #764ba2;
    cursor: pointer;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-store span:hover {
    text-decoration: underline;
}

.search-result-sales {
    color: #8a90b8;
    flex-shrink: 0;
    white-space: nowrap;
}

.search-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #8a90b8;
}

.search-no-results p {
    margin-bottom: 12px;
}

.search-no-results a {
    color: #764ba2;
    text-decoration: none;
}

.search-no-results a:hover {
    text-decoration: underline;
}

.search-error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #f87171;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .search-results-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .search-results-wrapper {
        padding: 16px;
    }

    .search-results-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .search-title {
        font-size: 1.25rem;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 480px) {
    .search-results-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .search-result-info {
        padding: 8px;
    }

    .search-result-description {
        font-size: 0.8rem;
    }
}

/* ============================================================================
   BROWSE DESIGNS PAGE
   ============================================================================ */

.browse-wrapper {
    max-width: 1400px;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    padding: 24px;
}

.browse-category-bar {
    display: flex;
    gap: 8px;
    padding: 12px 0 20px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.browse-category-bar.dragging {
    cursor: grabbing;
}

.browse-category-bar::-webkit-scrollbar {
    display: none;
}

.browse-category-pill {
    padding: 8px 18px;
    border-radius: 20px;
    border: 2px solid #1e2647;
    background: #111628;
    color: #7c8ff0;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.browse-category-pill:hover {
    border-color: #764ba2;
    background: #f0fffe;
}

.browse-category-pill.active {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    color: white;
    border-color: transparent;
}

.browse-pill-back {
    background: #0c1022;
    border-color: #2d3561;
    color: #8a90b8;
    font-weight: 700;
}

.browse-pill-back:hover {
    background: #1e2647;
    border-color: #4b5280;
}

.browse-pill-pinned {
    flex-shrink: 0;
}

.browse-pill-sub {
    animation: pillSlideIn 0.25s ease forwards;
    opacity: 0;
}

@keyframes pillSlideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

.browse-pills-animate .browse-pill-sub:nth-child(3) { animation-delay: 0.02s; }
.browse-pills-animate .browse-pill-sub:nth-child(4) { animation-delay: 0.04s; }
.browse-pills-animate .browse-pill-sub:nth-child(5) { animation-delay: 0.06s; }
.browse-pills-animate .browse-pill-sub:nth-child(6) { animation-delay: 0.08s; }
.browse-pills-animate .browse-pill-sub:nth-child(7) { animation-delay: 0.10s; }
.browse-pills-animate .browse-pill-sub:nth-child(8) { animation-delay: 0.12s; }
.browse-pills-animate .browse-pill-sub:nth-child(9) { animation-delay: 0.14s; }
.browse-pills-animate .browse-pill-sub:nth-child(10) { animation-delay: 0.16s; }

.browse-pill-icon {
    font-size: 1rem;
}

.browse-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #1e2647;
}

.browse-title {
    font-size: 1.5rem;
    color: #667eea;
    font-weight: 700;
    font-family: 'Titan One', sans-serif;
    margin: 0 0 4px 0;
}

.browse-results-count {
    font-size: 0.9rem;
    color: #6b7280;
}

.browse-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: start;
    width: 100%;
    min-width: 0;
}

.browse-card {
    background: #111628;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    min-width: 0;
    width: 100%;
}

.browse-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.browse-card-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    min-width: 0;
}

.browse-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.browse-card:hover .browse-card-image {
    transform: scale(1.05);
}

.browse-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(118, 75, 162, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.browse-card:hover .browse-card-overlay {
    opacity: 1;
}

.browse-card-quick-view {
    background: #111628;
    color: #667eea;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.browse-card-info {
    padding: 12px;
    min-width: 0;
}

.browse-card-description {
    font-size: 0.85rem;
    color: #e0e0e0;
    margin-bottom: 6px;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.browse-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    min-width: 0;
}

.browse-card-store {
    color: #764ba2;
    font-weight: 600;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.browse-card-store:hover {
    text-decoration: underline;
}

.browse-card-sales {
    color: #6b7280;
    flex-shrink: 0;
    white-space: nowrap;
}

.browse-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: #6b7280;
    font-size: 0.95rem;
}

.browse-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid #1e2647;
    border-top-color: #764ba2;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.browse-end {
    text-align: center;
    padding: 30px 20px;
    color: #4b5280;
    font-size: 0.9rem;
}

.browse-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
    font-size: 1rem;
}

/* Browse Page Responsive */
@media (max-width: 1024px) {
    .browse-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .browse-wrapper {
        padding: 16px;
    }

    .browse-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .browse-title {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .browse-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .browse-card-info {
        padding: 8px;
    }

    .browse-category-pill {
        padding: 6px 14px;
        font-size: 0.8rem;
    }
}

/* ============================================================================
   FEATURED STORES PAGE
   ============================================================================ */

.stores-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

.stores-header {
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #1e2647;
}

.stores-title {
    font-size: 1.5rem;
    color: #667eea;
    font-weight: 700;
    font-family: 'Titan One', sans-serif;
    margin: 0 0 4px 0;
}

.stores-results-count {
    font-size: 0.9rem;
    color: #6b7280;
}

.stores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.stores-card {
    background: #111628;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stores-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.stores-card-image-wrapper {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #1e2647 0%, #2d3561 100%);
}

.stores-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.stores-card:hover .stores-card-image {
    transform: scale(1.05);
}

.stores-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: #667eea;
    background: linear-gradient(135deg, #1e2647 0%, #2d3561 100%);
    font-family: 'Titan One', sans-serif;
}

.stores-card-info {
    padding: 16px;
}

.stores-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 6px;
}

.stores-card-stats {
    display: flex;
    gap: 16px;
}

.stores-card-stat {
    font-size: 0.85rem;
    color: #6b7280;
}

.stores-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: #6b7280;
    font-size: 0.95rem;
}

.stores-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid #1e2647;
    border-top-color: #764ba2;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.stores-end {
    text-align: center;
    padding: 30px 20px;
    color: #4b5280;
    font-size: 0.9rem;
}

.stores-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
    font-size: 1rem;
}

/* Stores Page Responsive */
@media (max-width: 1024px) {
    .stores-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stores-wrapper {
        padding: 16px;
    }

    .stores-title {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .stores-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stores-card-info {
        padding: 12px;
    }
}

/* ============================================================================
   PRODUCT CAROUSEL - Smooth Auto-scrolling with Hover Pause
   ============================================================================ */

.product-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    padding-top: 60px;
    padding-bottom: 100px;
    background: linear-gradient(135deg, #12172e 0%, #1e2647 100%);
    margin-top: 40px;
    margin-bottom: -200px;
    position: relative;
}

.product-carousel-title {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    color: #7c8ff0;
    margin-bottom: 30px;
    font-family: 'Titan One', sans-serif;
}

.product-carousel-track {
    display: flex;
    gap: 20px;
    animation: scroll-carousel 175s linear infinite;
    width: fit-content;
    padding: 0 20px;
}

@keyframes scroll-carousel {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.product-carousel-item {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #111628;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-carousel-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
}

.product-carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .product-carousel-title {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    .product-carousel-item {
        width: 150px;
        height: 150px;
    }

    .product-carousel-track {
        gap: 15px;
        animation: scroll-carousel 175s linear infinite;
    }
}

@media (max-width: 480px) {
    .product-carousel-wrapper {
        padding: 40px 0;
    }

    .product-carousel-title {
        font-size: 1.2rem;
    }

    .product-carousel-item {
        width: 120px;
        height: 120px;
    }

    .product-carousel-track {
        gap: 10px;
        animation: scroll-carousel 175s linear infinite;
    }
}

/* ============================================================================
   DESIGN STUDIO PAGE
   ============================================================================ */

.design-studio-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 40px 20px;
}

.design-studio-header {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, #12172e 0%, #1e2647 100%);
    border-radius: 16px;
    margin-bottom: 30px;
}

.design-studio-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #7c8ff0;
    margin-bottom: 12px;
    font-family: 'Titan One', sans-serif;
}

.design-studio-subtitle {
    font-size: 1.1rem;
    color: #8a90b8;
    max-width: 600px;
    margin: 0 auto;
}

/* Header sizing on design studio/dashboard */
.design-studio-wrapper > .main-header-card {
    padding: 40px 40px;
    margin: 16px 0;
}

/* Two-column action cards */
.design-studio-actions-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 30px;
    min-height: 55vh;
}

.design-studio-card {
    background: #111628;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.design-studio-card:hover {
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
}

.design-studio-card-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #7c8ff0;
    margin-bottom: 10px;
    font-family: 'Titan One', sans-serif;
}

.design-studio-card-description {
    font-size: 0.95rem;
    color: #8a90b8;
    margin-bottom: 20px;
    line-height: 1.5;
    max-width: 380px;
}

/* Input styling */
.design-studio-input-group {
    margin-bottom: 16px;
    width: 100%;
    max-width: 380px;
}

.design-studio-input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #1e2647;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #0c1022;
}

.design-studio-input:focus {
    outline: none;
    border-color: #764ba2;
    background: #111628;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.design-studio-input::placeholder {
    color: #4b5280;
}

/* Button styling */
.design-studio-btn {
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    width: 70%;
    max-width: 300px;
    margin: 8px auto 20px auto;
    display: block;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.design-studio-btn-primary {
    background: linear-gradient(135deg, #764ba2 0%, #7c8ff0 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.design-studio-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.design-studio-btn-primary:active {
    transform: translateY(0);
}

.design-studio-btn-secondary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(118, 75, 162, 0.3);
}

.design-studio-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(118, 75, 162, 0.4);
}

.design-studio-btn-secondary:active {
    transform: translateY(0);
}

.design-studio-upload-container {
    margin: 20px 0;
    width: 100%;
    max-width: 380px;
}

.design-studio-helper-text {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 12px;
    text-align: center;
}

.design-studio-note {
    font-size: 0.9rem;
    color: #7c8ff0;
    background: rgba(102, 126, 234, 0.05);
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 16px;
    border-left: 4px solid #764ba2;
}

/* Responsive design */
@media (max-width: 968px) {
    .design-studio-actions-row {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .design-studio-card {
        padding: 24px;
        min-height: 280px;
    }

    .design-studio-title {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .design-studio-header {
        padding: 30px 16px;
    }

    .design-studio-title {
        font-size: 1.75rem;
    }

    .design-studio-subtitle {
        font-size: 1rem;
    }

    .design-studio-card {
        padding: 20px;
    }

    .design-studio-btn {
        padding: 12px 24px;
    }
}

/* ============================================================================
   MODERN EDITOR WORKSPACE - Turquoise/Blue Theme
   ============================================================================ */

/* Main editor workspace - 3-column layout */
.editor-workspace {
    display: grid;
    grid-template-columns: 260px 1fr 260px;
    gap: 12px;
    background: #111628;
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.1);
    margin: 20px 0;
    padding: 12px;
    min-height: 600px;
    height: calc(100vh - 120px);
    max-height: calc(100vh - 120px);
}

/* Left Sidebar - Product Selection */
.editor-sidebar-left {
    background: #111628;
    border-radius: 8px;
    border: 2px solid #1e2647;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
    min-height: 0;
}

.editor-sidebar-header {
    display: none;
}

.editor-sidebar-title {
    display: none;
}

.editor-form-container {
    flex-shrink: 0;
}

.editor-product-selection {
    margin: 0 0 12px 0;
}

.editor-attributes {
    margin-top: 12px;
}

/* Center - Canvas Area */
.editor-canvas-area {
    background: #0c1022;
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #1e2647;
}

.editor-canvas-toolbar {
    background: #0c1022;
    border-bottom: 1px solid #1e2647;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.editor-canvas-description {
    color: #8a90b8;
    font-size: 0.75rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.editor-canvas-description svg {
    color: #8a90b8;
}

.editor-canvas-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: #0c1022;
    width: 100%;
    overflow: hidden;
}

/* Canvas Actions (below canvas) */
.editor-canvas-actions {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #111628;
    border-top: 1px solid #1e2647;
    align-items: center;
    justify-content: center;
}

.editor-canvas-actions .editor-btn {
    flex: 1;
    padding: 12px 20px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.editor-canvas-actions .editor-btn:hover {
    transform: none;
}

/* Right Sidebar - Tools Panel */
.editor-sidebar-right {
    background: #111628;
    padding: 16px;
    border-radius: 8px;
    border: 2px solid #1e2647;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
    min-width: 0;
}

.editor-sidebar-right * {
    box-sizing: border-box;
}

.editor-tools-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.editor-tool-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #1e2647;
}

.editor-tool-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.editor-tool-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: #7c8ff0;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.editor-tool-control {
    margin-bottom: 8px;
    width: 100%;
}

.editor-tool-control:last-child {
    margin-bottom: 0;
}

.editor-tool-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #7c8ff0;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
    text-transform: uppercase;
    display: block;
}

.editor-tool-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.editor-tool-inline .editor-tool-btn,
.editor-sidebar-right .editor-tool-inline .editor-tool-btn {
    flex: 1;
    width: auto;
    min-width: 0;
}

/* Editor workspace select/input overrides */
.editor-workspace select,
.editor-workspace input[type="number"],
.editor-workspace input[type="text"] {
    padding: 8px 10px;
    font-size: 0.8rem;
    border: 2px solid #1e2647;
    border-radius: 8px;
    background: #111628;
    color: #7c8ff0;
    width: 100%;
    box-sizing: border-box;
}

.editor-workspace select:focus,
.editor-workspace input:focus {
    outline: none;
    border-color: #764ba2;
}

.editor-sidebar-right select,
.editor-sidebar-right input[type="number"],
.editor-sidebar-right input[type="text"],
.editor-sidebar-right input[type="color"],
.editor-sidebar-right input[type="range"],
.editor-sidebar-right button {
    width: 100% !important;
    min-width: 100%;
    box-sizing: border-box;
    font-size: 0.78rem;
}

.editor-sidebar-right select {
    padding: 8px 10px;
    height: 38px;
    border: 2px solid #1e2647;
    border-radius: 8px;
    background: #111628;
    color: #7c8ff0;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231F5E88' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

.editor-sidebar-right select:focus {
    outline: none;
    border-color: #764ba2;
}

/* Buttons inside inline flex rows should NOT be forced to 100% width */
.editor-sidebar-right .editor-tool-inline button {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

/* Editor Buttons */
.editor-btn {
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.editor-btn svg {
    width: 18px;
    height: 18px;
}

.editor-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(118, 75, 162, 0.3);
    margin-bottom: 0;
}

.editor-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(118, 75, 162, 0.4);
}

.editor-btn-cart {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    margin-top: auto;
    margin-bottom: 0;
    box-shadow: 0 4px 12px rgba(118, 75, 162, 0.3);
}

.editor-btn-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(118, 75, 162, 0.4);
}

.editor-tool-btn {
    padding: 9px 12px;
    border: 2px solid #1e2647;
    border-radius: 8px;
    background: #111628;
    color: #7c8ff0;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    white-space: nowrap;
    height: 38px;
}

.editor-tool-btn:hover {
    background: #1e2647;
    border-color: #764ba2;
    color: #764ba2;
}

.editor-tool-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.editor-tool-btn-full {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

.editor-tool-btn-danger {
    border-color: #ffebee;
    color: #f87171;
    background: #fff5f5;
}

.editor-tool-btn-danger:hover {
    background: #f87171;
    color: white;
    border-color: #f87171;
}

/* Color Picker */
.editor-color-picker {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100% !important;
    min-width: 100%;
    height: 38px;
    border: 2px solid #1e2647;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    transition: border-color 0.2s ease;
    padding: 3px;
    box-sizing: border-box;
    display: block;
}

.editor-color-picker::-webkit-color-swatch-wrapper {
    padding: 2px;
    border-radius: 4px;
}

.editor-color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

.editor-color-picker:hover {
    border-color: #764ba2;
}

.editor-tool-inline .editor-tool-label {
    flex: 0 0 auto;
    margin-bottom: 0;
    white-space: nowrap;
    min-width: 0;
}

/* Sliders */
.editor-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, #1e2647 0%, #764ba2 100%);
    outline: none;
    -webkit-appearance: none;
    margin: 8px 0 4px 0;
}

.editor-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #764ba2 0%, #7c8ff0 100%);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
    transition: transform 0.2s ease;
}

.editor-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}

.editor-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #764ba2 0%, #7c8ff0 100%);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
    border: none;
}

.editor-slider-value {
    font-size: 0.78rem;
    color: #7c8ff0;
    font-weight: 700;
    text-align: center;
    margin: 6px 0 0 0;
    display: block;
}

/* ========== Shopping Cart Styles ========== */

/* Page wrapper */
.cart-page-wrapper {
    max-width: 920px;
    margin: 0 auto;
    padding: 20px 16px 40px;
    width: 100%;
}

/* Header */
.cart-page-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 2px solid #1e2647;
    margin-bottom: 20px;
}

.cart-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #7c8ff0;
    margin: 0;
}

.cart-page-item-count {
    font-size: 1rem;
    color: #8a90b8;
    font-weight: 400;
}

/* Cart items list */
.cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Individual cart item card */
.cart-item-card {
    padding: 20px 0;
    border-bottom: 1px solid #1e2647;
}

.cart-item-card:last-child {
    border-bottom: none;
}

/* Horizontal layout: image left, details right */
.cart-item-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.cart-item-image {
    flex: 0 0 180px;
    width: 180px;
    background: #0c1022;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cart-item-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #7c8ff0;
    line-height: 1.3;
}

/* Overlay container for items with dimensions */
.cart-overlay-container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 180px;
}

.cart-product-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

/* Side by side images (for items without dimensions) */
.cart-item-image-sidebyside {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px;
}

.cart-sidebyside-item {
    width: 100%;
    display: flex;
    justify-content: center;
}

.cart-sidebyside-img {
    max-width: 100%;
    max-height: 80px;
    border-radius: 6px;
}

/* Product info section */
.cart-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cart-info-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 1px 0;
}

.cart-info-label {
    font-weight: 500;
    color: #8a90b8;
    font-size: 0.85rem;
}

.cart-info-value {
    color: #e0e0e0;
    font-size: 0.85rem;
}

/* Individual cart item is position context for delete button */
.cart-item-card {
    position: relative;
}

/* Price row */
.cart-item-price-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #151a30;
}

.cart-item-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: #7c8ff0;
}

/* Delete button — top-right corner of card */
.cart-delete-btn {
    position: absolute;
    top: 20px;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 6px;
    color: #f87171;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.cart-delete-btn:hover {
    background: #fff0f0;
}

/* Empty cart */
.empty-cart-message {
    text-align: center;
    padding: 60px 20px;
    color: #8a90b8;
}

.empty-cart-message svg {
    display: block;
    margin: 0 auto 20px;
}

.empty-cart-message h3 {
    color: #7c8ff0;
    margin-bottom: 10px;
}

/* ===== Summary Section (below items) ===== */
.cart-summary {
    margin-top: 10px;
}

.cart-summary-divider {
    height: 2px;
    background: #1e2647;
    margin-bottom: 20px;
}

.cart-summary-row {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 12px;
    padding: 0 0 20px;
}

.cart-summary-label {
    font-size: 1.1rem;
    color: #e0e0e0;
}

.cart-summary-total {
    font-size: 1.4rem;
    font-weight: 700;
    color: #7c8ff0;
}

.cart-summary-buttons {
    display: flex;
    justify-content: space-between;
    gap: 40%;
    flex-wrap: wrap;
}

.cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.cart-btn-secondary {
    background: #151a30;
    color: #e0e0e0;
}

.cart-btn-secondary:hover {
    background: #1e2647;
}

.cart-btn-primary {
    background: linear-gradient(135deg, #764ba2 0%, #7c8ff0 100%);
    color: white;
}

.cart-btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* ===== Related Items Section ===== */
.cart-related-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #1e2647;
}

.cart-related-header {
    margin-bottom: 20px;
}

.cart-related-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #7c8ff0;
    margin: 0;
}

.cart-related-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.cart-related-spinner {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding: 30px;
}

/* Responsive adjustments for cart */
@media (max-width: 768px) {
    .cart-page-wrapper {
        padding: 16px 12px 30px;
    }

    .cart-page-header {
        flex-direction: column;
        gap: 4px;
    }

    .cart-page-title {
        font-size: 1.4rem;
    }

    .cart-item-layout {
        flex-direction: column;
        gap: 12px;
    }

    .cart-item-image {
        flex: 0 0 auto;
        width: 100%;
        max-width: 180px;
        margin: 0 auto;
    }

    .cart-item-card {
        padding: 16px 0;
    }

    .cart-delete-btn {
        top: 16px;
        right: 0;
    }

    .cart-item-details {
        padding-right: 30px;
    }

    .cart-item-title {
        font-size: 0.95rem;
    }

    .cart-item-price {
        font-size: 1rem;
    }

    .cart-summary-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .cart-btn {
        justify-content: center;
        width: 100%;
    }

    .cart-related-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .cart-item-image {
        max-width: 140px;
    }

    .cart-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .editor-workspace {
        grid-template-columns: 240px 1fr 240px;
        gap: 10px;
        padding: 10px;
    }
}

/* Hide editor workspace and show fullsize message on small screens */
@media (max-width: 1080px) {
    .editor-workspace {
        display: none !important;
    }

    #fullsize_version_message {
        display: block !important;
        background: linear-gradient(135deg, #1e2647 0%, #2d3561 100%);
        border: 2px solid #764ba2;
        border-radius: 12px;
        padding: 24px;
        text-align: center;
        color: #7c8ff0;
        font-size: 1.1rem;
        font-weight: 600;
        margin: 20px 0;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
    }
}

@media (max-width: 480px) {
    #fullsize_version_message {
        padding: 16px;
        font-size: 0.95rem;
    }
}

/* ========== Account Creation Form Styles ========== */
.account-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
}

.form-field-full {
    grid-column: 1 / -1;
}

.form-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #7c8ff0;
    margin-bottom: 6px;
    display: block;
}

.form-input, .form-textarea {
    padding: 12px 14px;
    font-size: 0.95rem;
    border: 2px solid #1e2647;
    border-radius: 8px;
    background: #111628;
    color: #e0e0e0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

.form-input:focus, .form-textarea:focus {
    outline: none;
    border-color: #764ba2;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-input::placeholder, .form-textarea::placeholder {
    color: #4b5280;
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper .form-input {
    flex: 1;
    padding-right: 45px;
}

.password-toggle {
    position: absolute;
    right: 12px;
    cursor: pointer;
    color: #7c8ff0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    transition: color 0.2s ease;
}

.password-toggle:hover {
    color: #764ba2;
}

.char-counter {
    font-size: 0.85rem;
    color: #8a90b8;
    margin-top: 4px;
    text-align: right;
}

.form-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #7c8ff0;
    margin: 0 0 16px 0;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.category-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #111628;
    border: 2px solid #1e2647;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.category-item:hover {
    border-color: #764ba2;
    background: #f0fffe;
}

.category-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: #764ba2;
}

.category-label {
    font-size: 0.9rem;
    color: #e0e0e0;
    cursor: pointer;
    user-select: none;
}

.category-item:has(.category-checkbox:checked) {
    background: linear-gradient(135deg, #1e2647 0%, #2d3561 100%);
    border-color: #764ba2;
}

.category-item:has(.category-checkbox:checked) .category-label {
    color: #7c8ff0;
    font-weight: 600;
}

.terms-container {
    text-align: left;
}

.terms-checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

.terms-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: #667eea;
}

.terms-label {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #e0e0e0;
    cursor: pointer;
}

.terms-link {
    color: #8a90b8;
    text-decoration: underline;
    font-weight: 600;
}

.terms-link:hover {
    color: #7c8ff0;
}

.copyright-notice {
    font-size: 0.85rem;
    color: #8a90b8;
    line-height: 1.6;
    margin: 0;
}

.inputMessage {
    font-size: 0.85rem;
    color: #f87171;
    margin-top: 6px;
    min-height: 20px;
}

/* Responsive for account form */
@media (max-width: 768px) {
    .account-form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .categories-grid {
        grid-template-columns: 1fr;
    }
}

/* Money page content styling overrides */
.doc_h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #7c8ff0;
    margin: 24px 0 12px 0;
    font-family: "Titan One", sans-serif;
}

.doc_p {
    font-size: 1rem;
    line-height: 1.8;
    color: #e0e0e0;
    margin-bottom: 20px;
}

/* ============================================================================
   ABOUT PAGE STYLES
   ============================================================================ */

/* User Experience Flow Section */
.about-ux-section {
    margin-bottom: 40px;
    text-align: center;
}

.about-ux-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 32px;
}

.about-ux-card {
    background: #111628;
    border: 1px solid #1e2647;
    border-radius: 14px;
    padding: 32px 24px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-ux-card:hover {
    transform: translateY(-4px);
    border-color: #764ba2;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
}

.about-ux-icon {
    margin-bottom: 16px;
}

.about-ux-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #7c8ff0;
    margin: 0 0 10px;
}

.about-ux-text {
    font-size: 0.9rem;
    color: #8a90b8;
    line-height: 1.6;
    margin: 0;
}

/* Transition Section */
.about-transition-section {
    text-align: center;
    margin-bottom: 32px;
    padding-top: 20px;
}

/* Stats Counter Bar */
.about-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 40px 20px;
    background: linear-gradient(135deg, #667eea, #7c8ff0);
    border-radius: 16px;
    margin-bottom: 40px;
    text-align: center;
}

.about-stat-item {
    padding: 20px 10px;
}

.about-stat-number {
    font-size: 2.8rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}

.about-stat-label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

/* How It Works - Process Steps */
.about-process-section {
    text-align: center;
    margin-bottom: 50px;
}

.about-section-title {
    font-size: 2rem;
    color: #667eea;
    font-family: 'Titan One', sans-serif;
    margin-bottom: 10px;
}

.about-section-subtitle {
    font-size: 1.05rem;
    color: #8a90b8;
    margin-bottom: 40px;
}

.about-process-track {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.about-process-step {
    background: #111628;
    border: 2px solid #1e2647;
    border-radius: 12px;
    padding: 28px 20px;
    text-align: center;
    width: 200px;
    transition: all 0.3s ease;
}

.about-process-step:hover {
    border-color: #764ba2;
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.15);
}

.about-process-num {
    font-size: 1rem;
    font-weight: 700;
    color: white;
    background: #764ba2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.about-process-icon {
    margin-bottom: 12px;
}

.about-process-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #667eea;
    margin-bottom: 8px;
}

.about-process-text {
    font-size: 0.9rem;
    color: #8a90b8;
    line-height: 1.5;
}

.about-process-connector {
    display: flex;
    align-items: center;
    padding: 0 8px;
    margin-top: 40px;
}

/* Customer Creations Gallery */
.about-gallery {
    text-align: center;
    margin-bottom: 50px;
}

.about-gallery-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #8a90b8;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.about-gallery-row {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.about-gallery-thumb {
    width: 120px;
}

.about-gallery-img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.about-gallery-img:hover {
    transform: scale(1.05);
}

/* Why Aiparel - Feature Grid */
.about-features-section {
    margin-bottom: 50px;
    text-align: center;
}

.about-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.about-feature-card {
    background: #111628;
    border-radius: 12px;
    padding: 30px 24px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.about-feature-card:hover {
    border-color: #1e2647;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
}

.about-feature-icon {
    margin-bottom: 16px;
}

.about-feature-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 10px;
}

.about-feature-text {
    font-size: 0.92rem;
    color: #8a90b8;
    line-height: 1.6;
}

/* How You Earn Section */
.about-earn-section {
    background: #0c1022;
    border-radius: 16px;
    padding: 50px 30px;
    margin-bottom: 50px;
    text-align: center;
}

.about-earn-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.about-earn-stat {
    background: #111628;
    border-radius: 12px;
    padding: 24px 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border: 2px solid #1e2647;
}

.about-earn-value {
    font-size: 2.2rem;
    font-weight: 800;
    color: #764ba2;
    font-family: 'Titan One', sans-serif;
}

.about-earn-label {
    font-size: 0.85rem;
    color: #8a90b8;
    margin-top: 6px;
    font-weight: 500;
}

.about-earn-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    margin-top: 10px;
}

.about-flow-step {
    text-align: center;
    width: 120px;
}

.about-flow-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #764ba2, #667eea);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.about-flow-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e0e0e0;
}

.about-flow-arrow {
    display: flex;
    align-items: center;
    padding: 0 8px;
    margin-bottom: 30px;
}

/* Policies Accordion */
.about-policies-section {
    max-width: 800px;
    margin: 0 auto 50px;
    text-align: center;
}

.about-accordion {
    background: #111628;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border: 2px solid #1e2647;
    text-align: left;
}

.about-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    cursor: pointer;
    transition: background 0.2s;
}

.about-accordion-header:hover {
    background: #0c1022;
}

.about-accordion-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #667eea;
}

.about-accordion-arrow {
    font-size: 1.4rem;
    font-weight: 700;
    color: #764ba2;
    transition: transform 0.3s;
}

.about-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 24px;
}

.about-accordion-open .about-accordion-body {
    max-height: 300px;
    padding: 0 24px 20px;
}

.about-accordion-open .about-accordion-arrow {
    transform: rotate(45deg);
}

.about-accordion-text {
    font-size: 0.95rem;
    color: #8a90b8;
    line-height: 1.7;
}

/* Final CTA */
.about-cta-section {
    background: linear-gradient(135deg, #667eea, #7c8ff0);
    border-radius: 16px;
    padding: 60px 30px;
    text-align: center;
    margin-bottom: 40px;
}

.about-cta-title {
    font-size: 2.2rem;
    color: white;
    font-family: 'Titan One', sans-serif;
    margin-bottom: 16px;
}

.about-cta-text {
    font-size: 1.1rem;
    color: rgba(26, 31, 58, 0.9);
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

.about-cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.about-cta-btn-primary {
    display: inline-block;
    background: #764ba2;
    color: white;
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.about-cta-btn-primary:hover {
    background: #5568d3;
    transform: translateY(-2px);
}

.about-cta-btn-secondary {
    display: inline-block;
    background: transparent;
    color: white;
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: all 0.2s;
}

.about-cta-btn-secondary:hover {
    background: rgba(102, 126, 234, 0.1);
    border-color: white;
}

/* Stripe Trust */
.about-stripe-trust {
    text-align: center;
    padding: 20px 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.about-stripe-text {
    font-size: 0.9rem;
    color: #6b7280;
}

.about-stripe-logo {
    font-size: 1.1rem;
    font-weight: 700;
    color: #635bff;
}

/* About Page Responsive */
@media (max-width: 1024px) {
    .about-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-earn-highlights {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-ux-track {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .about-hero {
        padding: 40px 24px;
    }

    .about-hero-title {
        font-size: 1.8rem;
    }

    .about-section-title {
        font-size: 1.6rem;
    }

    .about-process-connector {
        display: none;
    }

    .about-process-track {
        gap: 16px;
    }

    .about-process-step {
        width: calc(50% - 8px);
    }

    .about-gallery-thumb {
        width: 90px;
    }

    .about-stat-number {
        font-size: 2.2rem;
    }

    .about-cta-title {
        font-size: 1.8rem;
    }

    .about-flow-arrow {
        display: none;
    }

    .about-earn-flow {
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .about-stats-bar {
        grid-template-columns: 1fr;
        padding: 30px 16px;
    }

    .about-stat-item {
        padding: 12px 10px;
    }

    .about-process-step {
        width: 100%;
    }

    .about-ux-track {
        grid-template-columns: 1fr;
    }

    .about-features-grid {
        grid-template-columns: 1fr;
    }

    .about-earn-highlights {
        grid-template-columns: 1fr;
    }

    .about-cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .about-hero-title {
        font-size: 1.5rem;
    }

    .about-gallery-thumb {
        width: 70px;
    }
}

/* =============================================================================
   Upgraded Design Studio
   ============================================================================= */
.studio-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
    min-height: 0;
    padding: 20px 20px 0;
    background:
        radial-gradient(circle at top left, rgba(102, 126, 234, 0.12), transparent 28%),
        linear-gradient(180deg, #0a0e27 0%, #080c1c 100%);
}

.studio-shell__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    border-radius: 14px;
    border: 1px solid rgba(102, 126, 234, 0.12);
    background: rgba(26, 31, 58, 0.9);
    box-shadow: 0 6px 18px rgba(102, 126, 234, 0.07);
    flex-shrink: 0;
}

/* Design Studio mode: just the title centered/left */
.studio-shell__header > .studio-shell__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #7c8ff0;
    white-space: nowrap;
}

/* Dashboard mode: welcome left, buttons right */
.studio-shell__header-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.studio-shell__header-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.studio-shell__store-link-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #17203a;
    border: 1px solid rgba(102, 126, 234, 0.13);
    border-radius: 8px;
    padding: 5px 10px;
}

.studio-shell__store-link {
    font-size: 0.78rem;
    color: #7c8ff0;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.studio-shell__store-link:hover {
    text-decoration: underline;
}

.studio-shell__copy-btn {
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    color: #8a90b8;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: background 0.13s, color 0.13s;
}
.studio-shell__copy-btn:hover {
    background: #1e2647;
    color: #7c8ff0;
}

.studio-shell__welcome {
    font-size: 0.88rem;
    color: #7c8ff0;
    white-space: nowrap;
}
.studio-shell__welcome strong {
    font-weight: 700;
}

.studio-shell__title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.2;
    color: #7c8ff0;
    white-space: nowrap;
}

.studio-shell__subtitle {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.3;
    color: #8a90b8;
}

.studio-shell__meta {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
}

.studio-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: #e7f4f8;
    color: #8a90b8;
    font-size: 0.85rem;
    font-weight: 600;
}

.studio-pill--muted {
    background: #f3f7fb;
    color: #8a90b8;
}

.studio-pill--accent {
    background: linear-gradient(135deg, #7c8ff0 0%, #764ba2 100%);
    color: #fff;
}

.studio-pill--clickable {
    transition: opacity 0.15s, transform 0.15s;
    user-select: none;
}
.studio-pill--clickable:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}
.studio-pill--clickable:active {
    opacity: 1;
    transform: translateY(0);
}

.studio-shell__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.studio-shell__action {
    min-height: 44px;
    border-radius: 12px;
    padding: 0 18px;
    border: none;
    box-shadow: none;
}

.studio-shell__action--secondary {
    background: #111628;
    color: #7c8ff0;
    border: 1px solid rgba(102, 126, 234, 0.18);
}

.studio-shell__action--ghost {
    background: #17203a;
    color: #7c8ff0;
}

.studio-shell__action--full {
    width: 100%;
    justify-content: center;
}

.studio-inline-message {
    font-size: 0.9rem;
    color: #8a90b8;
}

.studio-mini-note {
    font-size: 0.77rem;
    line-height: 1.45;
    color: #6b7280;
}

.studio-info-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
}

.studio-info-btn:hover { color: #7c8ff0; }

.studio-info-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: #17203a;
    border: 1px solid #2d3561;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.72rem;
    color: #8a90b8;
    line-height: 1.4;
    white-space: normal;
    width: 200px;
    z-index: 1060;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.studio-canvas-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-top: 1px solid #1e2647;
    background: rgba(26, 31, 58, 0.92);
}

.studio-canvas-footer .studio-mini-note {
    flex: 1;
    min-width: 0;
}

.studio-mini-note--mobile { display: none; }
.studio-mini-note--desktop { display: block; }

.studio-footer-price {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 5px 10px;
    font-size: 0.82rem;
    visibility: hidden;
}

.studio-footer-price.visible {
    visibility: visible;
}

.studio-canvas-footer__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.studio-canvas-footer__actions .action-button-leaf {
    width: 130px;
    text-align: center;
    justify-content: center;
}

.studio-country-modal__content {
    width: min(520px, calc(100vw - 32px));
    border-radius: 18px;
    border: 1px solid rgba(102, 126, 234, 0.15);
    box-shadow: 0 24px 70px rgba(16, 30, 44, 0.22);
}

.studio-country-modal__header {
    padding: 22px 24px 0;
    border-bottom: none;
}

.studio-country-modal__title {
    margin: 0;
    color: #7c8ff0;
    font-size: 1.35rem;
}

.studio-country-modal__body {
    padding: 18px 24px 24px;
}

.studio-country-modal__copy,
.studio-country-modal__subcopy {
    margin: 0 0 12px;
    color: #8a90b8;
    line-height: 1.5;
}

.studio-country-modal__actions {
    display: flex;
    gap: 10px;
    margin: 18px 0 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.studio-country-modal__picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.studio-country-modal__confirm {
    align-self: center;
}

.ce-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    min-height: 0;
    flex: 1;
    display: flex;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(102, 126, 234, 0.12);
    box-shadow: 0 18px 48px rgba(102, 126, 234, 0.09);
}

/* Reset global button/input styles inside the studio so they don't fight component styles */
.ce-wrapper button,
.ce-wrapper input[type=button],
.ce-wrapper input[type=submit],
.ce-wrapper input[type=text],
.ce-wrapper input[type=number],
.ce-wrapper input[type=color] {
    margin: 0;
    box-shadow: none;
}

.ce-workspace {
    display: flex;
    flex: 1;
    height: calc(100vh - 220px);
    max-height: calc(100vh - 220px);
    overflow: hidden;
    background: #080c1c;
}

.ce-icon-toolbar {
    width: 68px;
    min-width: 68px;
    background: linear-gradient(180deg, #0c1022 0%, #151a30 100%);
    border-right: 1px solid #1e2647;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 8px;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
}

.ce-toolbar-item {
    width: 52px;
    min-height: 56px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    color: #8a90b8;
    background: transparent;
    transition: all 0.16s ease;
    border: none;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 6px 4px;
    text-align: center;
}

.ce-toolbar-item:hover {
    background: #17203a;
    color: #7c8ff0;
}

.ce-toolbar-item.active {
    background: #17203a;
    color: #7c8ff0;
    box-shadow: none;
    border: 1px solid #2d3561;
}

.ce-tool-panel {
    width: 380px;
    min-width: 380px;
    height: 100%;
    background: #111628;
    border-right: 1px solid #1e2647;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ce-tab-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #2d3561 transparent;
}

.ce-tab-panel::-webkit-scrollbar {
    width: 4px;
}

.ce-tab-panel::-webkit-scrollbar-track {
    background: transparent;
}

.ce-tab-panel::-webkit-scrollbar-thumb {
    background: #2d3561;
    border-radius: 4px;
}

.ce-tab-panel::-webkit-scrollbar-thumb:hover {
    background: #764ba2;
}

.ce-product-grid::-webkit-scrollbar {
    width: 4px;
}

.ce-product-grid::-webkit-scrollbar-track {
    background: transparent;
}

.ce-product-grid::-webkit-scrollbar-thumb {
    background: #2d3561;
    border-radius: 4px;
}

.ce-product-grid::-webkit-scrollbar-thumb:hover {
    background: #764ba2;
}


.ce-panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #1e2647;
    margin-bottom: 2px;
}

.ce-panel-title-row .ce-panel-title,
.ce-panel-title-row .ce-panel-subtitle {
    border-bottom: none;
    padding-bottom: 0;
    margin: 0;
}

.ce-panel-expand-btn {
    width: 26px;
    height: 26px;
    border: 1px solid #2d3561;
    border-radius: 7px;
    background: #111628;
    color: #8a90b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.13s, border-color 0.13s, color 0.13s;
}

.ce-panel-expand-btn:hover {
    background: #17203a;
    border-color: #764ba2;
    color: #7c8ff0;
}

.ce-panel-title {
    font-size: 0.84rem;
    font-weight: 800;
    color: #8a90b8;
    margin-bottom: 2px;
    padding-bottom: 10px;
    border-bottom: 1px solid #1e2647;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ce-panel-subtitle {
    font-size: 0.72rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 6px 0 0;
}

.ce-panel-divider {
    height: 1px;
    background: #1e2647;
    margin: 10px 0;
}

.ce-image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ce-grid-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    background: #0c1022;
}

.ce-grid-item:hover {
    border-color: #764ba2;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(102, 126, 234, 0.16);
}

.ce-grid-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ce-grid-item-upload .ce-upload-delete {
    opacity: 0;
}

.ce-grid-item-upload:hover .ce-upload-delete {
    opacity: 1;
}

.ce-upload-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: none;
    background: rgba(17, 24, 39, 0.66);
    color: #fff;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ce-current-product {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #151a30 0%, #151a30 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.ce-current-label {
    font-size: 0.68rem;
    font-weight: 800;
    color: #8a90b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ce-current-name {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #667eea;
}

.ce-current-dims {
    font-size: 0.75rem;
    font-family: monospace;
    color: #f87171;
    background: #fff5f5;
    border: 1px solid #ffcdd2;
    padding: 4px 8px;
    border-radius: 999px;
}

.ce-product-search {
    margin-bottom: 2px;
}

.ce-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ce-filter-btn {
    padding: 7px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid #2d3561;
    border-radius: 999px;
    background: #111628;
    color: #8a90b8;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ce-filter-btn:hover {
    border-color: #764ba2;
    color: #667eea;
}

.ce-filter-btn.active {
    background: #7c8ff0;
    border-color: #7c8ff0;
    color: #fff;
}

.ce-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow-y: auto;
    min-height: 0;
    padding-bottom: 18px;
}

.ce-product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    background: #111628;
    border: 1px solid #2d3561;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.ce-product-card:hover {
    border-color: #764ba2;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(102, 126, 234, 0.1);
}

.ce-product-card.selected {
    border-color: #764ba2;
    background: linear-gradient(135deg, rgba(118, 75, 162, 0.18) 0%, rgba(102, 126, 234, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(118, 75, 162, 0.4);
}

.ce-product-preview {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, #151a30 0%, #1e2647 100%);
    border: 1px solid #2d3561;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.ce-product-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ce-product-badge {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    font-size: 0.55rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.ce-badge-portrait { background: #536dfe; }
.ce-badge-landscape { background: #00a38d; }
.ce-badge-square { background: #ef6c00; }

.ce-product-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ce-product-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: #c0c0d0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.ce-product-dims {
    font-size: 0.68rem;
    font-family: monospace;
    color: #6b7280;
}

/* ── Product browse / configure views ──────────────────────────────────────── */
.ce-product-browse,
.ce-product-configure {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

/* Configure view */
.ce-config-header {
    display: flex;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #1e2647;
}

.ce-config-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    height: 28px;
    border: 1px solid #2d3561;
    border-radius: 8px;
    background: #111628;
    color: #8a90b8;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.13s, border-color 0.13s, color 0.13s;
}

.ce-config-back-btn:hover {
    background: #17203a;
    border-color: #764ba2;
    color: #7c8ff0;
}

.ce-config-img-wrap {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #17203a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ce-config-product-img {
    width: 100%;
    max-height: 200px;
    height: auto;
    display: block;
    border-radius: 12px;
    object-fit: contain;
}

.ce-config-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ce-config-product-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: #7c8ff0;
    line-height: 1.3;
}

.ce-config-product-desc {
    font-size: 0.74rem;
    color: #6b7280;
    line-height: 1.5;
}

.ce-config-attrs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Override modal attribute-group styles to match studio aesthetic */
.ce-config-attrs .attribute-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ce-config-attrs .attribute-group label {
    font-size: 0.7rem;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ce-config-attrs .attribute-select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #2d3561;
    border-radius: 9px;
    font-size: 0.82rem;
    color: #c0c0d0;
    background: #111628;
    appearance: auto;
}

.ce-config-attrs .color-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ce-config-attrs .color-button {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.13s, transform 0.1s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    padding: 0;
    background-color: #2d3561;
}

.ce-config-attrs .color-button.selected {
    border-color: #7c8ff0;
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.ce-config-attrs .color-button:hover {
    transform: scale(1.1);
}

.ce-config-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ce-config-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ce-config-qty {
    width: 60px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #2d3561;
    border-radius: 8px;
    font-size: 0.82rem;
    text-align: center;
}

.ce-config-price {
    font-size: 0.88rem;
    font-weight: 700;
    color: #7c8ff0;
    padding: 8px 12px;
    background: rgba(102, 126, 234, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.ce-config-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 4px;
    border-top: 1px solid #1e2647;
    flex-shrink: 0;
    position: sticky;
    bottom: -16px;
    background: #111628;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    z-index: 1;
}

.ce-config-actions {
    display: flex;
    gap: 8px;
}

.ce-config-calc-btn {
    flex: 1;
}

.ce-config-cart-btn {
    flex: 1;
}

.ce-product-meta {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.ce-multi-badge {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 4px 7px;
    border-radius: 999px;
    background: #fff3e8;
    color: #b86000;
}

.ce-product-empty,
.ce-product-error,
.ce-layers-empty,
.ce-props-empty {
    padding: 24px 16px;
    border-radius: 14px;
    text-align: center;
    font-size: 0.86rem;
    color: #6b7280;
    background: #0c1022;
}

.ce-product-error {
    color: #c2410c;
}


.ce-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #2d3561;
    border-radius: 12px;
    background: #111628;
    color: #8a90b8;
    font-size: 0.88rem;
    box-sizing: border-box;
}

.ce-select:focus {
    outline: none;
    border-color: #764ba2;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12);
}

.ce-color-input,
.ce-tb-color {
    border: 1px solid #2d3561;
    border-radius: 10px;
    background: #111628;
    cursor: pointer;
}

.ce-color-input {
    width: 100%;
    height: 38px;
    padding: 2px;
}

.ce-tb-color {
    width: 32px;
    height: 32px;
    padding: 2px;
    border-radius: 8px;
}

.ce-slider {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2d3561 0%, #764ba2 100%);
    appearance: none;
    outline: none;
    margin: 6px 0;
}

.ce-slider::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #7c8ff0;
    cursor: pointer;
}

.ce-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #7c8ff0;
    border: none;
    cursor: pointer;
}

.ce-slider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.ce-slider-value {
    font-size: 0.76rem;
    font-weight: 700;
    color: #7c8ff0;
    background: #17203a;
    border-radius: 6px;
    padding: 2px 7px;
    min-width: 38px;
    text-align: center;
}

.ce-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ce-slider-row .ce-slider {
    flex: 1;
    min-width: 0;
}

.ce-slider-number {
    width: 52px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid #2d3561;
    border-radius: 8px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #c0c0d0;
    background: #111628;
    flex-shrink: 0;
}

.ce-dropzone {
    border: 2px dashed #2d3561;
    border-radius: 16px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
    background: #0c1022;
}

.ce-dropzone:hover,
.ce-dropzone.dragover {
    border-color: #764ba2;
    background: #17203a;
}

.ce-dropzone-icon {
    margin-bottom: 10px;
}

.ce-dropzone-text {
    font-size: 0.92rem;
    font-weight: 700;
    color: #7c8ff0;
}

.ce-dropzone-subtext {
    margin-top: 4px;
    font-size: 0.76rem;
    color: #6b7280;
}

.ce-center-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    background: #111628;
}

.ce-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: #111628;
    border-bottom: 1px solid #1e2647;
}

.ce-toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Ensure toolbar children don't inherit Bootstrap form/button resets */
.ce-toolbar-group > * {
    box-sizing: border-box;
    line-height: 1;
    vertical-align: middle;
}

.ce-tb-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #2d3561;
    border-radius: 8px;
    background: #111628;
    color: #8a90b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
    flex-shrink: 0;
}

.ce-tb-btn:hover {
    background: #17203a;
    border-color: #764ba2;
    color: #7c8ff0;
}

.ce-tb-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.ce-tb-btn-danger {
    border-color: #f1d4d4;
    color: #f87171;
}

.ce-tb-bg-transparent {
    width: auto;
    padding: 0 12px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.ce-zoom-label {
    width: 52px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0 6px;
    background: transparent;
    text-align: center;
    color: #526779;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: none;
    /* Reset Bootstrap form-control overrides */
    line-height: 30px;
    flex-shrink: 0;
}

.ce-zoom-label:focus {
    outline: none;
    border-color: #764ba2;
    background: #111628;
}

.ce-tb-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #6b7280;
}

.ce-canvas-area {
    flex: 1;
    min-height: 420px;
    position: relative;
    overflow: hidden;
    background-color: #151c35;
    background-image:
        linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.04) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.04) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.ce-canvas-area canvas {
    box-shadow: 0 16px 40px rgba(17, 24, 39, 0.16);
}

/* Mockup toggle bar */
.ce-mockup-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 10px;
    background: #17203a;
    border-bottom: 1px solid #1e2647;
}

.ce-mockup-tab {
    padding: 5px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: #8a90b8;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    letter-spacing: 0.01em;
}

.ce-mockup-tab:hover {
    background: #17203a;
    border-color: #2d3561;
}

.ce-mockup-tab--active {
    background: linear-gradient(135deg, #7c8ff0 0%, #764ba2 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.18);
}

.ce-mockup-status {
    margin-left: 8px;
    font-size: 0.78rem;
    color: #6b7280;
    font-style: italic;
}

/* Mockup overlay */
.ce-mockup-overlay {
    flex: 1;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1e22;
    overflow: hidden;
}

.ce-mockup-canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ce-mockup-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #6b7280;
    text-align: center;
    padding: 32px;
}

.ce-mockup-fallback svg {
    opacity: 0.45;
}

.ce-mockup-fallback p {
    margin: 0;
    font-size: 0.95rem;
}

.ce-mockup-fallback-sub {
    font-size: 0.8rem !important;
    opacity: 0.7;
}

.ce-right-panel {
    width: 320px;
    min-width: 320px;
    padding: 0;
    background: #111628;
    border-left: 1px solid #1e2647;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #2d3561 transparent;
}

.ce-right-panel::-webkit-scrollbar {
    width: 4px;
}

.ce-right-panel::-webkit-scrollbar-track {
    background: transparent;
}

.ce-right-panel::-webkit-scrollbar-thumb {
    background: #2d3561;
    border-radius: 4px;
}

.ce-right-panel::-webkit-scrollbar-thumb:hover {
    background: #764ba2;
}

.ce-layers-list,
.ce-props-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ce-layer-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.14s ease;
}

.ce-layer-row:hover {
    background: #0c1022;
}

.ce-layer-row.active {
    background: #17203a;
}

.ce-layer-icon {
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}

.ce-layer-name {
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
    color: #c0c0d0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ce-layer-controls {
    display: flex;
    gap: 4px;
}

.ce-layer-btn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
}

.ce-layer-btn:hover {
    background: #e9eff5;
}

.ce-layer-btn.off {
    color: #b8c3cd;
}

.ce-storefront-notice {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.78rem;
    color: #795548;
    line-height: 1.4;
    margin-bottom: 12px;
}

.ce-layer-expand-btn {
    width: 16px;
    font-size: 0.72rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Layers header action button (e.g. Group) ────────────────────────────── */
.ce-rp-header-action {
    padding: 2px 10px;
    height: 24px;
    border: 1px solid rgba(102, 126, 234, 0.5);
    border-radius: 6px;
    background: rgba(102, 126, 234, 0.1);
    color: #7c8ff0;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.13s, border-color 0.13s;
}

.ce-rp-header-action:hover {
    background: rgba(102, 126, 234, 0.22);
    border-color: #764ba2;
}

/* Ungroup button inside a layer row */
.ce-layer-ungroup-btn {
    padding: 1px 6px;
    height: 20px;
    border: 1px solid #2d3561;
    border-radius: 5px;
    background: #111628;
    color: #8a90b8;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.13s, border-color 0.13s;
}

.ce-layer-ungroup-btn:hover {
    background: #17203a;
    border-color: #764ba2;
    color: #7c8ff0;
}

/* ── Right panel collapsible sections ───────────────────────────────────── */
.ce-rp-section {
    border-bottom: 1px solid #1e2647;
}

.ce-rp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    background: #111628;
    transition: background 0.13s;
}

.ce-rp-header:hover {
    background: #0c1022;
}

.ce-rp-title {
    font-size: 0.72rem;
    font-weight: 800;
    color: #8a90b8;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.ce-rp-chevron {
    color: #6b7280;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.ce-rp-header.open .ce-rp-chevron {
    transform: rotate(180deg);
}

.ce-rp-body {
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ce-arrange-labels {
    display: flex;
    gap: 8px;
    font-size: 0.68rem;
    color: #6b7280;
    font-weight: 600;
    text-align: center;
}

.ce-arrange-labels span {
    flex: 1;
    text-align: center;
}

.ce-arrange-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.ce-arrange-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ce-arrange-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #2d3561;
    border-radius: 10px;
    background: #111628;
    color: #8a90b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.ce-arrange-btn:hover {
    background: #17203a;
    border-color: #764ba2;
    color: #7c8ff0;
}

.ce-arrange-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.ce-arrange-label {
    font-size: 0.66rem;
    font-weight: 700;
    color: #6b7280;
    text-align: center;
    white-space: nowrap;
}

/* ── Properties ─────────────────────────────────────────────────────────── */
.ce-prop-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ce-prop-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.ce-prop-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ce-prop-inline-label {
    width: 16px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #6b7280;
}

.ce-prop-number {
    width: 78px;
    padding: 8px 10px;
    border: 1px solid #2d3561;
    border-radius: 10px;
    text-align: center;
    font-size: 0.82rem;
}

.ce-prop-btn {
    padding: 9px 14px;
    border: 1px solid #2d3561;
    border-radius: 10px;
    background: #111628;
    color: #c0c0d0;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.ce-prop-btn:hover {
    border-color: #764ba2;
    background: #eef8f7;
}

.ce-prop-btn-danger {
    width: 100%;
    border-color: #f1d4d4;
    color: #f87171;
}

@media (max-width: 1280px) {
    .studio-shell__header {
        grid-template-columns: 1fr;
    }

    .studio-shell__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 1280px) {
    .ce-tool-panel {
        width: 340px;
        min-width: 340px;
    }

    .ce-right-panel {
        width: 280px;
        min-width: 280px;
    }
}

@media (max-width: 1100px) {
    .ce-tool-panel {
        width: 300px;
        min-width: 300px;
    }

    .ce-right-panel {
        width: 240px;
        min-width: 240px;
    }
}

@media (max-width: 900px) {
    .studio-shell {
        padding: 14px 14px 0;
    }

    .ce-workspace {
        min-height: auto;
        flex-direction: column;
    }

    .ce-icon-toolbar {
        width: 100%;
        min-width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid #1e2647;
    }

    .ce-toolbar-item {
        flex: 0 0 64px;
    }

    .ce-tool-panel,
    .ce-right-panel {
        width: 100%;
        min-width: 0;
        max-height: 320px;
    }

    .ce-product-grid,
    .ce-image-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .studio-shell__header {
        padding: 18px;
    }

    .studio-shell__actions,
    .studio-canvas-footer,
    .studio-country-modal__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .studio-canvas-footer__actions {
        flex-direction: row;
        align-items: stretch;
        justify-content: stretch;
    }

    .studio-canvas-footer__actions .action-button-leaf {
        flex: 1;
        width: auto;
    }

    .studio-shell__action,
    .studio-country-modal__actions .action-button-leaf,
    .studio-country-modal__confirm {
        width: 100%;
        justify-content: center;
    }

    .studio-mini-note--desktop { display: none; }
    .studio-mini-note--mobile { display: block; }

    .ce-toolbar {
        flex-wrap: wrap;
    }

    .ce-product-grid,
    .ce-image-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   Mobile Studio Layout  (≤ 768px)
   ========================================================= */
@media (max-width: 768px) {

    /* --- Overall shell / workspace --- */
    .studio-shell {
        padding: 0;
        display: flex;
        flex-direction: column;
        height: 100dvh;
        overflow: hidden;
    }

    .studio-shell__header {
        padding: 8px 12px;
        flex-shrink: 0;
        flex-wrap: wrap;
        gap: 8px;
    }

    .studio-shell__header-left {
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 6px;
        min-width: 0;
    }

    .studio-shell__store-link-wrap {
        min-width: 0;
        flex: 1;
    }

    .studio-shell__store-link {
        max-width: none;
        flex: 1;
        min-width: 0;
    }

    .studio-shell__copy-btn {
        flex-shrink: 0;
        align-self: center;
    }

    .studio-shell__welcome {
        font-size: 0.8rem;
    }

    .studio-shell__actions {
        flex-direction: row;
        flex: 1 1 100%;
        gap: 6px;
    }

    .studio-shell__action {
        flex: 1;
        justify-content: center;
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }

    /* Workspace: vertical stack — canvas fills remaining height */
    .ce-workspace {
        flex: 1 1 0;
        flex-direction: column;
        height: auto;
        max-height: none;
        overflow: hidden;
        background: #080c1c;
    }

    /* Canvas area: fixed to 55vh so it's always prominently visible */
    .ce-canvas-area,
    .ce-mockup-overlay {
        flex: none;
        height: 55vh;
        min-height: 240px;
        width: 100%;
    }

    /* Center panel fills remaining space and stacks things vertically */
    .ce-center-panel {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    /* Desktop toolbar above canvas — hidden on mobile (we use mobile bar instead) */
    .ce-toolbar {
        display: none;
    }

    /* --- Left icon toolbar becomes fixed bottom tab bar --- */
    .ce-icon-toolbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        min-width: 0;
        height: 60px;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        flex-direction: row;
        justify-content: space-around;
        align-items: stretch;
        border-right: none;
        border-top: 1px solid #1e2647;
        background: #0c1022;
        z-index: 1100;
        overflow: visible;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    }

    .ce-toolbar-item {
        flex: 1;
        min-height: 0;
        height: 60px;
        border-radius: 0;
        font-size: 0.58rem;
        padding: 6px 2px 6px;
    }

    /* --- Left slide-up drawer (tool panel) --- */
    .ce-tool-panel {
        position: fixed;
        bottom: 60px; /* sit above tab bar */
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        min-width: 0;
        max-height: 65vh;
        height: 65vh;
        border-right: none;
        border-top: 2px solid #1e2647;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.14);
        z-index: 1050;
        transform: translateY(100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
        overflow-y: auto;
        overscroll-behavior: contain;
        /* Push safe-area inset down (above tab bar handles it) */
    }

    .ce-tool-panel.ce-drawer-open {
        transform: translateY(0);
    }

    /* Drag handle for the drawer */
    .ce-tool-panel::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #2d3561;
        border-radius: 2px;
        margin: 10px auto 6px;
        flex-shrink: 0;
    }

    /* --- Right panel becomes a compact bottom sheet / hidden on mobile ---
       We inline it above the canvas area on mobile as a collapsible strip */
    .ce-right-panel {
        position: fixed;
        bottom: 60px;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        min-width: 0;
        max-height: 60vh;
        height: auto;
        border-left: none;
        border-top: 2px solid #1e2647;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.14);
        z-index: 1051;
        transform: translateY(100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .ce-right-panel.ce-drawer-open {
        transform: translateY(0);
    }

    .ce-right-panel::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #2d3561;
        border-radius: 2px;
        margin: 10px auto 6px;
        flex-shrink: 0;
    }

    /* --- Backdrop overlay when a drawer is open --- */
    .ce-drawer-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.38);
        z-index: 1040;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.24s ease;
    }

    .ce-drawer-backdrop.active {
        opacity: 1;
        pointer-events: auto;
    }

    /* --- Mobile utility bar (undo/redo/fit + layers FAB) --- */
    .ce-mobile-bar {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        background: #17203a;
        border-bottom: 1px solid #1e2647;
        flex-shrink: 0;
    }

    .ce-mobile-bar-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        border: 1px solid #2d3561;
        background: #111628;
        color: #8a90b8;
        cursor: pointer;
        font-size: 0.75rem;
        font-weight: 600;
        flex-shrink: 0;
    }

    .ce-mobile-bar-btn:active {
        background: #17203a;
    }

    .ce-mobile-bar-spacer {
        flex: 1;
    }

    /* Layers FAB */
    .ce-layers-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 6px 12px;
        border-radius: 20px;
        background: linear-gradient(135deg, #7c8ff0 0%, #764ba2 100%);
        color: #fff;
        border: none;
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 3px 10px rgba(102, 126, 234, 0.25);
    }

    /* Hide elements not useful on mobile */
    .ce-mockup-status {
        display: none;
    }

    /* Footer below canvas — fixed above the bottom tab bar */
    .studio-canvas-footer {
        position: fixed;
        bottom: 60px;
        left: 0;
        right: 0;
        z-index: 1040;
        padding: 6px 10px;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }

    .studio-mini-note {
        flex-shrink: 0;
        position: relative;
    }

    .studio-mini-note--desktop { display: none; }
    .studio-mini-note--mobile { display: block; }

    .studio-footer-price {
        flex: 1;
        font-size: 0.72rem;
        padding: 3px 7px;
        white-space: nowrap;
        text-align: center;
    }

    .studio-canvas-footer__actions {
        flex-direction: row;
        flex-shrink: 0;
        gap: 5px;
    }

    .studio-canvas-footer__actions .action-button-leaf {
        padding: 5px 10px !important;
        font-size: 0.7rem !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }

    /* Grids in panels */
    .ce-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ce-image-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Utility: hide mobile-only elements on desktop */
.ce-mobile-bar {
    display: none;
}
.ce-drawer-backdrop {
    display: none;
}
@media (max-width: 768px) {
    .ce-mobile-bar {
        display: flex;
    }
    .ce-drawer-backdrop {
        display: block;
    }
}