/* =========================================================
   MEENAKSHI ENTERPRISES
   PREMIUM WOOD + WARM IVORY THEME
   ========================================================= */

:root {
    --purple: #B45309;
    --purple-dark: #8F3F08;
    --purple-deep: #3E2723;
    --purple-light: #C08B5C;

    --pink: #C08B5C;
    --pink-dark: #8F6A46;
    --pink-light: #D8B895;

    --gold: #B45309;
    --gold-light: #D6A56F;

    --cream: #F4EEE6;
    --ivory: #FFFFFF;

    --brown: #3E2723;
    --white: #FFFFFF;

    --border-light: rgba(62, 39, 35, 0.14);
    --shadow-purple: rgba(62, 39, 35, 0.18);
    --shadow-pink: rgba(180, 83, 9, 0.18);
}


/* =========================================================
   GLOBAL
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Georgia, "Times New Roman", serif;

    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(192, 139, 92, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 30%,
            rgba(216, 184, 149, 0.10),
            transparent 25%
        ),
        var(--cream);

    color: var(--brown);
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
}

img {
    max-width: 100%;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: relative;
    z-index: 1000;

    color: var(--white);

    background:
        linear-gradient(
            110deg,
            var(--purple-deep),
            var(--purple-dark),
            var(--purple)
        );

    border-bottom: 2px solid var(--gold-light);

    box-shadow:
        0 8px 30px rgba(62, 39, 35, 0.28);

    animation: headerDrop 0.8s ease both;
}

.site-header::before {
    content: "";

    position: absolute;
    top: 0;
    left: -30%;

    width: 30%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.20),
            transparent
        );

    transform: skewX(-25deg);

    animation: headerShine 5s linear infinite;

    pointer-events: none;
}


/* =========================================================
   HEADER MAIN
========================================================= */

.header-main {
    min-height: 70px;

    display: flex;
    align-items: center;

    position: relative;

    background:
        linear-gradient(
            100deg,
            var(--purple-deep),
            var(--purple),
            var(--purple-light)
        );
}

.header-main::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold-light),
            var(--white),
            var(--gold-light),
            transparent
        );

    animation: shineLine 4s linear infinite;
}


/* =========================================================
   HEADER CONTAINER
========================================================= */

.header-container {
    max-width: 1200px;
    width: 100%;

    margin: auto;
    padding: 10px 25px;

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

    gap: 25px;
}


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

.brand-logo {
    display: flex;
    align-items: center;

    gap: 10px;

    text-decoration: none;
    color: var(--white);

    transition: 0.35s ease;

    position: relative;
    z-index: 2;
}

.brand-logo:hover {
    color: var(--white);

    transform:
        translateY(-2px)
        scale(1.03);
}

.brand-symbol {
    width: 44px;
    height: 44px;

    border-radius: 50%;

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

    background:
        linear-gradient(
            135deg,
            var(--purple-light),
            var(--gold-light)
        );

    color: var(--purple-deep);

    box-shadow:
        0 0 0 3px rgba(214, 165, 111, 0.25),
        0 0 22px rgba(214, 165, 111, 0.40);

    animation: logoGlow 3s ease-in-out infinite;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-text strong {
    color: var(--white);

    font-size: 18px;
    letter-spacing: 2px;
}

.brand-text small {
    color: var(--white);

    font-size: 10px;
    letter-spacing: 3px;
}


/* =========================================================
   SEARCH
========================================================= */

.header-search {
    flex: 1;
    max-width: 430px;

    margin: 0 auto;
}

.header-search form {
    position: relative;
}

.header-search input {
    width: 100%;
    height: 42px;

    padding: 0 58px 0 20px;

    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;

    outline: none;

    background: var(--ivory);
    color: var(--purple-deep);

    font-size: 13px;

    box-shadow:
        0 8px 25px rgba(62, 39, 35, 0.20);

    transition: 0.35s ease;
}

.header-search input::placeholder {
    color: var(--purple-deep);
    opacity: 0.55;
}

.header-search input:focus {
    border-color: var(--gold-light);

    box-shadow:
        0 0 0 4px rgba(214, 165, 111, 0.22),
        0 10px 30px rgba(62, 39, 35, 0.25);

    transform: translateY(-1px);
}

.header-search button {
    position: absolute;

    right: 5px;
    top: 5px;

    width: 34px;
    height: 32px;

    border: none;
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--purple-deep)
        );

    color: var(--white);

    cursor: pointer;

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

    box-shadow:
        0 5px 15px rgba(180, 83, 9, 0.35);

    transition: 0.3s ease;
}

.header-search button:hover {
    transform:
        scale(1.1)
        rotate(5deg);

    box-shadow:
        0 0 22px rgba(180, 83, 9, 0.55);
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-action {
    position: relative;
    width: 34px;
    height: 34px;

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

    color: #ffffff;
    text-decoration: none;

    cursor: pointer;
}

.header-action i {
    font-size: 17px;
    line-height: 1;
}

.header-action:hover {
    color: #f4c27a;
}


/* =========================================================
   CART / WISHLIST COUNT BADGE
   ========================================================= */

.header-action-badge {
    position: relative;
}

.action-count {
    position: absolute;

    top: -5px;
    right: -7px;

    min-width: 16px;
    height: 16px;

    padding: 0 4px;

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

    border-radius: 50%;

    background: #d89b45;
    color: #ffffff;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;

    border: 1px solid #ffffff;
}


/* Hide zero counts */
.action-count.is-zero {
    display: none;
}

/* =========================================================
   HEADER RESPONSIVE ROW
========================================================= */

.header-main-row {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 25px;

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

    gap: 25px;
}


/* =========================================================
   MOBILE
   Row 1 = Logo + Name
   Row 2 = Search
   Row 3 = Person + Cart
========================================================= */

@media (max-width: 767px) {

    .header-main-row {
        display: flex;
        flex-direction: column;

        align-items: stretch;
        justify-content: flex-start;

        gap: 0;

        padding: 10px 15px;
    }


    /* ROW 1 */
    .header-main-row .brand-logo {
        width: 100%;

        display: flex;
        align-items: center;

        padding-bottom: 12px;
    }


    /* ROW 2 */
    .header-main-row .header-search {
        display: block;

        width: 100%;
        max-width: none;

        flex: none;

        margin: 0;

        padding-bottom: 12px;
    }


    /* ROW 3 */
    .header-main-row .header-actions {
        width: 100%;

        display: flex;

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

        gap: 9px;

        padding-bottom: 10px;
    }

}

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

.main-navbar {
    position: relative;

    min-height: 48px;

    background:
        linear-gradient(
            90deg,
            var(--purple-dark),
            var(--purple-light),
            var(--purple),
            var(--purple-light),
            var(--purple-dark)
        );

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

    overflow: hidden;
}

.main-navbar::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 55%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.18),
            transparent
        );

    transform: skewX(-25deg);

    animation: navShine 5s linear infinite;
}

.navbar-container {
    max-width: 1200px;

    margin: auto;
    padding: 0 25px;

    position: relative;
    z-index: 2;
}

.navbar-links {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    list-style: none;

    margin: 0;
    padding: 0;
}

.nav-link-custom {
    position: relative;

    display: inline-flex;
    align-items: center;

    padding: 14px 18px;

    color: var(--white);

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition: 0.3s ease;
}

.nav-link-custom::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 5px;

    width: 0;
    height: 3px;

    border-radius: 999px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            var(--gold-light),
            var(--purple-light)
        );

    transition: 0.35s ease;
}

.nav-link-custom:hover {
    color: var(--gold-light);

    transform: translateY(-2px);
}

.nav-link-custom:hover::after {
    width: 65%;
}


/* =========================================================
   PREMIUM HERO SLIDER
========================================================= */

.home-hero {
    position: relative;
    width: 100%;

    overflow: hidden;

    background: #000;
}

.home-hero .carousel {
    position: relative;
    width: 100%;

    overflow: hidden;
}

.home-hero .carousel-inner {
    position: relative;
    width: 100%;

    overflow: hidden;
}

.home-hero .carousel-item {
    position: relative;
    width: 100%;

    overflow: hidden;

    background: #000;
}

.home-hero .slider-image {
    display: block;

    width: 100%;
    height: 560px;

    object-fit: fill;
    object-position: center center;

    transform: scale(1.12);

    will-change: transform;

    user-select: none;
    -webkit-user-drag: none;

    filter: brightness(.92);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.home-hero .carousel-item.active .slider-image {
    filter: brightness(1);
}

.home-hero .carousel-item.hero-animate .slider-image {
    animation:
        heroZoomLeft
        5s
        cubic-bezier(.22, 1, .36, 1)
        both;
}

.home-hero .carousel-item.hero-animate-2 .slider-image {
    animation:
        heroZoomRight
        5s
        cubic-bezier(.22, 1, .36, 1)
        both;
}

.home-hero .carousel-item.hero-animate-3 .slider-image {
    animation:
        heroZoomTop
        5s
        cubic-bezier(.22, 1, .36, 1)
        both;
}


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

@keyframes heroZoomLeft {
    0% {
        transform:
            scale(1.12)
            translate3d(2%, 0, 0);
    }

    100% {
        transform:
            scale(1)
            translate3d(-1%, 0, 0);
    }
}

@keyframes heroZoomRight {
    0% {
        transform:
            scale(1.12)
            translate3d(-2%, 0, 0);
    }

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

@keyframes heroZoomTop {
    0% {
        transform:
            scale(1.12)
            translate3d(0, 2%, 0);
    }

    100% {
        transform:
            scale(1)
            translate3d(0, -1%, 0);
    }
}


/* =========================================================
   CINEMATIC OVERLAY
========================================================= */

.home-hero .carousel-item::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .28) 0%,
            rgba(0, 0, 0, .05) 55%,
            rgba(0, 0, 0, .18) 100%
        );

    opacity: 0;

    transition: opacity 1.2s ease;
}

.home-hero .carousel-item.active::after {
    opacity: 1;
}


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

.home-hero .carousel-control-prev,
.home-hero .carousel-control-next {
    z-index: 5;

    width: 48px;
    height: 48px;

    top: 50%;

    transform: translateY(-50%);

    margin: 0 20px;

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

    border-radius: 50%;

    background:
        rgba(62, 39, 35, .72);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    opacity: .85;

    transition:
        opacity .3s ease,
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.home-hero .carousel-control-prev:hover,
.home-hero .carousel-control-next:hover {
    opacity: 1;

    transform:
        translateY(-50%)
        scale(1.08);

    background:
        rgba(180, 83, 9, .92);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .25);
}

.home-hero .carousel-control-prev-icon,
.home-hero .carousel-control-next-icon {
    width: 22px;
    height: 22px;

    background-size: 100% 100%;
}


/* =========================================================
   CAROUSEL INDICATORS
========================================================= */

.home-hero .carousel-indicators {
    z-index: 6;

    bottom: 18px;

    margin-bottom: 0;
}

.home-hero .carousel-indicators button {
    width: 28px;
    height: 4px;

    margin: 0 5px;
    padding: 0;

    border: 0;
    border-radius: 999px;

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

    opacity: 1;

    transition:
        width .4s ease,
        background .4s ease,
        opacity .4s ease;
}

.home-hero .carousel-indicators button.active {
    width: 52px;

    background: #B45309;

    opacity: 1;

    box-shadow:
        0 0 12px rgba(180, 83, 9, .45);
}


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

.about-company-section {
    position: relative;

    padding: 20px 20px;

    background:
        linear-gradient(
            135deg,
            var(--ivory),
            var(--cream)
        );

    overflow: hidden;
}

.about-company-section::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(180, 83, 9, 0.10),
            transparent 70%
        );

    top: -120px;
    right: -100px;

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

.about-company-section::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(192, 139, 92, 0.10),
            transparent 70%
        );

    bottom: -100px;
    left: -70px;
}


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

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

    gap: 10px;

    color: var(--purple);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;

    margin-bottom: 10px;

    position: relative;
    z-index: 2;
}

.about-kicker::before,
.about-kicker::after {
    content: "";

    width: 35px;
    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--purple),
            var(--purple-light),
            var(--gold-light)
        );
}


/* =========================================================
   TITLES
========================================================= */

.about-section-title,
.products-section-title,
.home-testimonials-title {
    position: relative;

    z-index: 2;

    color: var(--purple-deep);

    font-weight: 700;

    margin-bottom: 15px;
}

.about-section-title::after,
.products-section-title::after,
.home-testimonials-title::after {
    content: "";

    display: block;

    width: 75px;
    height: 4px;

    margin: 12px auto;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--purple),
            var(--purple-light),
            var(--gold-light)
        );

    animation:
        titleGlow 3s ease-in-out infinite;
}

.about-section-text {
    position: relative;

    z-index: 2;

    max-width: 750px;

    margin: 0 auto 12px;

    color: var(--purple-deep);

    line-height: 1.8;

    font-size: 14px;
}


/* =========================================================
   STATS
========================================================= */

.about-stats {
    position: relative;

    z-index: 3;

    max-width: 850px;

    margin: 40px auto 0;

    display: grid;

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

    overflow: hidden;

    border-radius: 18px;

    background:
        linear-gradient(
            100deg,
            var(--purple-deep),
            var(--purple),
            var(--purple-light)
        );

    border: 2px solid var(--gold-light);

    box-shadow:
        0 20px 45px var(--shadow-purple);
}

.about-stat {
    padding: 25px 15px;

    text-align: center;

    color: var(--white);

    border-right:
        1px solid rgba(255, 255, 255, 0.20);

    transition: 0.35s ease;
}

.about-stat:last-child {
    border-right: none;
}

.about-stat:hover {
    background:
        rgba(255, 255, 255, 0.10);

    transform:
        translateY(-5px);
}

.about-stat strong {
    display: block;

    color: var(--gold-light);

    font-size: 25px;

    text-shadow:
        0 0 15px rgba(214, 165, 111, 0.35);
}

.about-stat span {
    display: block;

    margin-top: 5px;

    font-size: 12px;
}


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

.home-products {
    position: relative;

    padding: 90px 20px;

    background: var(--cream);

    overflow: hidden;
}

.home-products::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 400px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(180, 83, 9, 0.08),
            transparent 70%
        );

    top: -200px;
    left: -180px;

    animation:
        floatingOrb 10s ease-in-out infinite;
}

.home-products::after {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(192, 139, 92, 0.08),
            transparent 70%
        );

    bottom: -200px;
    right: -150px;

    animation:
        floatingOrbReverse 12s ease-in-out infinite;
}

.home-products > .container {
    position: relative;
    z-index: 2;
}

.home-products .about-kicker,
.home-products .products-section-title,
.home-products .about-section-text {
    color: var(--purple-deep);
}
/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card {
    position: relative;
    overflow: hidden;
    width: 100%;

    border: 1px solid #05668D;
    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 3px 10px rgba(62, 39, 35, 0.10);

    cursor: pointer;

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


/* =========================================================
   CARD HOVER
   SAME ON INDEX.PHP + SHOP.PHP
========================================================= */

.product-card:hover {
    transform: translateY(-7px);

    border-color: #E66CAB;

    box-shadow:
        0 12px 25px rgba(62, 39, 35, 0.17),
        0 4px 10px rgba(180, 83, 9, 0.08);
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.product-image-link {
    display: block;
    overflow: hidden;
}

.product-image-box {
    position: relative;

    width: 100%;
    height: 400px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #D8B895,
            #B45309
        );
}

.product-image-box img {
    width: 100%;
    height: 400px;

    display: block;

    object-fit: fill;
    object-position: center;

    transition:
        transform 0.45s ease;
}


/* =========================================================
   IMAGE HOVER
========================================================= */

.product-card:hover .product-image-box img {
    transform: scale(1.04);
}


/* =========================================================
   CARD TOP LINE
========================================================= */

.product-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--purple),
            var(--gold-light)
        );

    transform: scaleX(0);
    transform-origin: center;

    transition:
        transform 0.3s ease;

    z-index: 5;
}

.product-card:hover::before {
    transform: scaleX(1);
}


/* =========================================================
   CARD BODY
========================================================= */

.product-card .card-body {
    padding: 9px 12px 10px;
    background: #ffffff;
}


/* =========================================================
   CATEGORY
========================================================= */

.product-category {
    color: var(--purple-light);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;

    margin-bottom: 3px;
}


/* =========================================================
   PRODUCT NAME
========================================================= */

.product-name {
    color: var(--purple-deep);

    font-size: 14px;
    font-weight: 700;

    line-height: 1.25;

    margin-bottom: 4px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.product-description {
    color: #6b5a50;

    font-size: 10px;
    line-height: 1.35;

    margin-bottom: 5px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* =========================================================
   PRICE
========================================================= */

.product-price {
    display: flex;
    align-items: center;

    gap: 6px;
    margin-bottom: 6px;
}

.product-price .price {
    color: var(--purple);

    font-size: 14px;
    font-weight: 700;
}

.product-price .old-price {
    color: #999;

    font-size: 9px;

    text-decoration: line-through;
}


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

.product-card .btn {
    width: 100%;

    padding: 5px 10px;

    border: none;
    border-radius: 999px;

    background: #05668D;

    color: #ffffff;

    font-size: 9px;
    font-weight: 700;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.product-card .btn:hover {
    background:
        linear-gradient(
            90deg,
            var(--purple-deep),
            var(--purple)
        );

    transform: translateY(-1px);
}


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

@media (max-width: 991px) {

    .product-image-box,
    .product-image-box img {
        height: 400px;
    }

}


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

@media (max-width: 575px) {

    .product-image-box,
    .product-image-box img {
        height: 360px;
    }

    .product-card .card-body {
        padding: 9px 11px;
    }

}
/* =========================================================
   TESTIMONIALS
========================================================= */

.home-testimonials {
    position: relative;

    padding: 90px 20px;

    background:
        linear-gradient(
            135deg,
            var(--ivory),
            var(--cream)
        );
}

.home-testimonial {
    position: relative;

    height: 100%;

    padding: 30px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            var(--white),
            var(--ivory)
        );

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

    box-shadow:
        0 12px 30px
        rgba(62, 39, 35, 0.10);

    text-align: center;

    transition: 0.4s ease;
}

.home-testimonial:hover {
    transform:
        translateY(-8px);

    border-color:
        var(--purple-light);

    box-shadow:
        0 22px 45px
        rgba(180, 83, 9, 0.16);
}

.home-testimonial-icon {
    width: 45px;
    height: 45px;

    margin: 0 auto 15px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--purple-deep)
        );

    color: var(--white);

    box-shadow:
        0 8px 18px
        rgba(180, 83, 9, 0.22);

    animation:
        iconPulse 3s ease-in-out infinite;
}

.home-testimonial p {
    color: var(--purple-deep);

    font-size: 14px;

    line-height: 1.7;

    margin-bottom: 15px;
}

.home-testimonial footer {
    color: var(--purple);

    font-weight: 700;

    font-size: 12px;
}

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


.footer {
    position: relative;
    display: block;
    width: 100%;
    color: var(--white);
    background: #05668D;
    border-top: 3px solid var(--gold-light);

    /* IMPORTANT */
    overflow: hidden;

    margin: 0 !important;
    padding: 0;
}

.footer::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(192, 139, 92, 0.14),
            transparent 65%
        );

    top: -300px;
    right: -150px;

    animation:
        floatingOrb 10s ease-in-out infinite;

    pointer-events: none;
}

.footer::after {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(180, 83, 9, 0.14),
            transparent 65%
        );

    /* keep the decoration inside the footer */
    bottom: -200px;
    left: -150px;

    pointer-events: none;
}

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

.footer-container {
    position: relative;

    z-index: 2;

    max-width: 1200px;

    margin: auto;

    padding:
        60px 25px 40px;

    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr;

    gap: 45px;
}


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

.footer-brand h2 {
    color: var(--gold-light);

    font-size: 23px;

    margin-bottom: 15px;
}

.footer-brand p {
    color: var(--white);

    opacity: 0.88;

    font-size: 13px;

    line-height: 1.8;

    max-width: 320px;
}


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

.footer-social {
    display: flex;

    gap: 10px;

    margin-top: 20px;
}

.footer-social a {
    width: 38px;
    height: 38px;

    border-radius: 50%;

    display: flex;

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

    color: var(--white);

    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--purple-light)
        );

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

    transition:
        0.35s ease;
}

.footer-social a:hover {
    color: var(--purple-deep);

    background:
        var(--gold-light);

    transform:
        translateY(-5px)
        rotate(5deg);

    box-shadow:
        0 10px 25px
        rgba(214, 165, 111, 0.30);
}


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

.footer-column {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.footer-column h3 {
    color: var(--gold-light);

    font-size: 15px;

    margin-bottom: 8px;
}

.footer-column a {
    color: var(--white);

    opacity: 0.82;

    text-decoration: none;

    font-size: 12px;

    transition:
        0.3s ease;
}

.footer-column a:hover {
    color: var(--gold-light);

    opacity: 1;

    transform:
        translateX(5px);
}


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

.footer-contact-item {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    color: var(--white);

    font-size: 12px;

    opacity: 0.85;
}

.footer-contact-item i {
    color: var(--gold-light);

    font-size: 14px;
}


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

.footer-bottom {
    position: relative;

    z-index: 3;

    padding:
        18px 25px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    background:
        rgba(31, 41, 55, 0.85);

    border-top:
        1px solid
        rgba(214, 165, 111, 0.30);

    color: var(--white);

    font-size: 10px;
}


/* =========================================================
   REVEAL ANIMATIONS
========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

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


/* =========================================================
   REVEAL SCALE
========================================================= */

.reveal-scale {
    opacity: 0;
    transform: scale(0.92);

    transition:
        opacity 0.8s ease,
        transform 0.45s ease;
}

.reveal-scale.show {
    opacity: 1;
    transform: scale(1);
}


/* Product card hover AFTER reveal */

.product-card.reveal-scale.show:hover {
    transform: translateY(-8px) scale(1.02);
}


/* =========================================================
   REVEAL LEFT
========================================================= */

.reveal-left {
    opacity: 0;
    transform: translateX(-45px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal-left.show {
    opacity: 1;
    transform: translateX(0);
}

.navbar-toggle { display: none; }

/* =========================================================
   REVEAL RIGHT
========================================================= */

.reveal-right {
    opacity: 0;
    transform: translateX(45px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal-right.show {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes headerDrop {
    from {
        opacity: 0;

        transform:
            translateY(-30px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

@keyframes headerShine {
    0% {
        left: -30%;
    }

    100% {
        left: 130%;
    }
}

@keyframes shineLine {
    0% {
        transform:
            translateX(-100%);
    }

    100% {
        transform:
            translateX(100%);
    }
}

@keyframes navShine {
    0% {
        left: -100%;
    }

    100% {
        left: 150%;
    }
}

@keyframes logoGlow {
    0%,
    100% {
        box-shadow:
            0 0 0 3px rgba(214, 165, 111, 0.20),
            0 0 15px rgba(214, 165, 111, 0.25);
    }

    50% {
        box-shadow:
            0 0 0 5px rgba(214, 165, 111, 0.28),
            0 0 30px rgba(214, 165, 111, 0.50);
    }
}

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

    50% {
        transform:
            translate(-30px, 30px)
            scale(1.08);
    }
}

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

    50% {
        transform:
            translate(30px, -25px)
            scale(1.08);
    }
}

@keyframes titleGlow {
    0%,
    100% {
        box-shadow:
            0 0 5px rgba(192, 139, 92, 0.15);
    }

    50% {
        box-shadow:
            0 0 18px rgba(192, 139, 92, 0.32);
    }
}

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

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


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

.main-navbar {
    position: relative;

    min-height: 48px;

    background:
        linear-gradient(
            90deg,
            var(--purple-dark),
            var(--purple-light),
            var(--purple),
            var(--purple-light),
            var(--purple-dark)
        );

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

    /*
     * IMPORTANT:
     * Do NOT use overflow:hidden here.
     * The mobile dropdown needs to extend below
     * the navbar.
     */
    overflow: visible;

    z-index: 10000;
}


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

.main-navbar::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 55%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.18),
            transparent
        );

    transform: skewX(-25deg);

    animation:
        navShine 5s linear infinite;

    pointer-events: none;

    z-index: 0;
}


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

.navbar-container {
    position: relative;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 25px;

    z-index: 2;
}


/* =========================================================
   NAVIGATION LINKS
========================================================= */

.navbar-links {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    list-style: none;

    margin: 0;

    padding: 0;
}


/* =========================================================
   NAVIGATION LINK
========================================================= */

.nav-link-custom {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 18px;

    color: var(--white);

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.2;

    transition:
        color 0.3s ease,
        transform 0.3s ease,
        background-color 0.3s ease;
}


/* =========================================================
   LINK UNDERLINE
========================================================= */

.nav-link-custom::after {
    content: "";

    position: absolute;

    left: 50%;

    bottom: 5px;

    width: 0;

    height: 3px;

    border-radius: 999px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            var(--gold-light),
            var(--purple-light)
        );

    transition:
        width 0.35s ease;
}


/* =========================================================
   LINK HOVER
========================================================= */

.nav-link-custom:hover {
    color: var(--gold-light);

    transform:
        translateY(-2px);
}

.nav-link-custom:hover::after {
    width: 65%;
}


/* =========================================================
   ACTIVE LINK
========================================================= */

.nav-link-custom.active {
    color: var(--gold-light);
}

.nav-link-custom.active::after {
    width: 65%;
}


/* =========================================================
   HAMBURGER
   HIDDEN ON DESKTOP
========================================================= */

.navbar-toggle {
    display: none;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    margin-left: auto;

    padding: 0;

    border: none;

    outline: none;

    background: transparent;

    color: var(--white);

    cursor: pointer;

    font-size: 26px;

    z-index: 10003;

    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   HAMBURGER ICON
========================================================= */

.navbar-toggle i {
    display: block;

    font-size: 26px;

    line-height: 1;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.navbar-toggle:focus {
    outline: none;

    box-shadow: none;
}


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

@media (max-width: 900px) {

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .header-container {
        flex-wrap: wrap;

        justify-content: center;
    }


    .header-search {
        order: 3;

        flex-basis: 100%;

        max-width: 600px;
    }


    /* -----------------------------------------------------
       NAVBAR CONTAINER
    ----------------------------------------------------- */

    .navbar-container {
        padding: 0 15px;
    }


    /* -----------------------------------------------------
       HAMBURGER
    ----------------------------------------------------- */

    .navbar-toggle {
        display: flex;
    }


    /* -----------------------------------------------------
       MOBILE / TABLET MENU
    ----------------------------------------------------- */

    .navbar-links {
        position: absolute;

        top: 100%;

        left: 0;

        right: 0;

        width: 100%;

        display: none;

        flex-direction: column;

        align-items: stretch;

        justify-content: flex-start;

        gap: 0;

        margin: 0;

        padding: 8px 10px;

        background:#d94f7d;

        border-top:
            1px solid
            rgba(0, 0, 0, 0.08);

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

        z-index: 10001;
    }


    /* -----------------------------------------------------
       MENU OPEN
    ----------------------------------------------------- */

    .navbar-links.navbar-open {
        display: flex;
    }


    /* -----------------------------------------------------
       MOBILE / TABLET LINKS
    ----------------------------------------------------- */

    .nav-link-custom {
        display: flex;

        align-items: center;

        justify-content: flex-start;

        width: 100%;

        padding: 13px 14px;

        color: white;

        font-size: 13px;

        font-weight: 600;

        line-height: 1.4;

        text-align: left;

        text-decoration: none;

        border-radius: 6px;

        transform: none;

        transition:
            background-color 0.2s ease,
            color 0.2s ease;
    }


    .nav-link-custom:hover {
        color: var(--purple-dark);

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

        transform: none;
    }


    /* -----------------------------------------------------
       ACTIVE MOBILE LINK
    ----------------------------------------------------- */

    .nav-link-custom.active {
        color: var(--purple-dark);

        background:
            rgba(0, 0, 0, 0.04);
    }


    /* Remove desktop underline on mobile */

    .nav-link-custom::after {
        display: none;
    }


    /* -----------------------------------------------------
       HERO TABLET
    ----------------------------------------------------- */

    .home-hero .slider-image {
        height: 420px;
    }


    .home-hero .carousel-control-prev,
    .home-hero .carousel-control-next {
        width: 42px;

        height: 42px;

        margin: 0 12px;
    }


    /* -----------------------------------------------------
       FOOTER TABLET
    ----------------------------------------------------- */

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

}


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

@media (max-width: 600px) {

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .header-container {
        padding:
            10px 15px;
    }


    .brand-text strong {
        font-size: 15px;
    }


    .brand-text small {
        font-size: 8px;
    }


    .header-actions {
        gap: 5px;
    }


    .header-action {
        width: 34px;

        height: 34px;
    }


    /* -----------------------------------------------------
       NAVBAR
    ----------------------------------------------------- */

    .navbar-container {
        padding:
            0 10px;
    }


    /* -----------------------------------------------------
       HAMBURGER
    ----------------------------------------------------- */

    .navbar-toggle {
        width: 42px;

        height: 42px;

        font-size: 26px;
    }


    .navbar-toggle i {
        font-size: 26px;
    }


    /* -----------------------------------------------------
       MOBILE MENU
    ----------------------------------------------------- */

    .navbar-links {
        padding:
            8px 10px;
    }


    /* -----------------------------------------------------
       MOBILE LINKS
    ----------------------------------------------------- */

    .nav-link-custom {
        padding:
            13px 14px;

        font-size: 15px;
        color:white;
    }

.nav-link-custom:hover {
    color: green;
}
    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .home-hero .slider-image {
        height: 300px;
    }


    .home-hero .carousel-control-prev,
    .home-hero .carousel-control-next {
        width: 36px;

        height: 36px;

        margin: 0 8px;
    }


    .home-hero .carousel-control-prev-icon,
    .home-hero .carousel-control-next-icon {
        width: 17px;

        height: 17px;
    }


    .home-hero .carousel-indicators {
        bottom: 10px;
    }


    .home-hero .carousel-indicators button {
        width: 20px;

        height: 3px;

        margin: 0 3px;
    }


    .home-hero .carousel-indicators button.active {
        width: 32px;
    }


    /* -----------------------------------------------------
       HOME SECTIONS
    ----------------------------------------------------- */

    .about-company-section,
    .home-products,
    .home-testimonials {
        padding:
            60px 15px;
    }


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


    .about-stat {
        border-right: none;

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


    .about-stat:last-child {
        border-bottom: none;
    }

}

















/* =========================================================
   TESTIMONIAL FLIP CARD
========================================================= */

.flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    perspective: 1000px;

    border: 2px solid #05668D;
    border-radius: 18px;

    box-shadow:
        0 22px 45px rgba(180, 83, 9, 0.16);

    overflow: hidden;
    margin: 0 auto;
}


/* =========================================================
   FLIP INNER
========================================================= */

.flip-card-inner {
    position: relative;

    width: 100%;
    height: 100%;

    text-align: center;

    transition: transform 0.8s ease;

    transform-style: preserve-3d;
}


/* =========================================================
   HOVER FLIP
========================================================= */

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}


/* =========================================================
   FRONT + BACK
========================================================= */

.flip-card-front,
.flip-card-back {
    position: absolute;

    width: 100%;
    height: 100%;

    padding: 5px 16px 14px;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    border-radius: 18px;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


/* =========================================================
   FRONT
   PINK + BLUE BORDER
========================================================= */

.flip-card-front {
    background-color: #E66CAB;
    color: #ffffff;

    border: 2px solid #05668D;
}


/* =========================================================
   BACK
   BLUE + PINK BORDER
========================================================= */

.flip-card-back {
    background-color: #05668D;
    color: #ffffff;

    border: 2px solid #8C064B;

    transform: rotateY(180deg);
}


/* =========================================================
   PREMIUM PRODUCT PAGE
========================================================= */

.premium-product-page {
    position: relative;
    min-height: 700px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(196, 139, 70, 0.12),
            transparent 22%
        ),
        radial-gradient(
            circle at 94% 35%,
            rgba(196, 139, 70, 0.10),
            transparent 24%
        ),
        #fffaf1;
}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.product-bg-decoration {
    position: absolute;
    pointer-events: none;
    opacity: 0.35;
}

.product-bg-top {
    width: 300px;
    height: 300px;
    top: 0;
    right: -150px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(180, 83, 9, 0.16),
            transparent 70%
        );
}

.product-bg-bottom {
    width: 350px;
    height: 350px;
    left: -180px;
    bottom: -180px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(180, 83, 9, 0.12),
            transparent 70%
        );
}


/* =========================================================
   PRODUCT SHOWCASE
========================================================= */

.product-showcase {
    position: relative;
    z-index: 2;
    padding: 35px 25px 45px;
}


.product-showcase-container {
    max-width: 1240px;
    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(480px, 1fr)
        minmax(500px, 1fr);

    gap: 55px;

    align-items: center;
}


/* =========================================================
   LEFT GALLERY
========================================================= */

.product-gallery {
    width: 100%;
}


.product-gallery-card {
    position: relative;

    width: 100%;

    padding: 14px;

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

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

    border-radius: 18px;

    box-shadow:
        0 18px 50px
        rgba(62,39,35,0.12);

    display: grid;

    grid-template-columns:
        82px 1fr;

    grid-template-rows:
        auto auto auto;

    column-gap: 15px;

    overflow: hidden;
}


/* =========================================================
   THUMBNAILS
========================================================= */

.product-thumbnails {
    grid-column: 1;
    grid-row: 1 / 4;

    display: flex;
    flex-direction: column;

    gap: 16px;

    padding-top: 10px;
}


.product-thumb {
    position: relative;

    width: 76px;
    height: 76px;

    padding: 3px;

    border:
        2px solid
        transparent;

    border-radius: 12px;

    background: #fff;

    cursor: pointer;

    overflow: hidden;

    transition:
        all 0.3s ease;
}


.product-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 8px;

    display: block;
}


.product-thumb:hover {
    transform: translateY(-2px);

    border-color:
        rgba(180,83,9,0.55);

    box-shadow:
        0 6px 15px
        rgba(180,83,9,0.16);
}


.product-thumb.active {
    border-color: #b45309;

    box-shadow:
        0 5px 16px
        rgba(180,83,9,0.25);
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.product-main-image {
    position: relative;

    grid-column: 2;
    grid-row: 1;

    height: 500px;

    overflow: hidden;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #f5e8d3,
            #fffaf3
        );
}


.product-main-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: fill;

    object-position: center;

    transition:
        opacity 0.2s ease,
        transform 0.35s ease;
}


.product-main-image img.changing {
    opacity: 0.25;

    transform: scale(1.02);
}


/* =========================================================
   WISHLIST
========================================================= */

.product-wishlist {
    position: absolute;

    top: 14px;
    right: 14px;

    z-index: 10;

    width: 44px;
    height: 44px;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,0.95);

    color: #8f3f08;

    display: flex;

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

    font-size: 21px;

    cursor: pointer;

    box-shadow:
        0 5px 15px
        rgba(0,0,0,0.12);

    transition:
        all 0.3s ease;
}


.product-wishlist:hover {
    color: #c0392b;

    transform:
        scale(1.08);
}


/* =========================================================
   GALLERY ARROWS
========================================================= */

.gallery-arrow {
    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    z-index: 8;

    width: 40px;
    height: 40px;

    border: none;

    border-radius: 50%;

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

    color: #8f3f08;

    display: flex;

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

    font-size: 18px;

    cursor: pointer;

    box-shadow:
        0 5px 15px
        rgba(0,0,0,0.12);

    transition:
        all 0.3s ease;
}


.gallery-arrow:hover {
    background: #b45309;

    color: #fff;

    transform:
        translateY(-50%)
        scale(1.08);
}


.gallery-prev {
    left: 12px;
}


.gallery-next {
    right: 12px;
}


/* =========================================================
   DOTS
========================================================= */

.product-image-dots {
    grid-column: 2;
    grid-row: 2;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 9px;

    padding: 13px 0 8px;
}


.image-dot {
    width: 10px;
    height: 10px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: #ddc5a2;

    cursor: pointer;

    transition:
        all 0.3s ease;
}


.image-dot.active {
    width: 12px;
    height: 12px;

    background: #b45309;
}


/* =========================================================
   IMAGE BENEFITS
========================================================= */

.image-benefits {
    grid-column: 2;
    grid-row: 3;

    display: grid;

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

    border-radius: 13px;

    background:
        #fff8ec;

    border:
        1px solid
        rgba(180,83,9,0.10);

    padding: 13px 10px;
}


.image-benefit {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 58px;

    padding: 5px 9px;

    border-right:
        1px solid
        rgba(180,83,9,0.20);
}


.image-benefit:last-child {
    border-right: none;
}


.benefit-icon {
    color: #8f3f08;

    font-size: 24px;

    flex-shrink: 0;
}


.image-benefit strong,
.image-benefit span {
    display: block;
}


.image-benefit strong {
    color: #3e2723;

    font-size: 12px;

    font-weight: 700;
}


.image-benefit span {
    color: #604b43;

    font-size: 10px;
}


/* =========================================================
   RIGHT INFORMATION
========================================================= */

.product-information {
    width: 100%;

    padding: 10px 0;
}


/* =========================================================
   CATEGORY
========================================================= */

.product-category-title {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 13px;
}


.product-category-title span {
    padding: 7px 17px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #fff0d8,
            #f8e8ce
        );

    color: #5d321c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.4px;

    text-transform: uppercase;
}


.product-category-title i {
    color: #c27617;

    font-size: 25px;
}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.premium-product-title {
    margin: 0 0 15px;

    color: #3e2723;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        36px,
        3.4vw,
        50px
    );

    line-height: 1.08;

    font-weight: 700;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.premium-product-description {
    max-width: 650px;

    margin: 0 0 21px;

    color: #66544b;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;

    line-height: 1.6;
}


/* =========================================================
   PRICE
========================================================= */

.premium-price-row {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 18px;

    margin-bottom: 20px;
}


.premium-current-price {
    color: #006c8e;

    font-size: 37px;

    font-weight: 800;
}


.premium-old-price {
    color: #999;

    font-size: 18px;

    text-decoration: line-through;
}


.premium-discount {
    padding: 7px 13px;

    border-radius: 20px;

    background: #ed3150;

    color: white;

    font-size: 13px;

    font-weight: 800;
}


/* =========================================================
   RATING
========================================================= */

.premium-rating-row {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-bottom: 27px;

    color: #4c403b;

    font-size: 14px;
}


.premium-stars {
    display: flex;

    gap: 3px;

    color: #f4a300;

    font-size: 18px;
}


.premium-rating-row strong {
    font-size: 14px;
}


.rating-divider {
    width: 1px;
    height: 25px;

    background:
        #d7c4ad;

    margin: 0 5px;
}


.trusted-quality {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #284c5b;

    font-weight: 600;
}


.trusted-quality i {
    color: #006c8e;

    font-size: 19px;
}


/* =========================================================
   PRODUCT INFO CARDS
========================================================= */

.premium-product-info {
    display: grid;

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

    gap: 14px;

    margin-bottom: 28px;
}


.premium-info-card {
    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 76px;

    padding: 12px;

    border:
        1px solid
        rgba(180,83,9,0.16);

    border-radius: 13px;

    background:
        rgba(255,255,255,0.72);

    transition:
        all 0.3s ease;
}


.premium-info-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(180,83,9,0.38);

    box-shadow:
        0 10px 22px
        rgba(62,39,35,0.08);
}


.premium-info-icon {
    width: 43px;
    height: 43px;

    flex-shrink: 0;

    border-radius: 50%;

    display: flex;

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

    background:
        #fff2df;

    color: #9a510d;

    font-size: 20px;
}


