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

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


html {
    scroll-behavior: smooth;
}


body {
    background: #020807;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
}


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


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


/* =========================================
   COLORS
========================================= */

:root {

    --black: #020807;

    --dark-green: #061b16;

    --green: #0c382c;

    --emerald: #0f513e;

    --gold: #d9a62e;

    --gold-light: #f0c75e;

    --text-light: #eeeeee;

    --text-muted: #a6aaa7;

}


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

.navbar {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    background: rgba(2, 8, 7, 0.92);

    border-bottom: 1px solid rgba(217, 166, 46, 0.25);

    backdrop-filter: blur(12px);

}


.nav-container {

    max-width: 1500px;

    margin: auto;

    height: 92px;

    padding: 0 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* LOGO */

.logo {
    display: flex;
    align-items: center;
    width: 210px;
}

.logo img {
    width: 190px;
    height: 65px;
    object-fit: contain;
}


.logo-symbol {

    width: 55px;

    height: 55px;

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

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--gold);

    font-family: "Cinzel", serif;

    font-weight: 700;

    font-size: 18px;

}


.logo-text h2 {

    color: var(--gold-light);

    font-family: "Cinzel", serif;

    font-size: 23px;

    letter-spacing: 2px;

}


.logo-text span {

    font-size: 9px;

    letter-spacing: 2px;

    color: #d0d0d0;

}


/* NAVIGATION */

.nav-menu {

    display: flex;

    gap: 28px;

    align-items: center;

}


.nav-menu a {

    position: relative;

    color: #dddddd;

    font-size: 12px;

    letter-spacing: 1px;

    transition: 0.3s;

}


.nav-menu a:hover,
.nav-menu a.active {

    color: var(--gold-light);

}


.nav-menu a.active::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -14px;

    transform: translateX(-50%);

    width: 25px;

    height: 2px;

    background: var(--gold);

}


/* NAV ICONS */

.nav-icons {

    display: flex;

    gap: 20px;

    align-items: center;

}


.nav-icons>i,
.icon-with-count i {

    color: #dddddd;

    font-size: 17px;

    cursor: pointer;

    transition: 0.3s;

}


.nav-icons i:hover {

    color: var(--gold);

}


.icon-with-count {

    position: relative;

}


.icon-with-count span {

    position: absolute;

    top: -9px;

    right: -10px;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: var(--gold);

    color: #000;

    font-size: 9px;

    display: flex;

    justify-content: center;

    align-items: center;

}


.menu-toggle {

    display: none;

    font-size: 23px;

}


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

.hero {

    min-height: 760px;

    margin-top: 92px;

    position: relative;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    background:

        radial-gradient(circle at 50% 40%,
            rgba(12, 73, 55, 0.5),
            transparent 45%),

        linear-gradient(120deg,
            #020807,
            #062219,
            #020807);

}


.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:
        url("../images/hero.jpg");

    background-size: cover;

    background-position: center;

    opacity: 0.42;

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 10, 8, 0.8),
            rgba(0, 20, 15, 0.3),
            rgba(0, 10, 8, 0.8));

}


.hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

    padding: 80px 20px;

}


.hero-small-title {

    color: var(--gold-light);

    font-size: 13px;

    letter-spacing: 5px;

    margin-bottom: 20px;

}


.hero h1 {

    font-family: "Cinzel", serif;

    font-size: clamp(80px, 9vw, 140px);

    letter-spacing: 10px;

    color: #e5b93f;

    text-shadow:
        0 0 20px rgba(217, 166, 46, 0.3);

}


.hero h1 span {

    color: #ffffff;

}


.gold-line {

    width: 300px;

    height: 1px;

    margin: 5px auto 18px;

    background: var(--gold);

}


.hero-subtitle {

    color: #eeeeee;

    letter-spacing: 7px;

    font-family: "Cinzel", serif;

    font-size: 14px;

}


.hero-subtitle span {

    color: var(--gold);

    padding: 0 8px;

}


.hero-description {

    max-width: 600px;

    margin: 25px auto;

    color: #c5cbc8;

    line-height: 1.8;

    font-size: 14px;

}


/* BUTTONS */

.hero-buttons {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 35px;

}


.btn {

    padding: 16px 30px;

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

    font-size: 12px;

    letter-spacing: 1px;

    transition: 0.3s;

    display: inline-flex;

    gap: 12px;

    align-items: center;

}


.btn-primary {

    background: linear-gradient(135deg,
            #dcae3d,
            #f1c75e);

    color: #101010;

    font-weight: 600;

}


.btn-primary:hover {

    transform: translateY(-3px);

    box-shadow:
        0 10px 30px rgba(217, 166, 46, 0.25);

}


.btn-secondary {

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

    color: white;

}


.btn-secondary:hover {

    background: var(--gold);

    color: #111;

}


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

.hero-feature {

    position: absolute;

    bottom: 25px;

    z-index: 3;

    border: 1px solid rgba(217, 166, 46, 0.6);

    background: rgba(0, 15, 10, 0.8);

    padding: 14px 20px;

    display: flex;

    gap: 14px;

    align-items: center;

}


.hero-feature i {

    color: var(--gold);

    font-size: 25px;

}


.hero-feature strong {

    display: block;

    color: var(--gold-light);

    font-size: 11px;

    letter-spacing: 1px;

}


.hero-feature span {

    display: block;

    font-size: 9px;

    color: #c4c4c4;

    margin-top: 4px;

}


.hero-feature-left {

    left: 30px;

}


.hero-feature-right {

    right: 30px;

}


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

.collections {

    background: #03110d;

    padding: 18px;

}


.collection-container {

    display: grid;

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

    gap: 10px;

}


.collection-card {

    height: 220px;

    position: relative;

    overflow: hidden;

    border: 1px solid rgba(217, 166, 46, 0.65);

    background: #061a14;

}


.collection-card img {

    position: absolute;

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0.48;

    transition: 0.5s;

}


.collection-card:hover img {

    transform: scale(1.08);

    opacity: 0.6;

}


.collection-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 10, 7, 0.9),
            rgba(0, 10, 7, 0.2));

}


.collection-content {

    position: relative;

    z-index: 2;

    height: 100%;

    padding: 35px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.collection-content span {

    font-size: 9px;

    color: var(--gold-light);

    letter-spacing: 2px;

}


.collection-content h2 {

    font-family: "Cinzel", serif;

    font-size: 25px;

    margin: 8px 0;

    color: #f0d27a;

}


.collection-content p {

    color: #d1d1d1;

    font-size: 11px;

    margin-bottom: 15px;

}


.collection-content a {

    width: fit-content;

    padding: 10px 18px;

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

    color: var(--gold-light);

    font-size: 10px;

    letter-spacing: 1px;

}


.collection-content a:hover {

    background: var(--gold);

    color: #000;

}


/* =========================================
   FEATURES
========================================= */

.features {

    padding: 25px 5%;

    background: #020807;

    display: grid;

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

    border-bottom: 1px solid rgba(217, 166, 46, 0.2);

}


.feature-item {

    display: flex;

    gap: 15px;

    justify-content: center;

    align-items: center;

    border-right: 1px solid rgba(217, 166, 46, 0.2);

}


.feature-item:last-child {

    border-right: none;

}


.feature-item i {

    color: var(--gold);

    font-size: 25px;

}


.feature-item h3 {

    font-size: 10px;

    color: var(--gold-light);

    letter-spacing: 1px;

}


.feature-item p {

    color: #929997;

    font-size: 9px;

    margin-top: 3px;

}


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

.about-section {

    padding: 100px 8%;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 70px;

    align-items: center;

    background:
        linear-gradient(135deg,
            #03120e,
            #020807);

}


.about-image {

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

    padding: 8px;

}


.about-image img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    opacity: 1;

    transition: opacity 1.5s ease-in-out;
}


.section-label {

    color: var(--gold);

    font-size: 11px;

    letter-spacing: 3px;

}


.about-content h2 {

    font-family: "Cinzel", serif;

    font-size: 48px;

    margin: 15px 0 25px;

}


.about-content h2 span {

    display: block;

    color: var(--gold-light);

}


.about-content p {

    color: #aeb5b2;

    font-size: 14px;

    line-height: 1.9;

    margin-bottom: 20px;

}


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

.cta-section {

    padding: 60px 8%;

    border-top: 1px solid rgba(217, 166, 46, 0.25);

    border-bottom: 1px solid rgba(217, 166, 46, 0.25);

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #061a14;

}


.cta-section p {

    color: var(--gold);

    font-size: 10px;

    letter-spacing: 3px;

}


.cta-section h2 {

    font-family: "Cinzel", serif;

    font-size: 30px;

    margin-top: 10px;

}


.cta-section h2 span {

    color: var(--gold-light);

}


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

.footer {

    background: #010504;

    padding-top: 60px;

}


.footer-container {

    max-width: 1300px;

    margin: auto;

    padding: 0 30px 50px;

    display: grid;

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

    gap: 50px;

}


.footer-brand h2 {

    font-family: "Cinzel", serif;

    color: var(--gold-light);

    letter-spacing: 2px;

}


.footer-brand p {

    max-width: 300px;

    color: #8e9692;

    font-size: 12px;

    line-height: 1.8;

    margin: 15px 0;

}


.social-icons {

    display: flex;

    gap: 12px;

}


.social-icons a {

    width: 35px;

    height: 35px;

    border: 1px solid rgba(217, 166, 46, 0.5);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--gold);

}


.footer-column h3 {

    color: var(--gold-light);

    font-size: 11px;

    letter-spacing: 2px;

    margin-bottom: 20px;

}


.footer-column a {

    display: block;

    color: #8f9693;

    font-size: 12px;

    margin-bottom: 12px;

}


.footer-column a:hover {

    color: var(--gold);

}


.footer-column p {

    color: #8f9693;

    font-size: 11px;

    margin-bottom: 15px;

    line-height: 1.6;

}


.footer-column p i {

    color: var(--gold);

    margin-right: 8px;

}


.copyright {

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

    text-align: center;

    padding: 20px;

    color: #656c69;

    font-size: 10px;

}


/* =========================================
   WHATSAPP
========================================= */

.whatsapp-button {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 58px;

    height: 58px;

    border-radius: 50%;

    background: #25d366;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 29px;

    z-index: 2000;

    box-shadow:
        0 5px 25px rgba(37, 211, 102, 0.35);

}


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

@media (max-width: 1100px) {

    .nav-menu {

        gap: 15px;

    }

    .nav-menu a {

        font-size: 10px;

    }

}


@media (max-width: 900px) {

    .nav-menu,
    .nav-icons {

        display: none;

    }


    .menu-toggle {

        display: block;

    }


    .hero {

        min-height: 650px;

    }


    .hero-feature {

        display: none;

    }


    .collection-container {

        grid-template-columns: 1fr;

    }


    .features {

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

        gap: 25px;

    }


    .feature-item {

        border-right: none;

    }


    .about-section {

        grid-template-columns: 1fr;

    }


    .cta-section {

        flex-direction: column;

        gap: 30px;

        text-align: center;

    }


    .footer-container {

        grid-template-columns:
            1fr 1fr;

    }

}


@media (max-width: 600px) {

    .nav-container {

        padding: 0 18px;

    }


    .logo-symbol {

        width: 42px;

        height: 42px;

        font-size: 14px;

    }

    .logo img {
        width: 145px;
        height: 55px;
    }


    .logo-text h2 {

        font-size: 17px;

    }


    .logo-text span {

        font-size: 7px;

    }


    .hero {

        min-height: 620px;

    }


    .hero h1 {

        font-size: 55px;

        letter-spacing: 5px;

    }


    .hero-subtitle {

        font-size: 10px;

        letter-spacing: 3px;

    }


    .hero-buttons {

        flex-direction: column;

        align-items: center;

    }


    .hero-buttons .btn {

        width: 230px;

        justify-content: center;

    }


    .features {

        grid-template-columns: 1fr;

    }


    .about-section {

        padding: 60px 25px;

    }


    .about-content h2 {

        font-size: 35px;

    }


    .footer-container {

        grid-template-columns: 1fr;

    }

}

.logo img {
    width: 190px;
    height: 72px;
    object-fit: contain;
    display: block;
    mix-blend-mode: screen;
}

/* =========================================
   GLASS DOUBLE ROW HEADER
========================================= */

.navbar {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background: rgba(1, 12, 9, 0.55);

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

    border-bottom: 1px solid rgba(218, 174, 48, 0.25);
}


/* =========================================
   TOP ROW
========================================= */

.nav-top {

    height: 80px;

    max-width: 1350px;

    margin: auto;

    padding: 0 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


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

.brand-logo {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;
}


.brand-logo img {

    width: 58px;

    height: 58px;

    object-fit: cover;

    border-radius: 50%;

    border: 2px solid #d9aa28;

    padding: 3px;

    background: #00130f;

    mix-blend-mode: screen;
}


.brand-name {

    display: flex;

    flex-direction: column;

    line-height: 1;
}


.brand-name h2 {

    margin: 0;

    font-family: "Cormorant Garamond", serif;

    font-size: 27px;

    letter-spacing: 2px;

    background: linear-gradient(90deg,
            #d9aa28,
            #f1d475,
            #00a878);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


.brand-name p {

    margin: 7px 0 0;

    font-size: 7px;

    letter-spacing: 3px;

    color: #8db7aa;
}


/* =========================================
   ICONS
========================================= */

.nav-icons {

    display: flex;

    align-items: center;

    gap: 18px;
}


.nav-icons button {

    border: none;

    background: transparent;

    color: #d6d6d1;

    font-size: 18px;

    cursor: pointer;

    position: relative;
}


.nav-icons button:hover {

    color: #e7b62f;
}


.icon-badge span {

    position: absolute;

    top: -9px;

    right: -9px;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: #e7b62f;

    color: #111;

    font-size: 9px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================
   BOTTOM ROW
========================================= */

.nav-bottom {

    height: 48px;

    border-top: 1px solid rgba(255, 255, 255, 0.04);

    display: flex;

    justify-content: center;

    align-items: center;
}


.nav-links {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 38px;

    height: 100%;
}


.nav-links a {

    position: relative;

    color: #d0d2ce;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 0.8px;

    padding: 35px 0 20px;

    transition: 0.3s;
}


.nav-links a:hover {

    color: #e7b62f;
}


.nav-links a.active {

    color: #e7b62f;
}

.nav-links a.active::after {
    content: "";

    position: absolute;

    bottom: -1px;

    left: 50%;

    transform: translateX(-50%);

    width: 28px;

    height: 2px;

    background: #e7b62f;

    box-shadow: 0 0 6px rgba(231, 182, 47, 0.35);
}

/* =========================================
   FINAL SINGLE ROW GLASS NAVBAR
========================================= */

.navbar {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    height: 76px;

    z-index: 1000;

    background: rgba(2, 10, 8, 0.48);

    backdrop-filter: blur(14px);

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

    border-bottom: 1px solid rgba(217, 166, 46, 0.25);
}


/* =========================================
   SINGLE ROW CONTAINER
========================================= */

.nav-container {

    max-width: 1500px;

    height: 100%;

    margin: auto;

    padding: 0 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


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

.brand-logo {

    display: flex;

    align-items: center;

    gap: 10px;

    width: 230px;

    text-decoration: none;

    flex-shrink: 0;
}


.brand-logo img {

    width: 58px;

    height: 58px;

    object-fit: cover;

    border-radius: 50%;

    border: 2px solid #d9a62e;

    padding: 2px;

    background: #00110d;

    mix-blend-mode: screen;
}


.brand-name {

    display: flex;

    flex-direction: column;

    line-height: 1;
}


.brand-name h2 {

    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 25px;

    letter-spacing: 2px;

    background: linear-gradient(90deg,
            #d9a62e,
            #f0c75e,
            #0f9f78);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    white-space: nowrap;
}


.brand-name p {

    margin-top: 6px;

    font-size: 7px;

    letter-spacing: 3px;

    color: #8fa9a0;

    white-space: nowrap;
}


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

.nav-links {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 28px;

    height: 100%;
}


.nav-links a {

    position: relative;

    display: flex;

    align-items: center;

    height: 100%;

    padding: 0;

    color: #dddddd;

    font-size: 12px;

    letter-spacing: 1px;

    transition: 0.3s;

    white-space: nowrap;
}


.nav-links a:hover,

.nav-links a.active {

    color: #f0c75e;
}


/* HOME GOLD LINE */

.nav-links a.active::before {
    content: "";

    position: absolute;

    left: 50%;

    bottom: 14px;

    transform: translateX(-50%);

    width: 42px;

    height: 1px;

    background: rgba(217, 166, 46, 0.35);
}

.nav-links a.active::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 14px;

    transform: translateX(-50%);

    width: 30px;

    height: 2px;

    background: #d9a62e;

    box-shadow:
        0 0 6px rgba(217, 166, 46, 0.5);
}


/* =========================================
   ICONS
========================================= */

.nav-icons {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 18px;

    width: 150px;

    flex-shrink: 0;
}


.nav-icons button {

    border: none;

    background: transparent;

    color: #dddddd;

    font-size: 18px;

    cursor: pointer;

    position: relative;

    padding: 0;
}


.nav-icons button:hover {

    color: #d9a62e;
}


.icon-badge span {

    position: absolute;

    top: -9px;

    right: -9px;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: #d9a62e;

    color: #000;

    font-size: 9px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.hero {
    margin-top: 0;
}

/* =========================================
   FINAL HOME ACTIVE LINE
========================================= */

.nav-links a.active::before {
    content: "";

    position: absolute;

    left: 50%;

    bottom: 14px;

    transform: translateX(-50%);

    width: 34px;

    height: 1px;

    background: var(--gold);
}

.nav-links a.active::after {
    content: "";

    position: absolute;

    left: 50%;

    bottom: 12px;

    transform: translateX(-50%);

    width: 5px;

    height: 5px;

    background: var(--gold);

    transform: translateX(-50%) rotate(45deg);
}

/* =========================================
   HERO - ANIME SIDE IMAGES
========================================= */

.hero {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at center,
            rgba(0, 100, 70, 0.18),
            transparent 55%),
        #00100c;
}


/* SIDE IMAGES */

.hero-side-image {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 50%;

    background-size: cover;
    background-position: center;

    z-index: 0;

    opacity: 0.75;

    filter:
        saturate(0.75) contrast(1.15) brightness(0.65);
}


/* LEFT IMAGE */

.hero-left {
    left: 0;

    background-image:
        url("../images/header-1.png");

    background-position: center left;
}


/* RIGHT IMAGE */

.hero-right {
    right: 0;

    background-image:
        url("../images/header-2.png");

    background-position: center right;
}


/* =========================================
   EMERALD + GOLD CINEMATIC OVERLAY
========================================= */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(90deg,
            rgba(0, 20, 14, 0.15),
            rgba(0, 18, 13, 0.88) 38%,
            rgba(0, 18, 13, 0.88) 62%,
            rgba(0, 20, 14, 0.15)),

        linear-gradient(180deg,
            rgba(0, 65, 45, 0.18),
            rgba(0, 10, 8, 0.55));
}


/* GOLD / EMERALD GLOW */

.hero::before {

    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    left: 50%;
    top: 45%;

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

    background:
        radial-gradient(circle,
            rgba(218, 170, 45, 0.12),
            rgba(0, 150, 100, 0.08) 35%,
            transparent 70%);

    z-index: 2;

    pointer-events: none;
}


/* HERO CONTENT ABOVE IMAGES */

.hero-content {
    position: relative;

    z-index: 3;
}

/* =========================================================
   SC ANIME - FINAL HERO + GLASS NAVBAR OVERRIDE
   Paste this entire block at the VERY BOTTOM of style.css
========================================================= */


/* =========================================================
   NAVBAR - SINGLE ROW GLASS EFFECT
========================================================= */

.navbar {
    position: absolute !important;

    top: 0;
    left: 0;

    width: 100%;

    height: 76px !important;

    z-index: 1000;

    background: rgba(1, 12, 9, 0.52) !important;

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

    border-bottom: 1px solid rgba(217, 166, 46, 0.25) !important;
}


/* =========================================================
   NAV CONTAINER
========================================================= */

.nav-container {
    width: 100% !important;

    max-width: 1500px !important;

    height: 100% !important;

    margin: 0 auto !important;

    padding: 0 30px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;
}


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

.brand-logo {
    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    width: 230px !important;

    flex-shrink: 0 !important;

    text-decoration: none !important;
}


.brand-logo img {
    width: 58px !important;

    height: 58px !important;

    object-fit: cover !important;

    border-radius: 50% !important;

    border: 2px solid #d9a62e !important;

    padding: 2px !important;

    background: #00110d !important;

    mix-blend-mode: screen !important;
}


.brand-name {
    display: flex !important;

    flex-direction: column !important;

    line-height: 1 !important;
}


.brand-name h2 {
    margin: 0 !important;

    font-family: "Cinzel", serif !important;

    font-size: 25px !important;

    font-weight: 700 !important;

    letter-spacing: 2px !important;

    background: linear-gradient(90deg,
            #d9a62e 0%,
            #f1d477 45%,
            #0fa77b 100%) !important;

    -webkit-background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    white-space: nowrap !important;
}


.brand-name p {
    margin: 6px 0 0 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 7px !important;

    font-weight: 600 !important;

    letter-spacing: 3px !important;

    color: #8fa9a0 !important;

    white-space: nowrap !important;
}


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

.nav-links {
    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 28px !important;

    height: 100% !important;

    margin: 0 !important;
}


.nav-links a {
    position: relative !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    height: 100% !important;

    padding: 0 !important;

    margin: 0 !important;

    color: #dddddd !important;

    font-size: 12px !important;

    font-weight: 500 !important;

    letter-spacing: 0.8px !important;

    white-space: nowrap !important;

    text-decoration: none !important;

    transition: color 0.3s ease !important;
}


.nav-links a:hover {
    color: #f0c75e !important;
}


.nav-links a.active {
    color: #f0c75e !important;
}


/* =========================================================
   HOME ACTIVE GOLD LINE + DIAMOND
========================================================= */

.nav-links a.active::before {
    content: "" !important;

    position: absolute !important;

    left: 50% !important;

    bottom: 25px !important;

    transform: translateX(-50%) !important;

    width: 34px !important;

    height: 1px !important;

    background: #d9a62e !important;

    opacity: 1 !important;
}


.nav-links a.active::after {
    content: "" !important;

    position: absolute !important;

    left: 50% !important;

    bottom: 24px !important;

    transform: translateX(-50%) rotate(45deg) !important;

    width: 4px !important;

    height: 4px !important;

    background: #d9a62e !important;

    box-shadow: none !important;
}


/* =========================================================
   NAV ICONS
========================================================= */

.nav-icons {
    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    gap: 18px !important;

    width: 150px !important;

    flex-shrink: 0 !important;
}


.nav-icons button {
    position: relative !important;

    padding: 0 !important;

    border: none !important;

    background: transparent !important;

    color: #dddddd !important;

    font-size: 18px !important;

    cursor: pointer !important;
}


.nav-icons button:hover {
    color: #d9a62e !important;
}


.icon-badge span {
    position: absolute !important;

    top: -9px !important;

    right: -9px !important;

    width: 16px !important;

    height: 16px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 50% !important;

    background: #d9a62e !important;

    color: #000 !important;

    font-size: 9px !important;
}

#account-name-nav {
    white-space: nowrap !important;
    font-size: 11px !important;
    margin-left: 4px;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}


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

.hero {
    position: relative !important;

    overflow: hidden !important;

    margin-top: 0 !important;

    min-height: 680px !important;

    background:
        radial-gradient(circle at center,
            rgba(0, 105, 72, 0.20),
            transparent 55%),
        #00100c !important;
}


/* =========================================================
   HERO SIDE ANIME IMAGES
========================================================= */

.hero-side-image {
    position: absolute !important;

    top: 0 !important;

    bottom: 0 !important;

    width: 50% !important;

    background-size: cover !important;

    background-repeat: no-repeat !important;

    z-index: 0 !important;

    opacity: 0.95 !important;

    filter:
        saturate(1.15) contrast(1.15) brightness(0.85) !important;
}


/* LEFT */

.hero-left {
    left: 0 !important;

    background-image:
        url("../images/header-1.png") !important;

    background-position: center left !important;
}


/* RIGHT */

.hero-right {
    right: 0 !important;

    background-image:
        url("../images/header-2.png") !important;

    background-position: center right !important;
}


/* =========================================================
   HERO DARK + EMERALD OVERLAY
========================================================= */

.hero-overlay {
    position: absolute !important;

    inset: 0 !important;

    z-index: 1 !important;

    background:
        linear-gradient(90deg,
            rgba(0, 35, 24, 0.15) 0%,
            rgba(0, 20, 14, 0.45) 35%,
            rgba(0, 15, 11, 0.62) 50%,
            rgba(0, 20, 14, 0.45) 65%,
            rgba(0, 35, 24, 0.15) 100%),

        linear-gradient(180deg,
            rgba(0, 75, 50, 0.18),
            rgba(0, 10, 7, 0.30)) !important;
}


/* =========================================================
   EMERALD + GOLD GLOW
========================================================= */

.hero::after {
    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    z-index: 2 !important;

    pointer-events: none !important;

    background:
        radial-gradient(circle at 20% 50%,
            rgba(0, 150, 100, 0.18),
            transparent 38%),

        radial-gradient(circle at 80% 50%,
            rgba(218, 170, 45, 0.12),
            transparent 38%) !important;
}


/* =========================================================
   HERO CONTENT ABOVE EVERYTHING
========================================================= */

.hero-content {
    position: relative !important;

    z-index: 3 !important;
}


/* =========================================================
   HERO SC ANIME TITLE
========================================================= */

.hero-title {
    position: relative;

    z-index: 3;
}


/* =========================================================
   HERO BUTTONS ABOVE BACKGROUND
========================================================= */

.hero-actions,
.hero .btn,
.hero button,
.hero a {
    position: relative;

    z-index: 4;
}


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

@media (max-width: 900px) {

    .navbar {
        height: 70px !important;
    }

    .nav-container {
        padding: 0 18px !important;
    }

    .brand-logo {
        width: auto !important;
    }

    .brand-logo img {
        width: 48px !important;

        height: 48px !important;
    }

    .brand-name h2 {
        font-size: 20px !important;
    }

    .brand-name p {
        font-size: 6px !important;

        letter-spacing: 2px !important;
    }

    .nav-links {
        gap: 15px !important;
    }

    .nav-links a {
        font-size: 10px !important;
    }

    .nav-icons {
        width: auto !important;

        gap: 12px !important;
    }
}


@media (max-width: 700px) {

    .nav-links {
        display: none !important;
    }

    .nav-icons {
        margin-left: auto !important;
    }

    .hero-side-image {
        width: 100% !important;

        opacity: 0.45 !important;
    }

    .hero-left {
        left: 0 !important;
    }

    .hero-right {
        display: none !important;
    }

}

/* =========================================================
   SC ANIME - FULL HERO BACKGROUND
========================================================= */

.hero {
    position: relative !important;

    overflow: hidden !important;

    margin-top: 0 !important;

    min-height: 680px !important;

    background-image:
        url("../images/header-5.png") !important;

    background-size: cover !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;
}


/* Remove old split image effect */

.hero-side-image {
    display: none !important;
}


/* =========================================================
   DARK EMERALD OVERLAY
========================================================= */

.hero-overlay {
    position: absolute !important;

    inset: 0 !important;

    z-index: 1 !important;

    background:
        linear-gradient(90deg,
            rgba(0, 20, 14, 0.18) 0%,
            rgba(0, 15, 10, 0.40) 30%,
            rgba(0, 10, 7, 0.58) 50%,
            rgba(0, 15, 10, 0.40) 70%,
            rgba(0, 20, 14, 0.18) 100%),

        linear-gradient(180deg,
            rgba(0, 50, 35, 0.15),
            rgba(0, 8, 5, 0.35)) !important;
}


/* =========================================================
   EMERALD + GOLD ATMOSPHERE
========================================================= */

.hero::after {
    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    z-index: 2 !important;

    pointer-events: none !important;

    background:
        radial-gradient(circle at 15% 45%,
            rgba(0, 160, 105, 0.15),
            transparent 35%),

        radial-gradient(circle at 85% 45%,
            rgba(220, 175, 50, 0.12),
            transparent 35%) !important;
}


/* =========================================================
   HERO CONTENT ABOVE IMAGE
========================================================= */

.hero-content {
    position: relative !important;

    z-index: 3 !important;
}

/* =====================================
   SC ANIME - FINAL HERO DESIGN
===================================== */

.hero {
    position: relative;
    min-height: 620px;

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

    overflow: hidden;

    background-image: url("../images/header-5.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    margin-top: 0;
}


/* DARK EMERALD OVERLAY */

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

    background:
        linear-gradient(90deg,
            rgba(0, 8, 6, 0.72) 0%,
            rgba(0, 20, 15, 0.38) 45%,
            rgba(0, 8, 6, 0.72) 100%);

    z-index: 1;
}


/* HERO CONTENT */

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

    width: 600px;
    max-width: 90%;

    text-align: center;

    margin: 0 auto;
}


/* SMALL TITLE */

.hero-small-title {
    margin-bottom: 18px;

    color: #d9a62e;

    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 600;

    letter-spacing: 3px;
}


/* MAIN TITLE */

.hero h1 {
    margin: 0;

    color: #f0c75e;

    font-family: "Cinzel", serif;
    font-size: clamp(55px, 7vw, 88px);
    font-weight: 700;

    line-height: 1;

    letter-spacing: 5px;

    text-shadow:
        0 3px 15px rgba(0, 0, 0, 0.8);
}

.hero h1 span {
    color: #d9a62e;
}


/* GOLD LINE */

.gold-line {
    width: 90px;
    height: 2px;

    margin: 22px auto;

    background: #d9a62e;

    box-shadow:
        0 0 10px rgba(217, 166, 46, 0.5);
}


/* COLLECT WEAR SLAY */

.hero-subtitle {
    color: #f0c75e;

    font-family: "Poppins", sans-serif;

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

    letter-spacing: 5px;

    margin-bottom: 20px;
}

.hero-subtitle span {
    color: #d9a62e;
    margin: 0 8px;
}


/* DESCRIPTION */

.hero-description {
    max-width: 520px;

    margin: 0 auto 30px;

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

    font-family: "Poppins", sans-serif;

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


/* BUTTONS */

.hero-buttons {
    display: flex;

    justify-content: center;
    gap: 14px;

    flex-wrap: wrap;
}

.hero-buttons .btn {
    min-width: 175px;

    padding: 13px 22px;

    font-family: "Poppins", sans-serif;

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

    letter-spacing: 1.5px;

    text-decoration: none;

    transition: 0.3s ease;
}


/* PRIMARY BUTTON */

.hero-buttons .btn-primary {
    background: #d9a62e;
    color: #020807;

    border: 1px solid #d9a62e;
}

.hero-buttons .btn-primary:hover {
    background: #f0c75e;
    transform: translateY(-2px);
}


/* SECONDARY BUTTON */

.hero-buttons .btn-secondary {
    background: rgba(0, 0, 0, 0.25);

    color: #f0c75e;

    border: 1px solid #d9a62e;
}

.hero-buttons .btn-secondary:hover {
    background: rgba(217, 166, 46, 0.12);

    transform: translateY(-2px);
}


/* =====================================
   HERO FEATURE BOXES
===================================== */

.hero-feature {
    position: absolute;
    bottom: 28px;

    z-index: 4;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 13px 18px;

    min-width: 215px;

    background: rgba(2, 15, 11, 0.72);

    border: 1px solid rgba(217, 166, 46, 0.45);

    backdrop-filter: blur(8px);
}

.hero-feature-left {
    left: 35px;
}

.hero-feature-right {
    right: 35px;
}

.hero-feature>i {
    color: #d9a62e;

    font-size: 22px;
}

.hero-feature div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hero-feature strong {
    color: #f0c75e;

    font-family: "Poppins", sans-serif;

    font-size: 11px;
    letter-spacing: 1px;
}

.hero-feature span {
    color: rgba(255, 255, 255, 0.65);

    font-family: "Poppins", sans-serif;

    font-size: 8px;
    letter-spacing: 1px;
}


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

@media (max-width: 768px) {

    .hero {
        min-height: 650px;

        background-position: center;
    }

    .hero-content {
        margin-top: -30px;
    }

    .hero h1 {
        font-size: 52px;
    }

    .hero-description {
        font-size: 13px;
        padding: 0 10px;
    }

    .hero-feature {
        bottom: 15px;

        min-width: auto;

        padding: 10px 12px;
    }

    .hero-feature-left {
        left: 10px;
    }

    .hero-feature-right {
        right: 10px;
    }

    .hero-feature>i {
        font-size: 17px;
    }

    .hero-feature strong {
        font-size: 9px;
    }

    .hero-feature span {
        font-size: 7px;
    }
}


@media (max-width: 500px) {

    .hero {
        min-height: 680px;
    }

    .hero-content {
        margin-top: -70px;
    }

    .hero h1 {
        font-size: 43px;
        letter-spacing: 3px;
    }

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

    .hero-buttons {
        flex-direction: column;

        align-items: center;
    }

    .hero-buttons .btn {
        width: 210px;
    }

    .hero-feature {
        bottom: 12px;
    }

    .hero-feature-left {
        left: 8px;
    }

    .hero-feature-right {
        right: 8px;
    }

}

/* =========================================
   SC ANIME HERO - IMAGE FIX
========================================= */

.hero {
    position: relative !important;

    width: 100% !important;

    /* Original image ratio = 2048 / 768 */
    aspect-ratio: 2048 / 768 !important;

    min-height: 0 !important;
    height: auto !important;

    overflow: hidden !important;

    margin-top: 0 !important;

    background-image: url("../images/header-5.png") !important;

    /* SHOW FULL IMAGE */
    background-size: 100% 100% !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;
}


/* REMOVE OLD SIDE IMAGES */

.hero-side-image {
    display: none !important;
}


/* =========================================
   LIGHT DARK OVERLAY
========================================= */

.hero-overlay {
    position: absolute !important;

    inset: 0 !important;

    z-index: 1 !important;

    background:
        linear-gradient(90deg,
            rgba(0, 8, 6, 0.18) 0%,
            rgba(0, 8, 6, 0.05) 50%,
            rgba(0, 8, 6, 0.18) 100%) !important;
}


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

.hero-content {
    position: absolute !important;

    z-index: 5 !important;

    top: 50% !important;
    left: 50% !important;

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

    width: 600px !important;
    max-width: 90% !important;

    margin: 0 !important;

    text-align: center !important;
}


/* SMALL TITLE */

.hero-small-title {
    margin: 0 0 15px !important;

    color: #f0c75e !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    letter-spacing: 3px !important;
}


/* MAIN TITLE */

.hero h1 {
    margin: 0 !important;

    color: #f0c75e !important;

    font-family: "Cinzel", serif !important;

    font-size: clamp(50px, 6vw, 82px) !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    letter-spacing: 4px !important;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.75) !important;
}

.hero h1 span {
    color: #d9a62e !important;
}


/* GOLD LINE */

.gold-line {
    width: 90px !important;

    height: 2px !important;

    margin: 20px auto !important;

    background: #d9a62e !important;

    box-shadow:
        0 0 8px rgba(217, 166, 46, 0.5) !important;
}


/* COLLECT WEAR SLAY */

.hero-subtitle {
    margin: 0 0 20px !important;

    color: #f0c75e !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    letter-spacing: 5px !important;
}

.hero-subtitle span {
    color: #d9a62e !important;

    margin: 0 8px !important;
}


/* DESCRIPTION */

.hero-description {
    max-width: 520px !important;

    margin: 0 auto 27px !important;

    color: rgba(255, 255, 255, 0.9) !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 13px !important;

    line-height: 1.7 !important;
}


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

.hero-buttons {
    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    gap: 14px !important;

    flex-wrap: wrap !important;
}

.hero-buttons .btn {
    min-width: 175px !important;

    padding: 13px 20px !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 10px !important;

    font-weight: 600 !important;

    letter-spacing: 1.4px !important;

    text-decoration: none !important;

    transition: 0.3s ease !important;
}


/* PRIMARY */

.hero-buttons .btn-primary {
    background: #d9a62e !important;

    color: #020807 !important;

    border: 1px solid #d9a62e !important;
}

.hero-buttons .btn-primary:hover {
    background: #f0c75e !important;

    transform: translateY(-2px) !important;
}


/* SECONDARY */

.hero-buttons .btn-secondary {
    background: rgba(2, 8, 7, 0.35) !important;

    color: #f0c75e !important;

    border: 1px solid #d9a62e !important;
}

.hero-buttons .btn-secondary:hover {
    background: rgba(217, 166, 46, 0.12) !important;

    transform: translateY(-2px) !important;
}


/* =========================================
   FEATURE BOXES
========================================= */

.hero-feature {
    position: absolute !important;

    bottom: 25px !important;

    z-index: 6 !important;

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    padding: 12px 17px !important;

    min-width: 215px !important;

    background: rgba(2, 10, 8, 0.78) !important;

    border: 1px solid rgba(217, 166, 46, 0.55) !important;

    backdrop-filter: blur(5px) !important;
}

.hero-feature-left {
    left: 35px !important;
}

.hero-feature-right {
    right: 35px !important;
}

.hero-feature>i {
    color: #d9a62e !important;

    font-size: 22px !important;
}

.hero-feature div {
    display: flex !important;

    flex-direction: column !important;

    gap: 3px !important;
}

.hero-feature strong {
    color: #f0c75e !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 11px !important;

    letter-spacing: 1px !important;
}

.hero-feature span {
    color: rgba(255, 255, 255, 0.7) !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 8px !important;

    letter-spacing: 1px !important;
}


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

@media (max-width: 768px) {

    .hero {
        aspect-ratio: 2048 / 900 !important;

        background-size: cover !important;

        background-position: center !important;
    }

    .hero-content {
        width: 90% !important;
    }

    .hero h1 {
        font-size: 45px !important;
    }

    .hero-description {
        font-size: 11px !important;
    }

    .hero-feature {
        min-width: auto !important;

        padding: 9px 11px !important;

        bottom: 12px !important;
    }

    .hero-feature-left {
        left: 8px !important;
    }

    .hero-feature-right {
        right: 8px !important;
    }

    .hero-feature>i {
        font-size: 17px !important;
    }

    .hero-feature strong {
        font-size: 8px !important;
    }

    .hero-feature span {
        font-size: 6px !important;
    }
}

/* =========================================
   CONTINUE HERO IMAGE BEHIND COLLECTIONS
========================================= */

.collections {
    position: relative !important;

    background-image: url("../images/header-5.png") !important;

    background-size: cover !important;

    background-position: center bottom !important;

    background-repeat: no-repeat !important;

    padding-top: 20px !important;
    padding-bottom: 20px !important;
}


/* DARK OVERLAY FOR COLLECTION AREA */

.collections::before {
    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0, 12, 9, 0.55);

    z-index: 0;
}


/* KEEP CARDS ABOVE IMAGE */

.collection-container {
    position: relative !important;

    z-index: 2 !important;
}


/* COLLECTION CARDS */

.collection-card {
    background: rgba(2, 15, 11, 0.72) !important;

    backdrop-filter: blur(3px) !important;
}

/* =========================================
   SC ANIME - IMAGE BEHIND HEADER
========================================= */


/* HEADER TRANSPARENT / GLASS */

.navbar {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;

    z-index: 100 !important;

    background:
        linear-gradient(180deg,
            rgba(0, 8, 6, 0.72),
            rgba(0, 8, 6, 0.25)) !important;

    backdrop-filter: blur(4px) !important;

    border-bottom: 1px solid rgba(217, 166, 46, 0.35) !important;
}


/* HERO STARTS BEHIND HEADER */

.hero {
    position: relative !important;

    margin-top: 0 !important;

    padding-top: 0 !important;

    width: 100% !important;

    aspect-ratio: 2048 / 768 !important;

    min-height: 0 !important;

    background-image:
        url("../images/header-5.png") !important;

    background-size: cover !important;
    background-position: center center !important;

    background-repeat: no-repeat !important;

    overflow: hidden !important;
}


/* REMOVE SIDE IMAGE ELEMENTS */

.hero-side-image {
    display: none !important;
}


/* =========================================
   MAKE ANIME IMAGE CLEAR
========================================= */

.hero-overlay {
    background:
        linear-gradient(90deg,
            rgba(0, 5, 3, 0.02) 0%,
            rgba(0, 5, 3, 0) 50%,
            rgba(0, 5, 3, 0.02) 100%) !important;
}


/* NO FILTER / NO BLUR */

.hero,
.hero::before,
.hero::after {
    filter: none !important;
}


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

.hero-content {
    position: absolute !important;

    z-index: 10 !important;

    top: 52% !important;
    left: 50% !important;

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

    width: 600px !important;

    max-width: 90% !important;

    margin: 0 !important;

    text-align: center !important;
}


/* =========================================
   FEATURE BOXES
========================================= */

.hero-feature {
    z-index: 20 !important;

    bottom: 0 !important;
}


/* =========================================
   COLLECTION IMAGE CONTINUATION
========================================= */

.collections {
    position: relative !important;

    margin-top: 0 !important;

    background-image:
        url("../images/header-5.png") !important;

    background-size: 100% auto !important;

    background-position: center bottom !important;

    background-repeat: no-repeat !important;

    padding-top: 20px !important;
}


/* DARK TRANSPARENT LAYER ONLY FOR CARDS */

.collections::before {
    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0, 10, 7, 0.42);

    z-index: 0;
}


/* CARDS ABOVE BACKGROUND */

.collection-container {
    position: relative !important;

    z-index: 2 !important;
}


/* CARDS SLIGHTLY TRANSPARENT */

.collection-card {
    background:
        rgba(0, 12, 9, 0.68) !important;

    backdrop-filter: blur(2px) !important;
}


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

@media (max-width: 768px) {

    .navbar {
        position: absolute !important;
    }

    .hero {
        aspect-ratio: 2048 / 1000 !important;

        background-size: cover !important;

        background-position: center center !important;
    }

}

/* =========================================
   HERO TEXT - IMPROVE READABILITY
========================================= */

.hero-content {
    z-index: 10 !important;
}


/* MAIN TITLE */

.hero h1 {
    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.95),
        0 0 12px rgba(0, 0, 0, 0.65) !important;
}


