/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500&display=swap');

:root {
    --bg-color: #F9F5E8;
    /* Vanilla Cream */
    --text-color: #202359;
    /* Deep Blue */
    --primary-color: #1B7C7A;
    /* Turquoise Green */
    --accent-color: #D95F39;
    /* Coral Orange */
    --secondary-accent: #E54586;
    /* Mexican Pink */
    --highlight-color: #F2B705;
    /* Ochre Yellow */
    --card-bg: #ffffff;

    --highlight-color: #F2B705;
    /* Ochre Yellow */
    --card-bg: #ffffff;

    --highlight-color: #F2B705;
    /* Ochre Yellow */
    --card-bg: #ffffff;

    /* Specific Component Overrides (Softer Tones) */
    --header-bg: #AEDCDC;
    /* Pale Turquoise (was #98D8D6) */
    --footer-bg: #5D688C;
    /* Lighter Deep Blue (was #3E4466) */

    /* Typography Updates */
    --font-heading: 'Fredoka', 'Comfortaa', sans-serif;
    /* Rounded & Friendly */
    --font-body: 'Montserrat', 'Quicksand', sans-serif;
    /* Clean Sans */

    --shadow: 0 4px 6px -1px rgba(32, 35, 89, 0.1), 0 2px 4px -1px rgba(32, 35, 89, 0.06);
    /* Soft shadow with deep blue tint */
    --radius: 16px;
    /* Rounded corners to match logo */
}

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

body {
    background-color: var(--bg-color);
    background-image: radial-gradient(circle at 10% 20%, rgba(217, 95, 57, 0.05) 0%, rgba(249, 245, 232, 0) 20%),
        radial-gradient(circle at 90% 80%, rgba(27, 124, 122, 0.05) 0%, rgba(249, 245, 232, 0) 20%);
    /* Subtle organic blobs */
    color: var(--text-color);
    font-family: var(--font-body);
    line-height: 1.6;
    font-size: 1rem;
    font-weight: 300;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

h1 {
    font-size: 2.618rem;
    /* Golden Ratio 1.618 * 1.618 approx */
}

h2 {
    font-size: 1.618rem;
    /* Golden Ratio */
}

h3 {
    font-size: 1.25rem;
    /* Square root of 1.618 approx, or generally smaller heading */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    /* Lighter weights for elegance */
    color: var(--primary-color);
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

/* Content Headings Override (requested #1A1A1A) */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
.section-title {
    color: #1A1A1A !important;
}

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

a:hover {
    color: var(--primary-color);
}

.container {
    max-width: 1400px;
    /* Wider container */
    margin: 0 auto;
    padding: 0 40px;
}

/* Header */
header {
    background-color: var(--header-bg);
    /* Softer Turquoise Header */
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 1rem 0;
    border-bottom: none;
    box-shadow: var(--shadow);
}

/* Header Container Flex adjustments are inline in layout for now, preserving specific flex settings */
header .container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Center: Logo */
.logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-img {
    height: 120px;
    width: auto;
    /* Filter removed: Logo is already pre-colored */
}

/* Right: Actions */
.nav-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    align-items: center;
}

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

.nav-links a {
    font-family: var(--font-heading);
    /* Fredoka/Comfortaa */
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    color: white;
    /* White text on Turquoise */
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--highlight-color);
    /* Ochre Yellow hover */
}

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

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 200px;
    /* Or wider if needed */
    background: rgba(255, 255, 255, 0.85);
    /* Transparent/Milky */
    backdrop-filter: blur(12px);
    /* Glassmorphism */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 1rem 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    text-align: center;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    display: block;
    /* Ensure block display on hover */
}

.dropdown-menu li {
    display: block;
}

.dropdown-menu li a {
    display: block;
    padding: 0.8rem 1rem;
    font-size: 0.75rem;
    color: #444;
    transition: all 0.2s;
}

.dropdown-menu li a:hover {
    color: black;
    background: rgba(0, 0, 0, 0.03);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-color);
    /* Coral Orange */
    color: white;
    padding: 0.8rem 2rem;
    border: none;
    border-radius: var(--radius);
    /* Rounded 16px */
    font-family: var(--font-heading);
    font-size: 1rem;
    text-transform: none;
    /* Remove uppercase for friendlier look */
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn:hover {
    background-color: var(--secondary-accent);
    /* Mexican Pink */
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid #e0e0e0;
}