.premium-info-card strong {
    display: block;

    margin-bottom: 3px;

    color: #49372f;

    font-size: 13px;
}


.premium-info-card span {
    display: block;

    color: #006c8e;

    font-size: 13px;

    font-weight: 600;
}


/* =========================================================
   QUANTITY
========================================================= */

.premium-quantity-section {
    display: flex;

    align-items: center;

    gap: 25px;

    margin-bottom: 23px;
}


.premium-quantity-section label {
    color: #3e2723;

    font-size: 18px;

    font-weight: 700;
}


.quantity-control {
    display: flex;

    align-items: center;

    overflow: hidden;

    height: 48px;

    border:
        1px solid
        rgba(180,83,9,0.25);

    border-radius: 30px;

    background: #fff;

    box-shadow:
        0 5px 15px
        rgba(62,39,35,0.07);
}


.quantity-control button {
    width: 46px;
    height: 48px;

    border: none;

    background:
        linear-gradient(
            135deg,
            #f0a323,
            #c87508
        );

    color: #fff;

    font-size: 17px;

    cursor: pointer;

    transition:
        all 0.25s ease;
}


.quantity-control button:hover {
    filter: brightness(1.08);
}


.quantity-control input {
    width: 58px;
    height: 48px;

    padding: 0;

    border: none;

    outline: none;

    background: #fff;

    color: #3e2723;

    text-align: center;

    font-size: 16px;

    font-weight: 700;

    -moz-appearance: textfield;
}


.quantity-control input::-webkit-outer-spin-button,
.quantity-control input::-webkit-inner-spin-button {
    margin: 0;

    -webkit-appearance: none;
}


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

.premium-product-buttons {
    display: grid;

    grid-template-columns:
        1fr 1.2fr 0.9fr;

    gap: 15px;

    margin-bottom: 30px;
}


.premium-btn {
    min-height: 57px;

    padding: 0 20px;

    border: none;

    border-radius: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    box-shadow:
        0 8px 20px
        rgba(62,39,35,0.15);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease;
}


.premium-btn:hover {
    color: #fff;

    transform:
        translateY(-4px);

    box-shadow:
        0 13px 25px
        rgba(62,39,35,0.20);

    filter: brightness(1.05);
}


.premium-btn i {
    font-size: 20px;
}


/* Cart */

.add-cart-btn {
    background:
        linear-gradient(
            135deg,
            #087c9f,
            #005b7a
        );
}


/* WhatsApp */

.whatsapp-btn {
    background:
        linear-gradient(
            135deg,
            #18d66b,
            #05ad50
        );
}


/* Buy */

.buy-now-btn {
    background:
        linear-gradient(
            135deg,
            #df8a10,
            #b85b00
        );
}


/* =========================================================
   TRUST ROW
========================================================= */

.premium-trust-row {
    display: grid;

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

    border:
        1px solid
        rgba(180,83,9,0.12);

    border-radius: 14px;

    background:
        rgba(255,255,255,0.42);

    padding: 13px 8px;
}


.premium-trust-item {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 55px;

    padding: 4px 10px;

    border-right:
        1px solid
        rgba(180,83,9,0.18);
}


.premium-trust-item:last-child {
    border-right: none;
}


.premium-trust-item > i {
    color: #8d4d14;

    font-size: 25px;

    flex-shrink: 0;
}


.premium-trust-item strong,
.premium-trust-item span {
    display: block;
}


.premium-trust-item strong {
    color: #4a372e;

    font-size: 11px;
}


.premium-trust-item span {
    color: #6f5c52;

    font-size: 10px;
}


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

@media (max-width: 1100px) {

    .product-showcase-container {
        grid-template-columns:
            1fr;

        max-width: 800px;

        gap: 35px;
    }


    .premium-product-title {
        font-size: 42px;
    }

}


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

@media (max-width: 768px) {

    .product-showcase {
        padding:
            20px 14px 35px;
    }


    .product-gallery-card {
        grid-template-columns:
            1fr;

        padding: 10px;
    }


    .product-thumbnails {
        grid-column: 1;
        grid-row: 2;

        flex-direction: row;

        justify-content: center;

        overflow-x: auto;

        padding:
            10px 0 3px;
    }


    .product-thumb {
        width: 62px;
        height: 62px;

        flex-shrink: 0;
    }


    .product-main-image {
        grid-column: 1;
        grid-row: 1;

        height: 390px;
    }


    .product-image-dots {
        grid-column: 1;
        grid-row: 3;
    }


    .image-benefits {
        grid-column: 1;
        grid-row: 4;

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

        gap: 5px;
    }


    .image-benefit {
        border-right: none;

        border-bottom:
            1px solid
            rgba(180,83,9,0.14);
    }


    .premium-product-title {
        font-size: 35px;
    }


    .premium-product-description {
        font-size: 15px;
    }


    .premium-current-price {
        font-size: 31px;
    }


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


    .premium-product-buttons {
        grid-template-columns:
            1fr;

        gap: 10px;
    }


    .premium-trust-row {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .premium-trust-item:nth-child(2) {
        border-right: none;
    }


    .premium-trust-item:nth-child(-n+2) {
        border-bottom:
            1px solid
            rgba(180,83,9,0.15);
    }

}


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

@media (max-width: 480px) {

    .product-main-image {
        height: 320px;
    }


    .premium-product-title {
        font-size: 30px;
    }


    .premium-price-row {
        gap: 10px;
    }


    .premium-current-price {
        font-size: 28px;
    }


    .premium-rating-row {
        gap: 8px;
    }


    .premium-quantity-section {
        justify-content: space-between;
    }


    .premium-trust-row {
        grid-template-columns:
            1fr;
    }


    .premium-trust-item {
        border-right: none !important;

        border-bottom:
            1px solid
            rgba(180,83,9,0.15);
    }


    .premium-trust-item:last-child {
        border-bottom: none;
    }

}


/* =========================================================
   SHOP INTRO - PREMIUM COLLECTION
========================================================= */

.shop-intro-section {
    position: relative;
    padding: 70px 20px 45px;
    text-align: center;
   background: radial-gradient(circle at 15% 30%, #f8f9fa, #f8f9fa 28%),
   radial-gradient(circle at 85% 70%, #fffdf9, transparent 28%), #f8f1e7;
}

.shop-intro-content {
    max-width: 900px;
    margin: 0 auto;
}

.shop-title {
    margin-bottom: 22px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 700;
    color: #3e2723;
    letter-spacing: .5px;
}

.shop-description {
    max-width: 820px;
    margin: auto;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.9;
    color: #6b5144;
}

.highlight-orange {
    color: #b45309;
    font-weight: 700;
}

.highlight-purple {
    color: #7c3f72;
    font-weight: 700;
}

.highlight-green {
    color: #28745b;
    font-weight: 700;
}

.highlight-brown {
    color: #7a431c;
    font-weight: 700;
}
/* =========================================================
   SHOP PRODUCTS SECTION
========================================================= */

.shop-products-section {
    padding: 35px 20px 90px;
    background:
        linear-gradient(
            180deg,
            #f8f1e7 0%,
            #fffdf9 45%,
            #f8f1e7 100%
        );
}

.shop-products-heading {
    text-align: center;
    margin-bottom: 38px;
}

.shop-kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;

    color: #b45309;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
}

.shop-kicker::before,
.shop-kicker::after {
    content: "";
    width: 42px;
    height: 1px;
    background: #b45309;
}

.shop-products-heading h2 {
    margin: 0;
    color: #3e2723;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
}
/* =========================================================
   ABOUT PAGE
   MEENAKSHI ENTERPRISES
   PREMIUM TEMPLE / HERITAGE DESIGN
========================================================= */

.about-page {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(180, 83, 9, 0.06),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 42%,
            rgba(5, 102, 141, 0.06),
            transparent 30%
        ),
        #f4eee6;

    color: #3e2723;
}


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

.about-hero-new {
    position: relative;

    min-height: 650px;

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

    padding: 100px 30px 130px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #3e2723 0%,
            #4d3028 45%,
            #05668d 100%
        );

    color: #ffffff;
}


/* Decorative circles */

.about-hero-new::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    top: -260px;
    right: -150px;

    background:
        radial-gradient(
            circle,
            rgba(214, 165, 111, 0.24),
            transparent 68%
        );

    pointer-events: none;
}


.about-hero-new::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    bottom: -250px;
    left: -150px;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.10),
            transparent 68%
        );

    pointer-events: none;
}


/* Hero content */

.about-hero-inner {
    position: relative;

    z-index: 2;

    width: min(100%, 1000px);

    text-align: center;

    margin: auto;
}


/* Kicker */

.about-kicker {
    display: inline-flex;

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

    gap: 12px;

    margin-bottom: 25px;

    color: #d6a56f;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 4px;

    text-transform: uppercase;
}


.about-kicker::before,
.about-kicker::after {
    content: "";

    width: 45px;
    height: 1px;

    background: #d6a56f;
}


/* Hero title */

.about-hero-title {
    max-width: 950px;

    margin: 0 auto 28px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(48px, 7vw, 88px);

    line-height: 0.98;

    font-weight: 700;

    letter-spacing: -2px;
}


.about-hero-title span {
    display: block;

    margin-top: 12px;

    color: #d6a56f;

    font-style: italic;
}


/* Hero description */

.about-hero-description {
    max-width: 700px;

    margin: 0 auto;

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

    font-size: 17px;

    line-height: 1.8;

    letter-spacing: 0.2px;
}


/* Scroll */

.about-hero-scroll {
    position: absolute;

    z-index: 3;

    bottom: 35px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;

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

    font-size: 10px;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.about-hero-scroll i {
    color: #d6a56f;

    font-size: 20px;

    animation:
        aboutScrollArrow 1.8s ease-in-out infinite;
}


@keyframes aboutScrollArrow {

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

    50% {
        transform: translateY(7px);
    }
}


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

.hero-reveal {
    opacity: 0;

    transform: translateY(30px);

    animation:
        aboutHeroReveal 0.9s ease forwards;
}


.hero-reveal-delay-1 {
    animation-delay: 0.15s;
}


.hero-reveal-delay-2 {
    animation-delay: 0.3s;
}


.hero-reveal-delay-3 {
    animation-delay: 0.55s;
}


@keyframes aboutHeroReveal {

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

}


/* =========================================================
   INTRO
========================================================= */

.about-intro {
    padding: 130px 30px 120px;

    background: #f4eee6;
}


.about-intro-inner {
    max-width: 1050px;

    margin: auto;

    text-align: center;
}


.about-intro-label {
    margin-bottom: 25px;

    color: #05668d;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 4px;

    text-transform: uppercase;
}


.about-intro-title {
    margin: 0;

    color: #3e2723;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(38px, 5vw, 66px);

    line-height: 1.08;

    font-weight: 600;

    letter-spacing: -1.5px;
}


.about-intro-title em {
    color: #b45309;

    font-style: italic;
}


/* =========================================================
   HERITAGE SECTION
========================================================= */

.about-story {
    padding: 110px 30px;

    background: #ffffff;
}


.about-story-grid {
    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.9fr);

    gap: 90px;

    align-items: center;
}


/* =========================================================
   IMAGE STYLE
========================================================= */

.about-image-reveal,
.about-craft-image,
.about-innovation-image {
    position: relative;

    overflow: hidden;

    border-radius: 18px;

    background: #e8ddd2;

    box-shadow:
        0 22px 55px
        rgba(62, 39, 35, 0.14);
}


.about-image-reveal::after,
.about-craft-image::after,
.about-innovation-image::after {
    content: "";

    position: absolute;

    inset: 0;

    border: 1px solid
        rgba(214, 165, 111, 0.35);

    border-radius: inherit;

    pointer-events: none;
}


.about-image-reveal img,
.about-craft-image img,
.about-innovation-image img {
    width: 100%;

    height: 560px;

    display: block;

    object-fit: cover;

    transition:
        transform 0.8s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.about-image-reveal:hover img,
.about-craft-image:hover img,
.about-innovation-image:hover img {
    transform: scale(1.045);
}


/* Image gold frame */

.about-image-reveal::before,
.about-craft-image::before,
.about-innovation-image::before {
    content: "";

    position: absolute;

    z-index: 2;

    width: 70px;
    height: 70px;

    top: 22px;
    left: 22px;

    border-top: 2px solid #d6a56f;
    border-left: 2px solid #d6a56f;

    pointer-events: none;
}


/* =========================================================
   STORY TEXT
========================================================= */

.about-story-text,
.about-craft-text,
.about-innovation-text {
    max-width: 540px;
}


.about-number {
    margin-bottom: 22px;

    color: #b45309;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.about-section-title {
    margin: 0 0 28px;

    color: #3e2723;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(38px, 4vw, 58px);

    line-height: 1.05;

    font-weight: 600;

    letter-spacing: -1px;
}


.about-section-text {
    margin-bottom: 20px;

    color: #6b5a50;

    font-size: 16px;

    line-height: 1.9;
}


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

.about-craft {
    padding: 120px 30px;

    background:
        linear-gradient(
            135deg,
            #f4eee6,
            #ffffff
        );
}


.about-craft-grid {
    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 90px;

    align-items: center;
}


.about-craft-image img {
    height: 600px;
}


/* =========================================================
   LEADERSHIP
========================================================= */

.about-leadership {
    padding: 140px 30px;

    background: #3e2723;

    color: #ffffff;
}


.about-leadership-inner {
    max-width: 1200px;

    margin: auto;
}


.about-leadership-heading {
    max-width: 760px;

    margin: 0 auto 100px;

    text-align: center;
}


.about-leadership-heading .about-number {
    color: #d6a56f;
}


.about-leadership-heading h2 {
    margin: 0 0 25px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

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

    line-height: 1.05;

    letter-spacing: -1px;
}


.about-leadership-heading h2 em {
    color: #d6a56f;

    font-style: italic;
}


.about-leadership-heading p {
    margin: 0;

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

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   OWNER CARD
========================================================= */

.about-owner {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 80px;

    align-items: center;

    margin-bottom: 120px;
}


.about-owner:last-child {
    margin-bottom: 0;
}


.about-owner-two {
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.9fr);
}


/* Owner image */

.about-owner-image {
    position: relative;

    overflow: hidden;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.25);
}


.about-owner-image img {
    width: 100%;

    height: 560px;

    display: block;

    object-fit: cover;

    transition:
        transform 0.7s ease;
}


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


/* Gold image border */

.about-owner-image::after {
    content: "";

    position: absolute;

    inset: 15px;

    border: 1px solid
        rgba(214,165,111,.65);

    border-radius: 10px;

    pointer-events: none;
}


/* Owner content */

.about-owner-content {
    max-width: 570px;
}


.about-owner-number {
    margin-bottom: 8px;

    color: #d6a56f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 40px;

    font-weight: 700;
}


.about-owner-role {
    margin-bottom: 15px;

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

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;
}


.about-owner-content h3 {
    margin: 0 0 8px;

    color: #ffffff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 48px;

    line-height: 1.05;
}


.about-owner-designation {
    margin-bottom: 25px;

    color: #d6a56f;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;
}


.about-owner-content p {
    margin-bottom: 18px;

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

    font-size: 15px;

    line-height: 1.85;
}


/* Signature */

.about-owner-signature {
    margin-top: 35px;

    padding-top: 20px;

    border-top: 1px solid
        rgba(214,165,111,.25);
}


.about-owner-signature span {
    display: block;

    margin-bottom: 5px;

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

    font-size: 10px;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.about-owner-signature strong {
    color: #d6a56f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;

    font-style: italic;
}


/* =========================================================
   STATEMENT
========================================================= */

.about-statement {
    position: relative;

    padding: 150px 30px;

    background:
        radial-gradient(
            circle at center,
            rgba(180,83,9,.10),
            transparent 55%
        ),
        #f4eee6;

    text-align: center;
}


.about-statement-inner {
    max-width: 950px;

    margin: auto;
}


.about-statement-small {
    margin-bottom: 25px;

    color: #05668d;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 4px;
}


.about-statement h2 {
    margin: 0;

    color: #3e2723;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

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

    line-height: 1.08;

    font-weight: 600;

    letter-spacing: -1.5px;
}


/* =========================================================
   INNOVATION
========================================================= */

.about-innovation {
    padding: 120px 30px;

    background: #ffffff;
}


.about-innovation-grid {
    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.9fr);

    gap: 90px;

    align-items: center;
}


.about-innovation-image img {
    height: 600px;
}


/* =========================================================
   GALLERY
========================================================= */

.about-gallery {
    padding: 110px 30px;

    background: #f4eee6;
}


.about-gallery-grid {
    max-width: 1200px;

    margin: auto;

    display: grid;

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

    gap: 24px;
}


.about-gallery-grid > div {
    position: relative;

    overflow: hidden;

    height: 460px;

    border-radius: 14px;

    box-shadow:
        0 18px 45px
        rgba(62,39,35,.12);
}


.about-gallery-grid img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.7s ease;
}


.about-gallery-grid > div:hover img {
    transform: scale(1.06);
}


/* =========================================================
   CTA
========================================================= */

.about-cta {
    position: relative;

    padding: 130px 30px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #05668d,
            #3e2723
        );

    color: #ffffff;

    text-align: center;
}


.about-cta::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    top: -280px;
    left: -180px;

    background:
        radial-gradient(
            circle,
            rgba(214,165,111,.20),
            transparent 68%
        );
}


.about-cta::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    right: -200px;
    bottom: -300px;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.10),
            transparent 68%
        );
}


.about-cta-inner {
    position: relative;

    z-index: 2;

    max-width: 800px;

    margin: auto;
}


.about-cta-small {
    margin-bottom: 22px;

    color: #d6a56f;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 4px;
}


.about-cta h2 {
    margin: 0 0 25px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

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

    line-height: 1.05;
}


.about-cta p {
    max-width: 650px;

    margin: 0 auto 35px;

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

    font-size: 16px;

    line-height: 1.8;
}


/* CTA BUTTON */

.about-shop-btn {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 15px 28px;

    border: 1px solid #d6a56f;

    border-radius: 4px;

    background: #d6a56f;

    color: #3e2723;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}


.about-shop-btn:hover {
    transform: translateY(-4px);

    background: transparent;

    color: #ffffff;

    box-shadow:
        0 12px 25px rgba(0,0,0,.20);
}


.about-shop-btn i {
    font-size: 16px;

    transition:
        transform .3s ease;
}


.about-shop-btn:hover i {
    transform: translateX(5px);
}


/* =========================================================
   GENERAL REVEAL ANIMATIONS
========================================================= */

.section-reveal {
    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity .9s ease,
        transform .9s ease;
}


.section-reveal.show {
    opacity: 1;

    transform: translateY(0);
}


.reveal-left {
    opacity: 0;

    transform: translateX(-50px);

    transition:
        opacity .9s ease,
        transform .9s ease;
}


.reveal-left.show {
    opacity: 1;

    transform: translateX(0);
}


.reveal-right {
    opacity: 0;

    transform: translateX(50px);

    transition:
        opacity .9s ease,
        transform .9s ease;
}


.reveal-right.show {
    opacity: 1;

    transform: translateX(0);
}


.reveal-image {
    opacity: 0;

    transform: scale(.96);

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


.reveal-image.show {
    opacity: 1;

    transform: scale(1);
}


.reveal-scale {
    opacity: 0;

    transform: scale(.92);

    transition:
        opacity .9s ease,
        transform .9s ease;
}


.reveal-scale.show {
    opacity: 1;

    transform: scale(1);
}


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

@media (max-width: 991px) {

    .about-hero-new {
        min-height: 580px;

        padding: 90px 25px 110px;
    }


    .about-story-grid,
    .about-craft-grid,
    .about-innovation-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .about-story-text,
    .about-craft-text,
    .about-innovation-text {
        max-width: 800px;
    }


    .about-craft-grid .about-craft-image {
        order: 2;
    }


    .about-owner,
    .about-owner-two {
        grid-template-columns: 1fr;

        gap: 50px;

        margin-bottom: 90px;
    }


    .about-owner-two .about-owner-content {
        order: 1;
    }


    .about-owner-two .about-owner-image {
        order: 2;
    }


    .about-owner-content {
        max-width: 800px;
    }


    .about-owner-image img {
        height: 520px;
    }


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


    .about-gallery-grid > div {
        height: 500px;
    }

}


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

@media (max-width: 575px) {

    .about-hero-new {
        min-height: 600px;

        padding:
            80px 20px
            100px;
    }


    .about-kicker {
        gap: 7px;

        font-size: 9px;

        letter-spacing: 2.5px;
    }


    .about-kicker::before,
    .about-kicker::after {
        width: 25px;
    }


    .about-hero-title {
        font-size: 44px;

        letter-spacing: -1px;
    }


    .about-hero-description {
        font-size: 14px;

        line-height: 1.75;
    }


    .about-intro {
        padding:
            90px 20px;
    }


    .about-intro-title {
        font-size: 36px;
    }


    .about-story,
    .about-craft,
    .about-innovation {
        padding:
            75px 20px;
    }


    .about-story-grid,
    .about-craft-grid,
    .about-innovation-grid {
        gap: 40px;
    }


    .about-image-reveal img,
    .about-craft-image img,
    .about-innovation-image img {
        height: 390px;
    }


    .about-image-reveal::before,
    .about-craft-image::before,
    .about-innovation-image::before {
        width: 45px;
        height: 45px;

        top: 15px;
        left: 15px;
    }


    .about-section-title {
        font-size: 37px;
    }


    .about-section-text {
        font-size: 14px;

        line-height: 1.8;
    }


    .about-leadership {
        padding:
            90px 20px;
    }


    .about-leadership-heading {
        margin-bottom: 65px;
    }


    .about-leadership-heading h2 {
        font-size: 40px;
    }


    .about-owner {
        gap: 35px;

        margin-bottom: 75px;
    }


    .about-owner-image img {
        height: 420px;
    }


    .about-owner-content h3 {
        font-size: 39px;
    }


    .about-owner-content p {
        font-size: 14px;

        line-height: 1.8;
    }


    .about-statement {
        padding:
            90px 20px;
    }


    .about-statement h2 {
        font-size: 38px;
    }


    .about-gallery {
        padding:
            75px 20px;
    }


    .about-gallery-grid {
        gap: 18px;
    }


    .about-gallery-grid > div {
        height: 360px;
    }


    .about-cta {
        padding:
            90px 20px;
    }


    .about-cta h2 {
        font-size: 42px;
    }


    .about-cta p {
        font-size: 14px;
    }


    .about-shop-btn {
        width: 100%;

        justify-content: center;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .about-page *,
    .about-page *::before,
    .about-page *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }

}
/* =========================================================
   ABOUT PAGE — PREMIUM VISUAL IMAGE DESIGN
========================================================= */

.about-page {
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(180, 83, 9, 0.07),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 40%,
            rgba(5, 102, 141, 0.06),
            transparent 30%
        ),
        #f4eee6;

    color: #3e2723;
}


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

.about-hero-new {
    position: relative;

    min-height: 620px;

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

    text-align: center;

    padding: 100px 25px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(180, 83, 9, 0.16),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #3e2723,
            #05668d
        );

    color: #fff;
}

.about-hero-new::before {
    content: "";

    position: absolute;
    width: 500px;
    height: 500px;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;

    top: -180px;
    left: -150px;
}

.about-hero-new::after {
    content: "";

    position: absolute;
    width: 420px;
    height: 420px;

    border: 1px solid rgba(214,165,111,.25);
    border-radius: 50%;

    right: -130px;
    bottom: -180px;
}

.about-hero-inner {
    position: relative;
    z-index: 2;

    max-width: 900px;
}

.about-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 3px;

    color: #d6a56f;

    margin-bottom: 25px;
}

.about-hero-title {
    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(42px, 6vw, 78px);

    line-height: 1.05;

    font-weight: 700;

    margin: 0 auto 25px;
}

.about-hero-title span {
    display: block;

    color: #d6a56f;

    font-style: italic;
}

.about-hero-description {
    max-width: 700px;

    margin: auto;

    font-size: 17px;

    line-height: 1.8;

    color: rgba(255,255,255,.82);
}

.about-hero-scroll {
    position: absolute;

    bottom: 30px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 8px;

    z-index: 3;

    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;

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

.about-hero-scroll i {
    font-size: 20px;

    animation: aboutScroll 1.8s ease-in-out infinite;
}

@keyframes aboutScroll {

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

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

}


/* =========================================================
   INTRO
========================================================= */

.about-intro {
    padding: 120px 25px;
    background: #fff;
}

.about-intro-inner {
    max-width: 900px;
    margin: auto;
    text-align: center;
}

.about-intro-label {
    font-size: 11px;
    font-weight: 800;

    letter-spacing: 3px;

    color: #b45309;

    margin-bottom: 20px;
}

.about-intro-title {
    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(34px, 5vw, 58px);

    line-height: 1.15;

    color: #3e2723;

    margin: 0;
}

.about-intro-title em {
    color: #05668d;
}


/* =========================================================
   HERITAGE / CRAFT / INNOVATION SECTIONS
========================================================= */

.about-story,
.about-craft,
.about-innovation {
    padding: 110px 6%;
}

.about-story {
    background: #f4eee6;
}

.about-craft {
    background: #fff;
}

.about-innovation {
    background: #f4eee6;
}

.about-story-grid,
.about-craft-grid,
.about-innovation-grid {

    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);

    gap: 80px;

    align-items: center;
}


/* =========================================================
   LARGE IMAGE CONTAINER
========================================================= */

.about-image-reveal,
.about-craft-image,
.about-innovation-image {

    position: relative;

    width: 100%;

    min-height: 620px;

    overflow: hidden;

    border-radius: 24px;

    background: #e8ddd1;

    box-shadow:
        0 25px 70px rgba(62,39,35,.18);
}


/* =========================================================
   ACTUAL IMAGE
========================================================= */

.about-image-reveal img,
.about-craft-image img,
.about-innovation-image img {

    width: 100%;
    height: 620px;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform .8s cubic-bezier(.2,.8,.2,1),
        filter .5s ease;
}


/* =========================================================
   IMAGE HOVER
========================================================= */

.about-image-reveal:hover img,
.about-craft-image:hover img,
.about-innovation-image:hover img {

    transform: scale(1.055);

    filter: saturate(1.08);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.about-image-reveal::after,
.about-craft-image::after,
.about-innovation-image::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0) 55%,
            rgba(0,0,0,.20)
        );
}


/* =========================================================
   IMAGE FRAME
========================================================= */

.about-image-reveal::before,
.about-craft-image::before,
.about-innovation-image::before {

    content: "";

    position: absolute;

    inset: 18px;

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

    border-radius: 18px;

    z-index: 2;

    pointer-events: none;
}


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

.about-story-text,
.about-craft-text,
.about-innovation-text {

    max-width: 600px;
}

.about-number {

    display: inline-block;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.5px;

    color: #b45309;

    margin-bottom: 22px;
}

.about-section-title {

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(36px, 4vw, 58px);

    line-height: 1.1;

    color: #3e2723;

    margin-bottom: 25px;
}

.about-section-text {

    font-size: 16px;

    line-height: 1.9;

    color: #6b5a50;

    margin-bottom: 18px;
}


/* =========================================================
   CRAFT SECTION — IMAGE ON RIGHT
========================================================= */

.about-craft-grid {

    grid-template-columns:
        minmax(0,.95fr)
        minmax(0,1.05fr);
}


/* =========================================================
   LEADERSHIP
========================================================= */

.about-leadership {

    padding: 120px 6%;

    background:
        linear-gradient(
            135deg,
            #fff,
            #f4eee6
        );
}

.about-leadership-inner {

    max-width: 1250px;

    margin: auto;
}

.about-leadership-heading {

    max-width: 720px;

    margin-bottom: 90px;
}

.about-leadership-heading h2 {

    font-family: Georgia, "Times New Roman", serif;

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

    line-height: 1.1;

    color: #3e2723;

    margin-bottom: 22px;
}

.about-leadership-heading h2 em {

    color: #05668d;
}

.about-leadership-heading p {

    color: #6b5a50;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   OWNER CARDS
========================================================= */

.about-owner {

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap: 70px;

    align-items: center;

    margin-bottom: 120px;
}

.about-owner-image {

    position: relative;

    height: 560px;

    overflow: hidden;

    border-radius: 22px;

    background: #e8ddd1;

    box-shadow:
        0 25px 60px rgba(62,39,35,.15);
}

.about-owner-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .7s ease;
}

.about-owner-image:hover img {

    transform: scale(1.05);
}

.about-owner-content {

    max-width: 600px;
}

.about-owner-number {

    font-family: Georgia, serif;

    font-size: 42px;

    color: #d6a56f;

    margin-bottom: 10px;
}

.about-owner-role {

    font-size: 10px;

    letter-spacing: 3px;

    font-weight: 800;

    color: #b45309;

    margin-bottom: 15px;
}

.about-owner-content h3 {

    font-family: Georgia, serif;

    font-size: 44px;

    color: #3e2723;

    margin-bottom: 5px;
}

.about-owner-designation {

    color: #05668d;

    font-weight: 700;

    margin-bottom: 25px;
}

.about-owner-content p {

    font-size: 15px;

    line-height: 1.9;

    color: #6b5a50;

    margin-bottom: 18px;
}

.about-owner-signature {

    margin-top: 30px;

    padding-left: 20px;

    border-left: 3px solid #b45309;

    display: flex;

    flex-direction: column;

    gap: 5px;
}

.about-owner-signature span {

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #8c7a6f;
}

.about-owner-signature strong {

    color: #05668d;

    font-family: Georgia, serif;

    font-size: 20px;
}


/* =========================================================
   STATEMENT
========================================================= */

.about-statement {

    padding: 140px 25px;

    background:
        linear-gradient(
            135deg,
            #05668d,
            #3e2723
        );

    color: #fff;

    text-align: center;
}

.about-statement-inner {

    max-width: 950px;

    margin: auto;
}

.about-statement-small {

    font-size: 10px;

    letter-spacing: 3px;

    color: #d6a56f;

    margin-bottom: 25px;
}

.about-statement h2 {

    font-family: Georgia, serif;

    font-size: clamp(38px,5vw,64px);

    line-height: 1.15;

    font-weight: 600;

    margin: 0;
}


/* =========================================================
   GALLERY
========================================================= */

.about-gallery {

    padding: 100px 6%;

    background: #fff;
}

.about-gallery-grid {

    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 25px;
}

.about-gallery-grid > div {

    height: 520px;

    overflow: hidden;

    border-radius: 20px;

    box-shadow:
        0 18px 45px rgba(62,39,35,.14);
}

.about-gallery-grid img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .8s ease;
}

.about-gallery-grid > div:hover img {

    transform: scale(1.06);
}


/* =========================================================
   CTA
========================================================= */

.about-cta {

    padding: 120px 25px;

    background: #f4eee6;

    text-align: center;
}

.about-cta-inner {

    max-width: 850px;

    margin: auto;
}

.about-cta-small {

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;

    color: #b45309;

    margin-bottom: 20px;
}

.about-cta h2 {

    font-family: Georgia, serif;

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

    line-height: 1.1;

    color: #3e2723;

    margin-bottom: 25px;
}

.about-cta p {

    max-width: 700px;

    margin: 0 auto 35px;

    font-size: 16px;

    line-height: 1.8;

    color: #6b5a50;
}

.about-shop-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 15px 28px;

    border-radius: 8px;

    background: #05668d;

    color: #fff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .5px;

    transition: all .3s ease;
}

.about-shop-btn:hover {

    background: #b45309;

    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 12px 25px rgba(180,83,9,.25);
}


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

