/* --- CSS Variables and Base Styles --- */
:root {
    --violet: #8e24aa;
    --light-violet: #f0e6ff;
    --yellow: #ffc107;
    --light-yellow: #fff8e1;
    --white: #ffffff;
    --dark-grey: #333333;
    --light-grey: #f4f4f4;
    --font-primary: 'Garamond', serif;
    --font-secondary: 'Montserrat', sans-serif;
}

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

body {
    font-family: var(--font-secondary);
    line-height: 1.6;
    color: var(--dark-grey);
    background-color: var(--white);
    overflow-x: hidden;
}
section
{
    overflow: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

.section-title {
    font-family: var(--font-primary);
    font-size: 3rem;
    color: var(--violet);
    text-align: center;
    margin-bottom: 1rem;
}

.section-subtitle {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 3rem auto;
    font-size: 1.1rem;
}

/* --- Animations --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delay for staggered animations */
.animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.animate-on-scroll:nth-child(4) { transition-delay: 0.3s; }


/* --- Header & Navigation --- */
.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 1.5rem 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-primary);
    font-size: 2.5rem;
    color: var(--white);
    text-decoration: none;
    font-weight: bold;
}

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

.nav-links a {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    position: relative;
    padding-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--yellow);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--yellow);
}

.mobile-nav-toggle { display: none; }

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: 0.8rem 2.5rem;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-primary {
    background-color: var(--yellow);
    color: var(--dark-grey);
}

.btn-primary:hover {
    background-color: transparent;
    border-color: var(--yellow);
    color: var(--yellow);
    transform: translateY(-3px);
}

.btn-secondary {
    background-color: var(--violet);
    color: var(--white);
}

.btn-secondary:hover {
    background-color: transparent;
    border-color: var(--violet);
    color: var(--violet);
    transform: translateY(-3px);
}


/* --- Section Specific Styles --- */

/* Hero Section */
/* --- Hero Section Styles (with Image) --- */

.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    overflow: hidden; /* Important to contain the zooming image */
}

/* This is the new wrapper for the background image */
.hero-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

/* The background image itself */
.hero-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area without distortion */
    
    /* The subtle Ken Burns zoom animation */
    animation: hero-zoom 30s infinite alternate cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Keyframes for the slow zoom effect */
@keyframes hero-zoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}


/* --- These styles remain unchanged --- */

.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* The dark overlay */
    z-index: -1;
}

.hero-content h1 {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 8vw, 5.5rem);
    margin-bottom: 1rem;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.hero-content p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 2rem auto;
}
/* Featured Collections */

/* --- Redesigned Geometric Collection Section --- */

.featured-collections-section {
    padding: 6rem 0;
    background-color: var(--light-grey);
}

/* Base card style for all screen sizes */
.collection-card-geometric {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.collection-card-geometric img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.2, 1, 0.2, 1), filter 0.4s ease;
}

/* Content for smaller, overlay-style cards */
.card-content-geometric {
    position: absolute;
    inset: 0;
    padding: 1.5rem;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
    color: var(--white);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.collection-card-geometric:hover .card-content-geometric {
    opacity: 1;
}
.card-content-geometric h3 {
    font-family: var(--font-primary);
    font-size: 1.8rem;
}


/* --- Mobile Layout (Default) --- */
.collections-grid-geometric {
    display: grid;
    gap: 2rem;
}
.main-card-wrapper {
    display: contents; /* Behaves as if wrapper doesn't exist in grid */
}
.card-main-text {
    background: var(--white);
    padding: 2rem;
    border-radius: 15px;
    margin-top: -2rem; /* Slight overlap */
    position: relative;
    z-index: 2;
}


/* --- Desktop Collage Layout --- */
@media (min-width: 992px) {
    .collections-grid-geometric {
        display: grid;
        /* Define a complex grid with a dominant center column */
        grid-template-columns: 1fr 1.6fr 1fr;
        grid-template-rows: repeat(4, 120px); /* 4 rows of 120px height */
        gap: 1.5rem;
        align-items: start;
    }

    .main-card-wrapper {
        /* Position the main card wrapper in the grid */
        grid-column: 2 / 3;
        grid-row: 1 / 5;
        /* This wrapper contains both the main image and its text */
        display: block; 
        position: relative;
    }

    /* Position the individual elements within the grid */
    .card-top-left {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        height: 100%;
    }
    .card-main {
        height: 100%;
    }
    .card-bottom-right {
        grid-column: 3 / 4;
        grid-row: 3 / 5;
        height: 100%;
    }
    
    .card-main-text {
        grid-column: 1 / 2;
        grid-row: 3 / 5;
        align-self: center; /* Vertically center the text block */
        z-index: 2;
        padding: 1rem;
        margin-top: 0;
        background-color: transparent; /* Remove background on desktop */
    }

    .card-main-text h3 {
        font-family: var(--font-primary);
        font-size: 2.5rem;
        color: var(--violet);
    }
    .card-main-text p {
        margin: 1rem 0 1.5rem 0;
    }
    .card-main-text .cta-link {
        font-weight: bold;
        color: var(--dark-grey);
        text-decoration: none;
        position: relative;
    }
    .card-main-text .cta-link::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--yellow);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s cubic-bezier(0.2, 1, 0.2, 1);
    }
    
    /* --- Coordinated Hover Effects for Desktop --- */
    .main-card-wrapper:hover .card-main img {
        transform: scale(1.03);
    }
    .main-card-wrapper:hover .cta-link::after {
        transform: scaleX(1);
    }
    
    .collection-card-geometric:hover img {
        transform: scale(1.05);
        filter: brightness(1.05);
    }
}


/* --- Tablet Layout --- */
@media (max-width: 991px) and (min-width: 768px) {
    .collections-grid-geometric {
        grid-template-columns: 1fr 1fr;
    }
    .main-card-wrapper {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
    .card-top-left {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
     .card-bottom-right {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
}

/* Craftsmanship Section */
/* --- Redesigned - Sophisticated Craftsmanship Section --- */

.craftsmanship-section {
    padding: 10rem 0 6rem;
    background-color: var(--white);
    overflow: hidden; /* Prevents box shadow from being cut off */
}

.craft-content-sophisticated {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Text | Larger Image */
    align-items: center;
    gap: 2rem;
}

/* --- The Image Wrapper and its Effects --- */
.craft-image-wrapper-sophisticated {
    position: relative;
    grid-column: 2 / 3; /* Place image in the second column */
    border-radius: 15px;
    overflow: hidden; /* Keep the zooming image contained */
}

.craft-image-wrapper-sophisticated img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    border-radius: 15px;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* --- The Text Block --- */
.craft-text-sophisticated {
    grid-column: 1 / 2; /* Place text in the first column */
    grid-row: 1 / 2;   /* Ensure it's on the same row */
    position: relative;
    z-index: 2; /* Make text sit on top of the image */
    background: var(--white);
    padding: 3rem;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    margin-right: -5rem; /* The key to the overlap effect */
}

.craft-text-sophisticated h3 {
    font-family: var(--font-primary);
    color: var(--yellow);
    font-size: 1.8rem;
    font-weight: 500;
    margin: 0;
}

.craft-text-sophisticated .section-title {
    text-align: left;
    margin-top: 0.5rem;
}

.craft-text-sophisticated p {
    margin-bottom: 2rem;
}

/* --- The Decorative Frame --- */
.decorative-frame-sophisticated {
    position: absolute;
    inset: -15px; /* Position outside the image */
    z-index: 0;
}

/* The L-shaped corners that will expand */
.decorative-frame-sophisticated::before,
.decorative-frame-sophisticated::after {
    content: '';
    position: absolute;
    width: 30%; /* Start small */
    height: 30%;
    border-color: var(--yellow);
    border-style: solid;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* Top-left corner */
.decorative-frame-sophisticated::before {
    top: 0;
    left: 0;
    border-width: 2px 0 0 2px;
}
/* Bottom-right corner */
.decorative-frame-sophisticated::after {
    bottom: 0;
    right: 0;
    border-width: 0 2px 2px 0;
}

/* --- HOVER STATES --- */
.craft-image-wrapper-sophisticated:hover img {
    transform: scale(1.05);
}
/* Expand the frame on hover */
.craft-image-wrapper-sophisticated:hover .decorative-frame-sophisticated::before,
.craft-image-wrapper-sophisticated:hover .decorative-frame-sophisticated::after {
    width: 100%;
    height: 100%;
}


/* --- Responsive Adjustments for Sophisticated Layout --- */
@media (max-width: 992px) {
    .craft-content-sophisticated {
        display: block;
        grid-template-columns: 1fr; /* Stack elements */
        gap: 2rem;
    }

    .craft-image-wrapper-sophisticated {
        grid-row: 1; /* Ensure image is on top */
    }

    .craft-text-sophisticated {
        margin-right: 0; /* Remove the overlap */
        margin-top: -3rem; /* Create a slight vertical overlap instead */
        margin-bottom: 1rem;
    }
}
/* Philosophy Section */
.philosophy-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--light-violet), var(--light-yellow));
    text-align: center;
}

.philosophy-section .container {
    max-width: 800px;
}

/* Testimonials Section */

/* --- Modern Testimonial Slider Styles --- */

.testimonials-section {
    padding: 6rem 0;
    background-color: var(--light-grey);
}

.testimonial-slider-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden; /* This is the viewport for the slider */
}