.btn-secondary:hover {
    border-color: #1a1a1a;
    color: #1a1a1a;
}

/* Hero */
.hero {
    text-align: center;
    padding: 4rem 0;
    /* Reduced height to prevent over-zooming wide images */
    background-color: var(--bg-color);
    background-image: url('/static/img/banner-hero.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
    /* Assuming dark/colorful image, text should default to white or be handled */
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    font-weight: 400;
    font-style: italic;
    color: white !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.hero p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.95);
    max-width: 600px;
    margin: 0 auto 2.5rem;
    font-family: var(--font-heading);
    /* Serif for subtext too as per reference vibe */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Grid & Cards */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    /* Wider cards (Golden Rectangle) */
    gap: 3rem 2.5rem;
    /* Increased spacing as requested */
    padding: 2rem 0;
}

.card {
    background: white;
    box-shadow: var(--shadow);
    border: none;
    transition: all 0.3s ease;
    border-radius: var(--radius);
    padding-bottom: 1rem;
}

.card:hover {
    transform: none;
    /* No lift */
    opacity: 0.9;
}

.card-img-container {
    width: 100%;
    height: auto;
    /* Remove fixed height */
    aspect-ratio: 1.618 / 1;
    /* Golden Ratio (Horizontal/Landscape) */
    background-color: white;
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
}

.card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card:hover .card-img-container img {
    transform: scale(1.03);
    /* Subtle zoom */
}

.card-body {
    padding: 0;
    /* Remove padding */
    text-align: center;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
    font-weight: 400;
}

.card-price {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #888;
    font-weight: 400;
}

.badge {
    position: absolute;
    top: 10px;
    left: 10px;
    /* Left aligned */
    right: auto;
    background: white;
    color: black;
    padding: 4px 8px;
    border-radius: 0;
    /* Sharp */
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid #eee;
}

/* Footer */
footer {
    background-color: var(--footer-bg);
    /* Softer Deep Blue */
    color: white;
    padding: 4rem 0 2rem;
    border-top: none;
    text-align: center;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 Columns */
    gap: 2rem;
    text-align: left;
    margin-bottom: 2rem;
}

.footer-col ul {
    list-style: none;
    /* Remove bullet points */
    padding: 0;
    margin: 0;
}

.footer-col h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
    font-family: var(--font-heading);
    font-weight: 600;
    color: #f0f0f0;
    /* Soft White - Unified */
}

.footer-col ul li a {
    font-size: 0.95rem;
    color: rgba(240, 240, 240, 0.8);
    /* Soft White with transparency */
    transition: color 0.2s;
}

.footer-col ul li a:hover {
    color: var(--secondary-accent);
    /* Pink */
    text-decoration: none;
}

.newsletter-input {
    border: none;
    border-bottom: 1px solid #f0f0f0;
    padding: 0.5rem 0;
    width: 100%;
    font-family: var(--font-heading);
    background: transparent;
    margin-bottom: 1rem;
    color: #f0f0f0;
}

.newsletter-input::placeholder {
    color: rgba(240, 240, 240, 0.7);
}

.newsletter-input:focus {
    outline: none;
    border-bottom-color: var(--primary-color);
}

/* FAQ & Terms Layout */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: start;
}

.faq-card {
    background: var(--card-bg);
    padding: 2rem;
    border: 1px solid #eee;
    text-align: left;
    height: 100%;
    transition: transform 0.3s ease;
}

.faq-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
}

.faq-icon-wrapper {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    text-align: center;
}

.faq-card h2 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 1rem;
}

.faq-item {
    margin-bottom: 1.5rem;
}

.faq-item h3 {
    font-size: 0.95rem;
    font-family: var(--font-body);
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

.faq-item p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}