@media (max-width: 991px) {

    .about-story-grid,
    .about-craft-grid,
    .about-innovation-grid {

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .about-craft-grid {

        display: flex;

        flex-direction: column;
    }

    .about-craft-text {

        order: 1;
    }

    .about-craft-image {

        order: 2;
    }

    .about-image-reveal,
    .about-craft-image,
    .about-innovation-image {

        min-height: 500px;
    }

    .about-image-reveal img,
    .about-craft-image img,
    .about-innovation-image img {

        height: 500px;
    }

    .about-owner {

        grid-template-columns: 1fr;

        gap: 40px;
    }

    .about-owner-two .about-owner-content {

        order: 1;
    }

    .about-owner-two .about-owner-image {

        order: 2;
    }

    .about-owner-image {

        height: 500px;
    }
}


@media (max-width: 575px) {

    .about-hero-new {

        min-height: 560px;

        padding: 80px 20px;
    }

    .about-hero-description {

        font-size: 15px;
    }

    .about-intro,
    .about-story,
    .about-craft,
    .about-innovation,
    .about-leadership {

        padding: 75px 20px;
    }

    .about-section-title {

        font-size: 36px;
    }

    .about-image-reveal,
    .about-craft-image,
    .about-innovation-image {

        min-height: 400px;

        border-radius: 18px;
    }

    .about-image-reveal img,
    .about-craft-image img,
    .about-innovation-image img {

        height: 400px;
    }

    .about-owner-image {

        height: 420px;
    }

    .about-owner-content h3 {

        font-size: 36px;
    }

    .about-gallery {

        padding: 70px 20px;
    }

    .about-gallery-grid {

        grid-template-columns: 1fr;
    }

    .about-gallery-grid > div {

        height: 400px;
    }

    .about-statement {

        padding: 90px 20px;
    }

    .about-cta {

        padding: 90px 20px;
    }

}


.mini-product-card {
    position: relative;
    width: 100%;
    height: 560px !important;
    min-height: 560px !important;

    border: 1px solid rgba(5, 102, 141, 0.28);
    border-radius: 16px;

    overflow: visible;

    background: #ffffff;

    box-shadow:
        0 8px 25px rgba(62, 39, 35, 0.10);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* CARD ABOVE NEIGHBOURS */

.mini-product-card:hover {
    z-index: 10000 !important;
}


/* NORMAL CARD */

.product-card-normal {
    transition:
        opacity 0.30s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* HOVER = ONLY ENLARGE NORMAL CARD */

.mini-product-card:hover > .product-card-normal {
    transform: scale(1.0) !important;

    box-shadow:
        0 14px 35px rgba(62, 39, 35, 0.16) !important;

    z-index: 10 !important;
    border: 1px solid rgba(5, 102, 141, 0.28);
    border-radius: 16px;

    
}

.product-image-box,
.product-image-box img {
    border-radius: 0;
    transition: border-radius 0.3s ease;
}

.mini-product-card:hover .product-image-box,
.mini-product-card:hover .product-image-box img {
    border-radius: 16px;
}

.mini-product-card:hover .product-image-box {
    overflow: hidden;
}
/* =========================================================
   MINI PRODUCT MODULE
========================================================= */

.mini-product-hover-panel {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    width: 780px !important;
    max-width: calc(100vw - 40px);

    height: 460px !important;
    min-height: 460px !important;

    z-index: 9999 !important;

    display: grid !important;
    grid-template-columns: 48% 52% !important;

    overflow: hidden !important;

    border: 1px solid rgba(62, 39, 35, 0.14);
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 35px 100px rgba(62, 39, 35, 0.32),
        0 15px 40px rgba(62, 39, 35, 0.18);

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform:
        translate(-50%, -47%)
        scale(0.94) !important;

    transition:
        opacity 0.28s ease,
        visibility 0.28s ease,
        transform 0.32s cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   CLICK = OPEN
========================================================= */

.mini-product-card.mini-product-active
> .mini-product-hover-panel {

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform:
        translate(-50%, -50%)
        scale(1) !important;
}


/* ACTIVE CARD */

.mini-product-card.mini-product-active
> .product-card-normal {

    opacity: 1;
    pointer-events: none;
    transform: scale(1);
}
/* =========================================================
   NORMAL IMAGE
   ========================================================= */

.mini-product-card .product-image-box {
    position: relative;

    width: 100%;

    height: 425px !important;
    min-height: 425px !important;

    overflow: hidden;

    background: #F4EEE6;
}


.mini-product-card .product-image-box img {
    width: 100%;

    height: 425px !important;

    display: block;
        border-radius: 14px;

    object-fit: fill;

    object-position: center;

    transition:
        transform 0.55s ease,
        filter 0.4s ease;
}


/* IMAGE HOVER */


/* =========================================================
   DISCOUNT BADGE
   ========================================================= */

.product-discount-badge {
    position: absolute;

    top: 14px;
    left: 14px;

    z-index: 5;

    padding: 6px 10px;

    border-radius: 999px;

    background: #B45309;

    color: #ffffff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.4px;

    box-shadow:
        0 5px 15px rgba(180, 83, 9, 0.25);
}


/* =========================================================
   WISHLIST
   ========================================================= */

.mini-wishlist {
    position: absolute;

    top: 13px;
    right: 13px;

    z-index: 6;

    width: 38px;
    height: 38px;

    display: flex;

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

    border: 0;

    border-radius: 50%;

    background: rgba(255,255,255,0.95);

    color: #3E2723;

    font-size: 16px;

    cursor: pointer;

    box-shadow:
        0 5px 18px rgba(0,0,0,0.12);

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.mini-wishlist:hover {
    background: #B45309;

    color: #ffffff;

    transform: scale(1.08);
}



/* =========================================================
   NORMAL CARD BODY
   ========================================================= */

.mini-product-card .card-body {
    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 8px 13px !important;

    background: #ffffff;
}


.mini-product-card .product-category {
    margin: 0 0 3px !important;

    color: #C08B5C;

    font-size: 8px;

    font-weight: 700;

    line-height: 1.1;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.mini-product-card .product-name {
    margin: 0 0 5px !important;

    color: #3E2723;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.2;
}


.mini-product-card .product-price {
    display: flex;

    align-items: center;

    gap: 6px;

    margin: 0 !important;
}


.mini-product-card .product-price .price {
    color: #B45309;

    font-size: 14px;

    font-weight: 800;
}


.mini-product-card .product-price .old-price {
    color: #999999;

    font-size: 9px;

    text-decoration: line-through;
}






/* =========================================================
   LEFT IMAGE
========================================================= */
.mini-product-visual {

    position: relative;

    min-width: 0;

    height: 460px;

    padding: 12px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #F4EEE6 0%,
            #E9D9C7 100%
        );
}

/* =========================================================
   IMAGE WRAPPER
========================================================= */

.mini-product-image-wrap {

    position: relative;

    width: 100%;

    height: 436px;

    overflow: hidden;

    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 14px 32px rgba(62,39,35,0.17);
}

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

.mini-product-main-image {

    width: 100% !important;

    height: 100% !important;

    display: block;

    object-fit: fill !important;

    object-position: center;

    transition:
        transform 0.5s ease;
}


.mini-product-hover-panel:hover
.mini-product-main-image {

    transform: scale(1.025);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.mini-product-image-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(62,39,35,0.58)
        );

    color: #ffffff;

    opacity: 0;

    transition:
        opacity 0.25s ease;
}


.mini-product-image-wrap:hover
.mini-product-image-overlay {

    opacity: 1;
}


.mini-product-image-overlay i {

    font-size: 18px;
}


.mini-product-image-overlay span {

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* =========================================================
   GALLERY DOTS
========================================================= */

.mini-product-gallery-dots {

    position: absolute;

    left: 50%;

    bottom: 18px;

    transform: translateX(-50%);

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 5px;

    padding: 5px 8px;

    border-radius: 999px;

    background: rgba(255,255,255,0.92);

    box-shadow:
        0 4px 14px rgba(0,0,0,0.12);
}


.mini-gallery-dot {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: rgba(62,39,35,0.25);
}


.mini-gallery-dot.active {

    width: 16px;

    border-radius: 999px;

    background: #B45309;
}


/* =========================================================
   RIGHT INFORMATION
========================================================= */
.mini-product-information {

    position: relative;

    min-width: 0;

    height: 460px;

    padding:
        28px
        24px
        18px;

    overflow-y: auto;

    background: #ffffff;

    scrollbar-width: thin;

    scrollbar-color:
        #C08B5C
        transparent;
}
/* =========================================================
   CLOSE
========================================================= */

.mini-product-close {

    position: absolute;

    top: 13px;
    right: 13px;

    z-index: 500;

    width: 27px;
    height: 27px;

    display: flex;

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

    border: 0;

    border-radius: 50%;

    background: rgba(62,39,35,0.06);

    color: #806F64;

    font-size: 11px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.mini-product-close:hover {

    background: #B45309;

    color: #ffffff;

    transform: rotate(90deg);
}


/* =========================================================
   CATEGORY
========================================================= */

.mini-product-category {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 5px;

    padding-right: 30px;

    color: #C08B5C;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.mini-product-category i {

    color: #B45309;

    font-size: 13px;
}


/* =========================================================
   TITLE
========================================================= */

.mini-product-title {

    margin: 0 0 7px;

    color: #3E2723;

    font-size: 21px;

    font-weight: 800;

    line-height: 1.15;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.mini-product-description {

    margin: 0 0 8px;

    color: #6D5A50;

    font-size: 8.5px;

    line-height: 1.45;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* =========================================================
   PRICE
========================================================= */

.mini-price-row {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 7px;
}


.mini-current-price {

    color: #B45309;

    font-size: 19px;

    font-weight: 900;
}


.mini-old-price {

    color: #999999;

    font-size: 9px;

    text-decoration: line-through;
}


.mini-discount {

    padding: 3px 6px;

    border-radius: 4px;

    background: #F4E2D1;

    color: #B45309;

    font-size: 7px;

    font-weight: 800;
}


/* =========================================================
   RATING
========================================================= */

.mini-rating-row {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 5px;

    margin-bottom: 8px;

    padding-bottom: 7px;

    border-bottom:
        1px solid rgba(62,39,35,0.10);
}


.mini-stars {

    display: flex;

    gap: 2px;

    color: #D88B24;

    font-size: 8px;
}


.mini-rating-row strong {

    color: #3E2723;

    font-size: 8px;
}


.mini-rating-row span {

    color: #8B7A70;

    font-size: 7px;
}


/* =========================================================
   INFORMATION GRID
========================================================= */

.mini-product-info-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 5px;

    margin-bottom: 8px;
}


.mini-info-card {

    display: flex;

    align-items: center;

    gap: 6px;

    min-width: 0;

    padding: 6px;

    border:
        1px solid rgba(62,39,35,0.08);

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #FBF7F2
        );
}


.mini-info-icon {

    flex-shrink: 0;

    width: 22px;
    height: 22px;

    display: flex;

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

    border-radius: 50%;

    background: #F4EEE6;

    color: #B45309;

    font-size: 9px;
}


.mini-info-card > div:last-child {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 1px;
}


.mini-info-card strong {

    color: #806F64;

    font-size: 6px;

    line-height: 1;

    letter-spacing: .6px;

    text-transform: uppercase;
}


.mini-info-card span {

    color: #3E2723;

    font-size: 7px;

    font-weight: 700;

    line-height: 1.2;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   QUANTITY
========================================================= */

.mini-quantity-section {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 7px;
}


.mini-quantity-section label {

    color: #3E2723;

    font-size: 8px;

    font-weight: 700;
}


.mini-quantity-control {

    display: flex;

    align-items: center;

    height: 25px;

    border:
        1px solid rgba(62,39,35,0.14);

    border-radius: 6px;

    overflow: hidden;

    background: #ffffff;
}


.mini-quantity-control button {

    width: 25px;
    height: 25px;

    display: flex;

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

    border: 0;

    background: #F4EEE6;

    color: #3E2723;

    font-size: 8px;

    cursor: pointer;
}


.mini-quantity-control button:hover {

    background: #B45309;

    color: #ffffff;
}


.mini-quantity-input {

    width: 32px;
    height: 25px;

    border: 0;

    outline: 0;

    text-align: center;

    color: #3E2723;

    background: #ffffff;

    font-size: 8px;

    font-weight: 700;

    appearance: textfield;
}


.mini-quantity-input::-webkit-inner-spin-button,
.mini-quantity-input::-webkit-outer-spin-button {

    appearance: none;

    margin: 0;
}


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

.mini-product-buttons {

    display: grid;

    grid-template-columns:
        1.1fr
        1fr
        1fr;

    gap: 5px;

    margin-bottom: 7px;
}


.mini-action-btn {

    min-width: 0;

    min-height: 30px;

    display: flex;

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

    gap: 4px;

    padding: 6px 5px;

    border: 0;

    border-radius: 6px;

    color: #ffffff;

    text-decoration: none;

    font-size: 7px;

    font-weight: 800;

    line-height: 1;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.mini-action-btn:hover {

    transform: translateY(-2px);

    color: #ffffff;

    box-shadow:
        0 6px 14px rgba(62,39,35,0.18);
}


.mini-cart-btn {
    background: #05668D;
}


.mini-cart-btn:hover {
    background: #044E6C;
}


.mini-whatsapp-btn {
    background: #218838;
}


.mini-whatsapp-btn:hover {
    background: #176A2A;
}


.mini-buy-btn {
    background: #B45309;
}


.mini-buy-btn:hover {
    background: #8F3F08;
}


.mini-action-btn i {
    font-size: 9px;
}


/* =========================================================
   TRUST ROW
========================================================= */

.mini-trust-row {

    display: grid;

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

    gap: 3px;

    padding-top: 6px;

    border-top:
        1px solid rgba(62,39,35,0.08);
}


.mini-trust-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2px;

    text-align: center;

    color: #806F64;

    font-size: 6px;
}


.mini-trust-item i {

    color: #B45309;

    font-size: 10px;
}


.mini-trust-item span {

    font-size: 6px;

    font-weight: 700;
}


/* =========================================================
   FULL PRODUCT LINK
========================================================= */

.mini-full-product-link {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 4px;

    margin-top: 5px;

    color: #05668D;

    font-size: 7px;

    font-weight: 800;

    text-decoration: none;
}


.mini-full-product-link:hover {
    color: #B45309;
}


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

@media (max-width: 991px) {

    .mini-product-hover-panel {

        width: 560px !important;

        height: 350px !important;

        min-height: 350px !important;

        grid-template-columns:
            46% 54% !important;
    }

    .mini-product-visual {
        height: 350px;
    }

    .mini-product-image-wrap {
        height: 330px;
    }

    .mini-product-information {

        height: 350px;

        padding:
            18px
            15px
            12px;
    }

    .mini-product-title {
        font-size: 18px;
    }
}


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

@media (max-width: 767px) {

    .mini-product-hover-panel {

        width: calc(100vw - 30px) !important;

        max-width: 430px !important;

        height: auto !important;

        max-height: 90vh !important;

        min-height: 0 !important;

        grid-template-columns: 1fr !important;

        overflow-y: auto !important;
    }


    .mini-product-visual {

        height: 190px;

        padding: 9px;
    }


    .mini-product-image-wrap {
        height: 170px;
    }


    .mini-product-gallery-dots {
        display: none;
    }


    .mini-product-information {

        height: auto;

        padding: 14px;

        overflow: visible;
    }


    .mini-product-close {
        display: flex;
    }


    .mini-product-title {
        font-size: 18px;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 480px) {

    .mini-product-hover-panel {

        width: calc(100vw - 20px) !important;

        max-height: 92vh !important;
    }

}


/* =========================================================
   SUCCESS MESSAGE
========================================================= */

.mini-product-message {

    position: absolute;

    left: 50%;
    bottom: 12px;

    z-index: 100;

    transform:
        translateX(-50%)
        translateY(10px);

    padding: 7px 13px;

    border-radius: 999px;

    background: #05668D;

    color: #ffffff;

    font-size: 8px;

    font-weight: 800;

    white-space: nowrap;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.mini-product-message.show {

    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);
}

/* =========================================================
   MEENAKSHI ENTERPRISES
   PREMIUM LOGIN PAGE
========================================================= */

:root {

    --login-brown: #4a2815;
    --login-brown-dark: #2d180c;

    --login-gold: #c6923e;
    --login-gold-light: #e2bd73;
    --login-gold-dark: #98651e;

    --login-cream: #f8f4ed;
    --login-white: #ffffff;

    --login-text: #211b17;
    --login-muted: #77716a;

    --login-border: #ddd6cc;

    --login-danger: #a83c32;
}


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

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

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    background: var(--login-cream);

    color: var(--login-text);
}


/* =========================================================
   MAIN
========================================================= */

.login-shell {

    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(520px, 0.92fr);

    overflow: hidden;
}


/* =========================================================
   LEFT VISUAL
========================================================= */

.login-visual {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    color: #ffffff;

    background: #211208;
}


.visual-image {

    position: absolute;

    inset: 0;

    background-image:
        url("../images/products/product-4.jpeg");

    background-size: cover;

    background-position: center;

    transform: scale(1.03);

    animation:
        luxuryZoom 18s ease-in-out infinite alternate;
}


@keyframes luxuryZoom {

    from {
        transform: scale(1.03);
    }

    to {
        transform: scale(1.09);
    }
}


/* =========================================================
   VISUAL OVERLAY
========================================================= */

.visual-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(20, 9, 3, .82) 0%,
            rgba(38, 18, 7, .56) 42%,
            rgba(20, 9, 3, .18) 100%
        ),

        linear-gradient(
            0deg,
            rgba(13, 6, 2, .92) 0%,
            transparent 45%
        );
}


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

.visual-brand {

    position: absolute;

    top: 42px;
    left: 58px;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 15px;
}


.brand-lotus {

    width: 54px;
    height: 54px;

    display: flex;

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

    border: 1px solid
        rgba(226, 189, 115, .65);

    border-radius: 50%;

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

    font-size: 28px;

    background:
        rgba(0, 0, 0, .12);

    backdrop-filter: blur(5px);
}


.brand-name {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 25px;

    letter-spacing: .2px;
}


.brand-tagline {

    margin-top: 5px;

    font-size: 9px;

    letter-spacing: 4px;

    opacity: .8;
}


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

.visual-content {

    position: absolute;

    left: 80px;

    bottom: 75px;

    z-index: 2;

    max-width: 610px;
}


.visual-eyebrow {

    margin-bottom: 18px;

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

    font-size: 12px;

    letter-spacing: 4px;

    font-weight: 600;
}


.visual-eyebrow span {

    margin: 0 8px;

    opacity: .8;
}


.visual-content h1 {

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(48px, 5vw, 78px);

    line-height: .98;

    font-weight: 400;

    letter-spacing: -2px;
}


.visual-content h1 em {

    display: block;

    margin-top: 8px;

    color: #efd39a;

    font-weight: 400;
}


.visual-content > p {

    max-width: 460px;

    margin-top: 28px;

    font-size: 17px;

    line-height: 1.75;

    color: rgba(255, 255, 255, .82);
}


/* =========================================================
   FEATURES
========================================================= */

.visual-features {

    display: grid;

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

    max-width: 650px;

    margin-top: 45px;

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

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


.visual-feature {

    min-height: 78px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 7px;

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

    text-align: center;
}


.visual-feature:last-child {
    border-right: 0;
}


.visual-feature i {

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

    font-size: 21px;
}


.visual-feature span {

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .3px;
}


.visual-feature small {

    display: block;

    margin-top: 2px;

    font-size: 9px;

    opacity: .65;

    font-weight: 400;
}


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

.visual-quote {

    margin-top: 28px;

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

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size: 21px;

    line-height: 1.35;
}


.visual-quote strong {

    color: #efd39a;

    font-weight: 400;
}


/* =========================================================
   RIGHT PANEL
========================================================= */

.login-panel {

    position: relative;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 80px 7% 55px;

    background:

        radial-gradient(
            circle at 85% 15%,
            rgba(198, 146, 62, .10),
            transparent 25%
        ),

        radial-gradient(
            circle at 15% 90%,
            rgba(198, 146, 62, .07),
            transparent 28%
        ),

        var(--login-cream);
}


/* =========================================================
   TOP REGISTER
========================================================= */

.top-register {

    position: absolute;

    top: 38px;
    right: 55px;

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 13px;

    color: var(--login-muted);
}


.top-register a {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--login-gold-dark);

    text-decoration: none;

    font-weight: 600;

    transition: .3s ease;
}


.top-register a:hover {

    color: var(--login-brown);

    gap: 12px;
}


/* =========================================================
   LOGIN CARD
========================================================= */

.login-card {

    width: min(100%, 590px);

    position: relative;

    padding: 48px 54px 38px;

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

    border: 1px solid
        rgba(198, 146, 62, .35);

    border-radius: 25px;

    box-shadow:
        0 25px 70px rgba(55, 35, 17, .12),
        0 5px 18px rgba(55, 35, 17, .06);

    backdrop-filter: blur(16px);

    animation:
        loginCardIn .8s ease both;
}


@keyframes loginCardIn {

    from {
        opacity: 0;
        transform:
            translateY(25px)
            scale(.98);
    }

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


/* =========================================================
   GOLD CARD DETAIL
========================================================= */

.login-card::before {

    content: "";

    position: absolute;

    inset: 9px;

    border: 1px solid
        rgba(198, 146, 62, .18);

    border-radius: 18px;

    pointer-events: none;
}


/* =========================================================
   LOGIN BRAND
========================================================= */

.login-brand {

    position: relative;

    text-align: center;

    margin-bottom: 35px;
}


.login-lotus {

    width: 57px;
    height: 57px;

    margin: 0 auto 13px;

    display: flex;

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

    color: var(--login-gold);

    font-size: 30px;

    border: 1px solid
        rgba(198, 146, 62, .4);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #fffdf9,
            #f7eee0
        );

    box-shadow:
        0 7px 20px
        rgba(198, 146, 62, .12);
}


.login-brand-name {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 24px;

    color: #241b16;
}


.login-brand-tagline {

    margin-top: 6px;

    font-size: 8px;

    letter-spacing: 3px;

    color: #7c736a;
}


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

.login-heading {

    text-align: center;

    margin-bottom: 28px;
}


.login-heading h2 {

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 40px;

    font-weight: 400;

    color: #17120f;
}


.login-heading p {

    margin: 9px 0 0;

    color: var(--login-muted);

    font-size: 14px;

    letter-spacing: .3px;
}


/* =========================================================
   ERROR
========================================================= */

.login-error {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    padding: 13px 15px;

    border: 1px solid
        rgba(168, 60, 50, .25);

    border-radius: 10px;

    background: rgba(168, 60, 50, .07);

    color: var(--login-danger);

    font-size: 13px;
}


.login-error i {
    font-size: 17px;
}


/* =========================================================
   FORM
========================================================= */

.form-group {

    margin-bottom: 22px;
}


.form-group label {

    display: block;

    margin-bottom: 9px;

    color: #302822;

    font-size: 14px;

    font-weight: 600;
}


/* =========================================================
   INPUT
========================================================= */

.input-wrapper {

    position: relative;

    display: flex;

    align-items: center;
}


.input-wrapper > i {

    position: absolute;

    left: 17px;

    z-index: 2;

    color: #827970;

    font-size: 19px;

    pointer-events: none;
}


.input-wrapper input {

    width: 100%;

    height: 57px;

    padding:
        0 50px 0 50px;

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

    border-radius: 11px;

    outline: none;

    background: #fffefa;

    color: #211b17;

    font-size: 14px;

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


.input-wrapper input::placeholder {

    color: #aaa39b;
}


.input-wrapper input:focus {

    border-color:
        var(--login-gold);

    background: #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(198, 146, 62, .11);
}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.password-toggle {

    position: absolute;

    right: 14px;

    width: 35px;
    height: 35px;

    border: 0;

    background: transparent;

    color: #8b8279;

    cursor: pointer;

    font-size: 18px;
}


.password-toggle:hover {
    color: var(--login-gold-dark);
}


/* =========================================================
   OPTIONS
========================================================= */

.login-options {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 2px;

    margin-bottom: 25px;

    font-size: 13px;
}


.remember {

    display: flex;

    align-items: center;

    gap: 8px;

    cursor: pointer;

    color: #5f5750;
}


.remember input {
    display: none;
}


.custom-checkbox {

    width: 19px;
    height: 19px;

    display: flex;

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

    border: 1px solid #c9c0b7;

    border-radius: 4px;

    color: white;

    transition: .25s ease;
}


.remember input:checked
~ .custom-checkbox {

    background: var(--login-gold);

    border-color: var(--login-gold);
}


.custom-checkbox i {

    opacity: 0;

    font-size: 13px;
}


.remember input:checked
~ .custom-checkbox i {
    opacity: 1;
}


.forgot-link {

    color: var(--login-gold-dark);

    text-decoration: none;

    font-weight: 600;
}


.forgot-link:hover {
    text-decoration: underline;
}


/* =========================================================
   SIGN IN
========================================================= */

.login-submit {

    width: 100%;

    height: 57px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    border: 0;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #6b3918,
            #43230f
        );

    color: #fff;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: .3px;

    cursor: pointer;

    box-shadow:
        0 10px 25px
        rgba(67, 35, 15, .22);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.login-submit i {

    font-size: 18px;

    transition: transform .25s ease;
}


.login-submit:hover {

    transform: translateY(-2px);

    box-shadow:
        0 15px 30px
        rgba(67, 35, 15, .28);
}


.login-submit:hover i {
    transform: translateX(5px);
}


/* =========================================================
   DIVIDER
========================================================= */

.login-divider {

    display: flex;

    align-items: center;

    gap: 15px;

    margin: 29px 0;
}


.login-divider span {

    flex: 1;

    height: 1px;

    background: #ded8d0;
}


.login-divider em {

    font-style: normal;

    color: #9a928a;

    font-size: 11px;

    letter-spacing: 2px;
}


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

.social-login {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}


.social-btn {

    height: 49px;

    display: flex;

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

    gap: 10px;

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

    border-radius: 9px;

    background: #fff;

    color: #45403b;

    font-size: 12px;

    cursor: pointer;

    transition: .25s ease;
}


.social-btn:hover {

    border-color:
        var(--login-gold);

    box-shadow:
        0 5px 15px
        rgba(55, 35, 17, .07);

    transform: translateY(-1px);
}


.google-icon {

    font-weight: 800;

    font-size: 19px;

    color: #4285f4;
}


.facebook-icon {

    width: 21px;
    height: 21px;

    display: flex;

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

    border-radius: 50%;

    background: #1877f2;

    color: white;

    font-family: Arial;

    font-size: 16px;

    font-weight: bold;
}


/* =========================================================
   CREATE ACCOUNT
========================================================= */

.create-account {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 6px;

    margin-top: 27px;

    color: #777068;

    font-size: 13px;
}


.create-account a {

    color: var(--login-gold-dark);

    text-decoration: none;

    font-weight: 600;
}


.create-account a i {

    margin-left: 4px;

    transition: .2s ease;
}


.create-account a:hover i {
    margin-left: 8px;
}


/* =========================================================
   SECURITY
========================================================= */

.login-security {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 27px;

    padding-top: 20px;

    border-top: 1px solid #ebe6df;

    color: #99918a;

    font-size: 10px;
}


.login-security i {

    color: var(--login-gold);

    font-size: 15px;
}


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

.login-footer {

    width: 100%;

    position: absolute;

    bottom: 22px;

    left: 0;

    padding: 0 55px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #989089;

    font-size: 10px;
}


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

@media (max-width: 1200px) {

    .login-shell {

        grid-template-columns:
            1fr
            1fr;
    }

    .visual-content {

        left: 50px;
    }

    .visual-brand {

        left: 40px;
    }

    .login-card {

        padding:
            42px 40px 34px;
    }
}


@media (max-width: 900px) {

    .login-shell {

        display: block;
    }

    .login-visual {

        min-height: 420px;

        height: 420px;
    }

    .visual-content {

        left: 35px;
        right: 35px;
        bottom: 35px;
    }

    .visual-content h1 {

        font-size: 48px;
    }

    .visual-features {

        margin-top: 25px;
    }

    .login-panel {

        min-height: auto;

        padding:
            70px 25px 80px;
    }

    .login-footer {

        position: relative;

        bottom: auto;

        margin-top: 30px;

        padding: 0;

        justify-content: center;
    }

    .login-footer span:last-child {
        display: none;
    }

    .top-register {

        top: 25px;
        right: 25px;
    }
}


@media (max-width: 600px) {

    .login-visual {

        min-height: 380px;

        height: 380px;
    }

    .visual-brand {

        top: 25px;
        left: 22px;
    }

    .brand-name {
        font-size: 19px;
    }

    .brand-tagline {
        font-size: 7px;
        letter-spacing: 2px;
    }

    .visual-content {

        left: 22px;
        right: 22px;
        bottom: 25px;
    }

    .visual-eyebrow {

        font-size: 9px;

        letter-spacing: 2px;
    }

    .visual-content h1 {

        font-size: 38px;

        letter-spacing: -1px;
    }

    .visual-content > p {

        margin-top: 15px;

        font-size: 13px;

        line-height: 1.5;
    }

    .visual-features {

        display: none;
    }

    .visual-quote {
        display: none;
    }

    .login-panel {

        padding:
            75px 15px 50px;
    }

    .top-register {

        right: 18px;

        font-size: 11px;
    }

    .top-register span {
        display: none;
    }

    .login-card {

        padding:
            35px 22px 28px;

        border-radius: 19px;
    }

    .login-heading h2 {

        font-size: 34px;
    }

    .social-login {

        grid-template-columns: 1fr;
    }

    .login-footer {

        font-size: 9px;
    }
}
.login-submit {
    width: 100%;
    height: 57px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    border: 0;
    border-radius: 11px;

    background: linear-gradient(
        135deg,
        #d94f7d,
        #b83263
    );

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px;

    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(184, 50, 99, .25);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.login-submit i {
    font-size: 18px;
    transition: transform .25s ease;
}

.login-submit:hover {
    transform: translateY(-2px);

    background: linear-gradient(
        135deg,
        #e45b88,
        #c2386a
    );

    box-shadow:
        0 15px 32px rgba(184, 50, 99, .32);
}

.login-submit:hover i {
    transform: translateX(5px);
}

.login-submit:active {
    transform: translateY(0);
}
/* =========================================================
   MEENAKSHI ENTERPRISES
   PREMIUM REGISTER PAGE
========================================================= */

:root {
    --register-pink: #d94f7d;
    --register-pink-dark: #b83263;
    --register-pink-light: #ed8fac;

    --register-gold: #c6923e;
    --register-gold-light: #e2bd73;

    --register-cream: #f8f4ed;
    --register-white: #ffffff;

    --register-text: #211b17;
    --register-muted: #77716a;
    --register-border: #ddd6cc;

    --register-danger: #a83c32;
}


/* RESET */

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

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    font-family:
        "DM Sans",
        "Segoe UI",
        Arial,
        sans-serif;

    background: var(--register-cream);
    color: var(--register-text);
}


/* =========================================================
   SHELL
========================================================= */

.register-shell {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(520px, .92fr);

    overflow: hidden;
}


/* =========================================================
   LEFT
========================================================= */

.register-visual {
    position: relative;

    min-height: 100vh;

    overflow: hidden;

    color: white;

    background: #211208;
}


.register-image {
    position: absolute;

    inset: 0;

    background-image:
        url("../images/products/product-4.jpeg");

    background-size: cover;

    background-position: center;

    transform: scale(1.03);

    animation:
        registerLuxuryZoom
        18s
        ease-in-out
        infinite
        alternate;
}


@keyframes registerLuxuryZoom {

    from {
        transform: scale(1.03);
    }

    to {
        transform: scale(1.09);
    }
}


/* =========================================================
   OVERLAY
========================================================= */

.register-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(20, 9, 3, .84),
            rgba(38, 18, 7, .54) 45%,
            rgba(20, 9, 3, .18)
        ),

        linear-gradient(
            0deg,
            rgba(13, 6, 2, .94),
            transparent 55%
        );
}


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

.register-brand {
    position: absolute;

    top: 42px;
    left: 58px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 15px;
}


.register-logo,
.register-mini-logo {
    display: flex;

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

    border-radius: 50%;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-weight: 600;
}


.register-logo {
    width: 54px;
    height: 54px;

    border: 1px solid
        rgba(226,189,115,.65);

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

    background:
        rgba(0,0,0,.15);

    backdrop-filter: blur(8px);
}


.register-brand-name {
    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 25px;
}


.register-brand-tagline {
    margin-top: 5px;

    font-size: 9px;

    letter-spacing: 4px;

    opacity: .8;
}


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

.register-visual-content {
    position: absolute;

    left: 80px;
    bottom: 75px;

    z-index: 5;

    max-width: 620px;
}


.register-eyebrow {
    margin-bottom: 18px;

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

    font-size: 12px;

    letter-spacing: 4px;

    font-weight: 600;
}


.register-eyebrow span {
    margin: 0 8px;
}


.register-visual-content h1 {
    margin: 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(48px, 5vw, 76px);

    line-height: .98;

    font-weight: 400;

    letter-spacing: -2px;
}


.register-visual-content h1 em {
    display: block;

    margin-top: 8px;

    color: #efd39a;

    font-style: italic;
}


.register-visual-content > p {
    max-width: 470px;

    margin-top: 28px;

    font-size: 16px;

    line-height: 1.75;

    color:
        rgba(255,255,255,.82);
}


/* =========================================================
   FEATURES
========================================================= */

.register-features {
    display: grid;

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

    max-width: 650px;

    margin-top: 40px;

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

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


.register-feature {
    min-height: 78px;

    display: flex;

    flex-direction: column;

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

    gap: 5px;

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

    text-align: center;
}


.register-feature:last-child {
    border-right: 0;
}


.register-feature i {
    color:
        var(--register-gold-light);

    font-size: 20px;
}


.register-feature strong {
    font-size: 11px;
}


.register-feature small {
    font-size: 9px;

    opacity: .65;
}


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

.register-quote {
    margin-top: 28px;

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

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size: 20px;

    line-height: 1.4;
}


.register-quote strong {
    color: #efd39a;

    font-weight: 400;
}


/* =========================================================
   RIGHT PANEL
========================================================= */

.register-panel {
    position: relative;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding:
        80px 7% 55px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(217,79,125,.09),
            transparent 25%
        ),

        radial-gradient(
            circle at 15% 90%,
            rgba(198,146,62,.08),
            transparent 28%
        ),

        var(--register-cream);
}


/* =========================================================
   TOP LOGIN
========================================================= */

.top-login {
    position: absolute;

    top: 38px;
    right: 55px;

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 13px;

    color:
        var(--register-muted);
}


.top-login a {
    color:
        var(--register-pink-dark);

    text-decoration: none;

    font-weight: 700;

    transition: .3s ease;
}


.top-login a i {
    margin-left: 4px;

    transition: .25s ease;
}


.top-login a:hover {
    color:
        var(--register-pink);
}


.top-login a:hover i {
    margin-left: 8px;
}


/* =========================================================
   CARD
========================================================= */

.register-card {
    position: relative;

    width: min(100%, 590px);

    padding:
        43px 54px 32px;

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

    border:
        1px solid
        rgba(217,79,125,.20);

    border-radius: 25px;

    box-shadow:
        0 30px 80px
        rgba(55,35,17,.13),

        0 8px 25px
        rgba(55,35,17,.06);

    backdrop-filter: blur(18px);

    animation:
        registerCardIn
        .75s
        ease
        both;
}


@keyframes registerCardIn {

    from {
        opacity: 0;

        transform:
            translateY(25px)
            scale(.98);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


.register-card-border {
    position: absolute;

    inset: 9px;

    border:
        1px solid
        rgba(217,79,125,.13);

    border-radius: 18px;

    pointer-events: none;
}


/* =========================================================
   MINI BRAND
========================================================= */

.register-mini-brand {
    position: relative;

    text-align: center;

    margin-bottom: 23px;
}


.register-mini-logo {
    width: 53px;
    height: 53px;

    margin:
        0 auto 10px;

    border:
        1px solid
        rgba(217,79,125,.35);

    color:
        var(--register-pink-dark);

    background:
        linear-gradient(
            145deg,
            #fffdf9,
            #fdf0f5
        );

    box-shadow:
        0 8px 22px
        rgba(217,79,125,.12);
}


.register-mini-name {
    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 23px;
}


.register-mini-tagline {
    margin-top: 5px;

    color: #81786f;

    font-size: 8px;

    letter-spacing: 3px;
}


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

.register-heading {
    text-align: center;

    margin-bottom: 23px;
}


.register-heading h2 {
    margin: 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 37px;

    font-weight: 500;

    color: #17120f;
}


.register-heading p {
    margin-top: 7px;

    color:
        var(--register-muted);

    font-size: 13px;
}


/* =========================================================
   ERROR
========================================================= */

.register-error {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    padding:
        12px 14px;

    border:
        1px solid
        rgba(168,60,50,.24);

    border-radius: 10px;

    background:
        rgba(168,60,50,.07);

    color:
        var(--register-danger);

    font-size: 12px;
}


/* =========================================================
   FORM
========================================================= */

.register-form-group {
    margin-bottom: 17px;
}


.register-form-group label {
    display: block;

    margin-bottom: 7px;

    color: #302822;

    font-size: 13px;

    font-weight: 700;
}


/* =========================================================
   INPUT
========================================================= */

.register-input-wrapper {
    position: relative;

    display: flex;

    align-items: center;
}


.register-input-wrapper > i {
    position: absolute;

    left: 17px;

    z-index: 2;

    color: #827970;

    font-size: 17px;

    pointer-events: none;
}


.register-input-wrapper input {
    width: 100%;

    height: 53px;

    padding:
        0 50px 0 48px;

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

    border-radius: 11px;

    outline: none;

    background: #fffefa;

    color: #211b17;

    font-family: inherit;

    font-size: 13px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.register-input-wrapper input::placeholder {
    color: #aaa39b;
}


.register-input-wrapper input:focus {
    border-color:
        var(--register-pink);

    background: white;

    box-shadow:
        0 0 0 4px
        rgba(217,79,125,.10);
}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.register-password-toggle {
    position: absolute;

    right: 10px;

    width: 35px;
    height: 35px;

    border: 0;

    background: transparent;

    color: #8b8279;

    cursor: pointer;

    font-size: 17px;
}


.register-password-toggle:hover {
    color:
        var(--register-pink-dark);
}


/* =========================================================
   TERMS
========================================================= */

.register-terms {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin:
        4px 0 20px;

    color: #706860;

    font-size: 11px;

    line-height: 1.5;

    cursor: pointer;
}


.register-terms input {
    display: none;
}


.register-checkbox {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    display: flex;

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

    border:
        1px solid
        #c9c0b7;

    border-radius: 4px;

    color: white;

    transition: .25s ease;
}


.register-terms input:checked
+ .register-checkbox {
    background:
        var(--register-pink);

    border-color:
        var(--register-pink);
}


.register-checkbox i {
    opacity: 0;

    font-size: 12px;
}


.register-terms input:checked
+ .register-checkbox i {
    opacity: 1;
}


.register-terms a {
    color:
        var(--register-pink-dark);

    font-weight: 700;

    text-decoration: none;
}


.register-terms a:hover {
    text-decoration: underline;
}


/* =========================================================
   SUBMIT
========================================================= */

.register-submit {
    width: 100%;

    height: 55px;

    display: flex;

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

    gap: 12px;

    border: 0;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #d94f7d,
            #b83263
        );

    color: white;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .2px;

    cursor: pointer;

    box-shadow:
        0 11px 27px
        rgba(184,50,99,.25);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.register-submit i {
    font-size: 17px;

    transition:
        transform .25s ease;
}


.register-submit:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #e45b88,
            #c2386a
        );

    box-shadow:
        0 16px 34px
        rgba(184,50,99,.32);
}


.register-submit:hover i {
    transform: translateX(5px);
}


.register-submit:active {
    transform: translateY(0);
}


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

.register-login {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 5px;

    margin-top: 19px;

    color: #777068;

    font-size: 12px;
}


.register-login a {
    color:
        var(--register-pink-dark);

    font-weight: 700;

    text-decoration: none;
}


.register-login a i {
    margin-left: 3px;

    transition: .2s ease;
}


.register-login a:hover i {
    margin-left: 7px;
}


/* =========================================================
   SECURITY
========================================================= */

.register-security {
    display: flex;

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

    gap: 6px;

    margin-top: 18px;

    padding-top: 15px;

    border-top:
        1px solid #ebe6df;

    color: #99918a;

    font-size: 9px;
}


.register-security i {
    color:
        var(--register-pink);

    font-size: 13px;
}


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

.register-footer {
    position: absolute;

    bottom: 20px;
    left: 55px;
    right: 55px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #989089;

    font-size: 9px;
}


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

@media (max-width: 1200px) {

    .register-shell {
        grid-template-columns:
            1fr 1fr;
    }

    .register-visual-content {
        left: 50px;
    }

    .register-brand {
        left: 40px;
    }

    .register-card {
        padding:
            38px 40px 30px;
    }
}


@media (max-width: 900px) {

    .register-shell {
        display: block;
    }

    .register-visual {
        min-height: 420px;
        height: 420px;
    }

    .register-visual-content {
        left: 35px;
        right: 35px;
        bottom: 35px;
    }

    .register-panel {
        min-height: auto;

        padding:
            75px 25px 80px;
    }

    .register-footer {
        position: relative;

        left: auto;
        right: auto;
        bottom: auto;

        margin-top: 30px;

        justify-content: center;
    }

    .register-footer span:last-child {
        display: none;
    }
}


@media (max-width: 600px) {

    .register-visual {
        min-height: 370px;
        height: 370px;
    }

    .register-brand {
        top: 25px;
        left: 22px;
    }

    .register-brand-name {
        font-size: 19px;
    }

    .register-brand-tagline {
        font-size: 7px;
        letter-spacing: 2px;
    }

    .register-visual-content {
        left: 22px;
        right: 22px;
        bottom: 25px;
    }

    .register-eyebrow {
        font-size: 8px;
        letter-spacing: 2px;
    }

    .register-visual-content h1 {
        font-size: 37px;
    }

    .register-visual-content > p {
        margin-top: 14px;
        font-size: 12px;
        line-height: 1.5;
    }

    .register-features,
    .register-quote {
        display: none;
    }

    .register-panel {
        padding:
            70px 15px 45px;
    }

    .top-login {
        top: 24px;
        right: 18px;

        font-size: 11px;
    }

    .top-login span {
        display: none;
    }

    .register-card {
        padding:
            32px 21px 27px;

        border-radius: 19px;
    }

    .register-heading h2 {
        font-size: 32px;
    }

    .register-footer {
        font-size: 8px;
    }
}



/* =========================================================
   MEENAKSHI ENTERPRISES
   PREMIUM CUSTOMER ACCOUNT
========================================================= */

.account-page {
    min-height: 100vh;
    padding: 70px 20px 100px;

    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(217, 79, 125, .07),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 15%,
            rgba(198, 146, 62, .08),
            transparent 25%
        ),
        #f8f4ed;
}

.account-container {
    width: min(1180px, 100%);
    margin: auto;
}


/* =========================================================
   HEADER
========================================================= */

.account-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
}

.account-eyebrow,
.orders-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #b83263;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.account-heading h1 {
    margin: 10px 0 8px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(36px, 5vw, 58px);
    line-height: 1;

    font-weight: 400;
    color: #211814;
}

.account-heading h1 span {
    color: #b83263;
}

.account-heading p {
    margin: 0;

    color: #81776f;
    font-size: 15px;
}


.account-shop-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 14px 21px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #d94f7d,
            #b83263
        );

    color: #fff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    box-shadow:
        0 10px 25px
        rgba(184, 50, 99, .20);

    transition: .3s ease;
}

.account-shop-btn:hover {
    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 15px 32px
        rgba(184, 50, 99, .28);
}


/* =========================================================
   ACCOUNT GRID
========================================================= */

.account-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(280px, .7fr);

    gap: 22px;

    margin-bottom: 65px;
}


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

.account-profile-card {
    position: relative;

    padding: 32px;

    border:
        1px solid
        rgba(198, 146, 62, .25);

    border-radius: 22px;

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

    box-shadow:
        0 18px 55px
        rgba(55, 35, 17, .08);

    overflow: hidden;
}

.account-profile-card::before {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    top: -120px;
    right: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(217, 79, 125, .13),
            transparent 68%
        );
}


.profile-top {
    position: relative;

    display: flex;
    align-items: center;

    gap: 18px;
}


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

    flex: 0 0 72px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #d94f7d,
            #b83263
        );

    color: #fff;

    font-family:
        Georgia,
        serif;

    font-size: 30px;

    box-shadow:
        0 10px 25px
        rgba(184, 50, 99, .25);
}


.profile-label {
    display: block;

    margin-bottom: 3px;

    color: #b83263;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}


.profile-top h2 {
    margin: 0;

    font-family:
        Georgia,
        serif;

    font-size: 27px;
    font-weight: 400;

    color: #241b16;
}


.profile-top p {
    margin: 5px 0 0;

    color: #8a8179;

    font-size: 12px;
}

.profile-top p i {
    color: #c6923e;
}


.profile-divider {
    height: 1px;

    margin: 27px 0;

    background:
        #ebe5de;
}


.profile-info {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 19px;
}


.profile-info-icon {
    width: 43px;
    height: 43px;

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

    border-radius: 12px;

    background: #fdf0f5;

    color: #b83263;

    font-size: 18px;
}


.profile-info small {
    display: block;

    margin-bottom: 3px;

    color: #999089;

    font-size: 10px;

    letter-spacing: 1px;
}


.profile-info strong {
    display: block;

    color: #332923;

    font-size: 14px;

    font-weight: 500;

    word-break: break-word;
}


.profile-actions {
    display: flex;

    gap: 11px;

    margin-top: 27px;
}


.profile-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 45px;

    padding: 0 19px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;

    transition: .25s ease;
}


.profile-action.primary {
    background:
        linear-gradient(
            135deg,
            #d94f7d,
            #b83263
        );

    color: #fff;

    box-shadow:
        0 8px 18px
        rgba(184, 50, 99, .18);
}


.profile-action.primary:hover {
    color: #fff;
    transform: translateY(-2px);
}


.profile-action.logout {
    border:
        1px solid
        #ded6ce;

    color: #756c65;

    background: #fff;
}


.profile-action.logout:hover {
    color: #a83c32;

    border-color:
        rgba(168, 60, 50, .3);
}


/* =========================================================
   STATS
========================================================= */

.account-stats {
    display: flex;
    flex-direction: column;

    gap: 14px;
}


.stat-card {
    flex: 1;

    display: flex;
    align-items: center;

    gap: 17px;

    padding: 23px;

    border:
        1px solid
        rgba(198, 146, 62, .20);

    border-radius: 18px;

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

    box-shadow:
        0 12px 35px
        rgba(55, 35, 17, .055);

    transition: .3s ease;
}


.stat-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 40px
        rgba(55, 35, 17, .09);
}


.stat-icon {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

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

    border-radius: 15px;

    font-size: 21px;
}


.stat-icon.pink {
    background: #fcecf3;
    color: #c43d6c;
}

.stat-icon.gold {
    background: #f8f0df;
    color: #b88632;
}

.stat-icon.green {
    background: #edf7f0;
    color: #3f8a5b;
}


