.mainnav {
     background: var(--c-secondary);
     position: sticky;
     top: var(--header-h);
     z-index: 55;
 }

 @media (min-width:1px) {
     .mainnav {
         top: 0;
     }
 }

 /* simplified: header itself wraps */
 .mainnav-inner {
     max-width: var(--max);
     margin: 0 auto;
     padding: 0 32px;
     display: flex;
     align-items: center;
     gap: 4px;
     height: var(--nav-h);
 }

 .mainnav .toggle-sidebar {
     display: flex;
     align-items: center;
     gap: 10px;
     color: #fff;
     font-weight: 600;
     font-size: 13.5px;
     padding: 10px 16px;
     border-radius: var(--r-sm);
     background: rgba(255, 255, 255, .08);
     margin-right: 14px;
     transition: background .15s;
 }

 .mainnav .toggle-sidebar:hover {
     background: rgba(255, 255, 255, .16);
 }

 .mainnav-links {
     display: flex;
     align-items: center;
     gap: 2px;
     flex: 1;
 }

 .mainnav-links a {
     color: rgba(255, 255, 255, .82);
     font-size: 13.5px;
     font-weight: 600;
     padding: 10px 16px;
     border-radius: var(--r-sm);
     transition: background .15s, color .15s;
     position: relative;
 }

 .mainnav-links a:hover {
     color: #fff;
     background: rgba(255, 255, 255, .08);
 }

 .mainnav-links a.active {
     color: #fff;
 }

 .mainnav-links a.active::after {
     content: "";
     position: absolute;
     left: 16px;
     right: 16px;
     bottom: 2px;
     height: 2px;
     background: var(--c-accent);
     border-radius: 2px;
 }

 .mainnav-meta {
     display: flex;
     align-items: center;
     gap: 18px;
     color: rgba(255, 255, 255, .78);
     font-size: 12.5px;
     font-weight: 600;
 }

 .mainnav-meta .dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--c-accent);
     display: inline-block;
     margin-right: 6px;
     box-shadow: 0 0 0 3px rgba(52, 207, 0, .22);
 }

 /* ============================================================
   PAGE LAYOUT — SIDEBAR + CONTENT
   ============================================================ */
 .layout {
     max-width: var(--max);
     margin: 0 auto;
     padding: 28px 32px 0;
     display: grid;
     grid-template-columns: 278px 1fr;
     gap: 28px;
     align-items: start;
 }

 /* Sidebar — layout placement handled in _theme-fixes.css */
 .sidebar {
     flex-shrink: 0;
     width: 278px;
     background: #fff;
     border: 1px solid var(--gray-200, #e5e7eb);
     border-radius: var(--radius-lg, 12px);
     overflow: hidden;
 }

 .sidebar-list,
 .sidebar-item {
     overflow: visible;
 }

 @media (min-width: 1025px) {
     body.has-category-sidebar .sidebar {
         overflow: visible;
     }

     body.has-category-sidebar .sidebar-list {
         flex: 1;
         min-height: 0;
         max-height: none;
         overflow-x: hidden;
         overflow-y: auto;
         overscroll-behavior: contain;
         -webkit-overflow-scrolling: touch;
     }

     body.has-category-sidebar .sidebar .mega {
         position: fixed;
         left: var(--sidebar-width, 278px);
         top: 0;
         overflow: visible;
         z-index: 1100;
     }

     body.has-category-sidebar .sidebar .mega::before {
         content: '';
         position: absolute;
         top: 0;
         bottom: 0;
         left: -32px;
         width: 32px;
     }

     body.has-category-sidebar .sidebar .mega-body {
         max-height: calc(100vh - 24px);
         overflow-x: hidden;
         overflow-y: auto;
         overscroll-behavior: contain;
     }
 }

 .sidebar-head {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 0 20px;
     height: var(--nav-height, 52px);
     min-height: var(--nav-height, 52px);
     max-height: var(--nav-height, 52px);
     border-bottom: 3px solid var(--primary);
     font-family: var(--font-heading, 'Poppins', sans-serif);
     font-weight: 700;
     font-size: 14px;
     background: var(--deep-blue, #00479D);
     color: #fff;
     flex-shrink: 0;
     box-sizing: border-box;
     line-height: 1;
 }

 .sidebar-head i {
     font-size: 1.1rem;
     flex-shrink: 0;
 }

 .sidebar-logo {
     display: none;
     align-items: center;
     justify-content: flex-start;
     flex-shrink: 0;
     height: var(--header-height, 76px);
     padding: 14px 20px;
     background: #fff;
     border-bottom: 1px solid var(--gray-200, #e5e7eb);
     text-decoration: none;
     box-sizing: border-box;
 }

 .sidebar-logo-img {
     height: auto;
     max-height: 44px;
     width: auto;
     max-width: 100%;
     display: block;
     object-fit: contain;
 }

 /* Mobile category hamburger icon – hidden on desktop */
 .mobile-hamburger {
     display: none;
     margin-left: auto;
     cursor: pointer;
 }

 /* Header category toggle button – only visible on mobile */
 .cat-menu-btn {
     display: none;
 }

 .sidebar-list {
     padding: 8px;
 }

 .sidebar-item {
     position: relative;
 }

 .sidebar-link {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 11px 12px;
     border-radius: var(--r-sm);
     font-size: 13.5px;
     font-weight: 600;
     color: var(--ink-soft);
     transition: background .15s, color .15s;
 }

 .sidebar-link .ico {
     color: var(--c-primary);
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .sidebar-link .ico .category-icon-img,
 .sidebar-link .ico .sidebar-icon-img {
     width: 20px;
     height: 20px;
     object-fit: contain;
     display: block;
 }

 .sidebar-link .chev {
     margin-left: auto;
     color: var(--muted);
     transition: transform .15s, color .15s;
 }

 .sidebar-item:hover .sidebar-link,
 .sidebar-item.mega-hover .sidebar-link,
 .sidebar-item.mega-open .sidebar-link,
 .sidebar-item.active .sidebar-link {
     background: rgba(0, 115, 237, .14);
     color: var(--c-secondary, #00479D);
     padding-left: 9px;
 }

 .sidebar-item:hover .chev,
 .sidebar-item.mega-hover .chev,
 .sidebar-item.mega-open .chev,
 .sidebar-item.active .chev {
     color: var(--c-primary, #0073ED);
     transform: translateX(2px);
 }

 /* Mega menu */
 .mega {
     position: absolute;
     left: 100%;
     top: 0;
     width: 760px;
     max-width: calc(100vw - 360px);
     background: #fff;
     border: 1px solid var(--line);
     border-radius: var(--r-lg);
     box-shadow: var(--shadow-lg);
     padding: 28px;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transition: opacity .15s ease, visibility .15s;
     z-index: 90;
 }

 .sidebar-item.mega-open .mega,
 .sidebar-item.mega-hover .mega {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
 }

 .mega-grid {
     display: grid;
     gap: 28px;
 }

 .mega-grid--cols-1 {
     grid-template-columns: 1fr;
 }

 .mega-grid--cols-2 {
     grid-template-columns: 1fr 1fr;
 }

 .mega-grid--cols-3 {
     grid-template-columns: 1.2fr 1fr 1fr;
 }

 .mega-grid--cols-4 {
     grid-template-columns: 1.3fr 1fr 1fr 1fr;
 }

 .mega-grid--cols-5 {
     grid-template-columns: repeat(5, 1fr);
 }

 .mega-grid--cols-6 {
     grid-template-columns: repeat(6, 1fr);
 }

 .mega-col h4 {
     font-family: var(--font-display);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--muted);
     margin-bottom: 14px;
     padding-bottom: 10px;
     border-bottom: 1px solid var(--surface-2);
 }

 .mega-col ul li a {
     display: block;
     padding: 6px 0;
     font-size: 13.5px;
     color: var(--ink-soft);
     font-weight: 500;
     transition: color .15s, transform .15s;
     transform: translateX(0);
 }

 .mega-col ul li a:hover {
     color: var(--c-primary);
     transform: translateX(3px);
 }

 .mega-brands {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
 }

 .mega-brand-chip {
     font-size: 12px;
     font-weight: 700;
     color: var(--deep-blue, #00479D);
     background: var(--gray-50, #f9fafb);
     border: 1px solid var(--gray-200, #e5e7eb);
     border-radius: 20px;
     padding: 6px 14px;
     transition: background 0.15s, color 0.15s, border-color 0.15s;
 }

 .mega-brand-chip:hover {
     background: var(--primary, #0073ED);
     color: #fff;
     border-color: var(--primary, #0073ED);
 }

 .mega-promo {
     margin-top: 22px;
     padding-top: 20px;
     border-top: 1px solid var(--surface-2);
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
 }

 .mega-promo-text .label {
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: .14em;
     color: var(--c-accent-dark);
     font-weight: 700;
 }

 .mega-promo-text .title {
     font-family: var(--font-display);
     font-weight: 700;
     font-size: 16px;
     margin-top: 4px;
 }

 .sidebar-empty-notice {
     padding: 16px;
     margin: 0;
     font-size: 13px;
     line-height: 1.5;
     color: var(--ink-soft, #4b5563);
 }

 .sidebar-empty-notice a {
     display: inline-block;
     margin-top: 8px;
     color: var(--c-primary, #0073ed);
     font-weight: 600;
 }

 /* ============================================================
   FEATURED BRANDS
   ============================================================ */

 .brands-track-wrap {
     overflow: hidden;
     margin-top: 28px;
 }

 .brands-track {
     display: flex;
     gap: 16px;
     align-items: center;
     width: max-content;
     will-change: transform;
     animation: scroll-brands var(--marquee-duration, 35s) linear infinite;
 }

 .brands-track-group {
     display: flex;
     gap: 16px;
     align-items: center;
     flex-shrink: 0;
 }

 .brands-track:hover {
     animation-play-state: paused;
 }

 @keyframes scroll-brands {
     0% {
         transform: translate3d(0, 0, 0);
     }

     100% {
         transform: translate3d(calc(-1 * var(--marquee-shift, 50%)), 0, 0);
     }
 }

 @media (prefers-reduced-motion: reduce) {
     .brands-track {
         animation: none;
     }
 }

 .brand-card {
     flex-shrink: 0;
     width: 160px;
     height: 80px;
     background: var(--white);
     border: 1.5px solid var(--gray-200);
     border-radius: var(--radius-md);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 14px;
     transition: all var(--transition);
     cursor: pointer;
 }

 .brand-card:hover {
    border-color: var(--blue);
    box-shadow: 0 4px 16px rgba(0, 115, 237, 0.15);
 }

 .brand-name {
     font-family: var(--font-head);
     font-size: 15px;
     font-weight: 800;
     color: var(--gray-400);
     letter-spacing: -0.01em;
     transition: color var(--transition);
 }

 .brand-card:hover .brand-name {
     color: var(--deep-blue);
 }                                                                                                                                                                                                                                                                                     

 /* Layout Container — one row: main + 2 static cards (reference) */
 .promo-grid {
     display: flex;
     flex-direction: row;
     align-items: stretch;
     gap: 20px;
     width: 100%;
     box-sizing: border-box;
     margin-bottom: 30px;
 }

 /* Base Card Styling */
 .promo-card {
     border-radius: 16px;
     position: relative;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     box-sizing: border-box;
     padding: 30px;
     min-height: 320px;
     min-width: 0;
 }

 /* Proportions: main ~50%, each static ~25% */
 .main-carousel {
     flex: 2 1 0;
     background-color: #aed8f2;
 }

 .static-promo {
     flex: 1 1 0;
 }

 .blue-bg {
     background-color: #a4d1f5;
 }

 .yellow-bg {
     background-color: #f7d695;
 }

 /* Content sits above the absolute background image */
 .promo-card .card-content {
     position: relative;
     z-index: 2;
     font-family: sans-serif;
     max-width: 58%;
 }

 .promo-card .card-content.centered {
     text-align: center;
     max-width: 100%;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 /* Soft scrim so static promo titles stay readable over dark product images */
 .static-promo .card-content.centered {
     padding: 10px 12px 14px;
     border-radius: 12px;
     background: linear-gradient(
         180deg,
         rgba(255, 255, 255, 0.72) 0%,
         rgba(255, 255, 255, 0.45) 70%,
         rgba(255, 255, 255, 0) 100%
     );
 }

 .promo-card .card-content .tagline {
     margin: 0 0 8px;
     font-size: 0.72rem;
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     color: #1a3a5c;
 }

 .yellow-bg .card-content .tagline {
     color: #5c4a1a;
 }

 .promo-card .card-content h2,
 .promo-card .card-content h3 {
     margin: 0 0 10px;
     font-size: 1.35rem;
     line-height: 1.25;
     font-weight: 700;
     color: #0f2744;
 }

 .yellow-bg .card-content h2,
 .yellow-bg .card-content h3 {
     color: #3d2f0a;
 }

 .promo-card .card-content .expiry {
     margin: 0;
     font-size: 0.85rem;
     color: #2a4a66;
 }

 .promo-card .card-content .shop-link {
     display: inline-block;
     margin-top: 14px;
     font-size: 0.85rem;
     font-weight: 600;
     color: #0f2744;
     text-decoration: underline;
     text-underline-offset: 3px;
 }

 .yellow-bg .card-content .shop-link {
     color: #3d2f0a;
 }

 .static-promo .card-content .tagline {
     font-size: 0.65rem;
 }

 .static-promo .card-content h3 {
     font-size: 1.1rem;
     line-height: 1.2;
 }

 /* Image as full-card background (reference markup) */
 .promo-card .card-image-wrapper {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     overflow: hidden;
     pointer-events: none;
 }

 .promo-card .card-image-wrapper img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     object-position: right center;
     transition: transform 0.4s ease-in-out;
 }

 .static-promo .card-image-wrapper img {
     object-position: center bottom;
 }

 /* Scale Image 1.2 on Hover */
 .promo-card:hover .card-image-wrapper img {
     transform: scale(1.2);
 }

 /* Carousel UI Dots */
 .carousel-dots {
     position: absolute;
     bottom: 20px;
     left: 30px;
     display: flex;
     gap: 8px;
     z-index: 3;
 }

 .dot {
     width: 8px;
     height: 8px;
     background-color: #ffffff;
     opacity: 0.7;
     border-radius: 50%;
     cursor: pointer;
     transition: opacity 0.3s;
 }

 .dot.active {
     opacity: 1;
     width: 18px;
     border-radius: 4px;
 }

 /* Styling for carousel content layout */
 .carousel-slide {
     display: none;
     width: 100%;
     height: 100%;
 }

 .carousel-slide.active {
     display: flex;
     justify-content: space-between;
 }

 /* Badge Accent Colors */
 .badge {
     padding: 4px 10px;
     border-radius: 6px;
     font-size: 0.85em;
     font-weight: bold;
     color: #fff;
     display: inline-block;
 }

 .badge.highlight {
     background-color: #0056b3;
 }

 .badge.alert {
     background-color: #d9534f;
 }

 .badge.storage {
     background-color: #2b2b2b;
 }

 /* Below 1200px: main full-width, static cards stay in 1 row */
 @media (max-width: 1200px) {
     .promo-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 16px;
     }

     .promo-grid .main-carousel {
         grid-column: 1 / -1;
         flex: none;
         width: 100%;
         min-height: 280px;
     }

     .promo-grid .static-promo {
         flex: none;
         width: auto;
         min-width: 0;
         max-width: none;
         min-height: 240px;
     }

     .promo-card .card-content {
         max-width: 55%;
     }

     .promo-card .card-content.centered {
         max-width: 100%;
     }

     .static-promo .card-content h3 {
         font-size: 1.25rem;
     }

     .static-promo .card-content .tagline {
         font-size: 0.72rem;
     }
 }

 /* Small phones: static promos stack full-width for readable text + image */
 @media (max-width: 425px) {
     .promo-grid {
         grid-template-columns: 1fr;
         gap: 12px;
     }

     .promo-grid .main-carousel {
         grid-column: 1;
         min-height: 220px;
     }

     .promo-grid .static-promo {
         grid-column: 1;
         width: 100%;
         min-height: 200px;
     }

     .promo-card {
         padding: 18px 16px;
         min-height: 200px;
         border-radius: 12px;
     }

     .promo-card .card-content {
         max-width: 62%;
     }

     .promo-card .card-content.centered {
         max-width: 100%;
         padding: 8px 10px 12px;
     }

     .promo-card .card-content .tagline {
         font-size: 0.65rem;
         margin-bottom: 6px;
     }

     .promo-card .card-content h2,
     .promo-card .card-content h3 {
         font-size: 1.05rem;
         margin-bottom: 6px;
     }

     .static-promo .card-content .tagline {
         font-size: 0.6rem;
     }

     .static-promo .card-content h3 {
         font-size: 1rem;
     }

     .promo-card .card-content .expiry {
         font-size: 0.75rem;
     }

     .promo-card .card-content .shop-link {
         margin-top: 8px;
         font-size: 0.8rem;
     }

     .static-promo .card-image-wrapper img {
         object-position: center 70%;
         object-fit: contain;
     }

     .carousel-dots {
         bottom: 12px;
         left: 16px;
     }
 }

 /* ==========================================================================
   SECTION 1: TOP HERO BANNERS CSS
   ========================================================================== */
 .banners-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
     margin-bottom: 50px;
 }

 .banner-card {
     border-radius: 24px;
     overflow: hidden;
     padding: 40px 24px;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
 }

 /* Background Color Variations */
 .white-bg {
     background-color: #ffffff;
 }

 .black-bg {
     background-color: #0c0c0c;
 }

 .light-blue-bg {
     background-color: #cfe5fe;
 }

 .banner-image img {
     max-height: 220px;
     object-fit: contain;
     margin-bottom: 20px;
 }

 .banner-content h3 {
     font-size: 24px;
     margin: 15px 0 10px 0;
     font-weight: 600;
 }

 .banner-content p {
     font-size: 14px;
     color: #666;
     line-height: 1.5;
     max-width: 290px;
     margin: 0 auto 24px auto;
 }

 .text-white h3 {
     color: #ffffff;
 }

 .text-white p {
     color: #aaaaaa;
 }

 .brand-text {
     color: #ffffff;
     font-weight: 500;
     tracking-spacing: 1px;
 }

 /* Blue Pill Button style (hero banner cards) */
 .btn.btn-primary.btn-sm {
     background-color: #0073ED;
     color: #fff;
     border: none;
     padding: 10px 24px;
     border-radius: 20px;
     font-size: 13px;
     font-weight: 500;
     cursor: pointer;
     transition: opacity 0.2s;
     text-decoration: none;
 }

 .btn.btn-primary.btn-sm:hover {
     opacity: 0.9;
     color: #fff;
 }


 /* ==========================================================================
   SECTION 2: RECOMMENDED PRODUCTS GRID CSS
   ========================================================================== */
 .section-title {
     font-size: 20px;
     font-weight: 600;
     color: #222;
     margin-bottom: 24px;
 }

 .products-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     /* Forms exactly 6 columns across */
     gap: 16px;
 }

 .product-card {
     background-color: #ffffff;
     border-radius: 16px;
     /* padding: 20px 16px; */
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.01);
 }

 /* Badges (Top Left corner of products) */
 .badge-container {
     position: absolute;
     top: 12px;
     left: 12px;
     display: flex;
     flex-direction: column;
     gap: 4px;
     z-index: 2;
 }

 .badge {
     font-size: 11px;
     font-weight: 700;
     padding: 3px 8px;
     border-radius: 20px;
     color: white;
 }

 .discount-badge {
     background-color: #72c069;
 }

 /* Green */
 .hot-badge {
     background-color: #e54a5b;
 }

 /* Red */

 .product-image {
     height: 140px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 16px;
 }

 .product-image img {
     max-width: 100%;
     max-height: 110px;
     object-fit: contain;
 }

 /* Typography & Info Layout */
 .product-info {
     text-align: center;
 }

 .product-name {
     font-size: 13px;
     font-weight: 600;
     color: #333;
     margin: 0 0 4px 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     /* Truncates long names clean */
 }

 .product-category {
     font-size: 12px;
     color: #999;
     margin: 0 0 12px 0;
 }

 /* Prices */
 .product-price {
     display: flex;
     justify-content: center;
     gap: 8px;
     font-size: 13px;
 }

 .old-price {
     color: #bbb;
     text-decoration: line-through;
 }

 .current-price {
     color: #e54a5b;
     font-weight: 600;
 }

 /* Responsive Overrides (For Smaller Displays) */
 @media (max-width: 1200px) {
     .products-grid {
         grid-template-columns: repeat(4, 1fr);
     }

     .banners-container {
         grid-template-columns: 1fr;
     }
 }

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

 /* Layout Headers */
 .section-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
     font-family: sans-serif;
 }

 .header-title {
     display: flex;
     align-items: center;
     gap: 8px;
     color: #1e3322;
 }

 .view-all {
     color: #666;
     text-decoration: underline;
     font-size: 14px;
 }

 /* Carousel Positioning setup */
 .carousel-container {
     position: relative;
     width: 100%;
 }

 .carousel-window {
     overflow-x: hidden;
     /* Hides cards bleeding off-screen */
     scroll-behavior: smooth;
     width: 100%;
 }

 .carousel-track {
     display: flex;
     gap: 16px;
     /* Allows calculation elements based on standard 6 column desktop layout view widths */
 }

 /* Base Product Card Framework */
 .product-card {
     min-width: calc((100% - (5 * 16px)) / 6);
     /* Dynamically displays exactly 6 items in view */
     background: #fff;
     border-radius: 12px;
     border: 1px solid #f0f0f0;
     box-sizing: border-box;
     /* padding: 16px; */
     position: relative;
     display: flex;
     flex-direction: column;
 }

 .img-wrap {
     height: 160px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 12px;
     overflow: hidden;
 }

 .img-wrap img,
 .img-wrap .woocommerce-placeholder {
     display: block;
     width: 100%;
     max-width: 100%;
     height: 100%;
     max-height: 140px;
     object-fit: contain;
 }

 /* Absolute Overlay Elements */
 .badge {
     position: absolute;
     top: 12px;
     left: 12px;
     border-radius: 20px;
     padding: 2px 8px;
     font-size: 11px;
     color: #fff;
     font-weight: bold;
 }

 .badge.discount {
     background: #72c069;
 }

 .badge.hot {
     background: #e54a5b;
 }

 .wishlist-btn {
     position: absolute;
     top: 6px;
     right: 12px;
     background: none;
     border: none;
     color: #ccc;
     cursor: pointer;
     font-size: 30px;
 }

 /* Text Blocks */
 .info h4 {
     font-size: 14px;
     margin: 0 0 4px 0;
     color: #333;
 }

 .info .cat {
     font-size: 12px;
     color: #999;
     margin: 0 0 12px 0;
 }

 .price {
     font-size: 14px;
 }

 .price .old {
     text-decoration: line-through;
     color: #ccc;
     margin-right: 6px;
 }

 .price .current {
     color: #72c069;
     font-weight: bold;
 }

 .price .unit {
     color: #999;
     font-size: 12px;
     margin-left: 2px;
 }

 /* Control Arrows Design matching Screenshot 2026-06-16 at 13.17.56.jpg */
 .nav-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 40px;
     height: 40px;
     background: #fff;
     border: 1px solid #e0e0e0;
     border-radius: 50%;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 10;
     transition: background 0.2s;
 }

 .nav-btn:hover {
     background: #f9f9f9;
 }

 .prev-btn {
     left: -20px;
 }

 .next-btn {
     right: -20px;
 }

 /* Baseline indicator scrollbar accent at the bottom */
 .carousel-scrollbar-base {
     width: 100%;
     height: 2px;
     background: #e0e0e0;
     margin-top: 24px;
     position: relative;
     margin-bottom: 10px;
 }

 .carousel-scrollbar-thumb {
     width: 30%;
     /* Represents track progress view width */
     height: 100%;
     background: #72c069;
     position: absolute;
     top: 0;
     left: 0;
     transition: left 0.3s ease;
 }

 /* Helper rule for forcing neat image scaling within utility cards */
 .max-h-100 {
     max-height: 100%;
     object-fit: contain;
 }

 .xs-text {
     font-size: 11px;
 }

 /* Custom Navigation Circles */
 .custom-nav-btn {
     width: 40px !important;
     height: 40px !important;
     background-color: #ffffff !important;
     border: 1px solid #e2e8f0 !important;
     border-radius: 50% !important;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
     top: 50% !important;
     transform: translateY(-50%) !important;
     opacity: 1 !important;
     position: absolute !important;
     transition: background-color 0.2s ease;
 }

 .custom-nav-btn:hover {
     background-color: #f8fafc !important;
 }

 /* Shifts arrow links outside card margins */
 .carousel-control-prev.custom-nav-btn {
     left: -20px !important;
 }

 .carousel-control-next.custom-nav-btn {
     right: -20px !important;
 }

 /* Styled internal arrow character */
 .carousel-control-prev-icon-black,
 .carousel-control-next-icon-black {
     color: #334155;
     font-size: 24px;
     font-weight: 300;
     line-height: 1;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* ===== RESET & BASE ===== */
 *,
 *::before,
 *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 :root {
     --primary: #0073ED;
     --deep-blue: #00479D;
     --tech-green: #34CF00;
     --bg-light: #f8fafc;
     --white: #ffffff;
     --gray-50: #f9fafb;
     --gray-100: #f3f4f6;
     --gray-200: #e5e7eb;
     --gray-300: #d1d5db;
     --gray-400: #9ca3af;
     --gray-500: #6b7280;
     --gray-600: #4b5563;
     --gray-700: #374151;
     --gray-800: #1f2937;
     --gray-900: #111827;
     --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
     --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
     --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
     --shadow-xl: 0 20px 50px -8px rgba(0, 0, 0, 0.10);
     --radius: 8px;
     --radius-lg: 12px;
     --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
     --header-height: 76px;
     --nav-height: 52px;
     --font-heading: 'Poppins', sans-serif;
     --font-body: 'Inter', sans-serif;
     --container-max-width: 100%;
     --container-padding-x: 24px;
 }

 @media (min-width: 1400px) {
     :root {
         --container-padding-x: 40px;
     }
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: var(--font-body);
     background: var(--bg-light);
     color: var(--gray-800);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
 }

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

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

 ul {
     list-style: none;
 }

 .container {
     max-width: var(--container-max-width, 100%);
     width: 100%;
     margin: 0 auto;
     padding: 0 var(--container-padding-x, 24px);
     box-sizing: border-box;
 }

 /* ===== BUTTONS ===== */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 10px 28px;
     font-family: var(--font-body);
     font-weight: 600;
     font-size: 0.95rem;
     border: none;
     border-radius: var(--radius);
     cursor: pointer;
     transition: var(--transition);
     text-align: center;
     line-height: 1.4;
     text-decoration: none;
 }

 .btn-primary {
     background: var(--primary);
     color: #fff;
 }

 .btn-primary:hover {
     background: #005fc7;
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(0, 115, 237, 0.30);
 }

 .btn-deep {
     background: var(--deep-blue);
     color: #fff;
 }

 .btn-deep:hover {
     background: #003a7a;
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(0, 71, 157, 0.30);
 }

 .btn-green {
     background: var(--tech-green);
     color: #fff;
 }

 .btn-green:hover {
     background: #2bb800;
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(52, 207, 0, 0.30);
 }

 .btn-outline {
     background: transparent;
     color: var(--primary);
     border: 2px solid var(--primary);
 }

 .btn-outline:hover {
     background: var(--primary);
     color: #fff;
 }

 .btn-white {
     background: #fff;
     color: var(--deep-blue);
 }

 .btn-white:hover {
     background: var(--gray-100);
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
 }

 .btn-sm {
     padding: 6px 16px;
     font-size: 0.85rem;
 }

 /* ===== HEADER ===== */
 .site-header {
     position: relative;
     z-index: 1000;
     background: var(--white);
     border-bottom: 1px solid var(--gray-200);
     box-shadow: var(--shadow-sm);
     height: var(--header-height);
     display: flex;
     align-items: center;
     transition: box-shadow 0.3s;
 }

 .site-header > .container {
     display: flex;
     align-items: center;
 }

 .site-header.scrolled {
 }

 .header-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     gap: 20px;
 }

 /* Logo */
 .logo {
     display: flex;
     align-items: center;
     gap: 10px;
     flex-shrink: 0;
 }

 .logo-icon {
     width: 44px;
     height: 44px;
     background: var(--deep-blue);
     border-radius: var(--radius);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 22px;
     font-weight: 800;
     font-family: var(--font-heading);
     letter-spacing: -0.5px;
     position: relative;
     overflow: hidden;
 }

 .logo-icon::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.20) 0%, transparent 60%);
     pointer-events: none;
 }

 .logo-text {
     font-family: var(--font-heading);
     font-weight: 700;
     font-size: 1.35rem;
     color: var(--deep-blue);
     letter-spacing: -0.3px;
 }

 .logo-text span {
     color: var(--primary);
 }

 /* Search */
 .header-search {
     flex: 1;
     max-width: 480px;
     min-width: 160px;
     position: relative;
 }

 .header-search input {
     width: 100%;
     padding: 10px 18px 10px 44px;
     border: 1.5px solid var(--gray-200);
     border-radius: 50px;
     font-family: var(--font-body);
     font-size: 0.92rem;
     background: var(--gray-50);
     transition: var(--transition);
     outline: none;
 }

 .header-search input:focus {
     border-color: var(--primary);
     box-shadow: 0 0 0 4px rgba(0, 115, 237, 0.10);
     background: #fff;
 }

 .header-search .search-icon {
     position: absolute;
     left: 16px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--gray-400);
     pointer-events: none;
 }

 .header-search form {
     position: relative;
 }

 .header-search.is-search-open input {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border-color: var(--primary);
     background: #fff;
 }

 .header-search-results {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     z-index: 200;
     background: #fff;
     border: 1.5px solid var(--primary);
     border-top: none;
     border-radius: 0 0 16px 16px;
     box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
     max-height: min(70vh, 420px);
     overflow: auto;
 }

 .header-search-results__section + .header-search-results__section {
     border-top: 1px solid var(--gray-100);
 }

 .header-search-results__heading {
     margin: 0;
     padding: 10px 16px 6px;
     font-size: 0.72rem;
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     color: var(--gray-400);
 }

 .header-search-results__list {
     list-style: none;
     margin: 0;
     padding: 0 8px 8px;
 }

 .header-search-result {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px 12px;
     border-radius: 12px;
     color: var(--ink);
     text-decoration: none;
     transition: background 0.15s ease;
 }

 .header-search-result:hover,
 .header-search-result.is-active,
 .header-search-result:focus {
     background: var(--gray-50);
     outline: none;
 }

 .header-search-result__image {
     width: 44px;
     height: 44px;
     border-radius: 10px;
     object-fit: cover;
     flex-shrink: 0;
     background: var(--gray-100);
 }

 .header-search-result__image--placeholder,
 .header-search-result__image--initials {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: var(--gray-400);
     font-size: 0.85rem;
     font-weight: 700;
 }

 .header-search-result__body {
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 2px;
 }

 .header-search-result__title {
     font-size: 0.9rem;
     font-weight: 600;
     line-height: 1.3;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .header-search-result__meta {
     font-size: 0.78rem;
     color: var(--gray-400);
 }

 .header-search-result__price {
     font-size: 0.82rem;
     font-weight: 600;
     color: var(--primary);
 }

 .header-search-result__price del {
     color: var(--gray-400);
     font-weight: 500;
 }

 .header-search-results__footer {
     border-top: 1px solid var(--gray-100);
     padding: 10px 12px 12px;
 }

 .header-search-results__view-all {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 10px 12px;
     border-radius: 999px;
     background: var(--gray-50);
     color: var(--primary);
     font-size: 0.88rem;
     font-weight: 600;
     text-decoration: none;
 }

 .header-search-results__view-all:hover {
     background: rgba(0, 115, 237, 0.08);
 }

 .header-search-results__status {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 18px 16px;
     font-size: 0.88rem;
     color: var(--gray-400);
 }

 .header-search-results__spinner {
     width: 16px;
     height: 16px;
     border: 2px solid var(--gray-200);
     border-top-color: var(--primary);
     border-radius: 50%;
     animation: header-search-spin 0.7s linear infinite;
 }

 @keyframes header-search-spin {
     to {
         transform: rotate(360deg);
     }
 }

 /* Header Actions */
 .header-actions {
     display: flex;
     align-items: center;
     gap: 6px;
     flex-shrink: 0;
 }

 .currency-switcher {
     display: flex;
     align-items: center;
     gap: 4px;
     background: var(--gray-50);
     border: 1px solid var(--gray-200);
     border-radius: 50px;
     padding: 4px 6px;
     font-size: 0.8rem;
     font-weight: 600;
     font-family: var(--font-body);
 }

 .currency-switcher button {
     background: transparent;
     border: none;
     padding: 4px 10px;
     border-radius: 50px;
     cursor: pointer;
     font-weight: 600;
     font-size: 0.78rem;
     transition: var(--transition);
     color: var(--gray-500);
 }

 .currency-switcher button.active {
     background: var(--primary);
     color: #fff;
 }

 .currency-switcher button:hover:not(.active) {
     background: var(--gray-200);
 }

 .header-action-btn {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     border: none;
     background: transparent;
     color: var(--gray-700);
     font-size: 1.2rem;
     cursor: pointer;
     transition: var(--transition);
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
 }

 .header-action-btn:hover {
     background: var(--gray-100);
     color: var(--primary);
 }

 .header-action-btn .badge {
     position: absolute;
     top: -2px;
     right: -2px;
     background: var(--tech-green);
     color: #fff;
     font-size: 0.6rem;
     font-weight: 700;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid #fff;
 }

 .header-action-btn.account-btn {
     font-size: 1.1rem;
 }

 .header-action-btn.account-btn.is-logged-in {
     width: auto;
     min-width: 42px;
     border-radius: 50px;
     padding: 0 14px 0 10px;
     gap: 8px;
     text-decoration: none;
 }

 .header-account-name {
     font-size: 0.82rem;
     font-weight: 600;
     font-family: var(--font-body);
     color: var(--gray-700);
     white-space: nowrap;
     max-width: 140px;
     overflow: hidden;
     text-overflow: ellipsis;
     line-height: 1;
 }

 .header-action-btn.is-logged-in:hover .header-account-name {
     color: var(--primary);
 }

 /* ===== NAVIGATION ===== */
 .main-nav {
     background: var(--deep-blue);
     border-bottom: 3px solid var(--primary);
     z-index: 999;
     height: var(--nav-height);
     display: flex;
     align-items: center;
 }

 .main-nav > .container {
     height: 100%;
     display: flex;
     align-items: center;
     padding-top: 0;
     padding-bottom: 0;
 }

 .nav-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     height: 100%;
 }

 .nav-links {
     display: flex;
     align-items: stretch;
     gap: 2px;
 }

 .nav-links>li {
     position: relative;
     display: flex;
     align-items: stretch;
     align-self: stretch;
 }

 .nav-links>li>a {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     padding: 0 20px;
     height: 100%;
     min-height: var(--nav-height);
     box-sizing: border-box;
     color: rgba(255, 255, 255, 0.85);
     font-family: var(--font-body);
     font-weight: 500;
     font-size: 0.88rem;
     line-height: 1.2;
     transition: var(--transition);
     /* inset shadow keeps text optically centered (border-bottom shifts flex center) */
     border-bottom: none;
     box-shadow: inset 0 -3px 0 transparent;
     letter-spacing: 0.2px;
 }

 .nav-links>li>a:hover,
 .nav-links>li>a.active {
     color: #fff;
     background: rgba(255, 255, 255, 0.08);
     box-shadow: inset 0 -3px 0 var(--tech-green);
 }

 .nav-links>li>a i {
     font-size: 0.85rem;
     opacity: 0.7;
 }

 /* Mega menu trigger */
 .nav-links .has-mega>a::after {
     content: '\f107';
     font-family: 'Font Awesome 6 Free';
     font-weight: 900;
     font-size: 0.7rem;
     margin-left: 4px;
     opacity: 0.6;
 }

 /* Mega Menu */
 .mega-menu {
     position: absolute;
     top: calc(var(--nav-height) + 2px);
     left: 0;
     width: 780px;
     background: #fff;
     border-radius: 0 0 var(--radius-lg) var(--radius-lg);
     box-shadow: var(--shadow-xl);
     padding: 28px 32px;
     display: none;
     grid-template-columns: 1fr 1fr;
     gap: 24px 40px;
     border-top: 4px solid var(--primary);
     z-index: 100;
 }

 .nav-links .has-mega:hover .mega-menu {
     display: grid;
 }

 .mega-col h4 {
     font-family: var(--font-heading);
     font-weight: 600;
     font-size: 0.9rem;
     color: var(--deep-blue);
     margin-bottom: 10px;
     letter-spacing: 0.3px;
 }

 .mega-col ul li a {
     display: block;
     padding: 5px 0;
     font-size: 0.85rem;
     color: var(--gray-600);
     transition: var(--transition);
     border-bottom: 1px solid transparent;
 }

 .mega-col ul li a:hover {
     color: var(--primary);
     padding-left: 6px;
 }

 .mega-col .brand-tag {
     display: inline-block;
     font-size: 0.7rem;
     font-weight: 600;
     color: var(--primary);
     background: rgba(0, 115, 237, 0.08);
     padding: 2px 10px;
     border-radius: 50px;
     margin: 2px 4px 2px 0;
 }

 /* Nav right */
 .nav-right {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .nav-right .nav-cta {
     font-size: 0.78rem;
     font-weight: 600;
     color: rgba(255, 255, 255, 0.8);
     background: rgba(255, 255, 255, 0.10);
     padding: 4px 16px;
     border-radius: 50px;
     transition: var(--transition);
     border: 1px solid rgba(255, 255, 255, 0.15);
 }

 .nav-right .nav-cta:hover {
     background: rgba(255, 255, 255, 0.20);
     color: #fff;
 }

 /* ===== HOMEPAGE ===== */

 /* Hero */
 .hero {
     padding: 48px 0 56px;
     background: linear-gradient(135deg, #eef4ff 0%, #f8fafc 100%);
     border-bottom: 1px solid var(--gray-200);
 }

 .hero-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
     align-items: center;
 }

 .hero-content h1 {
     font-family: var(--font-heading);
     font-weight: 800;
     font-size: 2.8rem;
     line-height: 1.15;
     color: var(--deep-blue);
     letter-spacing: -0.5px;
     margin-bottom: 16px;
 }

 .hero-content h1 .highlight {
     color: var(--primary);
     position: relative;
 }

 .hero-content h1 .highlight::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: 2px;
     width: 100%;
     height: 10px;
     background: rgba(0, 115, 237, 0.15);
     border-radius: 4px;
     z-index: -1;
 }

 .hero-content p {
     font-size: 1.1rem;
     color: var(--gray-600);
     max-width: 500px;
     margin-bottom: 28px;
     line-height: 1.7;
 }

 .hero-buttons {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
 }

 .hero-buttons .btn {
     padding: 14px 36px;
     font-size: 1rem;
 }

 .hero-visual {
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 .hero-visual .hero-card {

     width: 100%;
     max-width: 460px;
     /* border: 1px solid var(--gray-200); */
     position: relative;
     overflow: hidden;
 }

 .hero-visual .hero-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     /* background: linear-gradient(90deg, var(--primary), var(--tech-green)); */
 }

 .hero-card .hc-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 0;
     border-bottom: 1px solid var(--gray-100);
 }

 .hero-card .hc-row:last-child {
     border-bottom: none;
 }

 .hero-card .hc-label {
     font-weight: 500;
     color: var(--gray-500);
     font-size: 0.85rem;
 }

 .hero-card .hc-value {
     font-weight: 600;
     color: var(--gray-800);
 }

 .hero-card .hc-value .green {
     color: var(--tech-green);
 }

 .hero-card .hc-value .blue {
     color: var(--primary);
 }

 .hero-card .hc-tag {
     background: var(--tech-green);
     color: #fff;
     font-size: 0.65rem;
     font-weight: 700;
     padding: 2px 10px;
     border-radius: 50px;
     text-transform: uppercase;
 }

 /* ===== MAIN LAYOUT: Categories left + content right ===== */
 .home-layout {
     display: flex;
     gap: 32px;
     padding: 36px 0 48px;
     align-items: flex-start;
 }

 /* Sidebar Categories */
 .category-sidebar {
     position: fixed;
     top: 0;
     z-index: 9999;
     background: #fff;
     height: 100vh;
 }

 .category-sidebar .cat-header {
     background: var(--deep-blue);
     color: #fff;
     padding: 14px 20px;
     font-family: var(--font-heading);
     font-weight: 600;
     font-size: 0.95rem;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .category-sidebar .cat-header i {
     font-size: 1.1rem;
 }

 .category-list>li {
     border-bottom: 1px solid var(--gray-100);
     position: relative;
 }

 .category-list>li:last-child {
     border-bottom: none;
 }

 .category-list>li>a {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 12px 20px;
     font-weight: 500;
     font-size: 0.88rem;
     color: var(--gray-700);
     transition: var(--transition);
     cursor: pointer;
 }

 .category-list>li>a:hover {
     background: var(--gray-50);
     color: var(--primary);
 }

 .category-list>li>a i {
     color: var(--gray-400);
     font-size: 0.7rem;
 }

 /* Sub-menu inside sidebar */
 .cat-sub {
     display: none;
     padding: 6px 20px 14px 20px;
     background: var(--gray-50);
 }

 .category-list>li:hover .cat-sub {
     display: block;
 }

 .cat-sub a {
     display: block;
     padding: 4px 0 4px 12px;
     font-size: 0.82rem;
     color: var(--gray-600);
     transition: var(--transition);
     border-left: 2px solid transparent;
 }

 .cat-sub a:hover {
     color: var(--primary);
     border-left-color: var(--primary);
     padding-left: 16px;
 }

 .cat-sub .brand-pills {
     display: flex;
     flex-wrap: wrap;
     gap: 4px;
     padding-top: 4px;
 }

 .cat-sub .brand-pills span {
     font-size: 0.68rem;
     background: #eef4ff;
     color: var(--primary);
     padding: 2px 10px;
     border-radius: 50px;
     font-weight: 500;
 }

 /* ===== MAIN CONTENT ===== */
 .main-content {
     flex: 1;
     min-width: 0;
 }

 /* Section Titles */
 .section-title {
     font-family: var(--font-heading);
     font-weight: 700;
     font-size: 1.6rem;
     color: var(--deep-blue);
     margin-bottom: 6px;
     letter-spacing: -0.3px;
 }

 .section-sub {
     color: var(--gray-500);
     font-size: 0.95rem;
     margin-bottom: 24px;
 }

 .section-header {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     flex-wrap: wrap;
     margin-bottom: 20px;
 }

 .section-header .view-all {
     font-weight: 600;
     color: var(--primary);
     font-size: 0.9rem;
     transition: var(--transition);
 }

 .section-header .view-all:hover {
     color: var(--deep-blue);
 }

 /* Featured Categories Grid */
 .feat-cats {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
     gap: 16px;
     margin-bottom: 40px;
 }

 .feat-cat-item {
     background: #fff;
     border-radius: var(--radius);
     padding: 20px 12px;
     text-align: center;
     border: 1px solid var(--gray-200);
     transition: var(--transition);
     cursor: default;
 }

 .feat-cat-item:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
     border-color: var(--primary);
 }

 .feat-cat-item .fc-icon {
     font-size: 2.2rem;
     color: var(--primary);
     margin-bottom: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 2.2rem;
 }

 .feat-cat-item .fc-icon .category-icon-img,
 .feat-cat-item .fc-icon .fc-icon-img {
     width: 2.2rem;
     height: 2.2rem;
     object-fit: contain;
     display: block;
 }

 .feat-cat-item .fc-name {
     font-weight: 600;
     font-size: 0.85rem;
     color: var(--gray-700);
 }

 /* Brands */
 .brands-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
     gap: 16px;
     margin-bottom: 40px;
 }

 .brand-item {
     background: #fff;
     border-radius: var(--radius);
     padding: 16px 8px;
     text-align: center;
     border: 1px solid var(--gray-200);
     transition: var(--transition);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 6px;
 }

 .brand-item:hover {
     border-color: var(--primary);
     box-shadow: var(--shadow);
     transform: translateY(-2px);
 }

 .brand-item .bi-logo {
     font-weight: 700;
     font-size: 1.1rem;
     color: var(--deep-blue);
     letter-spacing: -0.3px;
 }

 .brand-item .bi-logo small {
     font-weight: 400;
     font-size: 0.65rem;
     color: var(--gray-400);
     display: block;
 }

 .brand-item .bi-tag {
     font-size: 0.6rem;
     color: var(--gray-500);
     background: var(--gray-100);
     padding: 2px 10px;
     border-radius: 50px;
 }

 /* Products Grid */
 .products-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
     gap: 20px;
     margin-bottom: 48px;
 }

 .product-card {
     background: #fff;
     border-radius: var(--radius-lg);
     border: 1px solid var(--gray-200);
     overflow: hidden;
     transition: var(--transition);
     display: flex;
     flex-direction: column;
 }

 .product-card:hover {
     box-shadow: var(--shadow-xl);
     border-color: var(--primary);
 }

 .product-card .pc-image {
     height: 160px;
     background: var(--gray-50);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 3rem;
     color: var(--gray-300);
     border-bottom: 1px solid var(--gray-100);
     position: relative;
     overflow: hidden;
 }

 .product-card .pc-image a,
 .product-card .pc-image .pc-image-link {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
 }

 .product-card .pc-image img,
 .product-card .pc-image .woocommerce-placeholder {
     display: block;
     width: 100%;
     max-width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .product-card .pc-image .pc-badge {
     position: absolute;
     top: 10px;
     left: 10px;
     font-size: 0.6rem;
     font-weight: 700;
     text-transform: uppercase;
     padding: 2px 12px;
     border-radius: 50px;
     background: #29a400;
     color: #fff;
 }

 .product-card .pc-image .pc-badge.hot {
     background: #f59e0b;
 }

 .product-card .pc-body {
     padding: 16px 18px 18px;
     flex: 1;
     display: flex;
     flex-direction: column;
 }

 .product-card .pc-brand {
     font-size: 0.7rem;
     font-weight: 600;
     color: var(--primary);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-bottom: 2px;
 }

 .product-card .pc-name {
     font-family: var(--font-heading);
     font-weight: 600;
     font-size: 0.95rem;
     color: var(--gray-800);
     margin-bottom: 4px;
     line-height: 1.3;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .product-card .pc-sku {
     font-size: 0.7rem;
     color: var(--gray-400);
     margin-bottom: 8px;
 }

 .product-card .pc-pricing {
     display: flex;
     align-items: baseline;
     gap: 10px;
     flex-wrap: wrap;
     margin-top: auto;
     padding-top: 10px;
     border-top: 1px solid var(--gray-100);
 }

 .product-card .pc-price {
     font-family: var(--font-heading);
     font-weight: 700;
     font-size: 1.2rem;
     color: var(--deep-blue);
 }

 .product-card .pc-price .currency {
     font-size: 0.7rem;
     font-weight: 600;
     color: var(--gray-500);
 }

 .product-card .pc-tax,
 .businessit-single-product .pc-tax {
     font-size: 0.65rem;
     color: var(--gray-500);
     background: var(--gray-100);
     padding: 2px 8px;
     border-radius: 50px;
     font-weight: 500;
 }

 .product-card .pc-tax.green,
 .product-card .pc-tax.blue,
 .businessit-single-product .pc-tax.green,
 .businessit-single-product .pc-tax.blue {
     background: rgba(0, 115, 237, 0.10);
     color: var(--primary);
 }

 .product-card .pc-actions {
     display: flex;
     gap: 6px;
     margin-top: 10px;
 }

 .product-card .pc-actions .btn {
     flex: 1;
     padding: 8px 10px;
     font-size: 0.78rem;
 }

 .product-card .pc-actions .btn-outline {
     flex: 0 0 auto;
     padding: 8px 14px;
 }

 /* ===== WHY CHOOSE US ===== */
 .why-section {
     background: #fff;
     border-radius: var(--radius-lg);
     padding: 40px 36px;
     margin-bottom: 40px;
     border: 1px solid var(--gray-200);
     box-shadow: var(--shadow-sm);
 }

 .why-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 28px;
     margin-top: 12px;
 }

 .why-item {
     text-align: center;
 }

 .why-item .wi-icon {
     font-size: 2.4rem;
     color: var(--primary);
     margin-bottom: 10px;
 }

 .why-item h4 {
     font-family: var(--font-heading);
     font-weight: 600;
     font-size: 1rem;
     color: var(--deep-blue);
     margin-bottom: 4px;
 }

 .why-item p {
     font-size: 0.88rem;
     color: var(--gray-500);
     line-height: 1.5;
 }

 /* ===== FINAL CTA ===== */
 .final-cta {
     background: linear-gradient(135deg, var(--deep-blue) 0%, #003a7a 100%);
     border-radius: var(--radius-lg);
     padding: 48px 40px;
     color: #fff;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
     margin-bottom: 16px;
     position: relative;
     overflow: hidden;
 }

 .final-cta::before {
     content: '';
     position: absolute;
     top: -60%;
     right: -10%;
     width: 400px;
     height: 400px;
     background: rgba(0, 115, 237, 0.12);
     border-radius: 50%;
     pointer-events: none;
 }

 .final-cta .cta-text h2 {
     font-family: var(--font-heading);
     font-weight: 700;
     font-size: 1.8rem;
     margin-bottom: 4px;
 }

 .final-cta .cta-text p {
     opacity: 0.8;
     font-size: 1rem;
 }

 .final-cta .cta-btns {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     position: relative;
     z-index: 1;
 }

 /* ===== FOOTER ===== */
 .site-footer {
     background: var(--gray-900);
     color: rgba(255, 255, 255, 0.7);
     padding: 48px 0 24px;
     margin-top: 16px;
 }

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

 .footer-col h4 {
     font-family: var(--font-heading);
     font-weight: 600;
     color: #fff;
     font-size: 1rem;
     margin-bottom: 14px;
 }

 .footer-logo {
     display: inline-block;
     margin-bottom: 24px;
     line-height: 0;
 }

 .footer-logo-img {
     display: block;
     max-width: 220px;
     width: 100%;
     height: auto;
 }

 .footer-col p {
     font-size: 0.88rem;
     line-height: 1.7;
 }

 .footer-col ul li {
     margin-bottom: 6px;
 }

 .footer-col ul li a {
     font-size: 0.88rem;
     transition: var(--transition);
 }

 .footer-col ul li a:hover {
     color: #fff;
     padding-left: 4px;
 }

.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.footer-contact-icon {
    color: white;
    width: 16px;
    flex-shrink: 0;
    line-height: 1.4;
}

.footer-contact-text {
    font-size: 0.88rem;
    line-height: 1.6;
}

 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.06);
     padding-top: 20px;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 12px;
     font-size: 0.82rem;
 }

 .footer-bottom .footer-credit-link {
     color: rgba(255, 255, 255, 0.85);
     font-weight: 600;
     text-decoration: none;
     transition: var(--transition);
 }

 .footer-bottom .footer-credit-link:hover {
     color: var(--tech-green);
 }

 .footer-bottom .fb-socials {
     display: flex;
     gap: 12px;
 }

 .footer-bottom .fb-socials a {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.06);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
     color: rgba(255, 255, 255, 0.6);
 }

 .footer-bottom .fb-socials a:hover {
     background: var(--primary);
     color: #fff;
 }