/* Mobile */
@media (max-width: 992px) {
    .container {
        padding: 0 20px;
        /* Reduce padding on mobile */
    }

    /* Product Detail Mobile Overrides */
    .product-image-container {
        width: 100%;
        max-width: 100%;
        height: 50vh !important;
        /* Cap height to half screen */
        min-height: 300px;
        /* Minimum height for very small screens */
        display: flex !important;
        align-items: center;
        justify-content: center;
        background-color: #f9f9f9;
        /* Placeholder background */
        margin: 0 0 1rem 0;
        overflow: hidden;
    }

    .product-image-container img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain;
    }

    .carousel-arrow {
        display: none !important;
        /* Strictly hide arrows on mobile */
    }

    .thumbnails-wrapper {
        gap: 2%;
        /* Percentage gap */
        justify-content: flex-start;
        /* Ensure start alignment */
    }

    .thumbnail-item {
        flex: 0 0 22% !important;
        /* ~4.5 items visible */
        width: 22% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        /* Keep square */
    }

    header {
        position: relative;
        z-index: 1000;
        background-color: var(--header-bg);
        /* Ensure solid background */
    }

    header .container {
        position: relative;
        /* Re-enable relative for absolute logo centering */
        justify-content: space-between;
        padding-right: 15px !important;
        /* Ensure minimal padding for cart icon */
    }

    .nav-actions {
        gap: 0.5rem !important;
        /* Reduce gap between icons */
    }

    .nav-actions .user-greeting {
        display: none !important;
        /* Hide "Hi, User" text */
    }

    .nav-actions .search-input {
        display: none !important;
        /* Hide search input to save space */
    }

    .nav-actions form {
        border-bottom: none !important;
        /* Remove border when input is hidden */
    }

    .menu-toggle {
        display: block !important;
        color: var(--text-color);
        margin-right: 1rem;
    }

    .nav-links {
        display: block;
        /* Always potentially visible but off-screen */
        position: fixed;
        top: 0;
        right: -100%;
        /* Hidden off-screen */
        width: 80%;
        /* Drawer width */
        max-width: 300px;
        height: 100vh;
        max-width: 300px;
        height: 100vh;
        background-color: var(--header-bg);
        /* Match header background */
        flex-direction: column;
        align-items: flex-start;
        /* Align items to left */
        padding: 0;
        margin: 0;
        /* Reset margins */
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        border-left: 1px solid #eee;
        transition: right 0.3s ease-in-out;
        z-index: 2000;
        /* Above header */
        overflow-y: auto;
        /* Scrollable if long */
    }

    .nav-links.active {
        right: 0;
        /* Slide in */
    }

    .mobile-close-btn {
        display: block !important;
        /* Visible on mobile */
    }

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

    .nav-links li {
        width: 100%;
        text-align: center;
    }

    .nav-links li a {
        display: block;
        padding: 0.5rem;
        font-size: 1.1rem;
        /* Larger touch targets */
    }

    /* Mobile Header Grid Layout */
    header .container {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        padding-right: 15px !important;
    }

    /* Flatten the first div wrapper (toggle + logo + nav) */
    header .container>div:first-child {
        display: contents !important;
    }

    .menu-toggle {
        grid-column: 1;
        justify-self: start;
        margin-right: 0 !important;
    }

    /* Logo Centering */
    .logo {
        grid-column: 2;
        justify-self: center;
        position: static !important;
        /* Reset absolute */
        transform: none !important;
        margin: 0 !important;
        width: auto;
    }

    .logo-img {
        height: 120px !important;
        max-height: 120px;
        display: block;
        /* Remove inline-block spacing */
    }

    .nav-actions {
        grid-column: 3;
        justify-self: end;
        width: 100%;
        /* Ensure it aligns right */
        gap: 0.5rem !important;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

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

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

    /* Hide search input on very small screens if needed, or wrap */
    .nav-actions .lang-switch {
        display: none;
        /* Save space, default mainly to browser lang or put in menu */
    }

    /* Mobile Dropdown: Accordion Style */
    .dropdown-menu {
        display: none;
        /* Hidden by default */
        position: static;
        width: 100%;
        padding: 0;
        background: #f9f9f9;
        /* Slight contrast */
        box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
        /* Inner shadow */
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        backdrop-filter: none;
    }

    /* Disable desktop hover effects on mobile using same specificity */
    .dropdown:hover .dropdown-menu {
        display: none;
        transform: none;
    }

    /* Show when parent has 'active' class (toggled by JS) */
    .dropdown.active .dropdown-menu {
        display: block;
        transform: none;
    }

    .dropdown-menu li a {
        padding: 0.8rem 1rem 0.8rem 2rem;
        /* Left indentation */
        font-size: 0.9rem;
        border-bottom: 1px solid #efefef;
        text-align: left;
        /* Align left for hierarchy */
        width: 100%;
        /* Ensure full width for click area */
    }

    /* Resize Hero for Mobile */
    .hero {
        padding: 4rem 1rem;
    }

    .hero h1 {
        font-size: 2.5rem;
        /* Smaller heading */
    }

    .hero p {
        font-size: 1rem;
    }

    /* Resize Buttons for Mobile */
    .btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.8rem;
        width: 100%;
        /* Full width button looks better on mobile usually, or auto */
        max-width: 300px;
        /* Don't be too wide */
    }
}