.stat-card span {
    display: block;

    margin-bottom: 4px;

    color: #968d85;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


.stat-card strong {
    display: block;

    color: #29201b;

    font-family:
        Georgia,
        serif;

    font-size: 23px;

    font-weight: 400;
}


.stat-card .active-status {
    color: #3f8a5b;

    font-family:
        "Inter",
        "Segoe UI",
        sans-serif;

    font-size: 15px;
    font-weight: 600;
}


/* =========================================================
   ORDERS HEADING
========================================================= */

.orders-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 24px;
}


.orders-heading h2 {
    margin: 7px 0 0;

    font-family:
        Georgia,
        serif;

    font-size: 34px;

    font-weight: 400;

    color: #251c17;
}


.order-count-badge {
    padding: 8px 13px;

    border-radius: 50px;

    background: #fcecf3;

    color: #b83263;

    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   EMPTY ORDERS
========================================================= */

.empty-orders {
    padding: 75px 25px;

    text-align: center;

    border:
        1px solid
        rgba(198, 146, 62, .20);

    border-radius: 22px;

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

    box-shadow:
        0 15px 45px
        rgba(55, 35, 17, .06);
}


.empty-order-icon {
    width: 82px;
    height: 82px;

    margin: auto;

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

    border-radius: 50%;

    background: #fcecf3;

    color: #c43d6c;

    font-size: 34px;
}


.empty-orders h3 {
    margin: 22px 0 8px;

    font-family:
        Georgia,
        serif;

    font-size: 28px;

    font-weight: 400;

    color: #2a211c;
}


.empty-orders p {
    max-width: 560px;

    margin: 0 auto 25px;

    color: #817870;

    font-size: 14px;

    line-height: 1.8;
}


.empty-order-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 13px 20px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #d94f7d,
            #b83263
        );

    color: #fff;

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;

    box-shadow:
        0 9px 22px
        rgba(184, 50, 99, .20);

    transition: .25s ease;
}


.empty-order-btn:hover {
    color: #fff;

    transform: translateY(-2px);
}


/* =========================================================
   ORDER CARD
========================================================= */

.orders-list {
    display: grid;

    gap: 20px;
}


.order-card {
    overflow: hidden;

    border:
        1px solid
        rgba(198, 146, 62, .20);

    border-radius: 20px;

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

    box-shadow:
        0 15px 45px
        rgba(55, 35, 17, .06);

    transition: .3s ease;
}


.order-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 20px 50px
        rgba(55, 35, 17, .09);
}


/* =========================================================
   ORDER TOP
========================================================= */

.order-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 23px 26px;

    border-bottom:
        1px solid
        #eee8e1;
}


.order-label {
    color: #b83263;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}


.order-top h3 {
    margin: 3px 0;

    font-family:
        Georgia,
        serif;

    font-size: 22px;

    font-weight: 400;

    color: #2a211c;
}


.order-top p {
    margin: 0;

    color: #938a82;

    font-size: 11px;
}


.order-top p i {
    margin-right: 4px;

    color: #c6923e;
}


/* =========================================================
   STATUS
========================================================= */

.order-status {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 8px 13px;

    border-radius: 50px;

    font-size: 10px;

    font-weight: 700;

    text-transform: capitalize;
}


.order-status.pending {
    background: #fff4dd;
    color: #a87513;
}

.order-status.confirmed {
    background: #e9f5fa;
    color: #27809d;
}

.order-status.shipped {
    background: #eaf0ff;
    color: #4567b5;
}

.order-status.delivered {
    background: #eaf7ee;
    color: #398253;
}

.order-status.cancelled {
    background: #fbeceb;
    color: #a83c32;
}


/* =========================================================
   ITEMS
========================================================= */

.order-items {
    padding: 8px 26px;
}


.order-item {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 15px 0;

    border-bottom:
        1px solid
        #f0ebe5;
}


.order-item:last-child {
    border-bottom: 0;
}


.order-item-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

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

    border-radius: 12px;

    background: #faf2e7;

    color: #b88632;

    font-size: 18px;
}


.order-item-info {
    min-width: 0;

    flex: 1;
}


.order-item-info strong {
    display: block;

    margin-bottom: 3px;

    color: #352a24;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.order-item-info span {
    color: #91877f;

    font-size: 11px;
}


.order-item-total {
    color: #b83263;

    font-size: 14px;

    white-space: nowrap;
}


/* =========================================================
   ORDER BOTTOM
========================================================= */

.order-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding: 20px 26px;

    background:
        #fcfaf7;
}


.delivery-info {
    display: flex;

    align-items: center;

    gap: 11px;

    min-width: 0;
}


.delivery-info > i {
    color: #c6923e;

    font-size: 19px;
}


.delivery-info small,
.order-total small {
    display: block;

    margin-bottom: 3px;

    color: #a09891;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;
}


.delivery-info span {
    display: block;

    color: #655c55;

    font-size: 11px;

    line-height: 1.5;
}


.order-total {
    text-align: right;

    white-space: nowrap;
}


.order-total strong {
    display: block;

    color: #b83263;

    font-family:
        Georgia,
        serif;

    font-size: 22px;

    font-weight: 400;
}


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

@media (max-width: 900px) {

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

    .account-stats {
        display: grid;

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

}


@media (max-width: 700px) {

    .account-page {
        padding: 45px 15px 70px;
    }


    .account-heading {
        align-items: flex-start;

        flex-direction: column;
    }


    .account-shop-btn {
        width: 100%;
        justify-content: center;
    }


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


    .account-profile-card {
        padding: 25px 20px;
    }


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


    .profile-action {
        width: 100%;
    }


    .orders-heading {
        align-items: center;
    }


    .orders-heading h2 {
        font-size: 29px;
    }


    .order-top {
        align-items: flex-start;

        flex-direction: column;

        padding: 20px;
    }


    .order-status {
        align-self: flex-start;
    }


    .order-items {
        padding: 8px 20px;
    }


    .order-bottom {
        align-items: flex-start;

        flex-direction: column;

        padding: 20px;
    }


    .order-total {
        width: 100%;

        text-align: left;
    }

}


@media (max-width: 480px) {

    .account-heading h1 {
        font-size: 36px;
    }


    .profile-top h2 {
        font-size: 23px;
    }


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

        flex-basis: 60px;

        font-size: 25px;
    }


    .empty-orders {
        padding: 55px 18px;
    }


    .empty-orders h3 {
        font-size: 24px;
    }


    .order-item-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

}
/* =========================================================
   MEENAKSHI ENTERPRISES
   CONTACT PAGE
========================================================= */


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

:root {
    --contact-brown: #3E2723;
    --contact-brown-dark: #2B1A17;
    --contact-brown-light: #6B4A3D;

    --contact-wood: #8F3F08;
    --contact-terracotta: #B45309;

    --contact-gold: #D6A56F;
    --contact-gold-light: #E8C9A8;

    --contact-cream: #F4EEE6;
    --contact-ivory: #FFFDF9;

    --contact-text: #4B3832;
    --contact-muted: #78665D;

    --contact-border: rgba(62, 39, 35, 0.14);

    --contact-shadow:
        0 20px 55px rgba(62, 39, 35, 0.12);

    --contact-shadow-small:
        0 8px 25px rgba(62, 39, 35, 0.10);
}


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

.contact-page {
    width: 100%;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(214, 165, 111, 0.12),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 45%,
            rgba(180, 83, 9, 0.06),
            transparent 28%
        ),
        var(--contact-cream);

    color: var(--contact-text);
}


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

.contact-hero {
    position: relative;
    min-height: 650px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(43, 26, 23, 0.96) 0%,
            rgba(62, 39, 35, 0.88) 42%,
            rgba(62, 39, 35, 0.55) 70%,
            rgba(62, 39, 35, 0.35) 100%
        ),
        url("../images/products/product-8full.jpeg")
        center / cover no-repeat;
}


/* Decorative glow */

.contact-hero::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    right: -220px;
    top: -220px;

    background:
        radial-gradient(
            circle,
            rgba(214, 165, 111, 0.20),
            transparent 68%
        );

    pointer-events: none;
}


/* Bottom gradient */

.contact-hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 120px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(43, 26, 23, 0.45)
        );

    pointer-events: none;
}


.contact-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 15% 70%,
            rgba(214, 165, 111, 0.12),
            transparent 30%
        );

    pointer-events: none;
}


.contact-hero-inner {
    position: relative;
    z-index: 2;

    width: min(1200px, 100%);

    margin: 0 auto;

    padding: 110px 35px 100px;
}


.contact-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 25px;

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

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 4px;
}


.contact-hero-kicker::before {
    content: "";

    width: 42px;
    height: 1px;

    background: var(--contact-gold);
}


.contact-hero h1 {
    max-width: 850px;

    margin: 0 0 28px;

    color: #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(52px, 7vw, 92px);

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -3px;
}


.contact-hero h1 span {
    display: block;

    color: #0dcaf0;

    font-style: italic;
}


.contact-hero p {
    max-width: 670px;

    margin: 0 0 40px;

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

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;

    line-height: 1.85;
}


.contact-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}


.contact-hero-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 48px;

    padding: 0 22px;

    border: 1px solid rgba(255, 255, 255, 0.25);

    color: #fff;

    text-decoration: none;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;

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


.contact-hero-link:first-child {
    background:#d94f7de0 ;

    border-color: var(--contact-terracotta);
}


.contact-hero-link:hover {
    color: var(--contact-brown);

    background:#05668D;

    border-color: var(--contact-gold-light);

    transform: translateY(-3px);
      color: #fff;
}


.contact-hero-link i {
    font-size: 14px;
}


/* =========================================================
   INTRO SECTION
========================================================= */

.contact-intro-section {
    width: min(1200px, 100%);

    margin: 0 auto;

    padding: 110px 35px 120px;
}


.contact-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 90px;

    align-items: start;

    margin-bottom: 90px;
}


.contact-small-label,
.contact-card-label {
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--contact-terracotta);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.contact-small-label::before,
.contact-card-label::before {
    content: "";

    width: 28px;
    height: 1px;

    background: var(--contact-gold);
}


.contact-intro-heading h2 {
    margin: 22px 0 0;

    color: var(--contact-brown);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(45px, 5vw, 68px);

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -2px;
}


.contact-intro-heading h2 em {
    color: var(--contact-terracotta);

    font-style: italic;
}


.contact-intro-copy {
    padding-top: 45px;
}


.contact-intro-copy h3 {
    max-width: 680px;

    margin: 0 0 25px;

    color: var(--contact-brown);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 27px;

    font-weight: 500;

    line-height: 1.3;
}


.contact-intro-copy p {
    max-width: 680px;

    margin: 0 0 17px;

    color: var(--contact-muted);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    line-height: 1.85;
}


/* =========================================================
   ENQUIRY GRID
========================================================= */

.contact-enquiry-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    gap: 28px;

    align-items: stretch;
}


/* =========================================================
   CONTACT DETAILS CARD
========================================================= */

.contact-details-card,
.contact-form-card {
    position: relative;

    padding: 45px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(250,245,238,.97)
        );

    box-shadow: var(--contact-shadow);
}


.contact-details-card {
    background:
        linear-gradient(145deg, #e9739bf5, #d94f7d 70%, #a54a69e0);
    color: #fff;

    color: #fff;

    overflow: hidden;
}


.contact-details-card::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    right: -120px;
    top: -120px;

    background:
        radial-gradient(
            circle,
            rgba(214, 165, 111, .18),
            transparent 68%
        );
}


.contact-details-card::after {
    content: "ॐ";

    position: absolute;

    right: 25px;
    bottom: -50px;

    color: rgba(214,165,111,.06);

    font-family: Georgia, serif;

    font-size: 210px;

    line-height: 1;

    pointer-events: none;
}


.contact-details-card .contact-card-label {
    position: relative;
    z-index: 2;

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


.contact-details-card .contact-card-label::before {
    background: var(--contact-gold);
}


.contact-details-card h2 {
    position: relative;
    z-index: 2;

    margin: 25px 0 42px;

    color: #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 43px;

    font-weight: 500;

    line-height: 1.05;
}


.contact-details-card h2 em {
    color: var(--contact-gold);

    font-style: italic;
}


/* =========================================================
   CONTACT DETAIL ITEM
========================================================= */

.contact-detail-item {
    position: relative;
    z-index: 2;

    display: flex;

    gap: 17px;

    margin-bottom: 27px;
}


.contact-detail-icon {
    flex: 0 0 43px;

    width: 43px;
    height: 43px;

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

    border: 1px solid rgba(214,165,111,.35);

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

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

    font-size: 17px;
}


.contact-detail-item > div:last-child {
    min-width: 0;
}


.contact-detail-item span {
    display: block;

    margin-bottom: 5px;

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

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.8px;
}


.contact-detail-item a {
    color: #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    text-decoration: none;

    word-break: break-word;

    transition: color .25s ease;
}


.contact-detail-item a:hover {
    color: var(--contact-gold-light);
}


.contact-detail-item a i {
    margin-left: 5px;

    font-size: 11px;
}


.contact-detail-item p {
    margin: 0;

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

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    line-height: 1.7;
}


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

.contact-detail-note {
    position: relative;
    z-index: 2;

    display: flex;

    gap: 15px;

    margin-top: 38px;

    padding: 20px;

    border: 1px solid rgba(214,165,111,.22);

    background: rgba(255,255,255,.045);
}


.contact-detail-note > i {
    flex: 0 0 auto;

    color: var(--contact-gold);

    font-size: 21px;
}


.contact-detail-note strong {
    display: block;

    margin-bottom: 7px;

    color: #fff;

    font-family:
        Georgia,
        serif;

    font-size: 13px;
}


.contact-detail-note p {
    margin: 0;

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

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    line-height: 1.65;
}


/* =========================================================
   FORM CARD
========================================================= */

.contact-form-card {
    background: #fff;

    overflow: hidden;
}


.contact-form-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--contact-brown),
            var(--contact-terracotta),
            var(--contact-gold)
        );
}


.contact-form-card h2 {
    margin: 22px 0 10px;

    color: var(--contact-brown);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 43px;

    font-weight: 500;

    line-height: 1.08;
}


.contact-form-card h2 em {
    color: var(--contact-terracotta);

    font-style: italic;
}


.contact-form-intro {
    max-width: 600px;

    margin: 0 0 35px;

    color: var(--contact-muted);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   FORM GRID
========================================================= */

.contact-form-grid {
    display: grid;

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

    gap: 20px;
}


.contact-field {
    display: flex;

    flex-direction: column;
}


.contact-field-full {
    grid-column: 1 / -1;
}


.contact-field label {
    margin-bottom: 8px;

    color: var(--contact-brown);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;

    border: 1px solid rgba(62,39,35,.16);

    border-radius: 0;

    outline: none;

    background: #FCFAF7;

    color: var(--contact-brown);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.contact-field input,
.contact-field select {
    height: 49px;

    padding: 0 15px;
}


.contact-field textarea {
    min-height: 135px;

    padding: 14px 15px;

    resize: vertical;

    line-height: 1.6;
}


.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: #A49790;
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: var(--contact-terracotta);

    background: #fff;

    box-shadow:
        0 0 0 3px rgba(180,83,9,.08);
}


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

.contact-continue-btn {
    width: 100%;

    min-height: 53px;

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

    gap: 12px;

    margin-top: 25px;

    border: none;

    background: linear-gradient(
            135deg,
            var(--contact-terracotta),
            #C96B18
        );
   

    color: #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.7px;

    cursor: pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.contact-continue-btn:hover {
    transform: translateY(-3px);

    background:  #d94f7d;
        

    box-shadow:
        0 12px 28px rgba(62,39,35,.20);
}


.contact-continue-btn i {
    font-size: 15px;

    transition: transform .25s ease;
}


.contact-continue-btn:hover i {
    transform: translateX(5px);
}


/* =========================================================
   ENQUIRY CHANNEL SECTION
========================================================= */

.contact-channel-section {
    display: none;

    position: relative;

    padding: 105px 35px;

    background:
        linear-gradient(
            135deg,
            #2B1A17,
            #3E2723 55%,
            #53352C
        );

    color: #fff;

    overflow: hidden;
}


.contact-channel-section.active {
    display: block;

    animation:
        contactChannelReveal .65s ease both;
}


@keyframes contactChannelReveal {

    from {
        opacity: 0;

        transform:
            translateY(35px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


.contact-channel-section::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    top: -320px;
    right: -180px;

    background:
        radial-gradient(
            circle,
            rgba(214,165,111,.17),
            transparent 68%
        );
}


.contact-channel-section::after {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    bottom: -280px;
    left: -150px;

    background:
        radial-gradient(
            circle,
            rgba(180,83,9,.12),
            transparent 68%
        );
}


.contact-channel-inner {
    position: relative;
    z-index: 2;

    width: min(1100px, 100%);

    margin: 0 auto;

    text-align: center;
}


.contact-channel-inner .contact-small-label {
    justify-content: center;

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


.contact-channel-inner .contact-small-label::before {
    background: var(--contact-gold);
}


.contact-channel-inner h2 {
    max-width: 750px;

    margin: 22px auto 15px;

    color: #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(38px, 5vw, 60px);

    font-weight: 500;

    line-height: 1.05;
}


.contact-channel-inner h2 em {
    color: var(--contact-gold);

    font-style: italic;
}


.contact-channel-inner > p {
    max-width: 620px;

    margin: 0 auto 50px;

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

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   CHANNEL CARDS
========================================================= */

.contact-channel-grid {
    display: grid;

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

    gap: 18px;
}


.contact-channel-card {
    position: relative;

    display: flex;

    min-height: 210px;

    flex-direction: column;

    align-items: flex-start;

    padding: 30px;

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

    background:#e17e9f;

    color: #fff;

    text-align: left;

    text-decoration: none;

    overflow: hidden;

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


.contact-channel-card:hover {
    color: #fff;

    transform: translateY(-7px);

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

    background: #74b1bd;
}


.contact-channel-card.contact-channel-whatsapp:hover {
    border-color: rgba(37,211,102,.65);
}


.contact-channel-icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 25px;

    border: 1px solid rgba(214,165,111,.3);

    color: radial-gradient(circle, rgba(214, 165, 111, .17), transparent 68%);

    font-size: 19px;
}


.contact-channel-whatsapp .contact-channel-icon {
    color: #67E08A;
}


.contact-channel-content span {
    display: block;

    margin-bottom: 7px;

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

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 2px;
}


.contact-channel-content h3 {
    margin: 0 0 9px;

    color: #fff;

    font-family:
        Georgia,
        serif;

    font-size: 23px;

    font-weight: 500;
}


.contact-channel-content p {
    max-width: 230px;

    margin: 0;

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

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    line-height: 1.65;
}


.contact-channel-arrow {
    position: absolute;

    right: 22px;
    top: 22px;

    color: var(--contact-gold);

    font-size: 15px;

    transition: transform .25s ease;
}


.contact-channel-card:hover .contact-channel-arrow {
    transform:
        translate(4px, -4px);
}


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

.contact-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-top: 35px;

    padding: 12px 20px;

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

    background: transparent;

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

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    cursor: pointer;

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


.contact-back-btn:hover {
    color: #fff;

    border-color: var(--contact-gold);

    background: rgba(214,165,111,.08);
}


/* =========================================================
   LOCATION
========================================================= */

.contact-location-section {
    padding: 115px 35px;

    background: #fff;
}


.contact-location-inner {
    width: min(1200px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 90px;

    align-items: center;
}


.contact-location-heading h2 {
    max-width: 550px;

    margin: 22px 0 20px;

    color: var(--contact-brown);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

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

    font-weight: 500;

    line-height: 1.02;
}


.contact-location-heading h2 em {
    color: var(--contact-terracotta);

    font-style: italic;
}


.contact-location-heading p {
    max-width: 500px;

    margin: 0;

    color: var(--contact-muted);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    line-height: 1.8;
}


.contact-location-box {
    position: relative;

    display: flex;

    gap: 24px;

    padding: 42px;

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

    background:
        linear-gradient(
            145deg,
            #F7F0E8,
            #FFFDF9
        );

    box-shadow: var(--contact-shadow-small);

    overflow: hidden;
}


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

    position: absolute;

    width: 250px;
    height: 250px;

    right: -130px;
    bottom: -130px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(214,165,111,.20),
            transparent 68%
        );
}


.contact-location-icon {
    flex: 0 0 58px;

    width: 58px;
    height: 58px;

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

    color: var(--contact-terracotta);

    border: 1px solid rgba(180,83,9,.20);

    background: rgba(180,83,9,.06);

    font-size: 22px;
}


.contact-location-box > div:last-child {
    position: relative;
    z-index: 2;
}


.contact-location-box span {
    display: block;

    margin-bottom: 8px;

    color: var(--contact-terracotta);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}


.contact-location-box h3 {
    margin: 0 0 12px;

    color: var(--contact-brown);

    font-family:
        Georgia,
        serif;

    font-size: 27px;

    font-weight: 500;
}


.contact-location-box p {
    margin: 0 0 22px;

    color: var(--contact-muted);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    line-height: 1.7;
}


.contact-location-box a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: var(--contact-terracotta);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.4px;

    text-decoration: none;

    transition:
        color .25s ease,
        gap .25s ease;
}


.contact-location-box a:hover {
    color: var(--contact-brown);

    gap: 13px;
}


/* =========================================================
   FEATURES
========================================================= */

.contact-features-section {
    padding: 105px 35px;

    background:
        linear-gradient(
            180deg,
            var(--contact-cream),
            #EEE3D6
        );
}


.contact-features-inner {
    width: min(1150px, 100%);

    margin: 0 auto;

    display: grid;

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

    gap: 1px;

    background: var(--contact-border);

    border: 1px solid var(--contact-border);
}


.contact-feature {
    position: relative;

    min-height: 300px;

    padding: 40px;

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

    overflow: hidden;

    transition:
        background .3s ease,
        transform .3s ease;
}


.contact-feature:hover {
    background: #fff;

    transform: translateY(-4px);
}


.contact-feature-number {
    position: absolute;

    right: 25px;
    top: 20px;

    color: rgba(62,39,35,.08);

    font-family:
        Georgia,
        serif;

    font-size: 52px;

    font-weight: 700;
}


.contact-feature > i {
    display: inline-flex;

    width: 50px;
    height: 50px;

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

    margin-bottom: 30px;

    border: 1px solid rgba(180,83,9,.20);

    color: var(--contact-terracotta);

    background: rgba(180,83,9,.06);

    font-size: 20px;
}


.contact-feature h3 {
    margin: 0 0 13px;

    color: var(--contact-brown);

    font-family:
        Georgia,
        serif;

    font-size: 23px;

    font-weight: 500;
}


.contact-feature p {
    max-width: 280px;

    margin: 0;

    color: var(--contact-muted);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    line-height: 1.75;
}


/* =========================================================
   CTA
========================================================= */

.contact-cta {
    position: relative;

    padding: 130px 35px;

    background:
        linear-gradient(
            135deg,
         #0a6679,
          #45614f );

    overflow: hidden;
}


.contact-cta::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    left: -250px;
    top: -280px;

    background:
        radial-gradient(
            circle,
            rgba(214,165,111,.13),
            transparent 68%
        );
}


.contact-cta::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    right: -220px;
    bottom: -260px;

    background:
        radial-gradient(
            circle,
            rgba(180,83,9,.12),
            transparent 68%
        );
}


.contact-cta-inner {
    position: relative;
    z-index: 2;

    width: min(850px, 100%);

    margin: 0 auto;

    text-align: center;
}


.contact-cta-inner .contact-small-label {
    justify-content: center;

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


.contact-cta-inner .contact-small-label::before {
    background: var(--contact-gold);
}


.contact-cta h2 {
    margin: 23px 0 20px;

    color: #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

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

    font-weight: 500;

    line-height: 1.02;

    letter-spacing: -2px;
}


.contact-cta h2 em {
    display: block;

    color: var(--contact-gold);

    font-style: italic;
}


.contact-cta p {
    max-width: 620px;

    margin: 0 auto 35px;

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

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    line-height: 1.8;
}


.contact-cta-btn {
    display: inline-flex;

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

    gap: 12px;

    min-height: 52px;

    padding: 0 28px;

    background: #05668d;

    color: #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-decoration: none;

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.contact-cta-btn:hover {
    color: var(--contact-brown);

    background:#d94f7de0;
    color:#fff;

    transform: translateY(-4px);

    box-shadow:
        0 14px 30px rgba(0,0,0,.20);
}


.contact-cta-btn i {
    transition: transform .25s ease;
}


.contact-cta-btn:hover i {
    transform: translateX(5px);
}


/* =========================================================
   REVEAL ANIMATIONS
========================================================= */

.contact-page .reveal,
.contact-page .reveal-left,
.contact-page .reveal-right,
.contact-page .reveal-scale {
    will-change: transform, opacity;
}


.contact-page .reveal {
    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}


.contact-page .reveal.show {
    opacity: 1;

    transform:
        translateY(0);
}


.contact-page .reveal-left {
    opacity: 0;

    transform:
        translateX(-45px);

    transition:
        opacity .75s ease,
        transform .75s ease;
}


.contact-page .reveal-left.show {
    opacity: 1;

    transform:
        translateX(0);
}


.contact-page .reveal-right {
    opacity: 0;

    transform:
        translateX(45px);

    transition:
        opacity .75s ease,
        transform .75s ease;
}


.contact-page .reveal-right.show {
    opacity: 1;

    transform:
        translateX(0);
}


.contact-page .reveal-scale {
    opacity: 0;

    transform:
        scale(.93);

    transition:
        opacity .8s ease,
        transform .8s ease;
}


.contact-page .reveal-scale.show {
    opacity: 1;

    transform:
        scale(1);
}


/* =========================================================
   SECTION REVEAL
========================================================= */

.contact-page .section-reveal {
    position: relative;
}


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

@media (max-width: 991px) {

    .contact-hero {
        min-height: 580px;
    }


    .contact-hero-inner {
        padding: 90px 28px;
    }


    .contact-intro-section {
        padding: 85px 28px 95px;
    }


    .contact-intro-grid {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-bottom: 65px;
    }


    .contact-intro-copy {
        padding-top: 10px;
    }


    .contact-enquiry-grid {
        grid-template-columns: 1fr;
    }


    .contact-location-section {
        padding: 90px 28px;
    }


    .contact-location-inner {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .contact-features-section {
        padding: 80px 28px;
    }


    .contact-feature {
        min-height: 270px;

        padding: 30px;
    }


    .contact-cta {
        padding: 100px 28px;
    }

}


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

@media (max-width: 767px) {

    .contact-hero {
        min-height: 610px;

        background:
            linear-gradient(
                180deg,
                rgba(43,26,23,.88),
                rgba(43,26,23,.97)
            ),
            url("../images/products/product-8full.jpeg")
            center / cover no-repeat;
    }


    .contact-hero-inner {
        padding: 85px 22px 75px;
    }


    .contact-hero-kicker {
        font-size: 9px;

        letter-spacing: 2.5px;
    }


    .contact-hero h1 {
        font-size: 49px;

        letter-spacing: -2px;
    }


    .contact-hero p {
        font-size: 13px;

        line-height: 1.75;
    }


    .contact-hero-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .contact-hero-link {
        width: 100%;
    }


    .contact-intro-section {
        padding: 70px 20px 75px;
    }


    .contact-intro-grid {
        margin-bottom: 50px;
    }


    .contact-intro-heading h2 {
        font-size: 45px;

        letter-spacing: -1px;
    }


    .contact-intro-copy h3 {
        font-size: 22px;
    }


    .contact-intro-copy p {
        font-size: 13px;
    }


    .contact-details-card,
    .contact-form-card {
        padding: 30px 22px;
    }


    .contact-details-card h2,
    .contact-form-card h2 {
        font-size: 36px;
    }


    .contact-form-grid {
        grid-template-columns: 1fr;

        gap: 17px;
    }


    .contact-field-full {
        grid-column: auto;
    }


    .contact-channel-section {
        padding: 75px 20px;
    }


    .contact-channel-inner h2 {
        font-size: 38px;
    }


    .contact-channel-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .contact-channel-card {
        min-height: 185px;

        padding: 25px;
    }


    .contact-location-section {
        padding: 75px 20px;
    }


    .contact-location-inner {
        gap: 35px;
    }


    .contact-location-heading h2 {
        font-size: 42px;
    }


    .contact-location-box {
        flex-direction: column;

        padding: 28px 22px;
    }


    .contact-location-icon {
        width: 50px;
        height: 50px;
    }


    .contact-features-section {
        padding: 70px 20px;
    }


    .contact-features-inner {
        grid-template-columns: 1fr;
    }


    .contact-feature {
        min-height: 245px;

        padding: 30px 25px;
    }


    .contact-cta {
        padding: 90px 20px;
    }


    .contact-cta h2 {
        font-size: 43px;

        letter-spacing: -1px;
    }


    .contact-cta p {
        font-size: 13px;
    }

}


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

@media (max-width: 480px) {

    .contact-hero {
        min-height: 590px;
    }


    .contact-hero-inner {
        padding-left: 18px;
        padding-right: 18px;
    }


    .contact-hero h1 {
        font-size: 43px;
    }


    .contact-hero p {
        font-size: 12px;
    }


    .contact-intro-section {
        padding-left: 16px;
        padding-right: 16px;
    }


    .contact-intro-heading h2 {
        font-size: 40px;
    }


    .contact-details-card,
    .contact-form-card {
        padding: 26px 18px;
    }


    .contact-details-card h2,
    .contact-form-card h2 {
        font-size: 32px;
    }


    .contact-detail-item {
        gap: 12px;
    }


    .contact-detail-icon {
        flex-basis: 38px;

        width: 38px;
        height: 38px;

        font-size: 15px;
    }


    .contact-detail-item a {
        font-size: 12px;
    }


    .contact-detail-item p {
        font-size: 11px;
    }


    .contact-detail-note {
        padding: 16px;
    }


    .contact-channel-section {
        padding-left: 16px;
        padding-right: 16px;
    }


    .contact-channel-inner h2 {
        font-size: 34px;
    }


    .contact-location-section {
        padding-left: 16px;
        padding-right: 16px;
    }


    .contact-location-heading h2 {
        font-size: 38px;
    }


    .contact-features-section {
        padding-left: 16px;
        padding-right: 16px;
    }


    .contact-cta {
        padding-left: 16px;
        padding-right: 16px;
    }


    .contact-cta h2 {
        font-size: 38px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .contact-page *,
    .contact-page *::before,
    .contact-page *::after {
        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;
    }

}
/* =========================================================
   CONTACT PAGE - FINAL VISIBILITY FIX
   ========================================================= */

.contact-page .reveal,
.contact-page .reveal-left,
.contact-page .reveal-right,
.contact-page .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
}


/* =========================================================
   CONTACT PAGE - REDESIGN
========================================================= */

.contact-page {
    background:
        radial-gradient(
            circle at 5% 15%,
            rgba(214,165,111,.10),
            transparent 25%
        ),
        radial-gradient(
            circle at 95% 55%,
            rgba(180,83,9,.06),
            transparent 25%
        ),
        #F4EEE6;
}


/* =========================================================
   HERO - SMALLER / CLEANER
========================================================= */

.contact-hero {
    min-height: 520px;

    background:
        linear-gradient(
            90deg,
            rgb (119 92 87 / 96%) 0%,
            rgba(62,39,35,.90) 48%,
            rgba(62,39,35,.48) 100%
        ),
        url("../images/products/product-8full.jpeg")
        center / cover no-repeat;
}


.contact-hero-inner {
    padding-top: 80px;
    padding-bottom: 80px;
}


.contact-hero h1 {
    max-width: 760px;

    font-size: clamp(48px, 6vw, 76px);

    letter-spacing: -2px;
}


.contact-hero p {
    max-width: 570px;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   INTRO
========================================================= */

.contact-intro-section {
    padding-top: 85px;
    padding-bottom: 85px;
}


.contact-intro-grid {
    margin-bottom: 65px;
}


.contact-intro-heading h2 {
    font-size: clamp(42px, 5vw, 62px);
}


.contact-intro-copy {
    padding-top: 25px;
}


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

.contact-details-card,
.contact-form-card {
    border-radius: 3px;
}


.contact-details-card {
    min-height: 100%;
}


.contact-form-card {
    box-shadow:
        0 18px 45px rgba(62,39,35,.10);
}


/* =========================================================
   FORM
========================================================= */

.contact-field input,
.contact-field select,
.contact-field textarea {
    border-radius: 3px;
}


.contact-continue-btn {
    border-radius: 3px;
}


/* =========================================================
   CHANNEL SECTION
========================================================= */

.contact-channel-section {
    padding-top: 85px;
    padding-bottom: 85px;
}


.contact-channel-card {
    border-radius: 3px;
}


/* =========================================================
   LOCATION
========================================================= */

.contact-location-section {
    padding-top: 85px;
    padding-bottom: 85px;
}


.contact-location-box {
    border-radius: 3px;
}


/* =========================================================
   FEATURES
========================================================= */

.contact-features-section {
    padding-top: 80px;
    padding-bottom: 80px;
}


.contact-feature {
    min-height: 270px;
}


/* =========================================================
   CTA
========================================================= */

.contact-cta {
    padding-top: 95px;
    padding-bottom: 95px;
}


.contact-cta-inner {
    max-width: 850px;
}


/* =========================================================
   IMPORTANT:
   NEVER HIDE CONTACT CONTENT IF JS FAILS
========================================================= */

.contact-page .section-reveal {
    opacity: 1;
}


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

@media (max-width: 767px) {

    .contact-hero {
        min-height: 560px;
    }

    .contact-hero-inner {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .contact-hero h1 {
        font-size: 45px;
    }

    .contact-intro-section {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .contact-location-section {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .contact-features-section {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .contact-cta {
        padding-top: 75px;
        padding-bottom: 75px;
    }

}
/* =========================================================
   MEENAKSHI ENTERPRISES
   NEW OTP LOGIN DESIGN
========================================================= */

.new-auth-page {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(214,165,111,.10),
            transparent 25%
        ),
        #f4eee6;

    color: #3e2723;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    overflow-x: hidden;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.otp-auth-wrapper {

    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(480px, .95fr);

}


/* =========================================================
   LEFT VISUAL
========================================================= */

.otp-auth-visual {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    display: flex;

    align-items: stretch;

    background:
        linear-gradient(
            120deg,
            #241613,
            #4a2b22
        );

    background-image:
        linear-gradient(
            90deg,
            rgba(36,22,19,.95),
            rgba(62,39,35,.72)
        ),
        url("../images/products/product-4.jpeg");

    background-size: cover;

    background-position: center;
}


.otp-visual-overlay {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(214,165,111,.20),
            transparent 35%
        );

    pointer-events: none;
}


.otp-visual-content {

    position: relative;

    z-index: 2;

    width: 100%;

    min-height: 100vh;

    padding:
        55px
        clamp(40px, 6vw, 95px);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    color: #fff;
}


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

.otp-brand-mark {

    display: flex;

    align-items: center;

    gap: 13px;

    color: #fff;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: .2px;
}


.otp-brand-symbol {

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #fff;

    color: #5a3024;

    border-radius: 2px;

    font-family:
        Georgia,
        serif;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 8px 25px rgba(0,0,0,.18);
}


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

.otp-visual-main {

    max-width: 600px;

    margin-top: auto;

    margin-bottom: auto;
}


.otp-visual-kicker {

    display: block;

    margin-bottom: 22px;

    color: #d6a56f;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;
}


.otp-visual-main h1 {

    margin: 0 0 25px;

    color: #fff;

    font-size:
        clamp(50px, 6vw, 86px);

    line-height: .98;

    letter-spacing: -3px;

    font-weight: 400;
}


.otp-visual-main h1 em {

    display: block;

    color: #d6a56f;

    font-weight: 400;
}


.otp-visual-main p {

    max-width: 500px;

    margin: 0;

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

    font-size: 14px;

    line-height: 1.8;
}


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

.otp-visual-footer {

    display: flex;

    align-items: center;

    gap: 30px;

    padding-top: 25px;

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

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

    font-size: 11px;
}


.otp-visual-footer span {

    display: flex;

    align-items: center;

    gap: 8px;
}


.otp-visual-footer i {

    color: #d6a56f;

    font-size: 14px;
}


/* =========================================================
   RIGHT PANEL
========================================================= */

.otp-auth-panel {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f4eee6;

    position: relative;
}


.otp-auth-panel-inner {

    width: 100%;

    max-width: 500px;

    padding:
        55px
        clamp(35px, 5vw, 75px);
}


/* =========================================================
   BACK
========================================================= */

.otp-back-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 55px;

    color: #72574b;

    text-decoration: none;

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .4px;

    transition:
        color .25s ease,
        transform .25s ease;
}


.otp-back-link:hover {

    color: #b45309;

    transform:
        translateX(-3px);
}


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

.otp-mobile-brand {

    display: none;

    align-items: center;

    gap: 10px;

    margin-bottom: 35px;

    color: #3e2723;

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;

    font-weight: 800;
}


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

.otp-heading {

    margin-bottom: 35px;
}


.otp-section-label {

    display: block;

    margin-bottom: 15px;

    color: #b45309;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.otp-heading h2 {

    margin: 0 0 15px;

    color: #3e2723;

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

    font-weight: 400;

    line-height: .98;

    letter-spacing: -2px;
}


.otp-heading h2 em {

    color: #b45309;

    font-weight: 400;
}


.otp-heading p {

    max-width: 420px;

    margin: 0;

    color: #765f54;

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   ALERTS
========================================================= */

.otp-alert {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding: 13px 15px;

    margin-bottom: 22px;

    border-radius: 3px;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    line-height: 1.5;
}


.otp-alert i {

    flex-shrink: 0;

    margin-top: 2px;
}


.otp-alert-error {

    color: #842029;

    background: #f8d7da;

    border:
        1px solid #f1aeb5;
}


.otp-alert-success {

    color: #0f5132;

    background: #d1e7dd;

    border:
        1px solid #a3cfbb;
}


/* =========================================================
   FORM
========================================================= */

.otp-login-form {

    width: 100%;
}


.otp-field {

    margin-bottom: 22px;
}


.otp-field label {

    display: block;

    margin-bottom: 9px;

    color: #5d443a;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


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

.otp-input-wrap {

    height: 58px;

    display: flex;

    align-items: center;

    padding: 0 17px;

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

    border:
        1px solid rgba(62,39,35,.18);

    border-radius: 3px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.otp-input-wrap:focus-within {

    background: #fff;

    border-color: #b45309;

    box-shadow:
        0 0 0 4px rgba(180,83,9,.08);
}


.otp-country-code {

    color: #3e2723;

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;

    font-weight: 700;
}


.otp-input-divider {

    width: 1px;

    height: 25px;

    margin: 0 14px;

    background:
        rgba(62,39,35,.18);
}


.otp-input-icon {

    margin-right: 10px;

    color: #a06b3e;

    font-size: 17px;
}


.otp-input-wrap input {

    flex: 1;

    min-width: 0;

    height: 100%;

    border: 0;

    outline: 0;

    background: transparent;

    color: #3e2723;

    font-family:
        Arial,
        sans-serif;

    font-size: 14px;
}


.otp-input-wrap input::placeholder {

    color: #a5948a;
}


/* =========================================================
   OTP CODE
========================================================= */

.otp-code-input {

    width: 100%;

    height: 68px;

    padding: 0 15px;

    border:
        1px solid rgba(62,39,35,.18);

    border-radius: 3px;

    outline: none;

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

    color: #3e2723;

    font-family:
        Arial,
        sans-serif;

    font-size: 29px;

    font-weight: 700;

    letter-spacing: 12px;

    text-align: center;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.otp-code-input:focus {

    background: #fff;

    border-color: #b45309;

    box-shadow:
        0 0 0 4px rgba(180,83,9,.08);
}


.otp-code-input::placeholder {

    color: #cbbdb4;

    letter-spacing: 10px;
}


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

.otp-primary-button {

    width: 100%;

    height: 57px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 20px;

    border: 0;

    border-radius: 3px;

    background:
        linear-gradient(
            135deg,
            #b45309,
            #8f3f08
        );

    color: #fff;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    cursor: pointer;

    box-shadow:
        0 10px 24px rgba(180,83,9,.20);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.otp-primary-button:hover {

    transform:
        translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #c15b0b,
            #9a4308
        );

    box-shadow:
        0 15px 30px rgba(180,83,9,.26);
}


.otp-primary-button i {

    font-size: 16px;

    transition:
        transform .25s ease;
}


.otp-primary-button:hover i {

    transform:
        translateX(4px);
}


/* =========================================================
   SECURITY
========================================================= */

.otp-security-note {

    display: flex;

    gap: 13px;

    margin-top: 24px;

    padding: 16px;

    border:
        1px solid rgba(62,39,35,.10);

    background:
        rgba(255,255,255,.38);
}


.otp-security-note > i {

    color: #b45309;

    font-size: 18px;
}


.otp-security-note div {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.otp-security-note strong {

    color: #4d352d;

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;
}


.otp-security-note span {

    color: #846f65;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    line-height: 1.5;
}


/* =========================================================
   OTP SENT
========================================================= */

.otp-sent-box {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 25px;

    padding: 16px;

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

    border:
        1px solid rgba(62,39,35,.11);
}


.otp-sent-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ead9c5;

    color: #9a5517;

    border-radius: 50%;

    font-size: 17px;
}


.otp-sent-box div:last-child {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.otp-sent-box span {

    color: #8a766b;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.4px;
}


.otp-sent-box strong {

    color: #3e2723;

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;
}


/* =========================================================
   TIMER
========================================================= */

.otp-timer-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 18px;

    padding: 13px 15px;

    background:
        rgba(216,184,149,.16);

    color: #765f54;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;
}


.otp-timer-row div {

    display: flex;

    align-items: center;

    gap: 7px;
}


.otp-timer-row i {

    color: #b45309;
}


.otp-timer-row strong {

    color: #b45309;

    font-size: 13px;

    font-variant-numeric: tabular-nums;
}


.otp-timer-row strong.expired {

    color: #a52a2a;
}


/* =========================================================
   CHANGE NUMBER
========================================================= */

.otp-change-number {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 7px;

    margin-top: 20px;

    color: #765f54;

    text-decoration: none;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 700;

    transition: color .2s ease;
}


.otp-change-number:hover {

    color: #b45309;
}


/* =========================================================
   DIVIDER
========================================================= */

.otp-divider {

    display: flex;

    align-items: center;

    gap: 15px;

    margin:
        32px 0 22px;

    color: #a9988e;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;
}


.otp-divider::before,
.otp-divider::after {

    content: "";

    flex: 1;

    height: 1px;

    background:
        rgba(62,39,35,.12);
}


/* =========================================================
   PASSWORD LOGIN
========================================================= */

.otp-password-link {

    width: 100%;

    min-height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border:
        1px solid rgba(62,39,35,.18);

    border-radius: 3px;

    color: #4f382f;

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

    text-decoration: none;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .7px;

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


.otp-password-link i:first-child {

    color: #b45309;
}


.otp-password-link i:last-child {

    margin-left: 3px;

    transition:
        transform .25s ease;
}


.otp-password-link:hover {

    color: #b45309;

    border-color: #b45309;

    background: #fff;
}


.otp-password-link:hover i:last-child {

    transform:
        translateX(4px);
}


/* =========================================================
   REGISTER
========================================================= */

.otp-register-text {

    margin-top: 25px;

    text-align: center;

    color: #846f65;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;
}


.otp-register-text a {

    color: #b45309;

    font-weight: 800;

    text-decoration: none;
}


.otp-register-text a:hover {

    text-decoration: underline;
}


/* =========================================================
   TRUST
========================================================= */

.otp-trust-row {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-top: 30px;

    padding-top: 20px;

    border-top:
        1px solid rgba(62,39,35,.10);

    color: #8d7b71;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;
}


.otp-trust-row span {

    display: flex;

    align-items: center;

    gap: 5px;
}


.otp-trust-row i {

    color: #b45309;

    font-size: 12px;
}


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

@media (max-width: 991px) {

    .otp-auth-wrapper {

        grid-template-columns: 1fr;
    }


    .otp-auth-visual {

        min-height: 390px;
    }


    .otp-visual-content {

        min-height: 390px;

        padding:
            35px 45px;
    }


    .otp-visual-main {

        margin-top: 50px;

        margin-bottom: 35px;
    }


    .otp-visual-main h1 {

        font-size: 58px;
    }


    .otp-auth-panel {

        min-height: auto;

        align-items: flex-start;
    }


    .otp-auth-panel-inner {

        max-width: 600px;

        padding:
            55px 45px;
    }
}


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

@media (max-width: 575px) {

    .otp-auth-visual {

        display: none;
    }


    .otp-auth-panel {

        min-height: 100vh;

        align-items: flex-start;
    }


    .otp-auth-panel-inner {

        padding:
            28px 22px 40px;
    }


    .otp-back-link {

        margin-bottom: 30px;
    }


    .otp-mobile-brand {

        display: flex;
    }


    .otp-heading {

        margin-bottom: 28px;
    }


    .otp-heading h2 {

        font-size: 46px;
    }


    .otp-heading p {

        font-size: 12px;
    }


    .otp-code-input {

        height: 62px;

        font-size: 25px;

        letter-spacing: 9px;
    }


    .otp-trust-row {

        gap: 12px;
    }
}
/* =========================================================
   OTP LOGIN — NEW MEENAKSHI ENTERPRISES DESIGN
========================================================= */

.auth-body {
    min-height: 100vh;
    margin: 0;
    padding: 0;

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

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(196, 143, 82, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(95, 54, 38, 0.15),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f7f0e7 0%,
            #efe1d0 100%
        );

    color: #3e2723;
    font-family: Georgia, "Times New Roman", serif;

    overflow-x: hidden;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.auth-body::before {
    content: "";
    position: fixed;

    width: 420px;
    height: 420px;

    top: -180px;
    left: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(180, 83, 9, 0.10),
            transparent 68%
        );

    pointer-events: none;
}


.auth-body::after {
    content: "";
    position: fixed;

    width: 500px;
    height: 500px;

    right: -250px;
    bottom: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(192, 139, 92, 0.16),
            transparent 68%
        );

    pointer-events: none;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.auth-body > .container {
    position: relative;
    z-index: 2;

    width: 100%;
}


/* =========================================================
   OTP CARD
========================================================= */

.auth-card {
    position: relative;

    width: 100%;

    padding: 42px 40px 36px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.98),
            rgba(249,242,233,0.98)
        );

    border: 1px solid rgba(180, 83, 9, 0.20);

    border-radius: 4px;

    box-shadow:
        0 25px 70px rgba(62, 39, 35, 0.15),
        0 8px 25px rgba(62, 39, 35, 0.08);

    overflow: hidden;
}


/* TOP GOLD LINE */

.auth-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #7b432d,
            #c08b5c,
            #d6a56f,
            #c08b5c,
            #7b432d
        );
}


/* subtle inner border */

.auth-card::after {
    content: "";

    position: absolute;

    inset: 10px;

    border: 1px solid rgba(180, 83, 9, 0.08);

    pointer-events: none;
}


/* =========================================================
   AUTH ICON
========================================================= */

.auth-icon {
    position: relative;
    z-index: 2;

    width: 72px;
    height: 72px;

    margin: 0 auto 20px;

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

    border-radius: 50%;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #5b3327,
            #8f4e26
        );

    border: 4px solid #ead8c1;

    box-shadow:
        0 8px 22px rgba(62, 39, 35, 0.18);
}


.auth-icon i {
    font-size: 27px;
}


/* =========================================================
   TITLE
========================================================= */

.auth-title {
    position: relative;
    z-index: 2;

    margin: 0 0 8px;

    color: #3e2723;

    font-size: 32px;
    line-height: 1.15;

    font-weight: 500;

    letter-spacing: -0.5px;
}


.auth-subtitle {
    position: relative;
    z-index: 2;

    max-width: 390px;

    margin: 0 auto;

    color: #7b6a5f;

    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   ALERTS
========================================================= */

.auth-card .alert {
    position: relative;
    z-index: 3;

    border-radius: 3px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    border: none;

    box-shadow: none;
}


.auth-card .alert-danger {
    color: #7b241c;

    background: #fbe9e7;

    border-left: 4px solid #b84435;
}


.auth-card .alert-success {
    color: #315c36;

    background: #edf7ed;

    border-left: 4px solid #5c9b62;
}


/* =========================================================
   FORM
========================================================= */

.auth-card form {
    position: relative;
    z-index: 2;
}


.auth-card .form-label {
    display: block;

    margin-bottom: 8px;

    color: #5b4034;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


/* =========================================================
   INPUT GROUP
========================================================= */

.auth-card .input-group {
    position: relative;
}


.auth-card .input-group-text {
    min-width: 48px;

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

    color: #9a6335;

    background: #f7eee3;

    border: 1px solid #d9c3aa;
    border-right: 0;

    border-radius: 3px 0 0 3px;
}


.auth-card .input-group-text i {
    font-size: 17px;
}


/* =========================================================
   INPUTS
========================================================= */

.auth-card .form-control,
.auth-card select,
.auth-card input[type="text"],
.auth-card input[type="tel"] {
    min-height: 50px;

    color: #3e2723;

    background: #fffdf9;

    border: 1px solid #d9c3aa;

    border-radius: 3px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    box-shadow: none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.auth-card .input-group .form-control {
    border-radius: 0 3px 3px 0;
}


.auth-card .form-control::placeholder {
    color: #aa9b91;

    opacity: 1;
}


.auth-card .form-control:focus {
    color: #3e2723;

    background: #fff;

    border-color: #b87943;

    box-shadow:
        0 0 0 3px rgba(180, 83, 9, 0.10);

    outline: none;
}


/* =========================================================
   OTP INPUT
========================================================= */

#otp {
    height: 62px;

    border-radius: 3px;

    color: #4a2c20;

    background: #fffdf9;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 25px;

    font-weight: 700;

    letter-spacing: 10px;

    padding-left: 20px;

    border: 1px solid #d5b99c;
}


#otp::placeholder {
    color: #c8b6a7;

    letter-spacing: 8px;
}


#otp:focus {
    border-color: #b87943;

    box-shadow:
        0 0 0 4px rgba(180, 83, 9, 0.10);
}


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

.auth-card .btn-primary {
    position: relative;
    z-index: 2;

    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;

    margin-top: 5px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #5b3327,
            #8f4e26
        );

    border: none;

    border-radius: 3px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.3px;

    text-transform: uppercase;

    box-shadow:
        0 8px 18px rgba(91, 51, 39, 0.20);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.auth-card .btn-primary:hover {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #7a432d,
            #a7612e
        );

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(91, 51, 39, 0.28);
}


.auth-card .btn-primary:active {
    transform: translateY(0);
}


/* =========================================================
   OTP SENT NUMBER
========================================================= */

.auth-card .text-center strong {
    color: #8f4e26;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;

    letter-spacing: 1px;
}


/* =========================================================
   TIMER
========================================================= */

.auth-card .text-muted {
    color: #87776d !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;
}


.auth-card .text-muted strong {
    color: #a25c2d;

    font-size: 13px;
}


/* =========================================================
   CHANGE MOBILE LINK
========================================================= */

.auth-card a {
    color: #8f4e26;

    transition:
        color .2s ease,
        opacity .2s ease;
}


.auth-card a:hover {
    color: #5b3327;

    opacity: .85;
}


.auth-card a.text-decoration-none {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    font-weight: 600;
}


/* =========================================================
   PASSWORD LOGIN AREA
========================================================= */

.auth-card > .text-center.mt-4 {
    position: relative;

    margin-top: 28px !important;

    padding-top: 25px;
}


.auth-card > .text-center.mt-4::before {
    content: "";

    position: absolute;

    top: 0;
    left: 15%;

    width: 70%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d8c2ac,
            transparent
        );
}


/*
   Your current HTML has:

   <button>
       <a href="login.php">...</a>
   </button>

   This is invalid HTML.

   Style the link itself so it looks like a secondary button.
*/

.auth-card .lwo {
    min-height: 45px;

    display: flex;

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

    gap: 7px;

    padding: 11px 18px;

    color: #795548;

    background: transparent;

    border: 1px solid #d2b99e;

    border-radius: 3px;

    text-decoration: none;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

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


.auth-card .lwo:hover {
    color: #fff;

    background: #795548;

    border-color: #795548;

    transform: translateY(-1px);
}


.auth-card .lwo i {
    font-size: 14px;
}


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

@media (max-width: 575px) {

    .auth-body {
        padding: 20px 0;
    }


    .auth-body > .container {
        padding-left: 14px;
        padding-right: 14px;
    }


    .auth-card {
        padding: 35px 23px 28px;

        border-radius: 3px;
    }


    .auth-title {
        font-size: 27px;
    }


    .auth-subtitle {
        font-size: 12px;

        line-height: 1.6;
    }


    .auth-icon {
        width: 64px;
        height: 64px;

        margin-bottom: 17px;
    }


    .auth-icon i {
        font-size: 23px;
    }


    .auth-card .form-control,
    .auth-card input[type="tel"] {
        min-height: 48px;

        font-size: 13px;
    }


    #otp {
        height: 58px;

        font-size: 22px;

        letter-spacing: 7px;

        padding-left: 15px;
    }


    #otp::placeholder {
        letter-spacing: 6px;
    }


    .auth-card .btn-primary {
        min-height: 50px;

        font-size: 10px;
    }

}


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

@media (max-width: 380px) {

    .auth-card {
        padding-left: 18px;
        padding-right: 18px;
    }


    .auth-title {
        font-size: 24px;
    }


    #otp {
        letter-spacing: 5px;
    }

}
/* =========================================================
   LOGIN WITH OTP
========================================================= */

.login-otp-button {
    width: 100%;
    min-height: 48px;

    margin-top: 12px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border: 1px solid #d8bea3;
    border-radius: 4px;

    background: #fffaf4;
    color: #7b432d;

    text-decoration: none;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.login-otp-button i {
    font-size: 17px;
}

.login-otp-button:hover {
    background: #7b432d;
    color: #ffffff;
    border-color: #7b432d;

    transform: translateY(-2px);

    box-shadow: 0 8px 18px rgba(62, 39, 35, .15);
}



/* =========================================================
   MEENAKSHI ENTERPRISES
   COLLECTIONS PAGE
   =========================================================

   Theme:
   Cream
   Chocolate Brown
   Soft Pink
   Deep Pink
   Light Blue
   Deep Blue
   ========================================================= */


/* =========================================================
   COLOR SYSTEM
========================================================= */

:root {

    --collection-cream: #FFF8F3;
    --collection-cream-dark: #F7EEE6;
    --collection-ivory: #FFFDFB;
    --collection-white: #FFFFFF;

    /* Brown */
    --collection-brown-deep: #3E2723;
    --collection-brown: #5A3525;
    --collection-brown-light: #795548;

    /* Pink */
    --collection-pink-light: #F8DCE5;
    --collection-pink: #E8A0B8;
    --collection-pink-dark: #C85A7C;

    /* Blue */
    --collection-blue-light: #D8EDF7;
    --collection-blue: #6FB6D9;
    --collection-blue-dark: #1769AA;

    /* Caramel */
    --collection-caramel: #C88A52;
    --collection-caramel-dark: #A96535;

    /* Orange */
    --collection-orange: #B85C16;
    --collection-orange-dark: #8F430E;

    /* Teal */
    --collection-teal: #08708D;
    --collection-teal-dark: #075B73;

    /* Text */
    --collection-text: #4A3730;
    --collection-text-light: #7A6A60;
    --collection-muted: #9A8980;

    /* Borders */
    --collection-border: #E8D8D5;

    /* Shadows */
    --collection-shadow:
        0 8px 25px rgba(62, 39, 35, 0.10);

    --collection-shadow-hover:
        0 18px 45px rgba(62, 39, 35, 0.18);
}


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

.collections-page,
.collections-page *,
.collections-page *::before,
.collections-page *::after {

    box-sizing: border-box;
}


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

.collections-page {

    position: relative;

    width: 100%;
    max-width: 100%;

    min-height: 100vh;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #FFF8F3 0%,
            #FFFDFB 48%,
            #F3FAFD 100%
        );

    color:
        var(--collection-text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   CONTAINER
========================================================= */

.collections-container {

    width:
        min(
            1200px,
            calc(100% - 40px)
        );

    margin-left: auto;
    margin-right: auto;
}


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

.collections-hero {

    position: relative;

    min-height: 430px;

    display: flex;

    align-items: center;

    overflow: hidden;

 background: linear-gradient(110deg, rgb(183 51 174 / 96%), #f5720e);
 

    color: #FFFFFF;
}


/* Pink glow */

.collections-hero::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -220px;
    top: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(232, 160, 184, 0.38),
            transparent 70%
        );

    pointer-events: none;
}


/* Blue glow */

.collections-hero::after {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -220px;
    bottom: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(111, 182, 217, 0.30),
            transparent 70%
        );

    pointer-events: none;
}


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

.collections-hero-content {

    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 760px;

    padding:
        85px 0;
}


.collections-eyebrow {

    display: inline-block;

    margin-bottom: 14px;

    color:
      #fff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.collections-hero h1 {

    margin: 0;

    color: #FFFFFF;

    font-size:
        clamp(
            38px,
            5vw,
            64px
        );

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1px;
}


.collections-hero h1 span {

    display: block;

    margin-top: 7px;

    background:
        linear-gradient(
            90deg,
            #F4C2D2,
            #9BD3EA
        );

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

    -webkit-text-fill-color: transparent;
}


.collections-hero p {

    max-width: 650px;

    margin:
        24px 0 28px;

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

    font-size: 16px;

    line-height: 1.8;
}


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

.collections-hero-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding:
        13px 25px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--collection-pink-dark),
            var(--collection-blue-dark)
        );

    color: #FFFFFF;

    font-size: 13px;

    font-weight: 800;

    text-decoration: none;

    box-shadow:
        0 10px 28px
        rgba(
            0,
            0,
            0,
            0.22
        );

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        filter .3s ease;
}


.collections-hero-btn:hover {

    color: #FFFFFF;

    transform:
        translateY(-3px);

    filter:
        brightness(1.08);

    box-shadow:
        0 15px 35px
        rgba(
            0,
            0,
            0,
            0.30
        );
}


/* =========================================================
   COLLECTION SECTION
========================================================= */

.collections-section {

    position: relative;

    padding:
        85px 0 95px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #FFF8F3 0%,
            #FFFDFB 45%,
            #F2FAFD 100%
        );
}