.testimonial-slider {
    display: flex;
    /* The magic happens here: a smooth transition for the transform property */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.testimonial-slide {
    flex: 0 0 100%; /* Each slide takes up the full container width */
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
    opacity: 0.5; /* Non-active slides are faded */
    transform: scale(0.95); /* Non-active slides are smaller */
    transition: opacity 0.5s ease, transform 0.5s ease;
    text-align: center;
}

/* Style for the currently active slide */
.testimonial-slide.active-slide {
    opacity: 1;
    transform: scale(1);
}

.testimonial-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
}

.testimonial-header img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--white);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
}

.testimonial-author {
    font-weight: bold;
    color: var(--violet);
    font-size: 1.1rem;
}

.testimonial-body {
    position: relative;
}

/* The large decorative quotation mark */
.testimonial-body::before {
    content: '“';
    font-family: var(--font-primary), serif;
    font-size: 6rem;
    color: var(--light-violet);
    position: absolute;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
    z-index: 0;
}

.testimonial-body p {
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.8;
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
}

/* --- Slider Navigation & Dots --- */
.slider-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* Allows clicks to pass through to the container */
}

.slider-btn {
    pointer-events: all; /* Make buttons clickable */
    background: var(--white);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, background-color 0.2s ease;
    color: var(--violet);
}

.slider-btn:hover {
    transform: scale(1.1);
    background-color: var(--light-violet);
}

.slider-btn.prev-btn { margin-left: -22px; }
.slider-btn.next-btn { margin-right: -22px; }
.slider-btn svg { width: 24px; height: 24px; }


.slider-dots {
    text-align: center;
    padding-top: 2rem;
}

.slider-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 5px;
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.slider-dot.active-dot {
    background-color: var(--yellow);
    transform: scale(1.2);
}

@media (max-width: 768px) {
    .testimonial-body p { font-size: 1.1rem; }
    .slider-btn.prev-btn { margin-left: 10px; }
    .slider-btn.next-btn { margin-right: 10px; }
}

/* Style Guide Section */
.style-guide-section {
    padding: 6rem 0;
}

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

.style-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 10px;
}

.style-card img {
    transition: transform 0.4s ease;
}

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

.style-card h3 {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    font-family: var(--font-primary);
    color: var(--white);
    font-size: 1.5rem;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.7);
}


/* Newsletter Section */
.newsletter-section {
    padding: 5rem 0;
    text-align: center;
    background-color: var(--violet);
    color: var(--white);
}

.newsletter-section .section-title {
    color: var(--white);
}

.newsletter-section p {
    max-width: 500px;
    margin: 0 auto 2rem auto;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    max-width: 500px;
    margin: 0 auto;
}

.newsletter-form input {
    flex-grow: 1;
    padding: 0.8rem 1.5rem;
    border: 2px solid var(--yellow);
    border-right: none;
    border-radius: 50px 0 0 50px;
    background-color: var(--white);
    font-size: 1rem;
}

.newsletter-form input:focus {
    outline: none;
    background-color: var(--light-yellow);
}

.newsletter-form button {
    border-radius: 0 50px 50px 0;
}

/* --- Appended Styles for Jewels Page --- */

/* Jewels Hero Section */
.jewels-hero-section {
    padding: 12rem 0 6rem 0;
    text-align: center;
    background: linear-gradient(135deg, var(--violet) 0%, #4a00e0 100%);
    color: var(--white);
}

.jewels-hero-section h1 {
    font-family: var(--font-primary);
    font-size: clamp(3rem, 7vw, 5rem);
    margin-bottom: 1rem;
}

.jewels-hero-section p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.9;
}

/* Category Filter Section */
.category-filter-section {
    padding: 4rem 0;
    background-color: var(--light-grey);
}

.category-filter-section .section-title {
    margin-bottom: 3rem;
}

.category-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.category-item {
    text-decoration: none;
    color: var(--dark-grey);
    text-align: center;
    transition: transform 0.3s ease;
}

.category-item:hover {
    transform: translateY(-5px);
}

.category-item img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 4px solid var(--white);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.category-item span {
    font-weight: bold;
    font-size: 1.2rem;
}

/* --- Redesigned - Editorial Product Showcase --- */

.product-showcase-section-editorial {
    padding: 6rem 0;
    background-color: var(--white);
}

.editorial-grid-container {
    display: grid;
    grid-template-columns: 1fr; /* Default mobile layout: single column */
    gap: 2rem;
}

/* --- Hero Product Styles --- */
.editorial-hero-product {
    border-radius: 15px;
    overflow: hidden; /* Important for the zoom effect */
}

.editorial-hero-image {
    width: 100%;
    padding-bottom: 125%; /* Creates a 4:5 aspect ratio */
    position: relative;
}

.editorial-hero-image img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The Ken Burns zoom animation */
    animation: editorial-zoom 20s infinite alternate;
}

@keyframes editorial-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

/* --- Sidebar Styles --- */
.editorial-sidebar {
    position: relative;
    padding-top: 2rem;
}

/* The decorative ampersand in the background */
.editorial-sidebar::before {
    content: '&';
    font-family: var(--font-primary), serif;
    font-size: 20rem;
    color: var(--light-grey);
    position: absolute;
    top: 0;
    right: 0;
    line-height: 0.8;
    z-index: 0;
    opacity: 0.8;
}

.editorial-text-content {
    position: relative;
    z-index: 1;
    margin-bottom: 2.5rem;
}

.editorial-text-content .section-title {
    text-align: left;
}


/* --- Supporting Products Grid & Cards --- */
.editorial-supporting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.editorial-supporting-card {
    background: var(--white);
}

.supporting-card-image {
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.supporting-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.supporting-card-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.supporting-card-info h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.2rem 0;
}
.supporting-card-info .price {
    font-size: 1.1rem;
    color: var(--dark-grey);
}