/* Announcement Bar */
.announcement-bar {
    background-color: var(--primary-color);
    color: white;
    padding: 0.5rem 0;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    width: 100%;
}

/* AI Chat Widget */
#chat-widget-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: 'Inter', sans-serif;
}

.chat-toggle-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-toggle-btn:hover {
    transform: scale(1.1);
}

.chat-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 350px;
    height: 500px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

.chat-window.hidden {
    display: none;
    opacity: 0;
    transform: translateY(20px);
}

.chat-header {
    background-color: var(--primary-color);
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

.chat-header button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.2rem;
}

.chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message {
    display: flex;
    margin-bottom: 5px;
}

.message.user {
    justify-content: flex-end;
}

.message.bot {
    justify-content: flex-start;
}

.message-content {
    max-width: 80%;
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
}

.message.user .message-content {
    background-color: var(--primary-color);
    color: white;
    border-bottom-right-radius: 2px;
}

.message.bot .message-content {
    background-color: #e9ecef;
    color: #333;
    border-bottom-left-radius: 2px;
}

.chat-input-area {
    padding: 10px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
    background-color: white;
}

.chat-input-area input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 20px;
    outline: none;
    font-family: inherit;
    font-size: 0.9rem;
}

.chat-input-area button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-input-area button:hover {
    background-color: #5649b9;
    /* Slightly darker */
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .chat-window {
        width: 300px;
        height: 400px;
        right: -10px;
    }
}

/* Product Detail Page Specifics */
.product-detail-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: start;
}

.product-image-container {
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: #fafafa;
}

/* Mobile Product Detail */
@media (max-width: 992px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .product-image-container {
        height: auto;
        aspect-ratio: 1 / 1;
        /* Square for mobile */
        max-height: 400px;
    }

    /* Ensure Add to Cart is accessible */
    .product-detail-grid form {
        padding-bottom: 80px;
    }
}

.active-lang {
    font-weight: bold;
}

/* Raining Hearts Effect */
.heart {
    position: fixed;
    top: -10vh;
    color: var(--primary-color);
    z-index: 100;
    /* Behind modal/dropdowns but visible */
    pointer-events: none;
    /* Don't block clicks */
    animation: fall linear forwards;
}

@keyframes fall {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(110vh) rotate(360deg);
    }
}

/* Carousel Styles */
.carousel-container {
    position: relative;
    width: 100%;
    margin-top: 1rem;
}

.thumbnails-wrapper {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
}