/* Pink decorative circle */

.collections-section::before {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -150px;
    top: 100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                232,
                160,
                184,
                0.25
            ),
            transparent 70%
        );

    pointer-events: none;
}


/* Blue decorative circle */

.collections-section::after {

    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    right: -170px;
    bottom: 80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                111,
                182,
                217,
                0.22
            ),
            transparent 70%
        );

    pointer-events: none;
}


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

.collections-heading {

    position: relative;

    z-index: 2;

    max-width: 720px;

    margin:
        0 auto 48px;

    text-align: center;
}


.collections-heading > span {

    display: inline-block;

    margin-bottom: 9px;

    color:
        var(--collection-pink-dark);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.collections-heading h2 {

    position: relative;

    margin:
        0 0 18px;

    color:
        var(--collection-brown-deep);

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    line-height: 1.15;

    font-weight: 800;
}


/* Gradient line */

.collections-heading h2::after {

    content: "";

    display: block;

    width: 75px;
    height: 3px;

    margin:
        14px auto 0;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--collection-pink-dark),
            var(--collection-blue-dark)
        );
}


.collections-heading p {

    max-width: 630px;

    margin:
        0 auto;

    color:
        var(--collection-text-light);

    font-size: 14px;

    line-height: 1.8;
}


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

.collections-grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 26px;
}


/* =========================================================
   COLLECTION CARD
========================================================= */

.collection-card {

    position: relative;

    display: block;

    overflow: hidden;

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

    border-radius: 16px;

    background:
        #FFFFFF;

    color:
        var(--collection-text);

    text-decoration: none;

    box-shadow:
        var(--collection-shadow);

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


/* Pink → blue top line */

.collection-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    z-index: 5;

    background:
        linear-gradient(
            90deg,
            var(--collection-pink-dark),
            var(--collection-blue-dark)
        );
}


.collection-card:hover {

    color:
        var(--collection-text);

    transform:
        translateY(-8px);

    border-color:
        var(--collection-pink);

    box-shadow:
        var(--collection-shadow-hover);
}


/* =========================================================
   COLLECTION IMAGE
========================================================= */

.collection-image {

    position: relative;

    width: 100%;

    height: 270px;

    overflow: hidden;

    background:
        #EFE3D8;
}


.collection-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: fill;

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


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

    transform:
        scale(1.06);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.collection-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(
                200,
                90,
                124,
                0.72
            ),
            rgba(
                23,
                105,
                170,
                0.72
            )
        );

    color: #FFFFFF;

    opacity: 0;

    transition:
        opacity .35s ease;
}


.collection-card:hover
.collection-overlay {

    opacity: 1;
}


.collection-overlay span {

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.collection-overlay i {

    font-size: 16px;
}


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

.collection-content {

    position: relative;

    padding:
        22px 22px 24px;

    background:
        #FFFFFF;
}


.collection-number {

    display: inline-block;

    margin-bottom: 7px;

    background:
        linear-gradient(
            90deg,
            var(--collection-pink-dark),
            var(--collection-blue-dark)
        );

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

    -webkit-text-fill-color: transparent;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


.collection-content h3 {

    margin:
        0 0 9px;

    color:
        var(--collection-brown-deep);

    font-size: 20px;

    line-height: 1.25;

    font-weight: 800;
}


.collection-content p {

    min-height: 52px;

    margin:
        0 0 17px;

    color:
        var(--collection-text-light);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   COLLECTION LINK
========================================================= */

.collection-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
        var(--collection-blue-dark);

    font-size: 12px;

    font-weight: 800;

    transition:
        gap .25s ease,
        color .25s ease;
}


.collection-card:hover
.collection-link {

    gap: 12px;

    color:
        var(--collection-pink-dark);
}


/* =========================================================
   FEATURES SECTION
========================================================= */

.collections-features {

    position: relative;

    padding:
        85px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #1769AA 0%,
            #08708D 100%
        );

    color:
        #FFFFFF;
}


/* Pink glow */

.collections-features::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -250px;
    bottom: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                232,
                160,
                184,
                0.28
            ),
            transparent 70%
        );

    pointer-events: none;
}


/* Blue highlight */

.collections-features::after {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -170px;
    top: -190px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                0.12
            ),
            transparent 70%
        );

    pointer-events: none;
}


.collections-features
.collections-heading {

    position: relative;

    z-index: 2;
}


.collections-features
.collections-heading > span {

    color:
        #F4C2D2;
}


.collections-features
.collections-heading h2 {

    color:
        #FFFFFF;
}


.collections-features
.collections-heading p {

    color:
        rgba(
            255,
            255,
            255,
            0.75
        );
}


/* =========================================================
   FEATURE GRID
========================================================= */

.feature-grid {

    position: relative;

    z-index: 3;

    display: grid;

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

    gap: 20px;
}


/* =========================================================
   FEATURE CARD
========================================================= */

.feature-item {

    padding:
        30px 20px;

    text-align: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.16
        );

    border-radius: 16px;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    backdrop-filter:
        blur(8px);

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


.feature-item:hover {

    transform:
        translateY(-6px);

    background:
      #E66CAB;

    border-color:
        rgba(
            244,
            194,
            210,
            0.60
        );
}


/* =========================================================
   FEATURE ICON
========================================================= */

.feature-icon {

    width: 56px;
    height: 56px;

    margin:
        0 auto 17px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--collection-pink-dark),
            var(--collection-pink)
        );

    color:
        #FFFFFF;

    font-size: 22px;

    box-shadow:
        0 8px 22px
        rgba(
            0,
            0,
            0,
            0.18
        );
}


.feature-item h3 {

    margin:
        0 0 9px;

    color:
        #FFFFFF;

    font-size: 17px;

    font-weight: 800;
}


.feature-item p {

    margin: 0;

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

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   CTA SECTION
========================================================= */

.collections-cta {

    position: relative;

    padding:
        90px 0;

    overflow: hidden;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #FFF2F7 0%,
            #FFFDFB 45%,
            #EEF9FE 100%
        );
}


/* Pink circle */

.collections-cta::before {

    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    left: -180px;
    top: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                232,
                160,
                184,
                0.28
            ),
            transparent 70%
        );
}


/* Blue circle */

.collections-cta::after {

    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -180px;
    bottom: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                111,
                182,
                217,
                0.26
            ),
            transparent 70%
        );
}


.collections-cta-content {

    position: relative;

    z-index: 3;

    max-width: 700px;

    margin:
        0 auto;
}


.collections-cta-content > span {

    display: inline-block;

    margin-bottom: 9px;

    color:
        var(--collection-pink-dark);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.collections-cta h2 {

    margin:
        0 0 15px;

    color:
        var(--collection-brown-deep);

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    line-height: 1.15;

    font-weight: 800;
}


.collections-cta p {

    max-width: 600px;

    margin:
        0 auto 28px;

    color:
        var(--collection-text-light);

    font-size: 14px;

    line-height: 1.8;
}


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

.collections-cta-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding:
        14px 27px;

    border: none;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--collection-pink-dark),
            var(--collection-blue-dark)
        );

    color:
        #FFFFFF;

    font-size: 13px;

    font-weight: 800;

    text-decoration: none;

    box-shadow:
        0 10px 28px
        rgba(
            23,
            105,
            170,
            0.22
        );

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        filter .3s ease;
}


.collections-cta-btn:hover {

    color:
        #FFFFFF;

    transform:
        translateY(-3px);

    filter:
        brightness(1.08);

    box-shadow:
        0 15px 35px
        rgba(
            200,
            90,
            124,
            0.30
        );
}


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

.collections-footer {

    position: relative;

    padding:
        48px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--collection-teal-dark),
            var(--collection-teal)
        );

    color:
        #FFFFFF;
}


.collections-footer::before {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -180px;
    top: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                232,
                160,
                184,
                0.18
            ),
            transparent 70%
        );
}


.collections-footer a {

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

    text-decoration: none;

    transition:
        color .25s ease;
}


.collections-footer a:hover {

    color:
        #FFFFFF;
}


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

@media (max-width: 991px) {

    .collections-container {

        width:
            calc(
                100% - 32px
            );
    }


    .collections-grid {

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


    .feature-grid {

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


    .collection-image {

        height:
            250px;
    }
}


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

@media (max-width: 767px) {

    .collections-container {

        width:
            calc(
                100% - 28px
            );
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .collections-hero {

        min-height:
            410px;
    }


    .collections-hero-content {

        padding:
            60px 0;
    }


    .collections-eyebrow {

        font-size:
            9px;

        letter-spacing:
            2px;
    }


    .collections-hero h1 {

        font-size:
            38px;

        letter-spacing:
            -0.5px;
    }


    .collections-hero p {

        margin:
            19px 0 25px;

        font-size:
            14px;

        line-height:
            1.7;
    }


    .collections-hero-btn {

        padding:
            12px 20px;

        font-size:
            12px;
    }


    /* -----------------------------------------------------
       COLLECTION SECTION
    ----------------------------------------------------- */

    .collections-section {

        padding:
            60px 0 70px;
    }


    .collections-heading {

        margin-bottom:
            32px;
    }


    .collections-heading h2 {

        font-size:
            31px;
    }


    .collections-heading p {

        font-size:
            13px;

        line-height:
            1.7;
    }


    .collections-grid {

        grid-template-columns:
            1fr;

        gap:
            20px;
    }


    /* -----------------------------------------------------
       COLLECTION CARD
    ----------------------------------------------------- */

    .collection-card {

        border-radius:
            14px;
    }


    .collection-image {

        height:
            245px;
    }


    .collection-content {

        padding:
            19px;
    }


    .collection-content h3 {

        font-size:
            19px;
    }


    .collection-content p {

        min-height:
            auto;

        font-size:
            13px;
    }


    /* -----------------------------------------------------
       FEATURES
    ----------------------------------------------------- */

    .collections-features {

        padding:
            60px 0;
    }


    .feature-grid {

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

        gap:
            12px;
    }


    .feature-item {

        padding:
            22px 13px;

        border-radius:
            13px;
    }


    .feature-icon {

        width:
            50px;

        height:
            50px;

        font-size:
            20px;
    }


    .feature-item h3 {

        font-size:
            15px;
    }


    .feature-item p {

        font-size:
            11px;
    }


    /* -----------------------------------------------------
       CTA
    ----------------------------------------------------- */

    .collections-cta {

        padding:
            65px 0;
    }


    .collections-cta h2 {

        font-size:
            31px;
    }


    .collections-cta p {

        font-size:
            13px;
    }


    .collections-cta-btn {

        padding:
            13px 22px;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .collections-footer {

        padding:
            40px 0;
    }
}


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

@media (max-width: 480px) {

    .collections-container {

        width:
            calc(
                100% - 22px
            );
    }


    .collections-hero {

        min-height:
            390px;
    }


    .collections-hero-content {

        padding:
            52px 0;
    }


    .collections-hero h1 {

        font-size:
            32px;
    }


    .collections-hero p {

        font-size:
            13px;
    }


    .collections-hero-btn {

        width:
            100%;
    }


    .collection-image {

        height:
            220px;
    }


    .collection-content {

        padding:
            18px;
    }


    .collection-content h3 {

        font-size:
            18px;
    }


    .feature-grid {

        grid-template-columns:
            1fr;
    }


    .collections-cta-btn {

        width:
            100%;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

    .collections-container {

        width:
            calc(
                100% - 18px
            );
    }


    .collections-hero h1 {

        font-size:
            29px;
    }


    .collections-heading h2 {

        font-size:
            27px;
    }


    .collection-image {

        height:
            200px;
    }


    .collection-content {

        padding:
            16px;
    }
}


/* =========================================================
   FOCUS ACCESSIBILITY
========================================================= */

.collection-card:focus-visible,
.collections-hero-btn:focus-visible,
.collections-cta-btn:focus-visible {

    outline:
        3px solid
        var(--collection-pink);

    outline-offset:
        4px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .collection-card,
    .collection-image img,
    .collection-overlay,
    .collection-link,
    .collections-hero-btn,
    .collections-cta-btn,
    .feature-item {

        transition:
            none !important;
    }
}


/* =========================================================
   MOBILE OVERFLOW PROTECTION
========================================================= */

@media (max-width: 767px) {

    .collections-page {

        width: 100%;
        max-width: 100%;

        overflow-x: hidden;
    }

    .collections-container,
    .collections-section,
    .collections-features,
    .collections-cta {

        max-width: 100%;
    }

    .collection-card,
    .collection-image {

        max-width: 100%;
    }

    .collection-image img {

        max-width: 100%;
    }
}
/* =========================================================
   CHECKOUT PAGE — MEENAKSHI ENTERPRISES
   Pink + Blue + Gold Theme
========================================================= */

.checkout-page {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 50px;
}


/* =========================================================
   PAGE BACKGROUND
========================================================= */

body {
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(245, 91, 158, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(0, 128, 170, 0.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #fff8fc 0%,
            #fffaf5 45%,
            #f3fbff 100%
        );
}


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

.checkout-title {
    position: relative;

    margin-bottom: 30px;

    font-size: 32px;
    font-weight: 800;

    color: #08799d;

    letter-spacing: -0.5px;
}

.checkout-title::after {
    content: "";

    display: block;

    width: 75px;
    height: 4px;

    margin-top: 10px;

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            #e85da5,
            #08799d,
            #f4b942
        );
}


/* =========================================================
   CUSTOMER FORM CARD
========================================================= */

#checkout-form {
    position: relative;

    padding: 32px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fff7fc
        );

    border: 1px solid rgba(232, 93, 165, 0.20);

    box-shadow:
        0 18px 50px rgba(8, 121, 157, 0.10),
        0 5px 20px rgba(232, 93, 165, 0.08);

    overflow: hidden;
}

#checkout-form::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            #08799d,
            #e85da5,
            #f4b942,
            #08799d
        );
}


/* =========================================================
   FORM LABELS
========================================================= */

#checkout-form .form-label {
    display: block;

    margin-bottom: 8px;

    color: #08799d;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 0.2px;
}


/* =========================================================
   FORM INPUTS
========================================================= */

#checkout-form .form-control {
    min-height: 48px;

    padding: 12px 15px;

    border: 1px solid #e5dce2;

    border-radius: 12px;

    background: #ffffff;

    color: #333;

    font-size: 14px;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.03);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease,
        background-color .25s ease;
}

#checkout-form textarea.form-control {
    min-height: 120px;

    resize: vertical;
}


/* INPUT HOVER */

#checkout-form .form-control:hover {
    border-color: #e85da5;

    background: #fffafd;
}


/* INPUT FOCUS */

#checkout-form .form-control:focus {
    border-color: #08799d;

    background: #ffffff;

    outline: none;

    box-shadow:
        0 0 0 3px rgba(8, 121, 157, 0.10),
        0 8px 20px rgba(8, 121, 157, 0.08);

    transform: translateY(-1px);
}


/* PLACEHOLDER */

#checkout-form .form-control::placeholder {
    color: #aaa;

    opacity: 1;
}


/* =========================================================
   WHATSAPP CHECKOUT BUTTON
========================================================= */

.whatsapp-checkout-btn {
    position: relative;

    width: 100%;

    min-height: 54px;

    margin-top: 12px;

    border: none;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #08799d 0%,
            #0498b8 50%,
            #e85da5 100%
        );

    color: #ffffff;

    font-size: 16px;
    font-weight: 800;

    letter-spacing: 0.2px;

    box-shadow:
        0 10px 25px rgba(8, 121, 157, 0.22);

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.whatsapp-checkout-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.30),
            transparent
        );

    transform: skewX(-20deg);

    transition: left .7s ease;
}

.whatsapp-checkout-btn:hover::before {
    left: 140%;
}

.whatsapp-checkout-btn:hover {
    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(8, 121, 157, 0.28),
        0 5px 18px rgba(232, 93, 165, 0.18);
}

.whatsapp-checkout-btn:active {
    transform: translateY(-1px);
}

.whatsapp-checkout-btn i {
    margin-right: 8px;

    font-size: 19px;
}


/* =========================================================
   ORDER SUMMARY
========================================================= */

.checkout-summary {
    position: relative;

    padding: 30px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #e85da5 0%,
            #d94b95 45%,
            #08799d 130%
        );

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

    box-shadow:
        0 20px 50px rgba(232, 93, 165, 0.22),
        0 8px 25px rgba(8, 121, 157, 0.14);

    color: #ffffff;

    overflow: hidden;
}


/* Decorative circle */

.checkout-summary::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -90px;
    right: -60px;

    border-radius: 50%;

    background: rgba(255,255,255,.10);
}


/* Second decorative circle */

.checkout-summary::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    bottom: -50px;
    left: -30px;

    border-radius: 50%;

    background: rgba(255,255,255,.08);
}


/* =========================================================
   SUMMARY HEADING
========================================================= */

.checkout-summary h3 {
    position: relative;

    z-index: 2;

    margin-bottom: 25px;

    color: #ffffff;

    font-size: 25px;
    font-weight: 800;
}


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

.checkout-item {
    position: relative;

    z-index: 2;

    padding: 12px;

    margin-bottom: 12px !important;

    border-radius: 15px;

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

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

    backdrop-filter: blur(8px);

    transition:
        transform .25s ease,
        background-color .25s ease;
}

.checkout-item:hover {
    transform: translateX(4px);

    background: rgba(255,255,255,.20);
}


/* PRODUCT IMAGE */

.checkout-item img {
    width: 72px !important;
    height: 72px !important;

    flex-shrink: 0;

    border: 3px solid rgba(255,255,255,.75);

    border-radius: 13px !important;

    object-fit: cover;

    box-shadow:
        0 5px 15px rgba(0,0,0,.16);
}


/* PRODUCT NAME */

.checkout-item .flex-grow-1 > div {
    color: #ffffff !important;

    font-size: 14px;

    line-height: 1.4;
}


/* QUANTITY */

.checkout-item small {
    color: rgba(255,255,255,.82) !important;

    font-size: 12px;
}


/* ITEM PRICE */

.checkout-item strong {
    color: #fff4c7;

    font-size: 15px;

    white-space: nowrap;
}


/* =========================================================
   SUMMARY HR
========================================================= */

.checkout-summary hr {
    position: relative;

    z-index: 2;

    margin: 22px 0;

    border: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.45),
            transparent
        );
}


/* =========================================================
   TOTAL
========================================================= */

.checkout-total {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 17px 18px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #f7d778,
            #f4c95d
        );

    color: #572b19;

    box-shadow:
        0 8px 20px rgba(0,0,0,.10);
}

.checkout-total span {
    font-size: 17px;

    font-weight: 700;
}

.checkout-total strong {
    font-size: 21px;

    font-weight: 900;

    color: #572b19;
}


/* =========================================================
   FORM VALIDATION
========================================================= */

#checkout-form .form-control:invalid:not(:placeholder-shown) {
    border-color: #e85d75;

    box-shadow:
        0 0 0 3px rgba(232, 93, 117, 0.08);
}

#checkout-form .form-control:valid:not(:placeholder-shown) {
    border-color: #39a98a;
}


/* =========================================================
   CUSTOMER DETAILS ICON STYLE
========================================================= */

#checkout-form .mb-3 {
    position: relative;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 991px) {

    .checkout-page {
        padding-left: 20px;
        padding-right: 20px;
    }

    #checkout-form {
        padding: 25px;
    }

    .checkout-summary {
        padding: 25px;
    }

    .checkout-title {
        font-size: 29px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 767px) {

    .checkout-page {
        margin-top: 25px !important;

        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 30px;
    }

    .checkout-title {
        margin-bottom: 20px;

        font-size: 27px;
    }

    #checkout-form {
        padding: 20px;

        border-radius: 18px;
    }

    #checkout-form .form-control {
        min-height: 46px;
    }

    .checkout-summary {
        margin-top: 10px;

        padding: 20px;

        border-radius: 20px;
    }

    .checkout-summary h3 {
        font-size: 22px;
    }

    .checkout-item {
        gap: 10px !important;

        padding: 10px;
    }

    .checkout-item img {
        width: 60px !important;
        height: 60px !important;
    }

    .checkout-item .flex-grow-1 > div {
        font-size: 13px;
    }

    .checkout-item strong {
        font-size: 13px;
    }

    .checkout-total {
        padding: 14px;
    }

    .checkout-total span {
        font-size: 15px;
    }

    .checkout-total strong {
        font-size: 18px;
    }

    .whatsapp-checkout-btn {
        min-height: 52px;

        font-size: 14px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .checkout-page {
        padding-left: 10px;
        padding-right: 10px;
    }

    #checkout-form {
        padding: 16px;
    }

    .checkout-summary {
        padding: 16px;
    }

    .checkout-item img {
        width: 54px !important;
        height: 54px !important;
    }

    .checkout-item {
        gap: 8px !important;
    }

    .checkout-item strong {
        font-size: 12px;
    }

    .checkout-title {
        font-size: 24px;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    #checkout-form .form-control,
    .whatsapp-checkout-btn,
    .checkout-item {
        transition: none;
    }

}
/* =========================================================
   COLORFUL WISHLIST PAGE
========================================================= */