/* SMALL TITLE + SUBTITLE */

.hero-small-title,
.hero-subtitle {
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 0 8px rgba(0, 0, 0, 0.7) !important;
}


/* DESCRIPTION */

.hero-description {
    color: #ffffff !important;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 0 8px rgba(0, 0, 0, 0.7) !important;
}

.hero h1 {
    text-shadow:
        2px 2px 0 rgba(0, 0, 0, 0.75),
        -2px -2px 0 rgba(0, 0, 0, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.9) !important;
}

/* =========================================
   SC ANIME - GOLDEN GRADIENT SHINE
========================================= */

.hero h1 {
    background: linear-gradient(180deg,
            #fff4b0 0%,
            #f9d85c 25%,
            #d9a62e 50%,
            #f5c84c 72%,
            #9c6b12 100%) !important;

    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;

    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.85),
        0 0 8px rgba(217, 166, 46, 0.35) !important;
}

/* =========================================
   SC ANIME - BRIGHT GOLD SHINING TEXT
========================================= */

.hero h1 {
    background: linear-gradient(180deg,
            #fff8c7 0%,
            #ffe98a 20%,
            #ffd84d 40%,
            #f5bd24 60%,
            #ffd95c 78%,
            #fff1a3 100%) !important;

    background-size: 100% 100% !important;

    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;

    /* REMOVE DARK LOOK */
    text-shadow: none !important;

    /* GOLDEN GLOW */
    filter:
        drop-shadow(0 0 2px #fff0a0) drop-shadow(0 0 6px rgba(255, 210, 60, 0.9)) drop-shadow(0 0 14px rgba(255, 190, 30, 0.55)) !important;

    animation: goldGlow 2.5s ease-in-out infinite alternate !important;
}


/* GOLDEN SHINE */

@keyframes goldGlow {

    from {
        filter:
            drop-shadow(0 0 2px #fff0a0) drop-shadow(0 0 5px rgba(255, 210, 60, 0.75)) drop-shadow(0 0 10px rgba(255, 190, 30, 0.4));
    }

    to {
        filter:
            drop-shadow(0 0 3px #fff8c7) drop-shadow(0 0 9px rgba(255, 220, 80, 1)) drop-shadow(0 0 18px rgba(255, 190, 30, 0.7));
    }

}

/* =========================================
   SC ANIME - REFERENCE HERO STYLE
========================================= */

.hero-content {
    position: absolute !important;

    z-index: 10 !important;

    top: 51% !important;
    left: 50% !important;

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

    width: 620px !important;
    max-width: 90% !important;

    text-align: center !important;

    margin: 0 !important;
}


/* =========================================
   COLLECT • WEAR • SLAY
========================================= */

.hero-subtitle {
    margin: 0 0 12px !important;

    color: #fff4c2 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 13px !important;

    font-weight: 500 !important;

    letter-spacing: 5px !important;

    text-transform: uppercase !important;

    text-shadow:
        0 1px 5px rgba(0, 0, 0, .9) !important;
}

.hero-subtitle span {
    color: #e7b934 !important;

    margin: 0 7px !important;

    font-size: 7px !important;
}


/* =========================================
   SC ANIME
========================================= */

.hero h1 {
    margin: 0 !important;

    font-family: "Cinzel", serif !important;

    font-size: clamp(55px, 7vw, 82px) !important;

    font-weight: 700 !important;

    line-height: .95 !important;

    letter-spacing: 2px !important;

    /* BRIGHT GOLD */
    background: linear-gradient(180deg,
            #fff8c9 0%,
            #ffe78a 18%,
            #f6c744 38%,
            #d99b19 58%,
            #f4c94a 76%,
            #fff0a0 100%) !important;

    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;

    filter:
        drop-shadow(0 2px 2px rgba(0, 0, 0, .95)) drop-shadow(0 0 5px rgba(255, 205, 70, .75)) drop-shadow(0 0 12px rgba(220, 165, 30, .35)) !important;
}


/* =========================================
   GOLD DIVIDER
========================================= */

.gold-line {
    width: 170px !important;

    height: 2px !important;

    margin: 16px auto 13px !important;

    background: linear-gradient(90deg,
            transparent,
            #d9a62e,
            #fff0a0,
            #d9a62e,
            transparent) !important;

    box-shadow:
        0 0 8px rgba(238, 190, 50, .7) !important;
}


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

.hero-category {
    margin: 0 0 14px !important;

    color: #f5e8b1 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 13px !important;

    font-weight: 500 !important;

    letter-spacing: 3px !important;

    text-transform: uppercase !important;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, .95) !important;
}

.hero-category span {
    color: #d9a62e !important;

    padding: 0 7px !important;
}


/* =========================================
   FOR TRUE ANIME FANS
========================================= */

.fan-badge {
    display: inline-block !important;

    padding: 6px 45px !important;

    margin-bottom: 18px !important;

    color: #f0c75e !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 9px !important;

    font-weight: 600 !important;

    letter-spacing: 4px !important;

    border: 1px solid #c79625 !important;

    background: rgba(0, 12, 8, .38) !important;

    box-shadow:
        0 0 8px rgba(217, 166, 46, .18) !important;

    position: relative !important;
}


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

.hero-buttons {
    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    gap: 13px !important;

    margin: 0 !important;
}

.hero-buttons .btn {
    min-width: 138px !important;

    padding: 10px 18px !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 9px !important;

    font-weight: 600 !important;

    letter-spacing: 1.3px !important;

    border-radius: 0 !important;

    transition: .3s ease !important;
}


/* GOLD BUTTON */

.hero-buttons .btn-primary {
    color: #10100a !important;

    background: linear-gradient(180deg,
            #ffe58a,
            #d9a62e) !important;

    border: 1px solid #e7bd45 !important;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .45) !important;
}


/* OUTLINE BUTTON */

.hero-buttons .btn-secondary {
    color: #f0c75e !important;

    background: rgba(0, 0, 0, .28) !important;

    border: 1px solid #d9a62e !important;
}


/* HOVER */

.hero-buttons .btn:hover {
    transform: translateY(-2px) !important;

    box-shadow:
        0 0 12px rgba(217, 166, 46, .35) !important;
}


/* =========================================
   HIDE OLD DESCRIPTION
========================================= */

.hero-description {
    display: none !important;
}


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

@media (max-width: 600px) {

    .hero-content {
        width: 95% !important;
        top: 52% !important;
    }

    .hero h1 {
        font-size: 48px !important;
    }

    .hero-subtitle {
        font-size: 9px !important;
        letter-spacing: 3px !important;
    }

    .hero-category {
        font-size: 8px !important;
        letter-spacing: 1.5px !important;
    }

    .fan-badge {
        padding: 6px 20px !important;
        font-size: 7px !important;
    }

    .hero-buttons .btn {
        min-width: 125px !important;
        padding: 9px 12px !important;
    }
}

/* =========================================
   SC ANIME COLLECTIONS
========================================= */

.collections {
    position: relative !important;

    width: 100% !important;

    padding: 28px 25px 35px !important;

    margin: 0 !important;

    background:
        url("../images/header-5.png") center bottom / cover no-repeat !important;

    overflow: hidden !important;
}


/* DARK OVERLAY */

.collections::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(0, 8, 6, 0.48),
            rgba(0, 8, 6, 0.68));

    z-index: 0;
}


/* =========================================
   FOUR COLUMN CONTAINER
========================================= */

.collection-container {
    position: relative !important;

    z-index: 2 !important;

    width: 100% !important;

    max-width: 1400px !important;

    margin: 0 auto !important;

    display: grid !important;

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

    gap: 14px !important;
}


/* =========================================
   COLLECTION CARD
========================================= */

.collection-card {
    position: relative !important;

    min-height: 205px !important;

    display: flex !important;

    align-items: center !important;

    overflow: hidden !important;

    background:
        rgba(1, 14, 10, 0.70) !important;

    border:
        1px solid rgba(217, 166, 46, 0.70) !important;

    backdrop-filter: blur(4px) !important;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease !important;
}


/* HOVER */

.collection-card:hover {
    transform: translateY(-4px) !important;

    border-color: #f0c75e !important;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.45),
        0 0 15px rgba(217, 166, 46, 0.12) !important;
}


/* =========================================
   IMAGE LEFT
========================================= */

.collection-image {
    width: 45% !important;

    height: 100% !important;

    min-height: 205px !important;

    display: flex !important;

    align-items: flex-end !important;

    justify-content: center !important;

    overflow: hidden !important;

    flex-shrink: 0 !important;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.05),
            rgba(0, 10, 7, 0.25)) !important;
}


.collection-image img {
    width: 100% !important;

    height: 100% !important;

    object-fit: contain !important;

    object-position: center bottom !important;

    display: block !important;

    transition:
        transform 0.4s ease !important;
}


/* IMAGE ZOOM ON HOVER */

.collection-card:hover .collection-image img {
    transform: scale(1.06) !important;
}


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

.collection-content {
    width: 55% !important;

    padding:
        20px 18px !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    align-items: flex-start !important;
}


/* SMALL LABEL */

.collection-content span {
    color: #e7bd45 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 8px !important;

    font-weight: 600 !important;

    letter-spacing: 1.5px !important;

    margin-bottom: 9px !important;
}


/* TITLE */

.collection-content h2 {
    margin: 0 0 9px !important;

    color: #f0c75e !important;

    font-family: "Cinzel", serif !important;

    font-size: 20px !important;

    font-weight: 700 !important;

    line-height: 1.15 !important;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8) !important;
}


/* DESCRIPTION */

.collection-content p {
    margin: 0 0 14px !important;

    color:
        rgba(255, 255, 255, 0.75) !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 9px !important;

    line-height: 1.5 !important;
}


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

.collection-content a {
    display: inline-flex !important;

    align-items: center !important;

    gap: 7px !important;

    padding:
        8px 11px !important;

    color: #f0c75e !important;

    background:
        rgba(0, 0, 0, 0.20) !important;

    border:
        1px solid #d9a62e !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 8px !important;

    font-weight: 600 !important;

    letter-spacing: 0.8px !important;

    text-decoration: none !important;

    transition: 0.3s ease !important;
}


.collection-content a i {
    font-size: 8px !important;
}


.collection-content a:hover {
    color: #020807 !important;

    background: #d9a62e !important;

    transform: translateX(2px) !important;
}


/* =========================================
   DIFFERENT IMAGE SIZES
========================================= */

.collection-card:nth-child(1) .collection-image img {
    width: 105% !important;
}


.collection-card:nth-child(2) .collection-image img {
    width: 110% !important;
}


.collection-card:nth-child(3) .collection-image img {
    width: 105% !important;
}


.collection-card:nth-child(4) .collection-image img {
    width: 95% !important;
}


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

@media (max-width: 1100px) {

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

    .collection-card {
        min-height: 220px !important;
    }

    .collection-image {
        min-height: 220px !important;
    }

}


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

@media (max-width: 600px) {

    .collections {
        padding:
            20px 12px 25px !important;
    }

    .collection-container {
        grid-template-columns:
            1fr !important;

        gap: 12px !important;
    }

    .collection-card {
        min-height: 190px !important;
    }

    .collection-image {
        min-height: 190px !important;
    }

    .collection-content h2 {
        font-size: 19px !important;
    }

}

/* =========================================
   SC ANIME - 3 COLLECTION CARDS
========================================= */

.collections {
    position: relative !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 30px 25px !important;

    background:
        url("../images/header-5.png") center center / cover no-repeat !important;

    overflow: hidden !important;
}


/* BACKGROUND OVERLAY */

.collections::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        rgba(0, 8, 6, 0.30);

    z-index: 0;
}


/* =========================================
   3 COLUMNS
========================================= */

.collection-container {
    position: relative !important;

    z-index: 2 !important;

    width: 100% !important;

    max-width: 1350px !important;

    margin: 0 auto !important;

    display: grid !important;

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

    gap: 16px !important;
}


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

.collection-card {
    position: relative !important;

    display: flex !important;

    align-items: stretch !important;

    min-height: 255px !important;

    overflow: hidden !important;

    background:
        rgba(0, 13, 9, 0.58) !important;

    border:
        1px solid rgba(217, 166, 46, 0.75) !important;

    backdrop-filter: blur(2px) !important;

    transition: .3s ease !important;
}


/* HOVER */

.collection-card:hover {
    transform: translateY(-4px) !important;

    border-color: #f0c75e !important;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .45),
        0 0 18px rgba(217, 166, 46, .18) !important;
}


/* =========================================
   IMAGE AREA
========================================= */

.collection-image {
    width: 50% !important;

    min-width: 50% !important;

    height: 255px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    overflow: hidden !important;

    background:
        rgba(0, 0, 0, 0.08) !important;
}


/* NORMAL IMAGE */

.collection-image>img {
    width: 100% !important;

    height: 100% !important;

    object-fit: contain !important;

    object-position: center !important;

    display: block !important;

    opacity: 1 !important;

    filter:
        brightness(1.15) contrast(1.08) saturate(1.08) !important;

    transition: transform .4s ease !important;
}


/* IMAGE HOVER */

.collection-card:hover .collection-image>img {
    transform: scale(1.07) !important;
}


/* =========================================
   FIGURES + POSTERS
========================================= */

.collection-dual-image {
    width: 52% !important;

    min-width: 52% !important;

    gap: 2px !important;

    padding: 8px !important;
}


/* BOTH IMAGES */

.collection-dual-image img {
    width: 50% !important;

    height: 100% !important;

    object-fit: contain !important;

    object-position: center !important;

    opacity: 1 !important;

    filter:
        brightness(1.18) contrast(1.08) saturate(1.1) !important;
}


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

.collection-content {
    width: 48% !important;

    padding: 25px 20px !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    align-items: flex-start !important;
}


/* SMALL LABEL */

.collection-content span {
    margin-bottom: 10px !important;

    color: #f0c75e !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 9px !important;

    font-weight: 600 !important;

    letter-spacing: 1.8px !important;

    white-space: nowrap !important;
}


/* =========================================
   BIGGER TITLE
========================================= */

.collection-content h2 {
    margin: 0 0 12px !important;

    color: #f6d56b !important;

    font-family: "Cinzel", serif !important;

    font-size: 25px !important;

    font-weight: 700 !important;

    line-height: 1.15 !important;

    letter-spacing: .5px !important;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, .9) !important;
}


/* DESCRIPTION */

.collection-content p {
    margin: 0 0 18px !important;

    color: rgba(255, 255, 255, .88) !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 11px !important;

    line-height: 1.6 !important;
}


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

.collection-content a {
    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

    padding: 10px 14px !important;

    color: #f0c75e !important;

    background:
        rgba(0, 0, 0, .25) !important;

    border:
        1px solid #d9a62e !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 9px !important;

    font-weight: 600 !important;

    letter-spacing: 1px !important;

    text-decoration: none !important;

    transition: .3s ease !important;
}


.collection-content a:hover {
    color: #07100c !important;

    background: #d9a62e !important;
}


/* =========================================
   KATANA IMAGE
========================================= */

.collection-card:nth-child(2) .collection-image img {
    width: 110% !important;

    height: 110% !important;
}


/* =========================================
   T-SHIRT IMAGE
========================================= */

.collection-card:nth-child(3) .collection-image img {
    width: 105% !important;

    height: 105% !important;
}


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

@media (max-width: 1000px) {

    .collection-container {
        grid-template-columns:
            1fr !important;
    }

    .collection-card {
        min-height: 230px !important;
    }

    .collection-image {
        height: 230px !important;
    }

}


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

@media (max-width: 600px) {

    .collections {
        padding: 20px 12px !important;
    }

    .collection-card {
        min-height: 220px !important;
    }

    .collection-image {
        height: 220px !important;
    }

    .collection-content {
        padding: 18px 14px !important;
    }

    .collection-content h2 {
        font-size: 19px !important;
    }

    .collection-content p {
        font-size: 9px !important;
    }

}

/* =========================================
   SC ANIME - REFERENCE COLLECTION DESIGN
========================================= */

.collections {
    position: relative !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 16px 15px 18px !important;

    overflow: hidden !important;

    background:
        url("../images/header-5.png") center center / cover no-repeat !important;
}


/* DARK BACKGROUND OVERLAY */

.collections::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        rgba(0, 12, 8, 0.38);

    z-index: 0;
}


/* =========================================
   3 CARDS IN ONE ROW
========================================= */

.collection-container {
    position: relative !important;

    z-index: 2 !important;

    width: 100% !important;

    max-width: 1400px !important;

    margin: 0 auto !important;

    display: grid !important;

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

    gap: 8px !important;
}


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

.collection-card {
    position: relative !important;

    height: 155px !important;

    min-height: 155px !important;

    display: flex !important;

    align-items: center !important;

    overflow: hidden !important;

    background:
        linear-gradient(90deg,
            rgba(1, 16, 11, 0.86),
            rgba(0, 20, 14, 0.72)) !important;

    border: 1px solid #a87918 !important;

    border-radius: 0 !important;

    box-shadow:
        inset 0 0 0 1px rgba(217, 166, 46, .12),
        0 3px 12px rgba(0, 0, 0, .35) !important;

    transition:
        transform .3s ease,
        border-color .3s ease !important;
}


/* INNER GOLD BORDER */

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

    position: absolute;

    inset: 4px;

    border: 1px solid rgba(217, 166, 46, .28);

    pointer-events: none;

    z-index: 5;
}


/* CORNER DECORATION */

.collection-card::after {
    content: "◆";

    position: absolute;

    top: 3px;

    left: 8px;

    color: #d9a62e;

    font-size: 7px;

    z-index: 6;
}


/* HOVER */

.collection-card:hover {
    transform: translateY(-2px) !important;

    border-color: #f0c75e !important;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .5),
        0 0 12px rgba(217, 166, 46, .16) !important;
}


/* =========================================
   IMAGE LEFT
========================================= */

.collection-image {
    position: relative !important;

    width: 43% !important;

    height: 100% !important;

    min-width: 43% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    overflow: hidden !important;

    padding: 3px !important;
}


/* IMAGE */

.collection-image img {
    width: 100% !important;

    height: 100% !important;

    object-fit: contain !important;

    object-position: center !important;

    display: block !important;

    opacity: 1 !important;

    filter:
        brightness(1.12) contrast(1.08) saturate(1.08) !important;

    transition:
        transform .35s ease !important;
}


/* HOVER IMAGE */

.collection-card:hover .collection-image img {
    transform: scale(1.05) !important;
}


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

.collection-content {
    position: relative !important;

    width: 57% !important;

    height: 100% !important;

    padding:
        12px 14px 10px 5px !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    align-items: flex-start !important;

    z-index: 4 !important;
}


/* SMALL LABEL */

.collection-content span {
    margin: 0 0 5px !important;

    color: #d9a62e !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 7px !important;

    font-weight: 600 !important;

    letter-spacing: 1.2px !important;

    line-height: 1.2 !important;
}


/* TITLE */

.collection-content h2 {
    margin: 0 0 5px !important;

    color: #f1ca59 !important;

    font-family: "Cinzel", serif !important;

    font-size: 21px !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    letter-spacing: .3px !important;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, .9) !important;
}


/* DESCRIPTION */

.collection-content p {
    margin: 0 0 8px !important;

    color: rgba(255, 255, 255, .78) !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 8px !important;

    line-height: 1.35 !important;
}


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

.collection-content a {
    display: inline-flex !important;

    align-items: center !important;

    gap: 5px !important;

    padding: 6px 9px !important;

    color: #e8bd42 !important;

    background:
        rgba(0, 0, 0, .22) !important;

    border: 1px solid #bd8b1d !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 7px !important;

    font-weight: 600 !important;

    letter-spacing: .8px !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    transition: .3s ease !important;
}


.collection-content a i {
    font-size: 7px !important;
}


.collection-content a:hover {
    color: #111 !important;

    background: #d9a62e !important;

    border-color: #f0c75e !important;
}


/* =========================================
   INDIVIDUAL IMAGE ADJUSTMENTS
========================================= */


/* ANIME TOYS */

.collection-card:nth-child(1) .collection-image img {
    width: 108% !important;

    height: 108% !important;

    object-position: center center !important;
}


/* T-SHIRTS */

.collection-card:nth-child(2) .collection-image img {
    width: 112% !important;

    height: 112% !important;

    object-position: center center !important;
}


/* KATANAS */

.collection-card:nth-child(3) .collection-image img {
    width: 115% !important;

    height: 115% !important;

    object-position: center center !important;
}

@media (max-width: 850px) {

    .collection-container {
        grid-template-columns: 1fr !important;

        gap: 10px !important;
    }

    .collection-card {
        height: 140px !important;

        min-height: 140px !important;
    }

    .collection-image {
        width: 42% !important;

        min-width: 42% !important;
    }

    .collection-content {
        width: 58% !important;
    }

    .collection-content h2 {
        font-size: 22px !important;
    }

}

/* =========================================
   COLLECTION IMAGES - BRIGHT & CLEAR
========================================= */

/* Image area should stay above dark overlays */
.collection-image {
    position: relative !important;

    z-index: 3 !important;

    background: transparent !important;

    opacity: 1 !important;
}


/* Actual product image */
.collection-image img {
    position: relative !important;

    z-index: 4 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    opacity: 1 !important;

    /* CLEAR IMAGE */
    filter:
        brightness(1.9) contrast(1.20) saturate(1.20) !important;

    mix-blend-mode: normal !important;
}


/* =========================================
   INDIVIDUAL IMAGE CLARITY
========================================= */

/* ANIME TOYS */

.collection-card:nth-child(1) .collection-image img {
    filter:
        brightness(2.05) contrast(1.20) saturate(1.25) !important;
}


/* ANIME T-SHIRTS */

.collection-card:nth-child(2) .collection-image img {
    filter:
        brightness(1.85) contrast(1.18) saturate(1.22) !important;
}


/* KATANAS */

.collection-card:nth-child(3) .collection-image img {
    filter:
        brightness(2.00) contrast(1.20) saturate(1.20) !important;
}


/* =========================================
   REMOVE ANY OLD IMAGE DARK OVERLAY
========================================= */

.collection-image::before,
.collection-image::after {
    display: none !important;

    content: none !important;
}


/* =========================================
   CARD BACKGROUND ONLY
========================================= */

.collection-card {
    background:
        rgba(0, 12, 8, 0.42) !important;

    overflow: hidden !important;
}

/* =========================================
   COLLECTION CARDS - CLEAR IMAGES
========================================= */

/* Card */
.collection-card {
    position: relative !important;
    overflow: hidden !important;
    background: #03120d !important;
}


/* IMAGE AREA */
.collection-image {
    position: relative !important;
    z-index: 1 !important;

    width: 52% !important;
    height: 100% !important;

    overflow: hidden !important;

    background: transparent !important;
}


/* ACTUAL IMAGE - FULL CLEAR */
.collection-image img,
.collection-card>img {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;

    opacity: 1 !important;

    filter:
        brightness(1.8) contrast(1.25) saturate(1.25) !important;

    mix-blend-mode: normal !important;

    z-index: 2 !important;
}


