/* ====================
header
======================== */
:root {
    /* Color Palette inspired by theperfumeco.online but customized for Snatched */
    --bg-offwhite: #f8f8f8;
    --bg-dark: #0a0a0a;
    --bg-card: #141414;
    --accent-gold: #cfa253;
    --accent-gold-hover: #e8bd6e;
    --accent-purple: #5E17EB;
    --accent-purple-hover: #7b3cf0;

    --text-dark: #1a1a1a;
    --text-light: #ffffff;
    --text-muted: #888888;

    --border-color: rgba(255, 255, 255, 0.1);

    /* Typography */
    /* --font-heading: 'Montserrat', sans-serif; */
    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Spacing & Radii */
    --radius-pill: 50px;
    --radius-card: 24px;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        --sryt-black: #07070b;
    --sryt-black2: #0f1018;
    --sryt-purple: #6f22d9;
    --sryt-purple2: #9b4bff;
    --sryt-gold: #f4b72d;
    --sryt-white: #ffffff;
    --sryt-muted: #a8a8b3;
    --sryt-line: #262738;
    --sryt-soft: #f7f5fb;
}

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

.animate-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

.counter-box {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.counter-box.in-view {
    opacity: 1;
    transform: scale(1);
}


/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
    /* Offset for the capsule header */
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-offwhite);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
}

ul {
    list-style: none;
}

button {
    font-family: var(--font-heading);
    cursor: pointer;
    border: none;
    background: none;
    transition: var(--transition-smooth);
}

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

/* --- Header / Navigation --- */
.site-header {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 1400px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    z-index: 100;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

.header-logo {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.header-nav {
    display: none;
}

@media (min-width: 992px) {
    .header-nav {
        display: flex;
        gap: 30px;
    }
}

.nav-link {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding: 5px 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--accent-purple);
    transition: var(--transition-smooth);
}

.nav-link:hover,
.nav-link.active {
    color: var(--accent-purple);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

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

.action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-offwhite);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    font-size: 20px;
}

.action-btn:hover {
    background: var(--accent-purple);
    color: var(--text-light);
}

.btn-primary {
    background-color: var(--accent-purple);
    color: var(--text-light);
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-primary:hover {
    background-color: var(--accent-purple-hover);
    color: var(--text-light);
}

/* --- Overlays & Drawers --- */
.overlay-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-smooth);
}

.overlay-mask.active {
    opacity: 1;
    visibility: visible;
}

/* Search Drawer */
.search-drawer {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    background: var(--text-light);
    padding: 40px 20px;
    z-index: 101;
    transition: var(--transition-smooth);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.search-drawer.active {
    top: 0;
}

.search-container {
    width: 100%;
    max-width: 800px;
    position: relative;
}

.search-input {
    width: 100%;
    border: none;
    border-bottom: 2px solid var(--text-dark);
    font-size: 32px;
    font-family: var(--font-heading);
    padding: 10px 50px 10px 0;
    outline: none;
    background: transparent;
}

.search-close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px;
}

/* Mobile / Hamburger Menu */
.side-menu {
    position: fixed;
    top: 0;
    left: -400px;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background: var(--bg-dark);
    color: var(--text-light);
    z-index: 102;
    padding: 40px;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
}

.side-menu.active {
    left: 0;
}

.side-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.side-menu-logo {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    color: var(--text-light);
    text-transform: uppercase;
}

.menu-close {
    color: var(--text-light);
    font-size: 32px;
    background: rgba(255, 255, 255, 0.1);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-close:hover {
    background: var(--accent-gold);
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.side-nav-link {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    display: block;
}

.side-nav-link:hover {
    color: var(--accent-gold);
    padding-left: 10px;
}

/* ==============================
--- Homepage Specific Styles ---
============================== */

/* 1. Hero Section */
.hero-section {
    padding: 100px 20px 40px;
    /* Space for fixed header */
}

.hero-slider-card {
    background-color: var(--bg-dark);
    border-radius: var(--radius-card);
    overflow: hidden;
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 600;
    height: auto;
}

.swiper-slide {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 5%;
}

.slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0.6;
    z-index: 0;
}

.slide-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    color: var(--text-light);
}

.slide-subtitle {
    font-family: var(--font-heading);
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: clamp(0.6rem, 2vw, 1.2rem);
    margin-bottom: clamp(5px, 1.5vw, 10px);
    display: flex;
    align-items: center;
    gap: 10px;
}

.slide-subtitle::before {
    content: '';
    width: 30px;
    height: 2px;
    background-color: var(--accent-gold);
}

.slide-title {
    font-size: clamp(1.2rem, 5vw, 5rem);
    margin-bottom: clamp(10px, 2vw, 20px);
    line-height: 1.2;
}

@media (min-width: 768px) {
    .slide-title {
        font-size: 5rem;
    }
}

.swiper-pagination-bullet {
    background: var(--text-light);
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    background: var(--accent-gold);
    opacity: 1;
}

/* 2. Stats Section */
.stats-section {
    padding: 60px 20px;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stat-card {
    text-align: center;
    position: relative;
}

.stat-number-outline {
    font-family: var(--font-heading);
    font-size: 100px;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 2px rgba(232, 189, 110, 0.5);
    line-height: 1;
    margin-bottom: -30px;
    position: relative;
    z-index: 0;
}

.stat-text {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    position: relative;
    z-index: 1;
    color: var(--text-dark);
}

/* 3. Categories Section */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-subtitle {
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 14px;
}

.section-title {
    font-size: 2.5rem;
    color: var(--text-dark);
}

.categories-section {
    padding: 60px 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.categories-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .categories-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.category-card {
    border-radius: var(--radius-card);
    overflow: hidden;
    position: relative;
    height: 400px;
    display: flex;
    align-items: flex-end;
    padding: 30px;
    group: category;
}

.category-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-card);
    /* Placeholder color */
    object-fit: cover;
    transition: transform 0.5s ease;
    z-index: 0;
}

.category-card:hover .category-bg {
    transform: scale(1.05);
}

.category-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    z-index: 1;
}

.category-title {
    position: relative;
    z-index: 2;
    color: var(--text-light);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.category-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    transition: var(--transition-smooth);
}

.category-card:hover .category-icon {
    background: var(--accent-gold);
    color: var(--bg-dark);
    transform: translateX(5px);
}

/* 4. Why Choose Us */
.why-section {
    padding: 80px 20px;
    background-color: var(--bg-dark);
    color: var(--text-light);
    border-radius: var(--radius-card);
    margin: 0 20px;
}

.why-section .section-title {
    color: var(--text-light);
}

.why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .why-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.why-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 30px;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.why-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-gold);
}

.why-number {
    position: absolute;
    top: -10px;
    right: -10px;
    font-family: var(--font-heading);
    font-size: 80px;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
    z-index: 0;
}

.why-title {
    font-size: 20px;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

.why-text {
    color: var(--text-muted);
    font-size: 14px;
    position: relative;
    z-index: 1;
}

/* 5. Contact Section */
.contact-section {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-container {
    background-color: #ffffff;
    border-radius: var(--radius-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

@media (min-width: 992px) {
    .contact-container {
        flex-direction: row;
    }
}

.contact-form-side {
    padding: 60px 40px;
    flex: 1;
}

.contact-info-side {
    background-color: var(--bg-card);
    color: var(--text-light);
    padding: 60px 40px;
    flex: 0.8;
}

.form-group {
    margin-bottom: 20px;
}

.form-control {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 16px;
    outline: none;
    transition: var(--transition-smooth);
}

.form-control:focus {
    border-color: var(--accent-gold);
}

textarea.form-control {
    height: 120px;
    resize: vertical;
}

.btn-submit {
    background-color: var(--accent-gold);
    color: var(--text-light);
    padding: 15px 30px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-submit:hover {
    background-color: var(--text-dark);
}

/* ============================
Footer
============================ */
.site-footer {
    margin-top: 80px;
    padding: 20px;
}

.footer-card {
    background-color: var(--bg-dark);
    border-radius: var(--radius-card);
    padding: 60px 40px 20px;
    color: var(--text-light);
    position: relative;
    overflow: hidden;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
    }
}

.footer-logo {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 800;
    color: var(--text-light);
    margin-bottom: 20px;
    display: block;
}

.footer-text {
    color: var(--text-muted);
    margin-bottom: 20px;
    max-width: 300px;
}

.footer-socials {
    display: flex;
    gap: 15px;
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 20px;
}

.social-link:hover {
    background: var(--accent-gold);
    color: var(--text-light);
}

.footer-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-link {
    color: var(--text-muted);
    transition: var(--transition-smooth);
}

.footer-link:hover {
    color: var(--accent-gold);
    padding-left: 5px;
}

.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-muted);
}

.contact-item i {
    color: var(--accent-gold);
    font-size: 24px;
    margin-top: 2px;
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.copyright-text {
    color: var(--text-muted);
    font-size: 14px;
}

/* Decorative Background element */
.footer-glow {
    position: absolute;
    top: -150px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(207, 162, 83, 0.15) 0%, rgba(10, 10, 10, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* ====================
   Auth Section
======================== */

@media (min-width: 992px) {
    .auth-split-layout {
        flex-direction: row;
        min-height: calc(100vh - 80px);
    }
}

.auth-left {
    background-color: var(--bg-dark);
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px 60px;
    /* Adjusted for fixed header */
    flex: 1;
}

.auth-brand-content {
    max-width: 400px;
}

.auth-brand-text {
    font-size: 16px;
    line-height: 1.8;
    color: #e0e0e0;
}

.auth-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 60px;
    /* Adjusted for fixed header */
    flex: 1;
    background-color: #ffffff;
}

.auth-form-container {
    width: 100%;
    max-width: 420px;
}

.auth-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--text-dark);
}

.auth-subtitle {
    font-size: 14px;
    color: var(--text-muted);
}

.auth-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.auth-input {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 15px;
    background-color: #fff;
    transition: var(--transition-smooth);
}

.auth-input:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(207, 162, 83, 0.1);
}

.password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-muted);
    font-size: 18px;
}

.password-toggle:hover {
    color: var(--accent-gold);
}

.auth-submit-btn {
    background-color: var(--bg-dark);
    color: var(--text-light);
    padding: 14px;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    letter-spacing: 0.5px;
    transition: var(--transition-smooth);
}

.auth-submit-btn:hover {
    background-color: var(--accent-gold);
    color: #fff;
}

.auth-link {
    font-size: 13px;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-smooth);
}

.auth-link:hover {
    color: var(--accent-gold);
}

.footer-link {
    color: var(--text-muted);
    transition: var(--transition-smooth);
}

.footer-link:hover {
    color: var(--accent-gold);
    padding-left: 5px;
}

.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-muted);
}