.view-link {
    text-decoration: none;
    color: var(--violet);
    font-weight: bold;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* --- Hover States for Supporting Cards --- */
.editorial-supporting-card:hover .supporting-card-image {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.editorial-supporting-card:hover .view-link {
    opacity: 1;
    transform: translateX(0);
}


/* --- Desktop Layout (Asymmetrical) --- */
@media (min-width: 992px) {
    .editorial-grid-container {
        /* Define the two-column grid */
        grid-template-columns: 1.2fr 1fr;
        gap: 4rem;
        align-items: center;
    }
    
    .editorial-sidebar {
        padding-top: 0;
    }
}


/* Product Showcase Section */

/* --- Redesigned - Sophisticated Product Section --- */

.product-showcase-section.alternate-bg {
    background-color: var(--light-violet);
}

/* Staggered grid layout */
.product-grid-sophisticated {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
    align-items: center; /* This is key for the staggered effect */
}

/* On desktop, the second card will have a top margin */
@media (min-width: 768px) {
    .product-grid-sophisticated > .product-card-sophisticated:nth-child(2n) {
        margin-top: 4rem;
    }
}

.product-card-sophisticated {
    position: relative;
    background: var(--white);
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(142, 36, 170, 0.1);
    width: 100%;
    max-width: 380px;
    overflow: hidden; /* Hide the hover reveal until it slides in */
}

/* Image wrapper for zoom effect and quick view button */
.product-image-wrapper {
    position: relative;
    overflow: hidden; /* Contains the image zoom */
    border-radius: 15px 15px 0 0;
}

.product-image-wrapper img {
    width: 100%;
    height: auto;
    aspect-ratio: 6/7;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.2, 1, 0.2, 1);
}

.quick-view-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--dark-grey);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.quick-view-btn svg {
    width: 22px;
    height: 22px;
}

/* Main info block */
.product-info-sophisticated {
    padding: 1.5rem;
    text-align: center;
}

.product-info-sophisticated h3 {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    color: var(--violet);
    margin: 0 0 0.5rem 0;
}

.product-info-sophisticated .price {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--dark-grey);
    display: block;
}

/* The part that is revealed on hover */
.product-hover-reveal {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0));
    display: flex;
    gap: 1rem;
    justify-content: center;
    
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.2, 1), opacity 0.4s ease;
}

/* --- Redesigned Button Styles for Cards --- */
.product-hover-reveal .btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    flex-grow: 1; /* Make buttons share the space */
    max-width: 150px;
    transition: all 0.3s ease;
}
.btn.btn-outline {
    background: transparent;
    border: 2px solid var(--violet);
    color: var(--violet);
}
.btn.btn-solid {
    background: var(--violet);
    border: 2px solid var(--violet);
    color: var(--white);
}
.btn.btn-outline:hover {
    background: var(--violet);
    color: var(--white);
}
.btn.btn-solid:hover {
    background: #6a008a; /* Darker violet */
    border-color: #6a008a;
}

/* --- HOVER STATE --- */
.product-card-sophisticated:hover .product-image-wrapper img {
    transform: scale(1.05);
}
.product-card-sophisticated:hover .quick-view-btn {
    opacity: 1;
    transform: scale(1);
}
.product-card-sophisticated:hover .product-hover-reveal {
    transform: translateY(0);
    opacity: 1;
}


/* Signature Gemstone Section */
.signature-gem-section {
    padding: 6rem 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax effect */
    color: var(--white);
    position: relative;
}

.signature-gem-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(74, 0, 224, 0.7);
}

.signature-gem-section .container {
    position: relative;
    z-index: 1;
    max-width: 800px;
    text-align: center;
}

.signature-gem-section h2 {
    font-family: var(--font-primary);
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

/* Bestsellers Section */
/* --- 3D Rotating Bestseller Carousel --- */

.bestsellers-section {
    padding: 6rem 0;
    background-color: var(--white); /* Changed for better contrast */
}

.carousel-3d-container {
    position: relative;
    width: 100%;
    max-width: 400px; /* Width of the central item */
    height: 500px; /* Height of the central item */
    margin: 3rem auto;
    /* This creates the 3D space! */
    perspective: 1200px;
}

.carousel-3d {
    width: 100%;
    height: 100%;
    position: absolute;
    /* This allows children to exist in the 3D space */
    transform-style: preserve-3d;
    /* Smooth rotation animation */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.carousel-3d-item {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    /* Backface is hidden so you don't see the back of other items */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    cursor: pointer;
}

.carousel-3d-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Positioning the items in a 3D circle --- */
/* This is based on 5 items (360 / 5 = 72 degrees) */
/* The translateZ value is the radius of the carousel */
.carousel-3d-item:nth-child(1) { transform: rotateY(0deg) translateZ(350px); }
.carousel-3d-item:nth-child(2) { transform: rotateY(72deg) translateZ(350px); }
.carousel-3d-item:nth-child(3) { transform: rotateY(144deg) translateZ(350px); }
.carousel-3d-item:nth-child(4) { transform: rotateY(216deg) translateZ(350px); }
.carousel-3d-item:nth-child(5) { transform: rotateY(288deg) translateZ(350px); }

/* --- Item Info & Hover Effect --- */
.carousel-item-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 3rem 1.5rem 1.5rem; /* More padding at top */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    color: var(--white);
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.carousel-3d-item:hover .carousel-item-info {
    opacity: 1;
    transform: translateY(0);
}

.carousel-item-info h3 {
    margin: 0 0 0.5rem 0;
    font-family: var(--font-primary);
    font-size: 1.5rem;
}
.carousel-item-info a {
    color: var(--yellow);
    text-decoration: none;
    font-weight: bold;
}

/* --- Navigation Buttons --- */
.carousel-3d-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 120%; /* Wider than the container to place buttons outside */
    left: -10%;
    display: flex;
    justify-content: space-between;
    z-index: 10;
}

.carousel-nav-btn {
    background: var(--white);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    color: var(--violet);
    transition: transform 0.2s ease;
}
.carousel-nav-btn:hover {
    transform: scale(1.1);
}
.carousel-nav-btn svg {
    width: 28px;
    height: 28px;
}

/* Custom Creation Section */
.custom-creation-section {
    padding: 6rem 0;
    text-align: center;
    background: var(--light-yellow);
}

.custom-creation-section .section-title {
    color: var(--dark-grey);
}

.custom-creation-section p {
    max-width: 600px;
    margin: 0 auto 2rem auto;
}/* --- Appended Styles for Artisans Page --- */

/* Artisans Hero Section */
.artisans-hero-section {
    padding: 12rem 0 6rem 0;
    text-align: center;
    color: var(--white);
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
    background-size: cover;
    background-position: center;
}

.artisans-hero-section h1 {
    font-family: var(--font-primary);
    font-size: clamp(3rem, 7vw, 5rem);
    margin-bottom: 1rem;
}

.artisans-hero-section p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.9;
}

/* Master Artisans Section */

/* --- Redesigned - Master Artisans Section --- */

.master-artisans-section {
    padding: 6rem 0;
    background-color: var(--light-grey); /* A slightly off-white background */
}

.artisan-profiles-grid-redesigned {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 2.5rem;
}

.artisan-card-redesigned {
    position: relative;
    border-radius: 15px;
    overflow: hidden; /* This is crucial for the slide-up effect */
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: box-shadow 0.4s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.artisan-card-redesigned img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 5/6;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.4s ease;
}

/* --- The content visible by default --- */
.artisan-initial-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 3rem 1.5rem 1.5rem;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    color: var(--white);
    transition: opacity 0.4s ease;
    z-index: 2;
}

.artisan-initial-info h3 {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    margin: 0;
}

.artisan-initial-info span {
    display: block;
    color: var(--yellow);
    font-weight: 500;
}

/* --- The content that is revealed on hover --- */
.artisan-hover-reveal {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
    
    /* The glass morphism effect */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    
    color: var(--dark-grey);
    z-index: 1; /* Sits below the initial info until revealed */
    
    /* Hidden by default, slides up on hover */
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.artisan-hover-reveal p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
}

/* --- HOVER STATES --- */

.artisan-card-redesigned:hover {
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.artisan-card-redesigned:hover img {
    transform: scale(1.05);
    filter: brightness(1.1); /* Slightly brighten the image */
}

/* On hover, hide the initial info */
.artisan-card-redesigned:hover .artisan-initial-info {
    opacity: 0;
}

/* On hover, reveal the biography panel */
.artisan-card-redesigned:hover .artisan-hover-reveal {
    transform: translateY(0);
}
/* Atelier Section */
.atelier-section {
    padding: 6rem 0;
    background-color: var(--light-grey);
}

.atelier-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 250px);
    gap: 1rem;
}