/* REMOVE OLD DARK IMAGE OVERLAY */
.collection-card::after {
    content: "◆" !important;

    background: none !important;

    opacity: 1 !important;
}


/* TEXT ABOVE IMAGE */
.collection-content {
    position: relative !important;
    z-index: 4 !important;

    width: 48% !important;
}


/* =========================================
   INDIVIDUAL IMAGES
========================================= */

.collection-card:nth-child(1) .collection-image img {
    filter:
        brightness(1.9) contrast(1.25) saturate(1.3) !important;
}


.collection-card:nth-child(2) .collection-image img {
    filter:
        brightness(1.75) contrast(1.2) saturate(1.25) !important;
}


.collection-card:nth-child(3) .collection-image img {
    filter:
        brightness(1.9) contrast(1.25) saturate(1.25) !important;
}

/* FINAL COLLECTION IMAGE BALANCE */

.collection-card:nth-child(1) .collection-image img {
    filter:
        brightness(1.35) contrast(1.15) saturate(1.15) !important;
}

.collection-card:nth-child(2) .collection-image img {
    filter:
        brightness(1.30) contrast(1.15) saturate(1.15) !important;
}

.collection-card:nth-child(3) .collection-image img {
    filter:
        brightness(1.35) contrast(1.15) saturate(1.15) !important;
}

/* =========================================
   FINAL COLLECTION CARD TUNING
========================================= */

/* CARD */
.collection-card {
    height: 155px !important;
    min-height: 155px !important;
}

/* IMAGE AREA */
.collection-image {
    width: 45% !important;
    min-width: 45% !important;
    height: 100% !important;
    padding: 6px !important;
}

/* IMAGE - FIT INSIDE BOX */
.collection-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: scale(0.92) !important;
}

/* INDIVIDUAL IMAGE SIZE */
.collection-card:nth-child(1) .collection-image img {
    transform: scale(0.88) !important;
}

.collection-card:nth-child(2) .collection-image img {
    transform: scale(0.90) !important;
}

.collection-card:nth-child(3) .collection-image img {
    transform: scale(0.92) !important;
}


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

.collection-content {
    width: 55% !important;
    padding: 18px 20px !important;
}

/* Small label */
.collection-content span {
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 7px !important;
}

/* Main title */
.collection-content h2 {
    font-size: 27px !important;
    line-height: 1.05 !important;
    margin-bottom: 8px !important;
}

/* Description */
.collection-content p {
    font-size: 11px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
}

/* Button */
.collection-content a {
    font-size: 9px !important;
    padding: 8px 13px !important;
}

/* =========================================
   FINAL COLLECTION ALIGNMENT
========================================= */

/* Give text more space */
.collection-image {
    width: 42% !important;
    min-width: 42% !important;
}

.collection-content {
    width: 58% !important;
    padding: 16px 18px !important;
}


/* Keep images neatly inside the box */
.collection-card:nth-child(1) .collection-image img {
    transform: scale(0.84) !important;
}

.collection-card:nth-child(2) .collection-image img {
    transform: scale(0.86) !important;
}

.collection-card:nth-child(3) .collection-image img {
    transform: scale(0.88) !important;
}


/* Main titles */
.collection-content h2 {
    font-size: 25px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
}


/* Labels */
.collection-content span {
    font-size: 9px !important;
    letter-spacing: 1.2px !important;
}


/* Description */
.collection-content p {
    font-size: 10px !important;
}

/* =========================================
   ABOUT SECTION - ANIME BACKGROUND
========================================= */

.about-section {
    position: relative !important;
    overflow: hidden !important;

    background:
        linear-gradient(rgba(0, 10, 7, 0.78),
            rgba(0, 10, 7, 0.88)),
        url("../images/header-4.png") !important;

    background-size: cover !important;

    background-position: center !important;

    background-repeat: no-repeat !important;
}


/* Keep content above background */

.about-section .about-image,
.about-section .about-content {
    position: relative !important;
    z-index: 2 !important;
}


/* Image border */

.about-section .about-image {
    border-color: #d9a62e !important;
}


/* Make section image stand out */

.about-section .about-image img {
    position: relative !important;
    z-index: 3 !important;
}

/* =========================================================
   SC ANIME — PRODUCTS PAGE NEW DESIGN
   Matches the new INDEX / HOME design
========================================================= */


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

.shop-hero {
    position: relative;
    min-height: 360px;

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

    text-align: center;

    padding: 100px 20px 70px;

    background:
        radial-gradient(circle at center,
            rgba(11, 92, 68, 0.32),
            transparent 60%),
        linear-gradient(180deg,
            #020807 0%,
            #03120e 55%,
            #020807 100%);

    border-bottom: 1px solid rgba(218, 169, 58, 0.25);

    overflow: hidden;
}


.shop-hero::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    top: -350px;
    left: 50%;

    transform: translateX(-50%);

    background: rgba(10, 112, 80, 0.12);

    filter: blur(90px);

    border-radius: 50%;

    pointer-events: none;
}


.shop-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.45),
            transparent,
            rgba(0, 0, 0, 0.45));

    pointer-events: none;
}


.shop-hero-content {
    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: auto;
}


.shop-hero-subtitle {
    margin: 0 0 18px;

    color: #e4bd59;

    font-family: "Cinzel", serif;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 5px;

    text-transform: uppercase;
}


.shop-hero-subtitle span {
    color: #f1d27a;

    margin: 0 8px;

    font-size: 10px;
}


.shop-hero h1 {
    margin: 0;

    font-family: "Cinzel", serif;

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

    font-weight: 700;

    line-height: 1;

    letter-spacing: 3px;

    color: transparent;

    background:
        linear-gradient(180deg,
            #fff0a3 0%,
            #f0c75e 30%,
            #d9a62e 65%,
            #9a6a12 100%);

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

    text-shadow:
        0 0 12px rgba(240, 199, 94, 0.25),
        0 4px 15px rgba(0, 0, 0, 0.9);
}


.shop-hero h1 span {
    display: block;

    font-size: 0.55em;

    margin-top: 12px;

    letter-spacing: 7px;
}


.shop-hero .gold-line {
    width: 100px;

    height: 2px;

    margin: 25px auto;

    background:
        linear-gradient(90deg,
            transparent,
            #d9a62e,
            #fff0a3,
            #d9a62e,
            transparent);

    box-shadow:
        0 0 10px rgba(218, 169, 58, 0.4);
}


.shop-hero-description {
    max-width: 650px;

    margin: auto;

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

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.8;

    letter-spacing: 0.5px;
}



/* =========================================================
   SHOP SECTION
========================================================= */

.shop-section {
    position: relative;

    padding: 80px 5% 90px;

    background:
        linear-gradient(180deg,
            #020807 0%,
            #031510 50%,
            #020807 100%);
}


.shop-section-heading {
    text-align: center;

    margin-bottom: 45px;
}


.shop-section-heading>p {
    margin: 0 0 10px;

    color: #d9a62e;

    font-family: "Cinzel", serif;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 4px;
}


.shop-section-heading h2 {
    margin: 0;

    font-family: "Cinzel", serif;

    font-size: clamp(28px, 4vw, 42px);

    font-weight: 700;

    letter-spacing: 2px;

    color: #f5f1df;
}


.shop-section-heading h2 span {
    color: transparent;

    background:
        linear-gradient(180deg,
            #fff0a3,
            #d9a62e);

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


.shop-section-heading .gold-line {
    width: 80px;

    height: 2px;

    margin: 18px auto 0;

    background:
        linear-gradient(90deg,
            transparent,
            #d9a62e,
            transparent);
}



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

.shop-search {
    position: relative;

    max-width: 650px;

    margin: 0 auto 30px;
}


.shop-search i {
    position: absolute;

    left: 20px;

    top: 50%;

    transform: translateY(-50%);

    color: #d9a62e;

    font-size: 15px;
}


.shop-search input {
    width: 100%;

    height: 52px;

    padding: 0 20px 0 52px;

    border: 1px solid rgba(218, 169, 58, 0.35);

    border-radius: 30px;

    outline: none;

    background:
        rgba(5, 28, 22, 0.85);

    color: #ffffff;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    transition: 0.3s ease;

    box-sizing: border-box;
}


.shop-search input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}


.shop-search input:focus {
    border-color: #d9a62e;

    box-shadow:
        0 0 0 3px rgba(218, 169, 58, 0.08),
        0 0 20px rgba(218, 169, 58, 0.08);
}



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

.product-filters {
    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 50px;
}


.product-filters .filter-btn {
    min-width: 120px;

    padding: 11px 24px;

    border: 1px solid rgba(218, 169, 58, 0.35);

    border-radius: 30px;

    background:
        rgba(5, 28, 22, 0.8);

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

    font-family: "Poppins", sans-serif;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1px;

    cursor: pointer;

    transition: all 0.3s ease;
}


.product-filters .filter-btn:hover {
    color: #f5d879;

    border-color: #d9a62e;

    transform: translateY(-2px);

    box-shadow:
        0 5px 20px rgba(218, 169, 58, 0.1);
}


.product-filters .filter-btn.active {
    color: #07120f;

    background:
        linear-gradient(135deg,
            #fff0a3,
            #d9a62e);

    border-color: #e7c65b;

    box-shadow:
        0 5px 20px rgba(218, 169, 58, 0.18);
}



/* =========================================================
   PRODUCT GRID
========================================================= */

.shop-product-grid {
    width: 100%;

    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 28px;
}



/* =========================================================
   PRODUCT CARD
========================================================= */

.shop-product-card {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(145deg,
            rgba(8, 43, 33, 0.92),
            rgba(2, 15, 12, 0.96));

    border: 1px solid rgba(218, 169, 58, 0.28);

    border-radius: 14px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.35);

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


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

    border-color: rgba(218, 169, 58, 0.75);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5),
        0 0 25px rgba(218, 169, 58, 0.08);
}


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

    position: absolute;

    top: 0;
    left: 15%;

    width: 70%;
    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 231, 145, 0.8),
            transparent);

    z-index: 3;
}



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

.shop-product-image {
    position: relative;

    height: 300px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 18px;

    background:
        radial-gradient(circle at center,
            rgba(18, 104, 76, 0.3),
            rgba(2, 12, 10, 0.9) 72%);

    overflow: hidden;
}


.shop-product-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.04),
            transparent 40%);

    pointer-events: none;
}


.shop-product-image img {
    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center;

    display: block;

    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}


.shop-product-card:hover .shop-product-image img {
    transform: scale(1.06);

    filter:
        brightness(1.08) contrast(1.05) saturate(1.08);
}



/* =========================================================
   PRODUCT TAG
========================================================= */

.product-tag {
    position: absolute;

    top: 16px;

    left: 16px;

    z-index: 4;

    padding: 6px 12px;

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

    border-radius: 20px;

    background:
        rgba(4, 20, 16, 0.9);

    color: #f1cd62;

    font-family: "Poppins", sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;
}



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

.quick-wishlist {
    position: absolute;

    top: 15px;

    right: 15px;

    z-index: 4;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(218, 169, 58, 0.35);

    border-radius: 50%;

    background:
        rgba(2, 15, 12, 0.85);

    color: #e8c75e;

    cursor: pointer;

    transition: 0.3s ease;
}


.quick-wishlist:hover {
    color: #07120f;

    background:
        linear-gradient(135deg,
            #fff0a3,
            #d9a62e);

    border-color: #d9a62e;

    transform: scale(1.08);
}



/* =========================================================
   PRODUCT INFORMATION
========================================================= */

.shop-product-info {
    padding: 25px 24px 24px;
}


.product-category {
    margin: 0 0 8px;

    color: #d9a62e;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}


.shop-product-info h3 {
    margin: 0;

    color: #ffffff;

    font-family: "Cinzel", serif;

    font-size: 20px;

    font-weight: 600;

    line-height: 1.35;
}


.shop-product-description {
    min-height: 48px;

    margin: 12px 0 20px;

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

    font-family: "Poppins", sans-serif;

    font-size: 12px;

    line-height: 1.7;
}



/* =========================================================
   PRICE + VIEW
========================================================= */

.shop-product-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding-top: 17px;

    margin-bottom: 15px;

    border-top:
        1px solid rgba(218, 169, 58, 0.16);
}


.shop-product-bottom strong {
    color: #f0cc62;

    font-family: "Cinzel", serif;

    font-size: 22px;

    font-weight: 700;

    white-space: nowrap;
}


.view-product-btn {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #e4c35d;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    text-decoration: none;

    transition: 0.3s ease;
}


.view-product-btn:hover {
    color: #fff0a3;

    gap: 11px;
}



/* =========================================================
   ADD TO CART
========================================================= */

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

    min-height: 45px;

    border: 1px solid #d9a62e;

    border-radius: 6px;

    background:
        linear-gradient(135deg,
            #f4d778,
            #c79425);

    color: #07120f;

    font-family: "Poppins", sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.2px;

    cursor: pointer;

    transition: all 0.3s ease;
}


.add-product-btn i {
    margin-right: 7px;
}


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

    background:
        linear-gradient(135deg,
            #fff0a3,
            #d9a62e);

    box-shadow:
        0 8px 25px rgba(218, 169, 58, 0.18);
}



/* =========================================================
   ADD TO SHELF
========================================================= */

.add-shelf-btn {
    width: 100%;

    margin-top: 10px;

    padding: 10px;

    border: 1px solid rgba(218, 169, 58, 0.25);

    border-radius: 6px;

    background:
        transparent;

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

    font-family: "Poppins", sans-serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1px;

    cursor: pointer;

    transition: all 0.3s ease;
}


.add-shelf-btn i {
    margin-right: 6px;
}


.add-shelf-btn:hover {
    color: #e8c75e;

    border-color: #d9a62e;

    background:
        rgba(218, 169, 58, 0.05);
}



/* =========================================================
   EMPTY / HIDDEN PRODUCTS
========================================================= */

.shop-product-card[style*="display: none"] {
    display: none !important;
}



/* =========================================================
   CTA — BLACK BACKGROUND
========================================================= */

.cta-section {
    background:
        #020807 !important;

    border-top:
        1px solid rgba(218, 169, 58, 0.16);

    border-bottom:
        1px solid rgba(218, 169, 58, 0.16);
}



/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1000px) {

    .shop-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px;
    }


    .shop-product-image {
        height: 280px;
    }


    .shop-section {
        padding-left: 4%;
        padding-right: 4%;
    }

}



/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 700px) {

    .shop-hero {
        min-height: 320px;

        padding:
            90px 20px 55px;
    }


    .shop-hero-subtitle {
        font-size: 11px;

        letter-spacing: 3px;
    }


    .shop-hero h1 {
        font-size: 48px;

        letter-spacing: 1px;
    }


    .shop-hero h1 span {
        font-size: 0.48em;

        letter-spacing: 4px;
    }


    .shop-hero-description {
        font-size: 13px;

        line-height: 1.7;
    }


    .shop-section {
        padding:
            60px 18px 70px;
    }


    .shop-section-heading {
        margin-bottom: 32px;
    }


    .shop-section-heading h2 {
        font-size: 28px;
    }


    .shop-search {
        margin-bottom: 22px;
    }


    .shop-search input {
        height: 48px;

        font-size: 12px;
    }


    .product-filters {
        gap: 8px;

        margin-bottom: 35px;
    }


    .product-filters .filter-btn {
        min-width: auto;

        padding:
            9px 15px;

        font-size: 10px;
    }


    .shop-product-grid {
        grid-template-columns:
            1fr;

        gap: 22px;
    }


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


    .shop-product-info {
        padding:
            22px 20px 20px;
    }


    .shop-product-info h3 {
        font-size: 19px;
    }


    .shop-product-bottom strong {
        font-size: 20px;
    }

}



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

@media (max-width: 420px) {

    .shop-hero h1 {
        font-size: 40px;
    }


    .shop-hero h1 span {
        letter-spacing: 3px;
    }


    .shop-product-image {
        height: 280px;
    }


    .shop-product-bottom {
        align-items: flex-start;
    }


    .shop-product-bottom strong {
        font-size: 18px;
    }


    .view-product-btn {
        font-size: 9px;
    }

}

/* =========================================================
   PRODUCTS PAGE — FINAL CARD SIZE
========================================================= */

.shop-section {
    padding-top: 55px !important;
    padding-bottom: 70px !important;
}


/* STORE TITLE */

.shop-section-heading>p {
    font-size: 16px !important;

    letter-spacing: 5px !important;

    margin-bottom: 12px !important;
}


.shop-section-heading h2 {
    font-size: 38px !important;

    letter-spacing: 2px !important;
}


/* FULL GOLD LINE */

.collection-gold-line {
    width: 100% !important;

    height: 2px !important;

    margin: 22px 0 38px !important;

    background:
        linear-gradient(90deg,
            transparent 0%,
            #9a6a12 8%,
            #d9a62e 25%,
            #fff0a3 50%,
            #d9a62e 75%,
            #9a6a12 92%,
            transparent 100%) !important;

    box-shadow:
        0 0 10px rgba(218, 169, 58, 0.35) !important;
}


/* FILTERS */

.product-filters {
    margin-bottom: 35px !important;

    gap: 10px !important;
}


.product-filters .filter-btn {
    min-width: 115px !important;

    padding: 10px 20px !important;
}


/* PRODUCT GRID */

.shop-product-grid {
    max-width: 1180px !important;

    gap: 20px !important;
}


/* SMALLER CARD */

.shop-product-card {
    border-radius: 11px !important;
}


/* SMALLER IMAGE AREA */

.shop-product-image {
    height: 220px !important;

    padding: 14px !important;
}


/* PRODUCT IMAGE */

.shop-product-image img {
    max-height: 100% !important;

    object-fit: contain !important;
}


/* SMALLER CONTENT */

.shop-product-info {
    padding: 17px 18px 17px !important;
}


.product-category {
    margin-bottom: 6px !important;

    font-size: 9px !important;
}


.shop-product-info h3 {
    font-size: 17px !important;

    line-height: 1.3 !important;
}


.shop-product-description {
    min-height: 38px !important;

    margin: 8px 0 14px !important;

    font-size: 11px !important;

    line-height: 1.55 !important;
}


/* PRICE */

.shop-product-bottom {
    padding-top: 12px !important;

    margin-bottom: 11px !important;
}


.shop-product-bottom strong {
    font-size: 19px !important;
}


/* VIEW */

.view-product-btn {
    font-size: 9px !important;
}


/* BUTTON */

.add-product-btn {
    min-height: 40px !important;

    font-size: 10px !important;
}


/* SHELF */

.add-shelf-btn {
    margin-top: 7px !important;

    padding: 8px !important;

    font-size: 9px !important;
}

/* =========================================================
   SC ANIME PRODUCTS — COMPACT PRODUCT CARDS
========================================================= */

.shop-product-grid {
    max-width: 1120px !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 18px !important;
}


/* CARD */

.shop-product-card {
    border-radius: 10px !important;

    overflow: hidden !important;

    min-width: 0 !important;
}


/* IMAGE AREA */

.shop-product-image {
    height: 185px !important;

    padding: 10px !important;

    background:
        radial-gradient(circle at center,
            rgba(18, 104, 76, 0.25),
            rgba(2, 12, 10, 0.95) 72%) !important;
}


/* PRODUCT IMAGE */

.shop-product-image img {
    width: 100% !important;

    height: 100% !important;

    object-fit: contain !important;

    object-position: center !important;
}


/* TAG */

.product-tag {
    top: 12px !important;

    left: 12px !important;

    padding: 5px 10px !important;

    font-size: 8px !important;
}


/* HEART */

.quick-wishlist {
    top: 11px !important;

    right: 11px !important;

    width: 34px !important;

    height: 34px !important;

    font-size: 12px !important;
}


/* CONTENT */

.shop-product-info {
    padding: 15px 16px 15px !important;
}


/* CATEGORY */

.product-category {
    margin-bottom: 5px !important;

    font-size: 8px !important;

    letter-spacing: 1.8px !important;
}


/* TITLE */

.shop-product-info h3 {
    font-size: 16px !important;

    line-height: 1.25 !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
}


/* DESCRIPTION */

.shop-product-description {
    min-height: 34px !important;

    margin: 7px 0 12px !important;

    font-size: 10px !important;

    line-height: 1.5 !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 2 !important;

    -webkit-box-orient: vertical !important;

    overflow: hidden !important;
}


/* PRICE + VIEW */

.shop-product-bottom {
    padding-top: 10px !important;

    margin-bottom: 10px !important;
}


.shop-product-bottom strong {
    font-size: 18px !important;
}


.view-product-btn {
    font-size: 8px !important;

    letter-spacing: 1px !important;
}


/* ADD TO CART */

.add-product-btn {
    min-height: 37px !important;

    padding: 8px !important;

    font-size: 9px !important;

    letter-spacing: 1px !important;
}


/* ADD TO SHELF */

.add-shelf-btn {
    margin-top: 6px !important;

    padding: 7px !important;

    font-size: 8px !important;
}


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

@media (max-width: 900px) {

    .shop-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        max-width: 760px !important;
    }

}


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

@media (max-width: 600px) {

    .shop-product-grid {
        grid-template-columns: 1fr !important;

        max-width: 390px !important;

        gap: 18px !important;
    }


    .shop-product-image {
        height: 220px !important;
    }


    .shop-product-info h3 {
        font-size: 17px !important;
    }

}

/* =========================================================
   SC ANIME — SERVICES PAGE NEW DESIGN
========================================================= */


/* HERO */

.services-new-hero {
    position: relative;

    min-height: 330px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 90px 20px 65px;

    background:
        radial-gradient(circle at center,
            rgba(8, 95, 69, 0.28),
            transparent 62%),
        linear-gradient(180deg,
            #020807,
            #03130f 55%,
            #020807);

    border-bottom:
        1px solid rgba(218, 169, 58, 0.22);

    overflow: hidden;
}


.services-new-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.4),
            transparent,
            rgba(0, 0, 0, 0.4));
}


.services-new-content {
    position: relative;

    z-index: 2;

    max-width: 800px;
}


.services-eyebrow {
    margin: 0 0 16px;

    color: #d9a62e;

    font-family: "Cinzel", serif;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 5px;
}


.services-new-content h1 {
    margin: 0;

    color: transparent;

    background:
        linear-gradient(180deg,
            #fff0a3,
            #f0c75e 35%,
            #d9a62e 65%,
            #9a6a12);

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

    font-family: "Cinzel", serif;

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

    font-weight: 700;

    line-height: 1;

    letter-spacing: 2px;

    text-shadow:
        0 0 12px rgba(240, 199, 94, 0.25),
        0 4px 15px rgba(0, 0, 0, 0.8);
}


.services-new-content h1 span {
    display: block;

    margin-top: 8px;

    font-size: 0.62em;

    letter-spacing: 5px;
}


.services-gold-line {
    width: 100px;

    height: 2px;

    margin: 23px auto;

    background:
        linear-gradient(90deg,
            transparent,
            #d9a62e,
            #fff0a3,
            #d9a62e,
            transparent);

    box-shadow:
        0 0 10px rgba(218, 169, 58, 0.4);
}


.services-hero-text {
    max-width: 620px;

    margin: auto;

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

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    line-height: 1.8;
}



/* =========================================================
   SERVICES SECTION
========================================================= */

.services-new-section {
    padding: 75px 5% 85px;

    background:
        linear-gradient(180deg,
            #020807,
            #031510 50%,
            #020807);
}


.services-new-heading {
    max-width: 750px;

    margin: 0 auto 45px;

    text-align: center;
}


.services-new-heading>p:first-child {
    margin: 0 0 10px;

    color: #d9a62e;

    font-family: "Cinzel", serif;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 4px;
}


.services-new-heading h2 {
    margin: 0;

    color: #f4f1df;

    font-family: "Cinzel", serif;

    font-size: clamp(30px, 4vw, 43px);

    font-weight: 700;

    letter-spacing: 2px;
}


.services-new-heading h2 span {
    color: transparent;

    background:
        linear-gradient(180deg,
            #fff0a3,
            #d9a62e);

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


.services-small-line {
    width: 80px;

    height: 2px;

    margin: 18px auto;

    background:
        linear-gradient(90deg,
            transparent,
            #d9a62e,
            transparent);
}


.services-heading-description {
    max-width: 600px;

    margin: auto;

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

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    line-height: 1.7;
}



/* =========================================================
   SERVICE GRID
========================================================= */

.services-new-grid {
    max-width: 1150px;

    margin: auto;

    display: grid;

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

    gap: 18px;
}



/* SERVICE CARD */

.services-new-card {
    position: relative;

    min-height: 310px;

    padding: 24px 21px 22px;

    background:
        linear-gradient(145deg,
            rgba(8, 43, 33, 0.9),
            rgba(2, 15, 12, 0.96));

    border:
        1px solid rgba(218, 169, 58, 0.28);

    border-radius: 11px;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.3);

    overflow: hidden;

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


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

    border-color:
        rgba(218, 169, 58, 0.72);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.45),
        0 0 25px rgba(218, 169, 58, 0.07);
}


.services-new-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 15%;

    width: 70%;

    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            #e5c55e,
            transparent);
}



/* CARD TOP */

.service-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;
}


.service-number {
    color: rgba(217, 166, 46, 0.55);

    font-family: "Cinzel", serif;

    font-size: 13px;

    letter-spacing: 2px;
}


.service-card-top i {
    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(218, 169, 58, 0.35);

    border-radius: 50%;

    color: #e5c55e;

    font-size: 15px;

    background:
        rgba(218, 169, 58, 0.04);
}



/* LABEL */

.services-new-card .service-label {
    margin: 0 0 8px;

    color: #d9a62e;

    font-family: "Poppins", sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;
}



/* TITLE */

.services-new-card h3 {
    margin: 0;

    color: #ffffff;

    font-family: "Cinzel", serif;

    font-size: 19px;

    line-height: 1.35;
}



/* DESCRIPTION */

.services-new-card .service-description {
    min-height: 90px;

    margin: 13px 0 20px;

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

    font-family: "Poppins", sans-serif;

    font-size: 11px;

    line-height: 1.7;
}



/* LINK */

.services-new-card .service-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #e4c35d;

    font-family: "Poppins", sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    text-decoration: none;

    transition: 0.3s ease;
}


.services-new-card .service-link i {
    font-size: 9px;
}


.services-new-card .service-link:hover {
    color: #fff0a3;

    gap: 12px;
}



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

.services-new-cta {
    max-width: 1150px;

    margin: 0 auto 70px;

    padding: 42px 45px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    background:
        linear-gradient(135deg,
            rgba(7, 40, 31, 0.95),
            rgba(2, 13, 11, 0.98));

    border:
        1px solid rgba(218, 169, 58, 0.32);

    border-radius: 12px;

    box-sizing: border-box;
}


.services-cta-content>p:first-child {
    margin: 0 0 8px;

    color: #d9a62e;

    font-family: "Cinzel", serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;
}


.services-cta-content h2 {
    margin: 0;

    color: #f5f1df;

    font-family: "Cinzel", serif;

    font-size: 28px;

    line-height: 1.25;
}


.services-cta-content h2 span {
    color: transparent;

    background:
        linear-gradient(180deg,
            #fff0a3,
            #d9a62e);

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


.cta-description {
    margin: 10px 0 0;

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

    font-family: "Poppins", sans-serif;

    font-size: 11px;
}


.services-new-btn {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 13px 24px;

    border-radius: 5px;

    background:
        linear-gradient(135deg,
            #f4d778,
            #c79425);

    color: #07120f;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    text-decoration: none;

    white-space: nowrap;

    transition: 0.3s ease;
}


.services-new-btn:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(135deg,
            #fff0a3,
            #d9a62e);

    box-shadow:
        0 8px 25px rgba(218, 169, 58, 0.18);
}



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

@media (max-width: 1000px) {

    .services-new-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        max-width: 760px;
    }


    .services-new-card {
        min-height: 290px;
    }

}



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

@media (max-width: 700px) {

    .services-new-hero {
        min-height: 300px;

        padding:
            85px 20px 55px;
    }


    .services-eyebrow {
        font-size: 10px;

        letter-spacing: 3px;
    }


    .services-new-content h1 {
        font-size: 43px;
    }


    .services-new-content h1 span {
        letter-spacing: 3px;
    }


    .services-hero-text {
        font-size: 19px;
    }


    .services-new-section {
        padding:
            55px 18px 65px;
    }


    .services-new-grid {
        grid-template-columns: 1fr;

        max-width: 390px;
    }


    .services-new-card {
        min-height: auto;
    }


    .services-new-cta {
        margin:
            0 18px 55px;

        padding:
            30px 24px;

        flex-direction: column;

        align-items: flex-start;
    }


    .services-cta-content h2 {
        font-size: 24px;
    }

}

/* =========================================
   SHOP TITLE — MOVE BELOW HEADER
========================================= */

.shop-section {
    padding-top: 85px !important;
}


.shop-section-heading {
    position: relative !important;

    margin-top: 15px !important;
}

/* WHAT WE OFFER — MOVE DOWN */

.services-new-heading>p:first-child {
    transform: translateY(10px) !important;
}

/* =========================================
   SERVICES HEADING — ADD MORE SPACE
========================================= */

.services-new-heading>p:first-child {
    margin-bottom: 22px !important;
}

.services-new-heading h2 {
    margin-bottom: 20px !important;
}

/* =========================================================
   SC ANIME — GALLERY NEW DESIGN
========================================================= */


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

.gallery-new-hero {
    position: relative;

    min-height: 340px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 90px 20px 65px;

    background:
        radial-gradient(circle at center,
            rgba(8, 95, 69, 0.30),
            transparent 62%),
        linear-gradient(180deg,
            #020807,
            #03130f 55%,
            #020807);

    border-bottom:
        1px solid rgba(218, 169, 58, 0.22);

    overflow: hidden;
}


.gallery-new-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.45),
            transparent,
            rgba(0, 0, 0, 0.45));
}


.gallery-new-content {
    position: relative;

    z-index: 2;

    max-width: 800px;
}


.gallery-new-content>p:first-child {
    margin: 0 0 16px;

    color: #d9a62e;

    font-family: "Cinzel", serif;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 5px;
}


