@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --bg-dark: #08090d;
    --bg-card: rgba(22, 26, 41, 0.65);
    --bg-card-hover: rgba(30, 36, 56, 0.85);
    --border-color: rgba(255, 255, 255, 0.08);
    --text-main: #f3f4f6;
    --text-muted: #9ca3af;
    
    /* Neon Glow Palette */
    --accent-purple: #a855f7;
    --accent-purple-glow: rgba(168, 85, 247, 0.4);
    --accent-cyan: #06b6d4;
    --accent-cyan-glow: rgba(6, 182, 212, 0.4);
    --accent-green: #10b981;
    --accent-green-glow: rgba(16, 185, 129, 0.4);
    --accent-pink: #ec4899;
    --accent-pink-glow: rgba(236, 72, 153, 0.4);
    
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Poppins', sans-serif;
    
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-neon: 0 0 15px var(--accent-purple-glow);
    
    /* Premium Realistic Skeleton Hand Cursor */
    --skeleton-cursor: url("data:image/png;base64,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") 2 2, auto;
    --skeleton-pointer: url("data:image/png;base64,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") 2 2, pointer;
}
}

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

html, body {
    cursor: var(--skeleton-cursor);
}

a, button, input, select, textarea, [role="button"], .category-chip, .product-card, .admin-card {
    cursor: var(--skeleton-pointer);
}

body {
    background-color: var(--bg-dark);
    background-image: 
        radial-gradient(at 0% 0%, rgba(168, 85, 247, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(6, 182, 212, 0.15) 0px, transparent 50%),
        radial-gradient(at 50% 50%, rgba(236, 72, 153, 0.05) 0px, transparent 60%);
    color: var(--text-main);
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-purple);
}

/* Header & Navigation */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(8, 9, 13, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 2rem;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.8rem;
    letter-spacing: -0.5px;
    text-decoration: none;
}

.logo-text {
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.3));
}

.logo-icon {
    font-size: 1.8rem;
    animation: rotate3d 6s infinite linear;
    cursor: var(--skeleton-pointer);
    transition: scale 0.2s ease, filter 0.2s ease;
    display: inline-block;
}

.logo-icon:hover {
    filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.8));
    scale: 1.15;
}

.logo-icon.reverse {
    animation-direction: reverse;
}

@keyframes rotate3d {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.logo-icon.rolling {
    animation: roll-and-back 5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes roll-and-back {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    20% {
        transform: translate(80vw, 25vh) rotate(720deg) scale(2);
    }
    40% {
        transform: translate(10vw, 50vh) rotate(0deg) scale(2.8);
    }
    60% {
        transform: translate(85vw, 75vh) rotate(1080deg) scale(3.5);
    }
    80% {
        transform: translate(25vw, 35vh) rotate(180deg) scale(2);
    }
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
}

.nav-controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Search Bar */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    padding: 0.6rem 1rem 0.6rem 2.5rem;
    border-radius: 50px;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 0.9rem;
    width: 240px;
    transition: var(--transition-smooth);
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-cyan);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 15px var(--accent-cyan-glow);
    width: 280px;
}

.search-icon {
    position: absolute;
    left: 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}

/* Cart Button */
.cart-btn {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(6, 182, 212, 0.1));
    border: 1px solid var(--border-color);
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    color: var(--text-main);
    font-family: var(--font-body);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: var(--skeleton-pointer);
    transition: var(--transition-smooth);
    position: relative;
}

.cart-btn:hover {
    border-color: var(--accent-purple);
    box-shadow: var(--shadow-neon);
    transform: translateY(-2px);
}

.cart-count {
    background: var(--accent-pink);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    box-shadow: 0 0 8px var(--accent-pink-glow);
}

/* Hero Section */
.hero {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 2rem;
    text-align: center;
    position: relative;
}

.hero-tag {
    display: inline-block;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: var(--accent-cyan);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero h1 {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero h1 span {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple), var(--accent-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.4));
}

.hero p {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 2rem;
}

/* Category Filters */
.categories-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.categories-scroll {
    display: flex;
    gap: 0.8rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    scrollbar-width: none; /* Hide standard Firefox scrollbar */
}