.atelier-gallery img:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
.atelier-gallery img:nth-child(2) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
.atelier-gallery img:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

.atelier-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}


/* Philosophy of Craft Section */
.philosophy-craft-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--light-violet), var(--light-yellow));
    text-align: center;
}

.philosophy-craft-section .container {
    max-width: 800px;
}

.philosophy-craft-section h2 {
    font-family: var(--font-primary);
    font-size: 2.5rem;
    color: var(--violet);
    margin-bottom: 1.5rem;
}

/* The Process Section */
.process-section {
    padding: 6rem 0;
}

.process-timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.process-timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--light-violet);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
}

.process-step {
    padding: 10px 40px;
    position: relative;
    width: 50%;
}

/* Circle on the timeline */
.process-step::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    background-color: var(--white);
    border: 4px solid var(--yellow);
    top: 25px;
    border-radius: 50%;
    z-index: 1;
}

/* Place containers to the left */
.process-step:nth-child(odd) {
    left: 0;
    text-align: right;
}
/* Place containers to the right */
.process-step:nth-child(even) {
    left: 50%;
}
/* Adjust the circle for right-sided containers */
.process-step:nth-child(even)::after {
    left: -10px;
}

.process-content {
    padding: 20px 30px;
    background-color: var(--light-grey);
    position: relative;
    border-radius: 6px;
}

.process-content h3 {
    color: var(--violet);
}

/* Mentorship Section */
.mentorship-section {
    padding: 6rem 0;
    background-color: var(--white);
}

.mentorship-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.mentorship-image img {
    border-radius: 10px;
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.mentorship-text .section-title { text-align: left; }
.mentorship-text p { margin-bottom: 2rem; }

/* Bespoke CTA Section */
.bespoke-cta-section {
    padding: 6rem 0;
    text-align: center;
    background-color: var(--light-grey);
}

/* --- Responsive Adjustments for Artisans Page --- */
@media (max-width: 992px) {
    .mentorship-content {
        grid-template-columns: 1fr;
    }
    .mentorship-text .section-title {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .atelier-gallery {
        display: block;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .atelier-gallery img {
        grid-column: auto;
        grid-row: auto;
        height: 400px;
        object-fit: cover;
        margin-bottom: 10px;
    }
    
    .process-timeline::after {
        left: 15px;
    }
    .process-step {
        width: 100%;
        padding-left: 50px;
        padding-right: 15px;
    }
    .process-step:nth-child(odd),
    .process-step:nth-child(even) {
        left: 0;
        text-align: left;
    }
    .process-step::after,
    .process-step:nth-child(even)::after {
        left: 5px;
    }
}

/* --- Appended Styles for Care Page --- */

/* Care Hero Section */
.care-hero-section {
    padding: 12rem 0 6rem 0;
    text-align: center;
    color: var(--dark-grey);
    background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), ;
    background-size: cover;
    background-position: center;
}

.care-hero-section h1 {
    font-family: var(--font-primary);
    font-size: clamp(3rem, 7vw, 5rem);
    color: var(--violet);
    margin-bottom: 1rem;
}

.care-hero-section p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
}

/* General Care Principles Section */
/* --- Modern Tabs Component Styles --- */

.tabs-component {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* --- Left Column: Content --- */
.tabs-content-wrapper .section-title {
    text-align: left;
}

/* The navigation bar for the tabs */
.tabs-nav {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #e0e0e0;
    margin-top: 2rem;
}

.tab-btn {
    padding: 1rem 1.5rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: #888;
    position: relative;
    transition: color 0.3s ease;
}

.tab-btn.active {
    color: var(--violet);
}

/* The sliding indicator line */
.tabs-nav::after {
    content: '';
    position: absolute;
    bottom: -1px; /* Sits perfectly on top of the border */
    left: 0;
    height: 3px;
    background-color: var(--yellow);
    border-radius: 3px;
    /* This transition is the key to the smooth slide */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* These will be set by JavaScript */
    width: var(--indicator-width, 0);
    transform: translateX(var(--indicator-offset, 0));
}


/* The content panes */
.tabs-content {
    margin-top: 2rem;
    position: relative;
    min-height: 300px; /* Prevents layout shifts */
}

.tab-pane {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

.tab-pane.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tab-pane p {
    font-size: 1.1rem;
    line-height: 1.7;
}


/* --- Right Column: Images --- */
.tabs-image-wrapper {
    position: relative;
    width: 100%;
    height: 400px;
    aspect-ratio: 4/5;
    border-radius: 15px;
    overflow: hidden;
}

.tab-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    /* This transition creates the cross-fade effect */
    transition: opacity 0.6s ease-in-out;
}

.tab-image.active {
    opacity: 1;
}

/* --- Responsive Adjustments for Tabs --- */
@media (max-width: 992px) {
    .tabs-component {
        grid-template-columns: 1fr; /* Stack the columns */
    }
    
    .tabs-image-wrapper {
        order: -1; /* Move the image to the top on smaller screens */
        margin-bottom: 2rem;
    }

    .tabs-content-wrapper .section-title {
        text-align: center;
    }
}

/* Cleaning Guide Section */
/* --- Modern Cleaning Guide Slider --- */

.cleaning-slider-container {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    /* The viewport for the slider track */
    overflow: hidden;
}

.cleaning-slider-track {
    display: flex;
    /* This transition creates the smooth slide */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cleaning-slide {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 0 1rem; /* Padding to prevent content touching edges */
    background: var(--white);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow: hidden;
}

.cleaning-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background-color: var(--light-violet);
    text-align: center;
}

.cleaning-card-header img {
    margin-bottom: 1rem;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
}

.cleaning-card-header h4 {
    font-size: 1.5rem;
    color: var(--violet);
    margin: 0;
}

.cleaning-card-body {
    padding: 2rem;
    text-align: center;
}

.cleaning-card-body p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.7;
}


/* --- Slider Navigation --- */

.cleaning-slider-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2.5rem auto 0 auto;
    max-width: 400px;
}

.cleaning-slider-btn {
    background: none;
    border: 2px solid #ddd;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--dark-grey);
    transition: all 0.3s ease;
}

.cleaning-slider-btn:hover {
    border-color: var(--violet);
    color: var(--violet);
}

.cleaning-slider-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cleaning-slider-btn svg {
    width: 24px;
    height: 24px;
}

/* Progress bar container */
.cleaning-slider-progress {
    display: flex;
    gap: 8px;
    flex-grow: 1;
    margin: 0 1rem;
}

.progress-bar-item {
    flex-grow: 1;
    height: 6px;
    background-color: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
}

.progress-bar-fill {
    height: 100%;
    width: 0; /* Starts empty */
    background-color: var(--yellow);
    border-radius: 3px;
    /* The fill animation */
    transition: width 0.4s ease-in-out;
}

/* When a bar is active, fill it */
.progress-bar-item.active .progress-bar-fill {
    width: 100%;
}

/* Storage Solutions Section */
.storage-solutions-section {
    padding: 6rem 0;
}

.storage-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.storage-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}
.storage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.storage-item:first-child {
    grid-row: 1 / 3;
}
.storage-item span {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    text-shadow: 1px 1px 3px #000;
}
.storage-tips {
    text-align: center;
    max-width: 800px;
    margin: 2rem auto 0 auto;
}

/* Delicate Gemstones Section */

/* --- Sophisticated Gemstone Care Stepper --- */

.gemstone-specifics-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--light-violet), var(--light-yellow));
}

.gemstone-care-stepper-component {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 1 part for nav, 2 parts for content */
    gap: 4rem;
    align-items: flex-start; /* Align to the top */
    max-width: 1100px;
    margin: 2rem auto 0 auto;
}

/* --- Left Column: Stepper Navigation --- */
.stepper-nav {
    position: relative;
    /* The vertical connecting line */
    border-left: 2px solid rgba(142, 36, 170, 0.2);
}