.gallery-new-content h1 {
    margin: 0;

    color: transparent;

    background:
        linear-gradient(180deg,
            #fff0a3,
            #f0c75e 35%,
            #d9a62e 65%,
            #9a6a12);

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

    font-family: "Cinzel", serif;

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

    line-height: 1;

    letter-spacing: 2px;

    text-shadow:
        0 0 12px rgba(240, 199, 94, 0.25),
        0 4px 15px rgba(0, 0, 0, 0.8);
}


.gallery-new-content h1 span {
    display: block;

    margin-top: 8px;

    font-size: 0.62em;

    letter-spacing: 5px;
}


.gallery-gold-line {
    width: 100px;

    height: 2px;

    margin: 23px auto;

    background:
        linear-gradient(90deg,
            transparent,
            #d9a62e,
            #fff0a3,
            #d9a62e,
            transparent);

    box-shadow:
        0 0 10px rgba(218, 169, 58, 0.4);
}


.gallery-hero-description {
    max-width: 650px;

    margin: auto;

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

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    line-height: 1.8;
}



/* =========================================
   MAIN SECTION
========================================= */

.gallery-new-section {
    padding: 75px 5% 80px;

    background:
        linear-gradient(180deg,
            #020807,
            #031510 50%,
            #020807);
}


.gallery-new-heading {
    text-align: center;

    margin-bottom: 35px;
}


.gallery-new-heading>p {
    margin: 0 0 10px;

    color: #d9a62e;

    font-family: "Cinzel", serif;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 4px;
}


.gallery-new-heading h2 {
    margin: 0;

    color: #f5f1df;

    font-family: "Cinzel", serif;

    font-size: clamp(30px, 4vw, 42px);

    letter-spacing: 2px;
}


.gallery-new-heading h2 span {
    color: transparent;

    background:
        linear-gradient(180deg,
            #fff0a3,
            #d9a62e);

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


.gallery-small-line {
    width: 80px;

    height: 2px;

    margin: 17px auto 0;

    background:
        linear-gradient(90deg,
            transparent,
            #d9a62e,
            transparent);
}



/* =========================================
   FIGURE GRID
========================================= */

.anime-gallery-grid {
    max-width: 1150px;

    margin: auto;

    display: grid;

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

    grid-auto-rows: 250px;

    gap: 16px;
}


.gallery-item {
    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(218, 169, 58, 0.28);

    border-radius: 10px;

    background: #031510;
}


.gallery-item.gallery-large {
    grid-row: span 2;
}


.gallery-item.gallery-wide {
    grid-column: span 2;
}


.gallery-item img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}


.gallery-item:hover img {
    transform: scale(1.06);

    filter:
        brightness(0.8) saturate(1.1);
}



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

.gallery-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 22px;

    background:
        linear-gradient(transparent 35%,
            rgba(0, 0, 0, 0.88) 100%);

    opacity: 0;

    transition:
        opacity 0.35s ease;
}


.gallery-item:hover .gallery-overlay,
.poster-gallery-item:hover .gallery-overlay {
    opacity: 1;
}


.gallery-overlay span {
    color: #d9a62e;

    font-family: "Poppins", sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;
}


.gallery-overlay h3 {
    margin: 6px 0 0;

    color: #ffffff;

    font-family: "Cinzel", serif;

    font-size: 17px;
}



/* =========================================
   POSTERS
========================================= */

.poster-heading {
    margin-top: 75px;
}


.poster-gallery-grid {
    max-width: 1000px;

    margin: auto;

    display: grid;

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

    gap: 18px;
}


.poster-gallery-item {
    position: relative;

    height: 350px;

    overflow: hidden;

    border:
        1px solid rgba(218, 169, 58, 0.28);

    border-radius: 10px;

    background: #031510;
}


.poster-gallery-item img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}


.poster-gallery-item:hover img {
    transform: scale(1.05);

    filter:
        brightness(0.8) saturate(1.1);
}



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

.gallery-new-cta {
    max-width: 1150px;

    margin: 0 auto 70px;

    padding: 38px 45px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    background:
        linear-gradient(135deg,
            rgba(7, 40, 31, 0.95),
            rgba(2, 13, 11, 0.98));

    border:
        1px solid rgba(218, 169, 58, 0.30);

    border-radius: 11px;

    box-sizing: border-box;
}


.gallery-new-cta p {
    margin: 0 0 8px;

    color: #d9a62e;

    font-family: "Cinzel", serif;

    font-size: 10px;

    letter-spacing: 3px;
}


.gallery-new-cta h2 {
    margin: 0;

    color: #f5f1df;

    font-family: "Cinzel", serif;

    font-size: 28px;
}


.gallery-new-cta h2 span {
    color: transparent;

    background:
        linear-gradient(180deg,
            #fff0a3,
            #d9a62e);

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


.gallery-new-btn {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 13px 24px;

    border-radius: 5px;

    background:
        linear-gradient(135deg,
            #f4d778,
            #c79425);

    color: #07120f;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    text-decoration: none;

    white-space: nowrap;

    transition: 0.3s ease;
}


.gallery-new-btn:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(135deg,
            #fff0a3,
            #d9a62e);

    box-shadow:
        0 8px 25px rgba(218, 169, 58, 0.18);
}



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

@media (max-width: 900px) {

    .anime-gallery-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .gallery-item.gallery-wide {
        grid-column: span 2;
    }


    .poster-gallery-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}



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

@media (max-width: 650px) {

    .gallery-new-hero {
        min-height: 300px;

        padding:
            85px 20px 55px;
    }


    .gallery-new-content h1 {
        font-size: 30px;
    }


    .gallery-new-content h1 span {
        letter-spacing: 3px;
    }


    .gallery-new-section {
        padding:
            55px 18px 65px;
    }


    .anime-gallery-grid {
        grid-template-columns: 1fr;

        grid-auto-rows: 260px;
    }


    .gallery-item.gallery-large {
        grid-row: span 1;
    }


    .gallery-item.gallery-wide {
        grid-column: span 1;
    }


    .gallery-overlay {
        opacity: 1;

        padding: 18px;
    }


    .poster-gallery-grid {
        grid-template-columns: 1fr;

        max-width: 390px;
    }


    .poster-gallery-item {
        height: 350px;
    }


    .gallery-new-cta {
        margin:
            0 18px 55px;

        padding:
            30px 24px;

        flex-direction: column;

        align-items: flex-start;
    }


    .gallery-new-cta h2 {
        font-size: 24px;
    }

}

/* =========================================
   Gallery HEADING — ADD MORE SPACE
========================================= */

.gallery-new-heading>p:first-child {
    transform: translateY(10px) !important;
}

.gallery-new-heading>p:first-child {
    margin-bottom: 22px !important;
}

.gallery-new-heading h2 {
    margin-bottom: 20px !important;
}

/* =========================================
   FOOTER — PROPER BOTTOM FIT
========================================= */

html,
body {
    min-height: 100%;
}


body {
    min-height: 100vh;

    display: flex;

    flex-direction: column;
}


/* Main page content should take available space */

.gallery-new-section {
    flex: 1 0 auto;
}


/* Footer stays after all content */

.services.footer {
    position: relative !important;

    margin-top: 50px !important;

    width: 100% !important;

    flex-shrink: 0 !important;

    box-sizing: border-box !important;
}

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

.services.footer {

    background: #010504;

    padding-top: 60px;

}


.services.footer-container {

    max-width: 1300px;

    margin: auto;

    padding: 0 30px 50px;

    display: grid;

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

    gap: 50px;

}


.services.footer-brand h2 {

    font-family: "Cinzel", serif;

    color: var(--gold-light);

    letter-spacing: 2px;

}


.services.footer-brand p {

    max-width: 300px;

    color: #8e9692;

    font-size: 12px;

    line-height: 1.8;

    margin: 15px 0;

}


.social-icons {

    display: flex;

    gap: 12px;

}


.social-icons a {

    width: 35px;

    height: 35px;

    border: 1px solid rgba(217, 166, 46, 0.5);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--gold);

}


.services.footer-column h3 {

    color: var(--gold-light);

    font-size: 11px;

    letter-spacing: 2px;

    margin-bottom: 20px;

}


.services.footer-column a {

    display: block;

    color: #8f9693;

    font-size: 12px;

    margin-bottom: 12px;

}


.services.footer-column a:hover {

    color: var(--gold);

}


.services.footer-column p {

    color: #8f9693;

    font-size: 11px;

    margin-bottom: 15px;

    line-height: 1.6;

}


.services.footer-column p i {

    color: var(--gold);

    margin-right: 8px;

}


.copyright {

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

    text-align: center;

    padding: 20px;

    color: #656c69;

    font-size: 10px;

}


/* =========================================
   WHATSAPP
========================================= */

.whatsapp-button {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 58px;

    height: 58px;

    border-radius: 50%;

    background: #25d366;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 29px;

    z-index: 2000;

    box-shadow:
        0 5px 25px rgba(37, 211, 102, 0.35);

}


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

@media (max-width: 1100px) {

    .nav-menu {

        gap: 15px;

    }

    .nav-menu a {

        font-size: 10px;

    }

}

/* =========================================
   SERVICES PAGE FOOTER
   ========================================= */

.services-new-cta~.footer {
    width: calc(100% - 130px) !important;
    max-width: 1200px !important;
    margin: 0 auto 70px !important;

    position: relative !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}


/* MOBILE */

@media (max-width: 700px) {

    .services-new-cta~.footer {
        width: calc(100% - 36px) !important;
        margin: 0 auto 40px !important;
    }

}

/* =========================================
   GALLERY FOOTER — FULL WIDTH FIX
========================================= */

.gallery-new-cta+.footer {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    position: relative !important;

    box-sizing: border-box !important;

    flex-shrink: 0 !important;

    border-radius: 0 !important;
}


/* Footer inner content */

.gallery-new-cta+.footer .footer-container {
    width: 100% !important;
    max-width: 1250px !important;

    margin: 0 auto !important;

    box-sizing: border-box !important;
}


/* Copyright */

.gallery-new-cta+.footer .copyright {
    width: 100% !important;

    box-sizing: border-box !important;
}

/* =========================================================
   EVENTS NEW DESIGN
========================================================= */


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

.events-new-hero {

    min-height: 430px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        linear-gradient(rgba(0, 8, 6, 0.72),
            rgba(0, 8, 6, 0.88)),
        url("../images/Image-1.jfif");

    background-size: cover;

    background-position: center;

    border-bottom: 1px solid rgba(218, 169, 58, 0.35);

}


.events-new-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(circle at center,
            rgba(18, 75, 53, 0.20),
            transparent 65%);

}


.events-new-hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

    padding: 70px 25px;

}


.events-new-hero-content>p:first-child {

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 5px;

    color: #d9a62e;

    margin-bottom: 18px;

}


.events-new-hero-content h1 {

    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 58px;

    line-height: 1.15;

    letter-spacing: 2px;

    color: #ffffff;

}


.events-new-hero-content h1 span {

    color: #e0ad35;

}


.events-new-line {

    width: 100px;

    height: 2px;

    margin: 25px auto;

    background: linear-gradient(90deg,
            transparent,
            #d9a62e,
            #fff0a3,
            #d9a62e,
            transparent);

}


.events-new-hero-description {

    max-width: 650px;

    margin: 0 auto;

    color: #b8c2bd;

    font-size: 15px;

    line-height: 1.8;

}


.events-coming-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;

    padding: 10px 18px;

    border: 1px solid rgba(218, 169, 58, 0.45);

    background: rgba(0, 12, 9, 0.7);

    color: #d9a62e;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;

}


.events-coming-badge span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #d9a62e;

    box-shadow: 0 0 10px rgba(218, 169, 58, 0.8);

}



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

.events-featured-section {

    max-width: 1250px;

    margin: auto;

    padding: 85px 30px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 65px;

    align-items: center;

}


.events-featured-image {

    position: relative;

    height: 430px;

    overflow: hidden;

    border: 1px solid rgba(218, 169, 58, 0.45);

    background: #02110d;

}


.events-featured-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            transparent 55%,
            rgba(0, 8, 6, 0.75));

}


.events-featured-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.5s ease;

}


.events-featured-image:hover img {

    transform: scale(1.04);

}


.events-image-badge {

    position: absolute;

    z-index: 2;

    top: 20px;

    right: 20px;

    padding: 9px 14px;

    background: #d9a62e;

    color: #050806;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

}


.events-featured-content {

    padding: 10px 0;

}


.events-section-label {

    margin: 0 0 16px;

    color: #d9a62e;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 4px;

}


.events-featured-content h2 {

    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 42px;

    line-height: 1.25;

    color: #ffffff;

}


.events-featured-content h2 span {

    color: #d9a62e;

}


.events-mini-line {

    width: 75px;

    height: 2px;

    margin: 22px 0;

    background: #d9a62e;

}


.events-featured-description {

    max-width: 560px;

    color: #aeb9b4;

    font-size: 15px;

    line-height: 1.9;

}


.events-status {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 25px 0;

    color: #d9a62e;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;

}


.events-status span {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #d9a62e;

    box-shadow: 0 0 10px rgba(218, 169, 58, 0.7);

}


.events-gold-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 13px 22px;

    border: 1px solid #d9a62e;

    background: transparent;

    color: #d9a62e;

    text-decoration: none;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.5px;

    transition: all 0.3s ease;

}


.events-gold-btn:hover {

    background: #d9a62e;

    color: #050806;

}



/* =========================================================
   EVENTS SECTION
========================================================= */

.events-new-section {

    padding: 85px 30px;

    background: #010806;

    border-top: 1px solid rgba(218, 169, 58, 0.18);

    border-bottom: 1px solid rgba(218, 169, 58, 0.18);

}


.events-new-heading {

    max-width: 1250px;

    margin: 0 auto 45px;

    text-align: center;

}


.events-new-heading>p:first-child {

    margin-bottom: 14px;

    color: #d9a62e;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 4px;

}


.events-new-heading h2 {

    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 42px;

    color: #ffffff;

}


.events-new-heading h2 span {

    color: #d9a62e;

}


.events-small-line {

    width: 70px;

    height: 2px;

    margin: 20px auto;

    background: #d9a62e;

}


.events-heading-description {

    color: #9da9a4;

    font-size: 14px;

}



/* =========================================================
   EVENT GRID
========================================================= */

.events-new-grid {

    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 25px;

}


.events-new-card {

    position: relative;

    min-height: 350px;

    padding: 28px;

    background:
        linear-gradient(145deg,
            rgba(9, 37, 28, 0.85),
            rgba(1, 10, 7, 0.95));

    border: 1px solid rgba(218, 169, 58, 0.30);

    transition: all 0.35s ease;

}


.events-new-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 45px;

    height: 2px;

    background: #d9a62e;

}


.events-new-card:hover {

    transform: translateY(-7px);

    border-color: rgba(218, 169, 58, 0.75);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.35),
        0 0 25px rgba(218, 169, 58, 0.08);

}


.events-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 30px;

}


.events-card-top span {

    font-family: "Cinzel", serif;

    font-size: 14px;

    color: #8d9893;

}


.events-card-top i {

    color: #d9a62e;

    font-size: 22px;

}


.events-card-status {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 20px;

    color: #d9a62e;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

}


.events-card-status span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #d9a62e;

}


.events-card-label {

    margin-bottom: 10px;

    color: #8e9b95;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;

}


.events-new-card h3 {

    margin: 0 0 16px;

    font-family: "Cinzel", serif;

    font-size: 25px;

    line-height: 1.35;

    color: #ffffff;

}


.events-card-description {

    color: #9da9a4;

    font-size: 13px;

    line-height: 1.8;

}


.events-card-footer {

    position: absolute;

    left: 28px;

    right: 28px;

    bottom: 25px;

    padding-top: 16px;

    border-top: 1px solid rgba(218, 169, 58, 0.15);

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.events-card-footer span {

    color: #d9a62e;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

}


.events-card-footer i {

    color: #d9a62e;

    font-size: 12px;

}



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

.events-new-cta {

    max-width: 1250px;

    margin: 70px auto;

    padding: 45px 50px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    background:
        linear-gradient(135deg,
            rgba(8, 39, 29, 0.95),
            rgba(2, 13, 10, 0.98));

    border: 1px solid rgba(218, 169, 58, 0.40);

}


.events-cta-content>p:first-child {

    margin-bottom: 12px;

    color: #d9a62e;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 4px;

}


.events-cta-content h2 {

    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 38px;

    color: #ffffff;

}


.events-cta-content h2 span {

    color: #d9a62e;

}


.events-cta-description {

    margin-top: 12px;

    color: #9da9a4;

    font-size: 13px;

}


.events-cta-btn {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 15px 25px;

    background: #d9a62e;

    color: #050806;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    transition: all 0.3s ease;

}


.events-cta-btn:hover {

    background: #f0c75a;

    transform: translateY(-2px);

}



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

@media (max-width: 900px) {

    .events-new-hero-content h1 {

        font-size: 45px;

    }


    .events-featured-section {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .events-featured-image {

        height: 380px;

    }


    .events-new-grid {

        grid-template-columns: 1fr 1fr;

    }


    .events-new-cta {

        margin: 55px 25px;

    }

}


@media (max-width: 650px) {

    .events-new-hero {

        min-height: 390px;

    }


    .events-new-hero-content {

        padding: 60px 20px;

    }


    .events-new-hero-content h1 {

        font-size: 34px;

    }


    .events-new-hero-description {

        font-size: 13px;

    }


    .events-featured-section {

        padding: 60px 20px;

    }


    .events-featured-image {

        height: 300px;

    }


    .events-featured-content h2 {

        font-size: 32px;

    }


    .events-new-section {

        padding: 60px 20px;

    }


    .events-new-heading h2 {

        font-size: 32px;

    }


    .events-new-grid {

        grid-template-columns: 1fr;

    }


    .events-new-card {

        min-height: 330px;

    }


    .events-new-cta {

        margin: 45px 20px;

        padding: 35px 25px;

        flex-direction: column;

        align-items: flex-start;

    }


    .events-cta-content h2 {

        font-size: 30px;

    }


    .events-cta-btn {

        width: 100%;

        justify-content: center;

    }

}

/* =====================================
   EVENTS HERO - HEADER SPACING
====================================== */

.events-new-hero {
    margin-top: 80px !important;
}

/* =========================================================
   PRICING NEW DESIGN
========================================================= */


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

.pricing-new-hero {

    min-height: 430px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        radial-gradient(circle at center,
            rgba(10, 57, 42, 0.40),
            transparent 65%),
        #010806;

    border-bottom: 1px solid rgba(218, 169, 58, 0.35);

}


.pricing-new-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(0, 7, 5, 0.15),
            rgba(0, 7, 5, 0.65));

}


.pricing-new-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

    padding: 70px 25px;

}


.pricing-new-content>p:first-child {

    margin-bottom: 18px;

    color: #d9a62e;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 5px;

}


.pricing-new-content h1 {

    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 58px;

    line-height: 1.15;

    letter-spacing: 2px;

    color: #ffffff;

}


.pricing-new-content h1 span {

    color: #d9a62e;

}


.pricing-new-line {

    width: 100px;

    height: 2px;

    margin: 25px auto;

    background: linear-gradient(90deg,
            transparent,
            #d9a62e,
            #fff0a3,
            #d9a62e,
            transparent);

}


.pricing-hero-description {

    max-width: 600px;

    margin: 0 auto;

    color: #b5c0bb;

    font-size: 15px;

    line-height: 1.8;

}


.pricing-hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 25px;

    padding: 10px 18px;

    border: 1px solid rgba(218, 169, 58, 0.45);

    color: #d9a62e;

    background: rgba(0, 12, 9, 0.75);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

}



/* =========================================================
   PRICING SECTION
========================================================= */

.pricing-new-section {

    padding: 85px 30px;

    background: #010806;

    border-bottom: 1px solid rgba(218, 169, 58, 0.18);

}


.pricing-new-heading {

    max-width: 900px;

    margin: 0 auto 50px;

    text-align: center;

}


.pricing-new-heading>p:first-child {

    margin-bottom: 14px;

    color: #d9a62e;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 4px;

}


.pricing-new-heading h2 {

    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 42px;

    color: #ffffff;

}


.pricing-new-heading h2 span {

    color: #d9a62e;

}


.pricing-small-line {

    width: 70px;

    height: 2px;

    margin: 20px auto;

    background: #d9a62e;

}


.pricing-heading-description {

    color: #9da9a4;

    font-size: 14px;

}



/* =========================================================
   PRICING GRID
========================================================= */

.pricing-new-grid {

    max-width: 1200px;

    margin: auto;

    display: grid;

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

    gap: 25px;

}


.pricing-new-card {

    position: relative;

    min-height: 430px;

    padding: 30px;

    display: flex;

    flex-direction: column;

    background:
        linear-gradient(145deg,
            rgba(8, 39, 29, 0.90),
            rgba(1, 10, 7, 0.98));

    border: 1px solid rgba(218, 169, 58, 0.30);

    transition: all 0.35s ease;

}


.pricing-new-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 50px;

    height: 2px;

    background: #d9a62e;

}


.pricing-new-card:hover {

    transform: translateY(-7px);

    border-color: rgba(218, 169, 58, 0.75);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.35),
        0 0 25px rgba(218, 169, 58, 0.08);

}


.pricing-popular {

    border-color: rgba(218, 169, 58, 0.65);

    box-shadow:
        0 0 25px rgba(218, 169, 58, 0.06);

}


.pricing-popular-badge {

    position: absolute;

    top: 0;

    right: 0;

    padding: 8px 13px;

    background: #d9a62e;

    color: #050806;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.pricing-card-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 28px;

}


.pricing-card-header span {

    color: #7e8984;

    font-family: "Cinzel", serif;

    font-size: 14px;

}


.pricing-card-header i {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(218, 169, 58, 0.40);

    border-radius: 50%;

    color: #d9a62e;

    font-size: 16px;

}


.pricing-card-status {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 18px;

    color: #d9a62e;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

}


.pricing-card-status span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #d9a62e;

    box-shadow: 0 0 9px rgba(218, 169, 58, 0.7);

}


.pricing-card-label {

    margin-bottom: 10px;

    color: #8e9a95;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;

}


.pricing-new-card h3 {

    margin: 0 0 17px;

    font-family: "Cinzel", serif;

    font-size: 27px;

    line-height: 1.35;

    color: #ffffff;

}


.pricing-card-description {

    color: #9da9a4;

    font-size: 13px;

    line-height: 1.8;

}


.pricing-card-price {

    margin-top: auto;

    padding: 20px 0;

    border-top: 1px solid rgba(218, 169, 58, 0.15);

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.pricing-card-price span {

    color: #7e8984;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2px;

}


.pricing-card-price strong {

    color: #d9a62e;

    font-family: "Cinzel", serif;

    font-size: 21px;

}


.pricing-new-btn {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 13px 16px;

    border: 1px solid #d9a62e;

    color: #d9a62e;

    text-decoration: none;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.5px;

    transition: all 0.3s ease;

}


.pricing-new-btn:hover {

    background: #d9a62e;

    color: #050806;

}



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

.pricing-info-section {

    max-width: 1050px;

    margin: 65px auto;

    padding: 32px 38px;

    display: flex;

    align-items: flex-start;

    gap: 25px;

    background:
        linear-gradient(135deg,
            rgba(8, 39, 29, 0.85),
            rgba(1, 10, 7, 0.95));

    border: 1px solid rgba(218, 169, 58, 0.30);

}


.pricing-info-icon {

    flex-shrink: 0;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(218, 169, 58, 0.45);

    border-radius: 50%;

    color: #d9a62e;

}


.pricing-info-content>p:first-child {

    margin-bottom: 8px;

    color: #d9a62e;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;

}


.pricing-info-content h3 {

    margin: 0 0 10px;

    font-family: "Cinzel", serif;

    font-size: 22px;

    color: #ffffff;

}


.pricing-info-content>p:last-child {

    margin: 0;

    color: #9da9a4;

    font-size: 13px;

    line-height: 1.8;

}



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

.pricing-new-cta {

    max-width: 1250px;

    margin: 70px auto;

    padding: 45px 50px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    background:
        linear-gradient(135deg,
            rgba(8, 39, 29, 0.95),
            rgba(2, 13, 10, 0.98));

    border: 1px solid rgba(218, 169, 58, 0.40);

}


.pricing-new-cta>div>p:first-child {

    margin-bottom: 12px;

    color: #d9a62e;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 4px;

}


.pricing-new-cta h2 {

    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 38px;

    color: #ffffff;

}


.pricing-new-cta h2 span {

    color: #d9a62e;

}


.pricing-cta-description {

    margin-top: 12px;

    color: #9da9a4;

    font-size: 13px;

}


.pricing-cta-btn {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 15px 25px;

    background: #d9a62e;

    color: #050806;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    transition: all 0.3s ease;

}


.pricing-cta-btn:hover {

    background: #f0c75a;

    transform: translateY(-2px);

}



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

@media (max-width: 900px) {

    .pricing-new-content h1 {

        font-size: 45px;

    }


    .pricing-new-grid {

        grid-template-columns: 1fr 1fr;

    }


    .pricing-new-cta {

        margin: 55px 25px;

    }

}


@media (max-width: 650px) {

    .pricing-new-hero {

        min-height: 390px;

    }


    .pricing-new-content {

        padding: 60px 20px;

    }


    .pricing-new-content h1 {

        font-size: 34px;

    }


    .pricing-hero-description {

        font-size: 13px;

    }


    .pricing-new-section {

        padding: 60px 20px;

    }


    .pricing-new-heading h2 {

        font-size: 32px;

    }


    .pricing-new-grid {

        grid-template-columns: 1fr;

    }


    .pricing-new-card {

        min-height: 400px;

    }


    .pricing-info-section {

        margin: 45px 20px;

        padding: 25px;

        flex-direction: column;

    }


    .pricing-new-cta {

        margin: 45px 20px;

        padding: 35px 25px;

        flex-direction: column;

        align-items: flex-start;

    }


    .pricing-new-cta h2 {

        font-size: 30px;

    }


    .pricing-cta-btn {

        width: 100%;

        justify-content: center;

    }

}

/* =========================================================
   PRICING - CLEAN INFORMATION FLOW
========================================================= */

.pricing-info-section {

    max-width: 1200px !important;

    margin: 20px auto 0 !important;

    padding: 28px 0 !important;

    display: flex !important;

    align-items: center !important;

    gap: 25px !important;

    background: transparent !important;

    border: none !important;

    border-top: 1px solid rgba(218, 169, 58, 0.25) !important;

    border-bottom: 1px solid rgba(218, 169, 58, 0.25) !important;

}


.pricing-info-icon {

    width: 44px !important;

    height: 44px !important;

    flex-shrink: 0;

    border: 1px solid rgba(218, 169, 58, 0.45) !important;

    border-radius: 50%;

}


.pricing-info-content {

    flex: 1;

}


.pricing-info-content>p:first-child {

    margin-bottom: 5px !important;

    font-size: 10px !important;

    letter-spacing: 3px !important;

}


.pricing-info-content h3 {

    margin: 0 0 5px !important;

    font-size: 20px !important;

}


.pricing-info-content>p:last-child {

    margin: 0 !important;

    font-size: 12px !important;

    line-height: 1.7 !important;

}



/* =========================================================
   PRICING CTA - FULL WIDTH PREMIUM BAND
========================================================= */

.pricing-new-cta {

    max-width: none !important;

    margin: 0 !important;

    padding: 55px max(30px, calc((100% - 1200px) / 2)) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 40px !important;

    background:

        linear-gradient(90deg,
            #010806 0%,
            #062419 50%,
            #010806 100%) !important;

    border-top: 1px solid rgba(218, 169, 58, 0.30) !important;

    border-bottom: 1px solid rgba(218, 169, 58, 0.30) !important;

}


.pricing-new-cta>div {

    max-width: 800px;

}


.pricing-new-cta h2 {

    font-size: 38px !important;

}


.pricing-cta-btn {

    padding: 15px 28px !important;

    white-space: nowrap;

}

/* =========================================================
   CONTACT NEW DESIGN
========================================================= */


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

.contact-new-hero {

    min-height: 430px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        radial-gradient(circle at center,
            rgba(10, 57, 42, 0.42),
            transparent 65%),
        #010806;

    border-bottom: 1px solid rgba(218, 169, 58, 0.35);

}


.contact-new-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(0, 8, 6, 0.05),
            rgba(0, 8, 6, 0.65));

}


.contact-new-hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

    padding: 70px 25px;

}


.contact-new-hero-content>p:first-child {

    margin-bottom: 18px;

    color: #d9a62e;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 5px;

}


.contact-new-hero-content h1 {

    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 58px;

    line-height: 1.15;

    letter-spacing: 2px;

    color: #ffffff;

}


.contact-new-hero-content h1 span {

    color: #d9a62e;

}


.contact-new-line {

    width: 100px;

    height: 2px;

    margin: 25px auto;

    background: linear-gradient(90deg,
            transparent,
            #d9a62e,
            #fff0a3,
            #d9a62e,
            transparent);

}


.contact-hero-description {

    max-width: 650px;

    margin: auto;

    color: #b5c0bb;

    font-size: 15px;

    line-height: 1.8;

}


.contact-hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;

    padding: 10px 18px;

    border: 1px solid rgba(218, 169, 58, 0.45);

    background: rgba(0, 12, 9, 0.75);

    color: #d9a62e;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

}



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

.contact-new-section {

    padding: 85px 30px;

    background: #010806;

}


.contact-new-grid {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 70px;

    align-items: start;

}



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

.contact-new-info {

    padding-top: 10px;

}


.contact-new-heading>p:first-child {

    margin-bottom: 15px;

    color: #d9a62e;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 4px;

}


.contact-new-heading h2 {

    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 39px;

    line-height: 1.3;

    color: #ffffff;

}


.contact-new-heading h2 span {

    color: #d9a62e;

}


.contact-small-line {

    width: 70px;

    height: 2px;

    margin: 22px 0;

    background: #d9a62e;

}


.contact-new-intro {

    max-width: 500px;

    margin-bottom: 35px;

    color: #9da9a4;

    font-size: 14px;

    line-height: 1.9;

}



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

.contact-new-method {

    min-height: 82px;

    margin-bottom: 15px;

    padding: 15px 18px;

    display: flex;

    align-items: center;

    gap: 16px;

    background:
        linear-gradient(135deg,
            rgba(7, 34, 25, 0.82),
            rgba(1, 10, 7, 0.96));

    border: 1px solid rgba(218, 169, 58, 0.25);

    color: inherit;

    text-decoration: none;

    transition: all 0.3s ease;

}


.contact-new-method:hover {

    border-color: rgba(218, 169, 58, 0.70);

    transform: translateX(5px);

}


.contact-method-icon {

    width: 45px;

    height: 45px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(218, 169, 58, 0.40);

    color: #d9a62e;

    font-size: 17px;

}


.contact-method-content {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.contact-method-content span {

    color: #d9a62e;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2px;

}


.contact-method-content strong {

    color: #ffffff;

    font-size: 13px;

    font-weight: 500;

}


.contact-method-content small {

    color: #7f8c86;

    font-size: 10px;

}


.contact-new-method>i {

    color: #d9a62e;

    font-size: 12px;

}



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

.contact-new-form-card {

    padding: 35px;

    background:
        linear-gradient(145deg,
            rgba(8, 39, 29, 0.92),
            rgba(1, 10, 7, 0.98));

    border: 1px solid rgba(218, 169, 58, 0.35);

    position: relative;

}


.contact-new-form-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 65px;

    height: 2px;

    background: #d9a62e;

}


.contact-form-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 30px;

}


.contact-form-heading p {

    margin: 0 0 10px;

    color: #d9a62e;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;

}


.contact-form-heading h3 {

    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 25px;

    line-height: 1.3;

    color: #ffffff;

}


.contact-form-heading h3 span {

    color: #d9a62e;

}


.contact-form-number {

    color: #737e79;

    font-family: "Cinzel", serif;

    font-size: 12px;

}



/* =========================================================
   FORM FIELDS
========================================================= */

.contact-new-form {

    display: flex;

    flex-direction: column;

    gap: 20px;

}