.wishlist-page {
    width: 100%;
    min-height: 600px;
    color: #34231d;
    background: #fffaf5;
}


/* =========================================================
   CONTAINER
========================================================= */

.wishlist-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   DASHBOARD SECTION HEADER
   ========================================================= */

.admin-section-header {
    margin-bottom: 18px;
}

.admin-section-header > div {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.admin-section-header span {
    display: block;
    margin-bottom: 7px;
    color: #0284c7;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.admin-section-header h2 {
    margin: 0;
    color: #db2777;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-weight: 400;
}


/* =========================================================
   STAT CARD ARROW
   ========================================================= */

.admin-stat-arrow {
    position: absolute;
    right: 20px;
    top: 20px;
    color: #0284c7;
    font-size: 14px;
    opacity: .7;
    transition:
        transform .3s ease,
        color .3s ease,
        opacity .3s ease;
}

.admin-stat-card:hover .admin-stat-arrow {
    color: #db2777;
    opacity: 1;
    transform: translate(3px,-3px);
}


/* =========================================================
   INFO CARD TYPOGRAPHY
   ========================================================= */

.admin-info-card > div:last-child {
    min-width: 0;
}

.admin-info-card span {
    display: block;
    margin-bottom: 6px;
    color: #0284c7;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.admin-info-card h3 {
    margin: 0 0 7px;
    color: #172033;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 400;
}

.admin-info-card p {
    margin: 0;
    color: #64748b;
    font-size: 10px;
    line-height: 1.7;
}

.auth-security-note i {
    color: #0284c7;
    font-size: 13px;
}


/* =========================================================
   BUY NOW BUTTON
   ========================================================= */

.buy-now-btn {
    width: 100%;
    display: block;
    margin-top: 10px;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    background-color: #ec4899;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: 0.3s ease;
}

.buy-now-btn:hover {
    background-color: #db2777;
    color: #ffffff;
}


/* =========================================================
   MEENAKSHI ENTERPRISES — ADMIN DASHBOARD
   PREMIUM PINK / SKY BLUE
   ========================================================= */

.admin-page {
    min-height: 100vh;
    background: #f8fbff;
}


/* ================= MAIN ================= */

.admin-main {
    margin-left: 240px;
    min-height: 100vh;
}


/* ================= TOPBAR ================= */

.admin-topbar {
    height: 78px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 42px;
}

.admin-topbar-left h1 {
    margin: 0;
    color: #db2777;
    font-family: Georgia, serif;
    font-size: 25px;
    font-weight: 500;
}

.admin-topbar-left p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
}

.admin-secure {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 12px;
}

.admin-secure i {
    color: #0284c7;
}


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

.admin-content {
    padding: 42px;
    max-width: 1500px;
}


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

.admin-dashboard-hero {
    background:
        linear-gradient(
            120deg,
            #ec4899 0%,
            #db2777 45%,
            #0284c7 100%
        );
    border-radius: 14px;
    padding: 38px 42px;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

.admin-dashboard-hero::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    right: -90px;
    top: -100px;
}

.admin-dashboard-hero::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    right: 80px;
    bottom: -110px;
}

.admin-dashboard-hero-content {
    position: relative;
    z-index: 2;
}

.admin-dashboard-eyebrow {
    color: #e0f2fe;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.admin-dashboard-hero h2 {
    font-family: Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    margin: 0 0 10px;
}

.admin-dashboard-hero p {
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,.78);
    font-size: 13px;
    line-height: 1.8;
}


/* ================= SECTION HEADER ================= */

.admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 35px 0 18px;
}

.admin-section-header h3 {
    margin: 0;
    color: #db2777;
    font-family: Georgia, serif;
    font-size: 21px;
    font-weight: 500;
}

.admin-section-header p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
}


/* ================= STAT CARDS ================= */

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.admin-stat-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.admin-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(30,64,175,.09);
}

.admin-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    background: #fdf2f8;
    color: #ec4899;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 18px;
}

.admin-stat-card small {
    display: block;
    color: #64748b;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.admin-stat-card h3 {
    margin: 6px 0 0;
    color: #172033;
    font-size: 29px;
    font-weight: 500;
}

.admin-stat-arrow {
    position: absolute;
    right: 20px;
    top: 22px;
    color: #0284c7;
    font-size: 17px;
}


/* ================= QUICK ACTIONS ================= */

.admin-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.admin-info-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 25px;
    text-decoration: none;
    display: block;
    transition: .3s ease;
}

.admin-info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(30,64,175,.08);
    border-color: #bae6fd;
}

.admin-info-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #ec4899,
            #38bdf8
        );
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.admin-info-card h4 {
    color: #172033;
    font-family: Georgia, serif;
    font-size: 18px;
    margin-bottom: 7px;
}

.admin-info-card p {
    color: #64748b;
    font-size: 12px;
    line-height: 1.7;
    margin: 0;
}

.admin-info-card .admin-card-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 17px;
    color: #db2777;
    font-size: 11px;
    font-weight: 600;
}


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

.admin-footer {
    margin-left: 0;
    padding: 25px 42px;
    border-top: 1px solid #e2e8f0;
    color: #94a3b8;
    font-size: 11px;
    background: #fff;
}


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

.admin-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.admin-reveal.show {
    opacity: 1;
    transform: translateY(0);
}


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

@media (max-width: 1100px) {

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

    .admin-info-grid {
        grid-template-columns: 1fr 1fr;
    }
}


@media (max-width: 768px) {

    .admin-sidebar {
        position: relative;
        width: 100%;
        height: auto;
    }

    .admin-main {
        margin-left: 0;
    }

    .admin-nav {
        display: none;
    }

    .admin-sidebar-bottom {
        display: none;
    }

    .admin-topbar {
        padding: 0 20px;
    }

    .admin-content {
        padding: 25px 18px;
    }

    .admin-dashboard-hero {
        padding: 28px 24px;
    }

    .admin-dashboard-hero h2 {
        font-size: 25px;
    }

    .admin-stat-grid,
    .admin-info-grid {
        grid-template-columns: 1fr;
    }

    .admin-footer {
        padding: 20px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .admin-reveal,
    .admin-stat-card,
    .admin-info-card {
        transition: none;
    }

    .admin-reveal {
        opacity: 1;
        transform: none;
    }
}


.admin-nav-account-title {
    margin-top: 24px;
}

/* =========================================================
   DASHBOARD SECTION HEADER
   ========================================================= */

.admin-section-header {
    margin-bottom: 18px;
}

.admin-section-header > div {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.admin-section-header span {
    display: block;
    margin-bottom: 7px;
    color: #7c3aed;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.admin-section-header h2 {
    margin: 0;
    color: #be185d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-weight: 400;
}


/* =========================================================
   STAT CARD ARROW
   ========================================================= */

.admin-stat-arrow {
    position: absolute;
    right: 20px;
    top: 20px;
    color: #7c3aed;
    font-size: 14px;
    opacity: .7;
    transition:
        transform .3s ease,
        color .3s ease,
        opacity .3s ease;
}

.admin-stat-card:hover .admin-stat-arrow {
    color: #be185d;
    opacity: 1;
    transform: translate(3px,-3px);
}


/* =========================================================
   INFO CARD TYPOGRAPHY
   ========================================================= */

.admin-info-card > div:last-child {
    min-width: 0;
}

.admin-info-card span {
    display: block;
    margin-bottom: 6px;
    color: #7c3aed;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.admin-info-card h3 {
    margin: 0 0 7px;
    color: #29213d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 400;
}

.admin-info-card p {
    margin: 0;
    color: #756b82;
    font-size: 10px;
    line-height: 1.7;
}

.auth-security-note i {
    color: #7c3aed;
    font-size: 13px;
}


/* =========================================================
   BUY NOW BUTTON
   ========================================================= */

.buy-now-btn {
    width: 100%;
    display: block;
    margin-top: 10px;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    background-color: #7c3aed;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: 0.3s ease;
}

.buy-now-btn:hover {
    background-color: #6d28d9;
    color: #ffffff;
}

/* =========================================================
   ADMIN DASHBOARD
   MEENAKSHI ENTERPRISES
   BRAND COLORS
========================================================= */

:root {
    --admin-pink: #E66CAB;
    --admin-pink-dark: #D65398;
    --admin-pink-light: #F8DDEB;

    --admin-blue: #05668D;
    --admin-blue-dark: #04506E;
    --admin-blue-light: #DCEEF3;

    --admin-brown: #3E2723;
    --admin-brown-dark: #2B1B18;
    --admin-brown-light: #F3ECE9;

    --admin-white: #ffffff;

    --admin-bg: #FAF7F8;

    --admin-text: #3E2723;
    --admin-muted: #756A67;

    --admin-border: #E7D9D5;

    --admin-shadow:
        0 10px 30px rgba(62, 39, 35, 0.08);

    --admin-shadow-hover:
        0 18px 40px rgba(62, 39, 35, 0.13);
}


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

.admin-page {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    background-color: var(--admin-bg);

    color: var(--admin-text);

    font-family: inherit;
}



/* =========================================================
   TOPBAR
========================================================= */

.admin-topbar {
    position: sticky;

    top: 0;

    min-height: 76px;

    padding: 15px 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        rgba(255, 255, 255, 0.97);

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

    backdrop-filter: blur(12px);

    z-index: 100;
}

.admin-topbar-left h1 {
    margin: 0;

    color: var(--admin-brown);

    font-size: 23px;

    font-weight: 750;

    letter-spacing: -0.4px;
}

.admin-topbar-left p {
    margin: 4px 0 0;

    color: var(--admin-muted);

    font-size: 11px;
}

.admin-secure {
    display: flex;

    align-items: center;

    gap: 7px;

    padding: 8px 13px;

    border-radius: 30px;

    background:
        var(--admin-blue-light);

    color:
        var(--admin-blue);

    font-size: 10px;

    font-weight: 650;
}

.admin-secure i {
    color: var(--admin-pink);
}


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

.admin-content {
    padding: 30px;
}


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

.admin-dashboard-hero {
    position: relative;

    overflow: hidden;

    padding: 36px 38px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #3E2723 0%,
            #3E2723 35%,
            #05668D 100%
        );

    color: #ffffff;

    box-shadow:
        0 15px 35px rgba(62, 39, 35, 0.15);
}

.admin-dashboard-hero::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    top: -160px;
    right: -70px;

    border-radius: 50%;

    background:
        rgba(230, 108, 171, 0.20);

    pointer-events: none;
}

.admin-dashboard-hero::after {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    right: 170px;
    bottom: -190px;

    border-radius: 50%;

    background:
        rgba(5, 102, 141, 0.20);

    pointer-events: none;
}

.admin-dashboard-hero-content {
    position: relative;

    max-width: 720px;

    z-index: 2;
}

.admin-dashboard-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 11px;

    color:
        #F8DDEB;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}

.admin-dashboard-eyebrow i {
    color:
        #E66CAB;
}

.admin-dashboard-hero h2 {
    margin: 0;

    color: #ffffff;

    font-size: 30px;

    font-weight: 750;

    line-height: 1.2;

    letter-spacing: -0.6px;
}

.admin-dashboard-hero p {
    max-width: 600px;

    margin: 11px 0 0;

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

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.admin-section-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin: 28px 0 15px;
}

.admin-section-header h3 {
    margin: 0;

    color: var(--admin-brown);

    font-size: 16px;

    font-weight: 720;
}

.admin-section-header p {
    margin: 3px 0 0;

    color: var(--admin-muted);

    font-size: 10px;
}


/* =========================================================
   STAT GRID
========================================================= */

.admin-stat-grid {
    display: grid;

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

    gap: 17px;
}


/* =========================================================
   STAT CARD
========================================================= */

.admin-stat-card {
    position: relative;

    padding: 20px;

    min-height: 145px;

    background-color:
        var(--admin-white);

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

    border-radius: 17px;

    box-shadow:
        var(--admin-shadow);

    overflow: hidden;

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

.admin-stat-card::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -50px;
    bottom: -55px;

    border-radius: 50%;

    background:
        var(--admin-pink-light);

    opacity: 0.65;

    pointer-events: none;
}

.admin-stat-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(5, 102, 141, 0.30);

    box-shadow:
        var(--admin-shadow-hover);
}


/* =========================================================
   STAT ICON
========================================================= */

.admin-stat-icon {
    width: 43px;
    height: 43px;

    display: flex;

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

    margin-bottom: 16px;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--admin-pink-light),
            var(--admin-blue-light)
        );

    color:
        var(--admin-pink-dark);

    font-size: 18px;
}

.admin-stat-card:nth-child(even)
.admin-stat-icon {
    color:
        var(--admin-blue);
}


/* =========================================================
   STAT TEXT
========================================================= */

.admin-stat-card small {
    display: block;

    margin-bottom: 5px;

    color: var(--admin-muted);

    font-size: 10px;

    font-weight: 600;
}

.admin-stat-card h3 {
    margin: 0;

    color: var(--admin-brown);

    font-size: 25px;

    font-weight: 750;

    line-height: 1.1;
}


/* =========================================================
   STAT ARROW
========================================================= */

.admin-stat-arrow {
    position: absolute;

    top: 20px;
    right: 20px;

    width: 29px;
    height: 29px;

    display: flex;

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

    border-radius: 50%;

    background:
        var(--admin-bg);

    color:
        var(--admin-muted);

    font-size: 12px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.admin-stat-card:hover .admin-stat-arrow {
    background:
        linear-gradient(
            135deg,
            #E66CAB,
            #05668D
        );

    color: #ffffff;

    transform:
        translate(2px, -2px);
}


/* =========================================================
   INFO GRID
========================================================= */

.admin-info-grid {
    display: grid;

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

    gap: 17px;

    margin-top: 17px;
}


/* =========================================================
   INFO CARD
========================================================= */

.admin-info-card {
    position: relative;

    padding: 23px;

    min-height: 175px;

    background-color:
        var(--admin-white);

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

    border-radius: 17px;

    box-shadow:
        var(--admin-shadow);

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

.admin-info-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(5, 102, 141, 0.30);

    box-shadow:
        var(--admin-shadow-hover);
}


/* =========================================================
   INFO CARD ICON
========================================================= */

.admin-info-card-icon {
    width: 44px;
    height: 44px;

    display: flex;

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

    margin-bottom: 16px;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--admin-blue-light),
            var(--admin-pink-light)
        );

    color:
        var(--admin-blue);

    font-size: 18px;
}


/* =========================================================
   INFO CARD CONTENT
========================================================= */

.admin-info-card h4 {
    margin: 0 0 7px;

    color:
        var(--admin-brown);

    font-size: 14px;

    font-weight: 720;
}

.admin-info-card p {
    margin: 0;

    color:
        var(--admin-muted);

    font-size: 10px;

    line-height: 1.7;
}


/* =========================================================
   CARD LINK
========================================================= */

.admin-info-card .admin-card-link {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 15px;

    color:
        var(--admin-blue);

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    transition:
        color 0.2s ease,
        gap 0.2s ease;
}

.admin-info-card .admin-card-link:hover {
    color:
        var(--admin-pink-dark);

    gap: 9px;
}


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

