/* =====================================================
   MODREN FASHION
   BLACK LUXURY JEWELLERY THEME
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');


/* =====================================================
   COLOURS
===================================================== */

:root {

    --black: #080808;
    --black-soft: #101010;
    --black-card: #151515;

    --gold: #d4af6a;
    --gold-light: #f0dca8;
    --gold-dark: #9b7739;

    --cream: #f7f0e5;
    --muted: #b8aea0;

    --line: rgba(212, 175, 106, 0.25);

}


/* =====================================================
   RESET
===================================================== */

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


html {
    scroll-behavior: smooth;
}


body {
    background: var(--black);
    color: var(--cream);
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}


img {
    max-width: 100%;
    display: block;
}


/* =====================================================
   NAVBAR
===================================================== */

.navbar {

    width: 100%;
    height: 84px;

    padding: 0 7%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: rgba(8, 8, 8, 0.94);

    backdrop-filter: blur(15px);

    border-bottom: 1px solid var(--line);

    position: sticky;
    top: 0;

    z-index: 1000;
}


/* LOGO */

.logo {
    display: flex;
    flex-direction: column;
    line-height: 1;
}


.logo span {

    font-family: 'Cormorant Garamond', serif;

    font-size: 30px;

    letter-spacing: 5px;

    color: var(--cream);
}


.logo small {

    font-size: 8px;

    letter-spacing: 5px;

    color: var(--gold);

    margin-top: 6px;
}


/* NAVIGATION */

.navbar nav {

    display: flex;

    gap: 35px;
}


.navbar nav a {

    font-size: 11px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #d9d0c4;

    position: relative;

    transition: 0.35s ease;
}


.navbar nav a::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -9px;

    width: 0;

    height: 1px;

    background: var(--gold);

    transform: translateX(-50%);

    transition: 0.35s ease;
}


.navbar nav a:hover {

    color: var(--gold-light);
}


.navbar nav a:hover::after {

    width: 100%;
}


/* ICONS */

.nav-icons {

    display: flex;

    gap: 14px;
}


.nav-icons a {

    width: 38px;

    height: 38px;

    border: 1px solid transparent;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--cream);

    transition: 0.4s ease;
}


.nav-icons a:hover {

    color: var(--gold-light);

    border-color: var(--line);

    box-shadow: 0 0 20px rgba(212, 175, 106, 0.15);

    transform: translateY(-3px);
}


/* =====================================================
   HERO
===================================================== */

.hero {

    min-height: calc(100vh - 84px);

    padding: 70px 8%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 75% 45%,
            rgba(212, 175, 106, 0.10),
            transparent 32%
        ),

        radial-gradient(
            circle at 15% 80%,
            rgba(212, 175, 106, 0.05),
            transparent 30%
        ),

        var(--black);
}


/* subtle background glow */

.hero::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    background: rgba(212, 175, 106, 0.035);

    filter: blur(80px);

    right: -150px;

    top: 80px;
}


/* HERO TEXT */

.hero-content {

    width: 50%;

    position: relative;

    z-index: 5;
}


.eyebrow {

    font-size: 10px;

    letter-spacing: 4px;

    color: var(--gold);

    margin-bottom: 20px;

    text-transform: uppercase;
}


.hero h1 {

    font-family: 'Cormorant Garamond', serif;

    font-size: clamp(65px, 8vw, 115px);

    font-weight: 400;

    line-height: 0.83;

    letter-spacing: -3px;

    color: var(--cream);
}


.hero h1 span {

    color: var(--gold);

    font-style: italic;
}


.hero-text {

    max-width: 450px;

    margin: 35px 0;

    font-size: 13px;

    line-height: 2;

    color: var(--muted);
}


/* BUTTON */

.main-btn {

    display: inline-flex;

    align-items: center;

    gap: 20px;

    padding: 17px 30px;

    border: 1px solid var(--gold);

    background: transparent;

    color: var(--cream);

    font-size: 10px;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition: 0.45s ease;
}


.main-btn span {

    color: var(--gold);

    transition: 0.4s ease;
}


.main-btn:hover {

    background: var(--gold);

    color: var(--black);

    box-shadow:
        0 0 25px rgba(212,175,106,0.2);
}


.main-btn:hover span {

    color: var(--black);

    transform: translateX(7px);
}


/* =====================================================
   HERO ART
===================================================== */

.hero-art {

    width: 48%;

    height: 550px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* CENTRAL JEWELLERY */

.jewellery-placeholder {

    width: 240px;

    height: 240px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle at 40% 35%,
            #f5e6c5,
            #b99352 42%,
            #272015 75%,
            #080808 100%
        );

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 85px;

    box-shadow:

        0 0 40px rgba(212,175,106,0.18),

        0 0 100px rgba(212,175,106,0.08),

        inset 0 0 30px rgba(255,255,255,0.12);

    animation: floatingJewellery 5s ease-in-out infinite;

    position: relative;

    z-index: 5;
}


@keyframes floatingJewellery {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }
}


/* =====================================================
   ORBITS
===================================================== */

.orbit {

    position: absolute;

    border: 1px solid rgba(212,175,106,0.55);

    border-radius: 50%;

    box-shadow:
        0 0 10px rgba(212,175,106,0.08);
}


.orbit-one {

    width: 430px;

    height: 170px;

    animation: orbitOne 8s linear infinite;
}


.orbit-two {

    width: 470px;

    height: 220px;

    animation: orbitTwo 11s linear infinite;
}


.orbit-three {

    width: 390px;

    height: 130px;

    border-color: rgba(240,220,168,0.4);

    animation: orbitThree 13s linear infinite;
}


@keyframes orbitOne {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes orbitTwo {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}


@keyframes orbitThree {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}


/* =====================================================
   SPARKLES
===================================================== */

.sparkle {

    position: absolute;

    color: var(--gold-light);

    font-size: 22px;

    text-shadow:
        0 0 12px rgba(212,175,106,0.8);

    animation: sparkleMove 3s ease-in-out infinite;

    z-index: 6;
}


.sparkle-one {

    top: 20%;

    left: 15%;
}


.sparkle-two {

    top: 70%;

    right: 10%;

    animation-delay: 1s;
}


.sparkle-three {

    bottom: 15%;

    left: 25%;

    animation-delay: 2s;
}


@keyframes sparkleMove {

    0%, 100% {

        opacity: 0.25;

        transform: scale(0.7) rotate(0deg);
    }

    50% {

        opacity: 1;

        transform: scale(1.35) rotate(90deg);
    }
}


/* =====================================================
   SECTION HEADING
===================================================== */

.section-heading {

    text-align: center;

    margin-bottom: 60px;
}


.section-heading p {

    font-size: 9px;

    letter-spacing: 4px;

    color: var(--gold);

    margin-bottom: 12px;
}


.section-heading h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 58px;

    font-weight: 400;

    color: var(--cream);
}


.section-heading span {

    font-size: 12px;

    color: var(--muted);
}


/* =====================================================
   CATEGORIES
===================================================== */

.categories {

    padding: 110px 8%;

    background: #0d0d0d;

    border-top: 1px solid rgba(212,175,106,0.08);

    border-bottom: 1px solid rgba(212,175,106,0.08);
}


.category-grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 15px;
}


.category-card {

    min-height: 220px;

    padding: 35px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: #111111;

    border: 1px solid rgba(212,175,106,0.16);

    position: relative;

    overflow: hidden;

    transition: 0.5s ease;
}


.category-card::before {

    content: "";

    position: absolute;

    width: 0;

    height: 0;

    border-radius: 50%;

    background: rgba(212,175,106,0.07);

    transition: 0.6s ease;
}


.category-card:hover::before {

    width: 350px;

    height: 350px;
}


.category-card > * {

    position: relative;

    z-index: 2;
}


.category-card:hover {

    transform: translateY(-10px);

    border-color: var(--gold);

    box-shadow:

        0 20px 50px rgba(0,0,0,0.5),

        0 0 25px rgba(212,175,106,0.08);
}


.category-icon {

    font-size: 31px;

    color: var(--gold);

    margin-bottom: 20px;

    transition: 0.5s ease;
}


.category-card:hover .category-icon {

    transform: scale(1.25) rotate(8deg);

    text-shadow:
        0 0 20px rgba(212,175,106,0.6);
}


.category-card h3 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 28px;

    font-weight: 500;

    color: var(--cream);
}


.category-card span {

    font-size: 8px;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--gold);

    margin-top: 12px;
}


/* =====================================================
   FEATURED
===================================================== */

.featured {

    padding: 110px 8%;

    background: var(--black);
}


.featured-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    text-align: left;
}


.view-all {

    font-size: 9px;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--gold);

    border-bottom: 1px solid var(--gold);

    padding-bottom: 5px;
}


/* PRODUCT GRID */

.product-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 22px;
}


.product-card {

    background: var(--black-card);

    border: 1px solid rgba(212,175,106,0.1);

    transition: 0.5s ease;
}


.product-card:hover {

    transform: translateY(-8px);

    border-color: rgba(212,175,106,0.45);

    box-shadow:
        0 25px 50px rgba(0,0,0,0.45);
}


/* PRODUCT IMAGE */

.product-image {

    height: 390px;

    background:

        radial-gradient(
            circle,
            #29231a,
            #121212 65%,
            #0b0b0b
        );

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;
}


.product-image::after {

    content: "";

    position: absolute;

    width: 200px;

    height: 200px;

    border-radius: 50%;

    border: 1px solid rgba(212,175,106,0.15);

    transition: 0.6s ease;
}


.product-card:hover .product-image::after {

    width: 300px;

    height: 300px;

    border-color: rgba(212,175,106,0.35);
}


.product-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.6s ease;
}


.product-card:hover .product-image img {

    transform: scale(1.06);
}


/* PLACEHOLDER */

.product-placeholder {

    width: 150px;

    height: 150px;

    border-radius: 50%;

    background: #171717;

    border: 1px solid rgba(212,175,106,0.25);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 52px;

    color: var(--gold);

    position: relative;

    z-index: 2;

    box-shadow:
        0 0 35px rgba(212,175,106,0.08);
}


/* HEART */

.heart {

    position: absolute;

    top: 17px;

    right: 17px;

    width: 38px;

    height: 38px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(8,8,8,0.75);

    border: 1px solid rgba(212,175,106,0.25);

    color: var(--gold);

    z-index: 10;

    transition: 0.35s ease;
}


.heart:hover {

    background: var(--gold);

    color: var(--black);

    transform: scale(1.12);

}


/* PRODUCT INFO */

.product-info {

    padding: 20px 17px 25px;
}


.product-category {

    font-size: 8px;

    letter-spacing: 2px;

    color: var(--gold);
}


.product-info h3 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 25px;

    font-weight: 500;

    margin: 7px 0;

    color: var(--cream);
}


.product-info p {

    font-size: 11px;

    color: var(--muted);
}


/* =====================================================
   BRAND SECTION
===================================================== */

.brand-section {

    min-height: 520px;

    padding: 90px 12%;

    background:

        radial-gradient(
            circle at 20% 50%,
            rgba(212,175,106,0.08),
            transparent 30%
        ),

        #0d0d0d;

    display: flex;

    align-items: center;

    gap: 100px;

    border-top: 1px solid rgba(212,175,106,0.12);

    border-bottom: 1px solid rgba(212,175,106,0.12);
}


.brand-orbit {

    width: 280px;

    height: 280px;

    min-width: 280px;

    border: 1px solid var(--gold);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow:
        0 0 40px rgba(212,175,106,0.08);

    animation: slowRotate 15s linear infinite;
}


.brand-orbit span {

    font-size: 55px;

    color: var(--gold);

    text-shadow:
        0 0 20px rgba(212,175,106,0.7);
}


@keyframes slowRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


.brand-section h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 60px;

    font-weight: 400;

    line-height: 1;

    max-width: 650px;

    color: var(--cream);
}


.brand-section h2 span {

    display: block;

    color: var(--gold);

    font-style: italic;
}


.brand-section p:not(.eyebrow) {

    max-width: 500px;

    font-size: 13px;

    line-height: 1.8;

    margin: 25px 0;

    color: var(--muted);
}


/* OUTLINE BUTTON */

.outline-btn {

    display: inline-block;

    padding: 14px 25px;

    border: 1px solid var(--gold);

    color: var(--cream);

    font-size: 9px;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition: 0.4s ease;
}


.outline-btn:hover {

    background: var(--gold);

    color: var(--black);

    box-shadow:
        0 0 25px rgba(212,175,106,0.2);
}


/* =====================================================
   FOOTER
===================================================== */

footer {

    padding: 60px 8%;

    background: #050505;

    color: var(--cream);

    text-align: center;

    border-top: 1px solid rgba(212,175,106,0.18);
}


.footer-logo {

    font-family: 'Cormorant Garamond', serif;

    font-size: 32px;

    letter-spacing: 5px;
}


.footer-logo small {

    display: block;

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    letter-spacing: 5px;

    color: var(--gold);

    margin-top: 6px;
}


.footer-links {

    margin: 28px 0;

    display: flex;

    justify-content: center;

    gap: 30px;
}


.footer-links a {

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    color: var(--muted);

    transition: 0.3s ease;
}


.footer-links a:hover {

    color: var(--gold);
}


footer p {

    font-size: 9px;

    color: #777;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 1000px) {

    .navbar nav {
        gap: 15px;
    }


    .hero {

        flex-direction: column;

        text-align: center;

        padding-top: 90px;
    }


    .hero-content {

        width: 100%;
    }


    .hero-text {

        margin-left: auto;

        margin-right: auto;
    }


    .hero-art {

        width: 100%;

        height: 450px;
    }


    .category-grid {

        grid-template-columns: repeat(2, 1fr);
    }


    .product-grid {

        grid-template-columns: repeat(2, 1fr);
    }


    .brand-section {

        flex-direction: column;

        text-align: center;
    }

}


@media (max-width: 650px) {

    .navbar {

        padding: 0 5%;
    }


    .navbar nav {

        display: none;
    }


    .logo span {

        font-size: 24px;
    }


    .hero {

        padding: 60px 5%;
    }


    .hero h1 {

        font-size: 65px;
    }


    .hero-art {

        height: 350px;
    }


    .jewellery-placeholder {

        width: 170px;

        height: 170px;

        font-size: 65px;
    }


    .orbit-one {

        width: 310px;

        height: 130px;
    }


    .orbit-two {

        width: 340px;

        height: 160px;
    }


    .orbit-three {

        width: 280px;

        height: 100px;
    }


    .section-heading h2 {

        font-size: 45px;
    }


    .category-grid {

        grid-template-columns: 1fr;
    }


    .product-grid {

        grid-template-columns: 1fr 1fr;

        gap: 12px;
    }


    .product-image {

        height: 240px;
    }


    .product-info h3 {

        font-size: 20px;
    }


    .featured-heading {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }


    .brand-section {

        padding: 70px 7%;
    }


    .brand-orbit {

        width: 200px;

        height: 200px;

        min-width: 200px;
    }


    .brand-section h2 {

        font-size: 45px;
    }


    .footer-links {

        flex-wrap: wrap;

        gap: 18px;
    }

}


/* =====================================================
   COLLECTIONS PAGE
===================================================== */

.collection-hero {

    min-height: 620px;

    padding: 80px 9%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:

        radial-gradient(
            circle at 75% 50%,
            rgba(212,175,106,0.10),
            transparent 35%
        ),

        #080808;

    overflow: hidden;

}


.collection-hero-content {

    width: 50%;

}


.collection-eyebrow {

    font-size: 9px;

    letter-spacing: 4px;

    color: var(--gold);

    margin-bottom: 18px;

}


.collection-hero h1 {

    font-family: 'Cormorant Garamond', serif;

    font-size: clamp(65px, 8vw, 105px);

    font-weight: 400;

    line-height: .85;

}


.collection-hero h1 span {

    display: block;

    color: var(--gold);

    font-style: italic;

}


.collection-hero-content > p:not(.collection-eyebrow) {

    max-width: 480px;

    margin: 30px 0;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.9;

}


/* COLLECTION ORBIT */

.collection-orbit {

    width: 470px;

    height: 470px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}


.collection-ring {

    position: absolute;

    border: 1px solid rgba(212,175,106,.45);

    border-radius: 50%;

}


.ring-one {

    width: 430px;

    height: 170px;

    transform: rotate(30deg);

    animation: collectionRotateOne 9s linear infinite;

}


.ring-two {

    width: 350px;

    height: 350px;

    animation: collectionRotateTwo 15s linear infinite;

}


.ring-three {

    width: 470px;

    height: 220px;

    transform: rotate(-40deg);

    animation: collectionRotateThree 12s linear infinite;

}


.collection-symbol {

    width: 150px;

    height: 150px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--gold-light);

    font-size: 65px;

    background: radial-gradient(
        circle,
        rgba(212,175,106,.18),
        #111 70%
    );

    box-shadow:
        0 0 60px rgba(212,175,106,.12);

    animation: symbolFloat 4s ease-in-out infinite;

}


@keyframes collectionRotateOne {

    from {
        transform: rotate(30deg);
    }

    to {
        transform: rotate(390deg);
    }

}


@keyframes collectionRotateTwo {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes collectionRotateThree {

    from {
        transform: rotate(-40deg);
    }

    to {
        transform: rotate(-400deg);
    }

}


@keyframes symbolFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

}


/* =====================================================
   COLLECTION GRID
===================================================== */

.collections-section {

    padding: 110px 8%;

    background: #0d0d0d;

}


.collections-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

}


.collection-card {

    min-height: 390px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: flex-end;

    background:

        radial-gradient(
            circle at center,
            #332b20,
            #111 65%,
            #080808
        );

    border: 1px solid rgba(212,175,106,.15);

    transition: .6s ease;

}


/* different subtle backgrounds */