.thumbnails-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.thumbnail-item {
    scroll-snap-align: start;
    flex: 0 0 80px;
    /* Force width, don't grow or shrink */
    width: 80px;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.thumbnail-item:hover,
.thumbnail-item.active {
    opacity: 1;
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    font-size: 0.8rem;
    color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.carousel-arrow:hover {
    background: var(--primary-color);
    color: white;
}

.carousel-arrow.prev {
    left: -10px;
}

.carousel-arrow.next {
    right: -10px;
}

/* Mobile Product Grid Override */
@media (max-width: 992px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        /* Tighter gap for mobile */
    }

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

    .card-price {
        font-size: 0.85rem !important;
    }

    .card-body {
        padding: 0.5rem !important;
    }

    .card-img-container {
        aspect-ratio: 1 / 1.618 !important;
        /* Keep Vertical for Mobile */
    }

    /* --- Magic Studio Styles --- */

    .magic-studio-container {
        max-width: 1000px;
        margin: 3rem auto;
        padding: 0 1rem;
        text-align: center;
    }

    .studio-header {
        margin-bottom: 3rem;
    }

    .studio-header h1 {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        color: var(--primary-color);
    }

    .studio-header p {
        color: #666;
        font-size: 1.1rem;
    }

    .sparkle {
        display: inline-block;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(27, 124, 122, 0.7);
        }

        70% {
            transform: scale(1.05);
            box-shadow: 0 0 0 10px rgba(27, 124, 122, 0);
        }

        100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(27, 124, 122, 0);
        }
    }

    /* States */
    .studio-state {
        transition: all 0.5s ease;
        opacity: 0;
        transform: translateY(20px);
        display: none;
    }

    .studio-state.active {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    .hidden {
        display: none !important;
    }

    /* Upload Zone */
    .upload-zone {
        border: 3px dashed #cbd5e1;
        border-radius: 20px;
        padding: 4rem 2rem;
        background-color: #f8fafc;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .upload-zone:hover,
    .upload-zone.drag-active {
        border-color: var(--primary-color);
        background-color: #f0fdf9;
        transform: scale(1.01);
    }

    .upload-content i {
        font-size: 4rem;
        color: #94a3b8;
        margin-bottom: 1rem;
    }

    .upload-content h3 {
        font-size: 1.5rem;
        color: #334155;
    }

    /* Preview & Tools */
    .preview-container {
        margin-bottom: 2rem;
        position: relative;
        display: inline-block;
    }

    .image-wrapper {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        max-height: 500px;
    }

    .image-wrapper img {
        max-width: 100%;
        display: block;
        max-height: 500px;
        object-fit: contain;
    }

    .change-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(255, 255, 255, 0.9);
        border: none;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        color: #333;
        transition: all 0.2s;
    }

    .change-btn:hover {
        transform: rotate(180deg);
        background: white;
    }

    .tools-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        max-width: 600px;
        margin: 0 auto;
    }

    .tool-card {
        background: white;
        border: 2px solid #e2e8f0;
        border-radius: 16px;
        padding: 1.5rem;
        cursor: pointer;
        transition: all 0.3s;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .tool-card:hover:not(.disabled) {
        border-color: var(--primary-color);
        box-shadow: 0 5px 15px rgba(27, 124, 122, 0.1);
        transform: translateY(-2px);
    }

    .tool-card.disabled {
        opacity: 0.6;
        cursor: not-allowed;
        background: #f1f5f9;
    }

    .tool-icon {
        width: 40px;
        height: 40px;
        background: #f0fdf9;
        color: var(--primary-color);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }

    .tool-info h3 {
        margin: 0;
        font-size: 1rem;
        color: #334155;
    }

    .tool-info span {
        font-size: 0.85rem;
        color: #db2777;
        font-weight: 600;
    }

    /* Processing */
    .processing-content {
        text-align: center;
        padding: 3rem;
    }

    .magic-loader {
        display: flex;
        gap: 1rem;
        justify-content: center;
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .sparkle-item {
        animation: bounce 1.4s infinite ease-in-out both;
    }

    .sparkle-item.s1 {
        animation-delay: -0.32s;
    }

    .sparkle-item.s2 {
        animation-delay: -0.16s;
    }

    @keyframes bounce {

        0%,
        80%,
        100% {
            transform: scale(0);
        }

        40% {
            transform: scale(1);
        }
    }

    /* Result Slider */
    .img-comp-container {
        position: relative;
        max-height: 500px;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        margin: 0 auto 2rem;
        display: inline-block;
    }

    .img-comp-img {
        position: relative;
        width: auto;
        height: auto;
        overflow: hidden;
    }

    .img-comp-img img {
        display: block;
        vertical-align: middle;
        max-height: 500px;
        max-width: 100%;
    }

    .img-comp-slider {
        position: absolute;
        z-index: 9;
        cursor: ew-resize;
        width: 40px;
        height: 40px;
        background-color: white;
        opacity: 0.9;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        color: var(--primary-color);
    }

    /* Utilities */
    .hidden {
        display: none !important;
    }

    /* Modals */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        z-index: 2000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    .modal-content {
        background: white;
        padding: 2.5rem;
        border-radius: 24px;
        max-width: 800px;
        width: 100%;
        position: relative;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
        animation: slideUp 0.3s ease-out;
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

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

    .modal-close {
        position: absolute;
        top: 20px;
        right: 20px;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: #999;
        transition: color 0.2s;
    }

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

    /* Pricing Grid */
    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
        margin-top: 2rem;
    }

    .pricing-card {
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        padding: 2rem;
        text-align: center;
        transition: all 0.3s;
        position: relative;
    }

    .pricing-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    .pricing-card.popular {
        border: 2px solid var(--primary-color);
        background: linear-gradient(to bottom, #f0fdf9, white);
    }

    /* Toast Notification */
    .toast-notification {
        position: fixed;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%) translateY(100px);
        background: #333;
        color: white;
        padding: 1rem 2rem;
        border-radius: 50px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        opacity: 0;
        transition: all 0.3s ease;
        z-index: 3000;
        font-size: 0.9rem;
    }

    .toast-notification.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    .popular-tag {
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--primary-color);
        color: white;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
    }

    .pricing-header h3 {
        margin-bottom: 0.5rem;
    }

    .price {
        font-size: 2rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 1.5rem;
    }



}