.admin-footer {
    margin-top: 30px;

    padding: 18px 0 5px;

    border-top:
        1px solid var(--admin-border);

    color:
        var(--admin-muted);

    font-size: 9px;

    text-align: center;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.admin-reveal {
    opacity: 0;

    transform:
        translateY(18px);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

.admin-reveal.show {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   RESPONSIVE — 1100px
========================================================= */

@media (max-width: 1100px) {

    .admin-sidebar {
        width: 235px;
    }

    .admin-main {
        margin-left: 235px;
    }

    .admin-content {
        padding: 25px;
    }

    .admin-stat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .admin-info-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   RESPONSIVE — 768px
========================================================= */

@media (max-width: 768px) {

    .admin-sidebar {
        width: 205px;
    }

    .admin-main {
        margin-left: 205px;
    }

    .admin-topbar {
        padding: 13px 18px;
    }

    .admin-topbar-left h1 {
        font-size: 20px;
    }

    .admin-content {
        padding: 20px;
    }

    .admin-dashboard-hero {
        padding: 30px;
    }

    .admin-dashboard-hero h2 {
        font-size: 26px;
    }
}


/* =========================================================
   PHONE VIEW
   SIDEBAR AT TOP
   VERTICAL MENU
========================================================= */

@media (max-width: 650px) {

    /* -----------------------------------------
       MAIN
    ----------------------------------------- */

    .admin-main {
        margin-left: 0 !important;

        min-width: 0;

        width: 100%;
    }



    /* -----------------------------------------
       TOPBAR
    ----------------------------------------- */

    .admin-topbar {
        position: relative;

        width: 100%;

        min-height: 58px;

        padding:
            10px 14px;

        background: #ffffff;

        border-bottom:
            1px solid var(--admin-border);
    }

    .admin-topbar-left h1 {
        font-size: 18px;
    }

    .admin-topbar-left p {
        font-size: 10px;
    }

    .admin-secure {
        padding:
            6px 9px;

        font-size: 9px;
    }


    /* -----------------------------------------
       CONTENT
    ----------------------------------------- */

    .admin-content {
        width: 100%;

        padding:
            18px 14px 25px;
    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .admin-dashboard-hero {
        padding:
            24px 19px;

        border-radius: 19px;
    }

    .admin-dashboard-hero h2 {
        font-size: 23px;

        line-height: 1.3;
    }

    .admin-dashboard-hero p {
        font-size: 12px;
    }


    /* -----------------------------------------
       STATS
    ----------------------------------------- */

    .admin-stat-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    /* -----------------------------------------
       INFO
    ----------------------------------------- */

    .admin-info-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 400px) {

    .admin-brand {
        min-height: 62px;

        padding:
            8px 11px;
    }

    .admin-brand-icon {
        width: 39px;
        height: 39px;

        font-size: 17px;
    }

    .admin-brand h4 {
        font-size: 14px;
    }

    .admin-brand span {
        font-size: 8px;
    }


    .admin-profile {
        width:
            calc(100% - 20px);

        margin: 10px;

        padding:
            10px 11px;
    }


    .admin-nav {
        padding-left: 10px;
        padding-right: 10px;
    }


    .admin-nav a {
        min-height: 43px;

        padding:
            9px 11px !important;

        font-size: 10px;
    }

    .admin-nav a span {
        font-size: 10px;
    }


    .admin-content {
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .admin-reveal {
        opacity: 1;

        transform: none;

        transition: none;
    }

    .admin-stat-card,
    .admin-info-card,
    .admin-nav a,
    .admin-stat-arrow {
        transition: none;
    }
}



/* =========================================================
   MEENAKSHI ENTERPRISES
   ADMIN PRODUCTS PAGE
   PREMIUM PINK + BLUE + BROWN THEME
========================================================= */

:root {
    --admin-pink: #E66CAB;
    --admin-pink-dark: #D65398;
    --admin-pink-light: #F8DDEB;

    --admin-blue: #05668D;
    --admin-blue-dark: #04506E;
    --admin-blue-light: #E0F1F5;

    --admin-brown: #3E2723;
    --admin-brown-dark: #2B1B18;
    --admin-brown-light: #F3ECE9;

    --admin-white: #FFFFFF;

    --admin-bg: #FAF7F8;
    --admin-text: #3E2723;
    --admin-muted: #756A67;

    --admin-border: #E8DEDA;

    --admin-shadow:
        0 8px 25px rgba(62, 39, 35, 0.07);

    --admin-shadow-hover:
        0 15px 35px rgba(62, 39, 35, 0.12);
}


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

.admin-dashboard-page {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    background:
        var(--admin-bg);

    color:
        var(--admin-text);
}


/* =========================================================
   LAYOUT
========================================================= */

.admin-dashboard-layout {
    min-height: 100vh;

    display: flex;
}



/* =========================================================
   MAIN
========================================================= */

.admin-main {
    width: calc(100% - 270px);

    min-height: 100vh;

    margin-left: 270px;

    background:
        var(--admin-bg);
}


/* =========================================================
   TOP BAR
========================================================= */

.admin-topbar {
    position: sticky;

    top: 0;

    min-height: 76px;

    padding: 14px 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        rgba(255, 255, 255, 0.97);

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

    backdrop-filter:
        blur(12px);

    z-index: 100;
}

.admin-topbar-small {
    margin-bottom: 3px;

    color:
        var(--admin-pink-dark);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;
}

.admin-topbar h1 {
    margin: 0;

    color:
        var(--admin-brown);

    font-size: 23px;

    font-weight: 750;

    line-height: 1.15;
}

.admin-topbar-right {
    display: flex;

    align-items: center;

    gap: 12px;
}


/* =========================================================
   SECURE STATUS
========================================================= */

.admin-secure-status {
    display: flex;

    align-items: center;

    gap: 7px;

    padding: 8px 12px;

    border-radius: 30px;

    background:
        var(--admin-blue-light);

    color:
        var(--admin-blue);

    font-size: 9px;

    font-weight: 650;
}

.admin-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #E66CAB;

    box-shadow:
        0 0 0 3px
        rgba(230, 108, 171, 0.14);
}


/* =========================================================
   TOPBAR USER
========================================================= */

.admin-topbar-user {
    display: flex;

    align-items: center;

    gap: 6px;

    color:
        var(--admin-brown);

    font-size: 10px;

    font-weight: 650;
}

.admin-topbar-user i {
    color:
        var(--admin-blue);

    font-size: 20px;
}


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

.admin-content {
    padding: 30px;
}


/* =========================================================
   PRODUCTS INTRO
========================================================= */

.admin-products-intro {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 30px 32px;

    margin-bottom: 18px;

    background:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #FFF8FB 100%
        );

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

    border-radius: 20px;

    box-shadow:
        var(--admin-shadow);
}

.admin-welcome-label {
    margin-bottom: 8px;

    color:
        var(--admin-blue);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.4px;
}

.admin-products-intro h2 {
    margin: 0;

    color:
        var(--admin-brown);

    font-size: 29px;

    font-weight: 750;

    line-height: 1.2;
}

.admin-products-intro h2 span {
    color:
        var(--admin-pink);
}

.admin-products-intro p {
    margin: 8px 0 0;

    color:
        var(--admin-muted);

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   ADD PRODUCT BUTTON
========================================================= */

.admin-products-add-btn {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 11px 17px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #E66CAB,
            #05668D
        );

    color:
        #FFFFFF;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    box-shadow:
        0 8px 18px
        rgba(230, 108, 171, 0.18);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.admin-products-add-btn:hover {
    color:
        #FFFFFF;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 24px
        rgba(230, 108, 171, 0.24);
}


/* =========================================================
   PRODUCT SUMMARY
========================================================= */

.admin-products-summary {
    min-height: 76px;

    margin-bottom: 18px;

    padding: 13px 18px;

    display: flex;

    align-items: center;

    gap: 13px;

    background:
        #FFFFFF;

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

    border-radius: 15px;

    box-shadow:
        var(--admin-shadow);
}

.admin-products-summary-icon {
    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 12px;

    background:
        var(--admin-pink-light);

    color:
        var(--admin-pink-dark);

    font-size: 18px;
}

.admin-products-summary span {
    display: block;

    color:
        var(--admin-muted);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;
}

.admin-products-summary strong {
    display: block;

    margin-top: 2px;

    color:
        var(--admin-brown);

    font-size: 21px;

    font-weight: 750;
}

.admin-products-summary-text {
    margin-left: auto;

    color:
        var(--admin-muted);

    font-size: 10px;
}


/* =========================================================
   PRODUCTS PANEL
========================================================= */

.admin-products-panel {
    overflow: hidden;

    background:
        #FFFFFF;

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

    border-radius: 18px;

    box-shadow:
        var(--admin-shadow);
}


/* =========================================================
   PANEL HEADER
========================================================= */

.admin-products-panel-header {
    min-height: 76px;

    padding: 17px 21px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid var(--admin-border);
}

.admin-products-panel-header span {
    display: block;

    margin-bottom: 3px;

    color:
        var(--admin-blue);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;
}

.admin-products-panel-header h2 {
    margin: 0;

    color:
        var(--admin-brown);

    font-size: 17px;

    font-weight: 720;
}

.admin-products-count {
    padding: 7px 11px;

    border-radius: 20px;

    background:
        var(--admin-pink-light);

    color:
        var(--admin-pink-dark);

    font-size: 9px;

    font-weight: 700;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.admin-products-table-wrapper {
    width: 100%;

    overflow-x: auto;

    scrollbar-width: thin;
}


/* =========================================================
   PRODUCTS TABLE
========================================================= */

.admin-products-table {
    width: 100%;

    min-width: 850px;

    border-collapse: collapse;
}

.admin-products-table thead {
    background:
        #FBF8F9;
}

.admin-products-table th {
    padding: 12px 16px;

    color:
        var(--admin-muted);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-align: left;

    white-space: nowrap;

    border-bottom:
        1px solid var(--admin-border);
}

.admin-products-table td {
    padding: 13px 16px;

    color:
        var(--admin-text);

    font-size: 10px;

    vertical-align: middle;

    border-bottom:
        1px solid #F0E9E6;
}

.admin-products-table tbody tr {
    transition:
        background 0.2s ease;
}

.admin-products-table tbody tr:hover {
    background:
        #FFF9FC;
}

.admin-products-table tbody tr:last-child td {
    border-bottom: 0;
}


/* =========================================================
   PRODUCT ID
========================================================= */

.admin-product-id {
    display: inline-block;

    padding: 5px 8px;

    border-radius: 7px;

    background:
        var(--admin-brown-light);

    color:
        var(--admin-brown);

    font-size: 9px;

    font-weight: 700;
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.admin-product-info {
    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 210px;
}

.admin-product-image {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 10px;

    background:
        var(--admin-brown-light);

    border:
        1px solid var(--admin-border);
}

.admin-product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.admin-product-info strong {
    display: block;

    max-width: 190px;

    color:
        var(--admin-brown);

    font-size: 11px;

    font-weight: 700;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.admin-product-info small {
    display: block;

    margin-top: 3px;

    color:
        var(--admin-muted);

    font-size: 8px;
}


/* =========================================================
   CATEGORY
========================================================= */

.admin-product-category {
    display: inline-block;

    padding: 5px 9px;

    border-radius: 7px;

    background:
        var(--admin-blue-light);

    color:
        var(--admin-blue);

    font-size: 8px;

    font-weight: 650;

    white-space: nowrap;
}


/* =========================================================
   PRICE
========================================================= */

.admin-product-price {
    color:
        var(--admin-blue);

    font-size: 11px;

    font-weight: 750;

    white-space: nowrap;
}


/* =========================================================
   OLD PRICE
========================================================= */

.admin-product-old-price {
    color:
        #9B8D89;

    font-size: 10px;

    text-decoration: line-through;

    white-space: nowrap;
}

.admin-no-price {
    color:
        #B7AAA6;

    font-size: 12px;
}


/* =========================================================
   PRODUCT ACTIONS
========================================================= */

.admin-product-actions {
    display: flex;

    align-items: center;

    gap: 6px;
}

.admin-product-actions form {
    margin: 0;
}


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

.admin-edit-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    min-height: 32px;

    padding: 6px 10px;

    border:
        1px solid
        rgba(5, 102, 141, 0.20);

    border-radius: 8px;

    background:
        var(--admin-blue-light);

    color:
        var(--admin-blue);

    text-decoration: none;

    font-size: 8px;

    font-weight: 700;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.admin-edit-btn:hover {
    color:
        #FFFFFF;

    background:
        var(--admin-blue);

    transform:
        translateY(-1px);
}


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

.admin-delete-btn {
    min-height: 32px;

    padding: 6px 10px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    border:
        1px solid
        rgba(230, 108, 171, 0.25);

    border-radius: 8px;

    background:
        var(--admin-pink-light);

    color:
        var(--admin-pink-dark);

    font-size: 8px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.admin-delete-btn:hover {
    color:
        #FFFFFF;

    background:
        var(--admin-pink-dark);

    transform:
        translateY(-1px);
}


/* =========================================================
   EMPTY STATE
========================================================= */

.admin-products-empty {
    padding: 70px 20px !important;

    text-align: center;
}

.admin-empty-icon {
    width: 65px;
    height: 65px;

    margin:
        0 auto 15px;

    display: flex;

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

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--admin-pink-light),
            var(--admin-blue-light)
        );

    color:
        var(--admin-blue);

    font-size: 25px;
}

.admin-products-empty h3 {
    margin: 0;

    color:
        var(--admin-brown);

    font-size: 17px;

    font-weight: 720;
}

.admin-products-empty p {
    margin: 6px 0 17px;

    color:
        var(--admin-muted);

    font-size: 10px;
}


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

.admin-products-note {
    margin-top: 18px;

    padding: 16px 18px;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    background:
        var(--admin-blue-light);

    border:
        1px solid
        rgba(5, 102, 141, 0.12);

    border-radius: 14px;
}

.admin-products-note-icon {
    width: 35px;
    height: 35px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 10px;

    background:
        #FFFFFF;

    color:
        var(--admin-blue);

    font-size: 15px;
}

.admin-products-note strong {
    display: block;

    color:
        var(--admin-brown);

    font-size: 10px;

    font-weight: 700;
}

.admin-products-note p {
    margin: 3px 0 0;

    color:
        var(--admin-muted);

    font-size: 9px;

    line-height: 1.6;
}


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

.admin-footer {
    width: calc(100% - 270px);

    margin-left: 270px;

    padding: 18px 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color:
        var(--admin-muted);

    font-size: 8px;

    border-top:
        1px solid var(--admin-border);

    background:
        #FFFFFF;
}


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

.reveal {
    opacity: 0;

    transform:
        translateY(18px);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

.reveal.show {
    opacity: 1;

    transform:
        translateY(0);
}


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

@media (max-width: 1100px) {

    .admin-sidebar {
        width: 235px;
    }

    .admin-main {
        width: calc(100% - 235px);

        margin-left: 235px;
    }

    .admin-footer {
        width: calc(100% - 235px);

        margin-left: 235px;
    }

    .admin-content {
        padding: 25px;
    }

    .admin-products-intro {
        padding: 26px;
    }
}


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

@media (max-width: 800px) {

    .admin-sidebar {
        width: 210px;
    }

    .admin-main {
        width: calc(100% - 210px);

        margin-left: 210px;
    }

    .admin-footer {
        width: calc(100% - 210px);

        margin-left: 210px;
    }

    .admin-topbar {
        padding:
            13px 18px;
    }

    .admin-topbar-user {
        display: none;
    }

    .admin-content {
        padding: 20px;
    }

    .admin-products-intro {
        align-items: flex-start;

        padding: 23px;
    }

    .admin-products-intro h2 {
        font-size: 25px;
    }
}


/* =========================================================
   PHONE VIEW
   SIDEBAR MOVES TO TOP
   MENU REMAINS VERTICAL
========================================================= */

@media (max-width: 650px) {

    /* -----------------------------------------
       LAYOUT
    ----------------------------------------- */

    .admin-dashboard-layout {
        display: block;

        width: 100%;
    }


  
    /* -----------------------------------------
       MAIN
    ----------------------------------------- */

    .admin-main {
        width: 100% !important;

        margin-left: 0 !important;

        min-width: 0;
    }


    /* -----------------------------------------
       TOPBAR
    ----------------------------------------- */

    .admin-topbar {
        position: relative;

        width: 100%;

        min-height: 58px;

        padding:
            10px 14px;
    }

    .admin-topbar-small {
        font-size: 7px;
    }

    .admin-topbar h1 {
        font-size: 18px;
    }

    .admin-topbar-right {
        gap: 0;
    }

    .admin-secure-status {
        padding:
            6px 8px;

        font-size: 8px;
    }


    /* -----------------------------------------
       CONTENT
    ----------------------------------------- */

    .admin-content {
        width: 100%;

        padding:
            15px 12px 22px;
    }


    /* -----------------------------------------
       INTRO
    ----------------------------------------- */

    .admin-products-intro {
        display: block;

        padding:
            21px 18px;

        border-radius: 17px;
    }

    .admin-products-intro h2 {
        font-size: 23px;
    }

    .admin-products-intro p {
        font-size: 10px;
    }

    .admin-products-intro
    .admin-products-add-btn {
        margin-top: 16px;

        width: 100%;
    }


    /* -----------------------------------------
       SUMMARY
    ----------------------------------------- */

    .admin-products-summary {
        padding:
            12px 14px;
    }

    .admin-products-summary-text {
        display: none;
    }


    /* -----------------------------------------
       PANEL
    ----------------------------------------- */

    .admin-products-panel {
        border-radius: 15px;
    }

    .admin-products-panel-header {
        min-height: 68px;

        padding:
            14px 15px;
    }

    .admin-products-panel-header h2 {
        font-size: 15px;
    }

    .admin-products-count {
        font-size: 8px;

        padding:
            6px 9px;
    }


    /* -----------------------------------------
       TABLE
    ----------------------------------------- */

    .admin-products-table-wrapper {
        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }

    .admin-products-table {
        min-width: 820px;
    }


    /* -----------------------------------------
       NOTE
    ----------------------------------------- */

    .admin-products-note {
        padding:
            13px 14px;
    }


    /* -----------------------------------------
       FOOTER
    ----------------------------------------- */

    .admin-footer {
        width: 100% !important;

        margin-left: 0 !important;

        padding:
            15px 12px;

        gap: 8px;
    }
}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media (max-width: 400px) {

    .admin-sidebar-brand {
        min-height: 62px;

        padding:
            8px 11px;
    }

    .admin-sidebar-logo {
        width: 39px;
        height: 39px;

        font-size: 17px;
    }

    .admin-brand-name {
        font-size: 14px;
    }

    .admin-brand-subtitle {
        font-size: 7px;
    }


    .admin-sidebar-profile {
        width:
            calc(100% - 20px);

        margin:
            9px 10px;
    }


    .admin-sidebar-nav {
        padding-left: 8px;
        padding-right: 8px;
    }


    .admin-sidebar-nav
    .admin-sidebar-link {
        min-height: 41px;

        padding:
            8px 10px !important;
    }

    .admin-sidebar-nav
    .admin-sidebar-link span {
        font-size: 10px;
    }


    .admin-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .admin-products-intro {
        padding:
            18px 15px;
    }

    .admin-products-intro h2 {
        font-size: 21px;
    }

    .admin-products-table {
        min-width: 800px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .reveal {
        opacity: 1;

        transform: none;

        transition: none;
    }

    .admin-sidebar-link,
    .admin-products-add-btn,
    .admin-edit-btn,
    .admin-delete-btn {
        transition: none;
    }
}
/* =========================================================
   MEENAKSHI ENTERPRISES
   ADMIN — ADD PRODUCT PAGE
   Theme:
   Pink  #E66CAB
   Blue  #05668D
   Brown #3E2723
   White #FFFFFF
========================================================= */

:root {
    --admin-pink: #E66CAB;
    --admin-pink-dark: #D65398;
    --admin-pink-light: #F8DDEB;

    --admin-blue: #05668D;
    --admin-blue-dark: #04506E;
    --admin-blue-light: #E0F1F5;

    --admin-brown: #3E2723;
    --admin-brown-dark: #2B1B18;
    --admin-brown-light: #F3ECE9;

    --admin-white: #FFFFFF;

    --admin-bg: #FAF7F8;
    --admin-text: #3E2723;
    --admin-muted: #756A67;

    --admin-border: #E8DEDA;

    --admin-shadow:
        0 8px 28px rgba(62, 39, 35, 0.07);

    --admin-shadow-hover:
        0 14px 35px rgba(62, 39, 35, 0.12);
}


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

.admin-add-product-page {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    background: var(--admin-bg);

    color: var(--admin-text);
}


/* =========================================================
   MAIN ADMIN LAYOUT
========================================================= */

.admin-add-product-page .admin-dashboard-layout {
    min-height: 100vh;

    display: flex;
}




/* =========================================================
   MAIN
========================================================= */

.admin-add-product-page .admin-main {
    width: calc(100% - 270px);

    min-height: 100vh;

    margin-left: 270px;

    background:
        var(--admin-bg);
}


/* =========================================================
   TOPBAR
========================================================= */

.admin-add-product-page .admin-topbar {
    position: sticky;

    top: 0;

    min-height: 76px;

    padding: 14px 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        rgba(255, 255, 255, 0.97);

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

    backdrop-filter:
        blur(12px);

    z-index: 100;
}

.admin-add-product-page .admin-topbar-small {
    margin-bottom: 3px;

    color:
        var(--admin-pink-dark);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;
}

.admin-add-product-page .admin-top-title {
    color:
        var(--admin-brown);

    font-size: 23px;

    font-weight: 750;

    line-height: 1.15;
}

.admin-add-product-page .admin-topbar-right {
    display: flex;

    align-items: center;

    gap: 12px;
}


/* =========================================================
   SECURE SESSION
========================================================= */

.admin-add-product-page .admin-secure-status {
    display: flex;

    align-items: center;

    gap: 7px;

    padding: 8px 12px;

    border-radius: 30px;

    background:
        var(--admin-blue-light);

    color:
        var(--admin-blue);

    font-size: 9px;

    font-weight: 650;
}

.admin-add-product-page .admin-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--admin-pink);

    box-shadow:
        0 0 0 3px
        rgba(230, 108, 171, 0.14);
}


/* =========================================================
   TOPBAR USER
========================================================= */

.admin-add-product-page .admin-topbar-user {
    display: flex;

    align-items: center;

    gap: 6px;

    color:
        var(--admin-brown);

    font-size: 10px;

    font-weight: 650;
}

.admin-add-product-page .admin-topbar-user i {
    color:
        var(--admin-blue);

    font-size: 20px;
}


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

.admin-add-product-content {
    width: 100%;

    padding: 30px;
}


/* =========================================================
   PAGE HEADING
========================================================= */

.admin-page-heading-row {
    margin-bottom: 22px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;
}

.admin-eyebrow {
    margin-bottom: 7px;

    color:
        var(--admin-blue);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.admin-page-heading {
    margin: 0;

    color:
        var(--admin-brown);

    font-size: 29px;

    font-weight: 750;

    line-height: 1.15;
}

.admin-page-description {
    margin: 7px 0 0;

    color:
        var(--admin-muted);

    font-size: 11px;

    line-height: 1.6;
}


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

.admin-back-btn {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 10px 15px;

    border:
        1px solid
        rgba(5, 102, 141, 0.18);

    border-radius: 10px;

    background:
        #FFFFFF;

    color:
        var(--admin-blue);

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    box-shadow:
        0 4px 12px rgba(62, 39, 35, 0.05);

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.admin-back-btn:hover {
    color: #FFFFFF;

    background:
        var(--admin-blue);

    transform:
        translateY(-1px);
}


/* =========================================================
   ERROR ALERT
========================================================= */

.admin-alert {
    margin-bottom: 18px;

    padding: 13px 15px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(230, 108, 171, 0.30);

    border-radius: 12px;

    background:
        var(--admin-pink-light);

    color:
        var(--admin-pink-dark);

    font-size: 10px;

    font-weight: 600;
}

.admin-alert i {
    flex-shrink: 0;

    font-size: 16px;
}


/* =========================================================
   FORM CARD
========================================================= */

.product-form-card {
    overflow: hidden;

    background:
        #FFFFFF;

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

    border-radius: 20px;

    box-shadow:
        var(--admin-shadow);
}


/* =========================================================
   FORM HEADER
========================================================= */

.product-form-header {
    min-height: 82px;

    padding: 17px 23px;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    background:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #FFF9FC 100%
        );
}

.product-form-header > div:first-child span {
    display: block;

    margin-bottom: 4px;

    color:
        var(--admin-blue);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;
}

.product-form-header h2 {
    margin: 0;

    color:
        var(--admin-brown);

    font-size: 17px;

    font-weight: 720;
}

.product-form-header-icon {
    width: 45px;
    height: 45px;

    display: flex;

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

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--admin-pink-light),
            var(--admin-blue-light)
        );

    color:
        var(--admin-blue);

    font-size: 19px;
}


/* =========================================================
   FORM BODY
========================================================= */

.product-form-body {
    padding: 27px;
}


/* =========================================================
   FORM GROUP
========================================================= */

.admin-form-group {
    width: 100%;
}

.admin-form-label {
    display: flex;

    align-items: baseline;

    gap: 5px;

    margin-bottom: 7px;

    color:
        var(--admin-brown);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.2px;
}

.admin-form-label small {
    color:
        var(--admin-muted);

    font-size: 8px;

    font-weight: 500;
}


/* =========================================================
   INPUT / SELECT / TEXTAREA
========================================================= */

.admin-form-control {
    width: 100%;

    min-height: 43px;

    padding: 10px 12px;

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

    border-radius: 10px;

    outline: none;

    background:
        #FFFFFF;

    color:
        var(--admin-brown);

    font-family: inherit;

    font-size: 10px;

    font-weight: 500;

    box-shadow:
        0 2px 7px
        rgba(62, 39, 35, 0.025);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.admin-form-control::placeholder {
    color:
        #A99B97;

    font-weight: 400;
}

.admin-form-control:hover {
    border-color:
        #D9C9C4;
}

.admin-form-control:focus {
    border-color:
        var(--admin-blue);

    background:
        #FFFFFF;

    box-shadow:
        0 0 0 3px
        rgba(5, 102, 141, 0.10);
}


/* SELECT */

select.admin-form-control {
    cursor: pointer;

    appearance: auto;
}


/* TEXTAREA */

textarea.admin-form-control {
    min-height: 125px;

    resize: vertical;

    line-height: 1.65;
}


/* =========================================================
   FORM DIVIDER
========================================================= */

.product-form-divider {
    width: 100%;

    height: 1px;

    margin: 27px 0;

    background:
        var(--admin-border);
}


/* =========================================================
   SECTION TITLE
========================================================= */

.product-form-section-title {
    margin-bottom: 17px;
}

.product-form-section-title span {
    display: block;

    color:
        var(--admin-pink-dark);

    font-size: 8px;

    font-weight: 750;

    letter-spacing: 1.4px;
}

.product-form-section-title p {
    margin: 4px 0 0;

    color:
        var(--admin-muted);

    font-size: 9px;

    line-height: 1.5;
}


/* =========================================================
   PRICE WRAPPER
========================================================= */

.admin-price-wrapper {
    position: relative;

    width: 100%;
}

.admin-price-symbol {
    position: absolute;

    top: 50%;
    left: 12px;

    transform:
        translateY(-50%);

    color:
        var(--admin-blue);

    font-size: 14px;

    font-weight: 750;

    z-index: 2;

    pointer-events: none;
}

.admin-price-control {
    padding-left: 30px;
}


/* Remove number arrows */

.admin-price-control::-webkit-inner-spin-button,
.admin-price-control::-webkit-outer-spin-button {
    margin: 0;

    -webkit-appearance: none;
}

.admin-price-control {
    -moz-appearance: textfield;
}


/* =========================================================
   IMAGE UPLOAD
========================================================= */

.admin-image-upload {
    width: 100%;

    min-height: 88px;

    padding: 15px 17px;

    display: flex;

    align-items: center;

    gap: 13px;

    border:
        1px dashed
        rgba(5, 102, 141, 0.30);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #FDFBFC,
            #F7FBFC
        );

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.admin-image-upload:hover {
    border-color:
        var(--admin-pink);

    background:
        #FFF9FC;
}


/* UPLOAD ICON */

.admin-image-upload-icon {
    width: 47px;
    height: 47px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 13px;

    background:
        var(--admin-blue-light);

    color:
        var(--admin-blue);

    font-size: 20px;
}


/* UPLOAD TEXT */

.admin-image-upload-content {
    min-width: 0;

    flex: 1;
}

.admin-image-upload-content strong {
    display: block;

    color:
        var(--admin-brown);

    font-size: 10px;

    font-weight: 700;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.admin-image-upload-content span {
    display: block;

    margin-top: 4px;

    color:
        var(--admin-muted);

    font-size: 8px;
}


/* =========================================================
   CHOOSE IMAGE BUTTON
========================================================= */

.admin-image-upload-button {
    position: relative;

    flex-shrink: 0;

    min-height: 34px;

    padding: 8px 12px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background:
        var(--admin-blue);

    color:
        #FFFFFF;

    font-size: 9px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-image-upload-button:hover {
    background:
        var(--admin-blue-dark);

    transform:
        translateY(-1px);

    box-shadow:
        0 6px 15px
        rgba(5, 102, 141, 0.18);
}

.admin-image-upload-button input[type="file"] {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    overflow: hidden;

    pointer-events: none;
}


/* =========================================================
   SUBMIT ROW
========================================================= */

.admin-submit-row {
    margin-top: 27px;

    padding-top: 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-top:
        1px solid var(--admin-border);
}


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

.admin-submit-note {
    display: flex;

    align-items: center;

    gap: 7px;

    color:
        var(--admin-muted);

    font-size: 8px;
}

.admin-submit-note i {
    color:
        var(--admin-blue);

    font-size: 15px;
}


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

.admin-submit-btn {
    min-height: 42px;

    padding: 10px 18px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border: 0;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #E66CAB,
            #05668D
        );

    color:
        #FFFFFF;

    font-family: inherit;

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 18px
        rgba(230, 108, 171, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-submit-btn:hover {
    color:
        #FFFFFF;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 25px
        rgba(230, 108, 171, 0.25);
}

.admin-submit-btn:active {
    transform:
        translateY(0);
}


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

.admin-add-product-page .admin-footer {
    width: calc(100% - 270px);

    margin-left: 270px;

    padding: 18px 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color:
        var(--admin-muted);

    font-size: 8px;

    border-top:
        1px solid var(--admin-border);

    background:
        #FFFFFF;
}







/* =========================================================
   MEENAKSHI ENTERPRISES
   ADMIN ORDERS PAGE
   BRAND COLORS
   Pink  : #E66CAB
   Blue  : #05668D
   Brown : #3E2723
   White : #FFFFFF
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {
    --admin-pink: #E66CAB;
    --admin-pink-light: #F8DDEB;
    --admin-pink-soft: #FCEEF6;

    --admin-blue: #05668D;
    --admin-blue-light: #DCEEF3;
    --admin-blue-dark: #044F6D;

    --admin-brown: #3E2723;
    --admin-brown-light: #F3ECE9;

    --admin-white: #FFFFFF;

    --admin-page: #FAF7F8;
    --admin-border: #E7D9D5;
    --admin-text: #4F4441;
    --admin-muted: #817571;

    --admin-success: #2F7D58;
    --admin-warning: #A66A00;
    --admin-danger: #A33E4A;

    --admin-sidebar-width: 245px;
}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background: linear-gradient(
            160deg,
            #05668d 0%,
            #b83263 38%,
            #05668d 100%
        );
    color: var(--admin-text);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
}

a {
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

::selection {
    background: var(--admin-pink);
    color: var(--admin-white);
}


/* =========================================================
   MAIN ADMIN LAYOUT
========================================================= */

.admin-dashboard-page {
    min-height: 100vh;
}

.admin-dashboard-layout {
    min-height: 100vh;
}




/* =========================================================
   TOP BAR
========================================================= */

.admin-topbar {
    min-height: 82px;

    padding: 0 40px;

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

    background: var(--admin-white);

    border-bottom:
        1px solid var(--admin-border);
}

.topbar-title small {
    display: block;

    margin-bottom: 4px;

    color: var(--admin-blue);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.topbar-title h1 {
    margin: 0;

    color: var(--admin-brown);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 26px;
    font-weight: 400;
}

.topbar-right {
    display: flex;
    align-items: center;

    gap: 25px;
}

.secure-session {
    display: flex;
    align-items: center;

    gap: 7px;

    color: var(--admin-muted);

    font-size: 9px;
}

.secure-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--admin-blue);

    box-shadow:
        0 0 0 4px
        rgba(5,102,141,.10);
}

.top-admin {
    display: flex;
    align-items: center;

    gap: 7px;

    color: var(--admin-text);

    font-size: 10px;
    font-weight: 500;
}

.top-admin i {
    color: var(--admin-blue);

    font-size: 19px;
}


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

.admin-content {
    padding: 36px 40px 75px;

    max-width: 1600px;
}


/* =========================================================
   PAGE INTRO
========================================================= */

.page-intro {
    position: relative;

    overflow: hidden;

    padding: 29px 34px;

    margin-bottom: 15px;

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

    border-radius: 14px;

    background: var(--admin-white);

    box-shadow:
        0 8px 26px
        rgba(62,39,35,.035);
}

.page-intro::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    top: -95px;

    border:
        1px solid
        rgba(230,108,171,.16);

    border-radius: 50%;
}

.page-intro::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: 30px;
    bottom: -70px;

    border:
        1px solid
        rgba(5,102,141,.10);

    border-radius: 50%;
}

.page-kicker {
    margin-bottom: 7px;

    color: var(--admin-blue);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.page-intro h2 {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--admin-brown);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 30px;
    font-weight: 400;
}

.page-intro h2 span {
    color: var(--admin-pink);

    font-style: italic;
}

.page-intro p {
    position: relative;
    z-index: 2;

    margin: 7px 0 0;

    max-width: 700px;

    color: var(--admin-muted);

    font-size: 10px;
    line-height: 1.6;
}


/* =========================================================
   ORDER SUMMARY
========================================================= */

.order-summary {
    min-height: 65px;

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

    padding: 12px 20px;

    margin-bottom: 15px;

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

    border-radius: 11px;

    background: var(--admin-white);

    box-shadow:
        0 5px 18px
        rgba(62,39,35,.025);
}

.summary-left {
    display: flex;
    align-items: center;

    gap: 12px;
}

.summary-icon {
    width: 38px;
    height: 38px;

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

    border-radius: 9px;

    background: var(--admin-blue-light);

    color: var(--admin-blue);

    font-size: 15px;
}

.summary-label {
    color: var(--admin-blue);

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.summary-number {
    margin-top: 2px;

    color: var(--admin-brown);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;
}

.summary-note {
    color: var(--admin-muted);

    font-size: 8px;
}


/* =========================================================
   ORDER CARD
========================================================= */

.order-card {
    position: relative;

    overflow: hidden;

    margin-bottom: 18px;

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

    border-radius: 14px;

    background: var(--admin-white);

    box-shadow:
        0 8px 28px
        rgba(62,39,35,.035);

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

.order-card:hover {
    transform: translateY(-2px);

    border-color:
        rgba(5,102,141,.22);

    box-shadow:
        0 14px 35px
        rgba(62,39,35,.07);
}

.order-card::after {
    content: "";

    position: absolute;

    right: -70px;
    bottom: -90px;

    width: 190px;
    height: 190px;

    border:
        1px solid
        rgba(230,108,171,.09);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   ORDER HEADER
========================================================= */

.order-header {
    min-height: 75px;

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

    gap: 15px;

    padding: 18px 22px;

    border-bottom:
        1px solid var(--admin-border);
}

.order-number {
    display: flex;
    align-items: center;

    gap: 11px;
}

.order-number-icon {
    width: 37px;
    height: 37px;

    flex: 0 0 37px;

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

    border-radius: 9px;

    background: var(--admin-blue);

    color: var(--admin-white);

    font-size: 14px;

    box-shadow:
        0 6px 14px
        rgba(5,102,141,.15);
}

.order-number small {
    display: block;

    margin-bottom: 3px;

    color: var(--admin-pink);

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}

.order-number strong {
    color: var(--admin-brown);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 19px;
    font-weight: 400;
}


/* =========================================================
   ORDER STATUS
========================================================= */

.status {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 7px 12px;

    border-radius: 30px;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .5px;

    text-transform: uppercase;
}

.status::before {
    content: "";

    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;
}


/* PENDING */

.status-pending {
    background: #FFF4D9;
    color: #956600;
}

.status-pending::before {
    background: #D69B00;
}


/* CONFIRMED */

.status-confirmed {
    background: var(--admin-blue-light);
    color: var(--admin-blue-dark);
}

.status-confirmed::before {
    background: var(--admin-blue);
}


/* SHIPPED */

.status-shipped {
    background: #E7F0F8;
    color: #386B91;
}

.status-shipped::before {
    background: #4D83A8;
}


/* DELIVERED */

.status-delivered {
    background: #E7F4ED;
    color: var(--admin-success);
}

.status-delivered::before {
    background: var(--admin-success);
}


/* CANCELLED */

.status-cancelled {
    background: #FBE9ED;
    color: var(--admin-danger);
}

.status-cancelled::before {
    background: var(--admin-danger);
}


/* =========================================================
   CUSTOMER / ORDER INFORMATION
========================================================= */

.order-info {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 35px;

    padding: 24px 22px;
}

.info-heading {
    margin: 0 0 15px;

    color: var(--admin-brown);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;
    font-weight: 400;
}

.info-heading i {
    margin-right: 7px;

    color: var(--admin-blue);

    font-family: Arial, sans-serif;

    font-size: 13px;
}

.info-row {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    margin-bottom: 10px;
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-label {
    min-width: 70px;

    color: #9B8D88;

    font-size: 9px;
    font-weight: 500;
}

.info-value {
    color: var(--admin-text);

    font-size: 10px;

    line-height: 1.55;

    overflow-wrap: anywhere;
}

.info-value strong {
    color: var(--admin-blue);

    font-size: 16px;
    font-weight: 700;
}


/* =========================================================
   PRODUCTS SECTION
========================================================= */

.products-section {
    padding: 0 22px 22px;
}

.products-heading {
    min-height: 49px;

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

    padding: 12px 0;

    border-top:
        1px solid var(--admin-border);

    border-bottom:
        1px solid var(--admin-border);
}

.products-heading h4 {
    margin: 0;

    color: var(--admin-brown);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;
    font-weight: 400;
}

.products-heading h4 i {
    margin-right: 7px;

    color: var(--admin-blue);

    font-family: Arial, sans-serif;

    font-size: 13px;
}


/* =========================================================
   ORDER TABLE
========================================================= */

.order-table {
    width: 100%;

    margin-top: 10px;

    border-collapse: separate;
    border-spacing: 0;
}

.order-table th {
    padding: 11px 12px;

    background:
        var(--admin-brown-light);

    color: var(--admin-blue);

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

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.order-table th:first-child {
    border-top-left-radius: 6px;
}

.order-table th:last-child {
    border-top-right-radius: 6px;
}

.order-table td {
    padding: 13px 12px;

    border-bottom:
        1px solid #F0E9E6;

    color: var(--admin-text);

    font-size: 10px;

    vertical-align: middle;
}

.order-table tbody tr:last-child td {
    border-bottom: 0;
}

.order-table tbody tr {
    transition:
        background .2s ease;
}

.order-table tbody tr:hover {
    background:
        var(--admin-pink-soft);
}

.product-name {
    color: var(--admin-brown);

    font-weight: 600;

    line-height: 1.4;
}

.quantity-badge {
    min-width: 27px;
    height: 25px;

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

    padding: 0 7px;

    border-radius: 6px;

    background:
        var(--admin-blue-light);

    color:
        var(--admin-blue);

    font-size: 9px;
    font-weight: 700;
}

.item-total {
    color: var(--admin-blue);

    font-weight: 700;
}


/* =========================================================
   STATUS UPDATE
========================================================= */

.status-update {
    padding: 19px 22px;

    border-top:
        1px solid var(--admin-border);

    background:
        #FCFAFB;
}

.status-update-row {
    display: flex;
    align-items: flex-end;

    gap: 12px;
}

.status-field {
    flex: 0 0 240px;
}

.status-field label {
    display: block;

    margin-bottom: 7px;

    color: var(--admin-muted);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.status-select {
    width: 100%;
    height: 40px;

    padding: 0 12px;

    border:
        1px solid #D9CECA;

    border-radius: 8px;

    background: var(--admin-white);

    color: var(--admin-text);

    outline: none;

    font-size: 10px;

    cursor: pointer;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.status-select:hover {
    border-color:
        rgba(5,102,141,.40);
}

.status-select:focus {
    border-color: var(--admin-blue);

    box-shadow:
        0 0 0 3px
        rgba(5,102,141,.10);
}


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

.update-btn {
    min-height: 40px;

    padding: 0 18px;

    border: 0;

    border-radius: 8px;

    background:
        var(--admin-blue);

    color: var(--admin-white);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .7px;

    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
        0 7px 16px
        rgba(5,102,141,.16);

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.update-btn i {
    margin-right: 5px;
}

.update-btn:hover {
    background:
        var(--admin-blue-dark);

    color: var(--admin-white);

    transform: translateY(-2px);

    box-shadow:
        0 10px 22px
        rgba(5,102,141,.22);
}

.update-btn:active {
    transform: translateY(0);
}


/* =========================================================
   EMPTY ORDERS
========================================================= */

.empty-orders {
    padding: 75px 30px;

    text-align: center;

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

    border-radius: 14px;

    background: var(--admin-white);

    box-shadow:
        0 8px 25px
        rgba(62,39,35,.03);
}

.empty-orders i {
    display: block;

    margin-bottom: 15px;

    color: var(--admin-blue);

    font-size: 38px;
}

.empty-orders h3 {
    margin: 0 0 7px;

    color: var(--admin-brown);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 23px;
    font-weight: 400;
}

.empty-orders p {
    margin: 0;

    color: var(--admin-muted);

    font-size: 10px;
}


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

.admin-footer {
    min-height: 58px;

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

    padding: 17px 40px;

    border-top:
        1px solid var(--admin-border);

    background: var(--admin-white);

    color: #978B87;

    font-size: 8px;
}


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

.fade-up {
    opacity: 0;

    transform:
        translateY(18px);

    animation:
        fadeUp .65s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

.delay-1 {
    animation-delay: .08s;
}

.delay-2 {
    animation-delay: .16s;
}

.delay-3 {
    animation-delay: .24s;
}


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

@media (max-width: 1100px) {

    :root {
        --admin-sidebar-width: 215px;
    }

    .admin-sidebar {
        width: var(--admin-sidebar-width);
    }

    .admin-main {
        margin-left: var(--admin-sidebar-width);
    }

    .admin-topbar {
        padding-left: 28px;
        padding-right: 28px;
    }

    .admin-content {
        padding-left: 28px;
        padding-right: 28px;
    }

    .order-info {
        gap: 22px;
    }

}


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

@media (max-width: 850px) {

    .admin-topbar {
        padding: 20px 22px;
    }

    .admin-content {
        padding: 25px 22px 60px;
    }

    .topbar-right {
        gap: 14px;
    }

    .secure-session {
        display: none;
    }

    .order-info {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .admin-footer {
        padding-left: 22px;
        padding-right: 22px;
    }

}


/* =========================================================
   MOBILE
   SIDEBAR AT TOP
   VERTICAL STACKED MENU
========================================================= */

@media (max-width: 750px) {

    body {
        overflow-x: hidden;
    }

    .admin-sidebar {
        position: relative;

        left: auto;
        top: auto;

        width: 100%;
        height: auto;

        min-height: auto;

        padding: 18px 14px 20px;

        overflow: visible;

        box-shadow:
            0 5px 20px
            rgba(62,39,35,.12);
    }

    .admin-main {
        margin-left: 0;

        width: 100%;
    }


    /* -----------------------------------------------------
       BRAND
    ----------------------------------------------------- */

    .admin-brand {
        padding: 0 5px 18px;
    }

    .admin-brand-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }


    /* -----------------------------------------------------
       ADMIN USER
    ----------------------------------------------------- */

    .admin-user {
        margin: 16px 2px 20px;

        padding: 12px;
    }


    /* -----------------------------------------------------
       NAV TITLE
    ----------------------------------------------------- */

    .admin-nav-title {
        margin: 16px 5px 8px;
    }


    /* -----------------------------------------------------
       VERTICAL MOBILE NAV
    ----------------------------------------------------- */

    .admin-nav {
        width: 100%;

        display: flex;
        flex-direction: column;

        gap: 5px;
    }

    .admin-nav a {
        width: 100%;

        min-height: 45px;

        padding: 0 14px;

        border-radius: 8px;

        font-size: 11px;
    }

    .admin-nav a i {
        width: 20px;
        flex-basis: 20px;

        font-size: 15px;
    }

    .admin-nav a.active::before {
        top: 7px;
        bottom: 7px;
    }


    /* -----------------------------------------------------
       SIDEBAR BOTTOM
    ----------------------------------------------------- */

    .admin-sidebar-bottom {
        position: static;

        width: 100%;

        margin-top: 20px;

        padding-top: 15px;

        border-top:
            1px solid
            rgba(255,255,255,.10);
    }


    /* -----------------------------------------------------
       TOP BAR
    ----------------------------------------------------- */

    .admin-topbar {
        min-height: auto;

        padding: 19px 18px;
    }

    .topbar-title small {
        font-size: 7px;
    }

    .topbar-title h1 {
        font-size: 23px;
    }

    .topbar-right {
        display: none;
    }


    /* -----------------------------------------------------
       CONTENT
    ----------------------------------------------------- */

    .admin-content {
        padding: 18px 13px 45px;
    }


    /* -----------------------------------------------------
       INTRO
    ----------------------------------------------------- */

    .page-intro {
        padding: 22px 20px;

        border-radius: 12px;
    }

    .page-intro h2 {
        font-size: 26px;
    }

    .page-intro p {
        font-size: 9px;
    }


    /* -----------------------------------------------------
       SUMMARY
    ----------------------------------------------------- */

    .order-summary {
        min-height: auto;

        padding: 12px 15px;

        align-items: center;
    }

    .summary-note {
        display: none;
    }


    /* -----------------------------------------------------
       ORDER CARD
    ----------------------------------------------------- */

    .order-card {
        border-radius: 12px;
    }

    .order-header {
        padding: 16px;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }

    .order-number strong {
        font-size: 18px;
    }

    .status {
        align-self: flex-start;
    }


    /* -----------------------------------------------------
       ORDER INFORMATION
    ----------------------------------------------------- */

    .order-info {
        grid-template-columns: 1fr;

        gap: 22px;

        padding: 19px 16px;
    }

    .info-heading {
        font-size: 16px;
    }

    .info-row {
        gap: 9px;
    }

    .info-label {
        min-width: 62px;
    }


    /* -----------------------------------------------------
       PRODUCTS
    ----------------------------------------------------- */

    .products-section {
        padding: 0 16px 17px;
    }

    .products-heading h4 {
        font-size: 16px;
    }

    .order-table {
        min-width: 560px;
    }

    .table-responsive {
        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: thin;
    }


    /* -----------------------------------------------------
       STATUS UPDATE
    ----------------------------------------------------- */

    .status-update {
        padding: 17px 16px;
    }

    .status-update-row {
        flex-direction: column;

        align-items: stretch;

        gap: 11px;
    }

    .status-field {
        flex: none;

        width: 100%;
    }

    .status-select {
        height: 43px;
    }

    .update-btn {
        width: 100%;

        min-height: 43px;
    }


    /* -----------------------------------------------------
       EMPTY
    ----------------------------------------------------- */

    .empty-orders {
        padding: 55px 20px;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .admin-footer {
        min-height: auto;

        padding: 15px;

        gap: 8px;

        flex-direction: column;

        align-items: center;

        text-align: center;
    }

}


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

@media (max-width: 480px) {

    .admin-sidebar {
        padding-left: 11px;
        padding-right: 11px;
    }

    .admin-brand {
        padding-left: 3px;
        padding-right: 3px;
    }

    .admin-brand-name {
        font-size: 16px;
    }

    .admin-user {
        margin-left: 0;
        margin-right: 0;
    }

    .admin-nav-title {
        margin-left: 3px;
        margin-right: 3px;
    }

    .admin-nav a {
        min-height: 44px;

        padding-left: 13px;
        padding-right: 13px;
    }

    .admin-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .page-intro {
        padding: 20px 17px;
    }

    .page-intro h2 {
        font-size: 24px;
    }

    .order-summary {
        padding: 11px 13px;
    }

    .summary-icon {
        width: 35px;
        height: 35px;
    }

    .order-header {
        padding: 14px;
    }

    .order-info {
        padding: 17px 14px;
    }

    .products-section {
        padding-left: 14px;
        padding-right: 14px;
    }

    .status-update {
        padding-left: 14px;
        padding-right: 14px;
    }

    .info-row {
        display: grid;

        grid-template-columns: 60px minmax(0, 1fr);

        gap: 8px;
    }

    .info-label {
        min-width: 0;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

}
/* =========================================================
   MEENAKSHI ENTERPRISES — ADMIN CHANGE PASSWORD
   ========================================================= */

:root {
    --admin-pink: #E66CAB;
    --admin-blue: #05668D;
    --admin-brown: #3E2723;
    --admin-white: #FFFFFF;

    --admin-pink-light: #F8DDEB;
    --admin-blue-light: #DCEEF3;
    --admin-brown-light: #F3ECE9;

    --admin-bg: #FAF7F8;
    --admin-text: #3E2723;
    --admin-muted: #756A67;
    --admin-border: #E7D9D5;

    --admin-sidebar-width: 270px;
    --admin-shadow: 0 10px 35px rgba(62, 39, 35, 0.08);
    --admin-radius: 18px;
}


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

.admin-page,
.admin-page * {
    box-sizing: border-box;
}

.admin-page {
    min-height: 100vh;
    display: flex;
    background: var(--admin-bg);
    color: var(--admin-text);
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;

    width: var(--admin-sidebar-width);
    height: 100vh;

    display: flex;
    flex-direction: column;

    padding: 28px 18px;

   background: linear-gradient(160deg, #5d93a9 0%, #b83263 38%, #05668d 100%);
    border-right: 1px solid var(--admin-border);

    z-index: 1000;
    overflow-y: auto;
}


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

.admin-brand {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 4px 10px 26px;

    border-bottom: 1px solid var(--admin-border);
}

.admin-brand-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    border-radius: 14px;

    background: linear-gradient(
        135deg,
        var(--admin-pink),
        #d95d9e
    );

    color: #fff);

    font-size: 22px;

    box-shadow:
        0 7px 18px rgba(230, 108, 171, 0.25);
}

.admin-brand-text {
    min-width: 0;
}

.admin-brand-name {
    color: var(--admin-brown);

    font-size: 20px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.admin-brand-subtitle {
    margin-top: 3px;

    color: var(--admin-blue);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.1px;
    text-transform: uppercase;
}


/* =========================================================
   ADMIN PROFILE
   ========================================================= */

.admin-profile {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 24px 4px 25px;
    padding: 13px;

    border-radius: 14px;

    background: var(--admin-brown-light);
}

.admin-profile-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 12px;

    background: var(--admin-blue-light);
    color: var(--admin-blue);

    font-size: 19px;
}

.admin-profile-label {
    margin-bottom: 3px;

    color: var(--admin-muted);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.admin-profile-name {
    max-width: 150px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--admin-brown);

    font-size: 13px;
    font-weight: 700;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.admin-nav-title {
    margin: 0 10px 9px;

    color:#d99558;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;

    margin-bottom: 23px;
}

.admin-nav a,
.admin-sidebar-bottom a {
    position: relative;

    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 45px;

    padding: 0 13px;

    border-radius: 11px;

    color: #1c0e0c;
    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.admin-nav a i,
.admin-sidebar-bottom a i {
    width: 21px;

    color:#0dcaf0;

    font-size: 17px;

    text-align: center;

    transition: color 0.2s ease;
}

.admin-nav a:hover,
.admin-sidebar-bottom a:hover {
    color: var(--admin-brown);
    background: var(--admin-brown-light);

    transform: translateX(2px);
}

.admin-nav a.active {
    color: var(--admin-white);

    background: linear-gradient(
        135deg,
        var(--admin-blue),
        #087b9f
    );

    box-shadow:
        0 7px 18px rgba(5, 102, 141, 0.18);
}

.admin-nav a.active i {
    color: var(--admin-white);
}


/* =========================================================
   SIDEBAR BOTTOM
   ========================================================= */

.admin-sidebar-bottom {
    margin-top: auto;

    padding-top: 18px;

    border-top: 1px solid var(--admin-border);
}

.admin-sidebar-bottom a {
    margin-bottom: 5px;
}

.admin-sidebar-bottom a:last-child {
    color: #ebdfd1;
}

.admin-sidebar-bottom a:last-child i {
    color: #ebb206;
}


/* =========================================================
   MAIN AREA
   ========================================================= */

.admin-main {
    width: calc(100% - var(--admin-sidebar-width));
    min-height: 100vh;

    margin-left: var(--admin-sidebar-width);

    display: flex;
    flex-direction: column;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.admin-topbar {
    min-height: 86px;

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

    padding: 18px 42px;

    background: var(--admin-white);

    border-bottom: 1px solid var(--admin-border);
}

.admin-page-heading small {
    display: block;

    margin-bottom: 4px;

    color: var(--admin-pink);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.admin-page-heading h1 {
    margin: 0;

    color: var(--admin-brown);

    font-size: 25px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.4px;
}

.admin-topbar-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.secure-session {
    display: flex;
    align-items: center;
    gap: 7px;

    color: var(--admin-muted);

    font-size: 11px;
    font-weight: 600;
}

.secure-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #39a96b;

    box-shadow: 0 0 0 4px rgba(57, 169, 107, 0.12);
}

.admin-user {
    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--admin-brown);

    font-size: 12px;
    font-weight: 700;
}

.admin-user i {
    color: var(--admin-blue);

    font-size: 22px;
}


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

.admin-content {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 48px 42px 55px;
}


/* =========================================================
   INTRO
   ========================================================= */

.password-intro {
    max-width: 720px;

    margin-bottom: 34px;
}

.intro-label {
    display: inline-flex;
    align-items: center;

    margin-bottom: 11px;

    color: var(--admin-blue);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.password-intro h2 {
    margin: 0;

    color: var(--admin-brown);

    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1.1px;
}

.password-intro h2 span {
    color: var(--admin-pink);
}

.password-intro p {
    max-width: 650px;

    margin: 14px 0 0;

    color: var(--admin-muted);

    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   PASSWORD LAYOUT
   ========================================================= */

.password-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        320px;

    gap: 25px;

    align-items: start;
}


/* =========================================================
   PASSWORD CARD
   ========================================================= */

.password-card {
    padding: 31px;

    background: var(--admin-white);

    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);

    box-shadow: var(--admin-shadow);
}

.card-heading {
    display: flex;
    align-items: flex-start;
    gap: 15px;

    margin-bottom: 27px;

    padding-bottom: 24px;

    border-bottom: 1px solid var(--admin-border);
}

.card-heading-icon {
    width: 47px;
    height: 47px;

    flex: 0 0 47px;

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

    border-radius: 14px;

    background: var(--admin-pink-light);
    color: var(--admin-pink);

    font-size: 21px;
}

.card-heading h3 {
    margin: 2px 0 5px;

    color: var(--admin-brown);

    font-size: 19px;
    font-weight: 800;
}

.card-heading p {
    margin: 0;

    color: var(--admin-muted);

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   ALERTS
   ========================================================= */

.admin-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 22px;
    padding: 13px 15px;

    border-radius: 11px;

    font-size: 12px;
    line-height: 1.5;
}

.admin-alert i {
    margin-top: 1px;

    flex: 0 0 auto;

    font-size: 16px;
}

.admin-alert.error {
    color: #8a3f3a;

    background: #fbeaea;

    border: 1px solid #efcccc;
}

.admin-alert.error i {
    color: #c4524a;
}

.admin-alert.success {
    color: #28704a;

    background: #eaf7ef;

    border: 1px solid #ccebd8;
}

.admin-alert.success i {
    color: #29945b;
}


/* =========================================================
   PASSWORD FIELDS
   ========================================================= */

.password-field {
    margin-bottom: 22px;
}

.password-label {
    display: block;

    margin-bottom: 8px;

    color: var(--admin-brown);

    font-size: 12px;
    font-weight: 700;
}

.password-input-wrap {
    position: relative;
}

.password-input-icon {
    position: absolute;
    left: 15px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--admin-blue);

    font-size: 16px;

    pointer-events: none;
}

.password-input {
    width: 100%;
    height: 50px;

    padding:
        0 48px
        0 45px;

    border: 1px solid var(--admin-border);
    border-radius: 11px;

    outline: none;

    background: #fff;

    color: var(--admin-brown);

    font-family: inherit;
    font-size: 13px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.password-input::placeholder {
    color: #aaa09c;
}

.password-input:hover {
    border-color: #d6c5c0;
}

.password-input:focus {
    border-color: var(--admin-blue);

    box-shadow:
        0 0 0 4px rgba(5, 102, 141, 0.10);

    background: var(--admin-white);
}

.password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;

    width: 36px;
    height: 36px;

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

    transform: translateY(-50%);

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: var(--admin-muted);

    cursor: pointer;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.password-toggle:hover {
    color: var(--admin-blue);

    background: var(--admin-blue-light);
}

.password-hint {
    display: block;

    margin-top: 7px;

    color: var(--admin-muted);

    font-size: 10px;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.password-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-top: 30px;
    padding-top: 25px;

    border-top: 1px solid var(--admin-border);
}

.back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 45px;

    padding: 0 16px;

    border: 1px solid var(--admin-border);
    border-radius: 10px;

    background: var(--admin-white);

    color: var(--admin-muted);

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.back-btn:hover {
    color: var(--admin-brown);

    background: var(--admin-brown-light);

    border-color: #d9c7c1;

    transform: translateX(-2px);
}

.save-password-btn {
    min-height: 45px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--admin-blue);

    color: var(--admin-white);

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 7px 17px rgba(5, 102, 141, 0.18);

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.save-password-btn:hover {
    background: var(--admin-brown);

    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(62, 39, 35, 0.18);
}

.save-password-btn i {
    font-size: 14px;

    transition: transform 0.2s ease;
}

.save-password-btn:hover i {
    transform: translateX(3px);
}


/* =========================================================
   SECURITY CARD
   ========================================================= */

.security-card {
    position: relative;

    padding: 29px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            var(--admin-brown),
            #4c302b
        );

    border-radius: var(--admin-radius);

    color: var(--admin-white);

    box-shadow:
        0 14px 35px rgba(62, 39, 35, 0.16);
}

.security-card::before {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    top: -85px;
    right: -75px;

    border-radius: 50%;

    background: rgba(230, 108, 171, 0.16);
}

.security-card::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    bottom: -70px;
    left: -65px;

    border-radius: 50%;

    background: rgba(5, 102, 141, 0.18);
}

.security-icon {
    position: relative;
    z-index: 1;

    width: 53px;
    height: 53px;

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

    margin-bottom: 22px;

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.12);

    color: var(--admin-pink);

    font-size: 25px;
}

.security-label {
    position: relative;
    z-index: 1;

    margin-bottom: 7px;

    color: #f1a8cf;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.security-card h3 {
    position: relative;
    z-index: 1;

    margin: 0 0 12px;

    color: var(--admin-white);

    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
}

.security-card p {
    position: relative;
    z-index: 1;

    margin: 0 0 24px;

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

    font-size: 12px;
    line-height: 1.7;
}

.security-list {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    gap: 13px;

    margin: 0;
    padding: 21px 0 0;

    list-style: none;

    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.security-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;

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

    font-size: 11px;
    line-height: 1.5;
}

.security-list li i {
    flex: 0 0 auto;

    margin-top: 1px;

    color: var(--admin-pink);

    font-size: 14px;
}


/* =========================================================
   REVEAL ANIMATION
   ========================================================= */

.page-reveal {
    opacity: 0;
    transform: translateY(18px);

    animation: adminPageReveal 0.65s ease forwards;
}

.page-delay-1 {
    animation-delay: 0.10s;
}

.page-delay-2 {
    animation-delay: 0.20s;
}

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


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

.admin-footer {
    margin-top: auto;

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

    padding: 19px 42px;

    border-top: 1px solid var(--admin-border);

    background: var(--admin-white);

    color: var(--admin-muted);

    font-size: 10px;
}


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

@media (max-width: 1100px) {

    :root {
        --admin-sidebar-width: 235px;
    }

    .admin-topbar {
        padding-left: 30px;
        padding-right: 30px;
    }

    .admin-content {
        padding-left: 30px;
        padding-right: 30px;
    }

    .password-layout {
        grid-template-columns: minmax(0, 1fr) 285px;
        gap: 20px;
    }

    .password-card,
    .security-card {
        padding: 25px;
    }

    .admin-footer {
        padding-left: 30px;
        padding-right: 30px;
    }
}


/* =========================================================
   MOBILE — SIDEBAR MOVES TO TOP
   ========================================================= */

@media (max-width: 800px) {

    .admin-page {
        display: block;
    }

    .admin-sidebar {
        position: relative;

        inset: auto;

        width: 100%;
        height: auto;

        padding: 18px;

        border-right: 0;
        border-bottom: 1px solid var(--admin-border);

        overflow: visible;
    }

    .admin-brand {
        padding: 0 4px 18px;
    }

    .admin-profile {
        margin: 17px 0;
    }

    .admin-nav-title {
        margin-top: 15px;
    }

    /*
       IMPORTANT:
       Navigation stays vertical on mobile.
       No horizontal scrolling.
    */

    .admin-nav {
        width: 100%;

        display: flex;
        flex-direction: column;

        gap: 5px;

        margin-bottom: 17px;
    }

    .admin-nav a,
    .admin-sidebar-bottom a {
        width: 100%;
        min-height: 47px;

        padding: 0 14px;
    }

    .admin-sidebar-bottom {
        margin-top: 5px;
    }

    .admin-main {
        width: 100%;
        min-height: auto;

        margin-left: 0;
    }

    .admin-topbar {
        min-height: auto;

        padding: 20px;

        gap: 15px;
    }

    .admin-topbar-right {
        gap: 12px;
    }

    .secure-session {
        display: none;
    }

    .admin-content {
        padding: 32px 20px 40px;
    }

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

    .security-card {
        order: 2;
    }

    .admin-footer {
        padding: 17px 20px;
    }
}





/* =========================================================
   MAIN
========================================================= */

.admin-main {
    margin-left: 270px;

    min-height: 100vh;

    background-color: var(--admin-bg);
}



/* =========================================================
   MOBILE SIDEBAR — TOP 50% / MAIN PAGE — BOTTOM 50%
========================================================= */

@media (max-width: 650px) {

    /* -----------------------------------------------------
       FULL PAGE LAYOUT
    ----------------------------------------------------- */

    .admin-dashboard-layout {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        min-height: 100vh !important;

        margin: 0 !important;

        padding: 0 !important;
    }





    /* -----------------------------------------------------
       MAIN PAGE
       SECOND 50% OF PHONE SCREEN
    ----------------------------------------------------- */

    .admin-main {

        position: relative !important;

        width: 100% !important;

        height: 50vh !important;

        min-height: 50vh !important;

        max-height: 50vh !important;

        margin-left: 0 !important;

        padding: 15px !important;

        flex: 0 0 50vh !important;

        overflow-y: auto !important;

        overflow-x: hidden !important;

        box-sizing: border-box !important;
    }

}


/* =========================================================
   MOBILE ADMIN PRODUCTS TABLE + SIDEBAR
========================================================= */

@media (max-width: 650px) {

    /* =====================================================
       PRODUCTS TABLE WRAPPER
    ===================================================== */

    .admin-products-table-wrapper {
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       PRODUCTS TABLE
    ===================================================== */

    .admin-products-table {
        width: max-content !important;
        min-width: 760px !important;

        table-layout: auto !important;

        margin: 0 !important;
    }


    /* =====================================================
       TABLE CELLS
    ===================================================== */

    .admin-products-table th,
    .admin-products-table td {
        color: var(--admin-text);

        font-size: 10px !important;

        vertical-align: middle !important;

        padding: 13px 16px !important;

        border-bottom:
            1px solid rgb(240, 233, 230) !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       ID
    ===================================================== */

    .admin-products-table th:nth-child(1),
    .admin-products-table td:nth-child(1) {
        min-width: 55px !important;
        width: 55px !important;

        text-align: center !important;
    }


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

    .admin-products-table th:nth-child(2),
    .admin-products-table td:nth-child(2) {
        min-width: 220px !important;
    }


    /* =====================================================
       CATEGORY
    ===================================================== */

    .admin-products-table th:nth-child(3),
    .admin-products-table td:nth-child(3) {
        min-width: 120px !important;

        text-align: left !important;
    }


    /* =====================================================
       PRICE
    ===================================================== */

    .admin-products-table th:nth-child(4),
    .admin-products-table td:nth-child(4) {
        min-width: 90px !important;

        text-align: left !important;
    }


    /* =====================================================
       OLD PRICE
    ===================================================== */

    .admin-products-table th:nth-child(5),
    .admin-products-table td:nth-child(5) {
        min-width: 110px !important;

        text-align: left !important;
    }


    /* =====================================================
       ACTIONS
    ===================================================== */

    .admin-products-table th:nth-child(6),
    .admin-products-table td:nth-child(6) {
        min-width: 155px !important;

        text-align: center !important;
    }


    /* =====================================================
       PRODUCT INFORMATION
    ===================================================== */

    .admin-product-info {
        display: flex !important;

        align-items: center !important;

        gap: 10px !important;

        white-space: nowrap !important;
    }


    .admin-product-image {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
    }


    .admin-product-info strong {
        display: block !important;

        max-width: 150px !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

        white-space: nowrap !important;

        font-size: 11px !important;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
/* =========================================================
   HERO
========================================================= */

.wishlist-hero {
    position: relative;
    overflow: hidden;
    padding: 18px 0 58px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(225, 160, 77, 0.20),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 70%,
            rgba(38, 130, 151, 0.14),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #fff4e9 0%,
            #fffaf5 45%,
            #eef9fa 100%
        );

    border-bottom: 1px solid #ead7c7;
}


/* decorative glow */

.wishlist-hero::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;

    top: -130px;
    left: -90px;

    border-radius: 50%;

    background: rgba(193, 112, 43, 0.08);
}

.wishlist-hero::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;

    right: -150px;
    bottom: -190px;

    border-radius: 50%;

    background: rgba(27, 124, 145, 0.08);
}


/* =========================================================
   BREADCRUMB
========================================================= */

.wishlist-breadcrumb {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 42px;

    font-size: 14px;
    color: #7b6c63;
}

.wishlist-breadcrumb a {
    color: #a55c27;
    font-weight: 600;
    text-decoration: none;
}

.wishlist-breadcrumb a:hover {
    color: #d07b2e;
}

.wishlist-breadcrumb span {
    color: #aaa099;
}


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

.wishlist-hero-content {
    position: relative;
    z-index: 2;

    max-width: 750px;
    margin: 0 auto;

    text-align: center;
}

.wishlist-eyebrow {
    display: inline-block;

    margin-bottom: 11px;

    color: #b66a2d;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.wishlist-hero-content h1 {
    margin: 0;

    color: #39251d;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(38px, 5vw, 56px);
    line-height: 1.1;
    font-weight: 600;
}

.wishlist-hero-content p {
    max-width: 610px;

    margin: 17px auto 0;

    color: #71655e;

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


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

.wishlist-section {
    padding: 58px 0 85px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffaf6 100%
        );
}


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

.wishlist-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 30px;
    padding-bottom: 20px;

    border-bottom: 1px solid #eaded5;
}

.wishlist-small-title {
    display: block;

    margin-bottom: 6px;

    color: #b36b32;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.wishlist-heading h2 {
    margin: 0;

    color: #39271f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 30px;
    font-weight: 600;
}

.wishlist-total {
    padding: 8px 14px;

    border-radius: 30px;

    background: #fff1e4;
    border: 1px solid #efd5bd;

    color: #86695a;

    font-size: 13px;
    font-weight: 600;
}

.wishlist-total span {
    color: #b65f22;
    font-weight: 800;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.wishlist-grid {
    display: grid;

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

    gap: 26px;
}


/* =========================================================
   CARD
========================================================= */

.wishlist-card {
    position: relative;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #eadfd6;
    border-radius: 16px;

    box-shadow:
        0 8px 24px rgba(82, 47, 25, 0.07);

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

.wishlist-card:hover {
    transform: translateY(-7px);

    border-color: #d9b38f;

    box-shadow:
        0 18px 38px rgba(82, 47, 25, 0.14);
}


/* =========================================================
   IMAGE AREA
========================================================= */

.wishlist-image-wrap {
    position: relative;

    overflow: hidden;

    aspect-ratio: 1 / 1;

    background:
        linear-gradient(
            135deg,
            #f8eee6,
            #f3f7f5
        );
}

.wishlist-image-link {
    display: block;

    width: 100%;
    height: 100%;
}

.wishlist-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: fill;

    transition:
        transform 0.6s ease;
}

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


/* =========================================================
   IMAGE COLOR OVERLAY
========================================================= */

.wishlist-image-wrap::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.00) 55%,
            rgba(76, 40, 19, 0.08) 100%
        );
}


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

.wishlist-remove {
    position: absolute;

    z-index: 5;

    top: 13px;
    right: 13px;

    width: 42px;
    height: 42px;

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

    border: 0;
    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fff5eb
        );

    color: #c2682b;

    font-size: 18px;

    cursor: pointer;

    box-shadow:
        0 6px 18px rgba(69, 38, 21, 0.16);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.wishlist-remove:hover {
    transform: scale(1.12) rotate(-5deg);

    background:
        linear-gradient(
            135deg,
            #c66b2c,
            #a74f1e
        );

    color: #ffffff;
}


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

.wishlist-details {
    padding: 19px 18px 20px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fffaf6
        );
}

.wishlist-product-name {
    display: block;

    min-height: 45px;

    color: #382a24;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;

    transition: color 0.2s ease;
}

.wishlist-product-name:hover {
    color: #b66025;
}


/* =========================================================
   PRICE
========================================================= */

.wishlist-price {
    display: inline-block;

    margin-top: 9px;
    margin-bottom: 16px;

    color: #a6531f;

    font-size: 19px;
    font-weight: 800;
}


/* =========================================================
   ADD TO CART
========================================================= */

.wishlist-cart-button {
    width: 100%;
    min-height: 45px;

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

    gap: 8px;

    padding: 10px 15px;

    border: 1px solid #b66528;
    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #c87532,
            #a95420
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 5px 14px rgba(166, 83, 31, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.wishlist-cart-button:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #d47d34,
            #a84d1c
        );

    box-shadow:
        0 8px 18px rgba(166, 83, 31, 0.28);
}

.wishlist-cart-button i {
    font-size: 16px;
}


/* =========================================================
   EMPTY WISHLIST
========================================================= */

.wishlist-empty {
    max-width: 680px;

    margin: 20px auto 0;

    padding: 75px 35px;

    text-align: center;

    border: 1px solid #ead9ca;
    border-radius: 20px;

    background:
        radial-gradient(
            circle at top left,
            rgba(221, 151, 77, 0.13),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(38, 135, 153, 0.10),
            transparent 35%
        ),
        #ffffff;

    box-shadow:
        0 15px 40px rgba(74, 43, 25, 0.08);
}

.wishlist-empty-icon {
    width: 82px;
    height: 82px;

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

    margin: 0 auto 23px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #fff0e2,
            #f8d9bd
        );

    color: #b75d22;

    font-size: 34px;

    box-shadow:
        0 8px 22px rgba(183, 93, 34, 0.16);
}

.wishlist-empty h2 {
    margin: 0;

    color: #39261e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 29px;
}

.wishlist-empty p {
    max-width: 510px;

    margin: 14px auto 27px;

    color: #756861;

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

.wishlist-shop-button {
    display: inline-flex;

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

    gap: 8px;

    min-height: 47px;

    padding: 0 26px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #bf6b2c,
            #974719
        );

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 7px 18px rgba(151, 71, 25, 0.20);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.wishlist-shop-button:hover {
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(151, 71, 25, 0.28);
}


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

@media (max-width: 1100px) {

    .wishlist-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 800px) {

    .wishlist-container {
        width: min(
            calc(100% - 30px),
            680px
        );
    }

    .wishlist-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

}


@media (max-width: 560px) {

    .wishlist-container {
        width: calc(100% - 24px);
    }

    .wishlist-heading {
        align-items: flex-start;

        flex-direction: column;
    }

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

    .wishlist-card {
        display: grid;

        grid-template-columns:
            135px minmax(0, 1fr);
    }

    .wishlist-image-wrap {
        height: 100%;
    }

    .wishlist-details {
        display: flex;

        flex-direction: column;
        justify-content: center;

        padding: 15px;
    }

    .wishlist-remove {
        width: 36px;
        height: 36px;
    }

}



    .admin-product-info small {
        font-size: 9px !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       CATEGORY TEXT
    ===================================================== */

    .admin-product-category {
        white-space: nowrap !important;

        font-size: 10px !important;
    }


    /* =====================================================
       PRICE TEXT
    ===================================================== */

    .admin-product-price {
        white-space: nowrap !important;

        font-size: 11px !important;
    }


    /* =====================================================
       OLD PRICE TEXT
    ===================================================== */

    .admin-product-old-price,
    .admin-no-price {
        white-space: nowrap !important;

        font-size: 10px !important;
    }


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

    .admin-product-actions {
        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 6px !important;

        white-space: nowrap !important;
    }


    .admin-product-actions a,
    .admin-product-actions button {
        white-space: nowrap !important;

        flex-shrink: 0 !important;
    }


    /* =====================================================
       ADMIN SIDEBAR
       FIRST 50% OF PHONE SCREEN
    ===================================================== */

    .admin-sidebar {
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        width: 100% !important;

        height: 50vh !important;
        min-height: 50vh !important;
        max-height: 50vh !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: hidden !important;

        flex-shrink: 0 !important;

        box-sizing: border-box !important;

        z-index: 1000 !important;

        box-shadow:
            0 6px 25px
            rgba(62, 39, 35, 0.18);
    }


    /* =====================================================
       SIDEBAR DECORATIONS
    ===================================================== */

    .admin-sidebar::before {
        width: 160px !important;
        height: 160px !important;

        top: -65px !important;
        right: -70px !important;
    }


    .admin-sidebar::after {
        width: 140px !important;
        height: 140px !important;

        bottom: -60px !important;
        left: -65px !important;
    }


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

    .admin-brand {
        min-height: 67px !important;
        height: 67px !important;

        padding: 10px 14px !important;

        gap: 11px !important;

        flex-shrink: 0 !important;

        box-sizing: border-box !important;
    }


    .admin-brand-icon {
        width: 42px !important;
        height: 42px !important;

        border-radius: 12px !important;

        font-size: 18px !important;
    }


    .admin-brand h4 {
        font-size: 15px !important;
    }


    .admin-brand span {
        margin-top: 3px !important;

        font-size: 8px !important;

        letter-spacing: 0.5px !important;
    }


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

    .admin-profile {
        width: calc(100% - 24px) !important;

        margin: 10px 12px 7px !important;

        padding: 9px 11px !important;

        gap: 10px !important;

        border-radius: 12px !important;

        flex-shrink: 0 !important;

        box-sizing: border-box !important;
    }


    .admin-profile-avatar {
        width: 36px !important;
        height: 36px !important;

        border-radius: 10px !important;

        font-size: 15px !important;
    }


    .admin-profile strong {
        font-size: 11px !important;
    }


    .admin-profile small {
        margin-top: 2px !important;

        font-size: 10px !important;
    }


    /* =====================================================
       NAVIGATION
    ===================================================== */

    .admin-nav {
        position: relative !important;

        flex: 1 !important;

        width: 100% !important;

        min-height: 0 !important;

        padding: 5px 10px !important;

        overflow-y: auto !important;

        overflow-x: hidden !important;

        box-sizing: border-box !important;

        z-index: 2 !important;
    }


    .admin-nav-title {
        margin: 7px 8px 5px !important;

        font-size: 8px !important;

        letter-spacing: 1.2px !important;
    }


    /* =====================================================
       NAVIGATION LINKS
    ===================================================== */

    .admin-nav a {
        width: 100% !important;

        min-height: 38px !important;

        margin: 2px 0 !important;

        padding: 8px 11px !important;

        gap: 10px !important;

        border-radius: 9px !important;

        font-size: 11px !important;

        box-sizing: border-box !important;

        transform: none !important;

        flex-shrink: 0 !important;
    }


    .admin-nav a i {
        width: 20px !important;
        min-width: 20px !important;

        font-size: 15px !important;

        text-align: center !important;
    }


    /* =====================================================
       REMOVE HORIZONTAL HOVER MOVEMENT ON PHONE
    ===================================================== */

    .admin-nav a:hover {
        transform: none !important;
    }


    /* =====================================================
       SIDEBAR BOTTOM
       LOGOUT + WEBSITE
    ===================================================== */

    .admin-sidebar-bottom {
        position: relative !important;

        width: 100% !important;

        margin-top: 0 !important;

        padding: 7px 10px 9px !important;

        border-top:
            1px solid rgba(255, 255, 255, 0.12) !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 4px !important;

        flex-shrink: 0 !important;

        box-sizing: border-box !important;

        z-index: 5 !important;
    }


    .admin-sidebar-bottom a {
        width: 100% !important;

        min-height: 34px !important;

        margin: 0 !important;

        padding: 6px 10px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 7px !important;

        border-radius: 9px !important;

        color:
            rgba(255, 255, 255, 0.70) !important;

        font-size: 9px !important;

        box-sizing: border-box !important;
    }


    .admin-sidebar-bottom a i {
        font-size: 14px !important;
    }


    /* =====================================================
       KEEP LAST LINK COLORS
    ===================================================== */

    .admin-sidebar-bottom a:last-child {
        color: #ebdfd1 !important;
    }


    .admin-sidebar-bottom a:last-child i {
        color: #ebb206 !important;
    }


    /* =====================================================
       TOPBAR PHONE SPACING
    ===================================================== */

    .admin-topbar-right {
        display: flex !important;

        align-items: center !important;

        gap: 18px !important;
    }


    .admin-secure-status,
    .admin-topbar-user {
        white-space: nowrap !important;
    }

}



.admin-order-product-image {
    width: 35px;
    height: 35px;
    min-width: 35px;
    overflow: hidden;
    border-radius: 7px;
    background: #f8f5f2;
    border: 1px solid #eee5df;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-order-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


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

.wishlist-hero {
    position: relative;
    overflow: hidden;
    padding: 18px 0 58px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(225, 160, 77, 0.20),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 70%,
            rgba(38, 130, 151, 0.14),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #fff4e9 0%,
            #fffaf5 45%,
            #eef9fa 100%
        );

    border-bottom: 1px solid #ead7c7;
}


/* decorative glow */

.wishlist-hero::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;

    top: -130px;
    left: -90px;

    border-radius: 50%;

    background: rgba(193, 112, 43, 0.08);
}

.wishlist-hero::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;

    right: -150px;
    bottom: -190px;

    border-radius: 50%;

    background: rgba(27, 124, 145, 0.08);
}


/* =========================================================
   BREADCRUMB
========================================================= */

.wishlist-breadcrumb {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 42px;

    font-size: 14px;
    color: #7b6c63;
}

.wishlist-breadcrumb a {
    color: #a55c27;
    font-weight: 600;
    text-decoration: none;
}

.wishlist-breadcrumb a:hover {
    color: #d07b2e;
}

.wishlist-breadcrumb span {
    color: #aaa099;
}


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

.wishlist-hero-content {
    position: relative;
    z-index: 2;

    max-width: 750px;
    margin: 0 auto;

    text-align: center;
}

.wishlist-eyebrow {
    display: inline-block;

    margin-bottom: 11px;

    color: #b66a2d;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.wishlist-hero-content h1 {
    margin: 0;

    color: #39251d;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(38px, 5vw, 56px);
    line-height: 1.1;
    font-weight: 600;
}

.wishlist-hero-content p {
    max-width: 610px;

    margin: 17px auto 0;

    color: #71655e;

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


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

.wishlist-section {
    padding: 58px 0 85px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffaf6 100%
        );
}


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

.wishlist-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 30px;
    padding-bottom: 20px;

    border-bottom: 1px solid #eaded5;
}

.wishlist-small-title {
    display: block;

    margin-bottom: 6px;

    color: #b36b32;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.wishlist-heading h2 {
    margin: 0;

    color: #39271f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 30px;
    font-weight: 600;
}

.wishlist-total {
    padding: 8px 14px;

    border-radius: 30px;

    background: #fff1e4;
    border: 1px solid #efd5bd;

    color: #86695a;

    font-size: 13px;
    font-weight: 600;
}

.wishlist-total span {
    color: #b65f22;
    font-weight: 800;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.wishlist-grid {
    display: grid;

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

    gap: 26px;
}


/* =========================================================
   CARD
========================================================= */

.wishlist-card {
    position: relative;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #eadfd6;
    border-radius: 16px;

    box-shadow:
        0 8px 24px rgba(82, 47, 25, 0.07);

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

.wishlist-card:hover {
    transform: translateY(-7px);

    border-color: #d9b38f;

    box-shadow:
        0 18px 38px rgba(82, 47, 25, 0.14);
}


/* =========================================================
   IMAGE AREA
========================================================= */

.wishlist-image-wrap {
    position: relative;

    overflow: hidden;

    aspect-ratio: 1 / 1;

    background:
        linear-gradient(
            135deg,
            #f8eee6,
            #f3f7f5
        );
}

.wishlist-image-link {
    display: block;

    width: 100%;
    height: 100%;
}

.wishlist-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: fill;

    transition:
        transform 0.6s ease;
}

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


/* =========================================================
   IMAGE COLOR OVERLAY
========================================================= */

.wishlist-image-wrap::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.00) 55%,
            rgba(76, 40, 19, 0.08) 100%
        );
}


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

.wishlist-remove {
    position: absolute;

    z-index: 5;

    top: 13px;
    right: 13px;

    width: 42px;
    height: 42px;

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

    border: 0;
    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fff5eb
        );

    color: #c2682b;

    font-size: 18px;

    cursor: pointer;

    box-shadow:
        0 6px 18px rgba(69, 38, 21, 0.16);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.wishlist-remove:hover {
    transform: scale(1.12) rotate(-5deg);

    background:
        linear-gradient(
            135deg,
            #c66b2c,
            #a74f1e
        );

    color: #ffffff;
}


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

.wishlist-details {
    padding: 19px 18px 20px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fffaf6
        );
}

.wishlist-product-name {
    display: block;

    min-height: 45px;

    color: #382a24;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;

    transition: color 0.2s ease;
}

.wishlist-product-name:hover {
    color: #b66025;
}


/* =========================================================
   PRICE
========================================================= */

.wishlist-price {
    display: inline-block;

    margin-top: 9px;
    margin-bottom: 16px;

    color: #a6531f;

    font-size: 19px;
    font-weight: 800;
}


/* =========================================================
   ADD TO CART
========================================================= */

.wishlist-cart-button {
    width: 100%;
    min-height: 45px;

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

    gap: 8px;

    padding: 10px 15px;

    border: 1px solid #b66528;
    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #c87532,
            #a95420
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 5px 14px rgba(166, 83, 31, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.wishlist-cart-button:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #d47d34,
            #a84d1c
        );

    box-shadow:
        0 8px 18px rgba(166, 83, 31, 0.28);
}

.wishlist-cart-button i {
    font-size: 16px;
}


/* =========================================================
   EMPTY WISHLIST
========================================================= */

.wishlist-empty {
    max-width: 680px;

    margin: 20px auto 0;

    padding: 75px 35px;

    text-align: center;

    border: 1px solid #ead9ca;
    border-radius: 20px;

    background:
        radial-gradient(
            circle at top left,
            rgba(221, 151, 77, 0.13),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(38, 135, 153, 0.10),
            transparent 35%
        ),
        #ffffff;

    box-shadow:
        0 15px 40px rgba(74, 43, 25, 0.08);
}

.wishlist-empty-icon {
    width: 82px;
    height: 82px;

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

    margin: 0 auto 23px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #fff0e2,
            #f8d9bd
        );

    color: #b75d22;

    font-size: 34px;

    box-shadow:
        0 8px 22px rgba(183, 93, 34, 0.16);
}

.wishlist-empty h2 {
    margin: 0;

    color: #39261e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 29px;
}

.wishlist-empty p {
    max-width: 510px;

    margin: 14px auto 27px;

    color: #756861;

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

.wishlist-shop-button {
    display: inline-flex;

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

    gap: 8px;

    min-height: 47px;

    padding: 0 26px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #bf6b2c,
            #974719
        );

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 7px 18px rgba(151, 71, 25, 0.20);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.wishlist-shop-button:hover {
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(151, 71, 25, 0.28);
}


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

@media (max-width: 1100px) {

    .wishlist-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 800px) {

    .wishlist-container {
        width: min(
            calc(100% - 30px),
            680px
        );
    }

    .wishlist-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

}

@media (max-width: 560px) {

    .wishlist-container {
        width: calc(100% - 24px);
    }

    .wishlist-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    /* One card per row */
    .wishlist-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* Keep normal vertical card */
    .wishlist-card {
        display: block;
    }

    .wishlist-image-wrap {
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
    }

    .wishlist-details {
        display: block;
        padding: 17px 15px 18px;
    }

    .wishlist-product-name {
        min-height: auto;
    }

    .wishlist-remove {
        width: 38px;
        height: 38px;
        top: 10px;
        right: 10px;
    }

}

/* =========================================================
ABOUT PAGE — PREMIUM COLORFUL DESIGN
========================================================= */

.about-page {
--about-purple: #5b21b6;
--about-purple-dark: #32106f;
--about-purple-light: #8b5cf6;
--about-pink: #d94f7d;
--about-pink-light: #f472b6;
--about-gold: #d4a72c;
--about-gold-light: #f7d774;
--about-cream: #fffaf0;
--about-dark: #24152f;

```
overflow: hidden;
background: #fffdf8;
color: var(--about-dark);


}

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

.about-hero-new {
position: relative;
min-height: 620px;

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

text-align: center;

padding: 100px 20px 120px;

overflow: hidden;

background:
  radial-gradient(circle at 20% 20%, rgba(244, 114, 182, 0.25), transparent 35%), 
  radial-gradient(circle at 80% 70%, rgba(212, 167, 44, 0.18), transparent 35%),
  linear-gradient(135deg, #08799d 0%, #836ea5 45%, #aa1ac9 70%, #bd97a4 100%);

color: white;


}

.about-hero-new::before {
content: "";


position: absolute;
inset: 0;

background-image:
    radial-gradient(
        rgba(255,255,255,.18) 1px,
        transparent 1px
    );

background-size: 28px 28px;

opacity: .25;

pointer-events: none;


}

.about-hero-inner {
position: relative;
z-index: 2;

max-width: 900px;


}

.about-kicker {
display: inline-flex;
align-items: center;


padding: 8px 18px;

border: 2px solid rgba(247,215,116,.65);
border-radius: 999px;

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

font-size: 15px;
color:brown;
font-weight: 700;
letter-spacing: 3px;

background: rgba(255,255,255,.07);
backdrop-filter: blur(8px);


}

.about-hero-title {
margin: 25px 0 20px;


font-size: clamp(42px, 6vw, 78px);
line-height: 1.05;
font-weight: 700;
letter-spacing: -2px;


}

.about-hero-title span {
display: block;

background:
    linear-gradient(
        90deg,
        #f7d774,
        #fff1ad,
        #f7d774
    );

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

color: transparent;


}

.about-hero-description {
max-width: 680px;

margin: 0 auto;

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

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


}

.about-hero-divider {
display: flex;
align-items: center;
justify-content: center;

gap: 15px;

margin-top: 30px;


}

.about-hero-divider span {
width: 70px;
height: 1px;


background: rgba(247,215,116,.7);


}

.about-hero-divider i {
color: var(--about-gold-light);
}

.about-hero-scroll {
position: absolute;


left: 50%;
bottom: 30px;

transform: translateX(-50%);

display: flex;
flex-direction: column;
align-items: center;


gap: 8px;

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

font-size: 11px;
letter-spacing: 1px;


}

.about-hero-scroll i {
color: var(--about-gold-light);
animation: aboutScrollBounce 1.8s ease-in-out infinite;
}

@keyframes aboutScrollBounce {


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

50% {
    transform: translateY(7px);
}


}

/* =========================================================
INTRO
========================================================= */

.about-intro {
padding: 110px 20px;


background:
    linear-gradient(
        180deg,
        #fffdf8,
        #fff8ee
    );


}

.about-intro-inner {
max-width: 950px;
margin: auto;
text-align: center;
}

.about-intro-label {
color: var(--about-pink);


font-size: 11px;
font-weight: 700;
letter-spacing: 3px;


}

.about-intro-title {
margin: 20px 0;


color: var(--about-purple-dark);

font-size: clamp(34px, 5vw, 58px);
line-height: 1.15;

}

.about-intro-title em {
color: var(--about-pink);
font-style: normal;
}

.about-intro-description {
max-width: 700px;


margin: 25px auto 0;

color: #6b5a70;

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


}

/* =========================================================
COMMON IMAGE FRAME
========================================================= */

.about-image-frame {
position: relative;


overflow: hidden;

border-radius: 22px;

box-shadow:
    0 25px 60px rgba(63, 32, 87, .18);


}

.about-image-frame::after {
content: "";


position: absolute;
inset: 0;

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

border-radius: inherit;

pointer-events: none;


}

.about-image-frame img {
display: block;


width: 100%;
height: 100%;

object-fit: cover;

transition:
    transform .8s ease,
    filter .5s ease;


}

.about-image-frame:hover img {
transform: scale(1.05);
}

/* =========================================================
STORY / HERITAGE
========================================================= */

.about-story {
padding: 110px 7%;

background: white;


}

.about-story-grid {
max-width: 1250px;


margin: auto;

display: grid;

grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

gap: 80px;

align-items: center;


}

.about-story-text {
padding: 20px;
}

.about-number {
color: var(--about-pink);

font-size: 11px;
font-weight: 800;

letter-spacing: 2px;


}

.about-section-title {
margin: 18px 0 25px;


color: var(--about-purple-dark);

font-size: clamp(34px, 4vw, 52px);
line-height: 1.12;


}

.about-section-title span {
color: var(--about-pink);
}

.about-section-text {
color: #685d6d;


font-size: 15px;
line-height: 1.9;

margin-bottom: 18px;


}

.about-highlight-line {
display: flex;
align-items: center;

gap: 12px;

margin-top: 28px;

color: var(--about-purple);

font-size: 13px;
font-weight: 700;


}

.about-highlight-line i {
color: var(--about-gold);
font-size: 9px;
}

.about-image-badge {
position: absolute;

left: 20px;
bottom: 20px;

display: flex;
align-items: center;

gap: 8px;

padding: 10px 15px;

border-radius: 999px;

color: white;

background:
    linear-gradient(
        90deg,
        rgba(91,33,182,.95),
        rgba(217,79,125,.95)
    );

font-size: 11px;
font-weight: 600;

backdrop-filter: blur(10px);
}
/* =========================================================
CRAFTSMANSHIP
========================================================= */

.about-craft {
padding: 110px 7%;


background:
    linear-gradient(
        135deg,
        #fff7ef,
        #fdf2f8
    );


}

.about-craft-grid {
max-width: 1250px;

margin: auto;

display: grid;

grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

gap: 80px;

align-items: center;


}

.about-craft-text {
padding: 20px;
}

.about-craft-image {
order: 2;
}

.about-craft-points {
display: flex;
flex-wrap: wrap;


gap: 12px;

margin-top: 30px;


}

.about-craft-points div {
display: flex;
align-items: center;


gap: 8px;

padding: 10px 14px;

border-radius: 999px;

color: var(--about-purple);

background: white;

box-shadow:
    0 8px 25px rgba(80, 35, 100, .08);

font-size: 11px;
font-weight: 700;


}

.about-craft-points i {
color: var(--about-pink);
}

/* =========================================================
LEADERSHIP
========================================================= */

.about-leadership {
position: relative;

padding: 120px 7%;

overflow: hidden;

background:
    radial-gradient(
        circle at 10% 20%,
        rgba(217,79,125,.14),
        transparent 30%
    ),
    radial-gradient(
        circle at 90% 80%,
        rgba(139,92,246,.16),
        transparent 30%
    ),
    #fffdf9;


}

.about-leadership-inner {
position: relative;
z-index: 2;

max-width: 1200px;

margin: auto;

}

.about-leadership-heading {
max-width: 720px;


margin: 0 auto 90px;

text-align: center;


}

.about-leadership-heading h2 {
margin: 15px 0;


color: var(--about-purple-dark);

font-size: clamp(38px, 5vw, 62px);
line-height: 1.1;


}

.about-leadership-heading h2 em {
color: var(--about-pink);
font-style: normal;
}

.about-leadership-heading p {
color: #6b5d70;


line-height: 1.8;
```

}

.about-owner {
display: grid;

grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

gap: 80px;

align-items: center;

margin-bottom: 120px;


}

.about-owner-two {
margin-bottom: 0;
}

.about-owner-image {
position: relative;
}

.owner-photo-frame {
position: relative;


padding: 12px;

border-radius: 28px;

background:
    linear-gradient(
        135deg,
        var(--about-gold),
        var(--about-pink),
        var(--about-purple)
    );

box-shadow:
    0 30px 70px rgba(69, 35, 93, .20);


}

.owner-photo-frame img {
display: block;


width: 100%;
aspect-ratio: 4 / 5;

object-fit: cover;

border-radius: 20px;



}

.owner-photo-number {
position: absolute;

right: 25px;
bottom: 25px;

width: 58px;
height: 58px;

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

border-radius: 50%;

color: var(--about-purple-dark);

background: var(--about-gold-light);

font-size: 16px;
font-weight: 800;

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


}

.about-owner-content {
padding: 15px;
}

.about-owner-top {
display: flex;
align-items: center;


gap: 15px;

margin-bottom: 15px;


}

.about-owner-number {
color: var(--about-gold);


font-size: 28px;
font-weight: 800;


}

.about-owner-role {
color: var(--about-pink);


font-size: 10px;
font-weight: 800;

letter-spacing: 2px;


}

.about-owner-content h3 {
margin: 0;

color: var(--about-purple-dark);

font-size: clamp(27px, 3vw, 42px);

line-height: 1.15;


}

.about-owner-designation {
margin-top: 8px;

color: #9a718d;

font-size: 13px;
font-weight: 600;


}

.owner-gold-line {
width: 70px;
height: 3px;

margin: 20px 0;

border-radius: 99px;

background:
    linear-gradient(
        90deg,
        var(--about-gold),
        var(--about-pink)
    );


}

.about-owner-content p {
color: #665a6b;

font-size: 15px;
line-height: 1.9;


}

.about-owner-signature {
display: flex;
flex-direction: column;


gap: 4px;

margin-top: 28px;
padding-left: 15px;

border-left: 3px solid var(--about-gold);


}

.about-owner-signature span {
color: #9a718d;

font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;


}

.about-owner-signature strong {
color: var(--about-purple);

font-size: 17px;


}

/* =========================================================
STATEMENT
========================================================= */

.about-statement {
position: relative;


padding: 130px 20px;

overflow: hidden;

text-align: center;

color: white;

background:
    linear-gradient(
        135deg,
        #32106f,
        #5b21b6 45%,
        #d94f7d
    );


}

.about-statement::before {
content: "";


position: absolute;
inset: 0;

background:
    radial-gradient(
        circle at center,
        rgba(247,215,116,.20),
        transparent 45%
    );


}

.about-statement-inner {
position: relative;
z-index: 2;

max-width: 900px;
margin: auto;


}

.about-statement-small {
color: var(--about-gold-light);


font-size: 10px;
font-weight: 800;
letter-spacing: 3px;


}

.about-statement-symbol {
margin: 20px 0;


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

font-size: 25px;

}

.about-statement h2 {
margin: 0;
color:white;

font-size: clamp(34px, 5vw, 60px);
line-height: 1.15;


}

.about-statement p {
max-width: 650px;

margin: 25px auto 0;

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

line-height: 1.8;


}

/* =========================================================
INNOVATION
========================================================= */

.about-innovation {
padding: 120px 7%;


background: white;


}

.about-innovation-grid {
max-width: 1250px;

margin: auto;

display: grid;

grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

gap: 80px;

align-items: center;


}

.about-innovation-text {
padding: 20px;
}

.about-innovation-text .about-section-title {
max-width: 600px;
}

/* =========================================================
GALLERY
========================================================= */

.about-gallery {
padding: 110px 7%;

background:
    linear-gradient(
        180deg,
        #fff8ef,
        #fff
);

}

.about-gallery-heading {
text-align: center;

margin-bottom: 50px;


}

.about-gallery-heading h2 {
margin-top: 12px;


color: var(--about-purple-dark);

font-size: clamp(35px, 5vw, 55px);


}

.about-gallery-heading em {
color: var(--about-pink);
font-style: normal;
}

.about-gallery-grid {
max-width: 1100px;


margin: auto;

display: grid;

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

gap: 25px;


}

.gallery-image-wrapper {
position: relative;


overflow: hidden;

border-radius: 22px;

box-shadow:
    0 20px 50px rgba(60, 30, 80, .12);


}

.gallery-image-wrapper img {
display: block;


width: 100%;
aspect-ratio: 4 / 3;

object-fit: cover;

transition: transform .7s ease;


}

.gallery-image-wrapper:hover img {
transform: scale(1.06);
}

.gallery-overlay {
position: absolute;


left: 20px;
right: 20px;
bottom: 20px;

padding: 12px 15px;

border-radius: 12px;

color: white;

background: rgba(50,16,111,.82);

backdrop-filter: blur(8px);

font-size: 12px;
font-weight: 700;


}

/* =========================================================
CTA
========================================================= */

.about-cta {
position: relative;

padding: 130px 20px;

overflow: hidden;

text-align: center;

color: white;

background:
    linear-gradient(
        135deg,
        #947fc3,
        #5b21b6,
        #d94f7d
    );


}

.about-cta::before {
content: "";


position: absolute;

width: 500px;
height: 500px;

top: -250px;
left: -150px;

border-radius: 50%;

background: rgba(247,215,116,.12);


}

.about-cta::after {
content: "";

position: absolute;

width: 400px;
height: 400px;

right: -150px;
bottom: -200px;

border-radius: 50%;

background: rgba(244,114,182,.18);
}
.about-cta-inner {
position: relative;
z-index: 2;

max-width: 760px;
margin: auto;


}

.about-cta-small {
color: var(--about-gold-light);


font-size: 10px;
font-weight: 800;
letter-spacing: 3px;


}

.about-cta-symbol {
margin: 20px 0;

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

font-size: 25px;


}

.about-cta h2 {
margin: 0;
color:white;


font-size: clamp(38px, 5vw, 65px);
line-height: 1.1;


}

.about-cta h2 span {
display: block;

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


}

.about-cta p {
max-width: 650px;


margin: 25px auto;

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

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


}

.about-shop-btn {
display: inline-flex;
align-items: center;

gap: 12px;

margin-top: 15px;
padding: 14px 25px;

border-radius: 999px;

color: var(--about-purple-dark);

background:
    linear-gradient(
        135deg,
        #f7d774,
        #fff1ad
    );

text-decoration: none;

font-size: 13px;
font-weight: 800;

box-shadow:
    0 12px 30px rgba(0,0,0,.18);

transition:
    transform .3s ease,
    box-shadow .3s ease;


}

.about-shop-btn:hover {
color: var(--about-purple-dark);

transform: translateY(-3px);

box-shadow:
    0 18px 35px rgba(0,0,0,.25);

}

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

@media (max-width: 900px) {


.about-story-grid,
.about-craft-grid,
.about-owner,
.about-innovation-grid {
    grid-template-columns: 1fr;

    gap: 45px;
}

.about-craft-image {
    order: initial;
}

.about-owner-two .about-owner-image {
    order: -1;
}

.about-story,
.about-craft,
.about-leadership,
.about-innovation {
    padding-top: 80px;
    padding-bottom: 80px;
}

.about-owner {
    margin-bottom: 80px;
}

.about-gallery-grid {
    gap: 18px;
}
```

}

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

@media (max-width: 600px) {

```
.about-hero-new {
    min-height: 570px;

    padding:
        80px 18px
        100px;
}

.about-hero-title {
    font-size: 40px;
    letter-spacing: -1px;
}

.about-hero-description {
    font-size: 14px;
    line-height: 1.7;
}

.about-hero-divider span {
    width: 45px;
}

.about-intro,
.about-story,
.about-craft,
.about-leadership,
.about-innovation,
.about-gallery {
    padding-left: 18px;
    padding-right: 18px;
}

.about-intro {
    padding-top: 75px;
    padding-bottom: 75px;
}

.about-intro-title {
    font-size: 34px;
}

.about-section-title {
    font-size: 34px;
}

.about-story-grid,
.about-craft-grid,
.about-innovation-grid {
    gap: 35px;
}

.about-story-text,
.about-craft-text,
.about-innovation-text {
    padding: 5px;
}

.about-craft-points {
    flex-direction: column;
    align-items: stretch;
}

.about-craft-points div {
    justify-content: center;
}

.about-leadership {
    padding-top: 80px;
    padding-bottom: 80px;
}

.about-leadership-heading {
    margin-bottom: 60px;
}

.about-leadership-heading h2 {
    font-size: 38px;
}

.about-owner {
    gap: 30px;
    margin-bottom: 70px;
}

.about-owner-content {
    padding: 0;
}

.about-owner-content h3 {
    font-size: 28px;
}

.about-owner-content p {
    font-size: 14px;
}

.owner-photo-number {
    width: 48px;
    height: 48px;

    right: 18px;
    bottom: 18px;

    font-size: 13px;
}

.about-statement {
    padding: 90px 20px;
}

.about-statement h2 {
    font-size: 34px;
}

.about-innovation {
    padding-top: 80px;
    padding-bottom: 80px;
}

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

.about-gallery {
    padding-top: 80px;
    padding-bottom: 80px;
}

.about-cta {
    padding: 90px 20px;
}

.about-cta h2 {
    font-size: 40px;
}

.about-cta p {
    font-size: 14px;
}

.about-shop-btn {
    width: 100%;
    max-width: 280px;

    justify-content: center;
}