.categories-scroll::-webkit-scrollbar {
    display: none; /* Hide Chrome/Safari scrollbar */
}

.category-chip {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    padding: 0.6rem 1.4rem;
    border-radius: 50px;
    color: var(--text-muted);
    cursor: var(--skeleton-pointer);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: var(--transition-smooth);
}

.category-chip:hover {
    color: var(--text-main);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.category-chip.active {
    background: linear-gradient(135deg, var(--accent-purple), #7c3aed);
    color: white;
    border-color: var(--accent-purple);
    box-shadow: var(--shadow-neon);
}

/* Main Shop Content */
.shop-container {
    max-width: 1200px;
    margin: 0 auto 5rem;
    padding: 0 2rem;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

.no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-muted);
}

/* Product Card */
.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(225deg, transparent 60%, rgba(6, 182, 212, 0.15) 100%);
    opacity: 0;
    transition: var(--transition-smooth);
    pointer-events: none;
}

.product-card:hover {
    transform: translateY(-8px) scale(1.01);
    background: var(--bg-card-hover);
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow: 0 12px 30px rgba(168, 85, 247, 0.15);
}

.product-card:hover::before {
    opacity: 1;
}

.product-badge {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 10;
    background: rgba(8, 9, 13, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--border-color);
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-cyan);
    text-transform: uppercase;
}

.product-id-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 10;
    background: rgba(8, 9, 13, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--border-color);
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-purple);
}

.product-img-container {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    position: relative;
    cursor: var(--skeleton-pointer);
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover .product-img {
    transform: scale(1.08);
}

.zoom-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 9, 13, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-smooth);
}

.product-img-container:hover .zoom-overlay {
    opacity: 1;
}

.zoom-icon {
    background: white;
    color: var(--bg-dark);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transform: translateY(10px);
    transition: var(--transition-smooth);
}

.product-img-container:hover .zoom-icon {
    transform: translateY(0);
}

.product-info {
    margin-top: 1.2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.4rem;
}

.product-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
    height: 2.8rem; /* Exact height for 2 lines of text */
    margin-bottom: 1.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.product-price {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--accent-purple);
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.3));
}

.add-to-cart-btn {
    background: linear-gradient(135deg, var(--accent-purple), #7c3aed);
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 14px;
    color: white;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.85rem;
    cursor: var(--skeleton-pointer);
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.add-to-cart-btn:hover {
    box-shadow: var(--shadow-neon);
    transform: translateY(-2px);
    background: linear-gradient(135deg, #b862ff, #8b5cf6);
}

.add-to-cart-btn:active {
    transform: translateY(0);
}

.add-to-cart-btn.in-cart {
    background: #1f2937;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: not-allowed;
}

.add-to-cart-btn.in-cart:hover {
    box-shadow: none;
    transform: none;
    background: #1f2937;
}

/* Sidebar Cart Panel */
.cart-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-smooth);
}

.cart-sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.cart-sidebar {
    position: fixed;
    top: 0;
    right: -800px;
    width: 100%;
    max-width: 800px;
    height: 100vh;
    background: #0d0f17;
    border-left: 1px solid var(--border-color);
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    z-index: 201;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cart-sidebar-overlay.active + .cart-sidebar,
.cart-sidebar.active {
    transform: translateX(-800px);
}

.cart-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-header h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.close-cart-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: var(--skeleton-pointer);
    transition: var(--transition-smooth);
}

.close-cart-btn:hover {
    color: var(--text-main);
    transform: rotate(90deg);
}

.cart-body-layout {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    overflow: hidden;
}

.cart-items-section {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
    padding: 1.5rem;
}

.cart-items {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.cart-checkout-section {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: rgba(8, 9, 13, 0.3);
}

.cart-empty {
    text-align: center;
    color: var(--text-muted);
    margin-top: 5rem;
}

.cart-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: rgba(255,255,255,0.05);
}

/* Cart Item Card */
.cart-item {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    padding: 0.8rem;
    border-radius: 16px;
}

.cart-item-img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
}

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