.contact-new-field {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.contact-new-field label {

    color: #d9a62e;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2px;

}


.contact-new-field input,
.contact-new-field select,
.contact-new-field textarea {

    width: 100%;

    box-sizing: border-box;

    padding: 13px 14px;

    border: 1px solid rgba(218, 169, 58, 0.22);

    outline: none;

    background: rgba(0, 9, 6, 0.75);

    color: #ffffff;

    font-family: "Poppins", sans-serif;

    font-size: 12px;

    transition: all 0.3s ease;

}


.contact-new-field input::placeholder,
.contact-new-field textarea::placeholder {

    color: #69756f;

}


.contact-new-field select {

    cursor: pointer;

}


.contact-new-field option {

    background: #06120e;

    color: #ffffff;

}


.contact-new-field textarea {

    resize: vertical;

    min-height: 125px;

}


.contact-new-field input:focus,
.contact-new-field select:focus,
.contact-new-field textarea:focus {

    border-color: rgba(218, 169, 58, 0.75);

    box-shadow: 0 0 15px rgba(218, 169, 58, 0.06);

}



/* =========================================================
   SUBMIT
========================================================= */

.contact-new-submit {

    margin-top: 5px;

    padding: 15px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 1px solid #d9a62e;

    background: #d9a62e;

    color: #050806;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    cursor: pointer;

    transition: all 0.3s ease;

}


.contact-new-submit:hover {

    background: #f0c75a;

    transform: translateY(-2px);

}



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

.contact-new-cta {

    max-width: 1250px;

    margin: 0 auto 70px;

    padding: 45px 50px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    background:
        linear-gradient(135deg,
            rgba(8, 39, 29, 0.95),
            rgba(2, 13, 10, 0.98));

    border-top: 1px solid rgba(218, 169, 58, 0.40);

    border-bottom: 1px solid rgba(218, 169, 58, 0.40);

}


.contact-new-cta>div>p:first-child {

    margin-bottom: 12px;

    color: #d9a62e;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 4px;

}


.contact-new-cta h2 {

    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 38px;

    color: #ffffff;

}


.contact-new-cta h2 span {

    color: #d9a62e;

}


.contact-cta-description {

    margin-top: 12px;

    color: #9da9a4;

    font-size: 13px;

    line-height: 1.7;

}


.contact-cta-btn {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 15px 25px;

    background: #d9a62e;

    color: #050806;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    transition: all 0.3s ease;

}


.contact-cta-btn:hover {

    background: #f0c75a;

    transform: translateY(-2px);

}



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

@media (max-width: 900px) {

    .contact-new-hero-content h1 {

        font-size: 45px;

    }


    .contact-new-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .contact-new-cta {

        margin: 0 25px 55px;

    }

}


@media (max-width: 650px) {

    .contact-new-hero {

        min-height: 390px;

    }


    .contact-new-hero-content {

        padding: 60px 20px;

    }


    .contact-new-hero-content h1 {

        font-size: 34px;

    }


    .contact-hero-description {

        font-size: 13px;

    }


    .contact-new-section {

        padding: 60px 20px;

    }


    .contact-new-heading h2 {

        font-size: 31px;

    }


    .contact-new-form-card {

        padding: 25px 20px;

    }


    .contact-form-heading {

        flex-direction: column;

    }


    .contact-new-cta {

        margin: 0 20px 45px;

        padding: 35px 25px;

        flex-direction: column;

        align-items: flex-start;

    }


    .contact-new-cta h2 {

        font-size: 30px;

    }


    .contact-cta-btn {

        width: 100%;

        justify-content: center;

    }

}

.navbar+section {
    padding-top: 85px !important;
}

/* =====================================
   COMMON PAGE HEADER SPACING
====================================== */

.shop-section,
.services-new-section,
.gallery-new-section,
.events-new-section,
.pricing-new-section,
.contact-new-section {
    padding-top: 85px;
}

/* =====================================
   FINAL HEADER SPACING FIX
   CONTACT + EVENTS
====================================== */

.events-new-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.contact-new-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =========================================================
   PRODUCT DETAILS - NEW DESIGN
========================================================= */

.product-new-section {

    padding: 90px 30px 70px;

    background: #010806;

}


.product-new-container {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;

}


/* IMAGE */

.product-new-image-card {

    position: relative;

    min-height: 560px;

    background:
        linear-gradient(145deg,
            rgba(8, 39, 29, 0.90),
            rgba(1, 10, 7, 0.98));

    border: 1px solid rgba(218, 169, 58, 0.35);

    padding: 25px;

}


.product-new-image-label {

    color: #d9a62e;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 3px;

}


.product-new-image-wrap {

    height: 470px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.product-new-image-wrap img {

    max-width: 90%;

    max-height: 90%;

    object-fit: contain;

    filter:
        drop-shadow(0 15px 25px rgba(0, 0, 0, 0.5));

    transition: transform 0.4s ease;

}


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

    transform: scale(1.04);

}


.product-image-bottom {

    display: flex;

    justify-content: space-between;

    padding-top: 15px;

    border-top: 1px solid rgba(218, 169, 58, 0.18);

    color: #78857f;

    font-size: 8px;

    letter-spacing: 2px;

}



/* INFO */

.product-new-info {

    padding: 10px 0;

}


.product-new-label {

    margin-bottom: 15px;

    color: #d9a62e;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 4px;

}


.product-new-info h1 {

    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 43px;

    line-height: 1.25;

    color: #ffffff;

}


.product-new-line {

    width: 75px;

    height: 2px;

    margin: 22px 0;

    background: #d9a62e;

}


.product-new-price {

    margin: 0 0 18px;

    color: #d9a62e;

    font-family: "Cinzel", serif;

    font-size: 31px;

    font-weight: 600;

}


.product-new-description {

    max-width: 500px;

    margin-bottom: 30px;

    color: #9da9a4;

    font-size: 14px;

    line-height: 1.9;

}



/* META */

.product-new-meta {

    display: grid;

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

    margin-bottom: 30px;

    border-top: 1px solid rgba(218, 169, 58, 0.18);

    border-bottom: 1px solid rgba(218, 169, 58, 0.18);

}


.product-new-meta>div {

    padding: 17px 12px;

    border-right:
        1px solid rgba(218, 169, 58, 0.15);

}


.product-new-meta>div:last-child {

    border-right: none;

}


.product-new-meta span {

    display: block;

    margin-bottom: 7px;

    color: #69756f;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 2px;

}


.product-new-meta strong {

    color: #ffffff;

    font-size: 11px;

    font-weight: 500;

}



/* QUANTITY */

.product-new-quantity {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 20px;

}


.product-new-quantity>span {

    color: #d9a62e;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2px;

}


.quantity-new-control {

    display: flex;

    align-items: center;

    border: 1px solid rgba(218, 169, 58, 0.35);

}


.quantity-new-control button {

    width: 40px;

    height: 38px;

    border: none;

    background: transparent;

    color: #d9a62e;

    font-size: 18px;

    cursor: pointer;

}


.quantity-new-control span {

    min-width: 35px;

    text-align: center;

    color: #ffffff;

    font-size: 12px;

}



/* BUTTONS */

.product-new-actions {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

}


.product-add-cart,
.product-whatsapp {

    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    text-decoration: none;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    cursor: pointer;

    transition: all 0.3s ease;

}


.product-add-cart {

    border: 1px solid #d9a62e;

    background: #d9a62e;

    color: #050806;

}


.product-add-cart:hover {

    background: #f0c75a;

}


.product-whatsapp {

    border: 1px solid rgba(218, 169, 58, 0.45);

    background: transparent;

    color: #d9a62e;

}


.product-whatsapp:hover {

    background: rgba(218, 169, 58, 0.10);

}



/* NOTE */

.product-new-note {

    margin-top: 22px;

    padding: 15px;

    display: flex;

    align-items: center;

    gap: 13px;

    background: rgba(5, 25, 18, 0.60);

    border: 1px solid rgba(218, 169, 58, 0.15);

}


.product-new-note>i {

    color: #d9a62e;

}


.product-new-note strong {

    display: block;

    margin-bottom: 4px;

    color: #ffffff;

    font-size: 9px;

    letter-spacing: 1.5px;

}


.product-new-note p {

    margin: 0;

    color: #78857f;

    font-size: 10px;

}



/* BACK TO SHOP */

.product-back-section {

    padding: 0 30px 70px;

    text-align: center;

    background: #010806;

}


.product-back-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #d9a62e;

    text-decoration: none;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

}


.product-back-link:hover {

    color: #f0c75a;

}



/* RESPONSIVE */

@media (max-width: 900px) {

    .product-new-container {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .product-new-image-card {

        min-height: 480px;

    }


    .product-new-image-wrap {

        height: 390px;

    }

}


@media (max-width: 600px) {

    .product-new-section {

        padding: 60px 20px 50px;

    }


    .product-new-image-card {

        min-height: 400px;

        padding: 18px;

    }


    .product-new-image-wrap {

        height: 320px;

    }


    .product-new-info h1 {

        font-size: 31px;

    }


    .product-new-price {

        font-size: 27px;

    }


    .product-new-meta {

        grid-template-columns: 1fr;

    }


    .product-new-meta>div {

        border-right: none;

        border-bottom:
            1px solid rgba(218, 169, 58, 0.15);

    }


    .product-new-meta>div:last-child {

        border-bottom: none;

    }


    .product-new-actions {

        grid-template-columns: 1fr;

    }


    .product-back-section {

        padding: 0 20px 50px;

    }

}

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

.cart-new-section {
    padding: 110px 30px 70px;
    min-height: 70vh;
}

.cart-new-container {
    max-width: 1200px;
    margin: auto;
}


/* HEADING */

.cart-new-heading {
    text-align: center;
    margin-bottom: 45px;
}

.cart-new-heading p {
    color: #d8a83e;
    font-size: 14px;
    letter-spacing: 3px;
    font-weight: 600;
    margin-bottom: 10px;
}

.cart-new-heading h1 {
    margin: 0;
    color: #ffffff;
    font-family: "Cinzel", serif;
    font-size: 38px;
    letter-spacing: 2px;
}

.cart-new-heading span {
    display: block;
    margin-top: 12px;
    color: #aaa;
}


/* LAYOUT */

.cart-new-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 35px;
    align-items: start;
}


/* CART ITEMS */

.cart-items {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* CART ITEM */

.cart-item {
    display: flex;
    align-items: center;
    gap: 20px;

    padding: 18px;

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

    border: 1px solid rgba(218, 169, 58, 0.25);

    border-radius: 14px;
}


.cart-item-image {
    width: 110px;
    height: 110px;

    border-radius: 10px;

    overflow: hidden;

    background: #050505;

    flex-shrink: 0;
}


.cart-item-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


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


.cart-item-info h3 {
    margin: 0 0 8px;

    color: #ffffff;

    font-family: "Cinzel", serif;

    font-size: 18px;
}


.cart-item-price {
    color: #d8a83e;

    font-weight: 600;

    font-size: 16px;
}


/* SUMMARY */

.cart-summary {
    padding: 28px;

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

    border: 1px solid rgba(218, 169, 58, 0.3);

    border-radius: 15px;

    position: sticky;

    top: 110px;
}


.cart-summary h2 {
    margin-top: 0;
    margin-bottom: 25px;

    color: #ffffff;

    font-family: "Cinzel", serif;

    font-size: 20px;
}


.summary-row {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 16px;

    color: #aaa;

    font-size: 14px;
}


.summary-row strong {
    color: #ffffff;
}


.summary-divider {
    height: 1px;

    background: rgba(218, 169, 58, 0.25);

    margin: 22px 0;
}


.summary-total {
    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #ffffff;

    font-size: 18px;

    margin-bottom: 25px;
}


.summary-total strong {
    color: #d8a83e;

    font-size: 22px;
}


/* CHECKOUT */

.checkout-btn {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    width: 100%;

    padding: 14px 18px;

    border-radius: 8px;

    background: linear-gradient(135deg,
            #d8a83e,
            #f1ce72);

    color: #080808;

    font-weight: 700;

    text-decoration: none;

    transition: 0.3s;
}


.checkout-btn:hover {
    transform: translateY(-2px);
}


/* CONTINUE */

.continue-shopping {
    display: block;

    text-align: center;

    margin-top: 20px;

    color: #d8a83e;

    text-decoration: none;

    font-size: 14px;
}


/* EMPTY CART */

.empty-cart {
    text-align: center;

    padding: 70px 20px;

    border: 1px solid rgba(218, 169, 58, 0.2);

    border-radius: 15px;

    color: #aaa;
}


.empty-cart i {
    font-size: 45px;

    color: #d8a83e;

    margin-bottom: 20px;
}


.empty-cart h2 {
    color: #ffffff;

    font-family: "Cinzel", serif;

    margin-bottom: 10px;
}


.empty-cart-btn {
    display: inline-block;

    margin-top: 20px;

    padding: 12px 25px;

    background: #d8a83e;

    color: #050505;

    text-decoration: none;

    border-radius: 7px;

    font-weight: 600;
}


/* MOBILE */

@media (max-width: 800px) {

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

    .cart-summary {
        position: static;
    }

}


@media (max-width: 500px) {

    .cart-new-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .cart-new-heading h1 {
        font-size: 28px;
    }

    .cart-item {
        gap: 12px;
        padding: 12px;
    }

    .cart-item-image {
        width: 80px;
        height: 80px;
    }

}

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

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}


.quantity-btn {
    width: 32px;
    height: 32px;

    border: 1px solid rgba(218, 169, 58, 0.5);

    background: transparent;

    color: #d8a83e;

    border-radius: 5px;

    font-size: 20px;

    cursor: pointer;

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

    transition: 0.2s;
}


.quantity-btn:hover {
    background: #d8a83e;
    color: #050505;
}


.quantity-number {
    min-width: 30px;

    text-align: center;

    color: #ffffff;

    font-weight: 600;
}


.remove-cart-btn {
    margin-left: 15px;

    border: none;

    background: transparent;

    color: #999;

    cursor: pointer;

    font-size: 13px;

    display: flex;

    align-items: center;

    gap: 6px;
}


.remove-cart-btn:hover {
    color: #d8a83e;
}


.cart-item-total {
    margin-top: 10px;

    color: #999;

    font-size: 13px;
}


.cart-item-total strong {
    color: #ffffff;

    margin-left: 5px;
}


@media (max-width: 500px) {

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

    .remove-cart-btn {
        margin-left: 0;
    }

}

/* =========================================
   SHELF PAGE
========================================= */

.shelf-new-section {
    padding: 110px 30px 80px;
    min-height: 70vh;
}

.shelf-new-container {
    max-width: 1200px;
    margin: auto;
}


/* HEADING */

.shelf-new-heading {
    text-align: center;
    margin-bottom: 45px;
}

.shelf-new-heading p {
    color: #d8a83e;
    font-size: 14px;
    letter-spacing: 3px;
    font-weight: 600;
    margin-bottom: 10px;
}

.shelf-new-heading h1 {
    margin: 0;

    color: #ffffff;

    font-family: "Cinzel", serif;

    font-size: 38px;

    letter-spacing: 2px;
}

.shelf-new-heading span {
    display: block;

    margin-top: 12px;

    color: #aaa;
}


/* SHELF GRID */

.shelf-grid {
    display: grid;

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

    gap: 25px;
}


/* SHELF CARD */

.shelf-card {
    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(218, 169, 58, 0.3);

    border-radius: 14px;

    overflow: hidden;

    transition: 0.3s;
}

.shelf-card:hover {
    transform: translateY(-4px);

    border-color: rgba(218, 169, 58, 0.7);
}


/* IMAGE */

.shelf-card-image {
    height: 260px;

    background: #050505;

    display: flex;

    align-items: center;

    justify-content: center;
}

.shelf-card-image img {
    width: 100%;

    height: 100%;

    object-fit: contain;
}


/* INFO */

.shelf-card-info {
    padding: 20px;
}

.shelf-card-info h3 {
    color: #ffffff;

    font-family: "Cinzel", serif;

    font-size: 18px;

    margin: 0 0 10px;
}

.shelf-card-price {
    color: #d8a83e;

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 18px;
}


/* BUTTONS */

.shelf-card-actions {
    display: flex;

    gap: 10px;
}

.shelf-cart-btn,
.shelf-remove-btn {
    flex: 1;

    padding: 11px;

    border-radius: 7px;

    cursor: pointer;

    font-size: 12px;

    font-weight: 600;
}


.shelf-cart-btn {
    border: none;

    background: linear-gradient(135deg,
            #d8a83e,
            #f1ce72);

    color: #050505;
}


.shelf-remove-btn {
    border: 1px solid rgba(218, 169, 58, 0.5);

    background: transparent;

    color: #d8a83e;
}


.shelf-remove-btn:hover {
    background: rgba(218, 169, 58, 0.1);
}


/* EMPTY SHELF */

.empty-shelf {
    grid-column: 1 / -1;

    text-align: center;

    padding: 70px 20px;

    border: 1px solid rgba(218, 169, 58, 0.2);

    border-radius: 15px;

    color: #aaa;
}


.empty-shelf i {
    display: block;

    color: #d8a83e;

    font-size: 45px;

    margin-bottom: 20px;
}


.empty-shelf h2 {
    color: #ffffff;

    font-family: "Cinzel", serif;

    margin-bottom: 10px;
}


.empty-shelf p {
    margin-bottom: 20px;
}


.empty-shelf a {
    display: inline-block;

    padding: 12px 25px;

    background: #d8a83e;

    color: #050505;

    border-radius: 7px;

    text-decoration: none;

    font-weight: 600;
}


/* MOBILE */

@media (max-width: 850px) {

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

}


@media (max-width: 550px) {

    .shelf-new-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .shelf-new-heading h1 {
        font-size: 28px;
    }

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

}

/* =========================================
   NAV SHELF + CART
========================================= */

.nav-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.shelf-link,
.cart-link {
    display: flex;
    align-items: center;
    gap: 5px;

    color: #ffffff;

    text-decoration: none;

    font-size: 16px;
}

.shelf-link i,
.cart-link i {
    color: #d8a83e;
}

#shelf-count,
#cart-count {
    color: #ffffff;
    font-size: 14px;
}

/* =========================================
   MY SHELF - PREMIUM DESIGN
========================================= */

.shelf-new-section {
    padding: 90px 30px 80px !important;
    background: linear-gradient(180deg,
            #010807 0%,
            #03130f 50%,
            #010807 100%);
}


.shelf-new-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
}


/* =========================================
   SHELF HEADING
========================================= */

.shelf-new-heading {
    text-align: center !important;
    margin-bottom: 45px !important;
}


.shelf-new-heading p {
    margin: 0 0 12px !important;

    color: #d8a83e !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    letter-spacing: 4px !important;
}


.shelf-new-heading h1 {
    margin: 0 !important;

    color: #ffffff !important;

    font-family: "Cinzel", serif !important;

    font-size: 42px !important;

    font-weight: 600 !important;

    letter-spacing: 2px !important;
}


.shelf-new-heading span {
    display: block !important;

    margin-top: 12px !important;

    color: #aeb8b5 !important;

    font-size: 14px !important;
}


/* =========================================
   SHELF GRID
========================================= */

.shelf-grid {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 24px !important;
}


/* =========================================
   SHELF CARD
========================================= */

.shelf-card {
    overflow: hidden !important;

    background: rgba(4, 25, 20, 0.78) !important;

    border: 1px solid rgba(218, 169, 58, 0.30) !important;

    border-radius: 14px !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25) !important;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease !important;
}


.shelf-card:hover {
    transform: translateY(-5px) !important;

    border-color: rgba(218, 169, 58, 0.65) !important;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(218, 169, 58, 0.08) !important;
}


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

.shelf-card-image {
    height: 270px !important;

    padding: 18px !important;

    background:
        linear-gradient(180deg,
            #020908 0%,
            #041812 100%) !important;

    border-bottom:
        1px solid rgba(218, 169, 58, 0.18) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;
}


.shelf-card-image img {
    width: 100% !important;

    height: 100% !important;

    object-fit: contain !important;

    transition: transform 0.3s ease !important;
}


.shelf-card:hover .shelf-card-image img {
    transform: scale(1.04) !important;
}


/* =========================================
   PRODUCT INFORMATION
========================================= */

.shelf-card-info {
    padding: 20px !important;
}


.shelf-card-info h3 {
    margin: 0 0 10px !important;

    color: #ffffff !important;

    font-family: "Cinzel", serif !important;

    font-size: 17px !important;

    font-weight: 600 !important;

    line-height: 1.4 !important;
}


.shelf-card-price {
    margin-bottom: 18px !important;

    color: #d8a83e !important;

    font-size: 19px !important;

    font-weight: 700 !important;
}


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

.shelf-card-actions {
    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    gap: 10px !important;
}


.shelf-cart-btn,
.shelf-remove-btn {
    min-height: 40px !important;

    border-radius: 7px !important;

    padding: 10px 8px !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 11px !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    transition: 0.25s ease !important;
}


.shelf-cart-btn {
    border: none !important;

    background:
        linear-gradient(135deg,
            #d8a83e,
            #f1ce72) !important;

    color: #050505 !important;
}


.shelf-cart-btn:hover {
    transform: translateY(-2px) !important;

    box-shadow:
        0 5px 15px rgba(218, 169, 58, 0.20) !important;
}


.shelf-remove-btn {
    border:
        1px solid rgba(218, 169, 58, 0.45) !important;

    background: transparent !important;

    color: #d8a83e !important;
}


.shelf-remove-btn:hover {
    background:
        rgba(218, 169, 58, 0.08) !important;

    border-color:
        rgba(218, 169, 58, 0.75) !important;
}


/* =========================================
   EMPTY SHELF
========================================= */

.empty-shelf {
    grid-column: 1 / -1 !important;

    padding: 80px 25px !important;

    text-align: center !important;

    background:
        rgba(4, 25, 20, 0.65) !important;

    border:
        1px solid rgba(218, 169, 58, 0.25) !important;

    border-radius: 14px !important;
}


.empty-shelf i {
    display: block !important;

    margin-bottom: 18px !important;

    color: #d8a83e !important;

    font-size: 42px !important;
}


.empty-shelf h2 {
    margin: 0 0 10px !important;

    color: #ffffff !important;

    font-family: "Cinzel", serif !important;
}


.empty-shelf p {
    color: #9fa9a5 !important;

    margin-bottom: 22px !important;
}


.empty-shelf a {
    display: inline-block !important;

    padding: 12px 24px !important;

    border-radius: 7px !important;

    background:
        linear-gradient(135deg,
            #d8a83e,
            #f1ce72) !important;

    color: #050505 !important;

    text-decoration: none !important;

    font-size: 13px !important;

    font-weight: 600 !important;
}


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

@media (max-width: 900px) {

    .shelf-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


@media (max-width: 600px) {

    .shelf-new-section {
        padding:
            70px 18px 60px !important;
    }


    .shelf-new-heading h1 {
        font-size: 30px !important;
    }


    .shelf-grid {
        grid-template-columns: 1fr !important;
    }


    .shelf-card-image {
        height: 240px !important;
    }

}


@media (max-width: 400px) {

    .shelf-card-actions {
        grid-template-columns: 1fr !important;
    }

}

/* =========================================
   SHELF HEADING - PREMIUM
========================================= */

.shelf-new-heading p {
    font-size: 12px !important;
    letter-spacing: 4px !important;
    color: #d8a83e !important;
    margin-bottom: 14px !important;
}


.shelf-new-heading h1 {
    font-size: 42px !important;
    letter-spacing: 3px !important;
    margin-bottom: 15px !important;
}


.shelf-gold-line {
    width: 55px;
    height: 2px;

    margin: 0 auto 15px;

    background: #d8a83e;
}


.shelf-new-heading span {
    color: #aeb8b5 !important;

    font-size: 12px !important;

    letter-spacing: 2px !important;

    font-weight: 500 !important;
}

/* =========================================
   SHELF HEADER SPACING
========================================= */

.shelf-new-section {
    padding-top: 110px !important;
}

.shelf-new-heading {
    margin-bottom: 45px !important;
}

.shelf-link {
    color: #d8a83e !important;
}

/* =========================================
   PREMIUM SHELF HERO
========================================= */

.shelf-new-section {
    padding: 105px 30px 90px !important;
}


.shelf-new-heading {
    text-align: center !important;
    margin-bottom: 55px !important;
}


.shelf-new-heading p {
    margin: 0 0 16px !important;

    color: #d8a83e !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 11px !important;

    font-weight: 600 !important;

    letter-spacing: 5px !important;

    text-transform: uppercase !important;
}


.shelf-new-heading h1 {
    margin: 0 !important;

    color: #ffffff !important;

    font-family: "Cinzel", serif !important;

    font-size: 48px !important;

    font-weight: 600 !important;

    letter-spacing: 4px !important;

    line-height: 1.2 !important;
}


.shelf-new-heading h1 span {
    color: #d8a83e !important;
}


.shelf-gold-line {
    width: 100px !important;

    height: 2px !important;

    margin: 20px auto 18px !important;

    background: linear-gradient(90deg,
            transparent,
            #d8a83e,
            transparent) !important;

    box-shadow:
        0 0 12px rgba(218, 169, 58, 0.45) !important;
}


.shelf-new-heading>span {
    display: block !important;

    color: #9fa9a5 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 11px !important;

    font-weight: 500 !important;

    letter-spacing: 3px !important;

    text-transform: uppercase !important;
}


@media (max-width: 600px) {

    .shelf-new-heading h1 {
        font-size: 34px !important;

        letter-spacing: 2px !important;
    }

    .shelf-new-heading p {
        letter-spacing: 3px !important;
    }

    .shelf-new-heading>span {
        letter-spacing: 2px !important;
    }

}

/* =========================================
   PRICING HEADING GOLD LINE
========================================= */

.pricing-new-heading .gold-line {
    display: block !important;

    width: 75px !important;
    height: 2px !important;

    margin: 22px auto 20px !important;

    background: linear-gradient(90deg,
            transparent,
            #d8a83e,
            transparent) !important;

    box-shadow:
        0 0 12px rgba(218, 169, 58, 0.45) !important;
}

/* =========================================
   PRICING HEADING GOLD LINE - SHOP STYLE
========================================= */

.pricing-small-line {
    width: 170px !important;
    height: 2px !important;

    margin: 24px auto !important;

    background: linear-gradient(90deg,
            transparent 0%,
            rgba(217, 166, 46, 0.35) 10%,
            #d9a62e 30%,
            #f0c75e 50%,
            #d9a62e 70%,
            rgba(217, 166, 46, 0.35) 90%,
            transparent 100%) !important;

    box-shadow:
        0 0 6px rgba(217, 166, 46, 0.9),
        0 0 14px rgba(217, 166, 46, 0.6),
        0 0 25px rgba(217, 166, 46, 0.3) !important;
}

/* =========================================
   FINAL HEADER + HERO SEPARATION
========================================= */

.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;

    height: 76px !important;

    background: rgba(2, 10, 8, 0.92) !important;

    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;

    border-bottom: 1px solid rgba(217, 166, 46, 0.25) !important;
}

/* =========================================
   COLLECTION BUTTON - FINAL FIX
========================================= */

.collection-card {
    position: relative !important;
}

.collection-card::before,
.collection-card::after {
    pointer-events: none !important;
}

.collection-content {
    position: relative !important;
    z-index: 10 !important;
}

.collection-content a {
    position: relative !important;
    z-index: 100 !important;

    pointer-events: auto !important;

    cursor: pointer !important;

    display: inline-flex !important;
}
/* =========================================
   HEADER SEARCH
========================================= */

.header-search {
    position: absolute;

    top: 75px;
    right: 30px;

    width: 320px;

    display: none;

    align-items: center;

    background: rgba(1, 8, 6, 0.96);

    border: 1px solid rgba(218, 169, 58, 0.55);

    padding: 8px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.45);

    z-index: 9999;
}

.header-search.show {
    display: flex;
}

.header-search input {
    width: 100%;

    background: transparent;

    border: none;

    outline: none;

    color: #fff;

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    padding: 10px 12px;
}

.header-search input::placeholder {
    color: #aaa;
}

.header-search button {
    background: transparent;

    border: none;

    color: #d8a93a;

    cursor: pointer;

    font-size: 16px;

    padding: 8px;
}


/* SEARCH ICON */

.search-toggle {
    cursor: pointer;
}
/* =====================================================
   SC ANIME LOGIN + REGISTER
===================================================== */


/* =========================
   AUTH PAGE
========================= */

.auth-page {

    min-height: 100vh;

    padding: 55px 20px 40px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(0, 10, 7, 0.68),
            rgba(0, 10, 7, 0.88)
        ),
        url("../images/header-5.png");

    background-size: cover;

    background-position: center;

    background-attachment: fixed;
}


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

.auth-brand {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    text-decoration: none;

    margin-bottom: 30px;

    position: relative;

    z-index: 2;
}


.auth-brand img {

    width: 78px;

    height: 78px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 12px
            rgba(217,166,46,0.35)
        );
}


.auth-brand-text {

    text-align: left;
}


.auth-brand-text h1 {

    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 34px;

    font-weight: 700;

    letter-spacing: 5px;

    background:
        linear-gradient(
            90deg,
            #c99728,
            #f6d778,
            #d9a62e
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.auth-brand-text p {

    margin: 4px 0 0;

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

    font-size: 9px;

    letter-spacing: 4px;

}


/* =========================
   AUTH CARD
========================= */

.auth-card {

    width: 100%;

    max-width: 565px;

    padding: 48px 50px;

    position: relative;

    z-index: 2;

    background:
        rgba(1, 12, 9, 0.88);

    border:
        1px solid
        rgba(217,166,46,0.48);

    border-radius: 4px;

    box-shadow:

        0 0 35px
        rgba(217,166,46,0.08),

        inset 0 0 40px
        rgba(217,166,46,0.025);

    backdrop-filter: blur(16px);
}


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

.auth-heading {

    text-align: center;

    margin-bottom: 34px;
}


.auth-heading > p {

    margin: 0 0 12px;

    color: #d9a62e;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 4px;
}


.auth-heading h2 {

    margin: 0;

    color: #ffffff;

    font-family: "Cinzel", serif;

    font-size: 34px;

    font-weight: 700;

    letter-spacing: 2px;
}


.auth-heading h2 span {

    color: #d9a62e;

}


.auth-heading > span {

    display: block;

    margin-top: 14px;

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

    font-size: 12px;
}


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

.auth-gold-line {

    width: 105px;

    height: 2px;

    margin: 20px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c99728,
            #f4d477,
            #c99728,
            transparent
        );

    box-shadow:
        0 0 8px
        rgba(217,166,46,0.85),

        0 0 18px
        rgba(217,166,46,0.35);
}


/* =========================
   FIELD
========================= */

.auth-field {

    margin-bottom: 21px;
}


.auth-field label {

    display: block;

    margin-bottom: 9px;

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

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}


/* =========================
   INPUT
========================= */

.auth-input {

    width: 100%;

    min-height: 54px;

    display: flex;

    align-items: center;

    padding: 0 15px;

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

    border:
        1px solid
        rgba(217,166,46,0.27);

    transition: 0.3s ease;
}


.auth-input:focus-within {

    border-color: #d9a62e;

    box-shadow:
        0 0 15px
        rgba(217,166,46,0.13);
}


.auth-input > i {

    width: 20px;

    margin-right: 13px;

    color: #d9a62e;

    font-size: 15px;

    text-align: center;
}


.auth-input input {

    flex: 1;

    width: 100%;

    height: 52px;

    border: none;

    outline: none;

    background: transparent;

    color: #ffffff;

    font-family: "Poppins", sans-serif;

    font-size: 13px;
}


.auth-input input::placeholder {

    color:
        rgba(255,255,255,0.32);
}


/* =========================
   PASSWORD TOGGLE
========================= */

.password-toggle {

    border: none;

    outline: none;

    background: transparent;

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

    cursor: pointer;

    padding: 5px;

    font-size: 14px;

    transition: 0.3s;
}


.password-toggle:hover {

    color: #d9a62e;
}


/* =========================
   OPTIONS
========================= */

.auth-options {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin: 5px 0 27px;

    font-size: 11px;
}


.auth-options label {

    display: flex;

    align-items: center;

    gap: 7px;

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

    cursor: pointer;
}


.auth-options input {

    accent-color: #d9a62e;
}


.auth-options a {

    color: #d9a62e;

    text-decoration: none;

    transition: 0.3s;
}


.auth-options a:hover {

    color: #f4d477;

}


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

.auth-submit {

    width: 100%;

    min-height: 55px;

    border: 1px solid #d9a62e;

    background:
        linear-gradient(
            135deg,
            #bd8b22,
            #e9bc42
        );

    color: #090b08;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    font-family: "Poppins", sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    cursor: pointer;

    transition: 0.3s ease;
}


.auth-submit:hover {

    transform: translateY(-2px);

    box-shadow:
        0 0 20px
        rgba(217,166,46,0.35);
}


.auth-submit i {

    font-size: 13px;
}


/* =========================
   LOGIN / REGISTER SWITCH
========================= */

.auth-switch {

    margin-top: 28px;

    padding-top: 23px;

    border-top:
        1px solid
        rgba(217,166,46,0.14);

    text-align: center;
}


.auth-switch span {

    display: block;

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

    font-size: 11px;

    margin-bottom: 8px;
}


.auth-switch a {

    color: #d9a62e;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    transition: 0.3s;
}


.auth-switch a:hover {

    color: #f4d477;
}


/* =========================
   BACK TO HOME
========================= */

.auth-back {

    margin-top: 22px;

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

    text-decoration: none;

    font-size: 11px;

    transition: 0.3s;

    position: relative;

    z-index: 2;
}


.auth-back:hover {

    color: #d9a62e;
}


/* =========================
   REGISTER CARD
========================= */

.register-card {

    max-width: 565px;
}


/* =========================
   REGISTER TERMS
========================= */

.register-terms {

    justify-content: flex-start;

    margin-top: 3px;

    margin-bottom: 25px;
}


.register-terms label {

    font-size: 10px;
}


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

@media (max-width: 600px) {

    .auth-page {

        padding: 35px 15px;

        background-attachment: scroll;
    }


    .auth-brand {

        gap: 12px;

        margin-bottom: 22px;
    }


    .auth-brand img {

        width: 58px;

        height: 58px;
    }


    .auth-brand-text h1 {

        font-size: 23px;

        letter-spacing: 3px;
    }


    .auth-brand-text p {

        font-size: 7px;

        letter-spacing: 2px;
    }


    .auth-card {

        padding: 32px 22px;

        max-width: 100%;
    }


    .auth-heading h2 {

        font-size: 27px;
    }


    .auth-heading > span {

        font-size: 11px;
    }


    .auth-options {

        font-size: 10px;
    }

}
/* =========================================
   SC ANIME LOGO - CIRCLE SHAPE
========================================= */

.auth-brand img {
    width: 100px !important;
    height: 100px !important;

    border-radius: 50% !important;

    object-fit: cover !important;

    border: 3px solid #d9a62e !important;

    box-shadow:
        0 0 12px rgba(217, 166, 46, 0.35),
        0 0 25px rgba(217, 166, 46, 0.15) !important;
}
/* =====================================================
   SC ANIME CHECKOUT PAGE
===================================================== */

.checkout-new-section {
    min-height: 100vh;
    padding: 150px 30px 80px;
    background:
        linear-gradient(
            rgba(1, 10, 7, 0.88),
            rgba(1, 10, 7, 0.94)
        ),
        url("../images/header-5.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.checkout-new-container {
    max-width: 1200px;
    margin: auto;
}


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

.checkout-new-heading {
    text-align: center;
    margin-bottom: 45px;
}

.checkout-new-heading > p {
    margin: 0 0 10px;
    color: #d9a62e;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
}

.checkout-new-heading h1 {
    margin: 0;
    color: #ffffff;
    font-family: "Cinzel", serif;
    font-size: 42px;
    letter-spacing: 3px;
}

.checkout-new-heading h1 span {
    color: #d9a62e;
}

.checkout-new-heading > span {
    color: rgba(255,255,255,0.55);
    font-size: 12px;
}


/* =========================
   MAIN LAYOUT
========================= */

.checkout-new-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.8fr);
    gap: 28px;
    align-items: start;
}


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