.collection-rings {

    background:
        radial-gradient(circle at 70% 30%, #3b3022, #111 60%);
}


.collection-necklaces {

    background:
        radial-gradient(circle at 30% 40%, #30281e, #0c0c0c 65%);
}


.collection-bracelets {

    background:
        radial-gradient(circle at 60% 60%, #352b1f, #101010 65%);
}


.collection-earrings {

    background:
        radial-gradient(circle at 40% 30%, #3b3021, #0c0c0c 65%);
}


.collection-sets {

    background:
        radial-gradient(circle at 70% 60%, #33271c, #0b0b0b 65%);
}


.collection-new {

    background:
        radial-gradient(circle at 50% 40%, #403323, #0a0a0a 65%);
}


.collection-card::before {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    border: 1px solid rgba(212,175,106,.15);

    border-radius: 50%;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    transition: .7s ease;

}


.collection-card:hover::before {

    width: 450px;

    height: 450px;

    border-color: rgba(212,175,106,.4);

}


.collection-card:hover {

    transform: translateY(-8px);

    border-color: rgba(212,175,106,.5);

    box-shadow:

        0 25px 60px rgba(0,0,0,.5),

        0 0 30px rgba(212,175,106,.08);

}


.collection-overlay {

    width: 100%;

    padding: 35px;

    position: relative;

    z-index: 3;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.9)
        );

}


.collection-overlay span {

    font-size: 9px;

    letter-spacing: 3px;

    color: var(--gold);

}


.collection-overlay h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 48px;

    font-weight: 400;

    margin: 8px 0;

}


.collection-overlay p {

    color: var(--muted);

    font-size: 11px;

    margin-bottom: 20px;

}


.collection-overlay strong {

    font-size: 8px;

    letter-spacing: 2px;

    color: var(--gold-light);

}


/* =====================================================
   SIGNATURE
===================================================== */

.signature-collection {

    min-height: 500px;

    padding: 90px 12%;

    display: flex;

    align-items: center;

    gap: 100px;

    background: #080808;

    border-top: 1px solid rgba(212,175,106,.12);

}


.signature-circle {

    width: 300px;

    height: 300px;

    min-width: 300px;

    border: 1px solid var(--gold);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    animation: signatureRotate 15s linear infinite;

}


.signature-circle::before {

    content: "";

    position: absolute;

    inset: 20px;

    border: 1px dashed rgba(212,175,106,.45);

    border-radius: 50%;

}


.signature-inner {

    font-family: 'Cormorant Garamond', serif;

    font-size: 70px;

    color: var(--gold);

}


@keyframes signatureRotate {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }

}


.signature-content {

    max-width: 600px;

}


.signature-content h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 65px;

    font-weight: 400;

    line-height: .9;

}


.signature-content h2 span {

    display: block;

    color: var(--gold);

    font-style: italic;

}


.signature-content p:not(.collection-eyebrow) {

    color: var(--muted);

    max-width: 500px;

    font-size: 13px;

    line-height: 1.9;

    margin: 25px 0;

}


/* =====================================================
   COLLECTION MOBILE
===================================================== */

@media (max-width: 800px) {

    .collection-hero {

        flex-direction: column;

        text-align: center;

        gap: 50px;

    }


    .collection-hero-content {

        width: 100%;

    }


    .collection-hero-content > p:not(.collection-eyebrow) {

        margin-left: auto;

        margin-right: auto;

    }


    .collection-orbit {

        width: 330px;

        height: 330px;

    }


    .ring-one {

        width: 310px;

        height: 130px;

    }


    .ring-two {

        width: 260px;

        height: 260px;

    }


    .ring-three {

        width: 340px;

        height: 160px;

    }


    .collection-symbol {

        width: 110px;

        height: 110px;

        font-size: 45px;

    }


    .collections-grid {

        grid-template-columns: 1fr;

    }


    .signature-collection {

        flex-direction: column;

        text-align: center;

    }


    .signature-circle {

        width: 230px;

        height: 230px;

        min-width: 230px;

    }


    .signature-content h2 {

        font-size: 50px;

    }

}

/* =====================================================
   SHOP PAGE
===================================================== */

.shop-page {
    padding: 100px 8%;
    background: var(--black);
}

.shop-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px;
    margin-bottom: 55px;
}

.shop-filter a {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--muted);
    padding-bottom: 7px;
    border-bottom: 1px solid transparent;
    transition: .3s ease;
}

.shop-filter a:hover {
    color: var(--gold);
    border-color: var(--gold);
}

.shop-cart-btn {
    margin-top: 18px;
    padding: 11px 15px;
}

.empty-message {
    text-align: center;
    color: var(--muted);
    padding: 70px;
}


/* =====================================================
   PRODUCT DETAIL
===================================================== */

.product-detail {
    min-height: 700px;
    padding: 90px 10%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
    background: var(--black);
}

.product-detail-image {
    height: 600px;
    background: radial-gradient(circle, #332a1d, #111 65%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--line);
}

.product-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-detail-info h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 70px;
    font-weight: 400;
    line-height: .9;
    margin: 15px 0;
}

.product-price {
    color: var(--gold-light);
    font-size: 22px;
    margin: 25px 0;
}

.product-description {
    color: var(--muted);
    line-height: 1.9;
    font-size: 13px;
    max-width: 500px;
    margin-bottom: 30px;
}

.quantity-input {
    display: block;
    width: 100px;
    padding: 14px;
    margin: 10px 0 25px;
    background: #111;
    border: 1px solid var(--line);
    color: var(--cream);
}


/* =====================================================
   CART
===================================================== */

.cart-page {
    padding: 100px 8%;
    min-height: 650px;
}

.cart-layout {
    display: grid;
    grid-template-columns: 1.7fr .8fr;
    gap: 60px;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}

.cart-item-image {
    width: 110px;
    height: 110px;
    background: #151515;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 30px;
}

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

.cart-item-info {
    flex: 1;
}

.cart-item-info h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 27px;
}

.cart-item-info p {
    color: var(--gold);
    margin: 7px 0;
}

.cart-item-info span {
    color: var(--muted);
    font-size: 10px;
}

.remove-item,
.clear-cart {
    font-size: 8px;
    letter-spacing: 2px;
    color: var(--gold);
}

.clear-cart {
    display: inline-block;
    margin-top: 25px;
}

.cart-summary {
    padding: 35px;
    height: fit-content;
    background: #111;
    border: 1px solid var(--line);
}

.cart-summary > p {
    color: var(--gold);
    font-size: 9px;
    letter-spacing: 3px;
}

.cart-summary h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    margin: 15px 0;
}

.cart-summary > span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    margin-bottom: 30px;
}

.empty-cart {
    text-align: center;
    padding: 80px 20px;
}

.empty-cart > div {
    font-size: 60px;
    color: var(--gold);
}

.empty-cart h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 45px;
    margin: 15px;
}

.empty-cart p {
    color: var(--muted);
    margin-bottom: 30px;
}


/* =====================================================
   AUTH / LOGIN
===================================================== */

.auth-page {
    min-height: 100vh;
    background: #070707;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.auth-box {
    width: min(450px, 90%);
    padding: 55px;
    position: relative;
    z-index: 5;
    background: rgba(17,17,17,.92);
    border: 1px solid var(--line);
    box-shadow: 0 30px 100px rgba(0,0,0,.7);
}

.auth-box h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 58px;
    font-weight: 400;
    margin-bottom: 10px;
}

.auth-box > p:not(.collection-eyebrow):not(.auth-switch) {
    color: var(--muted);
    font-size: 11px;
    margin-bottom: 30px;
}

.auth-box form input,
.contact-form-box input,
.contact-form-box textarea,
.checkout-form input,
.checkout-form textarea {
    width: 100%;
    padding: 16px;
    margin-bottom: 18px;
    background: #0b0b0b;
    color: var(--cream);
    border: 1px solid rgba(212,175,106,.2);
    outline: none;
    font-family: inherit;
}

.auth-box form input:focus,
.contact-form-box input:focus,
.contact-form-box textarea:focus,
.checkout-form input:focus,
.checkout-form textarea:focus {
    border-color: var(--gold);
}

.auth-box form .main-btn {
    cursor: pointer;
    width: 100%;
    justify-content: center;
}

.auth-switch {
    text-align: center;
    color: var(--muted);
    font-size: 10px;
    margin-top: 25px;
}

.auth-switch a {
    color: var(--gold);
}

.back-home {
    display: block;
    text-align: center;
    margin-top: 25px;
    color: var(--gold);
    font-size: 9px;
}

.form-error {
    padding: 12px;
    margin-bottom: 20px;
    background: rgba(150,50,50,.15);
    border: 1px solid rgba(180,80,80,.4);
    color: #e6b8b8;
    font-size: 10px;
}

.auth-orbits div {
    position: absolute;
    width: 700px;
    height: 220px;
    border: 1px solid rgba(212,175,106,.18);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.auth-orbits div:nth-child(1) {
    animation: authOrbit 8s linear infinite;
}

.auth-orbits div:nth-child(2) {
    width: 600px;
    transform: translate(-50%,-50%) rotate(60deg);
    animation: authOrbit 11s linear infinite reverse;
}

.auth-orbits div:nth-child(3) {
    width: 500px;
    transform: translate(-50%,-50%) rotate(-45deg);
    animation: authOrbit 14s linear infinite;
}

.auth-orbits div:nth-child(4) {
    width: 400px;
    transform: translate(-50%,-50%) rotate(90deg);
    animation: authOrbit 17s linear infinite reverse;
}

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


/* =====================================================
   CHECKOUT
===================================================== */

.checkout-page {
    padding: 90px 8%;
    background: var(--black);
}

.checkout-layout {
    display: grid;
    grid-template-columns: 1.3fr .8fr;
    gap: 60px;
}

.checkout-form,
.checkout-summary {
    background: #111;
    padding: 40px;
    border: 1px solid var(--line);
}

.checkout-form h2,
.checkout-summary h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 40px;
    font-weight: 400;
    margin-bottom: 30px;
}

.checkout-form label {
    display: block;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: 1px;
    margin-bottom: 7px;
}

.payment-box {
    margin: 15px 0 30px;
    padding: 22px;
    border: 1px solid var(--line);
}

.payment-box > span {
    color: var(--gold);
    font-size: 8px;
    letter-spacing: 2px;
}

.cod-option {
    margin-top: 18px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.cod-icon {
    width: 45px;
    height: 45px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
}

.cod-option strong {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
}

.cod-option p {
    color: var(--muted);
    font-size: 9px;
    margin-top: 3px;
}

.checkout-submit {
    cursor: pointer;
    width: 100%;
    justify-content: center;
}

.checkout-products {
    margin-bottom: 25px;
}

.checkout-product {
    display: grid;
    grid-template-columns: 65px 1fr auto;
    gap: 15px;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(212,175,106,.12);
}

.checkout-product-image {
    width: 65px;
    height: 65px;
    background: #080808;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
}

.checkout-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-product h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
}

.checkout-product span {
    color: var(--muted);
    font-size: 9px;
}

.checkout-product strong {
    color: var(--gold-light);
    font-size: 11px;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    padding-top: 25px;
    font-size: 13px;
}

.summary-total strong {
    color: var(--gold-light);
}

.secure-note {
    color: var(--muted);
    font-size: 9px;
    margin-top: 25px;
}


/* =====================================================
   ORDER SUCCESS
===================================================== */

.success-page {
    min-height: 750px;
    padding: 100px 8%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        radial-gradient(circle, rgba(212,175,106,.1), transparent 35%),
        var(--black);
}

.success-page h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 80px;
    font-weight: 400;
}

.success-text {
    max-width: 550px;
    color: var(--muted);
    line-height: 1.9;
    margin: 20px 0;
}

.success-text strong {
    color: var(--gold-light);
}

.success-orbit {
    width: 160px;
    height: 160px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.success-orbit span {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-light);
    font-size: 30px;
}

.success-orbit div {
    position: absolute;
    width: 150px;
    height: 65px;
    border: 1px solid rgba(212,175,106,.5);
    border-radius: 50%;
    animation: successSpin 6s linear infinite;
}

.success-orbit div:nth-child(2) {
    transform: rotate(60deg);
    animation-duration: 8s;
}

.success-orbit div:nth-child(3) {
    transform: rotate(-60deg);
    animation-duration: 10s;
}

@keyframes successSpin {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

.order-number {
    color: var(--gold);
    letter-spacing: 3px;
    font-size: 10px;
    margin: 20px;
}

.success-details {
    display: flex;
    gap: 60px;
    padding: 25px 45px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin: 20px 0 35px;
}

.success-details div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.success-details span {
    color: var(--muted);
    font-size: 8px;
    letter-spacing: 2px;
}

.success-details strong {
    color: var(--gold-light);
    font-size: 11px;
}

.success-actions {
    display: flex;
    gap: 20px;
    align-items: center;
}


/* =====================================================
   ABOUT
===================================================== */

.about-hero {
    min-height: 650px;
    padding: 100px 12%;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    align-items: center;
    gap: 80px;
    background:
        radial-gradient(circle at 80% 50%, rgba(212,175,106,.1), transparent 35%),
        var(--black);
}

.about-hero h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(65px, 8vw, 110px);
    font-weight: 400;
    line-height: .85;
}

.about-hero h1 span {
    color: var(--gold);
    font-style: italic;
}

.about-hero p:not(.collection-eyebrow) {
    max-width: 520px;
    color: var(--muted);
    font-size: 13px;
    line-height: 2;
    margin-top: 35px;
}

.about-monogram {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-circle {
    width: 330px;
    height: 330px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 90px;
    color: var(--gold);
    box-shadow: 0 0 70px rgba(212,175,106,.08);
    animation: slowRotate 15s linear infinite;
}

.about-story {
    padding: 110px 8%;
    background: #0d0d0d;
}

.about-columns {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    max-width: 1100px;
    margin: auto;
}

.about-columns > div {
    padding: 40px;
    border: 1px solid var(--line);
    background: #111;
}

.about-columns span {
    color: var(--gold);
    font-size: 9px;
    letter-spacing: 3px;
}

.about-columns h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 35px;
    font-weight: 400;
    margin: 20px 0 10px;
}

.about-columns p {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.9;
}

.about-quote {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #080808;
}

.about-quote p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 65px;
    font-style: italic;
    color: var(--gold-light);
}

.about-quote span {
    display: block;
    margin-top: 20px;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: 3px;
}


/* =====================================================
   CONTACT
===================================================== */

.contact-page {
    min-height: 700px;
    padding: 100px 10%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}

.contact-intro h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 75px;
    font-weight: 400;
    line-height: .9;
}

.contact-intro h1 span {
    display: block;
    color: var(--gold);
    font-style: italic;
}

.contact-intro > p:not(.collection-eyebrow) {
    color: var(--muted);
    line-height: 1.9;
    max-width: 500px;
    margin: 30px 0;
}

.contact-details {
    border-top: 1px solid var(--line);
    margin-top: 40px;
}

.contact-details div {
    padding: 17px 0;
    border-bottom: 1px solid rgba(212,175,106,.12);
}

.contact-details span {
    display: block;
    color: var(--gold);
    font-size: 8px;
    letter-spacing: 2px;
    margin-bottom: 7px;
}

.contact-details strong {
    font-size: 11px;
    font-weight: 400;
    color: var(--cream);
}

.contact-form-box {
    padding: 45px;
    background: #111;
    border: 1px solid var(--line);
}

.contact-form-box label {
    display: block;
    color: var(--muted);
    font-size: 9px;
    margin-bottom: 7px;
}

.contact-form-box textarea {
    resize: vertical;
}

.contact-form-box .main-btn {
    cursor: pointer;
}

.success-message {
    padding: 15px;
    margin-bottom: 20px;
    color: var(--gold-light);
    border: 1px solid var(--line);
    background: rgba(212,175,106,.06);
    font-size: 10px;
}


/* =====================================================
   RESPONSIVE ADDITIONS
===================================================== */

@media (max-width: 800px) {

    .product-detail,
    .checkout-layout,
    .contact-page,
    .about-hero {
        grid-template-columns: 1fr;
    }

    .product-detail {
        padding: 60px 6%;
        gap: 40px;
    }

    .product-detail-image {
        height: 450px;
    }

    .product-detail-info h1 {
        font-size: 55px;
    }

    .cart-layout {
        grid-template-columns: 1fr;
    }

    .checkout-layout {
        gap: 25px;
    }

    .about-hero {
        text-align: center;
    }

    .about-hero p:not(.collection-eyebrow) {
        margin-left: auto;
        margin-right: auto;
    }

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

    .contact-intro h1 {
        font-size: 58px;
    }

    .success-page h1 {
        font-size: 60px;
    }

    .success-details {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

}

@media (max-width: 550px) {

    .checkout-form,
    .checkout-summary,
    .contact-form-box {
        padding: 25px;
    }

    .cart-item {
        flex-wrap: wrap;
    }

    .success-actions {
        flex-direction: column;
    }

    .about-circle {
        width: 240px;
        height: 240px;
        font-size: 70px;
    }

}


/* =========================================================
   MODREN FASHION
   ORDER CONFIRMED — JEWELLERY BOX EXPERIENCE
========================================================= */


/* =========================================================
   SUCCESS PAGE
========================================================= */

.success-page {

    min-height: calc(100vh - 84px);

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 100px 6% 120px;

    background:

        radial-gradient(
            circle at 50% 35%,
            rgba(212,175,106,0.16),
            transparent 25%
        ),

        radial-gradient(
            circle at 10% 80%,
            rgba(212,175,106,0.08),
            transparent 30%
        ),

        radial-gradient(
            circle at 90% 15%,
            rgba(240,220,168,0.06),
            transparent 28%
        ),

        #080808;

}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.success-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;

}


.success-glow-one {

    width: 420px;

    height: 420px;

    background: rgba(212,175,106,0.08);

    top: 15%;

    left: 50%;

    transform: translateX(-50%);

}


.success-glow-two {

    width: 300px;

    height: 300px;

    background: rgba(155,119,57,0.08);

    bottom: -100px;

    right: 5%;

}


/* =========================================================
   LARGE BACKGROUND CIRCLES
========================================================= */

.success-circle {

    position: absolute;

    border: 1px solid rgba(212,175,106,0.08);

    border-radius: 50%;

    pointer-events: none;

}


.circle-one {

    width: 650px;

    height: 650px;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    animation: backgroundRotate 35s linear infinite;

}


.circle-two {

    width: 900px;

    height: 900px;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    border-style: dashed;

    opacity: 0.35;

    animation: backgroundRotateReverse 50s linear infinite;

}


@keyframes backgroundRotate {

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

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

}


@keyframes backgroundRotateReverse {

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

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

}


/* =========================================================
   PARTICLES
========================================================= */

.success-particle {

    position: absolute;

    color: var(--gold-light);

    opacity: 0.4;

    font-size: 18px;

    pointer-events: none;

    animation: particleFloat 5s ease-in-out infinite;

}


.particle-1 {

    left: 15%;

    top: 22%;

}


.particle-2 {

    left: 25%;

    top: 70%;

    animation-delay: 1s;

}


.particle-3 {

    right: 17%;

    top: 28%;

    animation-delay: 2s;

}


.particle-4 {

    right: 12%;

    bottom: 25%;

    animation-delay: 1.5s;

}


.particle-5 {

    left: 8%;

    bottom: 35%;

    animation-delay: 3s;

}


.particle-6 {

    right: 28%;

    bottom: 15%;

    animation-delay: 2.5s;

}


@keyframes particleFloat {

    0%,
    100% {

        transform:
            translateY(0)
            scale(0.8);

        opacity: 0.2;

    }

    50% {

        transform:
            translateY(-20px)
            scale(1.3);

        opacity: 0.9;

    }

}


/* =========================================================
   CONTENT
========================================================= */

.success-content {

    position: relative;

    z-index: 10;

    width: 100%;

    max-width: 1100px;

    text-align: center;

}


/* =========================================================
   JEWELLERY STAGE
========================================================= */

.jewellery-stage {

    width: 520px;

    height: 400px;

    margin: 0 auto 20px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    perspective: 1200px;

}


/* =========================================================
   ORBIT RINGS
========================================================= */

.box-orbit {

    position: absolute;

    border: 1px solid rgba(212,175,106,0.32);

    border-radius: 50%;

    pointer-events: none;

}


.orbit-a {

    width: 430px;

    height: 145px;

    transform: rotate(-18deg);

    animation: orbitSpinA 10s linear infinite;

}


.orbit-b {

    width: 480px;

    height: 210px;

    transform: rotate(20deg);

    border-color: rgba(240,220,168,0.18);

    animation: orbitSpinB 15s linear infinite;

}


@keyframes orbitSpinA {

    from {
        transform: rotate(-18deg);
    }

    to {
        transform: rotate(342deg);
    }

}