.cart-item-title {
    font-weight: 500;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.cart-item-price {
    color: var(--accent-cyan);
    font-weight: 600;
    font-size: 0.9rem;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.qty-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: var(--skeleton-pointer);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: var(--transition-smooth);
}

.qty-btn:hover {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
}

.qty-val {
    font-size: 0.9rem;
    font-weight: 600;
    min-width: 15px;
    text-align: center;
}

.delete-item-btn {
    background: none;
    border: none;
    color: #ef4444;
    cursor: var(--skeleton-pointer);
    font-size: 1rem;
    padding: 0.2rem;
    transition: var(--transition-smooth);
    margin-left: 0.4rem;
}

.delete-item-btn:hover {
    color: #f87171;
    transform: scale(1.1);
}

/* Checkout Form & Total */
/* Cart Summary & Checkout section spacer */

.cart-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
}

.cart-summary span {
    font-size: 1.1rem;
    font-weight: 500;
}

.cart-total-price {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--accent-cyan);
    filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.3));
}

.checkout-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.form-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 0.85rem;
    transition: var(--transition-smooth);
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-purple);
    background: rgba(255, 255, 255, 0.07);
}

.checkout-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    border: none;
    padding: 0.9rem;
    border-radius: 14px;
    color: white;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    cursor: var(--skeleton-pointer);
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.checkout-btn:hover {
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
    transform: translateY(-2px);
}

/* Lightbox Modal (Zoom Image) */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(8, 9, 13, 0.9);
    backdrop-filter: blur(8px);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-smooth);
}

.lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-modal {
    background: rgba(13, 15, 23, 0.98);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    max-width: 900px;
    width: 90%;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: var(--skeleton-pointer);
    z-index: 310;
    transition: var(--transition-smooth);
}

.lightbox-close:hover {
    color: var(--accent-pink);
    transform: scale(1.1);
}

.lightbox-body {
    display: flex;
    flex-direction: row;
    height: 500px;
}

.lightbox-image-container {
    flex: 1.3;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(8, 9, 13, 0.6);
    border: 1px solid var(--border-color);
    color: white;
    font-size: 1.8rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: var(--skeleton-pointer);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 320;
    transition: var(--transition-smooth);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.lightbox-nav-btn:hover {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    box-shadow: 0 0 15px var(--accent-purple-glow);
}

.lightbox-nav-btn.prev-btn {
    left: 1rem;
}

.lightbox-nav-btn.next-btn {
    right: 1rem;
}

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

.lightbox-info {
    flex: 1;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.2rem;
    border-left: 1px solid var(--border-color);
    overflow-y: auto;
}

.lightbox-badges {
    display: flex;
    gap: 0.8rem;
}

.lightbox-badge {
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-cyan);
    text-transform: uppercase;
}

.lightbox-id-badge {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-purple);
}

.lightbox-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: white;
    margin: 0;
}

.lightbox-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.lightbox-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.lightbox-price {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--accent-cyan);
    filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.3));
}

@media (max-width: 768px) {
    .lightbox-body {
        flex-direction: column;
        height: auto;
        max-height: 85vh;
        overflow-y: auto;
    }
    
    .lightbox-image-container {
        aspect-ratio: 1.3;
        height: auto;
    }
    
    .lightbox-info {
        border-left: none;
        border-top: 1px solid var(--border-color);
        padding: 1.5rem;
        gap: 1rem;
    }
    
    .lightbox-title {
        font-size: 1.5rem;
    }
    
    .lightbox-close {
        color: white;
        background: rgba(0, 0, 0, 0.5);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0.8rem;
        right: 0.8rem;
        font-size: 1.4rem;
    }
}

/* Footer Section */
footer {
    border-top: 1px solid var(--border-color);
    background: rgba(8, 9, 13, 0.5);
    padding: 3rem 2rem;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.footer-logo {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 500px;
    line-height: 1.6;
}

.footer-copyright {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.2);
    margin-top: 1rem;
}

.admin-link {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-decoration: none;
    opacity: 0.5;
    transition: var(--transition-smooth);
}

.admin-link:hover {
    opacity: 1;
    color: var(--accent-purple);
}