.stepper-item {
    display: flex;
    align-items: center;
    padding: 1.5rem 0 1.5rem 2rem;
    position: relative;
    cursor: pointer;
}

.stepper-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--white);
    border: 2px solid rgba(142, 36, 170, 0.2);
    position: absolute;
    left: -11px; /* Center it on the border-left line */
    transition: all 0.4s ease;
}

.stepper-item-content h3 {
    font-size: 1.4rem;
    margin: 0 0 0.2rem 0;
    color: var(--dark-grey);
    transition: color 0.4s ease;
}

.stepper-item-content span {
    font-size: 0.9rem;
    color: #777;
    transition: color 0.4s ease;
}

/* --- Active State for Stepper Items --- */
.stepper-item.active .stepper-indicator {
    background-color: var(--violet);
    border-color: var(--violet);
    transform: scale(1.2);
    box-shadow: 0 0 0 4px rgba(142, 36, 170, 0.2);
}

.stepper-item.active .stepper-item-content h3 {
    color: var(--violet);
}

.stepper-item.active .stepper-item-content span {
    color: var(--violet);
}

/* --- Right Column: Content Display --- */
.stepper-content-pane {
    position: relative;
    min-height: 400px; /* Prevents layout shifts */
}

.stepper-content {
    position: absolute;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.stepper-content.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.stepper-content img {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    display: block;
}

.stepper-content p {
    padding: 2rem;
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* --- Responsive Adjustments for Stepper --- */
@media (max-width: 992px) {
    .gemstone-care-stepper-component {
        grid-template-columns: 1fr; /* Stack the columns */
        gap: 2rem;
    }

    .stepper-nav {
        display: flex; /* Change to a horizontal layout */
        flex-direction: column;
        border-left: none; /* Remove vertical line */
        border-bottom: 2px solid rgba(142, 36, 170, 0.2);
    }

    .stepper-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1rem;
        flex: 1;
    }

    .stepper-indicator {
        position: absolute;
        bottom: -11px; /* Position on the bottom border */
        left: 50%;
        transform: translateX(-50%);
    }
    
    .stepper-item.active .stepper-indicator {
        transform: translateX(-50%) scale(1.2); /* Adjust transform */
    }

    .stepper-item-content {
        margin-top: 0;
    }
}
/* Professional Maintenance Section */
.professional-maintenance-section {
    padding: 6rem 0;
}

.maintenance-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    background-color: var(--light-grey);
    border-radius: 15px;
    overflow: hidden;
}

.maintenance-text {
    background-color: #fff;
    padding: 3rem;
}
.maintenance-text .section-title {
    text-align: left;
}
.maintenance-text ul {
    list-style: none;
    padding-left: 0;
    margin: 1.5rem 0;
}
.maintenance-text li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.5rem;
}
.maintenance-text li::before {
    content: '◆';
    position: absolute;
    left: 0;
    color: var(--yellow);
}

.maintenance-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}


/* Travel Tips Section */
/* --- Superb Travel Tips Accordion --- */

.travel-tips-section-superb {
    padding: 6rem 0;
    background-color: var(--white); /* Or your desired background */
}

.travel-tips-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Asymmetrical columns */
    gap: 3rem;
    align-items: center;
    margin-top: 3rem;
}

/* --- Left Column: Image --- */
.travel-image-wrapper {
    border-radius: 15px;
    overflow: hidden;
    height: 100%;
}

.travel-image-wrapper img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.travel-image-wrapper:hover img {
    transform: scale(1.03);
}

/* --- Right Column: Accordion --- */
.travel-accordion {
    background-color: var(--white);
    border-radius: 15px;
    padding: 2.5rem;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
}

.travel-accordion h3 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.accordion-item {
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.3s ease;
}
.accordion-item:last-child {
    border-bottom: none;
}
.accordion-item.active {
    background-color: var(--light-violet);
}

.accordion-header {
    width: 100%;
    background: none;
    border: none;
    padding: 1.5rem 0;
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
    font-size: 1.1rem;
}

/* --- Accordion Icon Styles & Animation --- */
.accordion-icon {
    position: relative;
    width: 24px;
    height: 24px;
    margin-right: 1rem;
    flex-shrink: 0;
}

.accordion-icon svg {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 0.4s ease;
}
.accordion-icon .circle {
    fill: transparent;
    stroke: #ccc;
    stroke-width: 2;
}
.accordion-icon .checkmark {
    fill: var(--white);
    stroke: var(--white);
    stroke-width: 1;
    stroke-dasharray: 24;
    stroke-dashoffset: 24; /* Hides the checkmark */
}
.accordion-item.active .accordion-icon .circle {
    transform: rotate(180deg);
    fill: var(--violet);
    stroke: var(--violet);
}
.accordion-item.active .accordion-icon .checkmark {
    stroke-dashoffset: 0; /* Draws the checkmark */
    transition-delay: 0.2s;
}

/* --- Accordion Content Styles & Animation --- */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1), padding 0.5s ease;
}
.accordion-content p {
    margin: 0;
    padding: 0 1.5rem 3.5rem; /* Aligned with the text */
    line-height: 1.7;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .travel-tips-grid {
        grid-template-columns: 1fr; /* Stack the columns */
    }
}

/* --- Responsive Adjustments for Care Page --- */
@media (max-width: 992px) {
    .storage-gallery {
        grid-template-columns: 1fr 1fr;
    }
    .storage-item:first-child {
        grid-row: auto;
        grid-column: 1 / 3;
    }
    .maintenance-content {
        grid-template-columns: 1fr;
    }
    .maintenance-image {
        order: -1; /* Move image to the top on smaller screens */
        max-height: 400px;
    }
    .maintenance-text .section-title {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .storage-gallery {
        grid-template-columns: 1fr;
    }
    .storage-item:first-child {
        grid-column: auto;
    }
}

/* --- Appended Styles for Sales Page --- */

/* Sales Hero Section */
.sales-hero-section {
    padding: 12rem 0 6rem 0;
    text-align: center;
    color: var(--dark-grey);
    background: linear-gradient(135deg, var(--light-yellow), var(--yellow));
}

.sales-hero-section h1 {
    font-family: var(--font-primary);
    font-size: clamp(3rem, 7vw, 5rem);
    color: var(--dark-grey);
    margin-bottom: 1rem;
}

.sales-hero-section p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 2rem auto;
}

.countdown-timer {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
}

.countdown-timer div {
    background: rgba(255, 255, 255, 0.4);
    padding: 1.5rem 2rem;
    border-radius: 10px;
    min-width: 120px;
}

.countdown-timer span {
    display: block;
    font-size: 3rem;
    font-weight: bold;
    color: var(--violet);
}

/* Featured Deals Section */

/* --- Redesigned - Sophisticated Featured Deals --- */

.featured-deals-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--light-yellow), var(--yellow)); /* New BG */
}

.sales-product-grid-sophisticated {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 2.5rem;
}

/* --- 3D Tilt Effect Wrapper --- */
.sale-card-wrapper-3d {
    perspective: 1000px;
}

.sale-product-card-sophisticated {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    background: var(--white);
    /* Smooth transition for the tilt effect */
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
    transform-style: preserve-3d;
}

/* This applies the tilt based on mouse position (set by JS, but works with CSS too) */
.sale-product-card-sophisticated:hover {
    box-shadow: 0 30px 60px rgba(0,0,0,0.2);
    transform: rotateX(var(--rotateX, 0)) rotateY(var(--rotateY, 0));
}


/* --- Card Content & Image --- */
.sale-product-card-sophisticated img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 15px;
}

.sale-badge-sophisticated {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 60px;
    height: 60px;
    background-color: var(--violet);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1rem;
    z-index: 3;
    box-shadow: 0 5px 10px rgba(142, 36, 170, 0.3);
}

.product-initial-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 3rem 1.5rem 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    z-index: 2;
}