.floating-whatsapp {
    position: fixed;
    right: 22px;
    bottom: 85px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #25d366;
    color: #fff;
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.4);
    z-index: 9999;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-whatsapp i {
    font-size: 30px;
    line-height: 1;
}

.floating-whatsapp:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(37, 211, 102, 0.45);
}

 /* ===== RESPONSIVE ===== */
 @media (max-width: 1024px) {
     .hero-content p {
         margin-left: auto;
         margin-right: auto;
     }

     .hero-buttons {
         justify-content: center;
     }

     .hero-visual .hero-card {
         max-width: 100%;
     }

     .home-layout {
         flex-direction: column;
     }

     /* Sidebar mobile: hidden off-screen, slides in when .sidebar-open is toggled */
     .sidebar {
         position: fixed !important;
         left: -100% !important;
         top: 0 !important;
         display: flex !important;
         flex-direction: column !important;
         height: 100vh !important;
         width: 280px !important;
         z-index: 9000 !important;
         background: #fff !important;
         box-shadow: 4px 0 24px rgba(0,0,0,0.15) !important;
         transition: left 0.3s ease !important;
         overflow: hidden !important;
         flex: none !important;
         max-height: none !important;
     }

     .sidebar.sidebar-open .sidebar-logo {
         display: flex;
     }

     .sidebar.sidebar-open {
         left: 0 !important;
     }

     /* Always show category list when sidebar is open on mobile */
     .sidebar.sidebar-open .sidebar-list {
         display: block !important;
         flex: 1;
         min-height: 0;
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
     }

     /* Show hamburger button in header on mobile */
     body.has-category-sidebar .cat-menu-btn {
         display: flex !important;
     }

     /* Dim overlay behind sidebar */
     body.sidebar-open::before {
         content: '';
         position: fixed;
         inset: 0;
         background: rgba(0,0,0,0.4);
         z-index: 8999;
     }
     
     .mega-menu {
         display: none !important;
     }

     .nav-links>li.has-mega:hover .mega-menu {
         display: none !important;
     }

     .footer-grid {
         grid-template-columns: 1fr 1fr;
     }

     .final-cta {
         flex-direction: column;
         text-align: center;
     }
 }

 @media (max-width: 768px) {
     :root {
         --header-height: 110px;
         --nav-height: 46px;
     }

     .header-inner {
         gap: 12px;
         flex-wrap: wrap;
     }

     .logo {
         order: 1;
     }

     .header-actions {
         order: 2;
     }

     .logo-text {
         font-size: 1.1rem;
     }

     .header-search {
         order: 3;
         max-width: 100%;
         min-width: 100%;
         margin-top: 5px;
     }

     .header-search input {
         padding: 8px 12px 8px 34px;
         font-size: 0.8rem;
     }

     .header-search .search-icon {
         left: 10px;
         font-size: 0.8rem;
     }

     .header-action-btn {
         width: 34px;
         height: 34px;
         font-size: 1rem;
     }

     .header-action-btn.account-btn.is-logged-in {
         width: 34px;
         min-width: 34px;
         padding: 0;
         border-radius: 50%;
     }

     .header-account-name {
         display: none;
     }

     .header-action-btn .badge {
         width: 16px;
         height: 16px;
         font-size: 0.5rem;
     }

     .currency-switcher button {
         font-size: 0.7rem;
         padding: 2px 6px;
     }

     .hero-content h1 {
         font-size: 1.8rem;
     }

     .hero-content p {
         font-size: 0.95rem;
     }

     .hero-buttons .btn {
         padding: 10px 20px;
         font-size: 0.85rem;
     }

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

     .products-grid {
         grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
         gap: 12px;
     }

     .feat-cats {
         grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
         gap: 10px;
     }

     .brands-grid {
         grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
         gap: 10px;
     }

     .why-grid {
         grid-template-columns: 1fr 1fr;
     }

     .footer-grid {
         grid-template-columns: 1fr;
         gap: 24px;
     }

     .final-cta {
         padding: 32px 20px;
     }

     .final-cta .cta-text h2 {
         font-size: 1.4rem;
     }

     .nav-links>li>a {
         padding: 0 12px;
         font-size: 0.78rem;
     }

     .nav-right .nav-cta {
         display: none;
     }

    .floating-whatsapp {
        right: 14px;
        bottom: 18px;
        width: 50px;
        height: 50px;
    }

    .floating-whatsapp i {
        font-size: 27px;
    }
 }

 @media (max-width: 480px) {
    .hero-grid {
        grid-template-columns: 1fr; 
        text-align: center;
    }
    
     .container {
         padding: 0 14px;
     }

     .header-search {
         max-width: 100%;
     }

     .header-search input {
         padding: 8px 12px 8px 34px;
         font-size: 0.8rem;
     }

     .header-search .search-icon {
         left: 8px;
         font-size: 0.7rem;
     }

     .logo-icon {
         width: 34px;
         height: 34px;
         font-size: 16px;
     }

     .logo-text {
         font-size: 0.95rem;
     }

     .hero-content h1 {
         font-size: 1.5rem;
     }

     .products-grid {
         grid-template-columns: 1fr 1fr;
         gap: 10px;
     }

     .product-card .pc-body {
         padding: 12px;
     }

     .product-card .pc-name {
         font-size: 0.82rem;
     }

     .product-card .pc-price {
         font-size: 1rem;
     }

     .product-card .pc-actions .btn {
         font-size: 0.7rem;
         padding: 6px 8px;
     }

     .feat-cats {
         grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
     }

     .feat-cat-item .fc-icon {
         font-size: 1.6rem;
     }

     .feat-cat-item .fc-name {
         font-size: 0.7rem;
     }

     .why-grid {
         grid-template-columns: 1fr;
     }
 }