:root {
    --primary-color: #000000;
    --secondary-color: #D42426;
    --bg-color: #ffffff;
    --card-bg: #ffffff;
    --text-color: #1a1a1a;
    --text-muted: #64748b;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --border-color: #e2e8f0;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}

/* Navigation */
.main-nav {
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1100;
    /* Increased to stay above controls */
    padding: 1.2rem 0;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 2rem;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-color);
}

.nav-links a:hover {
    color: var(--text-muted);
}

/* Hide price in product cards as requested */
.card-price {
    display: none !important;
}

/* If we want to show 'Descárgala GRATIS' we can re-enable it with a specific class if needed,
   but user asked to 'quitar los precios'.
   If they want 'Descárgala GRATIS' text to remain, we should not hide .card-price if it contains text.
   But .card-price usually contains the number.
   Wait, I previously changed the JS to output 'Descárgala GRATIS' instead of the number.
   If the user now says "quitar los precio", maybe they don't want to see that text either on the grid?
   I will hide it. */
.logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-color);
    text-align: center;
    letter-spacing: -0.5px;
    margin-right: 4rem;
    /* Increased spacing */
}

.user-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
}

.icon-btn {
    font-size: 1.1rem;
    color: var(--text-color);
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    min-width: 220px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
    padding: 0.5rem 0;
    z-index: 1001;
}

.dropdown:hover .dropdown-content {
    display: block;
    animation: fadeIn 0.2s ease;
}

.dropdown-content a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--text-color);
}

.dropdown-content a:hover {
    background: #f8fafc;
}

/* Main Content */
#main-content {
    flex: 1;
    width: 100%;
}

/* Hero Section */
.hero {
    position: relative;
    height: 60vh;
    width: 100%;
    /* Use a local image if available, or a high-quality fallback */
    background-image: url('sectores/moda imagenes/moda.png');
    background-size: cover;
    background-position: top center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 4rem;
    margin-bottom: 0;
    /* Remove margin to flow into next section */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: left;
    color: white;
    max-width: 900px;
    padding: 0 2rem;
    margin-top: 10rem;
}

.hero h1 {
    font-family: var(--font-heading);
    font-size: 4.5rem;
    font-weight: 400;
    margin-bottom: 1rem;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Sections */
.section-container {
    max-width: 1400px;
    margin: 4rem auto 6rem;
    padding: 0 2rem;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 3rem;
    color: var(--text-color);
    text-align: left;
}

.section-title.centered {
    text-align: center;
}

/* Grids */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
}