.product-initial-info h3 {
    font-family: var(--font-primary);
    color: var(--white);
    font-size: 1.6rem;
    margin: 0;
}

/* --- The Slide-Up Hover Panel --- */
.product-hover-reveal-sale {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem;
    box-sizing: border-box;
    
    /* Glass morphism effect */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);

    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Hidden by default, slides up on hover */
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease;
    z-index: 2;
}

.price-info {
    text-align: left;
}
.price-info .original-price {
    display: block;
    text-decoration: line-through;
    color: #666;
    font-size: 1rem;
}
.price-info .sale-price {
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--violet);
    line-height: 1.1;
}

.shop-now-link {
    font-weight: bold;
    color: var(--violet);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 2px solid var(--violet);
    border-radius: 50px;
    transition: all 0.3s ease;
}

.shop-now-link:hover {
    background-color: var(--violet);
    color: var(--white);
}


/* --- Hover State --- */
.sale-product-card-sophisticated:hover .product-hover-reveal-sale {
    transform: translateY(0);
    opacity: 1;
}

/* This is a small JS snippet to add to your main JS file for the tilt effect. */
/* It's optional, but highly recommended for the full effect. */
/* You can also achieve a basic tilt with just CSS if you prefer. */

/* Sale Philosophy Section */
.sale-philosophy-section {
    padding: 6rem 0;
    background-color: var(--light-grey);
    text-align: center;
}
.sale-philosophy-section .container {
    max-width: 800px;
}
.sale-philosophy-section p::first-letter {
    font-family: var(--font-primary);
    font-size: 4rem;
    color: var(--violet);
    float: left;
    line-height: 1;
    margin-right: 0.5rem;
    padding-top: 0.5rem;
}


/* Last Chance Section */
.last-chance-section {
    padding: 6rem 0;
    background: var(--dark-grey);
    color: var(--white);
}

.last-chance-section .section-title,
.last-chance-section .section-subtitle {
    color: var(--white);
}

.last-chance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.last-chance-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}
.last-chance-item img {
    transition: transform 0.4s ease;
    width: 100%;
    height: 400px;
    object-fit: cover;
}
.last-chance-item:hover img {
    transform: scale(1.05);
}

.last-chance-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
}
.last-chance-overlay h3 {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    margin: 0;
}
.last-chance-overlay p {
    color: var(--yellow);
    font-weight: bold;
}


/* Shop by Category Section */
/* --- Modern Category Slider --- */

.shop-by-category-section {
    padding: 6rem 0;
    background-color: var(--white);
}

/* Header with Title and Nav Buttons */
.category-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}
.category-slider-header .section-title {
    margin: 0;
    text-align: left;
}

.category-slider-nav {
    display: flex;
    gap: 0.5rem;
}

.category-slider-btn {
    background: transparent;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--dark-grey);
    transition: all 0.3s ease;
}
.category-slider-btn:hover {
    border-color: var(--violet);
    color: var(--violet);
}
.category-slider-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: #e0e0e0;
    color: #e0e0e0;
}
.category-slider-btn svg {
    width: 24px;
    height: 24px;
}


/* --- Slider Container & Track --- */

.category-slider-container {
    position: relative;
    /* This is the main viewport for the slider */
    overflow: hidden;
    margin: 0 -2rem; /* Allows peeking items to touch screen edges */
    padding: 0 2rem;
}

.category-slider-track {
    display: flex;
    gap: 1.5rem;
    /* This transition creates the smooth slide animation */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.category-slide-item {
    position: relative;
    flex: 0 0 22%; /* Adjust this to show more/fewer items */
    min-width: 280px;
    border-radius: 15px;
    overflow: hidden;
    text-decoration: none;
    display: block;
}

.category-slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 1/1;
    transition: transform 0.5s ease;
}

/* --- Item Overlay & Hover Effect --- */
.category-item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 3rem 1.5rem 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    color: var(--white);
    text-align: center;
    transition: background-color 0.3s ease;
}

.category-item-overlay span {
    font-size: 1.3rem;
    font-weight: bold;
}

.category-slide-item:hover img {
    transform: scale(1.05);
}
.category-slide-item:hover .category-item-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .category-slide-item {
        flex-basis: 40%; /* Show fewer items on smaller screens */
        min-width: 250px;
    }
}
@media (max-width: 500px) {
     .category-slider-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
}


/* Sale Terms Section */
/* --- Redesigned - Unusual Sale Terms Section --- */

.sale-terms-section-unusual {
    padding: 6rem 0;
    background-color: var(--white);
}

.terms-grid-unusual {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    align-items: center;
}

.terms-intro-text .section-title {
    text-align: left;
}


/* --- The Layered "Document" Wrapper --- */
.terms-list-wrapper {
    position: relative;
}

/* The decorative background panel */
.decorative-bg {
    position: absolute;
    inset: -20px;
    background-color: var(--light-violet);
    border-radius: 20px;
    z-index: 0;
    transform: rotate(-3deg);
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* The main content panel */
.terms-content-unusual {
    position: relative;
    z-index: 1;
    background-color: var(--white);
    padding: 2.5rem;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* --- Parallax Hover Effect --- */
.terms-list-wrapper:hover .decorative-bg {
    transform: rotate(-1deg) scale(1.02);
}
.terms-list-wrapper:hover .terms-content-unusual {
    transform: translate(5px, -5px);
}


/* --- List and Item Styling --- */
.terms-content-unusual ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.terms-content-unusual li {
    padding: 1.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.terms-content-unusual li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.terms-content-unusual li:first-child {
    padding-top: 0;
}


.term-item-content {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.term-icon {
    flex-shrink: 0;
    color: var(--violet);
}
.term-icon svg {
    width: 28px;
    height: 28px;
}

.term-item-content h4 {
    font-family: var(--font-primary);
    font-size: 1.3rem;
    margin: 0 0 0.5rem 0;
    color: var(--dark-grey);
}
.term-item-content p {
    margin: 0;
    line-height: 1.6;
    color: #555;
}


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .terms-grid-unusual {
        grid-template-columns: 1fr; /* Stack the columns */
        gap: 3rem;
    }

    .terms-intro-text .section-title,
    .terms-intro-text p {
        text-align: center;
    }
}

/* Early Access Section */
.early-access-section {
    padding: 5rem 0;
    text-align: center;
    background-color: var(--violet);
    color: var(--white);
}
.early-access-section h2 {
    font-family: var(--font-primary);
    font-size: 2.5rem;
}
.early-access-section p {
    max-width: 500px;
    margin: 1rem auto 2rem auto;
}

/* --- Responsive Adjustments for Sales Page --- */
@media (max-width: 768px) {
    .last-chance-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 500px) {
    .countdown-timer {
        flex-direction: column;
        align-items: center;
    }
}

/* --- Appended Styles for Shipping Page --- */

/* Shipping Hero Section */
.shipping-hero-section {
    padding: 12rem 0 6rem 0;
    text-align: center;
    color: var(--white);
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    background-size: cover;
    background-position: center;
}
.shipping-hero-section h1 {
    font-family: var(--font-primary);
    font-size: clamp(3rem, 7vw, 5rem);
    margin-bottom: 1rem;
}
.shipping-hero-section p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
}

/* Shipping Options Section */

.vertical-slider-container {
    position: relative;
    max-width: 500px; /* Adjust width as needed */
    height: 550px; /* This is the viewport height */
    margin: 2rem auto 0 auto;
    /* This is crucial for the peek-a-boo effect */
    overflow: hidden;
}

.vertical-slider-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* This smooth transition is the core animation */
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.vertical-slide-item {
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 150px; /* Height of a single slide */
    margin: 15px 0; /* Vertical gap between slides */
    padding: 1rem;
    background: var(--white);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    cursor: pointer;
    box-sizing: border-box;

    /* Default state for non-active slides */
    opacity: 0.5;
    transform: scale(0.85);
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), 
                opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* State for the active slide */
.vertical-slide-item.active-slide {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 20px 40px rgba(142, 36, 170, 0.15);
}


/* --- Card Content Styling --- */

.slide-item-icon img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
}

.slide-item-content h3 {
    font-size: 1.6rem;
    margin: 0 0 0.5rem 0;
}
.slide-item-content .shipping-cost {
    display: block;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--violet);
    margin-bottom: 0.5rem;
}
.slide-item-content .shipping-time {
    font-style: italic;
    color: #666;
    margin: 0;
}