.checkout-details-card {
    padding: 38px;
    background: rgba(1, 12, 9, 0.86);
    border: 1px solid rgba(217,166,46,0.32);
    box-shadow:
        0 0 30px rgba(217,166,46,0.05),
        inset 0 0 30px rgba(217,166,46,0.02);
    backdrop-filter: blur(14px);
}


/* =========================
   CARD HEADING
========================= */

.checkout-card-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.checkout-heading-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(217,166,46,0.5);
    color: #d9a62e;
    background: rgba(217,166,46,0.04);
}

.checkout-card-heading p {
    margin: 0 0 3px;
    color: #d9a62e;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
}

.checkout-card-heading h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Cinzel", serif;
    font-size: 17px;
    letter-spacing: 1px;
}


/* =========================
   FORM
========================= */

.checkout-field {
    margin-bottom: 20px;
}

.checkout-field label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255,255,255,0.68);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.8px;
}

.checkout-field input,
.checkout-field textarea {
    width: 100%;
    border: 1px solid rgba(217,166,46,0.22);
    outline: none;
    background: rgba(255,255,255,0.035);
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    transition: 0.3s;
}

.checkout-field input {
    height: 52px;
    padding: 0 15px;
}

.checkout-field textarea {
    padding: 14px 15px;
    resize: vertical;
    min-height: 105px;
}

.checkout-field input::placeholder,
.checkout-field textarea::placeholder {
    color: rgba(255,255,255,0.28);
}

.checkout-field input:focus,
.checkout-field textarea:focus {
    border-color: #d9a62e;
    box-shadow: 0 0 12px rgba(217,166,46,0.12);
}


/* =========================
   CITY + PINCODE
========================= */

.checkout-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}


/* =========================
   PAYMENT
========================= */

.payment-section {
    margin-top: 35px;
    padding-top: 30px;
    border-top: 1px solid rgba(217,166,46,0.15);
}

.payment-section .checkout-card-heading {
    margin-bottom: 20px;
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(217,166,46,0.2);
    background: rgba(255,255,255,0.025);
    transition: 0.3s;
}

.payment-option:hover {
    border-color: rgba(217,166,46,0.5);
}

.payment-option > i {
    width: 25px;
    color: #d9a62e;
    font-size: 18px;
    text-align: center;
}

.payment-option > div {
    flex: 1;
}

.payment-option strong {
    display: block;
    color: #eeeeee;
    font-size: 11px;
    letter-spacing: 1px;
}

.payment-option span {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,0.45);
    font-size: 9px;
}

.payment-option input {
    accent-color: #d9a62e;
    cursor: pointer;
}


/* =========================
   SUBMIT
========================= */

.checkout-submit {
    width: 100%;
    min-height: 55px;
    margin-top: 25px;
    border: 1px solid #d9a62e;
    background:
        linear-gradient(
            135deg,
            #bd8b22,
            #e9bc42
        );
    color: #090b08;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.3s;
}

.checkout-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(217,166,46,0.3);
}


/* =========================
   ORDER SUMMARY
========================= */

.checkout-summary {
    padding: 30px;
    position: sticky;
    top: 115px;
    background: rgba(1, 12, 9, 0.9);
    border: 1px solid rgba(217,166,46,0.38);
    box-shadow:
        0 0 25px rgba(217,166,46,0.06);
    backdrop-filter: blur(14px);
}

.checkout-summary-heading {
    margin-bottom: 25px;
}

.checkout-summary-heading p {
    margin: 0 0 7px;
    color: #d9a62e;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 3px;
}

.checkout-summary-heading h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Cinzel", serif;
    font-size: 21px;
    letter-spacing: 1px;
}


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

.checkout-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.checkout-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(217,166,46,0.1);
}

.checkout-item-image {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    border: 1px solid rgba(217,166,46,0.22);
    background: rgba(255,255,255,0.03);
    overflow: hidden;
}

.checkout-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

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

.checkout-item-info h3 {
    margin: 0 0 4px;
    color: #eeeeee;
    font-size: 11px;
    font-weight: 500;
}

.checkout-item-info span {
    color: rgba(255,255,255,0.42);
    font-size: 9px;
}

.checkout-item-price {
    color: #d9a62e;
    font-size: 11px;
    font-weight: 600;
}


/* =========================
   SUMMARY ROWS
========================= */

.checkout-summary-divider {
    height: 1px;
    margin: 20px 0;
    background: rgba(217,166,46,0.14);
}

.checkout-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 13px;
    color: rgba(255,255,255,0.55);
    font-size: 11px;
}

.checkout-summary-row strong {
    color: #eeeeee;
    font-weight: 500;
}

.checkout-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checkout-total span {
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.checkout-total strong {
    color: #f0c75e;
    font-size: 22px;
    font-weight: 600;
}


/* =========================
   SECURE MESSAGE
========================= */

.checkout-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
    padding-top: 18px;
    border-top: 1px solid rgba(217,166,46,0.1);
    color: rgba(255,255,255,0.4);
    font-size: 9px;
    text-align: center;
}

.checkout-secure i {
    color: #d9a62e;
}


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

@media (max-width: 900px) {

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

    .checkout-summary {
        position: static;
    }

}


@media (max-width: 600px) {

    .checkout-new-section {
        padding: 125px 15px 50px;
        background-attachment: scroll;
    }

    .checkout-new-heading h1 {
        font-size: 32px;
    }

    .checkout-details-card {
        padding: 25px 20px;
    }

    .checkout-summary {
        padding: 25px 20px;
    }

    .checkout-field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .checkout-card-heading h2 {
        font-size: 14px;
    }

    .payment-option {
        padding: 13px;
    }

}

.checkout-page-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin-top: 12px;
    border: 1px solid #d9a62e;
    background: transparent;
    color: #d9a62e !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: 0.3s;
}

.checkout-page-btn:hover {
    background: #d9a62e;
    color: #050805 !important;
    box-shadow: 0 0 18px rgba(217, 166, 46, 0.25);
}
/* =====================================
   ADMIN LOGIN PAGE
===================================== */

.admin-login-page {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 40px 20px;

    background:
        radial-gradient(
            circle at top,
            rgba(25, 70, 50, 0.35),
            transparent 45%
        ),
        #050805;

}



/* =====================================
   ADMIN BRAND
===================================== */

.admin-login-brand {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 28px;

    text-decoration: none;

}


.admin-login-brand img {

    width: 58px;

    height: 58px;

    object-fit: cover;

    border-radius: 50%;

    border: 1px solid #d9a62e;

    box-shadow:
        0 0 18px
        rgba(217, 166, 46, 0.25);

}


.admin-login-brand h1 {

    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 24px;

    letter-spacing: 3px;

    background:
        linear-gradient(
            90deg,
            #f4d06f,
            #d9a62e
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.admin-login-brand p {

    margin: 4px 0 0;

    color: #999;

    font-family: "Poppins", sans-serif;

    font-size: 9px;

    letter-spacing: 3px;

}



/* =====================================
   ADMIN LOGIN CARD
===================================== */

.admin-login-card {

    width: 100%;

    max-width: 440px;

    padding: 42px 40px;

    background:
        rgba(10, 18, 13, 0.88);

    border: 1px solid
        rgba(217, 166, 46, 0.35);

    box-shadow:
        0 0 35px
        rgba(0, 0, 0, 0.45);

    backdrop-filter: blur(12px);

}



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

.admin-login-heading {

    text-align: center;

    margin-bottom: 32px;

}


.admin-login-heading > span {

    color: #d9a62e;

    font-size: 9px;

    letter-spacing: 3px;

}


.admin-login-heading h2 {

    margin: 10px 0 12px;

    color: #f5f5f5;

    font-family: "Cinzel", serif;

    font-size: 28px;

    letter-spacing: 2px;

}


.admin-login-heading h2 strong {

    color: #d9a62e;

    font-weight: 700;

}


.admin-gold-line {

    width: 55px;

    height: 1px;

    margin: 0 auto 12px;

    background: #d9a62e;

}


.admin-login-heading p {

    margin: 0;

    color: #888;

    font-family: "Poppins", sans-serif;

    font-size: 12px;

}



/* =====================================
   FIELD
===================================== */

.admin-field {

    margin-bottom: 22px;

}


.admin-field label {

    display: block;

    margin-bottom: 8px;

    color: #c8c8c8;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 1.5px;

}


.admin-input {

    position: relative;

    display: flex;

    align-items: center;

}


.admin-input > i {

    position: absolute;

    left: 15px;

    color: #d9a62e;

    font-size: 13px;

}


.admin-input input {

    width: 100%;

    height: 48px;

    padding: 0 45px;

    border: 1px solid
        rgba(217, 166, 46, 0.25);

    outline: none;

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

    color: #fff;

    font-family: "Poppins", sans-serif;

    font-size: 12px;

    transition: 0.3s;

}


.admin-input input::placeholder {

    color: #666;

}


.admin-input input:focus {

    border-color: #d9a62e;

    box-shadow:
        0 0 12px
        rgba(217, 166, 46, 0.12);

}



/* =====================================
   PASSWORD TOGGLE
===================================== */

.admin-password-toggle {

    position: absolute;

    right: 12px;

    border: none;

    background: transparent;

    color: #777;

    cursor: pointer;

    font-size: 13px;

}


.admin-password-toggle:hover {

    color: #d9a62e;

}



/* =====================================
   OPTIONS
===================================== */

.admin-login-options {

    display: flex;

    align-items: center;

    margin-bottom: 25px;

}


.admin-login-options label {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #888;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

    cursor: pointer;

}


.admin-login-options input {

    accent-color: #d9a62e;

}



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

.admin-login-btn {

    width: 100%;

    min-height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border: 1px solid #d9a62e;

    background:
        linear-gradient(
            90deg,
            #d9a62e,
            #f0c85a
        );

    color: #050805;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    cursor: pointer;

    transition: 0.3s;

}


.admin-login-btn:hover {

    box-shadow:
        0 0 22px
        rgba(217, 166, 46, 0.3);

    transform: translateY(-1px);

}



/* =====================================
   BACK TO STORE
===================================== */

.admin-back-store {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 25px;

    color: #777;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

    text-decoration: none;

    transition: 0.3s;

}


.admin-back-store:hover {

    color: #d9a62e;

}



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

@media (max-width: 480px) {

    .admin-login-page {

        padding: 30px 15px;

    }


    .admin-login-card {

        padding: 35px 24px;

    }


    .admin-login-heading h2 {

        font-size: 24px;

    }

}
/* =====================================
   ADMIN DASHBOARD
===================================== */

.admin-dashboard {

    min-height: 100vh;

    display: flex;

    background: #050805;

    color: #fff;

    font-family: "Poppins", sans-serif;

}



/* =====================================
   SIDEBAR
===================================== */

.admin-sidebar {

    width: 250px;

    min-height: 100vh;

    position: fixed;

    left: 0;

    top: 0;

    display: flex;

    flex-direction: column;

    padding: 25px 18px;

    background:
        rgba(7, 15, 10, 0.97);

    border-right: 1px solid
        rgba(217, 166, 46, 0.18);

}



/* BRAND */

.admin-sidebar-brand {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 8px 8px 30px;

    text-decoration: none;

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

}


.admin-sidebar-brand img {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    border: 1px solid #d9a62e;

}


.admin-sidebar-brand h2 {

    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 18px;

    letter-spacing: 2px;

    color: #d9a62e;

}


.admin-sidebar-brand span {

    display: block;

    margin-top: 3px;

    color: #777;

    font-size: 8px;

    letter-spacing: 2px;

}



/* NAV */

.admin-nav {

    flex: 1;

    padding-top: 28px;

}


.admin-nav-link {

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 45px;

    margin-bottom: 7px;

    padding: 0 14px;

    color: #858585;

    text-decoration: none;

    font-size: 11px;

    letter-spacing: 0.5px;

    transition: 0.3s;

}


.admin-nav-link i {

    width: 18px;

    text-align: center;

    font-size: 13px;

}


.admin-nav-link:hover {

    color: #d9a62e;

    background:
        rgba(217, 166, 46, 0.05);

}


.admin-nav-link.active {

    color: #d9a62e;

    background:
        rgba(217, 166, 46, 0.08);

    border-left: 2px solid #d9a62e;

}



/* SIDEBAR BOTTOM */

.admin-sidebar-bottom {

    padding-top: 18px;

    border-top: 1px solid
        rgba(255, 255, 255, 0.06);

}


.admin-logout:hover {

    color: #d96b5f;

}



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

.admin-main {

    width: calc(100% - 250px);

    margin-left: 250px;

    padding: 32px;

}



/* =====================================
   TOP BAR
===================================== */

.admin-topbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 32px;

}


.admin-topbar p {

    margin: 0 0 5px;

    color: #d9a62e;

    font-size: 9px;

    letter-spacing: 3px;

}


.admin-topbar h1 {

    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 27px;

    letter-spacing: 2px;

}


.admin-profile {

    display: flex;

    align-items: center;

    gap: 11px;

}


.admin-profile-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid
        rgba(217, 166, 46, 0.4);

    color: #d9a62e;

}


.admin-profile strong {

    display: block;

    font-size: 11px;

    font-weight: 500;

}


.admin-profile span {

    display: block;

    margin-top: 3px;

    color: #777;

    font-size: 9px;

}



/* =====================================
   STAT CARDS
===================================== */

.admin-stats {

    display: grid;

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

    gap: 18px;

    margin-bottom: 20px;

}


.admin-stat-card {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 22px;

    background:
        rgba(12, 23, 16, 0.75);

    border: 1px solid
        rgba(217, 166, 46, 0.16);

    transition: 0.3s;

}


.admin-stat-card:hover {

    border-color:
        rgba(217, 166, 46, 0.4);

    transform: translateY(-2px);

}


.admin-stat-icon {

    width: 45px;

    height: 45px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #d9a62e;

    border: 1px solid
        rgba(217, 166, 46, 0.3);

}


.admin-stat-card span {

    color: #777;

    font-size: 8px;

    letter-spacing: 1.5px;

}


.admin-stat-card h2 {

    margin: 5px 0 3px;

    font-family: "Cinzel", serif;

    font-size: 22px;

    color: #eee;

}


.admin-stat-card small {

    color: #666;

    font-size: 8px;

}



/* =====================================
   DASHBOARD GRID
===================================== */

.admin-dashboard-grid {

    display: grid;

    grid-template-columns:
        2fr 1fr;

    gap: 20px;

    margin-bottom: 20px;

}



/* =====================================
   PANELS
===================================== */

.admin-panel {

    padding: 24px;

    background:
        rgba(12, 23, 16, 0.72);

    border: 1px solid
        rgba(217, 166, 46, 0.15);

}


.admin-panel-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 22px;

}


.admin-panel-heading span {

    color: #d9a62e;

    font-size: 8px;

    letter-spacing: 2px;

}


.admin-panel-heading h2 {

    margin: 5px 0 0;

    font-family: "Cinzel", serif;

    font-size: 16px;

    letter-spacing: 1px;

}


.admin-panel-heading select {

    padding: 8px 12px;

    border: 1px solid
        rgba(217, 166, 46, 0.25);

    outline: none;

    background: #09100b;

    color: #aaa;

    font-family: "Poppins", sans-serif;

    font-size: 9px;

}



/* =====================================
   CHART
===================================== */

.admin-chart {

    height: 240px;

    display: flex;

    align-items: flex-end;

}


.chart-bars {

    width: 100%;

    height: 200px;

    display: flex;

    align-items: flex-end;

    justify-content: space-around;

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

}


.chart-column {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    align-items: center;

    gap: 9px;

}


.chart-bar {

    width: 25px;

    min-height: 20px;

    background:
        linear-gradient(
            to top,
            #9b731c,
            #d9a62e
        );

    box-shadow:
        0 0 12px
        rgba(217, 166, 46, 0.15);

}


.chart-column span {

    color: #666;

    font-size: 8px;

    letter-spacing: 1px;

}



/* =====================================
   ORDER STATUS
===================================== */

.order-status-list {

    display: flex;

    flex-direction: column;

}


.order-status-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 17px 0;

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

}


.order-status-item:last-child {

    border-bottom: none;

}


.order-status-item span {

    color: #999;

    font-size: 10px;

}


.order-status-item strong {

    color: #d9a62e;

    font-family: "Cinzel", serif;

    font-size: 17px;

}



/* =====================================
   RECENT ORDERS
===================================== */

.recent-orders-panel {

    margin-bottom: 30px;

}


.admin-view-all {

    color: #d9a62e;

    font-size: 9px;

    letter-spacing: 1px;

    text-decoration: none;

}


.admin-view-all:hover {

    text-decoration: underline;

}


.admin-table-wrapper {

    width: 100%;

    overflow-x: auto;

}


.admin-table {

    width: 100%;

    border-collapse: collapse;

    white-space: nowrap;

}


.admin-table th {

    padding: 13px 12px;

    text-align: left;

    color: #666;

    font-size: 8px;

    letter-spacing: 1.2px;

    font-weight: 500;

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

}


.admin-table td {

    padding: 15px 12px;

    color: #aaa;

    font-size: 9px;

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

}


.admin-table tbody tr:hover {

    background:
        rgba(217, 166, 46, 0.025);

}



/* PAYMENT */

.payment-paid {

    color: #7dbb83;

}


.payment-pending {

    color: #d9a62e;

}



/* STATUS */

.status-processing {

    color: #d9a62e;

}


.status-shipped {

    color: #8aa8c4;

}


.status-pending {

    color: #d9a62e;

}


.status-delivered {

    color: #7dbb83;

}



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

@media (max-width: 1100px) {

    .admin-stats {

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

    }


    .admin-dashboard-grid {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 768px) {

    .admin-sidebar {

        width: 70px;

        padding: 20px 10px;

    }


    .admin-sidebar-brand {

        justify-content: center;

        padding-left: 0;

        padding-right: 0;

    }


    .admin-sidebar-brand img {

        width: 42px;

        height: 42px;

    }


    .admin-sidebar-brand div,
    .admin-nav-link span {

        display: none;

    }


    .admin-nav-link {

        justify-content: center;

        padding: 0;

    }


    .admin-nav-link i {

        font-size: 15px;

    }


    .admin-main {

        width: calc(100% - 70px);

        margin-left: 70px;

        padding: 22px 15px;

    }


    .admin-topbar {

        align-items: flex-start;

    }


    .admin-profile div:last-child {

        display: none;

    }

}



@media (max-width: 520px) {

    .admin-stats {

        grid-template-columns: 1fr;

    }


    .admin-topbar h1 {

        font-size: 22px;

    }


    .admin-profile-icon {

        width: 36px;

        height: 36px;

    }


    .admin-panel {

        padding: 18px;

    }


    .admin-panel-heading h2 {

        font-size: 14px;

    }


    .chart-bar {

        width: 18px;

    }

}
/* =====================================
   ADMIN PRODUCTS PAGE
===================================== */

.admin-product-toolbar {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 30px;

}


.admin-product-search {

    flex: 1;

    position: relative;

}


.admin-product-search i {

    position: absolute;

    left: 15px;

    top: 50%;

    transform: translateY(-50%);

    color: #777;

    font-size: 12px;

}


.admin-product-search input {

    width: 100%;

    height: 45px;

    padding: 0 15px 0 42px;

    border: 1px solid
        rgba(217, 166, 46, 0.2);

    outline: none;

    background:
        rgba(12, 23, 16, 0.72);

    color: #fff;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

}


.admin-product-search input::placeholder {

    color: #666;

}


.admin-product-search input:focus {

    border-color: #d9a62e;

}



.admin-category-filter {

    width: 170px;

    height: 45px;

    padding: 0 12px;

    border: 1px solid
        rgba(217, 166, 46, 0.2);

    outline: none;

    background: #09100b;

    color: #aaa;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

}


.admin-add-product-btn {

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 0 20px;

    border: 1px solid #d9a62e;

    background: #d9a62e;

    color: #050805;

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    transition: 0.3s;

}


.admin-add-product-btn:hover {

    background: #f0c85a;

    box-shadow:
        0 0 18px
        rgba(217, 166, 46, 0.2);

}



/* =====================================
   PRODUCT HEADING
===================================== */

.admin-product-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 15px;

}


.admin-product-heading span {

    color: #d9a62e;

    font-size: 8px;

    letter-spacing: 2px;

}


.admin-product-heading h2 {

    margin: 5px 0 0;

    font-family: "Cinzel", serif;

    font-size: 17px;

    letter-spacing: 1px;

}


.admin-product-heading p {

    margin: 0;

    color: #777;

    font-size: 9px;

}



/* =====================================
   PRODUCT TABLE
===================================== */

.admin-products-panel {

    padding: 10px 24px 24px;

}


.admin-product-table td {

    vertical-align: middle;

}



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

.admin-product-info {

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 260px;

}


.admin-product-info img {

    width: 52px;

    height: 52px;

    object-fit: cover;

    border: 1px solid
        rgba(217, 166, 46, 0.25);

}


.admin-product-info strong {

    display: block;

    max-width: 230px;

    overflow: hidden;

    text-overflow: ellipsis;

    color: #ddd;

    font-size: 10px;

    font-weight: 500;

}


.admin-product-info span {

    display: block;

    margin-top: 5px;

    color: #666;

    font-size: 8px;

}



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

.product-category {

    color: #d9a62e;

    font-size: 8px;

    letter-spacing: 1px;

}



/* =====================================
   ACTIVE STATUS
===================================== */

.product-active {

    color: #7dbb83;

    font-size: 8px;

    letter-spacing: 1px;

}



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

.product-actions {

    display: flex;

    align-items: center;

    gap: 7px;

}


.product-actions button {

    width: 31px;

    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid
        rgba(217, 166, 46, 0.2);

    background: transparent;

    cursor: pointer;

    font-size: 10px;

    transition: 0.3s;

}


.product-edit-btn {

    color: #d9a62e;

}


.product-edit-btn:hover {

    background: #d9a62e;

    color: #050805;

}


.product-delete-btn {

    color: #c96a5e;

}


.product-delete-btn:hover {

    background: #c96a5e;

    color: #fff;

}



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

.admin-no-products {

    min-height: 220px;

    display: none;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

}


.admin-no-products i {

    color: #555;

    font-size: 28px;

}


.admin-no-products p {

    margin: 0;

    color: #666;

    font-size: 10px;

}



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

@media (max-width: 800px) {

    .admin-product-toolbar {

        flex-wrap: wrap;

    }


    .admin-product-search {

        flex-basis: 100%;

    }


    .admin-category-filter {

        flex: 1;

        width: auto;

    }


    .admin-add-product-btn {

        flex: 1;

    }

}


@media (max-width: 520px) {

    .admin-product-toolbar {

        gap: 8px;

    }


    .admin-category-filter,
    .admin-add-product-btn {

        width: 100%;

        flex: none;

    }


    .admin-product-heading h2 {

        font-size: 14px;

    }


    .admin-products-panel {

        padding-left: 15px;

        padding-right: 15px;

    }

}
/* =====================================
   ADMIN ADD PRODUCT
===================================== */

.admin-add-product-layout {

    display: grid;

    grid-template-columns:
        0.8fr 1.5fr;

    gap: 20px;

}


.product-image-panel,
.product-form-panel {

    min-height: 500px;

}


.admin-form-heading {

    margin-bottom: 25px;

}


.admin-form-heading span {

    color: #d9a62e;

    font-size: 8px;

    letter-spacing: 2px;

}


.admin-form-heading h2 {

    margin: 6px 0 0;

    font-family: "Cinzel", serif;

    font-size: 17px;

    letter-spacing: 1px;

}



/* =====================================
   IMAGE UPLOAD
===================================== */

.product-image-upload {

    min-height: 390px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 20px;

    border: 1px dashed
        rgba(217, 166, 46, 0.3);

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

}


.product-image-preview {

    width: 230px;

    height: 230px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border: 1px solid
        rgba(217, 166, 46, 0.2);

    background:
        rgba(12, 23, 16, 0.6);

    overflow: hidden;

}


.product-image-preview i {

    color: #555;

    font-size: 38px;

}


.product-image-preview p {

    margin: 0;

    color: #666;

    font-size: 9px;

}


.product-image-preview img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}


.choose-image-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 18px;

    padding: 12px 20px;

    border: 1px solid #d9a62e;

    color: #d9a62e;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.2px;

    cursor: pointer;

    transition: 0.3s;

}


.choose-image-btn:hover {

    background: #d9a62e;

    color: #050805;

}


.product-image-upload small {

    margin-top: 10px;

    color: #555;

    font-size: 8px;

}



/* =====================================
   FORM
===================================== */

.admin-form-group {

    margin-bottom: 20px;

}


.admin-form-group > label {

    display: block;

    margin-bottom: 8px;

    color: #999;

    font-size: 9px;

    letter-spacing: 1.3px;

}


.admin-form-group input,
.admin-form-group select,
.admin-form-group textarea {

    width: 100%;

    box-sizing: border-box;

    border: 1px solid
        rgba(217, 166, 46, 0.2);

    outline: none;

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

    color: #ddd;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

    transition: 0.3s;

}


.admin-form-group input,
.admin-form-group select {

    height: 45px;

    padding: 0 13px;

}


.admin-form-group textarea {

    padding: 13px;

    resize: vertical;

}


.admin-form-group input::placeholder,
.admin-form-group textarea::placeholder {

    color: #555;

}


.admin-form-group input:focus,
.admin-form-group select:focus,
.admin-form-group textarea:focus {

    border-color: #d9a62e;

    box-shadow:
        0 0 10px
        rgba(217, 166, 46, 0.08);

}


.admin-form-group select option {

    background: #09100b;

    color: #ddd;

}



/* =====================================
   FORM ROW
===================================== */

.admin-form-row {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 15px;

}



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

.price-input {

    position: relative;

}


.price-input span {

    position: absolute;

    left: 13px;

    top: 50%;

    transform: translateY(-50%);

    color: #d9a62e;

    font-size: 11px;

}


.price-input input {

    padding-left: 28px;

}



/* =====================================
   STATUS SWITCH
===================================== */

.admin-status-toggle {

    display: flex !important;

    align-items: center;

    gap: 9px;

    color: #999 !important;

    font-size: 10px !important;

    letter-spacing: 0 !important;

    cursor: pointer;

}


.admin-status-toggle input {

    display: none;

}


.status-switch {

    width: 38px;

    height: 20px;

    position: relative;

    display: inline-block;

    border-radius: 20px;

    background: #333;

    transition: 0.3s;

}


.status-switch::after {

    content: "";

    position: absolute;

    width: 14px;

    height: 14px;

    top: 3px;

    left: 3px;

    border-radius: 50%;

    background: #777;

    transition: 0.3s;

}


.admin-status-toggle input:checked +
.status-switch {

    background: #80611a;

}


.admin-status-toggle input:checked +
.status-switch::after {

    left: 21px;

    background: #d9a62e;

}



/* =====================================
   FORM ACTIONS
===================================== */

.admin-form-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 28px;

    padding-top: 20px;

    border-top: 1px solid
        rgba(255, 255, 255, 0.06);

}


.admin-cancel-btn,
.admin-save-btn {

    min-height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 0 20px;

    font-family: "Poppins", sans-serif;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.3px;

    text-decoration: none;

    cursor: pointer;

    transition: 0.3s;

}


.admin-cancel-btn {

    border: 1px solid
        rgba(255, 255, 255, 0.15);

    color: #777;

    background: transparent;

}


.admin-cancel-btn:hover {

    color: #ddd;

    border-color: #777;

}


.admin-save-btn {

    border: 1px solid #d9a62e;

    color: #050805;

    background: #d9a62e;

}


.admin-save-btn:hover {

    background: #f0c85a;

    box-shadow:
        0 0 18px
        rgba(217, 166, 46, 0.2);

}



/* =====================================
   ADD PRODUCT RESPONSIVE
===================================== */

@media (max-width: 900px) {

    .admin-add-product-layout {

        grid-template-columns: 1fr;

    }


    .product-image-panel,
    .product-form-panel {

        min-height: auto;

    }


    .product-image-upload {

        min-height: 330px;

    }

}


@media (max-width: 520px) {

    .admin-form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .admin-form-actions {

        flex-direction: column;

    }


    .admin-cancel-btn,
    .admin-save-btn {

        width: 100%;

    }


    .product-image-preview {

        width: 190px;

        height: 190px;

    }

}
/* =====================================
   ADMIN ORDERS PAGE
===================================== */

.admin-order-stats {

    display: grid;

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

    gap: 15px;

    margin-bottom: 20px;

}


.admin-order-stat {

    padding: 20px;

    background:
        rgba(12, 23, 16, 0.72);

    border: 1px solid
        rgba(217, 166, 46, 0.15);

}


.admin-order-stat span {

    display: block;

    color: #777;

    font-size: 8px;

    letter-spacing: 1.5px;

}


.admin-order-stat strong {

    display: block;

    margin-top: 7px;

    color: #d9a62e;

    font-family: "Cinzel", serif;

    font-size: 23px;

}



/* =====================================
   ORDER TOOLBAR
===================================== */

.admin-order-toolbar {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 28px;

}


.admin-order-search {

    flex: 1;

    position: relative;

}


.admin-order-search i {

    position: absolute;

    left: 14px;

    top: 50%;

    transform: translateY(-50%);

    color: #777;

    font-size: 11px;

}


.admin-order-search input {

    width: 100%;

    height: 44px;

    box-sizing: border-box;

    padding: 0 15px 0 40px;

    border: 1px solid
        rgba(217, 166, 46, 0.2);

    outline: none;

    background:
        rgba(12, 23, 16, 0.72);

    color: #ddd;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

}


.admin-order-search input::placeholder {

    color: #555;

}


.admin-order-search input:focus {

    border-color: #d9a62e;

}


.admin-order-toolbar select {

    width: 150px;

    height: 44px;

    padding: 0 10px;

    border: 1px solid
        rgba(217, 166, 46, 0.2);

    outline: none;

    background: #09100b;

    color: #aaa;

    font-family: "Poppins", sans-serif;

    font-size: 9px;

}


.admin-order-toolbar select:focus {

    border-color: #d9a62e;

}


.admin-order-toolbar select option {

    background: #09100b;

    color: #ddd;

}



/* =====================================
   ORDER HEADING
===================================== */

.admin-order-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 15px;

}


.admin-order-heading span {

    color: #d9a62e;

    font-size: 8px;

    letter-spacing: 2px;

}


.admin-order-heading h2 {

    margin: 5px 0 0;

    font-family: "Cinzel", serif;

    font-size: 17px;

    letter-spacing: 1px;

}


.admin-order-heading p {

    margin: 0;

    color: #777;

    font-size: 9px;

}



/* =====================================
   ORDER TABLE
===================================== */

.admin-orders-panel {

    padding: 10px 24px 24px;

}


.admin-orders-table td {

    vertical-align: middle;

}


.order-id {

    color: #d9a62e;

    font-size: 9px;

    font-weight: 500;

}


.admin-orders-table td {

    min-width: 75px;

}



/* =====================================
   ORDER STATUS
===================================== */

.order-status {

    font-size: 8px;

    letter-spacing: 0.8px;

}


.order-status.pending {

    color: #d9a62e;

}


.order-status.processing {

    color: #d9a62e;

}


.order-status.shipped {

    color: #8aa8c4;

}


.order-status.delivered {

    color: #7dbb83;

}



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

.view-order-btn {

    min-width: 50px;

    height: 28px;

    border: 1px solid
        rgba(217, 166, 46, 0.3);

    background: transparent;

    color: #d9a62e;

    font-family: "Poppins", sans-serif;

    font-size: 8px;

    letter-spacing: 1px;

    cursor: pointer;

    transition: 0.3s;

}


.view-order-btn:hover {

    background: #d9a62e;

    color: #050805;

}



/* =====================================
   NO ORDERS
===================================== */

.admin-no-orders {

    min-height: 220px;

    display: none;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

}


.admin-no-orders i {

    color: #555;

    font-size: 28px;

}


