/* KNOBS & LOCKS - Premium Hardware Styling */

        :root {
          /* === Color System === */
          --bg-primary: #0A192F;
          --bg-secondary: #112240;
          --bg-tertiary: #1A2F4A;
          --accent: #00E5FF;
          --accent-dim: rgba(0, 229, 255, 0.15);
          --accent-glow: rgba(0, 229, 255, 0.4);
          --text-primary: #FFFFFF;
          --text-secondary: #CCD6F6;
          --text-muted: #8892B0;
          --gold: #FFD700;
          --gold-secondary: #B8860B;
          --success: #2ED573;
          --danger: #FF4757;
          --border: rgba(255, 255, 255, 0.12);
          --border-hover: rgba(0, 229, 255, 0.4);

          /* === Spacing === */
          --section-padding: clamp(3rem, 8vw, 7rem);
          --container-max: 1400px;

          /* === Transitions === */
          --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
          --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

          /* === Glassmorphism === */
          --glass-bg: rgba(17, 34, 64, 0.6);
          --glass-border: rgba(255, 255, 255, 0.08);
          --glass-blur: 20px;
        }

        section {
          content-visibility: auto;
          contain-intrinsic-size: 1px 800px;
        }

        #hero-section {
          content-visibility: visible;
        }

        /* Premium Utility Classes */
        .aurora-bg {
          background: linear-gradient(-45deg, #0A192F, #112240, #1A2F4A, #0A192F);
          background-size: 400% 400%;
          animation: aurora 15s ease infinite;
        }

        @keyframes aurora {
          0% {
            background-position: 0% 50%;
          }

          50% {
            background-position: 100% 50%;
          }

          100% {
            background-position: 0% 50%;
          }
        }

        .float-icon {
          animation: float 4s ease-in-out infinite;
        }

        @keyframes float {
          0% {
            transform: translateY(0px);
          }

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

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

        .glass-card-premium {
          background: var(--glass-bg);
          backdrop-filter: blur(var(--glass-blur));
          -webkit-backdrop-filter: blur(var(--glass-blur));
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: 20px;
          transition: all 0.4s var(--ease-premium);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.05);
          position: relative;
          overflow: hidden;
        }

        .glass-card-premium:hover {
          background: rgba(255, 255, 255, 0.05);
          border-color: rgba(0, 229, 255, 0.4);
          transform: translateY(-8px);
          box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 229, 255, 0.15), inset 0 0 25px rgba(255, 255, 255, 0.08);
        }

        .section-title-premium {
          font-family: 'Poppins', sans-serif;
          font-weight: 800;
          font-size: clamp(2rem, 5vw, 3.2rem);
          background: linear-gradient(to bottom, #fff, #8892B0);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          line-height: 1.1;
          margin-bottom: 1.5rem;
          text-align: center;
        }

        .effect-3d {
          transform-style: preserve-3d;
          perspective: 1000px;
        }

        .gold-strip {
          position: relative;
        }

        .gold-strip::after {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg, transparent, #FFD700, #B8860B, transparent);
          box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
          z-index: 10;
        }

        .gold-strip-top::after {
          top: 0;
        }

        .gold-strip-bottom::after {
          bottom: 0;
        }

        .section-subtitle-premium {
          color: var(--text-secondary);
          font-size: clamp(1rem, 1.5vw, 1.15rem);
          max-width: 800px;
          margin: 0 auto 4rem;
          line-height: 1.7;
          text-align: center;
        }


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

        html {
          scroll-behavior: smooth;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

        body {
          font-family: 'Inter', system-ui, sans-serif;
          background: var(--bg-primary);
          color: var(--text-primary);
          overflow-x: hidden;
          min-height: 100vh;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          font-family: 'Poppins', sans-serif;
          font-weight: 700;
          letter-spacing: -0.02em;
          line-height: 1.1;
        }

        /* === Scrollbar === */
        ::-webkit-scrollbar {
          width: 6px;
        }

        ::-webkit-scrollbar-track {
          background: var(--bg-primary);
        }

        ::-webkit-scrollbar-thumb {
          background: var(--bg-tertiary);
          border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
          background: var(--accent);
        }

        /* === Selection === */
        ::selection {
          background: var(--accent);
          color: var(--bg-primary);
        }

        /* === Container === */
        .container-premium {
          max-width: var(--container-max);
          margin: 0 auto;
          padding: 0 clamp(1rem, 4vw, 2rem);
        }

        /* === Glass Card === */
        .glass-card {
          background: var(--glass-bg);
          backdrop-filter: blur(var(--glass-blur));
          -webkit-backdrop-filter: blur(var(--glass-blur));
          border: 1px solid var(--glass-border);
          border-radius: 16px;
          transition: all 0.4s var(--ease-premium);
        }

        .glass-card:hover {
          border-color: var(--border-hover);
          box-shadow: 0 8px 32px rgba(0, 229, 255, 0.1);
          transform: translateY(-2px);
        }

        /* === Glow Effects === */
        .glow-accent {
          box-shadow: 0 0 20px rgba(0, 229, 255, 0.3),
            0 0 60px rgba(0, 229, 255, 0.1);
        }

        .glow-gold {
          box-shadow: 0 0 20px rgba(250, 204, 21, 0.3),
            0 0 60px rgba(250, 204, 21, 0.1);
        }

        /* === Premium Button === */
        .btn-primary {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          padding: 0.875rem 2rem;
          background: var(--accent);
          color: var(--bg-primary);
          font-family: 'Poppins', sans-serif;
          font-weight: 600;
          font-size: 0.95rem;
          border: none;
          border-radius: 12px;
          cursor: pointer;
          transition: all 0.3s var(--ease-premium);
          text-decoration: none;
          position: relative;
          overflow: hidden;
        }

        .btn-primary:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 30px rgba(0, 229, 255, 0.4);
        }

        .btn-primary.added {
          background: var(--success);
          color: white;
          pointer-events: none;
        }

        .btn-secondary {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          padding: 0.875rem 2rem;
          background: transparent;
          color: var(--accent);
          font-family: 'Poppins', sans-serif;
          font-weight: 600;
          font-size: 0.95rem;
          border: 2px solid var(--accent);
          border-radius: 12px;
          cursor: pointer;
          transition: all 0.3s var(--ease-premium);
          text-decoration: none;
        }

        .btn-secondary:hover {
          background: var(--accent-dim);
          transform: translateY(-2px);
          box-shadow: 0 8px 30px rgba(0, 229, 255, 0.2);
        }

        /* === Price Styling === */
        .price-offer {
          color: var(--gold);
          font-family: 'Poppins', sans-serif;
          font-weight: 700;
        }

        .price-mrp {
          color: var(--text-muted);
          text-decoration: line-through;
          font-size: 0.85em;
        }

        /* === Section Title === */
        .section-title {
          font-size: clamp(2rem, 5vw, 3.5rem);
          background: linear-gradient(135deg, var(--text-primary), var(--accent));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          margin-bottom: 1rem;
        }

        .section-subtitle {
          color: var(--text-secondary);
          font-size: clamp(1rem, 2vw, 1.25rem);
          max-width: 600px;
        }

        /* === Stroke Typography (Hero Background) === */
        .stroke-text {
          font-family: 'Poppins', sans-serif;
          font-weight: 900;
          font-size: clamp(4rem, 15vw, 12rem);
          color: transparent;
          -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
          text-transform: uppercase;
          user-select: none;
          pointer-events: none;
          line-height: 1;
        }

        /* === Badge === */
        .badge-stock {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          padding: 4px 12px;
          border-radius: 20px;
          font-size: 0.75rem;
          font-weight: 600;
        }

        .badge-stock.in-stock {
          background: rgba(46, 213, 115, 0.15);
          color: var(--success);
        }

        .badge-stock.out-of-stock {
          background: rgba(255, 71, 87, 0.15);
          color: var(--danger);
        }

        /* === WhatsApp FAB === */
        .whatsapp-fab {
          position: fixed;
          bottom: 100px;
          right: 30px;
          z-index: 9999;
          width: 56px;
          height: 56px;
          border-radius: 50%;
          background: #25D366;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
          cursor: pointer;
          transition: all 0.3s var(--ease-premium);
          border: none;
          text-decoration: none;
        }

        .whatsapp-fab:hover {
          transform: scale(1.1);
          box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
        }

        .whatsapp-fab svg {
          width: 28px;
          height: 28px;
          fill: white;
        }

        @keyframes pulse-ring {
          0% {
            transform: scale(1);
            opacity: 0.6;
          }

          100% {
            transform: scale(1.6);
            opacity: 0;
          }
        }

        .whatsapp-fab::before {
          content: '';
          position: absolute;
          inset: -4px;
          border-radius: 50%;
          background: #25D366;
          animation: pulse-ring 2s ease-out infinite;
          z-index: -1;
        }

        /* === Mobile Bottom Nav === */
        .mobile-bottom-nav {
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: 9998;
          background: rgba(10, 25, 47, 0.95);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          border-top: 1px solid var(--border);
          padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
          display: none;
        }

        @media (max-width: 768px) {
          .mobile-bottom-nav {
            display: flex;
          }

          .whatsapp-fab {
            bottom: 90px;
            right: 20px;
          }
        }

        /* === Animations === */
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }

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

        .animate-fade-in-up {
          animation: fadeInUp 0.6s var(--ease-premium) forwards;
        }

        /* === Product Card === */
        .product-card {
          background: var(--glass-bg);
          backdrop-filter: blur(var(--glass-blur));
          -webkit-backdrop-filter: blur(var(--glass-blur));
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 18px;
          overflow: hidden;
          transition: all 0.5s var(--ease-premium);
          height: 100%;
          display: flex;
          flex-direction: column;
          position: relative;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .product-card:hover {
          border-color: var(--accent);
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 229, 255, 0.05);
          transform: translateY(-8px);
        }

        .product-card .product-image-wrap {
          position: relative;
          overflow: hidden;
          aspect-ratio: 1;
          background: rgba(255, 255, 255, 0.02);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 30px;
          transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium), border-color 0.5s var(--ease-premium), opacity 0.5s var(--ease-premium);
        }

        .product-card .product-image-wrap img {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
          transition: transform 0.6s var(--ease-premium);
          filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
        }

        .product-card:hover .product-image-wrap {
          background: rgba(255, 255, 255, 0.05);
        }

        .product-card:hover .product-image-wrap img {
          transform: scale(1.1) translateY(-5px);
          filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
        }

        .product-card .quick-view {
          position: absolute;
          bottom: -50px;
          left: 0;
          right: 0;
          background: var(--accent);
          color: var(--bg-primary);
          text-align: center;
          padding: 12px;
          font-weight: 700;
          font-size: 0.85rem;
          transition: all 0.4s var(--ease-premium);
          text-decoration: none;
          opacity: 0;
        }

        .product-card:hover .quick-view {
          bottom: 0;
          opacity: 1;
        }

        /* === Input Styles === */
        .input-premium {
          width: 100%;
          padding: 1rem 1.25rem;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 14px;
          color: var(--text-primary);
          font-family: 'Inter', sans-serif;
          font-size: 0.95rem;
          transition: all 0.4s var(--ease-premium);
          outline: none;
          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .input-premium:focus {
          border-color: var(--accent);
          background: rgba(0, 229, 255, 0.02);
          box-shadow: 0 0 0 4px var(--accent-dim), inset 0 2px 4px rgba(0, 0, 0, 0.05);
          transform: translateY(-1px);
        }

        .input-premium::placeholder {
          color: var(--text-muted);
        }

        @media (max-width: 768px) {
          .desktop-nav {
            display: none !important;
          }

          .mobile-only {
            display: flex !important;
          }
        }

        @media (min-width: 769px) {
          .mobile-only {
            display: none !important;
          }
          #mobile-menu {
            display: none !important;
          }
        }


        /* === Logo Scroller === */
        .logo-scroller {
          overflow: hidden;
          padding: 3rem 0;
          background: var(--bg-secondary);
          position: relative;
          width: 100%;
        }

        .logo-scroller::before,
        .logo-scroller::after {
          content: "";
          position: absolute;
          top: 0;
          width: 100px;
          height: 100%;
          z-index: 2;
          pointer-events: none;
        }

        .logo-scroller::before {
          left: 0;
          background: linear-gradient(to right, var(--bg-secondary) 0%, transparent 100%);
        }

        .logo-scroller::after {
          right: 0;
          background: linear-gradient(to left, var(--bg-secondary) 0%, transparent 100%);
        }

        .logo-scroller-inner {
          display: flex;
          width: max-content;
          animation: scroll-left 40s linear infinite;
        }

        .logo-item {
          width: 180px;
          height: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 2.5rem;
          flex-shrink: 0;
        }

        .logo-item img {
          max-width: 100%;
          max-height: 45px;
          object-fit: contain;
          opacity: 0.8;
          transition: all 0.4s var(--ease-premium);
        }

        .logo-item:hover img {
          opacity: 1;
          transform: scale(1.1);
        }

        @keyframes scroll-left {
          0% {
            transform: translateX(0);
          }

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

        /* === Responsive Polish === */
        @media (max-width: 768px) {
          .logo-item {
            width: 140px;
            padding: 0 1.5rem;
          }

          .logo-scroller-inner {
            animation-duration: 25s;
          }
        }

        @media (min-width: 2000px) {
          .container-premium {
            max-width: 1800px;
          }

          .section-title {
            font-size: 4rem;
          }
        }

        /* === Navigation === */
        .nav-link {
          color: var(--text-secondary) !important;
          text-decoration: none;
          font-size: 0.95rem;
          font-weight: 500;
          transition: all 0.3s var(--ease-premium);
          font-family: 'Inter', sans-serif;
        }

        .nav-link:hover {
          color: var(--accent) !important;
        }

        .mobile-nav-link {
          color: var(--text-primary) !important;
          text-decoration: none;
          font-size: 1.75rem;
          font-family: 'Poppins', sans-serif;
          font-weight: 700;
        }

        /* === Global Links === */
        a {
          color: inherit;
          text-decoration: none;
        }

        /* === Footer Polish === */
        .footer-link {
          color: var(--text-secondary);
          text-decoration: none;
          font-size: 0.85rem;
          transition: all 0.3s;
        }

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

        .social-link {
          width: 32px;
          height: 32px;
          border-radius: 8px;
          background: var(--bg-tertiary);
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--text-secondary);
          transition: all 0.3s;
          text-decoration: none;
          border: 1px solid var(--border);
        }

        .social-link:hover {
          background: var(--accent);
          color: var(--bg-primary);
          transform: translateY(-3px);
        }

        header.scrolled {
          padding: 12px 0 !important;
          background: rgba(10, 25, 47, 0.95) !important;
          backdrop-filter: blur(20px) !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
        }

        .mobile-nav-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 4px;
          color: var(--text-secondary);
          text-decoration: none;
          font-size: 0.7rem;
          font-weight: 500;
          flex: 1;
        }

        .mobile-nav-item.active {
          color: var(--accent);
        }

        .cart-badge-mobile {
          position: absolute;
          top: -5px;
          right: -8px;
          background: var(--accent);
          color: var(--bg-primary);
          font-size: 0.6rem;
          font-weight: 800;
          min-width: 14px;
          height: 14px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        /* === Admin Layout === */
        .admin-sidebar {
          width: 260px;
          height: 100vh;
          background: var(--bg-secondary);
          border-right: 1px solid var(--border);
          position: fixed;
          left: 0;
          top: 0;
          padding: 2rem;
          z-index: 1001;
        }

        .admin-main {
          margin-left: 260px;
          padding: 2.5rem;
          min-height: 100vh;
          transition: all 0.3s var(--ease-premium);
        }

        .admin-sidebar-overlay {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.7);
          backdrop-filter: blur(4px);
          z-index: 1000;
          opacity: 0;
          visibility: hidden;
          transition: all 0.3s var(--ease-premium);
        }

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

        /* Responsive Grids */
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
        .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

        @media (max-width: 1024px) {
          .admin-main {
            margin-left: 0 !important;
            padding: 5.5rem 1.25rem 2rem !important;
          }
          .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
        }

        /* Admin Table Responsive */
        .table-responsive {
          width: 100%;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
        }

        .admin-table {
          width: 100%;
          border-collapse: collapse;
          background: var(--bg-secondary);
        }

        .admin-table th,
        .admin-table td {
          padding: 1.25rem;
          text-align: left;
          border-bottom: 1px solid var(--border);
        }

        .admin-table th {
          color: var(--text-muted);
          font-size: 0.75rem;
          text-transform: uppercase;
          letter-spacing: 0.1em;
        }

        @media (max-width: 768px) {

          .admin-table th,
          .admin-table td {
            padding: 1rem 0.75rem;
            font-size: 0.85rem;
          }
        }