/* --- Vertical Navigation Buttons --- */

.vertical-slider-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    pointer-events: none; /* Allows clicks to pass through to slides */
}

.slider-nav-btn {
    pointer-events: all; /* Make buttons clickable */
    background: var(--white);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    color: var(--violet);
    z-index: 10;
}
.slider-nav-btn:hover {
    transform: scale(1.1);
    background-color: var(--light-violet);
}
.slider-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: scale(1);
    background-color: #f0f0f0;
}

.slider-nav-btn.up-btn { margin-top: 0px; }
.slider-nav-btn.down-btn { margin-bottom: 0px; }
.slider-nav-btn svg { width: 24px; height: 24px; }


/* International Shipping Section */
/* --- Redesigned - Fascinating International Shipping Section --- */

.international-shipping-section-fascinating {
    padding: 6rem 0;
    background-color: var(--white);
    overflow: hidden; /* Ensures shadows don't create scrollbars */
}

.international-content-fascinating {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}


.international-text-fascinating
{
    width: 100%;
}
/* --- Left Column: Text Styling --- */
.international-text-fascinating .section-title {
    text-align: left;
}

.international-text-fascinating h3 {
    font-family: var(--font-primary);
    font-size: 2rem;
    color: var(--yellow);
    font-weight: 500;
    margin: -1rem 0 1.5rem 0;
}

.shipping-details-box {
    margin: 2rem 0;
    padding: 1.5rem;
    border-left: 3px solid var(--violet);
    background-color: var(--light-grey);
    border-radius: 0 10px 10px 0;
}
.shipping-details-box div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.shipping-details-box div:last-child {
    margin-bottom: 0;
}
.shipping-details-box span {
    color: #666;
}

.small-text {
    font-size: 0.9rem;
    color: #777;
    line-height: 1.6;
}

/* --- Right Column: 3D Globe Styling --- */
.globe-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /* This creates the 3D space */
    perspective: 1500px;
}

.globe {
    width: 400px;
    height: 400px;
    position: relative;
    /* This allows its children to exist in the 3D space */
    transform-style: preserve-3d;
    /* The continuous rotation animation */
    animation: spin-globe 40s linear infinite;
}

@keyframes spin-globe {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

.globe-sphere {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* A subtle, stylized vector world map */
    background-image:  linear-gradient(135deg, var(--violet) 0%, #4a00e0 100%);
    background-size: auto, cover;
    /* This inset shadow gives the sphere its 3D look */
    box-shadow: inset 0 0 50px rgba(0,0,0,0.3), 0 10px 50px rgba(0,0,0,0.1);
    transition: transform 0.4s ease;
}

.globe-shadow {
    position: absolute;
    bottom: -50px;
    width: 100%;
    height: 40px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, transparent 70%);
    filter: blur(10px);
    z-index: -1;
}

/* --- Hover Interaction --- */
.globe-container:hover .globe {
    animation-play-state: paused; /* Pause rotation on hover */
}
.globe-container:hover .globe-sphere {
    transform: scale(1.05); /* Slightly enlarge the globe */
}


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .international-content-fascinating {
        display: block; /* Stack the columns */
        gap: 3rem;
    }

    .international-text-fascinating .section-title,
    .international-text-fascinating h3,
    .international-text-fascinating p {
        text-align: center;
        font-size: 0.9rem;
    }

    .globe-container {
        order: -1; /* Move the globe to the top */
        min-height: 350px;
    }
    
    .globe {
        width: 300px;
        height: 300px;
    }
}

/* Packaging & Gifting Section */
.packaging-gifting-section {
    padding: 6rem 0;
    background-color: var(--light-grey);
}
.packaging-gallery {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}
.main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.thumb-images {
    display: grid;
    gap: 1rem;
}
.thumb-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}
.thumb-images img:hover {
    opacity: 0.8;
}
.packaging-description {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* Order Tracking Section */
.order-tracking-section {
    padding: 6rem 0;
    text-align: center;
    background: linear-gradient(135deg, var(--light-violet), var(--light-yellow));
}
.tracking-visual {
    margin: 2rem auto;
}
.tracking-visual img {
    border-radius: 10px;
}

/* Returns Policy Section */
.returns-policy-section {
    padding: 6rem 0;
}
.returns-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: center;
}
.returns-image img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.returns-text .section-title {
    text-align: left;
}
.returns-text h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.4rem;
    color: var(--violet);
}

/* Shipping FAQ Section */
.shipping-faq-section {
    padding: 6rem 0;
    background-color: var(--light-grey);
}
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    border-bottom: 1px solid #ddd;
}
.faq-question {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 1.5rem 0;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    padding-right: 2rem;
}
.faq-question::after {
    content: '+';
    position: absolute;
    right: 0;
    font-size: 2rem;
    color: var(--violet);
    transition: transform 0.3s ease;
}
.faq-question.active::after {
    transform: rotate(45deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}
.faq-answer p {
    padding: 0 0 1.5rem 0;
}
.faq-images {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
}
.faq-images img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
}


/* --- Responsive Adjustments for Shipping Page --- */
@media (max-width: 992px) {
    .international-content, .returns-content {
        grid-template-columns: 1fr;
    }
    .international-text .section-title, .returns-text .section-title {
        text-align: center;
    }
    .returns-image {
        order: -1; /* Move image to top */
    }
}
@media (max-width: 768px) {
    .packaging-gallery {
        grid-template-columns: 1fr;
    }
    .thumb-images {
        grid-template-columns: repeat(3, 1fr);
    }

    .carousel-3d-container
    {
        max-width: 210px;
    }
}

/* --- Appended Styles for FAQ Page --- */

/* FAQ Hero Section */
.faq-hero-section {
    padding: 12rem 0 6rem 0;
    text-align: center;
    color: var(--dark-grey);
    background: linear-gradient(135deg, var(--light-violet), var(--light-yellow));
}
.faq-hero-section h1 {
    font-family: var(--font-primary);
    font-size: clamp(3rem, 7vw, 5rem);
    color: var(--violet);
    margin-bottom: 1rem;
}
.faq-hero-section p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 2rem auto;
}
.faq-search-bar {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
}
.faq-search-bar input {
    flex-grow: 1;
    padding: 0.8rem 1.5rem;
    border: 2px solid var(--violet);
    border-right: none;
    border-radius: 50px 0 0 50px;
    font-size: 1rem;
}
.faq-search-bar input:focus {
    outline: none;
    background-color: var(--white);
}
.faq-search-bar button {
    padding: 0.8rem 2rem;
    border-radius: 0 50px 50px 0;
    border: 2px solid var(--violet);
    background-color: var(--violet);
    color: var(--white);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}
.faq-search-bar button:hover {
    background-color: #6a008a;
}

/* Topic Navigation Section */
.topic-nav-section {
    padding: 6rem 0;
}
.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    text-align: center;
}
.topic-card {
    text-decoration: none;
    color: var(--dark-grey);
    padding: 2rem;
    border-radius: 10px;
    background-color: var(--white);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}
.topic-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.topic-card img {
    margin: 0 auto 1rem auto;
    border-radius: 50%;
}
.topic-card h3 {
    color: var(--violet);
}

/* FAQ Accordion Section */
.faq-accordion-section {
    padding: 6rem 0;
}
.faq-accordion-section.alternate-bg {
    background-color: var(--light-grey);
}