.admin-no-orders p {

    margin: 0;

    color: #666;

    font-size: 10px;

}



/* =====================================
   ORDERS RESPONSIVE
===================================== */

@media (max-width: 900px) {

    .admin-order-stats {

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

    }


    .admin-order-toolbar {

        flex-wrap: wrap;

    }


    .admin-order-search {

        flex-basis: 100%;

    }


    .admin-order-toolbar select {

        flex: 1;

        width: auto;

    }

}


@media (max-width: 520px) {

    .admin-order-stats {

        grid-template-columns: 1fr 1fr;

    }


    .admin-order-toolbar select {

        width: 100%;

        flex: none;

    }


    .admin-order-heading h2 {

        font-size: 14px;

    }


    .admin-orders-panel {

        padding-left: 15px;

        padding-right: 15px;

    }

}
/* =========================================
   ADMIN CUSTOMERS
========================================= */

.admin-customer-stats {

    display: grid;

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

    gap: 18px;

    margin-bottom: 24px;

}


.admin-customer-stat {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 20px;

    background:
        rgba(10, 25, 20, 0.72);

    border:
        1px solid
        rgba(217, 166, 46, 0.25);

    border-radius: 10px;

    transition: 0.3s;

}


.admin-customer-stat:hover {

    border-color:
        rgba(217, 166, 46, 0.6);

    transform:
        translateY(-2px);

}


.admin-customer-stat .admin-stat-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(217, 166, 46, 0.45);

    color: #d9a62e;

    font-size: 20px;

    border-radius: 8px;

}


.admin-customer-stat span {

    display: block;

    color: #999;

    font-size: 11px;

    letter-spacing: 0.8px;

    margin-bottom: 5px;

}


.admin-customer-stat strong {

    color: #fff;

    font-size: 22px;

    font-weight: 600;

}


/* =========================================
   CUSTOMER PANEL
========================================= */

.admin-customers-panel {

    background:
        rgba(5, 15, 11, 0.78);

    border:
        1px solid
        rgba(217, 166, 46, 0.22);

    border-radius: 10px;

    padding: 24px;

}


.admin-customer-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;

}


.admin-customer-toolbar h2 {

    margin: 0 0 5px;

    color: #fff;

    font-family: "Cinzel", serif;

    font-size: 18px;

    font-weight: 600;

}


.admin-customer-toolbar > div:first-child span {

    color: #888;

    font-size: 11px;

}


.admin-customer-search {

    position: relative;

    width: 310px;

}


.admin-customer-search input {

    width: 100%;

    box-sizing: border-box;

    padding: 12px 40px 12px 15px;

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

    border:
        1px solid
        rgba(217, 166, 46, 0.25);

    border-radius: 6px;

    color: #fff;

    outline: none;

    font-family: "Poppins", sans-serif;

    font-size: 12px;

}


.admin-customer-search input:focus {

    border-color:
        #d9a62e;

}


.admin-customer-search input::placeholder {

    color: #666;

}


.admin-customer-search span {

    position: absolute;

    right: 14px;

    top: 50%;

    transform:
        translateY(-50%);

    color: #d9a62e;

    font-size: 20px;

}


/* =========================================
   CUSTOMER INFO
========================================= */

.customer-info {

    display: flex;

    align-items: center;

    gap: 11px;

}


.customer-avatar {

    width: 38px;

    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(217, 166, 46, 0.4);

    border-radius: 50%;

    color: #d9a62e;

    background:
        rgba(217, 166, 46, 0.06);

    font-size: 10px;

    font-weight: 600;

}


.customer-info strong {

    display: block;

    color: #eee;

    font-size: 12px;

    font-weight: 500;

}


.customer-info span {

    display: block;

    margin-top: 3px;

    color: #666;

    font-size: 9px;

}


/* =========================================
   CUSTOMER STATUS
========================================= */

.customer-active {

    display: inline-block;

    padding: 5px 9px;

    border-radius: 20px;

    background:
        rgba(65, 180, 110, 0.08);

    border:
        1px solid
        rgba(65, 180, 110, 0.3);

    color: #6ed39a;

    font-size: 9px;

    letter-spacing: 0.7px;

}


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

.customer-view-btn {

    padding: 7px 13px;

    border:
        1px solid
        rgba(217, 166, 46, 0.4);

    background: transparent;

    color: #d9a62e;

    border-radius: 4px;

    font-family: "Poppins", sans-serif;

    font-size: 9px;

    letter-spacing: 1px;

    cursor: pointer;

    transition: 0.3s;

}


.customer-view-btn:hover {

    background: #d9a62e;

    color: #050805;

    box-shadow:
        0 0 14px
        rgba(217, 166, 46, 0.2);

}


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

@media (max-width: 1000px) {

    .admin-customer-stats {

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

    }

}


@media (max-width: 700px) {

    .admin-customer-toolbar {

        flex-direction: column;

        align-items: stretch;

    }


    .admin-customer-search {

        width: 100%;

    }


    .admin-customers-panel {

        padding: 16px;

        overflow-x: auto;

    }


    .admin-table {

        min-width: 900px;

    }

}


@media (max-width: 520px) {

    .admin-customer-stats {

        grid-template-columns: 1fr;

    }

}
/* =========================================
   ADMIN REPORTS
========================================= */

.admin-report-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;

}


.admin-report-toolbar h2 {

    margin: 0 0 5px;

    color: #fff;

    font-family: "Cinzel", serif;

    font-size: 19px;

    font-weight: 600;

}


.admin-report-toolbar span {

    color: #888;

    font-size: 11px;

}


.admin-report-toolbar select {

    min-width: 150px;

    padding: 11px 14px;

    background:
        rgba(10, 25, 20, 0.9);

    border:
        1px solid
        rgba(217, 166, 46, 0.35);

    border-radius: 5px;

    color: #d9a62e;

    outline: none;

    font-family: "Poppins", sans-serif;

    font-size: 11px;

    cursor: pointer;

}


/* =========================================
   REPORT STATISTICS
========================================= */

.admin-report-stats {

    display: grid;

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

    gap: 18px;

    margin-bottom: 24px;

}


.admin-report-card {

    padding: 21px;

    background:
        rgba(10, 25, 20, 0.72);

    border:
        1px solid
        rgba(217, 166, 46, 0.25);

    border-radius: 10px;

    transition: 0.3s;

}


.admin-report-card:hover {

    border-color:
        rgba(217, 166, 46, 0.55);

    transform:
        translateY(-2px);

}


.admin-report-card span {

    display: block;

    color: #888;

    font-size: 9px;

    letter-spacing: 1.2px;

    margin-bottom: 9px;

}


.admin-report-card strong {

    display: block;

    color: #fff;

    font-size: 23px;

    font-weight: 600;

    margin-bottom: 7px;

}


.admin-report-card small {

    color: #6ed39a;

    font-size: 9px;

}


/* =========================================
   REPORT GRID
========================================= */

.admin-report-grid {

    display: grid;

    grid-template-columns:
        1.5fr 1fr;

    gap: 20px;

    margin-bottom: 20px;

}


.admin-report-panel {

    background:
        rgba(5, 15, 11, 0.78);

    border:
        1px solid
        rgba(217, 166, 46, 0.22);

    border-radius: 10px;

    padding: 24px;

}


.admin-report-panel-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 24px;

}


.admin-report-panel-heading h3 {

    margin: 0 0 5px;

    color: #fff;

    font-family: "Cinzel", serif;

    font-size: 16px;

    font-weight: 600;

}


.admin-report-panel-heading span {

    color: #777;

    font-size: 10px;

}


.admin-report-panel-heading > strong {

    color: #d9a62e;

    font-size: 18px;

}


/* =========================================
   SALES CHART
========================================= */

.report-chart {

    display: flex;

    height: 260px;

}


.report-y-axis {

    width: 48px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding-bottom: 24px;

}


.report-y-axis span {

    color: #555;

    font-size: 9px;

}


.report-bars {

    flex: 1;

    display: flex;

    align-items: flex-end;

    justify-content: space-around;

    gap: 14px;

    padding:
        10px 5px 0;

    border-bottom:
        1px solid
        rgba(217, 166, 46, 0.18);

}


.report-bar-column {

    height: 100%;

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-end;

    gap: 9px;

}


.report-bar {

    width: 38px;

    max-width: 75%;

    min-height: 10px;

    background:
        linear-gradient(
            to top,
            #9a711d,
            #d9a62e
        );

    border-radius:
        4px 4px 0 0;

    box-shadow:
        0 0 14px
        rgba(217, 166, 46, 0.12);

    transition: 0.3s;

}


.report-bar:hover {

    box-shadow:
        0 0 22px
        rgba(217, 166, 46, 0.28);

}


.report-bar-column span {

    color: #777;

    font-size: 9px;

    letter-spacing: 0.5px;

}


/* =========================================
   PAYMENT SUMMARY
========================================= */

.payment-report-list {

    display: flex;

    flex-direction: column;

    gap: 26px;

}


.payment-report-item {

    position: relative;

}


.payment-report-info {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 10px;

}


.payment-report-info span {

    color: #bbb;

    font-size: 11px;

}


.payment-report-info strong {

    color: #fff;

    font-size: 11px;

    font-weight: 500;

}


.payment-progress {

    width: 100%;

    height: 5px;

    overflow: hidden;

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

    border-radius: 10px;

}


.payment-progress span {

    display: block;

    height: 100%;

    background: #d9a62e;

    border-radius: 10px;

}


.payment-report-item > small {

    display: block;

    margin-top: 7px;

    color: #666;

    font-size: 9px;

}


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

.top-products-panel {

    margin-bottom: 20px;

}


.top-products-list {

    display: flex;

    flex-direction: column;

}


.top-product-row {

    display: grid;

    grid-template-columns:
        45px 55px 1fr 90px 120px;

    align-items: center;

    gap: 15px;

    padding: 14px 0;

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

}


.top-product-row:last-child {

    border-bottom: none;

}


.top-product-rank {

    color: #d9a62e;

    font-size: 11px;

    font-weight: 600;

}


.top-product-row img {

    width: 48px;

    height: 48px;

    object-fit: cover;

    border-radius: 5px;

    border:
        1px solid
        rgba(217, 166, 46, 0.25);

}


.top-product-name strong {

    display: block;

    color: #ddd;

    font-size: 11px;

    font-weight: 500;

}


.top-product-name span {

    display: inline-block;

    margin-top: 4px;

    color: #777;

    font-size: 8px;

    letter-spacing: 0.8px;

}


.top-product-sales {

    text-align: center;

}


.top-product-sales strong {

    display: block;

    color: #fff;

    font-size: 13px;

    font-weight: 500;

}


.top-product-sales span {

    color: #666;

    font-size: 8px;

    letter-spacing: 0.6px;

}


.top-product-revenue {

    color: #d9a62e;

    font-size: 11px;

    text-align: right;

}


/* =========================================
   ORDER REPORT
========================================= */

.order-report-panel {

    margin-bottom: 20px;

}


.order-report-grid {

    display: grid;

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

    gap: 14px;

}


.order-report-item {

    text-align: center;

    padding: 22px 10px;

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

    border:
        1px solid
        rgba(217, 166, 46, 0.14);

    border-radius: 7px;

}


.order-report-number {

    display: block;

    color: #d9a62e;

    font-family: "Cinzel", serif;

    font-size: 26px;

    font-weight: 600;

    margin-bottom: 7px;

}


.order-report-label {

    color: #777;

    font-size: 9px;

    letter-spacing: 1px;

}


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

@media (max-width: 1100px) {

    .admin-report-stats {

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

    }


    .admin-report-grid {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 700px) {

    .admin-report-toolbar {

        flex-direction: column;

        align-items: stretch;

    }


    .admin-report-toolbar select {

        width: 100%;

    }


    .admin-report-stats {

        grid-template-columns: 1fr;

    }


    .admin-report-panel {

        padding: 17px;

    }


    .top-product-row {

        grid-template-columns:
            35px 45px 1fr;

    }


    .top-product-sales,
    .top-product-revenue {

        display: none;

    }


    .order-report-grid {

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

    }

}


@media (max-width: 450px) {

    .report-chart {

        height: 220px;

    }


    .report-bar {

        width: 24px;

    }


    .order-report-grid {

        grid-template-columns: 1fr;

    }

}
/* =========================================
   ADMIN SETTINGS
========================================= */

.admin-settings-panel {

    margin-bottom: 20px;

    padding: 24px;

    background:
        rgba(5, 15, 11, 0.78);

    border:
        1px solid
        rgba(217, 166, 46, 0.22);

    border-radius: 10px;

}


.admin-settings-heading {

    margin-bottom: 24px;

}


.admin-settings-heading h2 {

    margin: 0 0 6px;

    color: #fff;

    font-family: "Cinzel", serif;

    font-size: 17px;

    font-weight: 600;

}


.admin-settings-heading p {

    margin: 0;

    color: #777;

    font-size: 10px;

}


/* =========================================
   SETTINGS FORM
========================================= */

.admin-settings-form {

    display: grid;

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

    gap: 20px;

}


.admin-settings-group {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.admin-settings-group.admin-settings-full {

    grid-column:
        1 / -1;

}


.admin-settings-group label {

    color: #999;

    font-size: 9px;

    letter-spacing: 1px;

}


.admin-settings-group input,
.admin-settings-group select,
.admin-settings-group textarea {

    width: 100%;

    box-sizing: border-box;

    padding: 12px 14px;

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

    border:
        1px solid
        rgba(217,166,46,0.22);

    border-radius: 5px;

    color: #eee;

    outline: none;

    font-family: "Poppins", sans-serif;

    font-size: 11px;

    transition: 0.3s;

}


.admin-settings-group textarea {

    resize: vertical;

    min-height: 80px;

}


.admin-settings-group input:focus,
.admin-settings-group select:focus,
.admin-settings-group textarea:focus {

    border-color:
        #d9a62e;

    box-shadow:
        0 0 12px
        rgba(217,166,46,0.08);

}


.admin-settings-group input::placeholder,
.admin-settings-group textarea::placeholder {

    color: #555;

}


.admin-settings-group select option {

    background: #0a1510;

    color: #fff;

}


/* =========================================
   SETTINGS OPTIONS
========================================= */

.admin-settings-options {

    display: flex;

    flex-direction: column;

}


.admin-setting-option {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 17px 0;

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

}


.admin-setting-option:first-child {

    padding-top: 0;

}


.admin-setting-option:last-child {

    padding-bottom: 0;

    border-bottom: none;

}


.admin-setting-option strong {

    display: block;

    margin-bottom: 5px;

    color: #ddd;

    font-size: 11px;

    font-weight: 500;

}


.admin-setting-option span {

    color: #666;

    font-size: 9px;

}


/* =========================================
   TOGGLE
========================================= */

.admin-toggle {

    position: relative;

    display: inline-block;

    width: 42px;

    height: 22px;

    flex-shrink: 0;

}


.admin-toggle input {

    opacity: 0;

    width: 0;

    height: 0;

}


.admin-toggle span {

    position: absolute;

    inset: 0;

    cursor: pointer;

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

    border:
        1px solid
        rgba(217,166,46,0.25);

    border-radius: 20px;

    transition: 0.3s;

}


.admin-toggle span::before {

    content: "";

    position: absolute;

    width: 14px;

    height: 14px;

    left: 3px;

    top: 3px;

    background: #777;

    border-radius: 50%;

    transition: 0.3s;

}


.admin-toggle input:checked + span {

    background:
        rgba(217,166,46,0.18);

    border-color:
        #d9a62e;

}


.admin-toggle input:checked + span::before {

    transform:
        translateX(19px);

    background:
        #d9a62e;

    box-shadow:
        0 0 8px
        rgba(217,166,46,0.4);

}


/* =========================================
   SETTINGS ACTIONS
========================================= */

.admin-settings-actions {

    display: flex;

    justify-content: flex-end;

    gap: 12px;

    margin-bottom: 30px;

}


.admin-settings-cancel,
.admin-settings-save {

    min-width: 130px;

    padding: 12px 20px;

    border-radius: 5px;

    font-family: "Poppins", sans-serif;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1px;

    cursor: pointer;

    transition: 0.3s;

}


.admin-settings-cancel {

    background: transparent;

    border:
        1px solid
        rgba(217,166,46,0.3);

    color: #aaa;

}


.admin-settings-cancel:hover {

    border-color:
        #d9a62e;

    color: #d9a62e;

}


.admin-settings-save {

    background: #d9a62e;

    border:
        1px solid #d9a62e;

    color: #050805;

}


.admin-settings-save:hover {

    box-shadow:
        0 0 20px
        rgba(217,166,46,0.25);

    transform:
        translateY(-1px);

}


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

@media (max-width: 700px) {

    .admin-settings-panel {

        padding: 18px;

    }


    .admin-settings-form {

        grid-template-columns: 1fr;

        gap: 16px;

    }


    .admin-settings-group.admin-settings-full {

        grid-column: auto;

    }


    .admin-setting-option {

        align-items: flex-start;

    }


    .admin-setting-option > div {

        padding-right: 10px;

    }


    .admin-settings-actions {

        flex-direction: column-reverse;

    }


    .admin-settings-cancel,
    .admin-settings-save {

        width: 100%;

    }

}
/* CUSTOMER DETAILS MODAL */

.customer-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.customer-modal-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    padding: 35px;
    background: #111;
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 14px;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.15);
}

.customer-modal-content h2 {
    margin: 0;
    font-family: "Cinzel", serif;
}

.customer-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
}

.customer-modal-line {
    width: 60px;
    height: 2px;
    margin: 12px 0 25px;
    background: #d4af37;
}

.customer-detail-item {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.customer-detail-item span {
    color: #aaa;
    font-size: 12px;
}

.customer-detail-item strong {
    text-align: right;
    color: #fff;
}
.admin-notification {
    position: relative;
    margin-right: 25px;
}

#notification-button {
    position: relative;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 50%;
    background: rgba(10, 30, 24, 0.7);
    color: #d4af37;
    cursor: pointer;
    font-size: 18px;
}

#visitor-notification-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 50%;
    background: #d4af37;
    color: #000;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notification-label {
    display: block;
    margin-top: 6px;
    text-align: center;
    color: #d4af37;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1.5px;
}
.visitor-notification-panel {
    display: none;
    position: absolute;
    top: 55px;
    right: 0;
    width: 320px;
    background: #07130f;
    border: 1px solid rgba(212, 175, 55, 0.45);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.visitor-notification-panel.show {
    display: block;
}

.visitor-panel-header {
    padding: 15px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    color: #d4af37;
    font-size: 11px;
    letter-spacing: 1.5px;
}

#visitor-list {
    max-height: 250px;
    overflow-y: auto;
}

.visitor-item {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.visitor-item strong {
    display: block;
    color: #fff;
    font-size: 13px;
}

.visitor-item span {
    display: block;
    margin-top: 4px;
    color: #999;
    font-size: 11px;
}

#view-all-visitors {
    width: 100%;
    padding: 12px;
    border: none;
    background: transparent;
    color: #d4af37;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
}

#view-all-visitors:hover {
    background: rgba(212, 175, 55, 0.08);
}

.my-orders-box {
    margin-top: 30px;
    padding: 22px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(0, 20, 14, 0.65);
}

.my-orders-title {
    text-align: center;
    margin-bottom: 20px;
}

.my-orders-title p {
    font-size: 10px;
    letter-spacing: 3px;
    color: #d4af37;
    margin-bottom: 6px;
}

.my-orders-title h3 {
    font-family: "Cinzel", serif;
    font-size: 22px;
    margin: 0;
    color: white;
}

.my-orders-title h3 span {
    color: #d4af37;
}

.order-card {
    border: 1px solid rgba(212, 175, 55, 0.25);
    padding: 15px;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.25);
}

.order-card-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.order-id {
    color: #d4af37;
    font-weight: 600;
}

.order-status {
    color: #d4af37;
    font-size: 12px;
}

.order-item {
    color: #ddd;
    font-size: 13px;
    margin: 6px 0;
}

.order-total {
    margin-top: 10px;
    color: white;
    font-weight: 600;
}

.order-date {
    color: #999;
    font-size: 11px;
    margin-top: 5px;
}

.orders-loading,
.no-orders {
    text-align: center;
    color: #999;
    font-size: 13px;
}
/* =========================================
   SC ANIME CUSTOM ALERT
========================================= */

#sc-anime-alert {

    position: fixed;

    inset: 0;

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

    backdrop-filter: blur(6px);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 999999;

    padding: 20px;
}


.sc-alert-box {

    width: min(420px, 92vw);

    background:
        linear-gradient(
            145deg,
            #071510,
            #020706
        );

    border: 1px solid #d4af37;

    box-shadow:
        0 0 25px rgba(212, 175, 55, 0.25),
        0 0 70px rgba(212, 175, 55, 0.10);

    padding: 32px 28px;

    text-align: center;

    position: relative;

    animation: scAlertShow 0.25s ease;
}


.sc-alert-logo {

    width: 48px;
    height: 48px;

    margin: 0 auto 12px;

    border: 1px solid #d4af37;

    border-radius: 50%;

    display: flex;

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

    /* YOUR SC ANIME LOGO */
    background-image: url("../images/sc-anime-logo.png");

    background-size: 82%;
    background-position: center;
    background-repeat: no-repeat;

    /* Hide SC text */
    font-size: 0;

    overflow: hidden;

    box-shadow:
        0 0 12px rgba(212, 175, 55, 0.35);
}


.sc-alert-title {

    font-family: Cinzel, serif;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 3px;

    background:
        linear-gradient(
            90deg,
            #c89b28,
            #ffe58a,
            #c89b28
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


.sc-alert-line {

    width: 70px;

    height: 1px;

    background: #d4af37;

    margin: 14px auto 18px;

    box-shadow:
        0 0 10px rgba(212, 175, 55, 0.6);
}


.sc-alert-message {

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

    font-family: Poppins, sans-serif;

    font-size: 13px;

    line-height: 1.7;

    white-space: pre-line;

    margin-bottom: 24px;
}


.sc-alert-button {

    border: 1px solid #d4af37;

    background:
        linear-gradient(
            135deg,
            #c89b28,
            #f0c84b
        );

    color: #080d0b;

    padding: 12px 24px;

    font-family: Poppins, sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    cursor: pointer;

    transition: 0.25s ease;
}


.sc-alert-button i {

    margin-left: 8px;
}


.sc-alert-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 0 18px rgba(212, 175, 55, 0.45);
}


@keyframes scAlertShow {

    from {

        opacity: 0;

        transform: scale(0.94) translateY(10px);

    }

    to {

        opacity: 1;

        transform: scale(1) translateY(0);

    }

}

/* =========================================
   3D FLOATING COLLECTION IMAGES
========================================= */

.collection-image {
    perspective: 900px;
}

.collection-image img {
    transform-style: preserve-3d;
    animation: collection3DFloat 4s ease-in-out infinite;
    will-change: transform;
}


/* T-Shirt slight delay */

.collection-card:nth-child(2)
.collection-image img {
    animation-delay: 1.2s;
}


/* Katana slight delay */

.collection-card:nth-child(3)
.collection-image img {
    animation-delay: 2.4s;
}


@keyframes collection3DFloat {

    0% {
        transform:
            rotateY(-8deg)
            rotateX(3deg)
            translateY(0)
            scale(1);
    }

    25% {
        transform:
            rotateY(8deg)
            rotateX(-3deg)
            translateY(-7px)
            scale(1.02);
    }

    50% {
        transform:
            rotateY(-5deg)
            rotateX(3deg)
            translateY(0)
            scale(1);
    }

    75% {
        transform:
            rotateY(8deg)
            rotateX(-2deg)
            translateY(-7px)
            scale(1.02);
    }

    100% {
        transform:
            rotateY(-8deg)
            rotateX(3deg)
            translateY(0)
            scale(1);
    }
}

/* =========================================
   FINAL 3D COLLECTION ANIMATION
========================================= */

.collection-image {
    perspective: 1000px !important;
    overflow: visible !important;
}

.collection-image img {
    animation: scAnime3D 4s ease-in-out infinite !important;
    transform-style: preserve-3d !important;
    will-change: transform;
}


/* ANIME TOYS */

.collection-card:nth-child(1) .collection-image img {
    animation-delay: 0s !important;
}


/* T-SHIRTS */

.collection-card:nth-child(2) .collection-image img {
    animation-delay: 1.2s !important;
}


/* KATANAS */

.collection-card:nth-child(3) .collection-image img {
    animation-delay: 2.4s !important;
}


@keyframes scAnime3D {

    0% {
        transform:
            perspective(900px)
            rotateY(-12deg)
            rotateX(3deg)
            translateY(0)
            scale(0.92) !important;
    }

    50% {
        transform:
            perspective(900px)
            rotateY(12deg)
            rotateX(-3deg)
            translateY(-8px)
            scale(0.98) !important;
    }

    100% {
        transform:
            perspective(900px)
            rotateY(-12deg)
            rotateX(3deg)
            translateY(0)
            scale(0.92) !important;
    }
}

/* =========================================
   PRODUCT REVIEWS
========================================= */

.product-reviews-section {
    padding: 80px 20px;
    background: #020706;
}

.product-reviews-container {
    width: min(1100px, 100%);
    margin: auto;
}

.reviews-heading {
    text-align: center;
    margin-bottom: 45px;
}

.reviews-heading h2 {
    font-family: Cinzel, serif;
    font-size: 32px;
    letter-spacing: 3px;
    color: #f3cf62;
    margin: 10px 0;
}

#reviews-summary {
    margin-top: 18px;
    font-family: Poppins, sans-serif;
    color: rgba(255,255,255,0.75);
}

#average-rating {
    font-size: 24px;
    color: #f3cf62;
    font-weight: 600;
}

.review-stars {
    color: #d4af37;
    letter-spacing: 3px;
    margin: 0 8px;
}

#review-count {
    font-size: 13px;
}


/* REVIEWS LIST */

#reviews-list {
    display: grid;
    gap: 18px;
    margin-bottom: 55px;
}

.review-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(212,175,55,0.25);
    padding: 24px;
}

.review-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.review-card-name {
    font-family: Cinzel, serif;
    color: #f3cf62;
    font-size: 16px;
}

.review-card-rating {
    color: #d4af37;
    letter-spacing: 2px;
}

.review-card-comment {
    margin-top: 12px;
    color: rgba(255,255,255,0.75);
    font-family: Poppins, sans-serif;
    font-size: 13px;
    line-height: 1.7;
}

.no-reviews {
    text-align: center;
    color: rgba(255,255,255,0.55);
    font-family: Poppins, sans-serif;
    font-size: 13px;
}


/* WRITE REVIEW */

.write-review-box {
    max-width: 700px;
    margin: auto;
    padding: 35px;
    border: 1px solid rgba(212,175,55,0.3);
    background: rgba(255,255,255,0.025);
}

.write-review-box h3 {
    font-family: Cinzel, serif;
    color: #f3cf62;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.write-review-box > p {
    color: rgba(255,255,255,0.6);
    font-family: Poppins, sans-serif;
    font-size: 12px;
    margin-bottom: 25px;
}

.review-form {
    display: grid;
    gap: 15px;
}

.review-form input,
.review-form select,
.review-form textarea {
    width: 100%;
    box-sizing: border-box;
    background: #071510;
    border: 1px solid rgba(212,175,55,0.3);
    color: white;
    padding: 14px 15px;
    font-family: Poppins, sans-serif;
    font-size: 13px;
    outline: none;
}

.review-form input:focus,
.review-form select:focus,
.review-form textarea:focus {
    border-color: #d4af37;
}

.review-form textarea {
    resize: vertical;
    min-height: 120px;
}

.review-form select option {
    background: #071510;
    color: white;
}


/* MOBILE */

@media (max-width: 600px) {

    .product-reviews-section {
        padding: 60px 15px;
    }

    .reviews-heading h2 {
        font-size: 24px;
    }

    .write-review-box {
        padding: 25px 18px;
    }

    .review-card-top {
        flex-direction: column;
        align-items: flex-start;
    }

}

/* =========================================
   REVIEWS PAGE - PREMIUM GOLD LINE
========================================= */

.reviews-page-heading {
    text-align: center !important;
}

.reviews-page-heading .product-new-line {
    display: block !important;

    width: 170px !important;
    max-width: 170px !important;

    height: 2px !important;

    margin: 24px auto 24px !important;

    padding: 0 !important;
    border: 0 !important;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(216, 168, 62, 0.35) 10%,
        #d8a83e 30%,
        #f5d56f 50%,
        #d8a83e 70%,
        rgba(216, 168, 62, 0.35) 90%,
        transparent 100%
    ) !important;

    box-shadow:
        0 0 5px rgba(216, 168, 62, 0.9),
        0 0 12px rgba(216, 168, 62, 0.65),
        0 0 24px rgba(216, 168, 62, 0.35) !important;

    opacity: 1 !important;
}


/* REVIEWS PAGE HEADING */

.reviews-page-heading h1 {
    text-align: center !important;

    font-family: "Cinzel", serif !important;

    font-size: 48px !important;

    font-weight: 600 !important;

    letter-spacing: 4px !important;

    line-height: 1.2 !important;

    color: #ffffff !important;

    margin: 0 !important;
}


/* SMALL GOLD LABEL */

.reviews-page-heading .product-new-label {
    text-align: center !important;

    color: #d8a83e !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 11px !important;

    font-weight: 600 !important;

    letter-spacing: 5px !important;

    text-transform: uppercase !important;
}


/* SUBTITLE */

.reviews-page-subtitle {
    text-align: center !important;

    color: #9fa9a5 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 12px !important;

    letter-spacing: 1px !important;
}


/* MOBILE */

@media (max-width: 600px) {

    .reviews-page-heading h1 {
        font-size: 32px !important;
        letter-spacing: 2px !important;
    }

    .reviews-page-heading .product-new-line {
        width: 130px !important;
        max-width: 130px !important;
    }

}
/* =========================================
   REVIEWS PAGE - PRODUCT CARDS
========================================= */

.reviews-page-section {
    padding: 70px 20px 100px !important;
    background: transparent !important;
}

.reviews-page-container {
    width: min(1200px, 100%) !important;
    margin: auto !important;
}


/* PRODUCT REVIEW CARD */

.reviews-product-card {
    display: grid !important;
    grid-template-columns: 300px 1fr !important;
    gap: 45px !important;

    margin-bottom: 45px !important;
    padding: 28px !important;

    background: rgba(5, 18, 14, 0.72) !important;

    border: 1px solid rgba(216, 168, 62, 0.28) !important;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.35),
        inset 0 0 25px rgba(216, 168, 62, 0.025) !important;

    backdrop-filter: blur(8px) !important;
}


/* PRODUCT IMAGE */

.reviews-product-image {
    width: 300px !important;
    height: 300px !important;

    overflow: hidden !important;

    background: #020706 !important;

    border: 1px solid rgba(216, 168, 62, 0.25) !important;
}


.reviews-product-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    display: block !important;

    transition: transform 0.4s ease !important;
}


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


/* PRODUCT CONTENT */

.reviews-product-content {
    min-width: 0 !important;
    padding: 10px 5px !important;
}


/* CATEGORY */

.reviews-product-category {
    margin: 0 0 10px !important;

    color: #d8a83e !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 10px !important;

    font-weight: 600 !important;

    letter-spacing: 4px !important;

    text-transform: uppercase !important;
}


/* PRODUCT NAME */

.reviews-product-name {
    margin: 0 0 18px !important;

    color: #ffffff !important;

    font-family: "Cinzel", serif !important;

    font-size: 28px !important;

    font-weight: 600 !important;

    letter-spacing: 2px !important;
}


/* RATING */

.reviews-product-rating {
    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    margin-bottom: 25px !important;
}


.rating-number {
    color: #f3cf62 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 22px !important;

    font-weight: 600 !important;
}


.rating-stars {
    color: #d8a83e !important;

    font-size: 18px !important;

    letter-spacing: 3px !important;
}


.rating-count {
    color: #9fa9a5 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 11px !important;
}


/* REVIEWS LIST */

.reviews-list {
    display: grid !important;

    gap: 14px !important;

    margin-bottom: 25px !important;
}


/* SINGLE REVIEW */

.single-review-card {
    padding: 18px 20px !important;

    background: rgba(255, 255, 255, 0.025) !important;

    border-left: 2px solid #d8a83e !important;

    border-top: 1px solid rgba(216, 168, 62, 0.12) !important;

    border-right: 1px solid rgba(216, 168, 62, 0.12) !important;

    border-bottom: 1px solid rgba(216, 168, 62, 0.12) !important;
}


