:root {
                   --orange: #f47b20;
                   --orange-dark: #d9650d;
                   --dark: #1a1a1a;
                   --dark2: #2c2c2c;
                   --gray: #f5f5f5;
                   --gray2: #ebebeb;
                   --text: #444;
                   --text-light: #888;
                   --white: #fff;
                   --border: #e0e0e0;
                   --green: #27ae60;
                   --red: #e74c3c;
               }
               
               * {
                   margin: 0;
                   padding: 0;
                   box-sizing: border-box;
               }
               
               body {
                   font-family: 'Barlow', sans-serif;
                   color: var(--text);
                   background: #fff;
               }
               
               a {
                   text-decoration: none;
                   color: inherit;
               }
               
               ul {
                   list-style: none;
               }
               
               img {
                   max-width: 100%;
                   display: block;
               }
               /* TOP BAR */
               
               .topbar {
                   background: var(--dark);
                   color: #bbb;
                   font-size: 12px;
                   padding: 7px 0;
               }
               
               .topbar .container {
                   display: flex;
                   justify-content: space-between;
                   align-items: center;
               }
               
               .topbar a {
                   color: #bbb;
               }
               
               .topbar a:hover {
                   color: var(--orange);
               }
               
               .topbar-left span {
                   margin-right: 20px;
               }
               
               .topbar-left i {
                   margin-right: 5px;
                   color: var(--orange);
               }
               
               .topbar-right span {
                   margin-left: 15px;
               }
               /* HEADER */
               
               .header {
                   background: #fff;
                   padding: 14px 0;
                   border-bottom: 1px solid var(--border);
                   position: sticky;
                   top: 0;
                   z-index: 999;
                   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
               }
               
               .header .container {
                   display: flex;
                   align-items: center;
                   gap: 20px;
               }
               
               .logo {
                   font-family: 'Barlow Condensed', sans-serif;
                   font-size: 30px;
                   font-weight: 800;
                   color: var(--dark);
                   letter-spacing: 1px;
                   min-width: 130px;
               }
               
               .logo span {
                   color: var(--orange);
               }
               
               .header-contacts {
                   display: flex;
                   gap: 20px;
                   font-size: 13px;
                   flex: 1;
               }
               
               .header-contact i {
                   color: var(--orange);
                   margin-right: 5px;
               }
               
               .header-contact strong {
                   display: block;
                   font-size: 14px;
                   font-weight: 700;
                   color: var(--dark);
               }
               
               .header-search {
                   flex: 1;
                   display: flex;
                   max-width: 380px;
                   border: 2px solid var(--border);
                   border-radius: 4px;
                   overflow: hidden;
               }
               
               .header-search input {
                   flex: 1;
                   border: none;
                   outline: none;
                   padding: 9px 14px;
                   font-size: 13px;
                   font-family: 'Barlow', sans-serif;
               }
               
               .header-search button {
                   background: var(--orange);
                   border: none;
                   color: #fff;
                   padding: 0 16px;
                   cursor: pointer;
                   font-size: 15px;
               }
               
               .header-icons {
                   display: flex;
                   gap: 16px;
                   align-items: center;
               }
               
               .hicon {
                   text-align: center;
                   font-size: 11px;
                   color: var(--text);
                   cursor: pointer;
                   position: relative;
               }
               
               .hicon i {
                   font-size: 20px;
                   display: block;
                   margin-bottom: 2px;
                   color: var(--dark);
               }
               
               .hicon:hover i {
                   color: var(--orange);
               }
               
               .badge {
                   background: var(--orange);
                   color: #fff;
                   border-radius: 50%;
                   width: 17px;
                   height: 17px;
                   font-size: 10px;
                   font-weight: 700;
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   position: absolute;
                   top: -4px;
                   right: -4px;
               }
               /* NAV */
               
               .navbar {
                   background: var(--orange);
               }
               
               .navbar .container {
                   display: flex;
                   align-items: center;
               }
               
               .nav-links {
                   display: flex;
                   flex: 1;
               }
               
               .nav-links li a {
                   display: block;
                   padding: 13px 18px;
                   color: #fff;
                   font-weight: 600;
                   font-size: 14px;
                   letter-spacing: 0.3px;
                   transition: background 0.2s;
               }
               
               .nav-links li a:hover,
               .nav-links li a.active {
                   background: rgba(0, 0, 0, 0.15);
               }
               
               .nav-links li a i {
                   margin-left: 4px;
                   font-size: 11px;
               }
               
               .nav-extra {
                   display: flex;
                   gap: 0;
               }
               
               .nav-extra span {
                   display: flex;
                   align-items: center;
                   gap: 6px;
                   color: #fff;
                   font-size: 13px;
                   padding: 0 16px;
                   border-left: 1px solid rgba(255, 255, 255, 0.2);
               }
               
               .nav-extra i {
                   font-size: 15px;
               }
               /* HERO */
               
               .hero {
                   background: linear-gradient(135deg, #f47b20 0%, #e06010 45%, #1a1a1a 100%);
                   min-height: 420px;
                   display: flex;
                   align-items: center;
                   position: relative;
                   overflow: hidden;
               }
               
               .hero::before {
                   content: '';
                   position: absolute;
                   right: 0;
                   top: 0;
                   bottom: 0;
                   width: 55%;
                   background: url('https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?w=900&q=80') center/cover;
                   opacity: 0.18;
               }
               
               .hero-content {
                   position: relative;
                   z-index: 2;
                   padding: 60px 0;
                   max-width: 520px;
               }
               
               .hero-badge {
                   background: rgba(255, 255, 255, 0.15);
                   color: #fff;
                   font-size: 12px;
                   font-weight: 600;
                   letter-spacing: 2px;
                   text-transform: uppercase;
                   padding: 5px 14px;
                   border-radius: 2px;
                   display: inline-block;
                   margin-bottom: 18px;
               }
               
               .hero h1 {
                   font-family: 'Barlow Condensed', sans-serif;
                   font-size: 58px;
                   font-weight: 800;
                   color: #fff;
                   line-height: 1.05;
                   text-transform: uppercase;
                   margin-bottom: 10px;
               }
               
               .hero-price {
                   font-size: 28px;
                   color: #fff;
                   font-weight: 700;
                   margin-bottom: 28px;
               }
               
               .hero-price span {
                   font-size: 16px;
                   font-weight: 400;
                   opacity: 0.8;
               }
               
               .btn-hero {
                   background: #fff;
                   color: var(--orange);
                   font-family: 'Barlow Condensed', sans-serif;
                   font-weight: 700;
                   font-size: 16px;
                   letter-spacing: 1px;
                   text-transform: uppercase;
                   padding: 13px 34px;
                   border-radius: 3px;
                   display: inline-flex;
                   align-items: center;
                   gap: 8px;
                   transition: all 0.2s;
               }
               
               .btn-hero:hover {
                   background: var(--dark);
                   color: #fff;
               }
               
               .hero-img {
                   position: absolute;
                   right: 8%;
                   top: 50%;
                   transform: translateY(-50%);
                   width: 360px;
                   filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
                   animation: floatImg 3s ease-in-out infinite;
               }
               
               @keyframes floatImg {
                   0%,
                   100% {
                       transform: translateY(-50%);
                   }
                   50% {
                       transform: translateY(calc(-50% - 12px));
                   }
               }
               
               .save-badge {
                   position: absolute;
                   top: 50px;
                   right: calc(8% + 280px);
                   background: var(--red);
                   color: #fff;
                   border-radius: 50%;
                   width: 68px;
                   height: 68px;
                   display: flex;
                   flex-direction: column;
                   align-items: center;
                   justify-content: center;
                   font-weight: 800;
                   font-size: 13px;
                   font-family: 'Barlow Condensed', sans-serif;
                   line-height: 1.1;
                   box-shadow: 0 4px 15px rgba(231, 76, 60, 0.5);
               }
               
               .save-badge big {
                   font-size: 22px;
               }
               /* CONTAINER */
               
               .container {
                   max-width: 1200px;
                   margin: 0 auto;
                   padding: 0 20px;
               }
               /* CATEGORIES */
               
               .section {
                   padding: 50px 0;
               }
               
               .section-header {
                   display: flex;
                   justify-content: space-between;
                   align-items: flex-end;
                   margin-bottom: 28px;
               }
               
               .section-title {
                   font-family: 'Barlow Condensed', sans-serif;
                   font-size: 28px;
                   font-weight: 800;
                   color: var(--dark);
                   text-transform: uppercase;
               }
               
               .section-sub {
                   font-size: 13px;
                   color: var(--text-light);
                   margin-top: 4px;
               }
               
               .btn-view-all {
                   background: var(--dark);
                   color: #fff;
                   padding: 9px 22px;
                   font-size: 13px;
                   font-weight: 600;
                   border-radius: 3px;
                   display: flex;
                   align-items: center;
                   gap: 7px;
                   transition: background 0.2s;
               }
               
               .btn-view-all:hover {
                   background: var(--orange);
               }
               
               .cat-grid {
                   display: grid;
                   grid-template-columns: repeat(9, 1fr);
                   gap: 12px;
               }
               
               .cat-card {
                   border: 1px solid var(--border);
                   border-radius: 6px;
                   padding: 18px 8px 14px;
                   text-align: center;
                   cursor: pointer;
                   transition: all 0.2s;
               }
               
               .cat-card:hover {
                   border-color: var(--orange);
                   background: #fff8f3;
                   transform: translateY(-3px);
               }
               
               .cat-card i {
                   font-size: 28px;
                   color: var(--orange);
                   margin-bottom: 8px;
                   display: block;
               }
               
               .cat-card .cat-name {
                   font-size: 12px;
                   font-weight: 600;
                   color: var(--dark);
               }
               
               .cat-card .cat-count {
                   font-size: 11px;
                   color: var(--text-light);
                   margin-top: 2px;
               }
               /* PROMO BANNERS */
               
               .promo-row {
                   display: grid;
                   grid-template-columns: 1fr 1fr;
                   gap: 20px;
                   margin-bottom: 50px;
               }
               
               .promo-card {
                   border-radius: 8px;
                   overflow: hidden;
                   position: relative;
                   min-height: 200px;
                   display: flex;
                   align-items: center;
                   padding: 30px;
                   color: #fff;
               }
               
               .promo-card.dark {
                   background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
               }
               
               .promo-card.orange {
                   background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
               }
               
               .promo-content {
                   position: relative;
                   z-index: 2;
               }
               
               .promo-label {
                   font-size: 11px;
                   text-transform: uppercase;
                   letter-spacing: 2px;
                   opacity: 0.8;
                   margin-bottom: 8px;
               }
               
               .promo-card h3 {
                   font-family: 'Barlow Condensed', sans-serif;
                   font-size: 32px;
                   font-weight: 800;
                   text-transform: uppercase;
                   line-height: 1.1;
                   margin-bottom: 4px;
               }
               
               .promo-card .old-price {
                   text-decoration: line-through;
                   opacity: 0.7;
                   font-size: 14px;
               }
               
               .promo-card .new-price {
                   font-size: 26px;
                   font-weight: 700;
                   margin-bottom: 16px;
               }
               
               .btn-promo {
                   background: #fff;
                   color: var(--dark);
                   padding: 8px 20px;
                   font-size: 13px;
                   font-weight: 700;
                   border-radius: 3px;
                   display: inline-flex;
                   align-items: center;
                   gap: 6px;
                   transition: all 0.2s;
               }
               
               .btn-promo:hover {
                   background: var(--orange);
                   color: #fff;
               }
               
               .promo-card.orange .btn-promo:hover {
                   background: var(--dark);
               }
               
               .promo-badge {
                   position: absolute;
                   top: 20px;
                   right: 20px;
                   background: var(--orange);
                   color: #fff;
                   font-family: 'Barlow Condensed', sans-serif;
                   font-weight: 800;
                   font-size: 15px;
                   padding: 5px 12px;
                   border-radius: 3px;
               }
               
               .promo-card.orange .promo-badge {
                   background: #fff;
                   color: var(--orange);
               }
               
               .promo-img {
                   position: absolute;
                   right: 20px;
                   bottom: 0;
                   height: 90%;
                   opacity: 0.25;
                   object-fit: contain;
               }
               /* PRODUCTS */
               
               .products-grid {
                   display: grid;
                   grid-template-columns: repeat(5, 1fr);
                   gap: 16px;
               }
               
               .product-card {
                   border: 1px solid var(--border);
                   border-radius: 6px;
                   overflow: hidden;
                   background: #fff;
                   transition: all 0.25s;
                   position: relative;
               }
               
               .product-card:hover {
                   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
                   transform: translateY(-4px);
                   border-color: var(--orange);
               }
               
               .product-img {
                   height: 180px;
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   overflow: hidden;
                   position: relative;
               }
               
               .product-img img {
                   max-height: 140px;
                   object-fit: contain;
                   transition: transform 0.3s;
               }
               
               .product-card:hover .product-img img {
                   transform: scale(1.07);
               }
               
               .product-tag {
                   position: absolute;
                   top: 10px;
                   left: 10px;
                   font-size: 11px;
                   font-weight: 700;
                   padding: 3px 8px;
                   border-radius: 2px;
                   text-transform: uppercase;
                   letter-spacing: 0.5px;
               }
               
               .tag-sale {
                   background: var(--red);
                   color: #fff;
               }
               
               .tag-new {
                   background: var(--green);
                   color: #fff;
               }
               
               .product-info {
                   padding: 14px;
               }
               
               .product-cat {
                   font-size: 11px;
                   color: var(--text-light);
                   text-transform: uppercase;
                   letter-spacing: 1px;
               }
               
               .product-name {
                   font-size: 14px;
                   font-weight: 600;
                   color: var(--dark);
                   margin: 4px 0 6px;
                   line-height: 1.3;
               }
               
               .stars {
                   color: #f5a623;
                   font-size: 11px;
                   margin-bottom: 6px;
               }
               
               .stars span {
                   color: var(--text-light);
                   font-size: 11px;
                   margin-left: 4px;
               }
               
               .price {
                   display: flex;
                   align-items: center;
                   gap: 8px;
               }
               
               .price-now {
                   font-size: 18px;
                   font-weight: 800;
                   color: var(--orange);
                   font-family: 'Barlow Condensed', sans-serif;
               }
               
               .price-old {
                   font-size: 13px;
                   color: var(--text-light);
                   text-decoration: line-through;
               }
               
               .product-actions {
                   display: flex;
                   gap: 6px;
                   padding: 0 14px 14px;
               }
               
               .btn-cart {
                   flex: 1;
                   background: var(--orange);
                   color: #fff;
                   border: none;
                   border-radius: 3px;
                   padding: 8px;
                   font-size: 12px;
                   font-weight: 700;
                   cursor: pointer;
                   font-family: 'Barlow', sans-serif;
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   gap: 5px;
                   transition: background 0.2s;
               }
               
               .btn-cart:hover {
                   background: var(--orange-dark);
               }
               
               .btn-wish {
                   background: var(--gray);
                   border: 1px solid var(--border);
                   border-radius: 3px;
                   padding: 8px 10px;
                   cursor: pointer;
                   color: var(--text-light);
                   transition: all 0.2s;
                   font-size: 14px;
               }
               
               .btn-wish:hover {
                   background: var(--orange);
                   color: #fff;
                   border-color: var(--orange);
               }
               /* DEAL SECTION */
               
               .deal-section {
                   background: linear-gradient(135deg, var(--dark) 0%, #2c2c2c 100%);
                   padding: 60px 0;
                   margin: 20px 0;
               }
               
               .deal-section .section-title {
                   color: #fff;
               }
               
               .deal-inner {
                   display: grid;
                   grid-template-columns: 1fr 1fr;
                   gap: 50px;
                   align-items: center;
               }
               
               .deal-left .offer-label {
                   font-size: 12px;
                   letter-spacing: 3px;
                   text-transform: uppercase;
                   color: var(--orange);
                   font-weight: 700;
                   margin-bottom: 10px;
               }
               
               .deal-left h2 {
                   font-family: 'Barlow Condensed', sans-serif;
                   font-size: 44px;
                   font-weight: 800;
                   color: #fff;
                   text-transform: uppercase;
                   line-height: 1.05;
                   margin-bottom: 20px;
               }
               
               .countdown {
                   display: flex;
                   gap: 12px;
                   margin-bottom: 30px;
               }
               
               .countdown-item {
                   background: rgba(255, 255, 255, 0.08);
                   border: 1px solid rgba(255, 255, 255, 0.12);
                   border-radius: 6px;
                   padding: 16px 18px;
                   text-align: center;
                   min-width: 75px;
               }
               
               .countdown-item .num {
                   font-family: 'Barlow Condensed', sans-serif;
                   font-size: 38px;
                   font-weight: 800;
                   color: var(--orange);
                   line-height: 1;
               }
               
               .countdown-item .lbl {
                   font-size: 11px;
                   color: #aaa;
                   text-transform: uppercase;
                   letter-spacing: 1px;
                   margin-top: 4px;
               }
               
               .deal-product-card {
                   background: #fff;
                   border-radius: 8px;
                   padding: 30px;
                   display: flex;
                   gap: 24px;
                   align-items: center;
               }
               
               .deal-product-card img {
                   width: 160px;
                   object-fit: contain;
               }
               
               .deal-product-info .cat {
                   font-size: 11px;
                   color: var(--text-light);
                   text-transform: uppercase;
                   letter-spacing: 1px;
               }
               
               .deal-product-info h4 {
                   font-size: 20px;
                   font-weight: 700;
                   color: var(--dark);
                   margin: 6px 0;
               }
               
               .deal-product-info .desc {
                   font-size: 13px;
                   color: var(--text-light);
                   line-height: 1.5;
                   margin-bottom: 14px;
               }
               
               .deal-price-old {
                   font-size: 14px;
                   color: var(--text-light);
                   text-decoration: line-through;
               }
               
               .deal-price-now {
                   font-size: 32px;
                   font-weight: 800;
                   color: var(--orange);
                   font-family: 'Barlow Condensed', sans-serif;
               }
               
               .deal-sold {
                   font-size: 12px;
                   color: var(--text-light);
                   margin: 8px 0 14px;
               }
               
               .progress-bar {
                   background: #eee;
                   border-radius: 10px;
                   height: 6px;
                   margin-bottom: 16px;
               }
               
               .progress-fill {
                   background: var(--orange);
                   height: 100%;
                   border-radius: 10px;
                   width: 38%;
               }
               /* 3 COL MINI PRODUCTS */
               
               .mini-cols {
                   display: grid;
                   grid-template-columns: 1fr 1fr 1fr;
                   gap: 24px;
               }
               
               .mini-col h4 {
                   font-family: 'Barlow Condensed', sans-serif;
                   font-size: 20px;
                   font-weight: 800;
                   color: var(--dark);
                   text-transform: uppercase;
                   border-bottom: 2px solid var(--orange);
                   padding-bottom: 10px;
                   margin-bottom: 18px;
               }
               
               .mini-product {
                   display: flex;
                   gap: 12px;
                   margin-bottom: 16px;
                   padding-bottom: 16px;
                   border-bottom: 1px solid var(--gray2);
               }
               
               .mini-product:last-child {
                   border-bottom: none;
               }
               
               .mini-product img {
                   width: 68px;
                   height: 68px;
                   object-fit: contain;
                   border-radius: 4px;
                   flex-shrink: 0;
               }
               
               .mini-product-info .name {
                   font-size: 13px;
                   font-weight: 600;
                   color: var(--dark);
                   line-height: 1.3;
                   margin-bottom: 4px;
               }
               
               .mini-product-info .stars {
                   font-size: 10px;
               }
               
               .mini-product-info .price-now {
                   font-size: 15px;
               }
               /* PROMO 3 BANNERS */
               
               .promo3 {
                   display: grid;
                   grid-template-columns: 1fr 1fr 1fr;
                   gap: 20px;
                   margin-bottom: 50px;
               }
               
               .promo3-card {
                   border-radius: 8px;
                   overflow: hidden;
                   padding: 28px;
                   position: relative;
                   color: #fff;
                   min-height: 160px;
                   display: flex;
                   align-items: center;
               }
               
               .promo3-card.c1 {
                   background: linear-gradient(135deg, #1a6bc4, #0e4d9a);
               }
               
               .promo3-card.c2 {
                   background: linear-gradient(135deg, var(--orange), #c85a00);
               }
               
               .promo3-card.c3 {
                   background: linear-gradient(135deg, #2c8c3a, #1a5c24);
               }
               
               .promo3-card h4 {
                   font-family: 'Barlow Condensed', sans-serif;
                   font-size: 24px;
                   font-weight: 800;
                   text-transform: uppercase;
                   margin-bottom: 4px;
               }
               
               .promo3-card .disc {
                   font-size: 28px;
                   font-weight: 800;
                   color: rgba(255, 255, 255, 0.9);
               }
               
               .promo3-card .sub {
                   font-size: 12px;
                   opacity: 0.85;
                   margin-bottom: 14px;
               }
               
               .btn-sm {
                   background: rgba(255, 255, 255, 0.2);
                   border: 1px solid rgba(255, 255, 255, 0.5);
                   color: #fff;
                   padding: 6px 16px;
                   font-size: 12px;
                   font-weight: 700;
                   border-radius: 3px;
                   display: inline-flex;
                   align-items: center;
                   gap: 5px;
                   transition: all 0.2s;
               }
               
               .btn-sm:hover {
                   background: #fff;
                   color: var(--dark);
               }
               /* BRANDS */
               
               .brands-section {
                   padding: 40px 0;
                   background: rgb(245, 242, 242);
               }
               
               .brands-grid {
                   display: flex;
                   justify-content: space-between;
                   align-items: center;
                   gap: 20px;
                   flex-wrap: wrap;
               }
               
               .brand-logo {
                   background: #fff;
                   border: 1px solid var(--border);
                   border-radius: 6px;
                   padding: 16px 28px;
                   font-family: 'Barlow Condensed', sans-serif;
                   font-size: 20px;
                   font-weight: 800;
                   color: #999;
                   letter-spacing: 1px;
                   transition: all 0.2s;
                   cursor: pointer;
               }
               
               .brand-logo:hover {
                   color: var(--orange);
                   border-color: var(--orange);
               }
               /* NEWS */
               
               .news-grid {
                   display: grid;
                   grid-template-columns: 1fr 1fr 1fr;
                   gap: 24px;
               }
               
               .news-card {
                   border: 1px solid var(--border);
                   border-radius: 6px;
                   overflow: hidden;
                   background: #fff;
                   transition: all 0.2s;
               }
               
               .news-card:hover {
                   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
                   transform: translateY(-3px);
               }
               
               .news-img {
                   height: 200px;
                   overflow: hidden;
                   background: var(--gray);
               }
               
               .news-img img {
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
                   transition: transform 0.4s;
               }
               
               .news-card:hover .news-img img {
                   transform: scale(1.06);
               }
               
               .news-info {
                   padding: 18px;
               }
               
               .news-meta {
                   font-size: 11px;
                   color: var(--text-light);
                   margin-bottom: 8px;
               }
               
               .news-meta span {
                   color: var(--orange);
                   font-weight: 600;
                   margin-right: 10px;
               }
               
               .news-info h4 {
                   font-size: 16px;
                   font-weight: 700;
                   color: var(--dark);
                   line-height: 1.35;
                   margin-bottom: 8px;
               }
               
               .news-info p {
                   font-size: 13px;
                   color: var(--text-light);
                   line-height: 1.6;
               }
               /* FOOTER */
               
               .footer {
                   background: var(--dark);
                   color: #aaa;
                   padding: 50px 0 20px;
               }
               
               .footer-grid {
                   display: grid;
                   grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
                   gap: 40px;
                   margin-bottom: 40px;
               }
               
               .footer-logo {
                   font-family: 'Barlow Condensed', sans-serif;
                   font-size: 30px;
                   font-weight: 800;
                   color: #fff;
                   margin-bottom: 14px;
               }
               
               .footer-logo span {
                   color: var(--orange);
               }
               
               .footer-about p {
                   font-size: 13px;
                   line-height: 1.7;
                   margin-bottom: 16px;
               }
               
               .footer-contact-item {
                   display: flex;
                   gap: 10px;
                   align-items: flex-start;
                   margin-bottom: 12px;
                   font-size: 13px;
               }
               
               .footer-contact-item i {
                   color: var(--orange);
                   margin-top: 2px;
               }
               
               .footer-col h5 {
                   color: #fff;
                   font-size: 15px;
                   font-weight: 700;
                   margin-bottom: 16px;
                   text-transform: uppercase;
                   letter-spacing: 0.5px;
               }
               
               .footer-col ul li {
                   margin-bottom: 9px;
               }
               
               .footer-col ul li a {
                   font-size: 13px;
                   color: #aaa;
                   transition: color 0.2s;
                   display: flex;
                   align-items: center;
                   gap: 6px;
               }
               
               .footer-col ul li a:hover {
                   color: var(--orange);
               }
               
               .footer-col ul li a i {
                   font-size: 10px;
                   color: var(--orange);
               }
               
               .newsletter-form {
                   display: flex;
                   margin-top: 14px;
               }
               
               .newsletter-form input {
                   flex: 1;
                   border: none;
                   background: rgba(255, 255, 255, 0.1);
                   color: #fff;
                   padding: 10px 14px;
                   font-size: 13px;
                   border-radius: 3px 0 0 3px;
                   outline: none;
                   font-family: 'Barlow', sans-serif;
               }
               
               .newsletter-form input::placeholder {
                   color: #777;
               }
               
               .newsletter-form button {
                   background: var(--orange);
                   border: none;
                   color: #fff;
                   padding: 0 16px;
                   border-radius: 0 3px 3px 0;
                   cursor: pointer;
                   font-size: 14px;
               }
               
               .footer-bottom {
                   border-top: 1px solid rgba(255, 255, 255, 0.08);
                   padding-top: 20px;
                   display: flex;
                   justify-content: space-between;
                   align-items: center;
                   font-size: 12px;
               }
               
               .social-links {
                   display: flex;
                   gap: 8px;
               }
               
               .social-link {
                   width: 32px;
                   height: 32px;
                   background: rgba(255, 255, 255, 0.07);
                   border-radius: 50%;
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   color: #aaa;
                   transition: all 0.2s;
                   font-size: 13px;
               }
               
               .social-link:hover {
                   background: var(--orange);
                   color: #fff;
               }
               
               .payment-icons {
                   display: flex;
                   gap: 8px;
                   align-items: center;
               }
               
               .pay-icon {
                   background: rgba(255, 255, 255, 0.08);
                   padding: 4px 10px;
                   border-radius: 3px;
                   font-size: 11px;
                   font-weight: 700;
                   color: #ccc;
               }
               /* ===== Responsive (Header/Footer/Index Sections) ===== */
               
               @media (max-width: 1199.98px) {
                   .cat-grid {
                       grid-template-columns: repeat(6, 1fr);
                   }
                   .products-grid {
                       grid-template-columns: repeat(4, 1fr);
                   }
               }
               
               @media (max-width: 991.98px) {
                   .header-contacts {
                       display: none;
                   }
                   .header-search {
                       max-width: 520px;
                   }
                   .nav-extra {
                       display: none;
                   }
                   .hero {
                       min-height: 380px;
                   }
                   .hero h1 {
                       font-size: 44px;
                   }
                   .hero-content {
                       padding: 45px 0;
                   }
                   .hero-img {
                       width: 300px;
                       right: 2%;
                   }
                   .save-badge {
                       right: calc(2% + 240px);
                       top: 42px;
                   }
                   .cat-grid {
                       grid-template-columns: repeat(4, 1fr);
                   }
                   .products-grid {
                       grid-template-columns: repeat(3, 1fr);
                   }
                   .promo-row {
                       grid-template-columns: 1fr;
                   }
                   .deal-inner {
                       grid-template-columns: 1fr;
                       gap: 24px;
                   }
                   .mini-cols {
                       grid-template-columns: 1fr;
                   }
                   .promo3 {
                       grid-template-columns: 1fr;
                   }
                   .news-grid {
                       grid-template-columns: 1fr;
                   }
                   .footer-grid {
                       grid-template-columns: 1fr 1fr;
                   }
               }
               
               @media (max-width: 575.98px) {
                   .container {
                       padding: 0 14px;
                   }
                   /* topbar */
                   .topbar .container {
                       flex-direction: column;
                       gap: 8px;
                   }
                   .topbar-left span {
                       margin-right: 0;
                   }
                   .topbar-right {
                       width: 100%;
                       justify-content: space-between;
                   }
                   /* header */
                   .header .container {
                       flex-wrap: wrap;
                       gap: 12px;
                   }
                   .logo {
                       font-size: 26px;
                   }
                   .header-search {
                       max-width: 100%;
                   }
                   .header-search input {
                       font-size: 14px;
                   }
                   .header-icons {
                       width: 100%;
                       justify-content: space-between;
                   }
                   .nav-links {
                       overflow-x: auto;
                       white-space: nowrap;
                   }
                   .nav-links li a {
                       padding: 12px 14px;
                   }
                   /* hero */
                   .hero {
                       min-height: 420px;
                   }
                   .hero::before {
                       width: 100%;
                       opacity: 0.2;
                   }
                   .hero-content {
                       max-width: 100%;
                       padding: 38px 0;
                   }
                   .hero h1 {
                       font-size: 34px;
                   }
                   .hero-price {
                       font-size: 22px;
                   }
                   .hero-img {
                       position: relative;
                       top: auto;
                       right: auto;
                       transform: none;
                       width: 100%;
                       max-width: 320px;
                       margin: 18px 0 0;
                       filter: drop-shadow(0 12px 25px rgba(0, 0, 0, 0.25));
                   }
                   .save-badge {
                       position: absolute;
                       top: 22px;
                       right: 14px;
                       width: 62px;
                       height: 62px;
                   }
                   .section {
                       padding: 30px 0;
                   }
                   .section-header {
                       flex-direction: column;
                       align-items: flex-start;
                       gap: 12px;
                   }
                   .btn-view-all {
                       width: fit-content;
                   }
                   .cat-grid {
                       grid-template-columns: repeat(2, 1fr);
                   }
                   .products-grid {
                       grid-template-columns: 1fr 1fr;
                   }
                   .promo-card {
                       min-height: 170px;
                       padding: 20px;
                   }
                   .promo-card h3 {
                       font-size: 26px;
                   }
                   .promo-badge {
                       right: 14px;
                       top: 14px;
                   }
                   .deal-product-card {
                       flex-direction: column;
                       text-align: left;
                       padding: 18px;
                   }
                   .deal-product-card img {
                       width: 100%;
                   }
                   .deal-product-info .btn-cart {
                       width: 100%;
                   }
                   .mini-col h4 {
                       font-size: 18px;
                   }
                   .mini-product {
                       padding-bottom: 12px;
                   }
                   .promo3-card {
                       min-height: 145px;
                   }
                   .promo3-card h4 {
                       font-size: 22px;
                   }
                   .news-img {
                       height: 170px;
                   }
                   /* footer */
                   .footer-grid {
                       grid-template-columns: 1fr;
                       gap: 22px;
                   }
                   .footer-bottom {
                       flex-direction: column;
                       gap: 12px;
                       align-items: flex-start;
                   }
                   .payment-icons {
                       flex-wrap: wrap;
                   }
               }
               
               @media (prefers-reduced-motion: reduce) {
                   * {
                       animation-duration: 0.01ms !important;
                       animation-iteration-count: 1 !important;
                       transition-duration: 0.01ms !important;
                       scroll-behavior: auto !important;
                   }
               }