/* Pricing Styles - Moved to root to avoid nesting issues */
.pricing-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Soft shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Ensure equal height in grid */
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.pricing-features {
    list-style: none;
    margin-bottom: 2rem;
    color: #64748b;
    font-size: 0.95rem;
    text-align: left;
    margin-top: auto;
    /* Push to bottom if needed, or just normal flow */
}

.pricing-features li {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

@media (min-width: 900px) {
    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
        gap: 1.5rem;
        align-items: stretch;
        /* Cards stretch to same height */
    }
}

/* --- Visual Effects & Micro-interactions --- */

/* 1. Foil Shine Effect (Base) */
.shine-effect {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
}

.shine-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    transform: skewX(-25deg);
    pointer-events: none;
    z-index: 2;
    transition: none;
}

.shine-effect:hover::after {
    left: 150%;
    transition: left 0.7s ease-in-out;
}

/* Gold Shine (Artisanal Products) */
.shine-gold::after {
    background: linear-gradient(to right,
            rgba(255, 215, 0, 0) 0%,
            rgba(255, 215, 0, 0.3) 50%,
            rgba(255, 215, 0, 0) 100%);
}

/* Tech Shine (Magic Tools - Blueish/Neon) */
.shine-tech::after {
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(0, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%);
}

/* 2. Z-Axis Lift (Depth) & Zoom */
.btn,
.card,
.pricing-card,
.step-card,
.magic-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn:hover,
.card:hover,
.pricing-card:hover,
.step-card:hover,
.magic-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

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

/* 3. Scroll Reveal Animation Classes */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 4. Bento Grid & Glassmorphism (Magic Tools) */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1.5rem;
    padding: 2rem 0;
}

.magic-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    grid-column: span 4;
}

/* Bento Spans */
.magic-card.wide {
    grid-column: span 12;
}

.magic-card.medium {
    grid-column: span 6;
}

@media (max-width: 900px) {

    .magic-card,
    .magic-card.medium,
    .magic-card.wide {
        grid-column: span 12 !important;
    }
}

/* Loading Conic Gradient */
.loading-conic {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.loading-conic::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, var(--primary-color), transparent 30%);
    animation: rotate 2s linear infinite;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.loading-conic::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: white;
    border-radius: inherit;
    z-index: -1;
}

@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* --- Header Optimization --- */

/* Expandable Search */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: #1a1a1a;
    padding: 5px;
    z-index: 2;
    transition: color 0.3s ease;
}

.search-btn:hover {
    color: var(--primary-color);
}

.search-form {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    overflow: hidden;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.search-container.active .search-form {
    width: 220px;
}

.search-input-expandable {
    width: 100%;
    border: none;
    padding: 8px 15px 8px 35px;
    /* Left padding for icon space */
    font-family: var(--font-body);
    font-size: 0.9rem;
    outline: none;
    background: transparent;
}

/* User Hub */
.user-hub-container {
    position: relative;
}

.user-hub-trigger {
    padding: 6px 12px;
    border-radius: 20px;
    transition: background 0.3s ease;
}

.user-hub-trigger:hover {
    background: rgba(255, 255, 255, 0.5);
}

.compact-credit-display {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    color: #db2777;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(219, 39, 119, 0.2);
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(219, 39, 119, 0.05);
}

.user-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    max-width: 100px;
    /* Truncate if too long */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 220px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 8px 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.user-dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: #444;
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.user-dropdown-menu a:hover {
    background: #f7f7f7;
    color: var(--primary-color);
}

.user-dropdown-menu i {
    width: 18px;
    text-align: center;
    color: #888;
}

.dropdown-divider {
    height: 1px;
    background: #eee;
    margin: 6px 0;
}

.logout-link {
    color: #ef4444 !important;
}

.logout-link:hover {
    background: #fef2f2 !important;
}

.logout-link i {
    color: #ef4444 !important;
}

.login-icon-btn {
    font-size: 1.2rem;
    color: #333;
    transition: color 0.3s ease;
}

.login-icon-btn:hover {
    color: var(--primary-color);
}

/* Mobile Adjustments for New Header */
@media (max-width: 992px) {
    .user-hub-trigger .user-name {
        display: none;
        /* Hide name on mobile to save space */
    }

    .compact-credit-display {
        font-size: 0.8rem;
        padding: 2px 6px;
    }

    .search-container.active .search-form {
        width: 180px;
        /* Slightly smaller on mobile */
        right: -50px;
        /* Shift to fit */
    }
}

/* Accordion Styles */
.accordion-item {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
    background: #fff;
    transition: all 0.3s ease;
}

.accordion-header {
    width: 100%;
    padding: 1rem 1.5rem;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
}

.accordion-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #333;
    font-weight: 500;
}