/* Admin Dashboard Specific Styles */
.admin-container {
    max-width: 1400px;
    margin: 2rem auto 8rem;
    padding: 0 2rem;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.admin-btn {
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
    border: none;
    padding: 0.8rem 1.6rem;
    border-radius: 14px;
    color: white;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    cursor: var(--skeleton-pointer);
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-btn:hover {
    box-shadow: var(--shadow-neon);
    transform: translateY(-2px);
}

.admin-instructions {
    background: rgba(168, 85, 247, 0.05);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
}

.admin-instructions h3 {
    color: var(--accent-purple);
    font-family: var(--font-heading);
    margin-bottom: 0.5rem;
}

.admin-instructions ol {
    margin-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.95rem;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
}

.admin-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.2rem;
    display: flex;
    gap: 1.2rem;
    transition: var(--transition-smooth);
}

.admin-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: var(--bg-card-hover);
}

.admin-card-img-container {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

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

.admin-card-form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.admin-card-form-row {
    display: flex;
    gap: 0.6rem;
}

.admin-input {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 0.85rem;
    width: 100%;
}

.admin-input:focus {
    outline: none;
    border-color: var(--accent-purple);
}

.admin-input.price {
    max-width: 80px;
}

.admin-toggle-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: var(--skeleton-pointer);
}

.admin-toggle-checkbox {
    cursor: var(--skeleton-pointer);
    accent-color: var(--accent-purple);
    width: 16px;
    height: 16px;
}

.admin-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(8, 9, 13, 0.9);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-color);
    padding: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    z-index: 150;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
}

.admin-stats {
    font-size: 0.95rem;
    color: var(--text-muted);
}

.admin-stats strong {
    color: var(--accent-cyan);
}

/* Toast Notification */
.toast-container {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.toast {
    background: #161a29;
    border: 1px solid var(--accent-green);
    color: var(--text-main);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.9rem;
    font-weight: 500;
    animation: slideInLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        gap: 1rem;
        padding: 0.5rem 0;
    }
    
    .nav-controls {
        width: 100%;
        justify-content: space-between;
    }
    
    .search-input {
        width: 180px;
    }
    
    .search-input:focus {
        width: 200px;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .cart-sidebar {
        max-width: 100%;
        right: -100%;
    }
    
    .cart-sidebar-overlay.active + .cart-sidebar,
    .cart-sidebar.active {
        transform: translateX(-100%);
    }
    
    .cart-body-layout {
        flex-direction: column;
        overflow-y: auto;
    }
    
    .cart-items-section {
        flex: none;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        max-height: 40vh;
        padding: 1.2rem;
    }
    
    .cart-checkout-section {
        flex: none;
        padding: 1.2rem;
    }
    
    .admin-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .admin-sticky-bar {
        flex-direction: column;
        gap: 0.8rem;
        padding: 1rem;
    }
}

/* Checkout Loading State */
.checkout-btn {
    position: relative;
    transition: var(--transition-smooth);
}
.checkout-btn.loading {
    color: transparent !important;
    pointer-events: none;
}
.checkout-btn.loading::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: calc(50% - 10px);
    left: calc(50% - 10px);
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Store Settings Panel (Admin) */
.admin-settings-panel {
    background: rgba(22, 26, 41, 0.65);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 24px;
    padding: 2rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
}
.admin-settings-panel h3 {
    color: var(--accent-cyan);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.settings-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.settings-field label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main);
}
.settings-field input, .settings-field select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 0.9rem;
    transition: var(--transition-smooth);
}
.settings-field input:focus, .settings-field select:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
}
.settings-instructions {
    background: rgba(8, 9, 13, 0.6);
    border-radius: 16px;
    padding: 1.25rem;
    margin-top: 1rem;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.settings-instructions.hidden {
    display: none;
}
.settings-instructions h4 {
    color: var(--accent-pink);
    margin-bottom: 0.5rem;
    font-family: var(--font-heading);
    font-size: 1rem;
}
.settings-instructions p {
    color: var(--text-muted);
    margin-bottom: 0.8rem;
}
.settings-instructions ol {
    margin-left: 1.2rem;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.settings-code-block {
    background: #020204;
    padding: 1rem;
    border-radius: 10px;
    font-family: monospace;
    font-size: 0.8rem;
    color: #a7f3d0;
    overflow-x: auto;
    margin: 0.8rem 0;
    border: 1px solid rgba(16, 185, 129, 0.2);
    white-space: pre;
}