@keyframes orbitSpinB {

    from {
        transform: rotate(20deg);
    }

    to {
        transform: rotate(-340deg);
    }

}


/* =========================================================
   JEWELLERY PRODUCTS
========================================================= */

.jewellery-products {

    position: absolute;

    inset: 0;

    z-index: 15;

}


.floating-product {

    position: absolute;

    width: 95px;

    height: 95px;

    padding: 9px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(240,220,168,0.20),
            rgba(8,8,8,0.9) 70%
        );

    border: 1px solid rgba(212,175,106,0.45);

    box-shadow:

        0 0 20px rgba(212,175,106,0.15),

        inset 0 0 20px rgba(212,175,106,0.08);

    opacity: 0;

    transform: scale(0.2) translateY(100px);

    animation:
        productAppear 1.4s ease forwards,
        productFloat 4s ease-in-out infinite;

}


.floating-product-inner {

    width: 100%;

    height: 100%;

    border-radius: 50%;

    overflow: hidden;

    background: #151515;

}


.floating-product img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.5s ease;

}


.floating-product:hover img {

    transform: scale(1.15);

}


/* =========================================================
   PRODUCT POSITIONS
========================================================= */

.product-1 {

    left: 25px;

    top: 125px;

    animation-delay: 1.5s, 3s;

}


.product-2 {

    right: 25px;

    top: 105px;

    animation-delay: 1.9s, 3.5s;

}


.product-3 {

    left: 90px;

    bottom: 20px;

    animation-delay: 2.3s, 4s;

}


.product-4 {

    right: 80px;

    bottom: 15px;

    animation-delay: 2.7s, 4.5s;

}


.product-5 {

    left: 50%;

    top: 15px;

    transform: translateX(-50%) scale(0.2) translateY(100px);

    animation-delay: 3.1s, 5s;

}


@keyframes productAppear {

    0% {

        opacity: 0;

        transform: scale(0.2) translateY(100px);

    }

    70% {

        opacity: 1;

        transform: scale(1.08) translateY(-10px);

    }

    100% {

        opacity: 1;

        transform: scale(1) translateY(0);

    }

}


@keyframes productFloat {

    0%,
    100% {

        margin-top: 0;

    }

    50% {

        margin-top: -14px;

    }

}


/* =========================================================
   JEWELLERY BOX
========================================================= */

.jewellery-box {

    width: 230px;

    height: 165px;

    position: relative;

    z-index: 20;

    transform-style: preserve-3d;

    margin-top: 100px;

}


/* =========================================================
   BOX BODY
========================================================= */

.box-body {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 230px;

    height: 125px;

    border-radius: 5px 5px 12px 12px;

    background:

        linear-gradient(
            135deg,
            #c1123f,
            #8b0d2c 50%,
            #4a0618
        );

    border: 1px solid rgba(255,190,190,0.5);

    box-shadow:

        0 25px 45px rgba(0,0,0,0.55),

        0 0 40px rgba(190,15,55,0.28),

        inset 0 0 35px rgba(255,255,255,0.06);

}


/* =========================================================
   BOX GOLD LINE
========================================================= */

.box-body::before {

    content: "";

    position: absolute;

    left: 18px;

    right: 18px;

    top: 15px;

    bottom: 15px;

    border: 1px solid rgba(212,175,106,0.25);

    border-radius: 3px;

}


/* =========================================================
   BOX LOGO
========================================================= */

.box-front-logo {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    z-index: 3;

}


.box-front-logo strong {

    font-family: 'Cormorant Garamond', serif;

    font-size: 48px;

    font-weight: 500;

    color: var(--gold-light);

    letter-spacing: 3px;

}


.box-front-logo small {

    font-size: 7px;

    letter-spacing: 3px;

    color: var(--gold);

    margin-top: -4px;

}


/* =========================================================
   BOX INSIDE
========================================================= */

.box-inside {

    position: absolute;

    left: 5px;

    top: -25px;

    width: 220px;

    height: 50px;

    border-radius: 50%;

    background: #080706;

    border: 1px solid rgba(212,175,106,0.35);

    box-shadow:

        0 0 45px rgba(212,175,106,0.3),

        inset 0 0 25px rgba(212,175,106,0.12);

    z-index: 1;

}


.box-glow {

    position: absolute;

    width: 80px;

    height: 25px;

    left: 50%;

    top: 8px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: rgba(240,220,168,0.55);

    filter: blur(15px);

    animation: boxGlow 2s ease-in-out infinite alternate;

}


@keyframes boxGlow {

    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }

}


.box-symbol {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    color: var(--gold-light);

    font-size: 22px;

}


/* =========================================================
   BOX LID
========================================================= */

.box-lid {

    position: absolute;

    width: 230px;

    height: 58px;

    left: 0;

    top: 7px;

    transform-origin: bottom center;

    transform-style: preserve-3d;

    z-index: 30;

    animation: openJewelleryBox 2.8s cubic-bezier(.68,-0.1,.25,1.2) forwards;

}


.lid-inner {

    width: 230px;

    height: 58px;

    border-radius: 7px 7px 3px 3px;

    background:

        linear-gradient(
            135deg,
            #d01848,
            #a50d35,
            #65071f
        );

    border: 1px solid rgba(255,195,195,0.55);

    box-shadow:

        0 5px 20px rgba(0,0,0,0.55),

        inset 0 0 18px rgba(190,20,60,0.2);

    display: flex;

    align-items: center;

    justify-content: center;

}


.lid-inner span {

    font-family: 'Cormorant Garamond', serif;

    color: var(--gold-light);

    font-size: 32px;

    letter-spacing: 3px;

}


@keyframes openJewelleryBox {

    0% {

        transform:
            rotateX(0deg)
            translateY(0);

    }

    25% {

        transform:
            rotateX(-10deg)
            translateY(-3px);

    }

    100% {

        transform:
            rotateX(-72deg)
            translateY(-12px);

    }

}


/* =========================================================
   BOX SPARKLES
========================================================= */

.box-sparkle {

    position: absolute;

    z-index: 35;

    color: var(--gold-light);

    text-shadow:
        0 0 10px rgba(240,220,168,0.8),
        0 0 25px rgba(212,175,106,0.5);

    animation: boxSparkle 2.5s ease-in-out infinite;

}


.sparkle-a {

    top: 110px;

    left: 185px;

}


.sparkle-b {

    top: 145px;

    right: 165px;

    animation-delay: 0.8s;

}


.sparkle-c {

    top: 75px;

    right: 195px;

    animation-delay: 1.5s;

}


@keyframes boxSparkle {

    0%,
    100% {

        opacity: 0.15;

        transform: scale(0.5) rotate(0deg);

    }

    50% {

        opacity: 1;

        transform: scale(1.4) rotate(90deg);

    }

}


/* =========================================================
   THANK YOU MESSAGE
========================================================= */

.success-message {

    position: relative;

    z-index: 50;

    max-width: 850px;

    margin: 0 auto;

}


.success-eyebrow {

    font-size: 13px;

    letter-spacing: 5px;

    color: var(--gold);

    margin-bottom: 18px;

    text-transform: uppercase;

}


.success-message h1 {

    font-family: 'Cormorant Garamond', serif;

    font-size: clamp(70px, 9vw, 120px);

    font-weight: 400;

    line-height: 0.9;

    letter-spacing: -2px;

    color: var(--cream);

    text-shadow:
        0 0 35px rgba(240,220,168,0.08);

}


.success-description {

    max-width: 620px;

    margin: 28px auto 0;

    font-size: 14px;

    line-height: 2;

    color: var(--muted);

}


.success-description strong {

    color: var(--gold-light);

    font-weight: 500;

}


/* =========================================================
   DETAILS
========================================================= */

.success-details {

    max-width: 720px;

    margin: 45px auto 0;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid rgba(212,175,106,0.2);

    border-bottom: 1px solid rgba(212,175,106,0.2);

}


.success-detail-card {

    padding: 22px 15px;

    border-right: 1px solid rgba(212,175,106,0.15);

}


.success-detail-card:last-child {

    border-right: none;

}


.success-detail-card span {

    display: block;

    font-size: 8px;

    letter-spacing: 3px;

    color: var(--gold);

    margin-bottom: 8px;

}


.success-detail-card strong {

    font-size: 12px;

    font-weight: 400;

    color: var(--cream);

}


/* =========================================================
   BUTTONS
========================================================= */

.success-actions {

    margin-top: 38px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

}


/* =========================================================
   FOOTER
========================================================= */

.success-page + footer {

    position: relative;

    z-index: 20;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {


    .success-page {

        padding:
            70px 5%
            90px;

    }


    .jewellery-stage {

        width: 100%;

        height: 330px;

        transform: scale(0.78);

        margin-top: -15px;

        margin-bottom: -15px;

    }


    .success-eyebrow {

        font-size: 9px;

        letter-spacing: 3px;

    }


    .success-message h1 {

        font-size: 65px;

    }


    .success-description {

        font-size: 12px;

        padding: 0 10px;

    }


    .success-details {

        grid-template-columns: 1fr;

    }


    .success-detail-card {

        border-right: none;

        border-bottom:
            1px solid rgba(212,175,106,0.12);

    }


    .success-detail-card:last-child {

        border-bottom: none;

    }


    .success-actions {

        flex-direction: column;

    }


    .success-actions a {

        width: 230px;

        justify-content: center;

    }

}




/* =====================================================
   MODREN FASHION
   LUXURY ORDER SUCCESS PAGE
   RED + DARK PINK JEWELLERY BOX
===================================================== */

.success-body {
    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(105, 12, 42, 0.22),
            transparent 35%
        ),
        radial-gradient(
            circle at 15% 70%,
            rgba(85, 8, 35, 0.15),
            transparent 30%
        ),
        #070707;

    min-height: 100vh;
    overflow-x: hidden;
}


/* =====================================================
   BACKGROUND GLOW
===================================================== */

.success-bg-glow {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
    z-index: 0;
}

.glow-one {
    width: 420px;
    height: 420px;
    background: rgba(112, 18, 53, 0.14);
    top: 20%;
    left: -180px;
}

.glow-two {
    width: 380px;
    height: 380px;
    background: rgba(150, 30, 65, 0.10);
    right: -150px;
    bottom: 10%;
}


/* =====================================================
   MOVING PINK LINES
===================================================== */

.pink-lines {
    position: fixed;
    width: 700px;
    height: 700px;
    border: 1px solid rgba(151, 35, 75, 0.20);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.line-one {
    left: -400px;
    top: 20%;
    animation: pinkOrbitOne 18s linear infinite;
}

.line-two {
    right: -430px;
    top: 10%;
    animation: pinkOrbitTwo 22s linear infinite;
}

.line-three {
    width: 500px;
    height: 500px;
    left: 45%;
    top: 40%;
    border-color: rgba(180, 42, 80, 0.10);
    animation: pinkOrbitThree 25s linear infinite;
}

@keyframes pinkOrbitOne {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes pinkOrbitTwo {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}

@keyframes pinkOrbitThree {

    from {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.08);
    }

    to {
        transform: rotate(360deg) scale(1);
    }

}


/* =====================================================
   SUCCESS PAGE
===================================================== */

.success-page {

    min-height: calc(100vh - 84px);

    padding: 80px 7% 110px;

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}


/* =====================================================
   JEWELLERY BOX AREA
===================================================== */

.jewellery-box-area {

    width: 650px;

    height: 400px;

    max-width: 100%;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

}


/* =====================================================
   LUXURY BOX
===================================================== */

.luxury-box {

    width: 210px;

    height: 155px;

    position: relative;

    margin-top: 110px;

    z-index: 5;

    perspective: 800px;

}


/* =====================================================
   BOX BODY
===================================================== */

.box-body {

    width: 210px;

    height: 125px;

    position: absolute;

    bottom: 0;

    left: 0;

    background:
        linear-gradient(
            135deg,
            #8b1839,
            #4c0b22 55%,
            #270510
        );

    border: 1px solid rgba(220, 150, 155, 0.45);

    border-radius: 5px 5px 12px 12px;

    box-shadow:
        0 25px 45px rgba(0,0,0,0.55),
        0 0 35px rgba(130,20,55,0.18),
        inset 0 0 30px rgba(255,255,255,0.04);

    overflow: hidden;

}


/* =====================================================
   BOX LID
===================================================== */

.box-lid {

    width: 225px;

    height: 42px;

    position: absolute;

    left: -7px;

    top: -38px;

    z-index: 10;

    transform-origin: bottom center;

    background:
        linear-gradient(
            135deg,
            #a52048,
            #65102d 55%,
            #300712
        );

    border: 1px solid rgba(230,160,165,0.5);

    border-radius: 7px 7px 4px 4px;

    box-shadow:
        0 10px 25px rgba(0,0,0,0.5);

    animation: boxOpen 4s ease-in-out infinite;

}


@keyframes boxOpen {

    0%,
    15% {
        transform: rotateX(0deg);
    }

    38%,
    70% {
        transform: rotateX(-68deg);
    }

    90%,
    100% {
        transform: rotateX(0deg);
    }

}


/* =====================================================
   GOLD/PINK DETAILS ON LID
===================================================== */

.lid-ribbon {

    position: absolute;

    width: 30px;

    height: 100%;

    left: 50%;

    transform: translateX(-50%);

    background:
        linear-gradient(
            to right,
            #b98a47,
            #f0d08c,
            #9b6d34
        );

    opacity: 0.9;

}


.lid-highlight {

    position: absolute;

    width: 100%;

    height: 1px;

    top: 10px;

    background: rgba(255,220,220,0.5);

}


/* =====================================================
   INSIDE OF BOX
===================================================== */

.box-inside {

    position: absolute;

    top: 10px;

    left: 10px;

    right: 10px;

    height: 48px;

    border-radius: 4px;

    background:
        radial-gradient(
            circle,
            #b51f4d,
            #4c0921 70%
        );

    border: 1px solid rgba(235,180,180,0.18);

}


.inside-glow {

    width: 100px;

    height: 30px;

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(255,180,190,0.14);

    filter: blur(15px);

}


.box-mf {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    font-family: 'Cormorant Garamond', serif;

    color: #f0dca8;

    font-size: 24px;

    letter-spacing: 4px;

}


/* =====================================================
   FRONT RIBBON
===================================================== */

.box-front-ribbon {

    position: absolute;

    width: 30px;

    height: 100%;

    left: 50%;

    transform: translateX(-50%);

    background:
        linear-gradient(
            to right,
            #a06e35,
            #f0d28a,
            #8d5d2b
        );

}


.box-gold-line {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 18px;

    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            #e7c57c,
            transparent
        );

    opacity: 0.7;

}


/* =====================================================
   BOX SHADOW
===================================================== */

.box-shadow {

    position: absolute;

    width: 260px;

    height: 35px;

    left: -25px;

    bottom: -20px;

    border-radius: 50%;

    background: rgba(0,0,0,0.65);

    filter: blur(12px);

    z-index: -1;

}


/* =====================================================
   FLOATING JEWELLERY
===================================================== */

.floating-jewel {

    position: absolute;

    width: 75px;

    height: 75px;

    border-radius: 50%;

    padding: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle,
            rgba(160,25,65,0.30),
            rgba(15,5,10,0.8)
        );

    border: 1px solid rgba(190,65,100,0.35);

    box-shadow:
        0 0 25px rgba(150,25,65,0.20);

    z-index: 7;

    animation: jewelFloat 5s ease-in-out infinite;

}


.floating-jewel img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    border-radius: 50%;

    filter: drop-shadow(
        0 0 10px rgba(220,160,100,0.35)
    );

}


.jewel-ring {

    left: 15%;

    top: 45%;

    animation:
        jewelRing 5s ease-in-out infinite;

}


.jewel-necklace {

    right: 12%;

    top: 35%;

    animation:
        jewelNecklace 6s ease-in-out infinite;

}


.jewel-earrings {

    left: 27%;

    top: 8%;

    width: 62px;

    height: 62px;

    animation:
        jewelEarrings 5.5s ease-in-out infinite;

}


.jewel-bracelet {

    right: 28%;

    top: 5%;

    width: 65px;

    height: 65px;

    animation:
        jewelBracelet 6.5s ease-in-out infinite;

}


@keyframes jewelRing {

    0%,
    100% {
        transform:
            translate(20px, 35px)
            rotate(-10deg);
        opacity: 0.5;
    }

    50% {
        transform:
            translate(0, -25px)
            rotate(12deg);
        opacity: 1;
    }

}


@keyframes jewelNecklace {

    0%,
    100% {
        transform:
            translate(-20px, 40px)
            rotate(8deg);
        opacity: 0.5;
    }

    50% {
        transform:
            translate(0, -30px)
            rotate(-8deg);
        opacity: 1;
    }

}


@keyframes jewelEarrings {

    0%,
    100% {
        transform:
            translate(15px, 30px)
            rotate(0deg)
            scale(0.7);
        opacity: 0;
    }

    35%,
    75% {
        transform:
            translate(0, -10px)
            rotate(15deg)
            scale(1);
        opacity: 1;
    }

}


@keyframes jewelBracelet {

    0%,
    100% {
        transform:
            translate(-10px, 35px)
            rotate(-10deg)
            scale(0.7);
        opacity: 0;
    }

    35%,
    75% {
        transform:
            translate(0, -15px)
            rotate(10deg)
            scale(1);
        opacity: 1;
    }

}


/* =====================================================
   SPARKLES
===================================================== */

.box-sparkle {

    position: absolute;

    color: #f0b3c0;

    font-size: 22px;

    text-shadow:
        0 0 15px rgba(220,70,120,0.8);

    z-index: 8;

    animation: sparklePulse 2.5s ease-in-out infinite;

}


.sparkle-a {
    left: 18%;
    top: 15%;
}

.sparkle-b {
    right: 17%;
    top: 18%;
    animation-delay: 0.6s;
}

.sparkle-c {
    left: 38%;
    top: 2%;
    animation-delay: 1.2s;
}

.sparkle-d {
    right: 34%;
    top: 48%;
    animation-delay: 1.8s;
}


@keyframes sparklePulse {

    0%,
    100% {
        opacity: 0.25;
        transform: scale(0.7) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.35) rotate(90deg);
    }

}


/* =====================================================
   THANK YOU TEXT
===================================================== */

.success-content {

    position: relative;

    z-index: 10;

    max-width: 900px;

}


.success-eyebrow {

    font-size: 13px;

    letter-spacing: 5px;

    color: #d66a8c;

    margin-bottom: 25px;

    text-transform: uppercase;

    font-weight: 500;

}


.success-content h1 {

    font-family: 'Cormorant Garamond', serif;

    font-size: clamp(60px, 8vw, 100px);

    line-height: 0.85;

    font-weight: 400;

    color: var(--cream);

    letter-spacing: -2px;

    margin-bottom: 30px;

}


.success-content h1 span {

    color: #c94c76;

    font-style: italic;

}


.success-text {

    max-width: 620px;

    margin: auto;

    font-size: 14px;

    line-height: 2;

    color: var(--muted);

}


.success-text strong {

    color: var(--cream);

    font-weight: 500;

}


/* =====================================================
   DETAILS
===================================================== */