/* Cards */
.card {
    background: transparent;
    border: none;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.card-image-container {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/4;
    margin-bottom: 1rem;
    background-color: #f1f5f9;
    /* Placeholder color */
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
    /* Remove inline-block spacing */
}

/* Home Page Specific Product Cards (Hide Price) */
.home-product-card .card-price {
    display: none;
}

/* Specific styling for smaller sector circles */
.sector-card .card-image-container {
    aspect-ratio: 1/1;
    border-radius: 50%;
    width: 100%;
    margin: 0 auto 0.5rem;
    max-width: 150px;
    /* Limit size */
}

.sector-card .card-title {
    font-size: 0.9rem;
    text-transform: capitalize;
}

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

.card-content {
    padding: 0.5rem 0;
}

.card-title {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
    color: var(--text-color);
}

.card-price {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Banner Section */
.banner-section {
    position: relative;
    height: 500px;
    width: 100%;
    background-size: cover;
    background-position: center;
    margin: 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-text {
    position: relative;
    z-index: 1;
    color: white;
    font-family: var(--font-heading);
    font-size: 3.5rem;
    text-align: center;
    max-width: 900px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    padding: 0 1rem;
}

/* Filter Buttons */
.filter-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(212, 175, 55, 0.05);
}

.filter-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Footer */
footer {
    background: #ffffff;
    padding: 6rem 2rem 2rem;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem;
    margin-bottom: 6rem;
}

.footer-section h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

.footer-section ul li {
    margin-bottom: 0.75rem;
}

.footer-section a {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.footer-section a:hover {
    color: var(--text-color);
}

.footer-big-text {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 10vw;
    line-height: 1;
    color: var(--text-color);
    margin-bottom: 2rem;
    opacity: 0.9;
    letter-spacing: -2px;
}

.footer-bottom {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

/* Buttons */
.cta-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    display: inline-block;
}

.app-btn-success {
    background-color: #25D366 !important;
    /* WhatsApp Green / Commercial Green */
    color: white !important;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.btn-outline {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--primary-color);
    border-radius: 0.25rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.5rem;
}

.btn-outline:hover {
    background: var(--primary-color);
    color: white;
}

/* Product Customizer */
.customizer-container {
    display: grid;
    grid-template-columns: 1fr 400px;
    /* Left: Flexible (Canvas), Right: Fixed 400px (Menu) */
    gap: 3rem;
    align-items: start;
    position: relative;
    /* Ensure it doesn't overflow horizontally */
    max-width: 100%;
}

/* Left Column: Preview / Canvas */
/* Since we want it 'always visible' or sticky, let's make the wrapper sticky */
#preview-column-wrapper {
    position: sticky;
    top: 6rem;
    /* Ensures it starts below navbar */
    /* Adjust based on header height */
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
}

.preview-area {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background: #f1f5f9;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Format Modifiers */
.preview-area.format-reel {
    aspect-ratio: 9/16;
    max-width: 360px;
}

.preview-area.format-youtube {
    aspect-ratio: 16/9;
    max-width: 100%;
}

.preview-area.format-post {
    aspect-ratio: 1/1;
    max-width: 500px;
}

/* Default Fallback */
.preview-area:not([class*="format-"]) {
    aspect-ratio: 9/16;
    max-width: 360px;
}


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

.preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Right Column: Controls Panel */
.draggable {
    pointer-events: auto;
    position: absolute;
    cursor: move;
    user-select: none;
    /* Removed default dashed border to use active state instead */
    border: 1px solid transparent;
    padding: 5px;
    transition: background 0.2s ease;
    touch-action: none;
    /* Critical for touch events */
}

.draggable:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.draggable.active-selection {
    border: 1px dashed #fff;
    background: rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
    /* contrast outline */
}

.resize-handle {
    width: 36px;
    height: 36px;
    background: #fff;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    position: absolute;
    bottom: -18px;
    right: -18px;
    cursor: nwse-resize;
    display: none;
    z-index: 200;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    /* Improve touch target */
    touch-action: none;
}

.draggable.active-selection .resize-handle {
    display: block;
    animation: fadeIn 0.1s ease;
}

.preview-text-title {
    color: white;
    font-family: var(--font-heading);
    font-size: 2rem;
    text-align: center;
    /* Changed from width: 100% to fit-content for accurate handle placement */
    width: fit-content !important;
    max-width: 90%;
    min-width: 50px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    white-space: pre-wrap;
    /* allow wrapping if needed */
}

.preview-text-subtitle {
    color: white;
    font-family: var(--font-body);
    font-size: 1.2rem;
    text-align: center;
    width: fit-content !important;
    max-width: 90%;
    min-width: 50px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    white-space: pre-wrap;
}

/* Right Column: Controls Panel */
.controls-area {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    position: sticky;
    top: 6rem;
    /* Ensures it starts below navbar */
    /* Fits screen height minus margins */
    max-height: calc(100vh - 8rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Internal scrolling handled by content */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.controls-content {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    /* Custom Scrollbar for sleek look */
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.controls-content::-webkit-scrollbar {
    width: 6px;
}

.controls-content::-webkit-scrollbar-track {
    background: transparent;
}

.controls-content::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 20px;
}

.controls-sticky-footer {
    padding: 1.5rem;
    background: #fff;
    border-top: 1px solid var(--border-color);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

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

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Responsive */
@media (max-width: 900px) {
    .nav-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .logo {
        order: 1;
        margin-bottom: 0.5rem;
    }

    .user-actions {
        order: 2;
        width: 100%;
        justify-content: center;
        margin-bottom: 0.5rem;
    }

    .nav-links {
        order: 3;
        display: flex;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 0.5rem;
        gap: 1.5rem;
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling on iOS */
    }

    /* Hide scrollbar for cleaner look */
    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .mobile-menu-btn {
        display: block !important;
        /* Force show on mobile */
        font-size: 2rem !important;
        /* Make icon bigger */
        padding: 0.5rem;
    }

    .nav-links a {
        font-size: 0.9rem;
        /* Revert to valid size */
        padding: 0.5rem 0;
    }

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

    .hero h1 {
        font-size: 3.5rem;
    }

    .customizer-container {
        grid-template-columns: 1fr;
        /* Stack on mobile */
        gap: 2rem;
    }

    .controls-area {
        border-radius: 1rem;
        position: sticky;
        top: 2rem;
        /* Fits screen height minus margins */
        max-height: calc(100vh - 4rem);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        /* Internal scrolling handled by content */
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    }

    .controls-content {
        padding: 1.5rem;
        overflow-y: auto;
        flex: 1;
        /* Custom Scrollbar for sleek look */
        scrollbar-width: thin;
        scrollbar-color: var(--border-color) transparent;
    }

    .controls-content::-webkit-scrollbar {
        width: 6px;
    }

    .controls-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .controls-content::-webkit-scrollbar-thumb {
        background-color: var(--border-color);
        border-radius: 20px;
    }

    .controls-sticky-footer {
        padding: 1.5rem;
        background: #fff;
        border-top: 1px solid var(--border-color);
        z-index: 10;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

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

    .form-group label {
        display: block;
        font-size: 0.9rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: var(--text-color);
    }

    .form-control {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        font-family: var(--font-body);
        font-size: 0.9rem;
        transition: border-color 0.2s ease;
    }

    .form-control:focus {
        outline: none;
        border-color: var(--primary-color);
    }

    /* Responsive */
    @media (max-width: 900px) {
        .nav-container {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 1rem;
        }

        .logo {
            order: 1;
            margin-bottom: 0.5rem;
        }

        .user-actions {
            order: 2;
            width: 100%;
            justify-content: center;
            margin-bottom: 0.5rem;
        }

        .nav-links {
            order: 3;
            display: flex;
            width: 100%;
            overflow-x: auto;
            white-space: nowrap;
            padding-bottom: 0.5rem;
            gap: 1.5rem;
            -webkit-overflow-scrolling: touch;
            /* Smooth scrolling on iOS */
        }

        /* Hide scrollbar for cleaner look */
        .nav-links::-webkit-scrollbar {
            display: none;
        }

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

        .hero h1 {
            font-size: 3.5rem;
        }

        .customizer-container {
            grid-template-columns: 1fr;
            /* Stack on mobile */
            gap: 2rem;
        }

        .controls-area {
            position: static;
            max-height: none;
            overflow: visible;
        }

        .controls-content {
            overflow: visible;
        }
    }

    @media (max-width: 768px) {
        .nav-links {
            display: none;
            flex-direction: column;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            padding: 2rem;
            /* Increased padding */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            height: 100vh;
            /* Full screen menu feeling */
            align-items: center;
            /* Center items */
        }

        .nav-links.active {
            display: flex;
        }

        .nav-links li {
            margin: 1.5rem 0;
            /* More spacing */
            width: 100%;
            text-align: center;
        }

        .nav-links a {
            font-size: 1.5rem !important;
            /* Larger font size */
            font-weight: 500;
        }

        .hero {
            padding-left: 1.5rem;
            /* Reduce padding on mobile */
            justify-content: center;
            /* Center content on mobile */
            text-align: center;
            background-position: center;
        }

        .hero-content {
            margin-top: 0;
            /* Reset margin */
            padding: 0 1rem;
        }

        .hero h1 {
            font-size: 2rem;
        }

        .section-title {
            font-size: 1.8rem;
        }

        .grid-3,
        .grid-4 {
            grid-template-columns: 1fr;
            /* Stack single column on mobile */
        }

        .grid-6 {
            grid-template-columns: repeat(3, 1fr);
            /* 3 columns on mobile as requested */
        }

        .footer-content.grid-4 {
            grid-template-columns: 1fr;
            /* Stack footer on mobile */
            text-align: center;
        }

        .social-links {
            justify-content: center;
        }

        /* Sector Cards smaller on mobile 3-col */
        .sector-card .card-image-container {
            width: 70px;
            height: 70px;
        }

        .card-title {
            font-size: 0.9rem;
        }

        .footer-content {
            grid-template-columns: 1fr;
            gap: 2rem;
        }

        .footer-big-text {
            font-size: 15vw;
        }
    }

    /* Cookie Consent Banner */
    #cookie-banner {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 1.5rem;
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        display: none;
        /* Hidden by default, shown via JS */
        border-top: 1px solid var(--border-color);
    }

    #cookie-banner .cookie-content {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    #cookie-banner p {
        font-size: 0.9rem;
        color: var(--text-color);
        margin: 0;
        flex: 1;
        min-width: 300px;
    }

    #cookie-banner .cookie-actions {
        display: flex;
        gap: 0.5rem;
    }

    #cookie-banner .btn-accept {
        background: #25D366;
        /* WhatsApp Green / Success */
        color: white;
        padding: 0.5rem 1.5rem;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        font-weight: 600;
        font-size: 0.9rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
        transition: transform 0.2s, box-shadow 0.2s;
    }

    #cookie-banner .btn-accept:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
        background: #128C7E;
        /* Darker Green */
    }

    /* Accordion Styles */
    .accordion-item {
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
        overflow: hidden;
        background: #fff;
    }

    .accordion-header {
        width: 100%;
        padding: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f1f5f9;
        /* Distinct gray */
        border: 1px solid transparent;
        /* Reserve space */
        cursor: pointer;
        font-family: var(--font-body);
        font-weight: 600;
        color: var(--text-color);
        text-align: left;
        transition: all 0.2s;
    }

    .accordion-header:hover {
        background: #e2e8f0;
        color: var(--primary-color);
    }

    .accordion-content {
        display: none;
        padding: 1rem;
        border-top: 1px solid var(--border-color);
        animation: slideDown 0.3s ease-out;
    }

    .accordion-item.active .accordion-content {
        display: block;
    }

    .accordion-item.active .accordion-header {
        background: #fff;
        border-bottom: 1px solid var(--border-color);
        color: var(--primary-color);
    }

    .accordion-header i {
        transition: transform 0.3s ease;
    }

    .accordion-item.active .accordion-header i {
        transform: rotate(180deg);
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Mobile Toggle Button */
    #mobile-preview-toggle {
        display: none;
        /* Hidden on desktop */
    }

    @media (max-width: 1024px) {
        #mobile-preview-toggle {
            display: flex;
            /* Visible on mobile */
            align-items: center;
            gap: 0.5rem;
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background: var(--primary-color);
            color: white;
            padding: 1rem 1.5rem;
            border-radius: 2rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            z-index: 2100;
            /* Above overlay */
            border: none;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s;
        }

        #mobile-preview-toggle:active {
            transform: scale(0.95);
        }
    }

    .watermark-pattern {
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        gap: 4rem;
        transform: rotate(-30deg);
    }

    .watermark-text {
        font-family: var(--font-heading);
        font-size: 1.5rem;
        font-weight: 700;
        color: #ffffff;
        text-transform: uppercase;
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
        user-select: none;
    }

    /* Ensure resize handles are visible on hover for desktop discovery */
    .draggable:hover .resize-handle {
        display: block !important;
    }

    /* Make handles always visible on touch devices if easy way found, or rely on selection */
    .draggable.active-selection .resize-handle {
        display: block !important;
    }