.contact-item i {
    color: var(--accent-gold);
    font-size: 24px;
    margin-top: 2px;
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.copyright-text {
    color: var(--text-muted);
    font-size: 14px;
}

/* Decorative Background element */
.footer-glow {
    position: absolute;
    top: -150px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(207, 162, 83, 0.15) 0%, rgba(10, 10, 10, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* ====================
   Auth Section
======================== */
.auth-section {
    padding: 0;
    min-height: calc(100vh - 80px);
    display: flex;
    background: #ffffff;
    margin-top: 0px;
}

.auth-split-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media (min-width: 992px) {
    .auth-split-layout {
        flex-direction: row;
        min-height: calc(100vh - 80px);
    }
}

.auth-left {
    background-color: var(--bg-dark);
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px 60px;
    /* Adjusted for fixed header */
    flex: 1;
}

.auth-brand-content {
    max-width: 400px;
}

.auth-brand-text {
    font-size: 16px;
    line-height: 1.8;
    color: #e0e0e0;
}

.auth-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 60px;
    /* Adjusted for fixed header */
    flex: 1;
    background-color: #ffffff;
}

.auth-form-container {
    width: 100%;
    max-width: 420px;
}

.auth-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--text-dark);
}

.auth-subtitle {
    font-size: 14px;
    color: var(--text-muted);
}

.auth-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.auth-input {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 15px;
    background-color: #fff;
    transition: var(--transition-smooth);
}

.auth-input:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(207, 162, 83, 0.1);
}

.password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-muted);
    font-size: 18px;
}

.password-toggle:hover {
    color: var(--accent-gold);
}

.auth-submit-btn {
    background-color: var(--bg-dark);
    color: var(--text-light);
    padding: 14px;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    letter-spacing: 0.5px;
    transition: var(--transition-smooth);
}

.auth-submit-btn:hover {
    background-color: var(--accent-gold);
    color: #fff;
}

.auth-link {
    font-size: 13px;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-smooth);
}

.auth-link:hover {
    color: var(--accent-gold);
}

.slide-content .btn-primary {
    font-size: clamp(0.7rem, 2vw, 1rem);
    padding: clamp(6px, 1.5vw, 15px) clamp(10px, 3vw, 30px);
}

/* ====================
   About Us Page
   ======================== */