.success-details {

    margin: 45px auto 35px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    max-width: 720px;

    border-top: 1px solid rgba(180,50,90,0.3);

    border-bottom: 1px solid rgba(180,50,90,0.3);

}


.success-detail-card {

    padding: 22px 25px;

    border-right: 1px solid rgba(180,50,90,0.2);

}


.success-detail-card:last-child {

    border-right: none;

}


.success-detail-card span {

    display: block;

    font-size: 8px;

    letter-spacing: 3px;

    color: #bd597c;

    margin-bottom: 8px;

}


.success-detail-card strong {

    font-family: 'Cormorant Garamond', serif;

    font-size: 21px;

    font-weight: 500;

    color: var(--cream);

}


/* =====================================================
   BUTTONS
===================================================== */

.success-actions {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

}


.success-main-btn {

    border-color: #b83d68;

}


.success-main-btn span {

    color: #d66a8c;

}


.success-main-btn:hover {

    background: #b83d68;

    color: white;

}


.success-main-btn:hover span {

    color: white;

}


.success-home-btn {

    border-color: rgba(190,70,105,0.65);

}


.success-home-btn:hover {

    background: #741b3c;

    border-color: #741b3c;

    color: white;

}


/* =====================================================
   NOTE
===================================================== */

.success-note {

    margin-top: 30px;

    font-size: 9px;

    letter-spacing: 1.5px;

    color: #76646a;

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .success-page {

        padding:
            55px 5% 80px;

    }


    .jewellery-box-area {

        height: 330px;

    }


    .luxury-box {

        transform: scale(0.82);

        margin-top: 80px;

    }


    .floating-jewel {

        width: 58px;

        height: 58px;

        padding: 6px;

    }


    .jewel-earrings,
    .jewel-bracelet {

        width: 50px;

        height: 50px;

    }


    .jewel-ring {

        left: 5%;

    }


    .jewel-necklace {

        right: 4%;

    }


    .jewel-earrings {

        left: 20%;

    }


    .jewel-bracelet {

        right: 20%;

    }


    .success-eyebrow {

        font-size: 9px;

        letter-spacing: 3px;

    }


    .success-content h1 {

        font-size: 58px;

    }


    .success-text {

        font-size: 12px;

    }


    .success-details {

        grid-template-columns: 1fr;

    }


    .success-detail-card {

        border-right: none;

        border-bottom: 1px solid rgba(180,50,90,0.18);

    }


    .success-detail-card:last-child {

        border-bottom: none;

    }


    .success-actions {

        flex-direction: column;

        width: 100%;

    }


    .success-actions a {

        width: 100%;

        justify-content: center;

    }

}
.box-brand {
    position : absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    text-align: centre;
    z-index: 5;
    width:100%
}
.box-brand strong {
   display: block;
   font-family:'Cormorant Garamond', serif;
   font-size: 34px;
   font-weight:600;
   letter-spacing:7px;
   color:#f7e4b5;
   line-height: 1;
   text-shadow: 0 0 12px rbga (255,220,150,0,35);
}
.box-band span {
    display: block;
    margin-top: 7px;
    font-family: 'Montserrat',sans-serif;
    font-size:6px;
    letter-spacing:3px;
    color: #ffe8e8;
    white-space: nowrap;
}

.hero-main-image {
    width: 100%;
    max-width: 560px;
    height: 520px;
    object-fit: cover;
    border-radius: 4px;
    position: relative;
    z-index: 5;

    box-shadow:
        0 25px 70px rgba(0,0,0,0.65),
        0 0 45px rgba(212,175,106,0.12);

    animation: heroImageFloat 5s ease-in-out infinite;
}

@keyframes heroImageFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.brand-image-wrap {
    width: 420px;
    min-width: 420px;
    height: 480px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(212,175,106,0.35);
}

.brand-image-wrap::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(212,175,106,0.35);
    z-index: 2;
    pointer-events: none;
}

.brand-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.8s ease;
}

.brand-image-wrap:hover .brand-image {
    transform: scale(1.06);

}

/* =========================================================
   ABOUT + CONTACT PAGES
   ========================================================= */


/* ---------- ACTIVE NAV ---------- */

.navbar nav a.active {
    color: #d78a9d;
}


/* ---------- VIDEO GENERAL ---------- */

.about-video,
.contact-video {
    position: relative;
    width: 100%;
    height: 78vh;
    min-height: 560px;
    overflow: hidden;
    background: #090707;
}

.about-video video,
.contact-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ---------- VIDEO DARK OVERLAY ---------- */

.video-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.78),
            rgba(0,0,0,.25),
            rgba(0,0,0,.65)
        );

    pointer-events: none;
}


/* ---------- ABOUT HERO TEXT ---------- */

.about-hero-content,
.contact-hero-content {
    position: absolute;
    z-index: 5;

    left: 8%;
    bottom: 13%;

    max-width: 650px;
}

.about-hero-content p,
.contact-hero-content p {
    color: #d78a9d;
    letter-spacing: 5px;
    font-size: 12px;
    margin-bottom: 18px;
}

.about-hero-content h1,
.contact-hero-content h1 {
    font-size: clamp(55px, 7vw, 105px);
    line-height: .95;
    font-weight: 400;
    margin: 0;
    color: #fff;
}

.about-hero-content h1 span,
.contact-hero-content h1 span {
    color: #d78a9d;
    font-style: italic;
}

.hero-small {
    margin-top: 25px;
    color: rgba(255,255,255,.75) !important;
    letter-spacing: 1px !important;
    font-size: 15px !important;
}


/* =========================================================
   JEWELLERY ORBIT ANIMATION
   ========================================================= */

.jewellery-orbit {
    position: absolute;

    width: 230px;
    height: 230px;

    right: 12%;
    top: 50%;

    transform: translateY(-50%);

    z-index: 4;
}


.orbit-center {
    position: absolute;

    width: 105px;
    height: 105px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(215,138,157,.8);

    border-radius: 50%;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    background: rgba(10,5,7,.75);

    box-shadow:
        0 0 35px rgba(215,138,157,.25);
}


.orbit-center span {
    font-family: Georgia, serif;
    color: #fff;
    font-size: 25px;
    letter-spacing: 3px;
}


.orbit-center small {
    color: #d78a9d;
    font-size: 7px;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 5px;
}


.orbit-line {
    position: absolute;

    inset: 0;

    border: 1px solid rgba(215,138,157,.65);

    border-radius: 50%;

    animation: jewelleryRotate 9s linear infinite;
}


.orbit-one {
    transform: rotate(25deg) scaleX(1.65);
}


.orbit-two {
    transform: rotate(-25deg) scaleX(1.65);

    animation-duration: 12s;
    animation-direction: reverse;
}


@keyframes jewelleryRotate {

    from {
        transform: rotate(0deg) scaleX(1.65);
    }

    to {
        transform: rotate(360deg) scaleX(1.65);
    }

}


/* =========================================================
   ABOUT STORY
   ========================================================= */

.about-story-section {

    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 700px;

    background: #0b0909;
}


.about-story-image {
    position: relative;
    min-height: 600px;
    overflow: hidden;
}


.about-story-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform .8s ease;
}


.about-story-image:hover img {
    transform: scale(1.04);
}


.about-story-content {

    padding: 100px 10%;

    display: flex;
    flex-direction: column;

    justify-content: center;
}


.section-label {
    color: #d78a9d;

    letter-spacing: 4px;

    font-size: 11px;

    margin-bottom: 18px;
}


.about-story-content h2,
.craftsmanship-heading h2,
.contact-intro h2 {

    color: #fff;

    font-size: clamp(42px, 5vw, 70px);

    line-height: 1;

    font-weight: 400;

    margin: 0 0 30px;
}


.about-story-content h2 span,
.craftsmanship-heading h2 span,
.contact-intro h2 span {

    color: #d78a9d;

    font-style: italic;
}


.about-story-content > p:not(.section-label) {

    color: rgba(255,255,255,.68);

    line-height: 1.9;

    max-width: 550px;

    margin-bottom: 20px;
}


/* =========================================================
   CRAFTSMANSHIP
   ========================================================= */

.craftsmanship-section {

    padding: 120px 8%;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(215,138,157,.08),
            transparent 35%
        ),
        #080707;
}


.craftsmanship-heading {
    max-width: 650px;
    margin-bottom: 70px;
}


.craftsmanship-heading > p:last-child {

    color: rgba(255,255,255,.6);

    line-height: 1.8;

    max-width: 500px;
}


.craftsmanship-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;
}


.craft-card {

    position: relative;

    min-height: 390px;

    padding: 35px;

    border: 1px solid rgba(215,138,157,.25);

    background: rgba(255,255,255,.025);

    transition:
        transform .4s ease,
        border-color .4s ease;
}


.craft-card:hover {

    transform: translateY(-10px);

    border-color: rgba(215,138,157,.7);
}


.craft-image {

    height: 190px;

    margin: -35px -35px 30px;

    overflow: hidden;
}


.craft-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .6s ease;
}


.craft-card:hover .craft-image img {

    transform: scale(1.08);

}


.craft-icon {

    width: 75px;
    height: 75px;

    border: 1px solid #d78a9d;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #d78a9d;

    font-size: 28px;

    margin-bottom: 25px;
}


.craft-number {

    color: #d78a9d;

    font-size: 11px;

    letter-spacing: 2px;

    margin-bottom: 12px;
}


.craft-card h3 {

    color: #fff;

    font-family: Georgia, serif;

    font-size: 28px;

    font-weight: 400;

    margin: 0 0 15px;
}


.craft-card p {

    color: rgba(255,255,255,.55);

    line-height: 1.7;

    margin: 0;
}


/* =========================================================
   ABOUT QUOTE
   ========================================================= */

.about-quote {

    min-height: 500px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: #050404;

    padding: 80px 20px;
}


.quote-mark {

    color: #d78a9d;

    font-family: Georgia, serif;

    font-size: 90px;

    line-height: .5;

    margin-bottom: 30px;
}


.about-quote h2 {

    color: #fff;

    font-family: Georgia, serif;

    font-weight: 400;

    font-size: clamp(45px, 6vw, 80px);

    line-height: 1;

    margin: 0;
}


.about-quote h2 span {

    color: #d78a9d;

    font-style: italic;
}


.about-quote p {

    color: #d78a9d;

    letter-spacing: 5px;

    font-size: 11px;

    margin-top: 35px;
}


/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-video {

    height: 70vh;
}


.contact-hero-content {

    bottom: 15%;
}


.contact-section {

    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 90px;

    padding: 120px 8%;

    background: #090707;
}


.contact-intro > p:not(.section-label) {

    color: rgba(255,255,255,.65);

    line-height: 1.8;

    max-width: 500px;
}


.contact-info {

    margin-top: 55px;
}


.contact-info-item {

    padding: 20px 0;

    border-bottom: 1px solid rgba(255,255,255,.1);

    display: flex;

    flex-direction: column;

    gap: 8px;
}


.contact-info-item span {

    color: #d78a9d;

    letter-spacing: 3px;

    font-size: 10px;
}


.contact-info-item strong {

    color: #fff;

    font-weight: 400;
}


/* ---------- FORM ---------- */

.contact-form-box {

    padding: 50px;

    border: 1px solid rgba(215,138,157,.3);

    background: rgba(255,255,255,.025);

    box-shadow:
        0 30px 80px rgba(0,0,0,.3);
}


.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;
}


.contact-form-box label {

    display: block;

    color: #d78a9d;

    font-size: 10px;

    letter-spacing: 2px;

    margin: 20px 0 10px;
}


.contact-form-box input,
.contact-form-box select,
.contact-form-box textarea {

    width: 100%;

    box-sizing: border-box;

    background: rgba(255,255,255,.035);

    border: 1px solid rgba(255,255,255,.18);

    color: #fff;

    padding: 15px 16px;

    font-family: inherit;

    outline: none;

    transition:
        border-color .3s ease,
        background .3s ease;
}


.contact-form-box select option {

    background: #111;

    color: #fff;
}


.contact-form-box textarea {

    resize: vertical;
}


.contact-form-box input:focus,
.contact-form-box select:focus,
.contact-form-box textarea:focus {

    border-color: #d78a9d;

    background: rgba(215,138,157,.04);
}


.contact-form-box .main-btn {

    margin-top: 30px;

    border: none;

    cursor: pointer;
}


/* =========================================================
   CONTACT IMAGE
   ========================================================= */

.contact-image-section {

    padding: 0 8% 120px;

    background: #090707;
}


.contact-image {

    height: 600px;

    position: relative;

    overflow: hidden;
}


.contact-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 1s ease;
}


.contact-image:hover img {

    transform: scale(1.04);
}


.contact-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.75),
            transparent 70%
        );
}


.contact-image-text {

    position: absolute;

    left: 7%;

    bottom: 12%;

    z-index: 2;
}


.contact-image-text p {

    color: #d78a9d;

    letter-spacing: 4px;

    font-size: 11px;
}


.contact-image-text h2 {

    color: #fff;

    font-family: Georgia, serif;

    font-weight: 400;

    font-size: clamp(40px, 5vw, 70px);

    line-height: 1;

    margin: 15px 0 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .about-video,
    .contact-video {

        height: 65vh;

        min-height: 500px;
    }


    .jewellery-orbit {

        right: 5%;

        width: 170px;
        height: 170px;

        opacity: .7;
    }


    .about-story-section,
    .contact-section {

        grid-template-columns: 1fr;

    }


    .about-story-image {

        min-height: 450px;
    }


    .about-story-content {

        padding: 75px 8%;
    }


    .craftsmanship-grid {

        grid-template-columns: 1fr;
    }


    .contact-section {

        gap: 50px;

        padding: 80px 8%;
    }


    .contact-form-box {

        padding: 30px 25px;
    }


    .contact-image-section {

        padding: 0 5% 80px;
    }


    .contact-image {

        height: 500px;
    }

}


@media (max-width: 600px) {

    .about-hero-content,
    .contact-hero-content {

        left: 7%;

        right: 7%;

        bottom: 10%;
    }


    .about-hero-content h1,
    .contact-hero-content h1 {

        font-size: 48px;
    }


    .jewellery-orbit {

        top: 28%;

        right: 5%;

        width: 130px;
        height: 130px;
    }


    .orbit-center {

        width: 70px;
        height: 70px;
    }


    .orbit-center span {

        font-size: 17px;
    }


    .orbit-center small {

        font-size: 5px;
    }


    .form-row {

        grid-template-columns: 1fr;

        gap: 0;
    }


    .contact-image {

        height: 430px;
    }

}
/* =========================================
   ABOUT PAGE IMAGES & VIDEO
========================================= */

.about-page-video {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
    margin: 40px 0;
}


/* STORY IMAGE */

.about-story-image {
    width: 90%;
    max-width: 1100px;
    margin: 50px auto;
    overflow: hidden;
}

.about-story-image img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.about-story-image:hover img {
    transform: scale(1.04);
}


/* CRAFTSMANSHIP IMAGE */

.craftsmanship-image {
    width: 90%;
    max-width: 1100px;
    margin: 70px auto 20px;
    overflow: hidden;
}

.craftsmanship-image img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.craftsmanship-image:hover img {
    transform: scale(1.04);
}


/* MOBILE */

@media (max-width: 700px) {

    .about-page-video {
        height: 280px;
    }

    .about-story-image img,
    .craftsmanship-image img {
        height: 300px;
    }

}
.contact-page ~ footer .footer-logo{
    transform: scale (0.65);
    transform-origin: centre;
}
/* =====================================================
   CONTACT FORM JEWELLERY BACKGROUND
===================================================== */

.contact-form-box {
    position: relative;
    overflow: hidden;
}

.contact-form-box::before {
    content: "";
    position: absolute;

    width: 430px;
    height: 300px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background-image: url("../images/contactpage/contact-jeweller.jpg");
    background-size: cover;
    background-position: center;

    opacity: 0.18;

    z-index: 0;

    pointer-events: none;
}

.contact-form-box form {
    position: relative;
    z-index: 1;
}
.contact-jewellery-bg{
    width:420px;
    height:300px;
    opacity:0.30;
}
/*=====================================================
== SOCIAL CARDS
=====================================================*/

/* =====================================================
   SOCIAL MEDIA CARDS
===================================================== */

.social-section {
    text-align: center;
    padding: 55px 20px 35px;
}

.social-eyebrow {
    font-size: 10px;
    letter-spacing: 4px;
    color: #d86b91;
    margin-bottom: 8px;
}

.social-section h3 {
    font-family: "Playfair Display", serif;
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 28px;
}

.social-cards {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    flex-wrap: wrap;
}

.social-card {
    width: 190px;
    min-height: 125px;
    padding: 22px 18px;
    
    border: 1px solid rgba(216,107,145,0.35);
    background: rgba(255,255,255,0.025);
    
    color: #fff;
    text-decoration: none;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    position: relative;
    overflow: hidden;
    
    transition: all 0.4s ease;
}

.social-card::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    border: 1px solid rgba(216,107,145,0.25);
    border-radius: 50%;
    
    top: -35px;
    right: -25px;
    
    transition: transform 0.6s ease;
}

.social-card:hover::before {
    transform: scale(2.2);
}

.social-card:hover {
    transform: translateY(-8px);
    border-color: #d86b91;
    box-shadow: 0 15px 35px rgba(216,107,145,0.12);
}

.social-icon {
    font-size: 30px;
    margin-bottom: 8px;
    color: #d86b91;
    transition: transform 0.5s ease;
}

.social-card:hover .social-icon {
    transform: rotate(360deg) scale(1.1);
}

.social-name {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.social-action {
    margin-top: 10px;
    font-size: 9px;
    letter-spacing: 2px;
    color: #aaa;
}

.social-action b {
    color: #d86b91;
    margin-left: 5px;
}

.instagram-card:hover .social-icon {
    animation: socialPulse 0.8s ease;
}

.tiktok-card:hover .social-icon {
    animation: socialBounce 0.7s ease;
}

.facebook-card:hover .social-icon {
    animation: socialPulse 0.8s ease;
}

@keyframes socialPulse {
    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }
}

@keyframes socialBounce {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}
/* =====================================================
   LUXURY SOCIAL EXPERIENCE
===================================================== */

.social-section {
    position: relative;
    overflow: hidden;
    padding: 100px 30px 90px;
    text-align: center;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(210, 80, 120, 0.10),
            transparent 45%
        ),
        #090909;
}

/* subtle jewellery atmosphere */

.social-section::before {
    content: "✦     ◇     ♡     ✧     ◇     ✦";

    position: absolute;
    left: 0;
    right: 0;
    top: 25px;

    font-size: 13px;
    letter-spacing: 28px;

    color: rgba(216, 107, 145, 0.15);

    animation: jewelleryFloat 8s ease-in-out infinite;
}

.social-section::after {
    content: "MF";

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    font-family: serif;
    font-size: 260px;

    color: rgba(255,255,255,0.015);

    pointer-events: none;
}

.social-glow {
    position: absolute;

    width: 450px;
    height: 450px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(216, 107, 145, 0.04);

    filter: blur(70px);

    pointer-events: none;
}

.social-eyebrow {
    position: relative;
    z-index: 2;

    color: #d86b91;

    font-size: 10px;
    letter-spacing: 5px;

    margin-bottom: 12px;
}