.accordion-header i {
    transition: transform 0.3s ease;
    color: var(--primary-color);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #fafafa;
}

.accordion-content p {
    padding: 1rem 1.5rem;
    margin: 0;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
}

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

.accordion-item.active .accordion-content {
    max-height: 500px;
    /* Arbitrary large height */
    transition: max-height 0.5s ease-in;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.show {
    display: block;
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    /* 10% from the top and centered */
    padding: 2rem;
    border: 1px solid #888;
    width: 90%;
    max-width: 600px;
    border-radius: var(--radius);
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    animation: slideDown 0.3s ease-out;
}

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

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

.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal:hover,
.close-modal:focus {
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
}

.modal-body h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    margin-top: 1.5rem;
}

.modal h2 {
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

/* Before/After Comparison Slider */
.cd-image-container {
    position: relative;
    width: 100%;
    max-width: 768px;
    /* Or whatever max width fits design */
    margin: 0 auto;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    user-select: none;
}

.cd-image-container img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
    /* Fix for gap */
}

/* Original Image (Background) */
.cd-image-container .cd-image-label {
    position: absolute;
    top: 0;
    right: 0;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s;
    border-bottom-left-radius: 8px;
}

.cd-image-container:hover .cd-image-label {
    opacity: 1;
}

/* Modified Image (Overlay / Resizeable) */
.cd-resize-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    /* Start at 50% */
    height: 100%;
    overflow: hidden;
    border-right: 1px solid white;
    /* Optional separator line */
    background: #ffffff;
    /* Fallback */
    /* Ensure the image inside stays full width relative to container, not this wrapper */
}

.cd-resize-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    /* Allow it to be larger than parent div */
    height: 100%;
    max-width: none;
    /* Override any global max-width */
    /* We need to set the width of this img to match the container's width via JS or strict CSS if width is fixed. 
       Better approach: keep it 100% of the *container* width, and use object-fit if needed, 
       BUT for perfect alignment, the image must be exact same size.
       We will set its width to the container's width in JS or ensure the containers are responsive.
       For responsive: If container is 500px, img is 500px.
       .cd-resize-img width varies (e.g. 50%).
       .cd-resize-img img { width: [ContainerWidth]px } -> handled via JS or % if possible.
       Actually, standard technique: set img width to the container width.
       Since we don't know container width in CSS pixels (it's liquid), we usually do:
       width: 100vw or similar? No.
       We can set .cd-resize-img img width to equal the container width in pixels using JS on load/resize.
       OR, use css: width: 100%; height: 100%; object-fit: cover; 
       Wait, if we use object-fit: cover, they might align differently if aspect ratios differ slightly (which they shouldn't).
       Let's stick to the method where JS sets the width if needed, or assume images are identical.
    */
}

.cd-handle {
    position: absolute;
    height: 44px;
    width: 44px;
    background: var(--primary-color);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    cursor: ew-resize;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cd-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    /* Arrows icon using borders or unicode? Let's use FontAwesome inside in HTML */
}

.cd-handle-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: white;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
    /* Handle circle catches events */
}

/* Credit Update Animation */
@keyframes pulse-green {
    0% {
        transform: scale(1);
        color: inherit;
    }

    50% {
        transform: scale(1.2);
        color: #2ecc71;
        font-weight: bold;
    }

    100% {
        transform: scale(1);
        color: inherit;
    }
}

.credit-update-anim {
    animation: pulse-green 1s ease-in-out;
}

/* Modal Actions */
.modal-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.modal-checkbox {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
}

@keyframes pulseCredit {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(219, 39, 119, 0.7);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(219, 39, 119, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(219, 39, 119, 0);
    }
}

.pulse-credit {
    animation: pulseCredit 1s ease-out 3;
}