.about-section {
    padding: 120px 20px 80px;
    background-color: var(--bg-offwhite, #f8f8f8);
}

.about-container {
    max-width: 1000px;
    /* narrowed it down a bit to match the screenshot text block width */
    margin: 0 auto;
}

.about-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.about-title {
    font-size: 2.5rem;
    color: var(--text-dark, #1a1a1a);
    margin-bottom: 24px;
    font-weight: 700;
}

.about-description {
    color: var(--text-muted, #888888);
    font-size: 1rem;
    line-height: 1.8;
}

.about-cards-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.about-card {
    background-color: #1212120a;
    padding: 30px 25px;
    flex: 1 1 calc(33.333% - 20px);
    min-width: 250px;
    border-radius: 0;
}

.about-card-title {
    font-size: 1.2rem;
    color: var(--text-dark, #1a1a1a);
    margin-bottom: 16px;
    font-weight: 600;
}

.about-card-text {
    color: var(--text-muted, #888888);
    font-size: 0.95rem;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .about-card {
        flex: 1 1 100%;
    }

    .about-title {
        font-size: 2rem;
    }
}

/* ==========================================
   UNIFIED PRODUCTS PAGE STYLES
   ========================================== */

/* Breadcrumb */
.cat-breadcrumb-wrap {
    margin-bottom: 2rem;
}

.cat-breadcrumb {
    font-size: 14px;
    font-family: var(--font-body, 'Inter', sans-serif);
    color: var(--text-muted, #888);
}

.cat-breadcrumb a {
    color: var(--accent-gold, #cda753);
    text-decoration: none;
    transition: color 0.2s ease;
}

.cat-breadcrumb a:hover {
    color: var(--text-dark, #111);
}

.bc-sep {
    margin: 0 8px;
    color: var(--text-muted, #888);
}

/* Page Title & Intro */
.cat-intro {
    padding-bottom: 2rem;
    border-bottom: 1px solid #eee;
    margin-bottom: 2rem;
    padding-top: 0px;
    /* Push below fixed header */
}

.cat-intro-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
}

.cat-title-line {
    width: 50px;
    height: 4px;
    background-color: var(--accent-gold, #cda753);
    margin-bottom: 10px;
}

.cat-title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: 800;
    font-size: 2.5rem;
    margin: 0;
    color: var(--text-dark, #111);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cat-desc {
    color: var(--text-muted, #888);
    font-size: 15px;
    max-width: 400px;
    margin: 0;
}

/* Sidebar Filters */
.filter-sidebar {
    background-color: var(--bg-light, #f9f9f9);
    border-radius: 8px;
    padding: 20px;
}

.filter-group h6 {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
    color: var(--text-dark, #111);
}

.filter-input {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 10px;
}

.filter-input:focus {
    border-color: var(--accent-gold, #cda753);
    box-shadow: 0 0 0 0.2rem rgba(205, 167, 83, 0.25);
    outline: none;
}

.form-check-input:checked {
    background-color: var(--accent-gold, #cda753);
    border-color: var(--accent-gold, #cda753);
}

/* Subcategory Buttons */
.subcat-btn {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.subcat-btn.active {
    background-color: var(--accent-gold, #cda753) !important;
    border-color: var(--accent-gold, #cda753) !important;
    color: #fff !important;
}

.subcat-btn:hover:not(.active) {
    background-color: #f1f1f1;
    border-color: #ddd;
}

/* Product Card Improvements */
#productGrid .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#productGrid .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
}

@media (max-width: 768px) {
    .cat-intro-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .cat-title {
        font-size: 2rem;
    }
}

/* Pagination Overrides for Snatched Theme */
.pagination {
    margin-top: 2rem;
}

.page-link {
    color: var(--text-dark, #111);
    border-color: #ddd;
    background-color: transparent;
    padding: 8px 16px;
    font-family: var(--font-body, 'Inter', sans-serif);
    transition: all 0.2s ease;
    margin: 0 4px;
    border-radius: 4px;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 4px;
}

.page-link:hover {
    color: #fff;
    background-color: var(--text-dark, #111);
    border-color: var(--text-dark, #111);
}

.page-item.active .page-link {
    background-color: var(--accent-gold, #cda753);
    border-color: var(--accent-gold, #cda753);
    color: #fff;
    box-shadow: 0 4px 10px rgba(205, 167, 83, 0.3);
}

.page-item.disabled .page-link {
    color: #999;
    background-color: #f9f9f9;
    border-color: #eee;
}

/* ==========================================
   MODERN FILTER SIDEBAR (Desktop & Mobile)
   ========================================== */

/* Mobile Button */
.filter-mobile-btn {
    background-color: var(--bg-dark, #0a0a0a);
    color: var(--text-light, #fff);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.filter-mobile-btn:hover {
    background-color: var(--text-dark, #111);
}

/* Custom Radio Buttons */
.filter-options-wrap {
    padding-left: 8px;
}

.custom-radio-wrap {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
}

.custom-radio-wrap .filter-trigger {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-radio-label {
    cursor: pointer;
    font-size: 14px;
    color: var(--text-muted, #888);
    transition: all 0.2s ease;
    display: inline-block;
    padding-top: 2px;
}

.custom-radio-label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 50%;
    background: #fff;
    transition: all 0.2s ease;
}

.filter-trigger:checked~.custom-radio-label {
    color: var(--text-dark, #111);
    font-weight: 600;
}

.filter-trigger:checked~.custom-radio-label:before {
    border-color: var(--accent-gold, #cda753);
    background: var(--accent-gold, #cda753);
    box-shadow: inset 0 0 0 3px #fff;
}

.custom-radio-label:hover {
    color: var(--text-dark, #111);
}

.custom-radio-label:hover:before {
    border-color: var(--accent-gold, #cda753);
}

/* Range Button */
.filter-apply-btn {
    border: 1px solid var(--accent-gold, #cda753);
    color: var(--text-dark, #111);
    background: transparent;
    font-weight: 600;
    transition: all 0.3s ease;
}

.filter-apply-btn:hover {
    background: var(--accent-gold, #cda753);
    color: #fff;
}

@media (min-width: 992px) {
    .shadow-sm-lg {
        box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
    }

    .filter-sidebar {
        background-color: #fff;
        border-radius: 12px;
    }
}

@media (max-width: 991.98px) {
    .offcanvas-bottom.filter-sidebar {
        border-radius: 20px 20px 0 0;
        height: 80vh !important;
        background-color: #fff !important;
    }
}

/* ════════════════════════════════════════════════════════
   PRODUCT DETAILS PAGE CSS & ANIMATIONS
   ════════════════════════════════════════════════════════ */

/* Animations */
@keyframes fadeUpIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.pd-section {
    padding: 140px 0 4rem;
    background-color: transparent;
}

.pd-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    animation: fadeUpIn 0.6s ease-out forwards;
}

@media (min-width: 992px) {
    .pd-layout {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: start;
    }
}

/* Gallery (Left Column) */
.pd-gallery {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: fadeInScale 0.6s ease-out forwards;
}

.pd-main-img-wrap {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.pd-main-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.pd-main-img:hover {
    transform: scale(1.05);
}

.pd-main-img.switching {
    opacity: 0.3;
    transform: scale(0.95);
}

/* Thumbs */
.pd-thumbs-wrap {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.pd-thumbs-wrap::-webkit-scrollbar {
    height: 4px;
}

.pd-thumbs-wrap::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.pd-thumb-btn {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 0;
    background: #f8f5f0;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.pd-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-thumb-btn:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.pd-thumb-btn.active {
    border-color: var(--accent-gold, #cda753);
    opacity: 1;
    box-shadow: 0 4px 10px rgba(205, 167, 83, 0.2);
}

/* Info (Right Column) */
.pd-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    animation: fadeUpIn 0.8s ease-out forwards;
}

.pd-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark, #111);
    line-height: 1.2;
    margin: 0;
    font-family: var(--font-heading);
}

.pd-prices {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.pd-price-amount {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent-gold, #cda753);
}

.pd-short-desc {
    font-size: 1rem;
    color: var(--text-muted, #666);
    line-height: 1.6;
}

/* Add to Cart Row */
.pd-qty-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.pd-qty-input {
    width: 50px;
    height: 50px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    -moz-appearance: textfield;
}

.pd-qty-input::-webkit-outer-spin-button,
.pd-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pd-qty-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--text-dark, #111);
    transition: all 0.2s ease;
}

.pd-qty-btn:hover {
    background: #f8f5f0;
    border-color: #ccc;
}

.pd-atc-btn,
.pd-update-btn {
    flex-grow: 1;
    height: 50px;
    border: none;
    border-radius: 8px;
    background: var(--accent-gold, #cda753);
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pd-atc-btn:hover,
.pd-update-btn:hover {
    background: var(--text-dark, #111);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.pd-update-btn {
    background: var(--accent-purple, #6a0dad);
}

.pd-update-btn:hover {
    background: var(--text-dark, #111);
}

.pd-atc-btn:disabled,
.pd-update-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Tabs */
.pd-tabs-wrap {
    margin-top: 2rem;
    border-top: 1px solid #eee;
    padding-top: 2rem;
}

.pd-tabs-nav {
    display: flex;
    gap: 2rem;
    border-bottom: 1px solid #ddd;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.pd-tabs-nav::-webkit-scrollbar {
    display: none;
}

.pd-tab-btn {
    background: none;
    border: none;
    padding: 0 0 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-muted, #666);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.pd-tab-btn:after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent-gold, #cda753);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.pd-tab-btn.active {
    color: var(--text-dark, #111);
}

.pd-tab-btn.active:after {
    transform: scaleX(1);
}

.pd-tab-btn:hover {
    color: var(--accent-gold, #cda753);
}

.pd-tab-pane {
    display: none;
    animation: fadeIn 0.4s ease-out;
}

.pd-tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.pd-desc-content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-muted, #555);
}

/* Review Stars Picker */
.rv-star-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #ccc;
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.rv-star-btn.active,
.rv-star-btn.hovered {
    color: #ffc107;
}

.rv-star-btn:hover {
    transform: scale(1.2);
}

.pd-review-item {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 1rem;
}

.rv-stars {
    color: #ffc107;
    font-size: 0.9rem;
}

/* ========================================= */
/* PRODUCT DETAILS PAGE (pd-)                */
/* ========================================= */
.pd-section {
    padding: 40px 0 60px 0;
    background-color: #fff;
}

.pd-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
}

.pd-gallery {
    flex: 1 1 45%;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pd-main-img-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #f9f9f9;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.pd-main-img-wrap:hover .pd-main-img {
    transform: scale(1.05);
}

.pd-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
    /* Hide scrollbar for cleaner look */
    scrollbar-width: none;
}

.pd-thumbs::-webkit-scrollbar {
    display: none;
}

.pd-thumb-btn {
    border: 2px solid transparent;
    background: #f9f9f9;
    border-radius: 8px;
    padding: 0;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pd-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-thumb-btn.active {
    border-color: var(--accent-gold, #cda753);
}

.pd-info {
    flex: 1 1 45%;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pd-title {
    font-family: var(--font-heading, inherit);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark, #333);
    margin: 0;
    line-height: 1.2;
}

.pd-prices {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pd-price-retail {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-gold, #cda753);
}

.pd-short-desc {
    font-size: 1rem;
    color: var(--text-muted, #666);
    line-height: 1.6;
}

.pd-variants {
    margin: .25rem 0 1rem;
}

.pd-variants-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #333;
    margin-bottom: .55rem;
}

.pd-variant-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.pd-variant-btn {
    min-width: 64px;
    min-height: 44px;
    padding: .35rem .8rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #222;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    transition: border-color .2s, background .2s, color .2s;
}

.pd-variant-name {
    font-size: .9rem;
    font-weight: 700;
}

.pd-variant-btn:hover:not(:disabled) {
    border-color: var(--accent-purple, #5E17EB);
}

.pd-variant-btn.is-selected {
    border-color: var(--accent-purple, #5E17EB);
    background: var(--accent-purple, #5E17EB);
    color: #fff;
}

.pd-variant-btn.is-out,
.pd-variant-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    background: #f6f6f6;
    color: #888;
}

.pd-variant-btn.is-out .pd-variant-name {
    text-decoration: line-through;
}

.pd-variant-stock {
    display: block;
    margin-top: .15rem;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.pd-variant-hint {
    display: none;
    margin-top: .45rem;
    font-size: .82rem;
    color: #a33;
}

.pd-variant-hint.is-visible {
    display: block;
}

.ci-variant {
    font-size: .75rem;
    color: #777;
    margin-top: -.1rem;
}

.pd-cart-block {
    margin-top: 10px;
    padding: 20px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.pd-qty-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pd-qty-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.pd-qty-btn:hover {
    background: #f1f1f1;
}

.pd-qty-input {
    width: 50px;
    height: 40px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-weight: 600;
}

/* Hide spin buttons for input type number */
.pd-qty-input::-webkit-outer-spin-button,
.pd-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pd-qty-input[type=number] {
    -moz-appearance: textfield;
}

.pd-atc-btn,
.pd-update-btn {
    padding: 0 25px;
    height: 45px;
    background: var(--accent-purple, #1e1b4b);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pd-atc-btn:hover,
.pd-update-btn:hover {
    background: var(--accent-gold, #cda753);
}

/* Tabs */
.pd-tabs-wrap {
    margin-top: 20px;
}

.pd-tabs-nav {
    display: flex;
    gap: 20px;
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
    overflow-x: auto;
    /* Allow horizontal scroll on mobile, NO vertical scroll */
    overflow-y: hidden;
    /* Fix vertical scroll */
    white-space: nowrap;
}

.pd-tabs-nav::-webkit-scrollbar {
    display: none;
}

.pd-tab-btn {
    background: none;
    border: none;
    padding: 10px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted, #666);
    position: relative;
    cursor: pointer;
}

.pd-tab-btn.active {
    color: var(--text-dark, #333);
}

.pd-tab-btn::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-gold, #cda753);
    transition: width 0.3s ease;
}

.pd-tab-btn.active::after {
    width: 100%;
}

.pd-tab-pane {
    display: none;
    animation: fadeIn 0.4s ease;
}

.pd-tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

@media (max-width: 768px) {
    .pd-layout {
        flex-direction: column;
        gap: 20px;
    }

    .pd-title {
        font-size: 1.5rem;
    }
}

.co-section {
    padding: 40px 0px 4rem 0px;
}

.co-page-header {
    margin-bottom: 1.8rem;
}

.co-page-title {
    font-family: var(--font-d);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #111;
    margin: 0 0 .2rem;
}

.co-page-sub {
    font-size: .85rem;
    color: #888;
    margin: 0;
}

/* ── Card ── */
.co-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: var(--r, 12px);
    overflow: hidden;
}

.co-card-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    background: #fafaf9;
}

.co-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-purple);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.co-card-title {
    font-family: var(--font-b);
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.co-continue-link {
    font-size: .78rem;
    color: var(--accent-gold);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.co-continue-link:hover {
    color: var(--accent-gold-hover);
}

.co-card-body {
    padding: 1.4rem;
}

/* ── Address list ── */
.co-address-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-bottom: .9rem;
}

.co-address-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    padding: .9rem 1rem;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    position: relative;
}

.co-address-item:hover {
    border-color: #aaa;
    background: #fafaf9;
}

.co-address-item:has(.co-addr-radio:checked),
.co-address-item.selected {
    border-color: var(--accent-purple);
    background: #f4f8f5;
}

.co-addr-indicator {
    flex-shrink: 0;
    padding-top: .15rem;
}

.co-addr-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ccc;
    background: #fff;
    transition: border-color .2s, background .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.co-addr-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    transition: background .2s;
}

.co-address-item:has(.co-addr-radio:checked) .co-addr-dot,
.co-address-item.selected .co-addr-dot {
    border-color: var(--accent-purple);
}

.co-address-item:has(.co-addr-radio:checked) .co-addr-dot::after,
.co-address-item.selected .co-addr-dot::after {
    background: var(--accent-purple);
}

.co-addr-content {
    flex: 1;
    min-width: 0;
}

.co-addr-name {
    font-size: .88rem;
    font-weight: 700;
    color: #111;
    margin-bottom: .3rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.co-addr-phone {
    font-weight: 400;
    color: #666;
}

.co-addr-badge {
    background: var(--accent-purple);
    color: #fff;
    font-size: .65rem;
    padding: .15rem .5rem;
    border-radius: 20px;
    font-weight: 600;
}

.co-addr-line {
    font-size: .82rem;
    color: #555;
    line-height: 1.55;
}

.co-addr-edit-btn {
    flex-shrink: 0;
    background: none;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    color: #888;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

.co-addr-edit-btn:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

/* ── Add address button ── */
.co-add-addr-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 2px dashed #ddd;
    border-radius: 10px;
    padding: .75rem 1rem;
    background: none;
    font-size: .85rem;
    font-weight: 600;
    color: #666;
    width: 100%;
    cursor: pointer;
    transition: border-color .2s, color .2s;
    font-family: var(--font-b);
}

.co-add-addr-btn:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

/* ── Form ── */
.co-form-divider {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #888;
    margin: 1.2rem 0 1rem;
    display: flex;
    align-items: center;
    gap: .7rem;
}

.co-form-divider::before,
.co-form-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #eee;
}

.co-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: #555;
    display: block;
    margin-bottom: .35rem;
    font-family: var(--font-b);
}

.co-req {
    color: #e05c5c;
}

.co-field {
    display: flex;
    flex-direction: column;
}

.co-input,
.co-select {
    border: 1px solid #dde0dc;
    border-radius: 8px;
    padding: .6rem .85rem;
    font-size: .875rem;
    color: #222;
    background: #fff;
    outline: none;
    font-family: var(--font-b);
    transition: border-color .2s;
    width: 100%;
}

.co-input:focus,
.co-select:focus {
    border-color: var(--accent-gold);
}

.co-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    padding-right: 2rem;
}

.co-textarea {
    min-height: 80px;
    resize: vertical;
}

.co-radio-group {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.co-radio-opt {
    cursor: pointer;
}

.co-radio-opt input {
    display: none;
}

.co-radio-box {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: .45rem .9rem;
    font-size: .82rem;
    font-weight: 600;
    color: #555;
    transition: border-color .2s, background .2s, color .2s;
}

.co-radio-opt input:checked~.co-radio-box {
    border-color: var(--accent-purple);
    background: #f4f8f5;
    color: var(--accent-purple);
}

/* ── Buttons ── */
.co-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--accent-purple);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .65rem 1.4rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--font-b);
    transition: background .2s, transform .15s;
}

.co-btn-primary:hover {
    background: var(--accent-purple);
    transform: translateY(-1px);
}

.co-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: none;
    border: 1px solid #ddd;
    color: #555;
    border-radius: 8px;
    padding: .65rem 1.2rem;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-b);
    transition: border-color .2s, color .2s;
}

.co-btn-ghost:hover {
    border-color: #aaa;
    color: #111;
}

.co-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: none;
    border: 1px solid var(--dark-green, #1c3028);
    color: #fff;
    border-radius: 8px;
    padding: .55rem 1.1rem;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-b);
    transition: background .2s;
}

.co-btn-outline:hover {
    background: #f4f8f5;
}

/* ── Order table ── */
.co-order-table-wrap {
    overflow-x: auto;
}

.co-order-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.co-order-table thead tr {
    background: #fafaf9;
    border-bottom: 1px solid #eee;
}

.co-order-table th {
    padding: .65rem 1rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #888;
    white-space: nowrap;
}

.co-order-table td {
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    vertical-align: top;
}

.co-order-table tbody tr:last-child td {
    border-bottom: none;
}

.co-prod-name {
    font-weight: 600;
    color: #111;
    margin-bottom: .2rem;
}

.co-qty-badge {
    background: #f0ede8;
    color: #555;
    font-size: .7rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: 4px;
    margin-left: .3rem;
}

.co-prod-meta {
    font-size: .75rem;
    color: #999;
}

.co-unavail {
    opacity: .5;
}

.co-unavail-badge {
    display: inline-block;
    background: #fde8e8;
    color: #e05c5c;
    font-size: .68rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 4px;
    margin-top: .3rem;
}

.co-price-cell {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.co-price-old {
    font-size: .72rem;
    color: #bbb;
    text-decoration: line-through;
}

.co-item-total {
    font-weight: 600;
    color: #111;
}

/* ── Totals ── */
.co-totals {
    padding: .5rem 1rem 0;
}

.co-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    font-size: .85rem;
    color: #555;
}

.co-total-row:last-child {
    border-bottom: none;
}

.co-free {
    color: #4caf88;
    font-weight: 600;
}

.co-saving-row,
.co-coupon-row {
    color: #4caf88;
}

.co-save-amt {
    color: #4caf88;
    font-weight: 600;
}

.co-grand-row {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    padding-top: .85rem;
    border-top: 2px solid #eee !important;
}

.co-grand-amt {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
}

/* ── Coupon strip ── */
.co-coupon-strip {
    padding: .9rem 1rem;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

.co-coupon-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: none;
    border: 1px dashed var(--accent-gold);
    border-radius: 8px;
    padding: .5rem 1rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--accent-gold);
    cursor: pointer;
    font-family: var(--font-b);
    transition: background .2s;
}

.co-coupon-btn:hover {
    background: rgba(201, 168, 76, .07);
}

.co-coupon-remove-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: 1px solid #fdc;
    border-radius: 8px;
    padding: .5rem 1rem;
    font-size: .8rem;
    font-weight: 600;
    color: #e05c5c;
    cursor: pointer;
    font-family: var(--font-b);
    transition: background .2s;
}

.co-coupon-remove-btn:hover {
    background: #fde8e8;
}

/* ── Payment list ── */
.co-payment-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 1.3rem;
}

.co-pay-item {
    display: flex;
    align-items: center;
    gap: .9rem;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    padding: .85rem 1rem;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.co-pay-item:has(.co-pay-radio:checked) {
    border-color: var(--accent-purple);
    background: #f4f8f5;
}

.co-pay-check {
    flex-shrink: 0;
}

.co-pay-check i {
    font-size: 1.1rem;
    color: #ccc;
    transition: color .2s;
}

.co-pay-item:has(.co-pay-radio:checked) .co-pay-check i {
    color: var(--accent-purple);
}

.co-pay-info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.co-pay-label {
    font-size: .87rem;
    font-weight: 600;
    color: #111;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.co-pay-sub {
    font-size: .75rem;
    color: #888;
}

.co-pay-extra {
    background: #f8f9f7;
    border-radius: 8px;
    padding: 1rem;
    margin-top: .3rem;
    margin-left: 2.2rem;
}

/* ── Captcha ── */
.co-captcha-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
}

.co-captcha-q {
    font-size: .88rem;
    font-weight: 600;
    color: #444;
}

.co-captcha-input {
    width: 90px !important;
    text-align: center;
}

/* ── Place order button ── */
.co-place-order-btn {
    padding: 0px 20px;
    width: 100%;
    height: 56px;
    background: var(--accent-purple);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    cursor: pointer;
    font-family: var(--font-b);
    transition: background .2s, transform .15s;
}

.co-place-order-btn:hover {
    background: var(--accent-purple);
    transform: translateY(-1px);
}

.co-place-order-btn:active {
    transform: translateY(0);
}

.co-place-order-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}

.co-grand-inline {
    background: rgba(255, 255, 255, .15);
    border-radius: 6px;
    padding: .2rem .6rem;
    font-size: .8rem;
    margin-left: auto;
}

/* ── Modal ── */
.co-modal-rounded {
    border-radius: 16px;
    border: none;
    overflow: hidden;
}

.co-modal-header {
    background: #fafaf9;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    padding: 1rem 1.4rem;
}

.co-modal-body {
    padding: 1.4rem;
}

/* ── Coupon table ── */
.co-coupon-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.co-coupon-table th {
    padding: .6rem .8rem;
    background: #f5f7f4;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #888;
    border-bottom: 1px solid #eee;
}

.co-coupon-table td {
    padding: .75rem .8rem;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.co-coupon-table tr:last-child td {
    border-bottom: none;
}

.co-coupon-code {
    background: #f0ede8;
    color: #111;
    font-weight: 700;
    font-family: monospace;
    padding: .25rem .6rem;
    border-radius: 5px;
    letter-spacing: .08em;
}

.co-btn-apply-coupon {
    background: var(--accent-purple);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: .38rem .9rem;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-b);
    transition: background .2s;
}

.co-btn-apply-coupon:hover {
    background: var(--accent-purple-hover);
}

/* ── Success modal ── */
.co-success-icon {
    font-size: 3.5rem;
    color: #4caf88;
    margin-bottom: .9rem;
    line-height: 1;
}

.co-success-title {
    font-family: var(--font-d);
    font-size: 1.6rem;
    font-weight: 700;
    color: #111;
    margin-bottom: .35rem;
}

.co-success-sub {
    font-size: .87rem;
    color: #666;
    margin-bottom: .3rem;
}

.co-success-order {
    font-size: .85rem;
    color: #333;
}

/* ── New address form animation ── */
.co-new-addr-form {
    margin-top: .5rem;
}

/* ── Responsive ── */
@media (max-width:767px) {
    .co-card-body {
        padding: 1rem;
    }

    .co-card-header {
        padding: .85rem 1rem;
    }

    .co-address-item {
        padding: .75rem .85rem;
    }

    .co-order-table th,
    .co-order-table td {
        padding: .55rem .7rem;
    }

    .co-place-order-btn {
        height: 52px;
        font-size: .78rem;
    }

    .co-grand-inline {
        display: none;
    }
}

@media (max-width:575px) {
    .co-section {
        padding-top: 3rem;
        padding: 1rem 0 2.5rem;
    }

    .co-radio-group {
        gap: .5rem;
    }
}

/* ══════════════════════════════════════════════════════════
   DELIVERY METHOD — add these rules to your existing CSS.
   They cover all new classes introduced in the updated
   checkout view (delivery method card, FastPay, Paxi).
══════════════════════════════════════════════════════════ */

/* ── Delivery method list wrapper ── */
.co-delivery-method-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* ── Each delivery option row ── */
.co-delivery-item {
    display: flex;
    align-items: center;
    gap: .9rem;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    padding: .85rem 1rem;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.co-delivery-item:hover {
    border-color: #aaa;
    background: #fafaf9;
}

.co-delivery-item:has(.co-dm-radio:checked),
.co-delivery-item.co-dm-selected {
    border-color: var(--accent-purple);
    background: #f4f8f5;
}

/* ── Radio check icon inside delivery item ── */
.co-dm-check {
    flex-shrink: 0;
}

.co-dm-check i {
    font-size: 1.1rem;
    color: #ccc;
    transition: color .2s;
}

.co-delivery-item:has(.co-dm-radio:checked) .co-dm-check i,
.co-delivery-item.co-dm-selected .co-dm-check i {
    color: var(--accent-purple);
}

/* ── Delivery method text info ── */
.co-dm-info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.co-dm-label {
    font-size: .87rem;
    font-weight: 600;
    color: #111;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.co-dm-sub {
    font-size: .75rem;
    color: #888;
}

/* ── Expandable extra section below each delivery option ── */
.co-dm-extra {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed #e0e0e0;
}

/* ── Section title inside FastPay / Paxi panels ── */
.co-dm-section-title {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #555;
    margin-bottom: .9rem;
    display: flex;
    align-items: center;
    gap: .45rem;
}

/* ── Small label above saved address lists ── */
.co-dm-label-sm {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #888;
    display: block;
}

/* ── Toggle checkbox (same-billing / use-separate) ── */
.co-checkbox-opt {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    cursor: pointer;
    user-select: none;
}

.co-checkbox-opt input[type="checkbox"] {
    display: none;
}

.co-checkbox-box {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .84rem;
    font-weight: 600;
    color: #333;
    padding: .5rem .9rem;
    border: 1px solid #dde0dc;
    border-radius: 8px;
    background: #fff;
    transition: border-color .2s, background .2s, color .2s;
}

.co-checkbox-opt input[type="checkbox"]:checked~.co-checkbox-box {
    border-color: var(--accent-purple);
    background: #f4f8f5;
    color: var(--accent-purple);
}

.co-checkbox-opt input[type="checkbox"]:checked~.co-checkbox-box::before {
    content: '\F26A';
    font-family: 'bootstrap-icons';
    font-size: .85rem;
    color: var(--accent-purple);
}

/* ── Paxi-specific badge colour (overrides the green default) ── */
.co-paxi-badge {
    background: #e86c1a !important;
    color: #fff !important;
}

/* ── Paxi address item selected state ── */
.co-address-item:has(.co-paxi-addr-radio:checked),
.co-paxi-item.selected {
    border-color: var(--accent-purple);
    background: #f4f8f5;
}

.co-address-item:has(.co-paxi-addr-radio:checked) .co-addr-dot,
.co-paxi-item.selected .co-addr-dot {
    border-color: var(--accent-purple);
}

.co-address-item:has(.co-paxi-addr-radio:checked) .co-addr-dot::after,
.co-paxi-item.selected .co-addr-dot::after {
    background: var(--accent-purple);
}

/* ── FastPay delivery address list selected state ── */
.co-fp-addr-list .co-address-item:has(.co-fp-addr-radio:checked),
.co-fp-addr-list .co-address-item.selected {
    border-color: var(--accent-purple);
    background: #f4f8f5;
}

.co-fp-addr-list .co-address-item:has(.co-fp-addr-radio:checked) .co-addr-dot,
.co-fp-addr-list .co-address-item.selected .co-addr-dot {
    border-color: var(--accent-purple);
}

.co-fp-addr-list .co-address-item:has(.co-fp-addr-radio:checked) .co-addr-dot::after,
.co-fp-addr-list .co-address-item.selected .co-addr-dot::after {
    background: var(--accent-purple);
}

/* ── Responsive tweaks ── */
@media (max-width: 575px) {
    .co-delivery-item {
        padding: .75rem .85rem;
    }

    .co-dm-extra {
        margin-top: .75rem;
        padding-top: .75rem;
    }
}

/* <!-- ══════════════════════════════════════════════════════════
     Order Details PAGE STYLES
══════════════════════════════════════════════════════════ --> */

/* ── Order Detail Page ── */
.od-section {
    padding: 1.8rem 0 4rem;
}

/* ── Page header ── */
.od-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.8rem;
}

.od-page-title {
    font-family: var(--font-d);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: #111;
    margin: 0 0 .2rem;
}

.od-page-sub {
    font-size: .82rem;
    color: #888;
    margin: 0;
}

/* ── Status pill ── */
.od-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border-radius: 20px;
    padding: .4rem 1rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ── Cards ── */
.od-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.od-card-header {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .9rem 1.3rem;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    background: #fafaf9;
}

.od-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--accent-purple);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}

.od-card-title {
    font-family: var(--font-b);
    font-size: .92rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.od-card-body {
    padding: 1.2rem 1.3rem;
}

/* ── Info grid (order / payment / address) ── */
.od-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

@media(max-width: 991px) {
    .od-info-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width: 575px) {
    .od-info-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Info rows ── */
.od-info-row {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.od-info-item {}

.od-info-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: .18rem;
    display: block;
}

.od-info-val {
    font-size: .88rem;
    font-weight: 600;
    color: #222;
    line-height: 1.45;
}

.od-info-val.muted {
    font-weight: 400;
    color: #555;
}

/* ── Payment table ── */
.od-price-table {
    width: 100%;
    border-collapse: collapse;
}

.od-price-table tr td {
    padding: .42rem 0;
    font-size: .85rem;
    color: #555;
}

.od-price-table tr td:first-child {
    font-weight: 600;
    color: #333;
}

.od-price-table tr td:last-child {
    text-align: right;
}

.od-price-table .od-grand-row td {
    padding-top: .7rem;
    border-top: 2px solid #eee;
    font-size: .95rem;
    font-weight: 700;
    color: #111;
}

.od-price-table .od-grand-row td:last-child {
    color: #fff;
}

/* ── Product row ── */
.od-product-item {
    display: flex;
    gap: 1.1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.od-product-item:last-child {
    border-bottom: none;
}

.od-prod-img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: contain;
    background: #f8f6f2;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, .06);
    padding: .3rem;
}

.od-prod-info {
    flex: 1;
    min-width: 0;
}

.od-prod-name {
    font-size: .9rem;
    font-weight: 600;
    color: #111;
    margin-bottom: .25rem;
    line-height: 1.4;
    display: block;
    transition: color .18s;
}

.od-prod-name:hover {
    color: var(--accent-gold);
}

.od-prod-meta {
    font-size: .77rem;
    color: #999;
    margin-bottom: .1rem;
}

.od-prod-price {
    font-size: .88rem;
    font-weight: 600;
    color: #333;
}

.od-prod-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

/* ── Cancel badge ── */
.od-cancel-info {
    background: #fef2f2;
    border: 1px solid #fcd5d5;
    border-radius: 8px;
    padding: .7rem .9rem;
    margin-top: .7rem;
    font-size: .8rem;
    color: #e05c5c;
    line-height: 1.55;
}

.od-cancel-info strong {
    display: block;
    margin-bottom: .15rem;
    color: #c0392b;
}

/* ── Refund badge ── */
.od-refund-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 6px;
    padding: .28rem .65rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-top: .4rem;
}

.od-refund-badge.pending {
    background: #fefce8;
    color: #b45309;
}

.od-refund-badge.process {
    background: #eff6ff;
    color: #1d4ed8;
}

.od-refund-badge.complete {
    background: #f0fdf4;
    color: #166534;
}

.od-refund-badge.wait {
    background: #fef2f2;
    color: #e05c5c;
}

/* ── Timeline ── */
.od-timeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: .5rem 0 .2rem;
    overflow-x: auto;
    scrollbar-width: none;
    position: relative;
}

.od-timeline::-webkit-scrollbar {
    display: none;
}

.od-tl-step {
    flex: 1;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* connector line between steps */
.od-tl-step::before {
    content: '';
    position: absolute;
    top: 14px;
    left: calc(-50% + 14px);
    right: calc(50% + 14px);
    height: 3px;
    background: #e5e7eb;
    z-index: 0;
}

.od-tl-step:first-child::before {
    display: none;
}

/* filled connector for completed steps */
.od-tl-step.done::before {
    background: var(--accent-purple);
}

.od-tl-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid #e5e7eb;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    color: #ccc;
    z-index: 1;
    transition: all .25s;
    flex-shrink: 0;
}

.od-tl-step.done .od-tl-dot {
    border-color: #fff;
    background: var(--accent-purple);
    color: #fff;
}

.od-tl-step.current .od-tl-dot {
    border-color: var(--accent-gold);
    background: var(--accent-gold);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(201, 168, 76, .2);
}

.od-tl-label {
    font-size: .7rem;
    font-weight: 600;
    color: #aaa;
    margin-top: .45rem;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
}

.od-tl-step.done .od-tl-label,
.od-tl-step.current .od-tl-label {
    color: #111;
}

/* ── Action buttons ── */
.od-action-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 8px;
    padding: .45rem .95rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    cursor: pointer;
    border: none;
    font-family: var(--font-b);
    transition: background .18s, transform .15s;
}

.od-action-btn:hover {
    transform: translateY(-1px);
}

.od-action-btn.danger {
    background: #fef2f2;
    color: #e05c5c;
    border: 1px solid #fcd5d5;
}

.od-action-btn.danger:hover {
    background: #fde8e8;
}

.od-action-btn.primary {
    background: var(--accent-purple);
    color: #fff;
}

.od-action-btn.primary:hover {
    background: var(--cream);
    color: var(--accent-purple);
    border: 1px solid var(--accent-purple);
}

.od-action-btn.gold {
    background: var(--accent-gold);
    color: #fff;
}

.od-action-btn.gold:hover {
    background: var(--accent-gold-hover);
}

/* ── Download invoice link ── */
.od-download-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    border: 1px solid #c8dbd0;
    border-radius: 8px;
    padding: .4rem .85rem;
    background: #f4f8f5;
    cursor: pointer;
    transition: background .18s;
    font-family: var(--font-b);
}

.od-download-btn:hover {
    background: #e8f3ec;
}

/* ── Modals ── */
.od-modal-header {
    background: #fafaf9;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    padding: 1rem 1.4rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.od-modal-header .od-card-icon {
    flex-shrink: 0;
}

.od-modal-title {
    font-size: .95rem;
    font-weight: 700;
    color: #111;
    margin: 0;
    flex: 1;
}

.od-modal-body {
    padding: 1.3rem 1.4rem;
}

.od-modal-footer {
    padding: .9rem 1.4rem;
    border-top: 1px solid rgba(0, 0, 0, .07);
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    background: #fafaf9;
}

/* ── Bank account card ── */
.od-bank-card {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: .85rem 1rem;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    margin-bottom: .6rem;
}

.od-bank-card:has(input:checked) {
    border-color: var(--accent-purple);
    background: #f4f8f5;
}

.od-bank-radio {
    display: none;
}

.od-bank-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ccc;
    background: #fff;
    flex-shrink: 0;
    margin-top: .15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s;
}

.od-bank-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    transition: background .2s;
}

.od-bank-card:has(input:checked) .od-bank-dot {
    border-color: var(--accent-purple);
}

.od-bank-card:has(input:checked) .od-bank-dot::after {
    background: var(--accent-purple);
}

.od-bank-info {
    flex: 1;
    min-width: 0;
}

.od-bank-name {
    font-size: .87rem;
    font-weight: 700;
    color: #111;
}

.od-bank-meta {
    font-size: .78rem;
    color: #666;
    line-height: 1.55;
    margin-top: .2rem;
}

/* ── Form elements (inside modals) ── */
.od-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #666;
    display: block;
    margin-bottom: .35rem;
    font-family: var(--font-b);
}

.od-input,
.od-textarea,
.od-select {
    width: 100%;
    border: 1px solid #dde0dc;
    border-radius: 8px;
    padding: .6rem .85rem;
    font-size: .875rem;
    color: #222;
    background: #fff;
    outline: none;
    font-family: var(--font-b);
    transition: border-color .2s;
}

.od-input:focus,
.od-textarea:focus,
.od-select:focus {
    border-color: var(--accent-gold);
}

.od-textarea {
    min-height: 90px;
    resize: vertical;
}

/* ── Add new bank section toggle ── */
.od-add-bank-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 2px dashed #ddd;
    border-radius: 10px;
    padding: .7rem 1rem;
    background: none;
    font-size: .83rem;
    font-weight: 600;
    color: #666;
    width: 100%;
    cursor: pointer;
    transition: border-color .2s, color .2s;
    font-family: var(--font-b);
    margin-top: .5rem;
}

.od-add-bank-btn:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

/* ── Responsive ── */
@media(max-width:767px) {
    .od-card-body {
        padding: 1rem;
    }

    .od-card-header {
        padding: .8rem 1rem;
    }

    .od-product-item {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 12px;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .od-product-item:last-child {
        margin-bottom: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .od-prod-img {
        width: 70px;
        height: 70px;
    }

    .od-prod-info {
        flex: 1;
        min-width: 120px;
    }
}

@media(max-width:575px) {
    .od-section {
        padding: 1rem 0 2.5rem;
    }

    .od-prod-actions {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        padding-top: 0.8rem;
        margin-top: 0.2rem;
    }

    .od-action-btn.danger {
        background-color: #fee2e2;
        color: #ef4444;
        border: 1px solid #fecaca;
        padding: 6px 14px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.8rem;
        white-space: nowrap;
    }
}

/* ── Fastway Tracking Card ── */
.od-tracking-card {
    width: 100%;
}

.od-tracking-ref {
    font-size: .75rem;
    font-weight: 600;
    color: var(--accent-purple);
    background: var(--cream);
    border: 1px solid var(--accent-purple);
    border-radius: 6px;
    padding: .25rem .65rem;
    letter-spacing: .04em;
}

.od-tracking-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.od-tracking-status-block {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex-shrink: 0;
}

.od-tracking-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .65rem 1.5rem;
    flex: 1;
    min-width: 0;
}

.od-tracking-meta-item {
    display: flex;
    flex-direction: column;
    gap: .18rem;
}

.od-tracking-num {
    font-family: monospace;
    letter-spacing: .04em;
    font-size: .85rem;
    word-break: break-all;
}

.od-tracking-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

@media(max-width: 991px) {
    .od-tracking-meta-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 575px) {
    .od-tracking-hero {
        gap: 1rem;
    }

    .od-tracking-meta-grid {
        grid-template-columns: 1fr 1fr;
        gap: .5rem 1rem;
    }

    .od-tracking-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .od-tracking-actions .od-action-btn {
        justify-content: center;
        width: 100%;
    }
}

/* =========================================
    About use
================================= */

/* ── HERO ── */
.about-hero {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, var(--cream-dark) 0%, var(--cream-dark) 60%, transparent 100%);
}

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

.about-hero h1 {
    font-family: var(--font-b);
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -.01em;
    text-align: center;
}

.about-hero p {
    color: rgba(255, 255, 255, .9);
    font-size: 1.1rem;
    margin-top: .4rem;
    font-family: var(--font-b);
    font-weight: 400;
    text-align: center;
}

/* ── SECTION HELPERS ── */
.py-sec {
    padding: 5rem 0;
}

.sec-title {
    font-family: var(--font-b);
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.01em;
}

.sec-sub {
    color: #888;
    font-size: .88rem;
    max-width: 520px;
    margin: .4rem auto 0;
    text-align: center;
}

.divider {
    width: 60px;
    height: 3px;
    background: var(--accent-purple);
    border-radius: 2px;
}

.cat-title-line {
    width: 64px;
    height: 4px;
    background: var(--accent-purple);
    border-radius: 2px;
    margin-bottom: .6rem;
}

/* ── CEO SECTION ── */
.ceo-section {
    padding: 5rem 0;
    background: #fff;
}

.ceo-img-wrap {
    border-radius: var(--r);
    overflow: hidden;
    aspect-ratio: 3/4;
    max-width: 340px;
    width: 100%;
}

.ceo-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.ceo-name {
    font-family: var(--font-b);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: #111;
    margin-bottom: .1rem;
}

.ceo-title {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 1.3rem;
}

.ceo-bio {
    font-size: 0.95rem;
    color: #000;
    line-height: 1.85;
}

.ceo-bio p+p {
    margin-top: .8rem;
}

.leadership-section {
    margin-top: 2rem;
}

.leadership-title {
    font-size: 1.2rem;
    font-weight: bolder;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #000;
    margin-bottom: .75rem;
    border-bottom: 1px solid #ddd;
}

.leadership-list {
    list-style: disc;
    padding: 0;
    margin: 0;
}

.leadership-list li {
    font-size: .95rem;
    color: #000;
    padding: .3rem 0;
    padding-left: 1rem;
    position: relative;
    line-height: 1.6;
    border-bottom: none;
}

.leadership-list li::before {
    content: '';
    position: absolute;
    left: 0;
    color: var(--gold);
    font-weight: 700;
}

.sig-section {
    margin-top: 1.8rem;
}

.sig-title {
    font-size: 1.2rem;
    font-weight: bolder;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #000;
    margin-bottom: .6rem;
    border-bottom: 1px solid #ddd;
}

.sig-text {
    font-family: var(--font-b);
    font-size: 1.05rem;
    color: #000;
    line-height: 1.7;
}

/* ── ABOUT ILIAS GLOBAL ── */
.about-ig-section {
    background: #fff;
    padding: 4.5rem 0;
}

.about-ig-label {
    font-size: clamp(1.55rem, 3vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -.01em;
    color: #000;
    -webkit-text-stroke: 1px #000;
}

.about-ig-body {
    font-size: 0.95rem;
    color: #000;
    line-height: 1.8;
}

.about-ig-body p+p {
    margin-top: .75rem;
}

/* ── JOIN US BANNER ── */
.join-banner {
    background: #f8f9fa;
    padding: 4rem 0;
}

.join-eyebrow {
    font-size: .72rem;
    font-weight: bolder;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #000;
    margin-bottom: .3rem;
}

.join-body-bar {
    width: 70px;
    height: 2px;
    background: var(--accent-purple);
    margin: 0 auto 24px auto;
    /* center + space below */
    border-radius: 2px;
}

.join-title {
    font-family: var(--font-b);
    font-size: clamp(1.6rem, 3.5vw, 2.6rem);
    font-weight: 700;
    color: #000;
}

.join-title span {
    color: #000;
}

.join-body {
    font-size: .88rem;
    color: #000;
    line-height: 1.8;
    max-width: 800px;
}

/* ── QUANTUM ENERGY ── */
.quantum-section {
    padding: 5rem 0;
    background: #fff;
}

.quantum-img {
    border-radius: var(--r);
    overflow: hidden;
    aspect-ratio: 1;
    max-width: 420px;
    width: 100%;
}

.quantum-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quantum-label {
    font-size: clamp(1.55rem, 3vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -.01em;
    color: #000;
    -webkit-text-stroke: 1px #000;
}

.quantum-body {
    font-size: .84rem;
    color: #000;
    line-height: 1.8;
}

.quantum-body p+p {
    margin-top: .75rem;
}

/* ── OUR TEAM ── */
.team-section {
    padding: 5rem 0;
}

.team-card {
    background: #fff;
    border-radius: var(--r);
    overflow: hidden;
    /* border: 1px solid rgba(0, 0, 0, .06); */
    text-align: center;
    padding-bottom: 1.5rem;
    height: 100%;
}

.team-card-img-wrap {
    width: 150px;
    height: 150px;
    margin: 0 auto 1.1rem;
    overflow: hidden;
    background: #f5f2ed;
    border-radius: 50%;
}

.team-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform .5s ease;
}

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

.team-name {
    font-family: var(--font-b);
    font-size: 1.05rem;
    font-weight: 700;
    color: #000;
    margin-bottom: .15rem;
    padding: 0 1rem;
}

.team-role {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: .8rem;
}

.team-bio {
    font-size: .78rem;
    color: #777;
    line-height: 1.7;
    padding: 0 1.1rem;
}

/* ── RESPONSIVE ── */
@media (min-width: 1200px) {
    .ceo-img-wrap {
        min-width: 545px;
    }

    .ceo-img-wrap.founder-story {
        min-width: 350px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .ceo-img-wrap {
        min-width: 460px;
    }

    .ceo-img-wrap.founder-story {
        min-width: 280px;
    }
}

@media (min-width: 767px) and (max-width: 992px) {
    .ceo-img-wrap {
        min-width: 360px;
    }

    .ceo-img-wrap.founder-story {
        min-width: 200px;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .py-sec {
        padding: 3.2rem 0;
    }

    .about-hero {
        min-height: 320px;
    }

    .ceo-img-wrap {
        max-width: 280px;
        margin: 0 auto;
    }

    .quantum-img {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .about-hero {
        min-height: 260px;
    }

}

/* ========================
    Contact section
======================= */
.contact-section {
    /* background: #f5f3ef; */
    padding: 80px 0;
}

.contact-title {
    font-family: var(--font-d);
    font-size: 48px;
    font-weight: 500;
    /* letter-spacing: 2px; */
    color: var(--dark);
}

.contact-subtitle {
    font-size: 16px;
    color: #6c757d;
    margin-top: 6px;
}

/* Card */
.contact-card {
    background: #fff;
    padding: 40px;
    border-radius: var(--r);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

/* Left */
.contact-left-title {
    font-family: var(--font-d);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 25px;
}

.contact-item {
    gap: 15px;
    margin-bottom: 10px;
}

.contact-icon {
    color: var(--gold);
    font-size: 18px;
}

.contact-main {
    font-size: 14px;
    font-weight: 600;
    color: #111;
}

.contact-sub {
    font-size: 13px;
    color: #6c757d;
    margin-top: 3px;
}

/* Form */
.form-label {
    font-size: 13px;
    color: #333;
    margin-bottom: 5px;
}

.custom-input {
    height: 44px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 14px;
}

textarea.custom-input {
    height: auto;
}

section.custom-select {
    height: 44px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 14px;
}

/* Button */
.contact-btn {
    background: linear-gradient(90deg, #163d2c, #1f4e36);
    color: #fff;
    border-radius: 6px;
    padding: 12px;
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 600;
    border: none;
}

.contact-btn:hover {
    opacity: 0.9;
}

@media (min-width: 992px) {
    .contact-icon {
        margin-top: 4px;
    }
}

/* =================================
    Pagination
    =============================== */
.pagination {
    gap: 8px;
}

.pagination .page-link {
    border-radius: 10px;
    border: none;
    padding: 10px 16px;
    color: #000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.pagination .active .page-link {
    background: #c8a97e;
    color: #fff;
}

/* =================================
    Snatched Account Sidebar 
   ================================= */
.snatched-account-sidebar {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 100px;
}

.sidebar-header {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}

.avatar-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
}

.sidebar-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-purple), var(--bg-dark));
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 700;
    font-family: var(--font-heading);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

.avatar-ring {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    border: 2px dashed rgba(94, 23, 235, 0.4);
    animation: rotateRing 10s linear infinite;
    z-index: 1;
}

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

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

.sidebar-username {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 2px;
}

.sidebar-email {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(207, 162, 83, 0.15);
    color: #b5893a;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 12px;
    color: #444;
    text-decoration: none;
    transition: all 0.3s ease;
    background: transparent;
    border: 1px solid transparent;
}

.nav-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-offwhite);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-right: 12px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: var(--text-dark);
}

.nav-text {
    flex: 1;
    font-weight: 600;
    font-size: 0.9rem;
    font-family: var(--font-heading);
}

.nav-arrow {
    font-size: 0.9rem;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.nav-item:hover {
    background: rgba(94, 23, 235, 0.05);
    border-color: rgba(94, 23, 235, 0.1);
    color: var(--accent-purple);
    transform: translateX(4px);
}

.nav-item:hover .nav-icon {
    background: var(--accent-purple);
    color: #fff;
    transform: scale(1.1) rotate(-5deg);
}

.nav-item:hover .nav-arrow {
    opacity: 1;
    transform: translateX(0);
}

.nav-item.active {
    background: var(--bg-dark);
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.nav-item.active .nav-icon {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-gold);
}

.nav-item.active .nav-text {
    color: #fff;
}

.affiliate-nav-item {
    background: linear-gradient(135deg, rgba(94, 23, 235, 0.05), rgba(94, 23, 235, 0.1));
    border: 1px dashed rgba(94, 23, 235, 0.3);
}

.sidebar-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 12px 0;
}

.logout-btn:hover {
    background: rgba(220, 53, 69, 0.05);
    color: #dc3545;
}

.logout-btn:hover .nav-icon {
    background: #dc3545;
    color: #fff;
}

/* Base styles for Account Pages Content Container */
.snatched-account-content {
    background: #fff;
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02);
    min-height: 500px;
}

.snatched-account-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 25px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 12px;
}

.snatched-account-title i {
    color: var(--accent-gold);
}

.account-card-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 25px;
    color: var(--text-dark);
}

.settings-item {
    display: flex;
    align-items: center;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    margin-bottom: 15px;
    transition: var(--transition-smooth);
    background: var(--bg-offwhite);
}

.settings-item:hover {
    border-color: var(--accent-gold);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.settings-item-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--accent-gold);
    margin-right: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.settings-item-body {
    display: flex;
    flex-direction: column;
}

.settings-item-body strong {
    font-family: var(--font-heading);
    font-size: 16px;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.settings-item-body span {
    font-size: 13px;
    color: var(--text-muted);
}

.btn-snatched-action {
    background-color: var(--bg-dark);
    color: var(--text-light);
    border-radius: var(--radius-pill);
    padding: 8px 20px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-snatched-action:hover {
    background-color: var(--accent-gold);
    color: var(--text-light);
}

/* Forms inside modals */
.info-field-label {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: block;
}

.btn-snatched-pay {
    background-color: var(--accent-gold);
    color: var(--text-light);
    border-radius: var(--radius-pill);
    padding: 10px 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
}

.btn-snatched-pay:hover {
    background-color: var(--bg-dark);
    color: var(--text-light);
}

.toggle-password {
    position: absolute;
    right: 15px;
    z-index: 10;
    cursor: pointer;
    color: var(--text-muted);
}

.toggle-password:hover {
    color: var(--text-dark);
}

/* =================================
    Legal sections
   ================================= */
.legal-container {
    padding: 0px 0px 0px 0px;
    margin-bottom: 50px;
}

/* Ensure contact items in footer and contact sections wrap properly and don't crop */
.footer-contact-info .contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
}

.footer-contact-info .contact-item i {
    font-size: 22px;
    color: var(--accent-gold);
    flex-shrink: 0;
}

.footer-contact-info .contact-item span {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    display: block;
}

/* Responsive Footer Links for mobile */
@media (max-width: 575.98px) {
    .footer-links {
        display: flex;
        flex-direction: column !important;
        width: 100%;
    }

    .footer-links .footer-link {
        display: block;
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .footer-links .footer-link:last-child {
        border-bottom: none;
    }
}

/* =================================
    Glossy Header Effect (Scrolled)
   ================================= */
.site-header {
    transition: all 0.3s ease;
}

.site-header.scrolled {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

/* =================================
    Snatched Badges
   ================================= */
.badge-snatched-primary {
    background-color: var(--accent-purple) !important;
    color: var(--text-light) !important;
}

.badge-snatched-secondary {
    background-color: #6c757d !important;
    color: #fff !important;
}

.badge-snatched-success {
    background-color: #198754 !important;
    color: #fff !important;
}

.badge-snatched-warning {
    background-color: var(--accent-gold) !important;
    color: var(--text-dark) !important;
}

.badge-snatched-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
}

/* --- NEW SRYT DESIGN CSS --- */
.sryt-top {
    background: linear-gradient(90deg, #4c0d9f, #7a21d3);
    color: #fff;
    padding: 8px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.sryt-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #fff;
    border-bottom: 1px solid #ececf1;
    padding: 14px 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.sryt-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 25px;
    font-weight: 900;
}

.sryt-logo-mark {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient(135deg, #4716b8, #a345ff);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 27px;
    font-weight: 900;
}

.sryt-logo small {
    display: block;
    font-size: 8px;
    letter-spacing: 1.1px;
    font-weight: 700;
}

.sryt-header nav {
    display: flex;
    gap: 28px;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
}

.sryt-header nav a:hover {
    color: var(--sryt-purple)
}

.sryt-actions {
    display: flex;
    gap: 12px
}

.sryt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 8px;
    font-weight: 800;
    border: 0;
}

.sryt-btn-purple {
    background: linear-gradient(90deg, #6820d2, #9140ef);
    color: #fff
}

.sryt-btn-dark {
    background: #0b0b0f;
    color: #fff
}

.sryt-btn-outline {
    border: 1px solid #d7d7df;
    background: transparent;
    color: inherit
}

.sryt-hero {
    min-height: 620px;
    background:
        radial-gradient(circle at 78% 45%, rgba(135, 45, 240, .48), transparent 24%),
        radial-gradient(circle at 90% 20%, rgba(255, 255, 255, .08), transparent 14%),
        linear-gradient(100deg, #050507 0%, #09080d 48%, #1d0a2f 100%);
    color: #fff;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    align-items: center;
    padding: 70px 6%;
    overflow: hidden;
    position: relative;
}

.sryt-hero h6 {
    color: #b471ff;
    margin: 0 0 14px;
    font-size: 14px;
    letter-spacing: 1px
}

.sryt-hero h1 {
    font-size: 64px;
    line-height: .98;
    letter-spacing: -2px;
    margin: 0 0 20px;
    max-width: 720px
}

.sryt-hero h1 span {
    color: transparent;
    background: linear-gradient(90deg, #7626ec, #c270ff);
    -webkit-background-clip: text;
    background-clip: text;
}

.sryt-hero p {
    color: #dedce6;
    font-size: 18px;
    line-height: 1.7;
    max-width: 590px
}

.sryt-hero-actions {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap
}

.sryt-hero-stats {
    display: flex;
    gap: 32px;
    margin-top: 35px;
    flex-wrap: wrap
}

.sryt-hero-stats strong {
    display: block;
    font-size: 25px;
    color: #fff
}

.sryt-hero-stats span {
    font-size: 12px;
    color: #aaa9b2
}

.sryt-visual {
    position: relative;
    height: 470px
}

.sryt-glow {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    right: 40px;
    top: 30px;
    border: 13px solid rgba(181, 105, 255, .24);
    box-shadow: 0 0 70px rgba(131, 40, 235, .75), inset 0 0 70px rgba(131, 40, 235, .16)
}

.sryt-product {
    position: absolute;
    bottom: 25px;
    border-radius: 18px 18px 12px 12px;
    box-shadow: 0 30px 50px rgba(0, 0, 0, .4);
    display: grid;
    place-items: center;
    text-align: center;
    font-weight: 900;
    font-size: 12px;
    color: #101014;
    z-index: 2;
}

.sryt-product:before {
    content: "";
    position: absolute;
    top: -38px;
    width: 48%;
    height: 42px;
    background: #171719;
    border-radius: 6px 6px 0 0
}

.sryt-p1 {
    left: 2%;
    width: 125px;
    height: 210px;
    background: linear-gradient(#d4a5ff, #7416a3);
    color: #fff
}

.sryt-p2 {
    left: 28%;
    width: 92px;
    height: 175px;
    background: linear-gradient(#f2d5c1, #f7ede5)
}

.sryt-p3 {
    left: 47%;
    width: 150px;
    height: 135px;
    background: linear-gradient(#fff7ee, #d7bfa8);
    border-radius: 55px 55px 15px 15px
}

.sryt-p4 {
    left: 73%;
    width: 105px;
    height: 240px;
    background: linear-gradient(#230933, #7e1799);
    color: #fff
}

.sryt-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 22px 6%;
    border-bottom: 1px solid #ececf1
}

.sryt-trust-item {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 8px 25px;
    border-right: 1px solid #e6e6ec
}

.sryt-trust-item:last-child {
    border-right: 0
}

.sryt-ticon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #ded3f3;
    color: var(--sryt-purple);
    display: grid;
    place-items: center;
    font-size: 20px
}

.sryt-trust-item strong {
    display: block;
    color: #6b22cf;
    font-size: 13px
}

.sryt-trust-item span {
    font-size: 12px;
    color: #666
}

.sryt-section {
    padding: 72px 6%
}

.sryt-section.sryt-dark {
    background: #090a10;
    color: #fff
}

.sryt-eyebrow {
    color: #7624df;
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .8px
}

.sryt-section.sryt-dark .sryt-eyebrow {
    color: #ae67ff
}

.sryt-title {
    font-size: 38px;
    line-height: 1.1;
    margin: 9px 0 14px
}

.sryt-sub {
    color: #747580;
    max-width: 720px;
    line-height: 1.65
}

.sryt-section.sryt-dark .sryt-sub {
    color: #aaadba
}

.sryt-products-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px
}

.sryt-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px
}

.sryt-card {
    border: 1px solid #e6e6ec;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    transition: .25s
}

.sryt-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .08)
}

.sryt-card-img {
    height: 250px;
    background: linear-gradient(#faf9fb, #f0edf4);
    display: grid;
    place-items: center
}

.sryt-mini-bottle {
    width: 90px;
    height: 150px;
    border-radius: 16px;
    background: linear-gradient(#1a1a1e, #35353d);
    position: relative;
    box-shadow: 0 16px 25px rgba(0, 0, 0, .18)
}

.sryt-mini-bottle.sryt-purple {
    background: linear-gradient(#d79eff, #7e27b8)
}

.sryt-mini-bottle.sryt-cream {
    background: linear-gradient(#fff7ec, #d8c0a6);
    border-radius: 40px 40px 14px 14px
}

.sryt-mini-bottle.sryt-orange {
    background: linear-gradient(#ffe9af, #f4b84b)
}

.sryt-mini-bottle:before {
    content: "";
    position: absolute;
    top: -28px;
    left: 24px;
    width: 42px;
    height: 30px;
    background: #171719;
    border-radius: 5px 5px 0 0
}

.sryt-mini-bottle:after {
    content: "SNATCHED\A RYT";
    white-space: pre;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 10px;
    font-weight: 900;
    color: #fff
}

.sryt-mini-bottle.sryt-cream:after,
.sryt-mini-bottle.sryt-orange:after {
    color: #111
}

.sryt-card-body {
    padding: 16px
}

.sryt-card-body h3 {
    font-size: 15px;
    margin: 0 0 6px
}

.sryt-price {
    font-weight: 900;
}

.sryt-opportunity {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center
}

.sryt-opp-card {
    background: linear-gradient(145deg, #11131d, #0d0f16);
    border: 1px solid #282c3b;
    border-radius: 18px;
    padding: 28px
}

.sryt-opp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 20px
}

.sryt-opp-box {
    border: 1px solid #292d3c;
    border-radius: 12px;
    padding: 18px;
    background: #0a0c12
}

.sryt-opp-box strong {
    display: block;
    font-size: 24px;
    color: #fff
}

.sryt-opp-box span {
    color: #a7aab6;
    font-size: 12px
}

.sryt-ranks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 26px
}

.sryt-rank {
    background: #10121b;
    border: 1px solid #282c3e;
    border-radius: 14px;
    padding: 20px;
    text-align: center
}

.sryt-rank-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    background: #181c29;
    border: 1px solid #3a3f54;
    font-size: 25px
}

.sryt-rank h3 {
    margin: 0 0 5px
}

.sryt-rank p {
    color: #9ea2af;
    font-size: 12px
}

.sryt-rank b {
    color: var(--sryt-gold)
}

.sryt-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 28px
}

.sryt-step {
    padding: 24px;
    border: 1px solid #e5e5eb;
    border-radius: 14px
}

.sryt-step-num {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6420cf, #9d44f5);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 900;
    margin-bottom: 14px
}

.sryt-step h3 {
    margin: 0 0 7px
}

.sryt-step p {
    color: #73747f;
    font-size: 13px;
    line-height: 1.55
}

.sryt-cta-banner {
    margin: 0 6% 70px;
    background: linear-gradient(100deg, #150720, #3b0d58, #16111f);
    border: 1px solid #4a245e;
    border-radius: 20px;
    padding: 34px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px
}

.sryt-cta-banner h2 {
    margin: 0 0 8px;
    font-size: 30px
}

.sryt-cta-banner p {
    margin: 0;
    color: #d0cad8
}

.sryt-footer {
    background: #06070b;
    color: #b6b8c1;
    padding: 40px 6% 25px
}

.sryt-footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 30px
}

.sryt-footer h4 {
    color: #fff;
    margin: 0 0 12px
}

.sryt-footer a {
    display: block;
    font-size: 13px;
    margin: 8px 0;
    color: #b6b8c1
}

.sryt-copy {
    border-top: 1px solid #242633;
    margin-top: 25px;
    padding-top: 18px;
    font-size: 12px
}

@media(max-width:1000px) {
    .sryt-header nav {
        display: none
    }

    .sryt-hero {
        grid-template-columns: 1fr
    }

    .sryt-visual {
        margin-top: 25px
    }

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

    .sryt-product-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .sryt-opportunity {
        grid-template-columns: 1fr
    }

    .sryt-ranks {
        grid-template-columns: repeat(2, 1fr)
    }

    .sryt-steps {
        grid-template-columns: 1fr
    }
}

@media(max-width:650px) {
    .sryt-top {
        display: none
    }

    .sryt-header {
        padding: 12px 4%
    }

    .sryt-actions .sryt-btn-outline {
        display: none
    }

    .sryt-hero {
        padding: 50px 5%
    }

    .sryt-hero h1 {
        font-size: 43px
    }

    .sryt-visual {
        height: 330px
    }

    .sryt-glow {
        width: 280px;
        height: 280px;
        right: 0
    }

    .sryt-p1 {
        width: 90px;
        height: 160px
    }

    .sryt-p2 {
        width: 70px;
        height: 135px
    }

    .sryt-p3 {
        width: 105px;
        height: 105px
    }

    .sryt-p4 {
        width: 80px;
        height: 180px
    }

    .sryt-trust {
        grid-template-columns: 1fr
    }

    .sryt-trust-item {
        border-right: 0
    }

    .sryt-product-grid,
    .sryt-ranks,
    .sryt-opp-grid {
        grid-template-columns: 1fr
    }

    .sryt-products-head,
    .sryt-cta-banner {
        align-items: flex-start;
        flex-direction: column
    }

    .sryt-footer-grid {
        grid-template-columns: 1fr 1fr
    }
}

/* Testimonials */
.sryt-testimonials {
    background: #f7f5fb
}

.sryt-testimonial-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 32px
}

.sryt-testimonial-head .sryt-sub {
    margin-left: auto;
    margin-right: auto
}

.sryt-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

.sryt-testimonial-card {
    background: #fff;
    border: 1px solid #e5e1eb;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(31, 12, 48, .05);
    position: relative
}

.sryt-quote-mark {
    font-size: 42px;
    line-height: 1;
    color: #8b39ee;
    font-family: Georgia, serif
}

.sryt-stars {
    color: #f4b72d;
    letter-spacing: 2px;
    margin: 8px 0 12px
}

.sryt-testimonial-card p {
    color: #666874;
    line-height: 1.65;
    font-size: 14px
}

.sryt-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px
}

.sryt-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #5d1ac5, #a84dff);
    color: #fff;
    font-weight: 900
}

.sryt-person strong {
    display: block;
    font-size: 14px
}

.sryt-person span {
    font-size: 12px;
    color: #888995
}

.sryt-testimonial-note {
    text-align: center;
    color: #92939d;
    font-size: 11px;
    margin-top: 18px
}

@media(max-width:900px) {
    .sryt-testimonial-grid {
        grid-template-columns: 1fr
    }
}

/* Incentives & Events */
.sryt-incentives {
    background:
        radial-gradient(circle at 15% 20%, rgba(127, 40, 232, .16), transparent 24%),
        radial-gradient(circle at 88% 72%, rgba(244, 183, 45, .10), transparent 22%),
        #090a10;
    color: #fff;
}

.sryt-incentive-head {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 34px
}

.sryt-incentive-head .sryt-sub {
    margin-left: auto;
    margin-right: auto;
    color: #b8bac5
}

.sryt-incentive-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.sryt-incentive-card {
    border: 1px solid #2a2e3d;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(145deg, #10131d, #0c0e15);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22)
}

.sryt-incentive-visual {
    min-height: 240px;
    padding: 28px;
    display: flex;
    align-items: flex-end;
    position: relative;
    overflow: hidden
}

.sryt-island {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .58)),
        linear-gradient(135deg, #29a9d8 0%, #64d6d0 33%, #f6d178 66%, #5b2bbf 100%)
}

.sryt-summit {
    background:
        radial-gradient(circle at 70% 20%, rgba(255, 218, 118, .30), transparent 18%),
        linear-gradient(135deg, #1a0b26, #5f1b8b 55%, #bf6b1a)
}

.sryt-incentive-visual:before {
    content: "";
    position: absolute;
    inset: auto -40px -70px auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 14px solid rgba(255, 255, 255, .12)
}

.sryt-incentive-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(8, 8, 12, .66);
    backdrop-filter: blur(8px);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .5px
}

.sryt-incentive-visual h3 {
    font-size: 30px;
    line-height: 1.05;
    margin: 0;
    position: relative;
    z-index: 2
}

.sryt-incentive-body {
    padding: 24px
}

.sryt-incentive-body p {
    color: #b7bac7;
    font-size: 14px;
    line-height: 1.65
}

.sryt-incentive-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 18px 0 22px
}

.sryt-point {
    padding: 12px;
    border: 1px solid #2b3040;
    border-radius: 10px;
    background: #0a0d13;
    font-size: 12px;
    color: #d8d9df
}

.sryt-point b {
    display: block;
    color: #fff;
    margin-bottom: 3px
}

.sryt-incentive-note {
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(123, 44, 255, .10);
    border: 1px solid rgba(155, 75, 255, .26);
    color: #cfc5dd;
    font-size: 11px;
    line-height: 1.55
}

@media(max-width:900px) {
    .sryt-incentive-grid {
        grid-template-columns: 1fr
    }
}

/* Hero slider */
.sryt-slider {
    position: relative;
    overflow: hidden;
    background: #06070b;
    color: #fff
}

.sryt-slides {
    position: relative;
    min-height: 600px
}

.sryt-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility .7s ease;
    display: grid;
    grid-template-columns: 2.08fr .92fr;
    align-items: center;
    padding: 70px 6%;
}

.sryt-slide.sryt-active {
    opacity: 1;
    visibility: visible;
    position: relative
}

.sryt-slide.sryt-one {
    background:
        radial-gradient(circle at 79% 45%, rgba(135, 45, 240, .50), transparent 24%),
        linear-gradient(100deg, #050507 0%, #09080d 48%, #1d0a2f 100%);
}

.sryt-slide.sryt-two {
    background:
        radial-gradient(circle at 75% 45%, rgba(244, 183, 45, .23), transparent 25%),
        linear-gradient(100deg, #08080b, #1a1021 55%, #411b58);
}

.sryt-slide.sryt-three {
    background:
        radial-gradient(circle at 80% 46%, rgba(61, 191, 198, .22), transparent 25%),
        linear-gradient(100deg, #06070a, #11141c 55%, #19283a);
}

.sryt-slide h6 {
    color: #b471ff;
    margin: 0 0 14px;
    font-size: 14px;
    letter-spacing: 1px
}

.sryt-slide h1 {
    font-size: 58px;
    line-height: .98;
    letter-spacing: -2px;
    margin: 0 0 20px;
    max-width: 720px;
    font-weight: bold;
}

.sryt-slide h1 span {
    color: transparent;
    background: linear-gradient(90deg, #7626ec, #c270ff);
    -webkit-background-clip: text;
    background-clip: text
}

.sryt-slide p {
    color: #dedce6;
    font-size: 18px;
    line-height: 1.7;
    max-width: 590px
}

.sryt-slide-visual {
    height: 430px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.sryt-orb {
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, #9b4bff 0%, #6f22d9 28%, rgba(111, 34, 217, .1) 62%, transparent 70%);
    filter: drop-shadow(0 0 28px rgba(155, 75, 255, .4));
}

.sryt-hero-label {
    position: absolute;
    bottom: 40px;
    right: 40px;
    padding: 18px 22px;
    border-radius: 16px;
    background: rgba(9, 10, 16, .58);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .12)
}

.sryt-hero-label strong {
    display: block;
    font-size: 24px
}

.sryt-hero-label span {
    color: #c9c4d3;
    font-size: 12px
}

.sryt-slider-dots {
    position: absolute;
    left: 6%;
    bottom: 24px;
    display: flex;
    gap: 8px;
    z-index: 5
}

.sryt-slider-dots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    background: #777;
    opacity: .7;
    padding: 0
}

.sryt-slider-dots button.sryt-active {
    width: 28px;
    border-radius: 999px;
    background: #9b4bff;
    opacity: 1
}

.sryt-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(0, 0, 0, .35);
    color: #fff;
    z-index: 6
}

.sryt-slider-arrow.sryt-prev {
    left: 16px
}

.sryt-slider-arrow.sryt-next {
    right: 16px
}

/* Category tiles */
.sryt-categories-section {
    padding: 58px 6%;
    background: #fff
}

.sryt-category-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 28px
}

.sryt-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px
}

.sryt-category-card {
    position: relative;
    min-height: 270px;
    border-radius: 18px;
    overflow: hidden;
    color: #fff;
    display: flex;
    align-items: flex-end;
    padding: 22px;
    box-shadow: 0 14px 30px rgba(23, 9, 34, .08);
    transition: .25s
}

.sryt-category-card:hover {
    transform: translateY(-5px)
}

.sryt-category-card:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, .72))
}

.sryt-category-card>div {
    position: relative;
    z-index: 2
}

.sryt-category-card h3 {
    margin: 0 0 6px;
    font-size: 25px
}

.sryt-category-card p {
    margin: 0;
    color: #ddd;
    font-size: 12px;
    line-height: 1.45
}

.sryt-cat-skincare {
    background:
        radial-gradient(circle at 72% 26%, rgba(255, 255, 255, .7), transparent 9%),
        linear-gradient(135deg, #d7c3ef, #8d4fc3 55%, #402153)
}

.sryt-cat-haircare {
    background:
        radial-gradient(circle at 65% 25%, rgba(255, 255, 255, .12), transparent 16%),
        linear-gradient(135deg, #2b163e, #6c2c80 52%, #101015)
}

.sryt-cat-perfume {
    background:
        radial-gradient(circle at 68% 24%, rgba(255, 255, 255, .32), transparent 14%),
        linear-gradient(135deg, #1d1e25, #7c469f 55%, #d6a46c)
}

.sryt-cat-home {
    background:
        radial-gradient(circle at 72% 26%, rgba(255, 255, 255, .35), transparent 14%),
        linear-gradient(135deg, #18232a, #456d70 55%, #b99563)
}

.sryt-cat-icon {
    position: absolute;
    right: 22px;
    top: 22px;
    z-index: 2;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .13);
    backdrop-filter: blur(6px);
    font-size: 24px
}

.sryt-category-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 800;
    color: #fff
}

@media(max-width:900px) {
    .sryt-slide {
        grid-template-columns: 1fr;
        padding: 55px 5% 75px
    }

    .sryt-slide-visual {
        height: 260px
    }

    .sryt-category-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:600px) {
    .sryt-slide h1 {
        font-size: 42px
    }

    .sryt-category-grid {
        grid-template-columns: 1fr
    }
}

.sryt-slide.sryt-banner-image {
    background: #0a0a0d;
    padding: 0;
    min-height: 600px;
}

.sryt-banner-image-wrap {
    width: 100%;
    min-height: 600px;
}

/* Header responsiveness for mid-sized screens */
@media (min-width: 992px) and (max-width: 1300px) {
    .sryt-header nav {
        gap: 10px !important;
        font-size: 13px !important;
    }

    .sryt-actions {
        gap: 6px !important;
    }

    .sryt-btn {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
}

@media (min-width: 1301px) and (max-width: 1450px) {
    .sryt-header nav {
        gap: 18px !important;
    }
}

.badge-variant{
    --bs-bg-opacity: 1;
    background: linear-gradient(90deg, #4c0d9f, #7a21d3) !important;
}

@media (max-width: 576px) {
    .cart-text{
        display: none;
    }
}