.social-section h2 {
    position: relative;
    z-index: 2;

    font-family: "Playfair Display", serif;

    font-size: clamp(32px, 5vw, 52px);

    font-weight: 400;

    margin: 0;
}

.social-intro {
    position: relative;
    z-index: 2;

    color: #999;

    margin: 15px auto 45px;

    max-width: 500px;

    font-size: 14px;
}


/* =====================================================
   SOCIAL CARDS
===================================================== */

.social-stage {
    position: relative;
    z-index: 3;

    display: flex;
    justify-content: center;
    align-items: stretch;

    gap: 25px;

    max-width: 1000px;

    margin: auto;

    flex-wrap: wrap;
}

.social-card {
    position: relative;

    width: 250px;
    min-height: 300px;

    padding: 42px 28px 30px;

    overflow: hidden;

    border: 1px solid rgba(216,107,145,0.25);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.015)
        );

    backdrop-filter: blur(15px);

    transition:
        transform 0.5s ease,
        border-color 0.5s ease,
        box-shadow 0.5s ease;
}

.social-card:hover {
    transform: translateY(-12px);

    border-color: rgba(216,107,145,0.75);

    box-shadow:
        0 25px 60px rgba(0,0,0,0.45),
        0 0 30px rgba(216,107,145,0.08);
}


/* ICON */

.social-icon-button {
    position: relative;
    z-index: 5;

    width: 72px;
    height: 72px;

    border-radius: 50%;

    border: 1px solid rgba(216,107,145,0.55);

    background: rgba(0,0,0,0.35);

    color: #d86b91;

    font-size: 34px;

    cursor: pointer;

    transition: all 0.5s ease;
}

.social-card:hover .social-icon-button {
    transform: scale(1.08);
    box-shadow: 0 0 30px rgba(216,107,145,0.2);
}

.social-card h3 {
    margin: 22px 0 7px;

    font-family: "Playfair Display", serif;

    font-size: 24px;

    font-weight: 400;
}

.social-card p {
    color: #888;

    font-size: 12px;

    letter-spacing: 1px;
}


/* FOLLOW BUTTON */

.follow-button,
.profile-follow {
    margin-top: 20px;

    padding: 11px 25px;

    border: 1px solid rgba(216,107,145,0.55);

    background: transparent;

    color: #fff;

    font-size: 9px;

    letter-spacing: 2px;

    cursor: pointer;

    transition: all 0.35s ease;
}

.follow-button:hover,
.profile-follow:hover {
    background: #d86b91;

    color: #090909;

    transform: translateY(-2px);
}


/* =====================================================
   PROFILE REVEAL
===================================================== */

.profile-reveal {
    position: absolute;

    inset: 0;

    z-index: 10;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 25px;

    background:
        radial-gradient(
            circle at center,
            rgba(216,107,145,0.16),
            rgba(5,5,5,0.97) 65%
        );

    transform: translateY(105%);

    transition: transform 0.65s cubic-bezier(.22,1,.36,1);
}

.social-card.active .profile-reveal {
    transform: translateY(0);
}

.profile-avatar {
    width: 78px;
    height: 78px;

    border-radius: 50%;

    padding: 3px;

    border: 1px solid #d86b91;

    margin-bottom: 15px;
}

.profile-avatar img {
    width: 100%;
    height: 100%;

    border-radius: 50%;

    object-fit: cover;
}

.profile-reveal strong {
    font-size: 15px;

    letter-spacing: 1px;
}

.profile-reveal span {
    margin-top: 6px;

    color: #888;

    font-size: 11px;
}


/* =====================================================
   INSTAGRAM ANIMATION
===================================================== */

.floating-instagram {
    position: absolute;

    inset: 0;

    pointer-events: none;
}

.floating-instagram span {
    position: absolute;

    color: #d86b91;

    opacity: 0;

    animation: instaFloat 4s infinite;
}

.floating-instagram span:nth-child(1) {
    left: 20px;
    top: 35px;
}

.floating-instagram span:nth-child(2) {
    right: 25px;
    top: 90px;

    animation-delay: 1s;
}

.floating-instagram span:nth-child(3) {
    left: 45px;
    bottom: 45px;

    animation-delay: 2s;
}

@keyframes instaFloat {

    0% {
        opacity: 0;
        transform: translateY(20px) rotate(0);
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
        transform: translateY(-35px) rotate(180deg);
    }
}


/* =====================================================
   TIKTOK LETTER ANIMATION
===================================================== */

.tiktok-letters {
    position: absolute;

    inset: 0;

    pointer-events: none;
}

.tiktok-letters span {
    position: absolute;

    color: rgba(216,107,145,0.3);

    font-weight: bold;

    animation: letterDance 3.5s infinite;
}

.tiktok-letters span:nth-child(1) {
    left: 25px;
    top: 45px;
}

.tiktok-letters span:nth-child(2) {
    right: 30px;
    top: 80px;

    animation-delay: .7s;
}

.tiktok-letters span:nth-child(3) {
    left: 45px;
    bottom: 45px;

    animation-delay: 1.4s;
}

.tiktok-letters span:nth-child(4) {
    right: 50px;
    bottom: 55px;

    animation-delay: 2s;
}

@keyframes letterDance {

    0%,100% {
        transform: translateY(0) rotate(0);
        opacity: .15;
    }

    50% {
        transform: translateY(-18px) rotate(15deg);
        opacity: .65;
    }
}


/* =====================================================
   FACEBOOK F ANIMATION
===================================================== */

.facebook-float span {
    position: absolute;

    color: rgba(216,107,145,0.25);

    font-size: 28px;

    animation: facebookOrbit 4s infinite linear;
}

.facebook-float span:nth-child(1) {
    left: 25px;
    top: 50px;
}

.facebook-float span:nth-child(2) {
    right: 30px;
    top: 75px;

    animation-delay: 1s;
}

.facebook-float span:nth-child(3) {
    left: 55px;
    bottom: 45px;

    animation-delay: 2s;
}

@keyframes facebookOrbit {

    0% {
        transform: rotate(0deg) translateX(0);
        opacity: .15;
    }

    50% {
        transform: rotate(180deg) translateX(15px);
        opacity: .7;
    }

    100% {
        transform: rotate(360deg) translateX(0);
        opacity: .15;
    }
}


/* =====================================================
   BACKGROUND JEWELLERY IMAGE
===================================================== */

.contact-form-box {
    position: relative;
    overflow: hidden;

    padding: 45px;

    background:
        radial-gradient(
            circle at center,
            rgba(216,107,145,0.06),
            transparent 65%
        );
}

.contact-form-box::after {
    content: "";

    position: absolute;

    width: 460px;
    height: 330px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background-image:
        linear-gradient(
            rgba(8,8,8,0.62),
            rgba(8,8,8,0.62)
        ),
        url("../images/contactpage/contact-jeweller.jpg");

    background-size: cover;

    background-position: center;

    opacity: .38;

    filter: saturate(.8);

    z-index: 0;

    pointer-events: none;
}

.contact-form-box form {
    position: relative;
    z-index: 2;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .social-section {
        padding: 75px 18px;
    }

    .social-card {
        width: min(100%, 330px);
    }

    .contact-form-box {
        padding: 25px 18px;
    }

    .contact-form-box::after {
        width: 90%;
        height: 280px;
    }
}
/* =========================================================
   ABOUT PAGE — IMAGE & HORIZONTAL SECTIONS ENHANCEMENT
   Paste this at the VERY END of style.css
   ========================================================= */

/* ABOUT HERO */
.about-hero {
    min-height: 620px;
    padding: 90px 8%;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 70px;
    position: relative;
    overflow: hidden;
}

/* Hero image area */
.about-monogram {
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-circle {
    width: 480px;
    height: 480px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
}

.about-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.about-circle:hover img {
    transform: scale(1.08);
}


/* =========================================================
   ABOUT STORY
   ========================================================= */

.about-story {
    padding: 110px 8%;
}

.about-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 70px;
}

.about-columns > div {
    padding: 40px 32px;
    min-height: 230px;
    border: 1px solid rgba(180, 150, 90, 0.25);
    border-radius: 18px;
    transition: all 0.4s ease;
}

.about-columns > div:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

.about-columns span {
    font-size: 13px;
    letter-spacing: 3px;
}

.about-columns h3 {
    margin: 18px 0 12px;
}


/* =========================================================
   CRAFTSMANSHIP SECTION
   THIS IS THE IMPORTANT PART FOR YOUR LARGE HORIZONTAL PIC
   ========================================================= */

.about-craft {
    width: 100%;
    min-height: 720px;
    display: grid;
    grid-template-columns: 55% 45%;
    align-items: stretch;
    overflow: hidden;
}

/* LEFT VIDEO */
.about-craft-video {
    width: 100%;
    height: 720px;
    overflow: hidden;
    position: relative;
}

.about-craft-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* RIGHT COLOURED TEXT SECTION */
.about-craft-text {
    min-height: 720px;
    padding: 80px 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Decorative background */
.about-craft-text::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    top: -150px;
    right: -120px;
    background: rgba(190, 155, 80, 0.12);
}

.about-craft-text::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    bottom: -130px;
    left: -100px;
    background: rgba(190, 155, 80, 0.08);
}


/* =========================================================
   BIG HORIZONTAL CRAFTSMANSHIP IMAGE
   ========================================================= */

.about-craft-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    margin-top: 45px;
    border-radius: 14px;
    position: relative;
    z-index: 2;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.about-craft-img:hover {
    transform: scale(1.025);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.25);
}


/* Keep text above decorative circles */
.about-craft-text .section-heading {
    position: relative;
    z-index: 2;
}


/* =========================================================
   QUOTE SECTION
   ========================================================= */

.about-quote {
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 70px 20px;
}

.about-quote p {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(38px, 5vw, 70px);
    line-height: 1;
    margin-bottom: 25px;
}

.about-quote span {
    letter-spacing: 4px;
    font-size: 12px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .about-hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 80px 6%;
    }

    .about-monogram {
        margin-top: 20px;
    }

    .about-circle {
        width: 400px;
        height: 400px;
    }

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

    .about-craft {
        grid-template-columns: 1fr;
    }

    .about-craft-video {
        height: 600px;
    }

    .about-craft-text {
        min-height: auto;
        padding: 70px 8%;
    }

    .about-craft-img {
        height: 340px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .about-hero {
        min-height: auto;
        padding: 60px 22px;
        gap: 40px;
    }

    .about-circle {
        width: 300px;
        height: 300px;
    }

    .about-story {
        padding: 75px 22px;
    }

    .about-columns {
        gap: 18px;
        margin-top: 45px;
    }

    .about-columns > div {
        padding: 30px 25px;
    }

    .about-craft-video {
        height: 420px;
    }

    .about-craft-text {
        padding: 60px 22px;
    }

    .about-craft-img {
        height: 240px;
        margin-top: 35px;
        border-radius: 12px;
    }

    .about-quote {
        min-height: 300px;
        padding: 60px 20px;
    }

}
/* =====================================================
   ABOUT HERO — WIDE IMAGE
   ===================================================== */

.about-hero {
    width: 100%;
    min-height: 650px;
    padding: 70px 7%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 45px;
    overflow: hidden;
}

/* Wide horizontal image */
.about-hero-image {
    width: 100%;
    height: 430px;
    overflow: hidden;
    border-radius: 22px;
    position: relative;
    box-shadow: 0 25px 60px rgba(0,0,0,0.20);
}

.about-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.7s ease;
}

.about-hero-image:hover img {
    transform: scale(1.03);
}

/* Text UNDER the wide image */
.about-hero-content {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    padding: 10px 20px 30px;
}

.about-hero-content h1 {
    margin: 12px 0 20px;
}

.about-hero-content p:last-child {
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
}


/* =====================================================
   CRAFTSMANSHIP — VIDEO
   ===================================================== */

.about-craft {
    width: 100%;
    display: grid;
    grid-template-columns: 55% 45%;
    min-height: 600px;
    overflow: hidden;
}

.about-craft-video {
    width: 100%;
    height: 600px;
    overflow: hidden;
}

.about-craft-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-craft-text {
    min-height: 600px;
    padding: 70px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Soft background decoration */
.about-craft-text::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    right: -150px;
    top: -130px;
    background: rgba(190,155,80,0.10);
}

.about-craft-text .section-heading {
    position: relative;
    z-index: 2;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 700px) {

    .about-hero {
        padding: 50px 20px;
        gap: 30px;
    }

    .about-hero-image {
        height: 280px;
        border-radius: 16px;
    }

    .about-hero-content {
        padding: 0 5px 20px;
    }

    .about-craft {
        grid-template-columns: 1fr;
    }

    .about-craft-video {
        height: 420px;
    }

    .about-craft-text {
        min-height: 350px;
        padding: 55px 25px;
    }
}
/* =========================================================
   ABOUT CRAFT — FULL VIDEO BACKGROUND
   ========================================================= */

.about-craft {
    position: relative;
    width: 100%;
    min-height: 700px;
    display: block;
    overflow: hidden;
}

/* VIDEO FULL SECTION */
.about-craft-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.about-craft-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* DARK OVERLAY — text readable rahe */
.about-craft::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0.72),
        rgba(0,0,0,0.45),
        rgba(0,0,0,0.25)
    );
    z-index: 2;
}

/* TEXT NOW ON TOP OF VIDEO */
.about-craft-text {
    position: relative;
    z-index: 3;
    width: 100%;
    min-height: 700px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding: 90px 10%;
    background: transparent !important;
    color: white;
}

/* Heading */
.about-craft-text .section-heading {
    max-width: 650px;
    position: relative;
    z-index: 4;
}

/* Small title */
.about-craft-text .section-heading p {
    color: #d8b56a;
    letter-spacing: 4px;
}

/* Main heading */
.about-craft-text .section-heading h2 {
    color: white;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1.05;
    margin: 15px 0 22px;
}

/* Description */
.about-craft-text .section-heading span {
    color: rgba(255,255,255,0.82);
    line-height: 1.8;
    display: block;
    max-width: 560px;
}


/* DETAILS */
.about-craft-text .craft-detail {
    position: relative;
    z-index: 4;
    color: white;
    margin-top: 24px;
}

.about-craft-text .craft-detail span {
    color: #d8b56a;
}


/* Remove old decorative backgrounds */
.about-craft-text::before,
.about-craft-text::after {
    display: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .about-craft {
        min-height: 650px;
    }

    .about-craft-video {
        height: 100%;
    }

    .about-craft-text {
        min-height: 650px;
        padding: 70px 25px;
        justify-content: center;
    }

    .about-craft-text .section-heading h2 {
        font-size: 42px;
    }

}
/* =====================================================
   NAVBAR LOGO — SIZE FIX
   ===================================================== */

.navbar .logo {
    display: flex;
    align-items: center;
    height: 58px;
    line-height: 1;
    gap: 8px;
}

.navbar .logo-icon {
    width: 38px;
    height: 38px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* MODREN text */
.navbar .logo span {
    line-height: 1;
    display: block;
}

/* FASHION text */
.navbar .logo small {
    line-height: 1;
    display: block;
}


/* Make navbar itself balanced */
.navbar {
    min-height: 70px;
    align-items: center;
}


/* Mobile */
@media (max-width: 600px) {

    .navbar .logo {
        height: 52px;
        gap: 6px;
    }

    .navbar .logo-icon {
        width: 32px;
        height: 32px;
    }

}
/* =====================================================
   MODREN FASHION — NAVBAR LOGO
   ===================================================== */

.navbar .logo {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 58px;
    text-decoration: none;
}


/* Logo Icon */

.navbar .logo-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}


/* MODREN FASHION */

.navbar .brand-name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1;
    
    /* Gold animated text */
    background: linear-gradient(
        110deg,
        #b89145 0%,
        #f5df9b 25%,
        #ffffff 40%,
        #d4af63 55%,
        #f5df9b 75%,
        #a9823c 100%
    );

    background-size: 250% auto;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: logoShimmer 5s linear infinite;
}


/* Smooth luxury colour movement */

@keyframes logoShimmer {

    0% {
        background-position: 250% center;
    }

    100% {
        background-position: -250% center;
    }

}


/* Hover */

.navbar .logo:hover .brand-name {
    animation-duration: 2s;
}


/* Mobile */

@media (max-width: 600px) {

    .navbar .logo {
        gap: 3px;
    }

    .navbar .logo-icon {
        width: 32px;
        height: 32px;
    }

    .navbar .brand-name {
        font-size: 14px;
        letter-spacing: 1.4px;
    }

}
/* =====================================================
   COLLECTION HERO — FULL SCREEN VIDEO
===================================================== */

.collection-hero {
    position: relative;
    width: 100%;
    min-height: 720px;
    height: 85vh;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}


/* FULL VIDEO */

.collection-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.collection-hero-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* DARK LUXURY OVERLAY */

.collection-video-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.68),
            rgba(0,0,0,0.38),
            rgba(0,0,0,0.60)
        );

    z-index: 2;
}


/* CONTENT ON VIDEO */

.collection-hero-content {
    position: relative;
    z-index: 3;

    max-width: 850px;
    padding: 40px 25px;

    color: white;
}


/* EYEBROW */

.collection-hero-content .collection-eyebrow {
    color: #d8b56a;
    letter-spacing: 5px;
    font-size: 12px;
    margin-bottom: 18px;
}


/* MAIN HEADING */

.collection-hero-content h1 {
    color: white;
    font-size: clamp(55px, 8vw, 110px);
    line-height: 0.95;
    margin: 0 0 30px;

    font-family: "Cormorant Garamond", serif;
}


/* GOLD SECOND LINE */

.collection-hero-content h1 span {
    display: block;

    color: #d8b56a;

    font-style: italic;
}


/* DESCRIPTION */

.collection-hero-content > p {
    max-width: 650px;
    margin: 0 auto 35px;

    color: rgba(255,255,255,0.85);

    line-height: 1.8;
    font-size: 16px;
}


/* BUTTON */

.collection-hero-content .main-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;

    position: relative;
    z-index: 4;
}


/* =====================================================
   REMOVE OLD ORBIT
===================================================== */

.collection-orbit {
    display: none !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .collection-hero {
        min-height: 650px;
        height: 80vh;
    }

    .collection-hero-content {
        padding: 30px 20px;
    }

    .collection-hero-content h1 {
        font-size: 58px;
    }

    .collection-hero-content > p {
        font-size: 14px;
        line-height: 1.7;
    }

}
/* =====================================================
   HOME HERO — FULL BACKGROUND IMAGE
===================================================== */