.single-review-top {
    display: flex !important;

    justify-content: space-between !important;

    align-items: center !important;

    gap: 15px !important;

    margin-bottom: 9px !important;
}


.single-review-name {
    color: #f3cf62 !important;

    font-family: "Cinzel", serif !important;

    font-size: 14px !important;

    font-weight: 600 !important;

    letter-spacing: 1px !important;
}


.single-review-stars {
    color: #d8a83e !important;

    font-size: 13px !important;

    letter-spacing: 2px !important;
}


.single-review-comment {
    color: rgba(255, 255, 255, 0.68) !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 12px !important;

    line-height: 1.7 !important;
}


/* NO REVIEWS */

.reviews-empty {
    color: rgba(255, 255, 255, 0.48) !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 12px !important;

    line-height: 1.7 !important;
}


/* WRITE REVIEW BUTTON */

.review-write-button {
    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 9px !important;

    padding: 12px 22px !important;

    background: transparent !important;

    border: 1px solid #d8a83e !important;

    color: #f3cf62 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 11px !important;

    font-weight: 600 !important;

    letter-spacing: 1.5px !important;

    cursor: pointer !important;

    transition: all 0.3s ease !important;
}


.review-write-button:hover {
    background: #d8a83e !important;

    color: #020706 !important;

    box-shadow:
        0 0 15px rgba(216, 168, 62, 0.35) !important;
}


/* LOADING */

.reviews-loading {
    text-align: center !important;

    color: #d8a83e !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 12px !important;

    letter-spacing: 3px !important;
}


/* MOBILE */

@media (max-width: 700px) {

    .reviews-page-section {
        padding: 55px 15px 80px !important;
    }


    .reviews-product-card {
        grid-template-columns: 1fr !important;

        gap: 25px !important;

        padding: 18px !important;
    }


    .reviews-product-image {
        width: 100% !important;

        height: 280px !important;
    }


    .reviews-product-name {
        font-size: 22px !important;
    }


    .single-review-top {
        flex-direction: column !important;

        align-items: flex-start !important;
    }

}
/* =========================================
   SHOP PRODUCT CARD - COMPACT DESIGN
========================================= */

.shop-product-card {
    min-height: 0 !important;
}


.shop-product-image {
    height: 230px !important;
}


.shop-product-image img {
    object-fit: contain !important;
    padding: 12px !important;
    box-sizing: border-box !important;
}


.shop-product-info {
    padding: 18px 16px !important;
}


/* CATEGORY */

.shop-product-info .product-category {
    margin-bottom: 7px !important;

    font-size: 10px !important;

    letter-spacing: 2px !important;

    color: #d8a83e !important;
}


/* PRODUCT NAME */

.shop-product-info h3 {
    margin-bottom: 12px !important;

    font-size: 16px !important;

    line-height: 1.4 !important;
}


/* PRICE */

.shop-product-price {
    color: #f3cf62 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 20px !important;

    font-weight: 600 !important;

    margin-bottom: 8px !important;
}


/* RATING */

.shop-product-rating {
    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    margin-bottom: 15px !important;
}


.shop-rating-stars {
    color: #d8a83e !important;

    font-size: 14px !important;

    letter-spacing: 2px !important;
}


.shop-rating-number {
    color: #f3cf62 !important;

    font-size: 11px !important;

    font-weight: 600 !important;
}


.shop-rating-count {
    color: rgba(255,255,255,0.55) !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 10px !important;
}


/* BUTTONS */

.shop-product-info .add-product-btn,
.shop-product-info .add-shelf-btn {
    width: 100% !important;

    margin-top: 7px !important;

    padding: 11px 10px !important;
}


/* MOBILE */

@media (max-width: 600px) {

    .shop-product-image {
        height: 210px !important;
    }

    .shop-product-info h3 {
        font-size: 15px !important;
    }

}
/* =========================================
   SINGLE PRODUCT REVIEW PAGE
========================================= */

.single-product-review-card {
    width: 100%;
    max-width: 1050px;
    margin: 40px auto 0;
    padding: 28px;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 35px;

    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(216,168,62,0.45);
    border-radius: 16px;

    box-shadow:
        0 0 25px rgba(216,168,62,0.08);

}


/* PRODUCT IMAGE */

.single-product-review-image {
    width: 280px;
    height: 280px;

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

    background: rgba(255,255,255,0.025);
    border-radius: 12px;
    overflow: hidden;
}


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

    object-fit: contain;
    padding: 18px;
    box-sizing: border-box;
}


/* PRODUCT CONTENT */

.single-product-review-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.single-product-review-content .reviews-product-category {
    margin: 0 0 8px;

    color: #d8a83e;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3px;
}


.single-product-review-content h2 {
    margin: 0 0 14px;

    color: #ffffff;
    font-family: "Cinzel", serif;
    font-size: 28px;
    line-height: 1.3;
}


/* RATING */

.single-product-review-content .reviews-product-rating {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 25px;
}


.single-product-review-content .rating-number {
    color: #f3cf62;

    font-size: 22px;
    font-weight: 600;
}


.single-product-review-content .rating-stars {
    color: #d8a83e;

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


.single-product-review-content .rating-count {
    color: rgba(255,255,255,0.55);

    font-family: "Poppins", sans-serif;
    font-size: 12px;
}


/* REVIEWS LIST */

.single-product-review-content .reviews-list {
    margin-bottom: 25px;
}


.single-product-review-content .reviews-empty {
    margin: 0;

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

    font-family: "Poppins", sans-serif;
    font-size: 13px;
    line-height: 1.7;
}


/* REVIEW CARD */

.single-review-card {
    padding: 16px 18px;
    margin-bottom: 12px;

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

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
}


.single-review-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 8px;
}


.single-review-name {
    color: #ffffff;

    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;
}


.single-review-stars {
    color: #d8a83e;

    font-size: 12px;
    letter-spacing: 1px;
}


.single-review-comment {
    color: rgba(255,255,255,0.65);

    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 1.6;
}


/* WRITE REVIEW BUTTON */

.single-product-review-content .review-write-button {
    width: fit-content;

    padding: 13px 24px;

    background: transparent;

    border: 1px solid #d8a83e;
    border-radius: 4px;

    color: #f3cf62;

    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.5px;

    cursor: pointer;

    transition: 0.3s ease;
}


.single-product-review-content .review-write-button i {
    margin-right: 7px;
}


.single-product-review-content .review-write-button:hover {
    background: #d8a83e;
    color: #111;
}


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

@media (max-width: 700px) {

    .single-product-review-card {
        grid-template-columns: 1fr;
        gap: 25px;

        padding: 20px;
    }


    .single-product-review-image {
        width: 100%;
        max-width: 240px;
        height: 240px;

        margin: 0 auto;
    }


    .single-product-review-content h2 {
        font-size: 22px;
    }


    .single-product-review-content .review-write-button {
        width: 100%;
        text-align: center;
    }

}
/* =========================================
   SHOP - WRITE A REVIEW BUTTON
========================================= */

.shop-product-info .write-review-btn {
    width: 100% !important;
    margin-top: 7px !important;
    padding: 11px 10px !important;

    background: transparent !important;

    border: 1px solid rgba(216,168,62,0.45) !important;
    border-radius: 4px !important;

    color: rgba(255,255,255,0.75) !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;

    letter-spacing: 1.2px !important;

    cursor: pointer !important;

    transition: 0.3s ease !important;
}


.shop-product-info .write-review-btn i {
    margin-right: 6px !important;
}


.shop-product-info .write-review-btn:hover {
    background: rgba(216,168,62,0.10) !important;
    border-color: #d8a83e !important;
    color: #f3cf62 !important;
}
/* =========================================
   REVIEW POPUP
========================================= */

#review-form-overlay {
    position: fixed !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

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

    background: rgba(0, 0, 0, 0.78) !important;

    z-index: 99999 !important;

    padding: 20px !important;
    box-sizing: border-box !important;
}


/* POPUP BOX */

#review-form-overlay .review-popup {
    position: relative !important;

    width: 100% !important;
    max-width: 520px !important;

    padding: 35px !important;
    box-sizing: border-box !important;

    background: #07100e !important;

    border: 1px solid rgba(216,168,62,0.65) !important;
    border-radius: 14px !important;

    box-shadow:
        0 0 35px rgba(216,168,62,0.18) !important;
}


/* CLOSE BUTTON */

#review-form-overlay .review-popup-close {
    position: absolute !important;

    top: 15px !important;
    right: 15px !important;

    width: 34px !important;
    height: 34px !important;

    border: 1px solid rgba(216,168,62,0.4) !important;
    border-radius: 50% !important;

    background: transparent !important;

    color: #d8a83e !important;

    font-size: 15px !important;

    cursor: pointer !important;
}


#review-form-overlay .review-popup-close:hover {
    background: #d8a83e !important;
    color: #111 !important;
}


/* LABEL */

#review-form-overlay .product-new-label {
    margin: 0 0 8px !important;

    color: #d8a83e !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;

    letter-spacing: 3px !important;
}


/* TITLE */

#review-form-overlay .review-popup h2 {
    margin: 0 0 15px !important;

    color: #ffffff !important;

    font-family: "Cinzel", serif !important;
    font-size: 28px !important;
}


/* GOLD LINE */

#review-form-overlay .product-new-line {
    width: 90px !important;
    height: 2px !important;

    margin: 0 0 25px !important;

    background: #d8a83e !important;
}


/* INPUTS */

#review-form-overlay input,
#review-form-overlay select,
#review-form-overlay textarea {
    width: 100% !important;

    margin-bottom: 14px !important;

    padding: 13px 14px !important;

    box-sizing: border-box !important;

    background: rgba(255,255,255,0.04) !important;

    border: 1px solid rgba(216,168,62,0.35) !important;
    border-radius: 5px !important;

    color: #ffffff !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 13px !important;

    outline: none !important;
}


#review-form-overlay input:focus,
#review-form-overlay select:focus,
#review-form-overlay textarea:focus {
    border-color: #d8a83e !important;
}


#review-form-overlay select option {
    background: #07100e !important;
    color: #ffffff !important;
}


/* SUBMIT */

#review-form-overlay .review-popup-submit {
    width: 100% !important;

    padding: 13px 18px !important;

    border: 1px solid #d8a83e !important;
    border-radius: 5px !important;

    background: linear-gradient(
        90deg,
        #f3cf62,
        #d8a83e
    ) !important;

    color: #111 !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;

    letter-spacing: 1.5px !important;

    cursor: pointer !important;

    transition: 0.3s ease !important;
}


#review-form-overlay .review-popup-submit:hover {
    transform: translateY(-2px) !important;

    box-shadow:
        0 5px 20px rgba(216,168,62,0.25) !important;
}


/* MOBILE */

@media (max-width: 600px) {

    #review-form-overlay {
        padding: 15px !important;
    }

    #review-form-overlay .review-popup {
        padding: 28px 20px !important;
    }

    #review-form-overlay .review-popup h2 {
        font-size: 23px !important;
    }

}

/* =========================================
   ADMIN REVIEWS
========================================= */

#admin-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 25px;
}

.admin-review-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    padding: 22px 24px;

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

    border: 1px solid rgba(216,168,62,0.28);
    border-radius: 10px;

    transition: 0.3s ease;
}

.admin-review-card:hover {
    border-color: rgba(216,168,62,0.65);
    box-shadow: 0 0 20px rgba(216,168,62,0.08);
}

.admin-review-info {
    flex: 1;
}

.admin-review-product {
    margin-bottom: 7px;

    color: #d8a83e;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.admin-review-name {
    margin-bottom: 6px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 600;
}

.admin-review-stars {
    margin-bottom: 10px;

    color: #d8a83e;

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

.admin-review-comment {
    color: rgba(255,255,255,0.68);

    font-size: 13px;
    line-height: 1.6;
}

.admin-review-date {
    margin-top: 8px;

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

    font-size: 10px;
}

.admin-review-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.admin-review-actions button {
    padding: 10px 16px;

    border-radius: 4px;

    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;

    cursor: pointer;

    transition: 0.3s ease;
}

.admin-review-approve {
    border: 1px solid #3fcf78;
    background: rgba(63,207,120,0.08);
    color: #3fcf78;
}

.admin-review-approve:hover {
    background: #3fcf78;
    color: #07100e;
}

.admin-review-delete {
    border: 1px solid #ff5555;
    background: rgba(255,85,85,0.08);
    color: #ff5555;
}

.admin-review-delete:hover {
    background: #ff5555;
    color: #ffffff;
}

.admin-empty,
.admin-loading {
    padding: 40px;

    text-align: center;

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

    border: 1px solid rgba(216,168,62,0.2);
    border-radius: 10px;
}


/* MOBILE */

@media (max-width: 700px) {

    .admin-review-card {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-review-actions {
        width: 100%;
    }

    .admin-review-actions button {
        flex: 1;
    }

}
/* =========================================
   ADMIN SIDEBAR - ACTIVE PAGE
========================================= */

.admin-nav-link.active {
    color: #d8a83e !important;
    background: rgba(216,168,62,0.08) !important;
    border-left: 2px solid #d8a83e !important;
}

.admin-nav-link.active i {
    color: #d8a83e !important;
}

.admin-nav-link:not(.active) {
    color: rgba(255,255,255,0.55) !important;
    background: transparent !important;
    border-left: 2px solid transparent !important;
}

.admin-nav-link:not(.active) i {
    color: rgba(255,255,255,0.55) !important;
}
.admin-sidebar {
    display: flex !important;
    flex-direction: column !important;
    height: 105vh !important;
    min-height: 105vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

.admin-nav {
    flex: 1 !important;
    overflow-y: auto !important;
}

.admin-sidebar-bottom {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-bottom: 20px !important;
    display: flex !important;
    flex-direction: column !important;
}
#product-reviews-list {
    max-height: 320px !important;
    overflow-y: auto !important;
    padding-right: 8px !important;
}
/* COMPACT REVIEW LIST */

.single-product-review-content .reviews-list {
    max-height: 260px !important;
    overflow-y: auto !important;
    padding-right: 8px !important;
}
.visitor-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.visitor-actions button {
    padding: 11px 18px;
    background: transparent;
    border: 1px solid #d4af37;
    border-radius: 4px;
    color: #d4af37;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.3s ease;
}

.visitor-actions button:hover {
    background: #d4af37;
    color: #07130f;
}
.select-all-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #d4af37;
    font-size: 10px;
    letter-spacing: 1px;
    white-space: nowrap;
}

.select-all-label input,
.visitor-checkbox {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #d4af37;
}
/* ==================================
   CUSTOMER ACTION BUTTONS
================================== */

.customer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.customer-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 16px;

    background: transparent;
    border: 1px solid rgba(216, 168, 62, 0.45);
    border-radius: 5px;

    color: #d8a83e;

    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1px;

    cursor: pointer;
    transition: 0.3s ease;
}

.customer-actions button:hover {
    background: rgba(216, 168, 62, 0.10);
    border-color: #d8a83e;
    color: #f3cf62;
}

.customer-actions button i {
    font-size: 12px;
}


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

.customer-actions .customer-delete-btn {
    border-color: rgba(190, 70, 70, 0.45);
    color: rgba(255, 120, 120, 0.85);
}

.customer-actions .customer-delete-btn:hover {
    background: rgba(190, 70, 70, 0.10);
    border-color: #d96b6b;
    color: #ff9a9a;
}


/* ==================================
   SELECT ALL
================================== */

.select-all-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    cursor: pointer;

    color: #d4af37;

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

    white-space: nowrap;
}

.select-all-label input,
.customer-checkbox {
    width: 14px;
    height: 14px;

    cursor: pointer;

    accent-color: #d4af37;
}


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

@media (max-width: 700px) {

    .customer-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .customer-actions button {
        width: 100%;
    }

}
/* ==================================
   ORDER ACTION BUTTONS
================================== */

.order-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.order-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 16px;

    background: transparent;
    border: 1px solid rgba(216, 168, 62, 0.45);
    border-radius: 5px;

    color: #d8a83e;

    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1px;

    cursor: pointer;
    transition: 0.3s ease;
}

.order-actions button:hover {
    background: rgba(216, 168, 62, 0.10);
    border-color: #d8a83e;
    color: #f3cf62;
}

.order-actions button i {
    font-size: 12px;
}


/* DELETE BUTTONS */

.order-actions .order-delete-btn {
    border-color: rgba(190, 70, 70, 0.45);
    color: rgba(255, 120, 120, 0.85);
}

.order-actions .order-delete-btn:hover {
    background: rgba(190, 70, 70, 0.10);
    border-color: #d96b6b;
    color: #ff9a9a;
}


/* CHECKBOXES */

.select-all-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    cursor: pointer;

    color: #d4af37;

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

    white-space: nowrap;
}

.select-all-label input,
.order-checkbox {
    width: 14px;
    height: 14px;

    cursor: pointer;

    accent-color: #d4af37;
}


/* MOBILE */

@media (max-width: 700px) {

    .order-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .order-actions button {
        width: 100%;
    }

}
/* =========================================================
   SC ANIME - CLEAN MOBILE SHOPPING EXPERIENCE
   Desktop CSS remains untouched
   ========================================================= */


/* =========================================================
   MOBILE - 600px AND BELOW
   ========================================================= */

@media (max-width: 600px) {

    /* -----------------------------------------------------
       GLOBAL
    ----------------------------------------------------- */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    * {
        box-sizing: border-box;
    }


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

    .navbar {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 112px !important;
        min-height: 112px !important;

        z-index: 1000 !important;

        background: rgba(1, 10, 8, 0.94) !important;

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

        border-bottom: 1px solid rgba(217, 166, 46, 0.25) !important;
    }


    /* -----------------------------------------------------
       NAV CONTAINER
    ----------------------------------------------------- */

    .nav-container {
        width: 100% !important;
        max-width: 100% !important;

        height: 112px !important;

        padding: 0 12px !important;
        margin: 0 !important;

        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;

        flex-wrap: wrap !important;

        gap: 0 !important;
    }


    /* -----------------------------------------------------
       TOP NAV ROW
    ----------------------------------------------------- */

    .brand-logo {
        order: 1 !important;

        width: auto !important;
        max-width: 52% !important;

        height: 68px !important;

        display: flex !important;
        align-items: center !important;

        gap: 8px !important;

        flex-shrink: 1 !important;
    }


    .brand-logo img {
        width: 42px !important;
        height: 42px !important;

        max-width: 42px !important;

        object-fit: cover !important;

        border-radius: 50% !important;

        border: 2px solid #d9a62e !important;

        padding: 2px !important;

        background: #00110d !important;

        flex-shrink: 0 !important;
    }


    .brand-name {
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        line-height: 1 !important;
    }


    .brand-name h2 {
        margin: 0 !important;

        font-size: 17px !important;

        letter-spacing: 1.5px !important;

        white-space: nowrap !important;
    }


    .brand-name p {
        margin: 4px 0 0 !important;

        font-size: 5.5px !important;

        letter-spacing: 1.8px !important;

        white-space: nowrap !important;
    }


    /* -----------------------------------------------------
       ICONS
    ----------------------------------------------------- */

    .nav-icons {
        order: 2 !important;

        width: auto !important;
        max-width: 48% !important;

        height: 68px !important;

        margin-left: auto !important;

        display: flex !important;

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

        gap: 7px !important;

        flex-shrink: 0 !important;
    }


    .nav-icons button {
        width: 30px !important;
        height: 30px !important;

        padding: 0 !important;
        margin: 0 !important;

        display: flex !important;

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

        border: none !important;

        background: transparent !important;

        font-size: 15px !important;
    }


    .nav-icons button i {
        font-size: 15px !important;
    }


    .nav-icons .icon-badge {
        position: relative !important;
    }


    .nav-icons .icon-badge span {
        width: 14px !important;
        height: 14px !important;

        min-width: 14px !important;

        top: -4px !important;
        right: -4px !important;

        font-size: 7px !important;

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


    /* -----------------------------------------------------
       MOBILE MENU TOGGLE
       We use the visible horizontal shopping menu instead.
    ----------------------------------------------------- */

    .menu-toggle {
        display: none !important;
    }


    /* -----------------------------------------------------
       SHOPPING NAVIGATION
    ----------------------------------------------------- */

    .nav-links,
    .nav-menu {
        order: 3 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 44px !important;

        margin: 0 !important;
        padding: 0 4px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 25px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        white-space: nowrap !important;

        scrollbar-width: none !important;

        border-top: 1px solid rgba(255,255,255,0.04);
    }


    .nav-links::-webkit-scrollbar,
    .nav-menu::-webkit-scrollbar {
        display: none !important;
    }


    .nav-links a,
    .nav-menu a {
        height: 44px !important;

        display: flex !important;

        align-items: center !important;

        flex: 0 0 auto !important;

        padding: 0 !important;
        margin: 0 !important;

        color: #d4d7d3 !important;

        font-size: 9px !important;

        font-weight: 600 !important;

        letter-spacing: 0.8px !important;

        white-space: nowrap !important;
    }


    .nav-links a.active,
    .nav-menu a.active {
        color: #f0c75e !important;
    }


    .nav-links a.active::before,
    .nav-links a.active::after,
    .nav-menu a.active::before,
    .nav-menu a.active::after {
        display: none !important;
    }


    /* -----------------------------------------------------
       SEARCH BOX
    ----------------------------------------------------- */

    .header-search {
        position: absolute !important;

        top: 116px !important;
        left: 10px !important;
        right: 10px !important;

        width: auto !important;

        min-height: 46px !important;

        padding: 5px !important;

        border-radius: 4px !important;

        background: rgba(1, 8, 6, 0.98) !important;

        border: 1px solid rgba(218, 169, 58, 0.65) !important;

        box-shadow: 0 12px 35px rgba(0,0,0,0.55) !important;
    }


    .header-search input {
        min-width: 0 !important;

        padding: 9px 10px !important;

        font-size: 11px !important;
    }


    .header-search button {
        padding: 8px !important;

        font-size: 14px !important;
    }


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

    .hero {
        width: 100% !important;

        min-height: 650px !important;

        height: auto !important;

        margin-top: 0 !important;

        padding: 125px 16px 35px !important;

        display: flex !important;

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

        text-align: center !important;

        overflow: hidden !important;

        background-size: cover !important;

        background-position: center center !important;
    }


    .hero-content {
        width: 100% !important;

        max-width: 390px !important;

        margin: 0 auto !important;

        padding: 20px 5px !important;

        position: relative !important;

        left: auto !important;

        transform: none !important;

        z-index: 5 !important;
    }


    .hero-small-title {
        font-size: 8px !important;

        letter-spacing: 2.5px !important;

        margin-bottom: 12px !important;
    }


    .hero h1 {
        width: 100% !important;

        font-size: clamp(42px, 13vw, 62px) !important;

        line-height: 0.98 !important;

        letter-spacing: 2px !important;

        margin: 0 auto !important;
    }


    .hero-subtitle {
        margin-top: 12px !important;

        font-size: 8px !important;

        letter-spacing: 2px !important;
    }


    .hero-subtitle span {
        margin: 0 4px !important;
    }


    .hero-description {
        max-width: 300px !important;

        margin: 16px auto 20px !important;

        font-size: 10px !important;

        line-height: 1.6 !important;
    }


    /* -----------------------------------------------------
       HERO BUTTONS
    ----------------------------------------------------- */

    .hero-buttons {
        width: 100% !important;

        display: flex !important;

        justify-content: center !important;

        align-items: center !important;

        flex-wrap: wrap !important;

        gap: 8px !important;

        margin-top: 20px !important;
    }


    .hero-buttons .btn {
        min-width: 125px !important;

        padding: 10px 14px !important;

        font-size: 8px !important;

        letter-spacing: 1px !important;
    }


    /* -----------------------------------------------------
       HERO FEATURE BOXES
    ----------------------------------------------------- */

    .hero-feature {
        bottom: 12px !important;

        min-width: 0 !important;

        width: 42% !important;

        padding: 9px 7px !important;

        gap: 7px !important;

        background: rgba(1, 12, 9, 0.85) !important;
    }


    .hero-feature-left {
        left: 8px !important;
    }


    .hero-feature-right {
        right: 8px !important;
    }


    .hero-feature > i {
        font-size: 15px !important;
    }


    .hero-feature strong {
        font-size: 7px !important;

        letter-spacing: .5px !important;
    }


    .hero-feature span {
        font-size: 5.5px !important;

        letter-spacing: .4px !important;
    }


    /* -----------------------------------------------------
       COLLECTIONS
       Shopping-category style
    ----------------------------------------------------- */

    .collections {
        width: 100% !important;

        padding: 30px 12px 35px !important;

        overflow: hidden !important;
    }


    .collection-container {
        width: 100% !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 12px !important;
    }


    .collection-card {
        width: 100% !important;

        height: 145px !important;

        min-height: 145px !important;

        display: flex !important;

        flex-direction: row !important;

        overflow: hidden !important;

        position: relative !important;
    }


    .collection-image,
    .collection-dual-image {
        width: 40% !important;

        min-width: 40% !important;
        max-width: 40% !important;

        height: 145px !important;

        min-height: 145px !important;

        padding: 5px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        overflow: hidden !important;
    }


    .collection-image img,
    .collection-dual-image img {
        width: 100% !important;

        height: 100% !important;

        object-fit: contain !important;

        object-position: center !important;
    }


    .collection-content {
        width: 60% !important;

        min-width: 0 !important;

        max-width: 60% !important;

        height: 145px !important;

        padding: 12px 10px !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        align-items: flex-start !important;

        overflow: hidden !important;
    }


    .collection-content span {
        width: 100% !important;

        margin: 0 0 5px !important;

        font-size: 6px !important;

        line-height: 1.3 !important;

        letter-spacing: .8px !important;

        white-space: normal !important;
    }


    .collection-content h2 {
        width: 100% !important;

        margin: 0 0 5px !important;

        font-family: "Cinzel", serif !important;

        font-size: clamp(17px, 5vw, 23px) !important;

        line-height: 1.05 !important;

        letter-spacing: .5px !important;

        white-space: normal !important;

        word-break: normal !important;

        overflow-wrap: normal !important;
    }


    .collection-content p {
        width: 100% !important;

        margin: 0 0 7px !important;

        font-size: 7px !important;

        line-height: 1.35 !important;
    }


    .collection-content a {
        width: fit-content !important;

        max-width: 100% !important;

        padding: 5px 8px !important;

        font-size: 6px !important;

        white-space: nowrap !important;
    }


    /* -----------------------------------------------------
       SHOP PRODUCT SECTION
       2-column mobile shopping grid
    ----------------------------------------------------- */

    .shop-product-grid {
        width: 100% !important;

        max-width: 100% !important;

        padding: 0 10px !important;

        margin: 0 auto !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;
    }


    .shop-product-card {
        width: 100% !important;

        min-width: 0 !important;

        border-radius: 9px !important;

        overflow: hidden !important;
    }


    .shop-product-image {
        width: 100% !important;

        height: 175px !important;

        padding: 10px !important;
    }


    .shop-product-image img {
        width: 100% !important;

        height: 100% !important;

        object-fit: contain !important;
    }


    /* -----------------------------------------------------
       FEATURES
    ----------------------------------------------------- */

    .features {
        width: 100% !important;

        padding: 28px 12px !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 20px 10px !important;
    }


    .feature-item {
        min-width: 0 !important;

        padding: 4px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: flex-start !important;

        gap: 9px !important;

        border-right: none !important;
    }


    .feature-item i {
        font-size: 20px !important;

        flex-shrink: 0 !important;
    }


    .feature-item h3 {
        font-size: 8px !important;

        line-height: 1.3 !important;
    }


    .feature-item p {
        font-size: 6.5px !important;

        line-height: 1.3 !important;
    }


    /* -----------------------------------------------------
       ABOUT
    ----------------------------------------------------- */

    .about-section {
        width: 100% !important;

        padding: 55px 18px !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 30px !important;
    }


    .about-image img {
        height: 300px !important;
    }


    .about-content h2 {
        font-size: 32px !important;

        line-height: 1.1 !important;
    }


    .about-content p {
        font-size: 11px !important;

        line-height: 1.7 !important;
    }


    /* -----------------------------------------------------
       CTA
    ----------------------------------------------------- */

    .cta-section {
        width: 100% !important;

        padding: 45px 18px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 22px !important;

        text-align: center !important;
    }


    .cta-section p {
        font-size: 8px !important;

        letter-spacing: 2px !important;
    }


    .cta-section h2 {
        font-size: clamp(25px, 8vw, 38px) !important;

        line-height: 1.1 !important;
    }


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

    .footer {
        width: 100% !important;

        overflow: hidden !important;
    }


    .footer-container {
        width: 100% !important;

        padding: 35px 18px !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 28px 15px !important;
    }


    .footer-column {
        min-width: 0 !important;
    }


    .footer-column h3 {
        font-size: 10px !important;

        margin-bottom: 12px !important;
    }


    .footer-column a,
    .footer-column p {
        font-size: 8px !important;

        line-height: 1.6 !important;
    }


    /* -----------------------------------------------------
       WHATSAPP
    ----------------------------------------------------- */

    .whatsapp-button {
        width: 48px !important;

        height: 48px !important;

        right: 14px !important;

        bottom: 14px !important;

        font-size: 23px !important;

        z-index: 2000 !important;
    }
}


/* =========================================================
   SMALL PHONES - 375px / 360px
   ========================================================= */

@media (max-width: 380px) {

    .brand-logo img {
        width: 39px !important;
        height: 39px !important;
    }


    .brand-name h2 {
        font-size: 15px !important;
    }


    .nav-icons {
        gap: 4px !important;
    }


    .nav-icons button {
        width: 27px !important;
        height: 27px !important;
    }


    .nav-links,
    .nav-menu {
        gap: 20px !important;
    }


    .nav-links a,
    .nav-menu a {
        font-size: 8px !important;
    }


    .hero {
        min-height: 620px !important;

        padding-left: 12px !important;
        padding-right: 12px !important;
    }


    .hero h1 {
        font-size: 40px !important;
    }


    .hero-feature {
        width: 43% !important;

        padding: 8px 5px !important;
    }


    .collection-card {
        height: 138px !important;

        min-height: 138px !important;
    }


    .collection-image,
    .collection-dual-image {
        height: 138px !important;

        min-height: 138px !important;
    }


    .collection-content {
        height: 138px !important;

        padding: 9px 8px !important;
    }


    .collection-content h2 {
        font-size: 16px !important;
    }


    .shop-product-grid {
        gap: 9px !important;

        padding-left: 8px !important;
        padding-right: 8px !important;
    }


    .shop-product-image {
        height: 155px !important;
    }




    .features {
        gap: 16px 7px !important;
    }
}
/* =========================================================
   MOBILE HERO CONTENT POSITION FIX
   Keep cinematic background unchanged
   ========================================================= */

@media (max-width: 600px) {

    .hero-content {
       transform: translateY(-300px) !important;
    }

}
/* =========================================================
   MOBILE HERO CHARACTERS - STATIC TEST
   ========================================================= */

@media (max-width: 600px) {

    .hero-side-image {
        display: block !important;
        visibility: visible !important;

        position: absolute !important;

        top: 0 !important;
        bottom: 0 !important;

        width: 50% !important;

        background-repeat: no-repeat !important;
        background-size: cover !important;

        opacity: 1 !important;

        z-index: 10 !important;

        pointer-events: none !important;
    }

    .hero-left {
        left: 0 !important;
        right: auto !important;

        background-image:
            url("../images/header-1.png") !important;

        background-position: center left !important;
    }

    .hero-right {
        right: 0 !important;
        left: auto !important;

        background-image:
            url("../images/header-2.png") !important;

        background-position: center right !important;
    }

    .hero-overlay {
        z-index: 1 !important;
    }

    .hero-content {
        z-index: 20 !important;
    }

    .hero-feature {
        z-index: 21 !important;
    }
}
/* =========================================================
   MOBILE INNER PAGE - NAVBAR SPACING FIX
   Keeps homepage hero unchanged
   ========================================================= */

@media (max-width: 600px) {

    /* All normal page content starts below the navbar */

    body:not(.home-page) main,
    body:not(.home-page) section:first-of-type,
    body:not(.home-page) .page-section,
    body:not(.home-page) .shop-section,
    body:not(.home-page) .services-section,
    body:not(.home-page) .pricing-section,
    body:not(.home-page) .cart-section {
        padding-top: 125px !important;
    }

}
/* =========================================================
   SC ANIME - MOBILE INNER PAGE NAVBAR SPACING
   Homepage hero is NOT affected
   ========================================================= */

@media (max-width: 100px) {

    /* Pages without the homepage hero */
    body:not(:has(.hero)) {
        padding-top: 112px !important;
    }

}