/* Visual Guide Section */
.visual-guide-section {
    padding: 6rem 0;
    background-color: var(--light-grey);
}
.visual-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 2rem;
}
.guide-card {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.guide-card img {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
}
.guide-card h3 {
    font-size: 1.4rem;
    color: var(--violet);
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
}
.guide-card p {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Contact FAQ Section */
.contact-faq-section {
    padding: 6rem 0;
    background-color: var(--white);
}
.contact-faq-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: center;
    background-color: var(--light-violet);
    border-radius: 15px;
    overflow: hidden;
}
.contact-faq-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.contact-faq-text {
    padding: 3rem;
}
.contact-faq-text h2 {
    font-family: var(--font-primary);
    font-size: 2.5rem;
    color: var(--violet);
}
.contact-faq-text p {
    margin: 1rem 0 2rem 0;
}
.contact-faq-text ul {
    list-style: none;
    margin-bottom: 2rem;
}
.contact-faq-text li {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

/* --- Responsive Adjustments for FAQ Page --- */
@media (max-width: 992px) {
    .contact-faq-content {
        grid-template-columns: 1fr;
    }
    .contact-faq-image {
        max-height: 400px;
    }
}


/* --- Footer --- */
/* --- Redesigned - Sophisticated Footer --- */

.footer-redesigned {
    padding-top: 5rem;
    background-color: var(--dark-grey);
    /* Subtle background texture */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23333333' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
    color: var(--light-grey);
    position: relative;
}

/* The decorative yellow top line */
.footer-redesigned::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--yellow);
}

/* --- 1. Main Top Section --- */
.footer-main {
    text-align: center;
    padding-bottom: 3rem;
}
.footer-logo {
    font-family: var(--font-primary);
    font-size: 3rem;
    color: var(--white);
    margin: 0;
}
.footer-tagline {
    font-size: 1.1rem;
    opacity: 0.8;
    margin-top: 0.5rem;
}

.newsletter-form-footer {
    display: flex;
    max-width: 450px;
    margin: 2rem auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 5px;
}
.newsletter-form-footer input {
    flex-grow: 1;
    background: transparent;
    border: none;
    padding: 0.8rem 1.5rem;
    color: var(--white);
    font-size: 1rem;
}
.newsletter-form-footer input:focus {
    outline: none;
}
.newsletter-form-footer button {
    background: var(--yellow);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    cursor: pointer;
    color: var(--dark-grey);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}
.newsletter-form-footer button:hover {
    background-color: #ffda47; /* Lighter yellow */
}
.newsletter-form-footer button svg {
    width: 22px;
    height: 22px;
}

.social-links-redesigned {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
}
.social-links-redesigned a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: var(--white);
    transition: all 0.3s ease;
}
.social-links-redesigned a:hover {
    background-color: var(--yellow);
    border-color: var(--yellow);
    color: var(--dark-grey);
    transform: scale(1.1) translateY(-3px);
}
.social-links-redesigned svg {
    width: 20px;
    height: 20px;
}

/* --- 2. Secondary Links Section --- */
.footer-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    padding: 3rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-links .footer-col h4 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: var(--white);
}
.footer-links .footer-col ul {
    list-style: none;
    padding: 0;
}
.footer-links .footer-col li {
    margin-bottom: 0.75rem;
}
.footer-links .footer-col a {
    color: var(--light-grey);
    text-decoration: none;
    position: relative;
    padding-bottom: 0.25rem;
}
.footer-links .footer-col a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background-color: var(--yellow);
    transition: width 0.3s ease;
}
.footer-links .footer-col a:hover::after {
    width: 100%;
}

/* --- 3. Sub-Footer --- */
.footer-sub {
    padding: 2rem 0;
    text-align: center;
}
.footer-sub p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.7;
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .section-title { font-size: 1.9rem; }
    .craft-content { grid-template-columns: 1fr; }
    .craft-text { text-align: center; }
    .craft-text .section-title { text-align: center; }
    .style-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        inset: 0 0 0 30%;
        flex-direction: column;
        padding: min(20vh, 10rem) 2rem;
        gap: 2rem;
        background: rgba(10, 10, 10, 0.9);
        backdrop-filter: blur(10px);
        transform: translateX(100%);
        transition: transform 0.4s ease-out;
        align-items: center;
    }

    .nav-links[data-visible="true"] {
        transform: translateX(0%);
    }

    .mobile-nav-toggle {
        display: block;
        position: relative;
        z-index: 9999;
        background: transparent;
        border: 0;
        width: 2rem;
        aspect-ratio: 1;
    }

    .hamburger {
        position: absolute;
        width: 1.5rem;
        height: 2px;
        background: var(--white);
        transition: transform 0.3s;
    }

    .hamburger::before,
    .hamburger::after {
        content: '';
        position: absolute;
        width: 1.5rem;
        height: 2px;
        background: var(--white);
        transition: transform 0.3s, top 0.3s, bottom 0.3s;
    }
    .hamburger::before { top: -6px; }
    .hamburger::after { bottom: -6px; }

    .mobile-nav-toggle[aria-expanded="true"] .hamburger {
        transform: rotate(45deg);
    }
    .mobile-nav-toggle[aria-expanded="true"] .hamburger::before {
        top: 0;
        transform: rotate(90deg) translateY(10px);
    }
     .mobile-nav-toggle[aria-expanded="true"] .hamburger::after {
        bottom: 0;
        transform: rotate(90deg) translateY(10px);
    }
}

/* --- Styles for Legal Pages (Privacy Policy, etc.) --- */

/* Page Hero Section */
.page-hero-section {
    padding: 12rem 0 6rem 0;
    text-align: center;
    background: linear-gradient(135deg, var(--light-violet), var(--light-yellow));
    color: var(--dark-grey);
}

.page-hero-section h1 {
    font-family: var(--font-primary);
    font-size: clamp(3rem, 7vw, 5rem);
    color: var(--violet);
    margin-bottom: 1rem;
}

.page-hero-section p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
}

/* Legal Content Section */
.legal-content-section {
    padding: 6rem 0;
    background-color: var(--white);
}

.legal-content-wrapper {
    max-width: 800px; /* Optimal width for reading text */
    margin: 0 auto;
}

.last-updated {
    font-style: italic;
    color: #888;
    border-bottom: 1px solid #eee;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

.legal-content-wrapper article {
    margin-bottom: 3rem;
}

.legal-content-wrapper h2 {
    font-family: var(--font-primary);
    font-size: 2rem;
    color: var(--violet);
    margin-bottom: 1rem;
}

.legal-content-wrapper p {
    line-height: 1.8;
    color: #444;
    margin-bottom: 1.5rem;
}

.legal-content-wrapper ul {
    list-style: none;
    padding-left: 0;
}

.legal-content-wrapper li {
    padding-left: 2rem;
    position: relative;
    margin-bottom: 1.25rem;
    line-height: 1.7;
}

.legal-content-wrapper li::before {
    content: '◆';
    position: absolute;
    left: 0;
    top: 5px;
    color: var(--yellow);
    font-size: 1rem;
}/* --- Styles for Thank You Page --- */

.thank-you-main {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 6rem 2rem;
    background: linear-gradient(135deg, var(--light-violet), var(--light-yellow));
}

.thank-you-box {
    background: var(--white);
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    text-align: center;
    max-width: 550px;
    width: 100%;
}

.thank-you-box h1 {
    font-family: var(--font-primary);
    font-size: 3rem;
    color: var(--violet);
    margin: 1.5rem 0 1rem 0;
}

.thank-you-box p {
    line-height: 1.7;
    color: #555;
    margin-bottom: 2.5rem;
}

/* --- Animated Checkmark Styles --- */

.checkmark-container {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

.checkmark-svg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    stroke-width: 3;
    stroke: var(--violet);
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px var(--violet);
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3;
    stroke-miterlimit: 10;
    stroke: var(--violet);
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

/* --- Keyframe Animations --- */

/* 1. Draws the circle */
@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

/* 2. Scales the whole SVG */
@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

/* 3. Fills the circle with color */
@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 50px var(--light-violet);
    }
}