.hero {
    position: relative;
    width: 100%;
    min-height: 760px;
    height: 88vh;

    overflow: hidden;

    display: flex;
    align-items: center;

    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.48) 42%,
            rgba(0, 0, 0, 0.15) 100%
        ),
        url("../images/homepage/hero.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* =====================================================
   HERO TEXT
===================================================== */

.hero-content {
    position: relative;
    z-index: 5;

    width: 50%;
    max-width: 650px;

    padding-left: 8%;
    padding-right: 30px;

    color: #fff;
}


/* Small heading */

.hero-content .eyebrow {
    color: #d8b56a;

    font-size: 12px;
    letter-spacing: 4px;
    font-weight: 600;

    margin-bottom: 22px;
}


/* Main heading */

.hero-content h1 {
    color: #fff;

    font-size: clamp(55px, 7vw, 100px);
    line-height: 0.95;

    margin: 0 0 28px;
}


/* Gold text */

.hero-content h1 span {
    color: #d8b56a;
    font-style: italic;
}


/* Description */

.hero-content .hero-text {
    color: rgba(255,255,255,0.86);

    max-width: 520px;

    font-size: 16px;
    line-height: 1.8;

    margin-bottom: 35px;
}


/* =====================================================
   HIDE OLD ORBIT / IMAGE
===================================================== */

.hero-art {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 2;

    pointer-events: none;
}


/* Hide old jewellery image because it is now
   the hero background */

.hero-main-image {
    display: none;
}


/* Hide old orbit circles */

.hero .orbit {
    display: none;
}


/* Hide old sparkles */

.hero .sparkle {
    display: none;
}


/* =====================================================
   BUTTON
===================================================== */

.hero-content .main-btn {
    position: relative;
    z-index: 10;

    display: inline-flex;
    align-items: center;
    gap: 14px;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .hero {
        min-height: 700px;
        height: 85vh;

        background-position: center;
    }

    .hero-content {
        width: 100%;

        padding: 0 25px;

        text-align: center;

        margin: auto;
    }

    .hero-content .hero-text {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-content h1 {
        font-size: 58px;
    }

    .hero-content .eyebrow {
        font-size: 10px;
        letter-spacing: 3px;
    }

}


/* =====================================================
   ORDER TRACKING EXPERIENCE
===================================================== */

.order-tracking-section {
    position: relative;
    overflow: hidden;
    padding: 120px 7%;
    background:
        radial-gradient(circle at 50% 20%, rgba(212,175,55,.12), transparent 35%),
        #090909;
    color: #fff;
}


/* HEADING */

.tracking-heading {
    max-width: 760px;
    margin: 0 auto 65px;
    text-align: center;
}

.tracking-eyebrow {
    letter-spacing: 4px;
    font-size: 12px;
    color: #d4af37;
    margin-bottom: 18px;
}

.tracking-heading h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(42px, 6vw, 78px);
    font-weight: 400;
    line-height: 1;
    margin: 0;
}

.tracking-heading h2 span {
    display: block;
    color: #d4af37;
    font-style: italic;
}

.tracking-heading > p:last-child {
    margin-top: 25px;
    color: #aaa;
    font-size: 15px;
}


/* =====================================================
   PREPARING VISUAL
===================================================== */

.tracking-visual {
    position: relative;
    max-width: 1100px;
    height: 270px;
    margin: auto;
    border: 1px solid rgba(212,175,55,.25);
    border-radius: 30px;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.06),
            rgba(212,175,55,.03)
        );

    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-glow {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(212,175,55,.12);
    filter: blur(70px);
    animation: visualGlow 4s ease-in-out infinite;
}

@keyframes visualGlow {

    0%,100% {
        transform: scale(.8);
        opacity: .4;
    }

    50% {
        transform: scale(1.2);
        opacity: .8;
    }
}


.tracking-worker {
    position: absolute;
    left: 12%;
    bottom: 45px;
    font-size: 65px;

    animation:
        workerMove 2.5s ease-in-out infinite;
}

@keyframes workerMove {

    0%,100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-12px) rotate(3deg);
    }
}


.tracking-box {
    position: absolute;
    font-size: 42px;
    animation: boxFloat 3s ease-in-out infinite;
}

.box-one {
    left: 25%;
    bottom: 48px;
}

.box-two {
    right: 25%;
    top: 55px;
    animation-delay: 1s;
}

@keyframes boxFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}


.visual-tools {
    position: absolute;
    right: 13%;
    bottom: 45px;
    font-size: 25px;
    opacity: .7;

    animation: toolsMove 2s ease-in-out infinite;
}

@keyframes toolsMove {

    0%,100% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(5deg) translateY(-5px);
    }
}


.visual-text {
    position: relative;
    z-index: 2;
    text-align: center;
}

.visual-text strong {
    display: block;
    font-family: "Playfair Display", serif;
    font-size: 28px;
    font-weight: 400;
}

.visual-text span {
    display: block;
    margin-top: 8px;
    color: #aaa;
    font-size: 13px;
}


/* =====================================================
   ROAD + CAR
===================================================== */

.tracking-road {
    position: relative;
    max-width: 1100px;
    height: 120px;
    margin: 0 auto;
}

.road-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 65px;
    height: 2px;

    background: repeating-linear-gradient(
        to right,
        #d4af37 0,
        #d4af37 35px,
        transparent 35px,
        transparent 65px
    );

    opacity: .55;
}


.tracking-car {
    position: absolute;
    left: 0;
    top: 38px;
    font-size: 42px;

    animation: carDrive 7s linear infinite;
}

@keyframes carDrive {

    0% {
        left: 0;
        transform: scaleX(1);
    }

    48% {
        left: 90%;
        transform: scaleX(1);
    }

    50% {
        left: 90%;
        transform: scaleX(-1);
    }

    98% {
        left: 0;
        transform: scaleX(-1);
    }

    100% {
        left: 0;
        transform: scaleX(1);
    }
}


/* =====================================================
   TRACKING STEPS
===================================================== */

.tracking-steps {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


.tracking-step {
    position: relative;
    padding: 30px 20px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 22px;
    background: rgba(255,255,255,.025);

    transition: .4s ease;
}


.tracking-step:hover,
.tracking-step.active {
    transform: translateY(-8px);
    border-color: rgba(212,175,55,.5);
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}


.step-circle {
    width: 58px;
    height: 58px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(212,175,55,.5);

    color: #d4af37;
    font-size: 22px;

    margin-bottom: 22px;

    transition: .5s;
}


.tracking-step.active .step-circle {
    background: #d4af37;
    color: #090909;
    box-shadow:
        0 0 0 8px rgba(212,175,55,.08),
        0 0 35px rgba(212,175,55,.3);
}


.step-number {
    color: #d4af37;
    font-size: 11px;
    letter-spacing: 2px;
}


.step-content h3 {
    margin: 7px 0;
    font-family: "Playfair Display", serif;
    font-size: 24px;
    font-weight: 400;
}


.step-content p {
    color: #999;
    font-size: 13px;
    line-height: 1.7;
}


/* =====================================================
   SEARCH
===================================================== */

.tracking-search {
    max-width: 650px;
    margin: 70px auto 0;
    text-align: center;
}


.tracking-search > p {
    color: #d4af37;
    letter-spacing: 3px;
    font-size: 11px;
}


.tracking-search-box {
    display: flex;
    margin-top: 18px;
    padding: 5px;

    border: 1px solid rgba(212,175,55,.3);
    border-radius: 50px;
    background: rgba(255,255,255,.04);
}


.tracking-search-box input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: white;
    padding: 15px 22px;
    font-size: 14px;
}


.tracking-search-box input::placeholder {
    color: #777;
}


.tracking-search-box button {
    border: 0;
    border-radius: 40px;
    padding: 14px 25px;

    background: #d4af37;
    color: #090909;

    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;

    transition: .3s;
}


.tracking-search-box button:hover {
    transform: translateX(3px);
    box-shadow: 0 8px 25px rgba(212,175,55,.25);
}


.tracking-search-box button span {
    margin-left: 8px;
}


#trackingMessage {
    display: block;
    margin-top: 15px;
    color: #777;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 800px) {

    .order-tracking-section {
        padding: 80px 5%;
    }

    .tracking-visual {
        height: 230px;
    }

    .tracking-worker {
        left: 5%;
        font-size: 45px;
    }

    .visual-tools {
        right: 5%;
    }

    .tracking-steps {
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 550px) {

    .tracking-steps {
        grid-template-columns: 1fr;
    }

    .tracking-search-box {
        flex-direction: column;
        border-radius: 20px;
        padding: 8px;
    }

    .tracking-search-box button {
        width: 100%;
    }

    .tracking-car {
        font-size: 32px;
    }

}
/* =====================================================
   LUXURY ORDER CONFIRMATION VISUAL
===================================================== */

.order-visual {
    position: relative;
    width: min(560px, 90vw);
    height: 560px;
    margin: 0 auto 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


/* =====================================================
   ORBIT RINGS
===================================================== */

.order-orbit {
    position: absolute;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 50%;
    pointer-events: none;
}

.orbit-a {
    width: 420px;
    height: 420px;
    animation: orderRotate 18s linear infinite;
}

.orbit-b {
    width: 350px;
    height: 350px;
    transform: rotate(55deg);
    border-style: dashed;
    animation: orderRotateReverse 14s linear infinite;
}

.orbit-c {
    width: 500px;
    height: 220px;
    transform: rotate(-25deg);
    animation: orderRotate 20s linear infinite;
}


@keyframes orderRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes orderRotateReverse {

    from {
        transform: rotate(55deg);
    }

    to {
        transform: rotate(-305deg);
    }

}


/* =====================================================
   CONFIRMATION SEAL
===================================================== */

.confirmation-seal {
    position: relative;
    z-index: 5;
    width: 235px;
    height: 235px;
    border-radius: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,0.09),
            rgba(0,0,0,0.88) 65%
        );

    border: 1px solid rgba(212,175,55,0.55);

    box-shadow:
        0 0 35px rgba(212,175,55,0.16),
        inset 0 0 35px rgba(212,175,55,0.08);

    animation: sealAppear 1.2s ease forwards;
}


@keyframes sealAppear {

    0% {
        opacity: 0;
        transform: scale(0.55);
    }

    70% {
        transform: scale(1.06);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}


/* =====================================================
   INNER CHECK
===================================================== */

.seal-ring {
    width: 75px;
    height: 75px;
    border-radius: 50%;

    border: 1px solid rgba(212,175,55,0.8);

    display: flex;
    align-items: center;
    justify-content: center;

    animation: checkPulse 2.5s ease-in-out infinite;
}


.check-mark {
    font-size: 36px;
    font-weight: 300;
    color: #d4af37;

    animation: checkReveal 1s ease 0.7s both;
}


@keyframes checkReveal {

    from {
        opacity: 0;
        transform: scale(0.2) rotate(-25deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }

}


@keyframes checkPulse {

    0%,100% {
        box-shadow: 0 0 0 rgba(212,175,55,0);
    }

    50% {
        box-shadow: 0 0 25px rgba(212,175,55,0.25);
    }

}


/* =====================================================
   SEAL TEXT
===================================================== */

.seal-text {
    margin-top: 15px;

    font-size: 10px;
    letter-spacing: 4px;
    text-align: center;

    color: rgba(255,255,255,0.65);
}


.seal-text strong {
    display: block;

    margin-top: 5px;

    font-size: 17px;
    letter-spacing: 3px;

    color: #d4af37;
}


/* =====================================================
   ORDER NUMBER
===================================================== */

.visual-order-number {
    position: absolute;
    z-index: 6;

    bottom: 65px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


.visual-order-number span {
    font-size: 9px;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.45);
}


.visual-order-number strong {
    margin-top: 6px;

    font-size: 15px;
    letter-spacing: 2px;

    color: #fff;
}


/* =====================================================
   FLOATING JEWELLERY
===================================================== */

.floating-order-jewel {
    position: absolute;
    z-index: 4;

    width: 78px;
    height: 78px;

    border-radius: 50%;

    overflow: hidden;

    border: 1px solid rgba(212,175,55,0.35);

    background: rgba(255,255,255,0.04);

    box-shadow:
        0 10px 35px rgba(0,0,0,0.45),
        0 0 20px rgba(212,175,55,0.10);
}


.floating-order-jewel img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


.jewel-one {
    top: 90px;
    left: 65px;

    animation: floatJewelOne 5s ease-in-out infinite;
}


.jewel-two {
    top: 75px;
    right: 55px;

    width: 90px;
    height: 90px;

    animation: floatJewelTwo 6s ease-in-out infinite;
}


.jewel-three {
    bottom: 105px;
    right: 80px;

    width: 68px;
    height: 68px;

    animation: floatJewelThree 5.5s ease-in-out infinite;
}


@keyframes floatJewelOne {

    0%,100% {
        transform: translateY(0) rotate(-8deg);
    }

    50% {
        transform: translateY(-18px) rotate(4deg);
    }

}


@keyframes floatJewelTwo {

    0%,100% {
        transform: translateY(0) rotate(8deg);
    }

    50% {
        transform: translateY(20px) rotate(-5deg);
    }

}


@keyframes floatJewelThree {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px) rotate(8deg);
    }

}


/* =====================================================
   SPARKLES
===================================================== */

.order-spark {
    position: absolute;
    z-index: 7;

    color: #d4af37;

    font-size: 18px;

    animation: sparkleFloat 2.5s ease-in-out infinite;
}


.sparkle-1 {
    top: 80px;
    left: 175px;
}

.sparkle-2 {
    top: 145px;
    right: 125px;
    animation-delay: .5s;
}

.sparkle-3 {
    bottom: 150px;
    left: 115px;
    animation-delay: 1s;
}

.sparkle-4 {
    bottom: 95px;
    right: 170px;
    animation-delay: 1.5s;
}

.sparkle-5 {
    top: 230px;
    left: 45px;
    animation-delay: .8s;
}


@keyframes sparkleFloat {

    0%,100% {
        opacity: .25;
        transform: scale(.7) rotate(0);
    }

    50% {
        opacity: 1;
        transform: scale(1.25) rotate(20deg);
    }

}


/* =====================================================
   GOLD PARTICLES
===================================================== */

.gold-particle {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #d4af37;

    opacity: .7;

    animation: particleFloat 4s ease-in-out infinite;
}


.particle-1 {
    top: 180px;
    left: 120px;
}

.particle-2 {
    top: 250px;
    right: 70px;
    animation-delay: .7s;
}

.particle-3 {
    bottom: 180px;
    left: 190px;
    animation-delay: 1.2s;
}

.particle-4 {
    bottom: 120px;
    right: 210px;
    animation-delay: 1.8s;
}

.particle-5 {
    top: 320px;
    left: 80px;
    animation-delay: 2.2s;
}

.particle-6 {
    top: 110px;
    right: 200px;
    animation-delay: 1.5s;
}


@keyframes particleFloat {

    0%,100% {
        transform: translateY(0) scale(.7);
        opacity: .25;
    }

    50% {
        transform: translateY(-20px) scale(1.3);
        opacity: 1;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .order-visual {
        width: 100%;
        height: 450px;
    }

    .orbit-a {
        width: 320px;
        height: 320px;
    }

    .orbit-b {
        width: 270px;
        height: 270px;
    }

    .orbit-c {
        width: 360px;
        height: 170px;
    }

    .confirmation-seal {
        width: 190px;
        height: 190px;
    }

    .floating-order-jewel {
        width: 58px;
        height: 58px;
    }

    .jewel-one {
        left: 25px;
        top: 75px;
    }

    .jewel-two {
        right: 25px;
        top: 65px;
    }

    .jewel-three {
        right: 35px;
        bottom: 80px;
    }

    .visual-order-number {
        bottom: 35px;
    }

}
/* =====================================================
   ORDER SUCCESS — CLASSIC BALLOON DESIGN
===================================================== */

.success-body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 15% 35%,
            rgba(218, 177, 105, .13),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 65%,
            rgba(170, 120, 90, .10),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #080807 0%,
            #17130e 48%,
            #090908 100%
        );

    color: #f5eee4;

    overflow-x: hidden;
}


/* =====================================================
   SUCCESS PAGE
===================================================== */

.success-page {
    position: relative;

    min-height: calc(100vh - 90px);

    padding: 75px 5% 100px;

    overflow: hidden;
}


.success-page::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .12;

    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,.35) 1px,
            transparent 1px
        );

    background-size: 42px 42px;
}


/* =====================================================
   LAYOUT
===================================================== */

.success-layout {

    position: relative;

    z-index: 5;

    max-width: 1450px;

    margin: auto;

    display: flex;

    align-items: center;

    gap: 55px;
}


/* =====================================================
   LEFT VISUAL
===================================================== */

.order-balloon-scene {

    position: relative;

    width: 52%;

    min-height: 650px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(218,177,105,.12),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(0,0,0,.38)
        );

    border: 1px solid rgba(218,177,105,.18);

    box-shadow:
        inset 0 0 90px rgba(0,0,0,.35),
        0 25px 70px rgba(0,0,0,.35);
}


/* =====================================================
   IMAGE
===================================================== */

.order-balloon-image {

    position: relative;

    z-index: 2;

    width: 100%;

    height: 100%;

    object-fit: cover;

    /*
       Generated image ka LEFT visual show hoga.
       Right-side text crop ho jayega.
    */

    object-position: left center;

    transform: scale(1.08);

    animation:
        childVisualFloat 5s ease-in-out infinite;

    filter:
        drop-shadow(
            0 20px 35px rgba(0,0,0,.35)
        );
}


@keyframes childVisualFloat {

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

    50% {
        transform:
            scale(1.08)
            translateY(-8px);
    }

}


/* =====================================================
   GLOW
===================================================== */

.scene-glow {

    position: absolute;

    z-index: 1;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(226,190,126,.20),
            rgba(226,190,126,.06) 45%,
            transparent 70%
        );

    filter: blur(12px);

    animation:
        balloonGlow 4s ease-in-out infinite;
}


@keyframes balloonGlow {

    0%,
    100% {
        transform: scale(.95);
        opacity: .6;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }

}


/* =====================================================
   SPARKLES
===================================================== */

.scene-sparkle {

    position: absolute;

    z-index: 4;

    color: #e5c47c;

    font-size: 22px;

    text-shadow:
        0 0 15px rgba(229,196,124,.8);

    animation:
        sparkleMove 3s ease-in-out infinite;
}


.sparkle-1 {
    top: 18%;
    left: 13%;
}


.sparkle-2 {
    top: 30%;
    right: 15%;
    animation-delay: .7s;
}


.sparkle-3 {
    bottom: 23%;
    left: 18%;
    animation-delay: 1.2s;
}


.sparkle-4 {
    bottom: 16%;
    right: 20%;
    animation-delay: 1.8s;
}


@keyframes sparkleMove {

    0%,
    100% {
        opacity: .3;
        transform:
            translateY(0)
            scale(.8);
    }

    50% {
        opacity: 1;
        transform:
            translateY(-12px)
            scale(1.15);
    }

}


/* =====================================================
   ORDER NUMBER
===================================================== */

.visual-order-number {

    position: absolute;

    z-index: 6;

    bottom: 28px;

    left: 50%;

    transform: translateX(-50%);

    min-width: 190px;

    padding: 12px 24px;

    text-align: center;

    border-radius: 50px;

    background:
        rgba(8,8,8,.72);

    backdrop-filter: blur(12px);

    border: 1px solid rgba(220,184,108,.35);

    box-shadow:
        0 10px 30px rgba(0,0,0,.35);
}


.visual-order-number span {

    display: block;

    font-size: 9px;

    letter-spacing: 3px;

    color: #bfae91;

    margin-bottom: 3px;
}


.visual-order-number strong {

    font-size: 17px;

    letter-spacing: 2px;

    color: #e4c27b;
}


/* =====================================================
   RIGHT CONTENT
===================================================== */

.success-content {

    flex: 1;

    padding: 25px 10px;
}


.success-eyebrow {

    color: #d9b873;

    font-size: 11px;

    letter-spacing: 3px;

    margin-bottom: 20px;
}


.success-content h1 {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        48px,
        5vw,
        76px
    );

    line-height: .98;

    font-weight: 400;

    margin: 0 0 25px;

    color: #f5eee4;
}


.success-content h1 span {

    color: #e1b978;

    text-shadow:
        0 0 25px rgba(225,185,120,.18);
}


.success-text {

    max-width: 560px;

    color: #bdb4a7;

    line-height: 1.8;

    font-size: 15px;

    margin-bottom: 35px;
}


.success-text strong {

    color: #f0d49a;
}


/* =====================================================
   DETAIL CARDS
===================================================== */

.success-details {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

    max-width: 620px;

    margin-bottom: 28px;
}


.success-detail-card {

    padding: 22px 18px;

    min-height: 95px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.015)
        );

    border: 1px solid rgba(220,184,108,.18);

    transition:
        transform .3s ease,
        border-color .3s ease;
}


.success-detail-card:hover {

    transform: translateY(-5px);

    border-color:
        rgba(220,184,108,.5);
}


.success-detail-card span {

    font-size: 9px;

    letter-spacing: 2px;

    color: #998e7c;

    margin-bottom: 8px;
}


.success-detail-card strong {

    color: #ead8b7;

    font-size: 14px;
}


.order-status {

    color: #dcb86e !important;

    text-transform: capitalize;
}


/* =====================================================
   ORDER PROGRESS
===================================================== */

.order-progress {

    max-width: 650px;

    display: flex;

    align-items: center;

    margin: 25px 0 35px;

    padding: 20px;

    border-radius: 18px;

    background:
        rgba(255,255,255,.035);

    border: 1px solid rgba(220,184,108,.15);
}


.progress-step {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    min-width: 75px;
}


.progress-icon {

    width: 38px;
    height: 38px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.22);

    color: #777;

    font-size: 15px;
}


.progress-step.active
.progress-icon {

    background:
        #d9b873;

    color: #17130e;

    border-color:
        #d9b873;

    box-shadow:
        0 0 20px rgba(217,184,115,.35);
}


.progress-step span {

    font-size: 8px;

    letter-spacing: 1px;

    color: #8f887c;

    white-space: nowrap;
}


.progress-step.active span {

    color: #d9b873;
}


.progress-line {

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(217,184,115,.6),
            rgba(255,255,255,.12)
        );

    margin: 0 4px 23px;
}


/* =====================================================
   BUTTONS
===================================================== */

.success-actions {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;
}


.success-main-btn {

    min-width: 210px;

    justify-content: center;
}


.success-home-btn {

    min-width: 150px;

    text-align: center;
}


/* =====================================================
   NOTE
===================================================== */

.success-note {

    margin-top: 25px;

    color: #847c70;

    font-size: 11px;

    letter-spacing: .5px;
}


/* =====================================================
   BACKGROUND PARTICLES
===================================================== */

.success-particle {

    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #dcb86e;

    box-shadow:
        0 0 12px #dcb86e;

    opacity: .5;

    animation:
        particleFloat 5s ease-in-out infinite;
}


.particle-a {
    top: 20%;
    left: 8%;
}

.particle-b {
    top: 35%;
    right: 10%;
    animation-delay: 1s;
}

.particle-c {
    bottom: 20%;
    left: 40%;
    animation-delay: 2s;
}

.particle-d {
    bottom: 30%;
    right: 30%;
    animation-delay: 3s;
}


@keyframes particleFloat {

    0%,
    100% {
        transform: translateY(0);
        opacity: .25;
    }

    50% {
        transform: translateY(-25px);
        opacity: .8;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 950px) {

    .success-layout {

        flex-direction: column;

        gap: 35px;
    }


    .order-balloon-scene {

        width: 100%;

        min-height: 560px;
    }


    .success-content {

        width: 100%;

        text-align: center;
    }


    .success-text {

        margin-left: auto;
        margin-right: auto;
    }


    .success-details {

        margin-left: auto;
        margin-right: auto;
    }


    .order-progress {

        margin-left: auto;
        margin-right: auto;
    }


    .success-actions {

        justify-content: center;
    }

}


@media (max-width: 600px) {

    .success-page {

        padding:
            40px 18px 70px;
    }


    .order-balloon-scene {

        min-height: 430px;

        border-radius: 20px;
    }


    .success-content h1 {

        font-size: 45px;
    }


    .success-details {

        grid-template-columns: 1fr;
    }


    .order-progress {

        padding: 12px 7px;

        overflow-x: auto;
    }


    .progress-step {

        min-width: 65px;
    }


    .progress-step span {

        font-size: 7px;
    }


}
/* =====================================================
   ORDER SUCCESS - BALLOON VISUAL
===================================================== */

.success-body {
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% 15%, rgba(210, 170, 95, 0.12), transparent 28%),
        radial-gradient(circle at 10% 70%, rgba(180, 120, 150, 0.08), transparent 30%),
        #0c0b0c;
}


/* Main success section */

.success-page {
    position: relative;
    min-height: auto;
    padding: 110px 7% 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}


/* =====================================================
   BALLOON IMAGE AREA
===================================================== */

.order-balloon-visual {
    position: relative;
    width: min(700px, 90vw);
    height: 470px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    isolation: isolate;
}


/* Soft glow behind image */

.balloon-glow {
    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(214, 175, 105, 0.18),
            rgba(214, 175, 105, 0.04) 45%,
            transparent 70%
        );

    filter: blur(15px);

    z-index: -1;

    animation: balloonGlow 4s ease-in-out infinite;
}


/* Actual picture */

.order-balloon-image {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    filter:
        drop-shadow(0 25px 35px rgba(0,0,0,0.35));

    animation: balloonFloat 5s ease-in-out infinite;
}


/* =====================================================
   SPARKLES
===================================================== */

.balloon-spark {
    position: absolute;

    font-size: 24px;

    color: #d8b56d;

    text-shadow:
        0 0 12px rgba(216,181,109,0.8),
        0 0 25px rgba(216,181,109,0.35);

    pointer-events: none;
}


.spark-one {
    top: 15%;
    left: 12%;

    animation: sparkleFloat 3s ease-in-out infinite;
}


.spark-two {
    top: 28%;
    right: 13%;

    animation: sparkleFloat 4s ease-in-out infinite 0.5s;
}


.spark-three {
    bottom: 18%;
    left: 18%;

    animation: sparkleFloat 3.5s ease-in-out infinite 1s;
}


.spark-four {
    bottom: 25%;
    right: 18%;

    animation: sparkleFloat 4.5s ease-in-out infinite 0.8s;
}


/* =====================================================
   SUCCESS CONTENT
===================================================== */

.success-content {
    position: relative;

    width: min(900px, 94vw);

    margin: 0 auto;

    text-align: center;
}


.success-eyebrow {
    margin-bottom: 20px;

    font-size: 12px;

    letter-spacing: 4px;

    color: #cdb17a;

    font-weight: 600;
}


.success-content h1 {
    margin: 0;

    font-family: Georgia, serif;

    font-size: clamp(42px, 6vw, 76px);

    line-height: 0.98;

    font-weight: 400;

    color: #f5eee3;
}


.success-content h1 span {
    color: #c9a45d;

    font-style: italic;
}


.success-text {
    max-width: 620px;

    margin: 30px auto 42px;

    color: rgba(245,238,227,0.68);

    font-size: 16px;

    line-height: 1.8;
}


.success-text strong {
    color: #e1c27f;
}


/* =====================================================
   ORDER DETAILS
===================================================== */

.success-details {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

    margin: 0 auto 38px;
}


.success-detail-card {
    padding: 25px 18px;

    border: 1px solid rgba(201,164,93,0.22);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.015)
        );

    backdrop-filter: blur(12px);

    border-radius: 18px;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.success-detail-card:hover {
    transform: translateY(-6px);

    border-color: rgba(201,164,93,0.55);

    box-shadow:
        0 15px 40px rgba(0,0,0,0.25),
        0 0 25px rgba(201,164,93,0.08);
}


.success-detail-card span {
    display: block;

    margin-bottom: 10px;

    font-size: 10px;

    letter-spacing: 3px;

    color: rgba(245,238,227,0.45);
}


.success-detail-card strong {
    color: #e8d6b3;

    font-size: 15px;
}


/* =====================================================
   BUTTONS
===================================================== */

.success-actions {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

    margin-bottom: 30px;
}


.success-main-btn {
    min-width: 220px;
}


.success-home-btn {
    min-width: 160px;
}


.success-note {
    margin-top: 8px;

    color: rgba(245,238,227,0.4);

    font-size: 12px;

    letter-spacing: 1px;
}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes balloonFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

}


@keyframes balloonGlow {

    0%,
    100% {
        transform: scale(0.95);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }

}


@keyframes sparkleFloat {

    0%,
    100% {
        transform: translateY(0) scale(0.8);
        opacity: 0.35;
    }

    50% {
        transform: translateY(-15px) scale(1.2);
        opacity: 1;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .success-page {
        padding: 80px 5% 70px;
    }

    .order-balloon-visual {
        width: 100%;
        height: 350px;
    }

    .success-details {
        grid-template-columns: 1fr;
    }

    .success-content h1 {
        font-size: 46px;
    }

    .balloon-spark {
        font-size: 18px;
    }

}
/* =====================================================
   ORDER SUCCESS PAGE
===================================================== */

.success-body {

    position: relative;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(201,164,93,0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(160,100,140,0.08),
            transparent 30%
        ),
        #0c0b0c;
}


/* =====================================================
   SUCCESS PAGE LAYOUT
===================================================== */

.success-page {

    position: relative;

    min-height: 720px;

    padding: 90px 7% 100px;

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    align-items: center;

    gap: 70px;

    max-width: 1450px;

    margin: auto;
}


/* =====================================================
   LEFT BALLOON AREA
===================================================== */

.order-balloon-side {

    position: relative;

    width: 100%;

    height: 540px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: visible;

}


/* Luxury glow */

.balloon-glow {

    position: absolute;

    width: 390px;

    height: 390px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(210,174,105,0.20),
            rgba(210,174,105,0.06) 45%,
            transparent 72%
        );

    filter: blur(18px);

    animation:
        balloonGlow 4s ease-in-out infinite;

    z-index: 0;
}


/* =====================================================
   BALLOON IMAGE
===================================================== */

.order-balloon-image {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 560px;

    height: 100%;

    object-fit: contain;

    display: block;

    filter:
        drop-shadow(
            0 30px 35px rgba(0,0,0,0.45)
        );

    animation:
        balloonFloat 5s ease-in-out infinite;
}


/* =====================================================
   SPARKLES
===================================================== */

.balloon-spark {

    position: absolute;

    z-index: 4;

    color: #d8b56d;

    font-size: 25px;

    text-shadow:
        0 0 10px rgba(216,181,109,0.9),
        0 0 25px rgba(216,181,109,0.4);

    pointer-events: none;

    animation:
        sparkleFloat 3.5s ease-in-out infinite;
}


.spark-one {

    top: 17%;

    left: 8%;
}


.spark-two {

    top: 30%;

    right: 7%;

    animation-delay: 0.8s;
}


.spark-three {

    bottom: 18%;

    left: 17%;

    animation-delay: 1.4s;
}


/* =====================================================
   RIGHT SUCCESS CONTENT
===================================================== */

.success-content {

    position: relative;

    width: 100%;

    text-align: left;

    z-index: 5;
}


.success-eyebrow {

    margin-bottom: 20px;

    font-size: 11px;

    letter-spacing: 4px;

    color: #cdb17a;

    font-weight: 600;
}


.success-content h1 {

    margin: 0;

    font-family: Georgia, serif;

    font-size: clamp(44px, 5vw, 72px);

    line-height: 0.98;

    font-weight: 400;

    color: #f5eee3;
}


.success-content h1 span {

    color: #c9a45d;

    font-style: italic;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.success-text {

    max-width: 600px;

    margin: 28px 0 38px;

    color:
        rgba(245,238,227,0.68);

    font-size: 16px;

    line-height: 1.8;
}


.success-text strong {

    color: #e1c27f;
}


/* =====================================================
   ORDER DETAILS
===================================================== */

.success-details {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;

    margin-bottom: 32px;
}


.success-detail-card {

    padding: 22px 16px;

    border:

        1px solid
        rgba(201,164,93,0.22);

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.012)
        );

    backdrop-filter: blur(12px);

    border-radius: 17px;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.success-detail-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(201,164,93,0.55);

    box-shadow:

        0 15px 35px
        rgba(0,0,0,0.25),

        0 0 25px
        rgba(201,164,93,0.08);
}


.success-detail-card span {

    display: block;

    margin-bottom: 9px;

    font-size: 9px;

    letter-spacing: 3px;

    color:
        rgba(245,238,227,0.42);
}


.success-detail-card strong {

    color: #e8d6b3;

    font-size: 14px;
}


/* =====================================================
   BUTTONS
===================================================== */

.success-actions {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

    margin-bottom: 25px;
}


.success-main-btn {

    min-width: 215px;
}


.success-home-btn {

    min-width: 145px;
}


.success-note {

    margin-top: 8px;

    color:
        rgba(245,238,227,0.38);

    font-size: 11px;

    letter-spacing: 1px;
}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes balloonFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {

        transform:
            translateY(-13px)
            rotate(1deg);
    }
}


@keyframes balloonGlow {

    0%,
    100% {

        transform:
            scale(0.95);

        opacity: 0.6;
    }

    50% {

        transform:
            scale(1.08);

        opacity: 1;
    }
}


@keyframes sparkleFloat {

    0%,
    100% {

        transform:
            translateY(0)
            scale(0.8);

        opacity: 0.35;
    }

    50% {

        transform:
            translateY(-15px)
            scale(1.2);

        opacity: 1;
    }
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 950px) {

    .success-page {

        grid-template-columns: 1fr;

        gap: 20px;

        padding:
            70px 6% 80px;

        text-align: center;
    }


    .order-balloon-side {

        height: 430px;
    }


    .success-content {

        text-align: center;
    }


    .success-text {

        margin-left: auto;

        margin-right: auto;
    }


    .success-actions {

        justify-content: center;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .success-page {

        padding:
            60px 5% 70px;
    }


    .order-balloon-side {

        height: 330px;
    }


    .balloon-glow {

        width: 270px;

        height: 270px;
    }


    .success-content h1 {

        font-size: 45px;
    }


    .success-details {

        grid-template-columns: 1fr;
    }


    .success-eyebrow {

        font-size: 9px;

        letter-spacing: 2.5px;
    }


    .success-text {

        font-size: 14px;
    }

}
/* =====================================================
   FOOTER REVIEWS
===================================================== */

.modern-footer {
    text-align: center;
}

.modern-footer .footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    margin: 25px 0;
}

.modern-footer .footer-links a {
    text-decoration: none;
    transition: 0.3s ease;
}

.modern-footer .footer-links a:hover {
    opacity: 0.7;
}

.footer-review {
    margin: 25px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.footer-stars {
    letter-spacing: 4px;
    font-size: 18px;
}

.footer-review a {
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
}

.footer-review small {
    opacity: 0.7;
}


/* =====================================================
   COLLECTION CUSTOMER REVIEWS
===================================================== */

.collection-reviews {
    padding: 90px 7%;
    text-align: center;
}

.written-reviews {
    max-width: 1150px;
    margin: 45px auto 0;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.written-review {
    padding: 32px 35px;
    border: 1px solid rgba(180, 150, 80, 0.35);
    background: rgba(255, 255, 255, 0.03);
    text-align: left;

    transition: all 0.35s ease;
}

.written-review:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.review-stars {
    font-size: 17px;
    letter-spacing: 4px;
    margin-bottom: 18px;
}

.written-review p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.written-review strong {
    display: block;
    font-size: 15px;
}

.written-review small {
    display: block;
    margin-top: 5px;
    opacity: 0.65;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .modern-footer .footer-links {
        flex-direction: column;
        gap: 14px;
    }

    .written-reviews {
        grid-template-columns: 1fr;
    }

    .written-review {
        padding: 25px;
    }

}
/* =========================================
   MODREN FASHION — LUXURY SHOP FOOTER
========================================= */

.modern-footer {
    position: relative;
    margin-top: 100px;
    padding: 70px 7% 25px;
    background:
        radial-gradient(circle at 15% 20%, rgba(180, 55, 100, 0.10), transparent 30%),
        radial-gradient(circle at 85% 80%, rgba(255, 190, 210, 0.06), transparent 30%),
        #08080b;
    border-top: 1px solid rgba(220, 100, 145, 0.35);
    overflow: hidden;
}


/* subtle decorative line */

.modern-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 7%;
    right: 7%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(210, 80, 125, 0.8),
        transparent
    );
}


/* =========================================
   FOOTER TOP
========================================= */

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 45px;
    max-width: 1500px;
    margin: auto;
}


/* =========================================
   BRAND
========================================= */

.footer-brand {
    padding-right: 30px;
}

.footer-mf {
    width: 58px;
    height: 58px;
    border: 1px solid rgba(230, 100, 150, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, serif;
    font-size: 20px;
    letter-spacing: 2px;
    color: #f2a2bd;
    margin-bottom: 20px;
    transition: 0.4s ease;
}

.footer-mf:hover {
    transform: rotate(360deg);
    box-shadow: 0 0 25px rgba(220, 80, 135, 0.25);
}

.footer-brand h3 {
    margin: 0;
    font-size: 17px;
    letter-spacing: 4px;
    color: #f4f1ed;
}

.footer-brand > p {
    margin-top: 10px;
    color: #999;
    font-size: 13px;
    letter-spacing: 1.5px;
}


/* =========================================
   RATING
========================================= */

.footer-rating {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-rating span {
    color: #e98aaa;
    letter-spacing: 5px;
    font-size: 15px;
}

.footer-rating small {
    color: #777;
    font-size: 11px;
    letter-spacing: 1px;
}


/* =========================================
   FOOTER COLUMNS
========================================= */

.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-column h4 {
    margin: 0 0 22px;
    font-size: 11px;
    letter-spacing: 3px;
    color: #e98aaa;
}

.footer-column a {
    position: relative;
    width: fit-content;
    margin-bottom: 13px;
    color: #999;
    text-decoration: none;
    font-size: 13px;
    transition: 0.3s ease;
}

.footer-column a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 1px;
    background: #e98aaa;
    transition: 0.3s ease;
}

.footer-column a:hover {
    color: #f3c0d0;
    transform: translateX(4px);
}

.footer-column a:hover::after {
    width: 100%;
}


/* =========================================
   REVIEW AREA
========================================= */

.footer-review {
    max-width: 1500px;
    margin: 55px auto 0;
    padding: 24px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.review-stars {
    color: #e98aaa;
    letter-spacing: 4px;
    margin-right: 15px;
}

.footer-review strong {
    color: #eee;
    font-size: 12px;
    letter-spacing: 2px;
}

.footer-review p {
    margin: 7px 0 0;
    color: #777;
    font-size: 12px;
}

.footer-review-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 13px 20px;
    border: 1px solid rgba(233,138,170,0.6);
    color: #f0a4bd;
    text-decoration: none;
    font-size: 10px;
    letter-spacing: 2px;
    transition: 0.35s ease;
}

.footer-review-btn span {
    font-size: 16px;
}

.footer-review-btn:hover {
    background: #e98aaa;
    color: #08080b;
    transform: translateY(-3px);
}


/* =========================================
   BOTTOM
========================================= */

.footer-bottom {
    max-width: 1500px;
    margin: 25px auto 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    color: #666;
    font-size: 10px;
    letter-spacing: 1px;
}

.footer-bottom-links {
    display: flex;
    gap: 22px;
}

.footer-bottom-links a {
    color: #777;
    text-decoration: none;
    transition: 0.3s;
}

.footer-bottom-links a:hover {
    color: #e98aaa;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {

    .footer-top {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 25px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-review {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

}


@media (max-width: 550px) {

    .modern-footer {
        padding: 55px 25px 20px;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-bottom-links {
        flex-wrap: wrap;
        justify-content: center;
    }

}
/* =====================================================
   COLLECTION FINAL IMAGE
===================================================== */

.collection-final-image {
    padding: 90px 8%;
    background: #080808;
}

.collection-final-wrap {
    height: 520px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(212,175,106,0.25);
    background: #111;
}

.collection-final-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 1.2s ease;
}

.collection-final-wrap:hover img {
    transform: scale(1.05);
}

.collection-final-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(8,8,8,0.88),
            rgba(8,8,8,0.35),
            rgba(8,8,8,0.15)
        );
}

.collection-final-text {
    position: absolute;
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.collection-final-text p {
    color: var(--gold);
    font-size: 10px;
    letter-spacing: 5px;
    margin-bottom: 18px;
}

.collection-final-text h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(45px, 6vw, 78px);
    line-height: 0.95;
    font-weight: 400;
    color: var(--cream);
}

.collection-final-text h2 span {
    color: var(--gold);
    font-style: italic;
}


/* MOBILE */

@media (max-width: 650px) {

    .collection-final-image {
        padding: 60px 5%;
    }

    .collection-final-wrap {
        height: 420px;
    }

    .collection-final-text {
        left: 7%;
    }

    .collection-final-text h2 {
        font-size: 48px;
    }

}
/* =====================================================
   LIVE ORDER TRACKER
===================================================== */

.live-order-result {

    margin-top: 35px;

    padding: 30px;

    background: rgba(17,17,17,.88);

    border: 1px solid rgba(255,255,255,.15);

    border-radius: 14px;

    backdrop-filter: blur(10px);

    color: #fff;

}


/* HEADER */

.live-order-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding-bottom: 22px;

    border-bottom: 1px solid rgba(255,255,255,.12);

}


.live-order-header span {

    display: block;

    color: #888;

    font-size: 10px;

    letter-spacing: 2px;

    margin-bottom: 7px;

}


.live-order-header h3 {

    margin: 0;

    font-family: Georgia, serif;

    font-size: 27px;

    font-weight: normal;

}


/* STATUS */

.live-status {

    padding: 9px 15px;

    border-radius: 30px;

    background: #162c22;

    color: #9fe0b5;

    font-size: 10px;

    letter-spacing: 1px;

    text-transform: uppercase;

}


/* DETAILS */

.live-order-details {

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 15px;

    margin: 25px 0;

}


.live-order-details > div {

    background: #080808;

    border: 1px solid #242424;

    padding: 17px;

    border-radius: 8px;

}


.live-order-details span {

    display: block;

    color: #777;

    font-size: 9px;

    letter-spacing: 1px;

    margin-bottom: 8px;

}


.live-order-details strong {

    font-size: 13px;

    color: #ddd;

}


/* TRACKING */

.live-tracking-box {

    background: #080808;

    border: 1px solid #333;

    border-radius: 8px;

    padding: 18px;

    margin-bottom: 35px;

}


.live-tracking-box span {

    display: block;

    color: #777;

    font-size: 9px;

    letter-spacing: 1px;

    margin-bottom: 8px;

}


.live-tracking-box strong {

    font-size: 17px;

    letter-spacing: 1px;

    word-break: break-all;

}


/* PROGRESS */

.live-progress {

    display: flex;

    justify-content: space-between;

    position: relative;

    padding-top: 5px;

}


.live-progress-line {

    position: absolute;

    top: 19px;

    left: 30px;

    right: 30px;

    height: 2px;

    background: #292929;

}


.live-progress-step {

    position: relative;

    z-index: 2;

    width: 16.66%;

    text-align: center;

}


.live-progress-circle {

    width: 30px;

    height: 30px;

    margin: auto;

    border-radius: 50%;

    background: #181818;

    border: 1px solid #444;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    transition: .3s;

}


.live-progress-step span {

    display: block;

    margin-top: 9px;

    color: #777;

    font-size: 8px;

    line-height: 1.3;

}


/* ACTIVE */

.live-progress-step.active .live-progress-circle {

    background: #fff;

    color: #000;

    border-color: #fff;

}


.live-progress-step.active span {

    color: #fff;

}


/* ERROR */

.tracking-error-message {

    margin-top: 15px;

    padding: 13px;

    background: #351515;

    border: 1px solid #5c2929;

    color: #ffb0b0;

    border-radius: 7px;

    font-size: 12px;

}


/* MOBILE */

@media(max-width:700px) {

    .live-order-header {

        flex-direction: column;

        align-items: flex-start;

    }


    .live-order-details {

        grid-template-columns: 1fr;

    }


    .live-progress {

        overflow-x: auto;

        justify-content: flex-start;

        gap: 20px;

        padding-bottom: 15px;

    }


    .live-progress-step {

        min-width: 85px;

    }


    .live-progress-line {

        display: none;

    }

}

/* =====================================================
   MOBILE NAV TOGGLE (HAMBURGER)
===================================================== */
.nav-toggle{
    display:none;
    background:none;
    border:1px solid var(--line);
    width:42px;
    height:42px;
    border-radius:50%;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    order:5;
    flex-shrink:0;
    padding:0;
}
.nav-toggle span{
    display:block;
    width:18px;
    height:2px;
    background:var(--cream);
    position:relative;
    transition:.3s ease;
}
.nav-toggle span::before,
.nav-toggle span::after{
    content:"";
    position:absolute;
    left:0;
    width:18px;
    height:2px;
    background:var(--cream);
    transition:.3s ease;
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }
.navbar.nav-open .nav-toggle span{ background:transparent; }
.navbar.nav-open .nav-toggle span::before{ transform:translateY(6px) rotate(45deg); }
.navbar.nav-open .nav-toggle span::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:650px){
    .nav-toggle{ display:flex; }
    .navbar nav{
        display:none;
        position:fixed;
        top:84px;
        left:0;
        right:0;
        flex-direction:column;
        gap:0;
        background:rgba(6,6,6,.98);
        backdrop-filter:blur(15px);
        border-bottom:1px solid var(--line);
        max-height:calc(100vh - 84px);
        overflow-y:auto;
        padding:10px 6% 20px;
        z-index:999;
    }
    .navbar.nav-open nav{ display:flex; }
    .navbar nav a{
        width:100%;
        padding:16px 0;
        border-bottom:1px solid rgba(212,175,106,.12);
    }
    .navbar nav a::after{ display:none; }
}

body.nav-locked{ overflow:hidden; }


/* =====================================================
   CART SIDE DRAWER
===================================================== */
.cart-drawer-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    opacity:0;
    pointer-events:none;
    transition:opacity .35s ease;
    z-index:2000;
}
.cart-drawer-overlay.open{
    opacity:1;
    pointer-events:auto;
}
.cart-drawer{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:min(420px,92%);
    background:#0b0b0b;
    border-left:1px solid var(--line);
    box-shadow:-20px 0 60px rgba(0,0,0,.6);
    transform:translateX(100%);
    transition:transform .35s ease;
    z-index:2001;
    display:flex;
    flex-direction:column;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-drawer-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 25px;
    border-bottom:1px solid var(--line);
}
.cart-drawer-header h3{
    font-family:'Cormorant Garamond',serif;
    font-size:28px;
    color:var(--cream);
    font-weight:400;
}
.cart-drawer-header button{
    background:none;
    border:0;
    color:var(--cream);
    font-size:26px;
    line-height:1;
    cursor:pointer;
}
.cart-drawer-body{
    flex:1;
    overflow-y:auto;
    padding:20px 25px;
}
.cart-drawer-empty{
    color:var(--muted);
    text-align:center;
    padding:60px 10px;
    font-size:13px;
}
.cart-drawer-item{
    display:grid;
    grid-template-columns:70px 1fr auto;
    gap:14px;
    align-items:center;
    padding:16px 0;
    border-bottom:1px solid rgba(212,175,106,.1);
}
.cart-drawer-item img{
    width:70px;
    height:70px;
    object-fit:cover;
    background:#111;
}
.cart-drawer-item-info h4{
    font-size:13px;
    color:var(--cream);
    margin-bottom:4px;
    font-weight:500;
}
.cart-drawer-item-info span{
    display:block;
    color:var(--muted);
    font-size:10.5px;
    margin-top:2px;
}
.cart-drawer-item-info .price{
    color:var(--gold-light);
    margin-top:6px;
    font-size:12px;
}
.cart-drawer-qty{
    display:flex;
    align-items:center;
    border:1px solid var(--line);
    height:30px;
    width:90px;
    margin-top:8px;
}
.cart-drawer-qty button{
    width:28px;
    height:28px;
    background:#111;
    border:0;
    color:#fff;
    cursor:pointer;
    font-size:14px;
}
.cart-drawer-qty span{
    flex:1;
    text-align:center;
    color:#fff;
    font-size:12px;
}
.cart-drawer-remove{
    color:var(--muted);
    font-size:9px;
    letter-spacing:1.5px;
    cursor:pointer;
    background:none;
    border:0;
    text-decoration:underline;
    white-space:nowrap;
}
.cart-drawer-footer{
    border-top:1px solid var(--line);
    padding:20px 25px 25px;
}
.cart-drawer-subtotal{
    display:flex;
    justify-content:space-between;
    color:var(--cream);
    font-size:15px;
    margin-bottom:16px;
}
.cart-drawer-footer .main-btn{
    width:100%;
    justify-content:center;
    text-align:center;
    display:flex;
    margin-bottom:10px;
    cursor:pointer;
}
.cart-drawer-whatsapp{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    background:#25D366;
    color:#fff;
    border:0;
    padding:14px;
    font-size:12px;
    letter-spacing:1.5px;
    cursor:pointer;
    text-decoration:none;
    text-align:center;
}
.cart-drawer-viewcart{
    display:block;
    text-align:center;
    color:var(--muted);
    font-size:11px;
    letter-spacing:1.5px;
    margin-top:14px;
    text-decoration:underline;
}


/* =====================================================
   ADD TO CART / BUY NOW ACTIONS
===================================================== */
.product-actions{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:15px;
}
.btn-outline-gold{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:16px;
    background:transparent;
    border:1px solid var(--gold);
    color:var(--gold-light);
    letter-spacing:2px;
    font-size:11px;
    cursor:pointer;
    text-transform:uppercase;
}
.btn-whatsapp{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:15px;
    background:#25D366;
    color:#fff;
    border:0;
    letter-spacing:1.5px;
    font-size:11px;
    text-transform:uppercase;
    text-decoration:none;
    cursor:pointer;
}

.shop-card-actions{
    display:flex;
    gap:8px;
    margin-top:10px;
}
.shop-card-actions button{
    flex:1;
    padding:11px 6px;
    font-size:9.5px;
    letter-spacing:1px;
    text-transform:uppercase;
    border:1px solid var(--line);
    background:#111;
    color:var(--cream);
    cursor:pointer;
}
.shop-card-actions button.buy-now-btn{
    background:var(--gold);
    color:#111;
    border-color:var(--gold);
}

.cart-page-actions{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:20px;
}
.cart-page-actions .main-btn{
    display:flex;
    justify-content:center;
    text-align:center;
}

.checkout-payment-box{
    border:1px solid var(--line);
    background:#111;
    padding:18px;
    margin:20px 0;
}
.checkout-payment-box h4{
    color:var(--cream);
    font-size:12px;
    letter-spacing:1.5px;
    margin-bottom:10px;
    text-transform:uppercase;
}
.checkout-payment-box label{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--cream);
    font-size:13px;
    cursor:pointer;
}
.checkout-payment-box .cod-note{
    color:var(--muted);
    font-size:11px;
    margin-top:8px;
    line-height:1.6;
    padding-left:24px;
}
.checkout-shipping-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border:1px solid var(--gold);
    background:rgba(212,175,106,.06);
    padding:16px 18px;
    margin:20px 0;
    color:var(--cream);
    font-size:13px;
}

/* Cart icon badge */
.nav-icons a.cart-icon-btn{ position:relative; cursor:pointer; }
.cart-count-badge{
    position:absolute;
    top:-6px;
    right:-6px;
    background:var(--gold);
    color:#111;
    font-size:9px;
    font-weight:700;
    width:16px;
    height:16px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}


/* =====================================================
   SEARCH SIDE DRAWER
===================================================== */
.search-drawer{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:min(420px,92%);
    background:#0b0b0b;
    border-left:1px solid var(--line);
    box-shadow:-20px 0 60px rgba(0,0,0,.6);
    transform:translateX(100%);
    transition:transform .35s ease;
    z-index:2001;
    display:flex;
    flex-direction:column;
}
.search-drawer.open{transform:translateX(0)}
.search-drawer-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 25px;
    border-bottom:1px solid var(--line);
}
.search-drawer-header h3{
    font-family:'Cormorant Garamond',serif;
    font-size:28px;
    color:var(--cream);
    font-weight:400;
}
.search-drawer-header button{
    background:none;
    border:0;
    color:var(--cream);
    font-size:28px;
    cursor:pointer;
}
.search-drawer-body{padding:28px 25px;overflow-y:auto}
.search-drawer-form{display:flex;border:1px solid var(--line);margin-bottom:30px}
.search-drawer-form input{
    flex:1;padding:16px;background:#111;border:0;outline:0;color:var(--cream);font-family:inherit;font-size:13px
}
.search-drawer-form button{width:55px;background:var(--gold);color:#080808;border:0;cursor:pointer;font-size:16px}
.search-drawer-title{font-size:9px;letter-spacing:3px;color:var(--gold);margin-bottom:15px;text-transform:uppercase}
.search-drawer-links{display:grid;gap:0}
.search-drawer-links a{padding:15px 0;border-bottom:1px solid rgba(212,175,106,.12);color:var(--cream);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}
@media(max-width:650px){
    .cart-drawer,.search-drawer{width:min(92%,390px)}
}
/* =====================================================
   SHOP BY CATEGORY — FINAL HORIZONTAL CAROUSEL
   Desktop + Mobile / autoplay / infinite loop / swipe
===================================================== */

.home-category-slider{
    width:100%;
    padding:90px 0;
    background:#080808;
    overflow:hidden;
}

.category-slider-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    max-width:1400px;
    margin:0 auto 40px;
    padding:0 60px;
}

.category-slider-heading p{
    font-size:11px;
    letter-spacing:3px;
    color:var(--gold-light);
    text-transform:uppercase;
    margin-bottom:8px;
}

.category-slider-heading h2{
    font-family:'Cormorant Garamond',serif;
    font-size:52px;
    font-weight:400;
    color:#fff;
}

.category-slider-heading h2 span{
    color:var(--gold-light);
    font-style:italic;
}

.category-slider-arrows{
    display:flex;
    gap:12px;
}

.category-slider-arrows button{
    width:46px;
    height:46px;
    border-radius:50%;
    border:1px solid rgba(212,175,106,.45);
    background:#0b0b0b;
    color:#f5f0e8;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:18px;
}

.category-slider-viewport{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:0 60px;
    overflow:hidden;
    box-sizing:border-box;
}

.category-slider-track{
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:24px;
    width:max-content;
    transform:translate3d(0,0,0);
    will-change:transform;
}

.home-category-card{
    position:relative;
    flex:0 0 31%;
    width:31%;
    min-width:0;
    text-decoration:none;
    color:#fff;
    display:block;
    transform:scale(.90);
    filter:brightness(.55);
    transition:transform .65s ease, filter .65s ease;
}

.home-category-card.category-active{
    transform:scale(1);
    filter:brightness(1);
}

.home-category-image{
    position:relative;
    width:100%;
    height:390px;
    overflow:hidden;
    background:#111;
    border:1px solid rgba(212,175,106,.25);
}

.home-category-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    filter:none !important;
    opacity:1 !important;
    transition:transform .6s ease;
}

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

.home-category-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.75) 100%);
    pointer-events:none;
}

.category-number{
    position:absolute;
    top:16px;
    left:16px;
    color:#fff;
    font-family:'Cormorant Garamond',serif;
    font-size:15px;
    letter-spacing:2px;
}

.category-arrow{
    position:absolute;
    top:16px;
    right:16px;
    color:#fff;
    font-size:17px;
}

.home-category-info{
    padding:18px 4px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.home-category-info h3{
    font-family:'Cormorant Garamond',serif;
    font-size:25px;
    font-weight:400;
    color:#fff;
}

.home-category-info span{
    flex-shrink:0;
    font-size:10px;
    letter-spacing:2px;
    color:#999;
}

/* Never show the infinite-loop clones as a separate row */
.category-clone{
    pointer-events:auto;
}

@media(max-width:900px){
    .category-slider-heading{
        padding:0 30px;
    }

    .category-slider-viewport{
        padding:0 30px;
    }

    .home-category-card{
        flex:0 0 47%;
        width:47%;
    }
}

@media(max-width:700px){
    .home-category-slider{
        padding:60px 0;
    }

    .category-slider-heading{
        padding:0 20px;
        margin-bottom:28px;
        align-items:flex-start;
    }

    .category-slider-heading h2{
        font-size:34px;
    }

    .category-slider-arrows{
        display:none;
    }

    .category-slider-viewport{
        padding:0 20px;
    }

    .category-slider-track{
        gap:14px;
    }

    /* Same horizontal carousel on phone */
    .home-category-card{
        flex:0 0 82vw;
        width:82vw;
        max-width:82vw;
        transform:scale(.92);
    }

    .home-category-card.category-active{
        transform:scale(1);
    }

    .home-category-image{
        height:390px;
    }

    .home-category-info{
        padding:16px 2px;
    }

    .home-category-info h3{
        font-size:23px;
    }
}

@media(max-width:420px){
    .home-category-card{
        flex-basis:84vw;
        width:84vw;
        max-width:84vw;
    }

    .home-category-image{
        height:340px;
    }
}


/* =====================================================
   CART DRAWER — FORCE HIDDEN UNTIL OPENED
===================================================== */

.cart-drawer-overlay{
    visibility:hidden;
}

.cart-drawer-overlay.open{
    visibility:visible;
}

.cart-drawer{
    visibility:hidden;
    opacity:0;
    transform:translate3d(100%,0,0) !important;
}

.cart-drawer.open{
    visibility:visible;
    opacity:1;
    transform:translate3d(0,0,0) !important;
}

.cart-drawer:not(.open){
    pointer-events:none;
}

.cart-drawer.open{
    pointer-events:auto;
}


/* Search drawer must also stay hidden */
.search-drawer{
    visibility:hidden;
    opacity:0;
    transform:translate3d(100%,0,0) !important;
}

.search-drawer.open{
    visibility:visible;
    opacity:1;
    transform:translate3d(0,0,0) !important;
}