/* Reset and base styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      line-height: 1.6;
      color: #191919;
      background-color: #ffffff;
      overflow-x: hidden;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    button {
      border: none;
      cursor: pointer;
      font-family: inherit;
    }

    /* Layout components */
    .container {
      width: 100%;
      max-width: 1680px;
      margin: 0 auto;
      padding: 0 16px;
    }

    .flex-row {
      display: flex;
      flex-direction: row;
    }

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

    .flex-center {
      justify-content: center;
      align-items: center;
    }

    .flex-between {
      justify-content: space-between;
    }

    .flex-start {
      justify-content: flex-start;
    }

    .flex-end {
      justify-content: flex-end;
    }

    .gap-8 {
      gap: 8px;
    }

    .gap-16 {
      gap: 16px;
    }

    .gap-24 {
      gap: 24px;
    }

    .gap-32 {
      gap: 32px;
    }

    /* Top header */
    .top-header {
      background-color: #d84818;
      padding: 10px 0;
    }

    .top-header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 88%;
      margin: 0 auto;
    }

    .top-nav-left {
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .top-nav-right {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .top-nav-text {
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
      text-decoration: none;
    }

    .nav-divider {
      width: 1px;
      height: 14px;
      background-color: rgba(255, 255, 255, 0.2);
    }

    .dropdown {
      background: none;
      color: #ffffff;
      font-size: 14px;
      font-weight: 600;
      padding: 12px;
    }

    /* Main header */
    .main-header {
      background-color: rgba(216, 72, 24, 0.05);
      border-bottom: 1px solid #e6e6e6;
      padding: 26px 0;
    }

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      max-width: 1680px;
      margin: 0 auto;
      padding: 0 120px;
    }

    .logo-section {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    .logo-icon {
      width: 76px;
      height: 32px;
    }

    .logo-text {
      font-size: 36px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 600;
      color: #d84818;
      margin-left: 8px;
    }

    .search-section {
      display: flex;
      gap: 16px;
      flex-grow: 1;
      max-width: 500px;
    }

    .search-container {
      display: flex;
      width: 100%;
      border: 1px solid #cccccc;
      border-radius: 24px;
      overflow: hidden;
    }

    .category-select {
      appearance: none;
      /* Hide default arrow */
      -webkit-appearance: none;
      /* Hide default arrow for Safari */
      background-image: url('../assets/images/img_arrow_down_gray_500.svg');
      /* Custom arrow */
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding: 14px 40px 14px 14px;
      border: none;
      background-color: transparent;
      font-size: 14px;
      color: #666666;
      width: auto;
    }

    .search-input {
    flex: 1;
    padding: 16px;
    border: none;
    font-size: 14px;
    color: #333333;
    background: white;
    width: 100%;
}

    .search-btn {
      background-color: #d84818;
      padding: 6px;
      border-radius: 16px;
      margin: 8px;
    }

    .location-select {
      background-color: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 22px;
      padding: 10px 30px 10px 14px;
      font-size: 16px;
      color: #191919;
      width: 18%;
    }

    .user-actions {
      display: flex;
      gap: 24px;
      align-items: center;
      width: auto;
      flex-shrink: 0;
    }

    .user-action {
      display: flex;
      align-items: center;
      gap: 6px;
      text-decoration: none;
      color: #7f7f7f;
    }

    .user-action-icon {
      position: relative;
      width: 32px;
      height: 32px;
    }

    .badge {
      position: absolute;
      top: -8px;
      right: -8px;
      background-color: #d84818;
      color: #ffffff;
      font-size: 12px;
      font-weight: 500;
      padding: 2px 6px;
      border-radius: 8px;
      min-width: 16px;
      text-align: center;
    }

    /* Navigation bar */
    .nav-bar {
      border-bottom: 1px solid #e6e6e6;
      display: flex;
      justify-content: center;
      border-bottom: 1px solid white;
      padding: 0;
      overflow-x: auto;
    }
 

    .nav-content.tags-nav {
      /* Specific for the new tags */
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      /* Take full width */
      max-width: 1680px;
      /* Limit width */
      margin: 0 auto;
      padding: 16px 0;
      /* Add padding */
      gap: 20px;
      /* Space between tags */
      flex-wrap: nowrap;
      /* Allow tags to wrap */
    }

    .tag-item {
      background-color: #f0f0f0;
      /* Light background for tags */
      color: #333333;
      /* Darker text */
      padding: 10px 20px;
      border-radius: 20px;
      /* Rounded corners */
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      transition: background-color 0.3s ease;
      white-space: nowrap;
      /* Prevent text wrapping inside tag */
    }

    .tag-item:hover {
      background-color: #d84818;
      /* Orange background on hover */
      color: #ffffff;
      /* White text on hover */
    }

    .nav-content {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 92%;
      margin: 0 auto;
    }

   

    .breadcrumb-section {
      display: flex;
      align-items: center;
      flex: 1;
      padding: 0 72px;
    }

    .breadcrumb-item {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-right: 16px;
      text-decoration: none;
    }

    .breadcrumb-active {
      color: #d84818;
      font-weight: 500;
    }

    .breadcrumb-inactive {
      color: #999999;
      font-weight: 500;
    }

    .contact-btn {
      background-color: #d84818;
      color: #ffffff;
      padding: 12px 52px 12px 52px;
      border-radius: 4px;
      font-size: 18px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* Hero section */
    .hero-section.swiper-container {
      width: 98%;
      max-width: 1680px;
      margin-left: auto;
      margin-right: auto;
      height: 498px;
      overflow: hidden;
    }

    .swiper-slide {
      background-size: cover;
      background-position: center;
    }

    .swiper-button-next,
    .swiper-button-prev {
      color: #d84818;
      /* Orange color for arrows */
    }

    .swiper-pagination-bullet-active {
      background: #d84818;
      /* Orange color for active pagination dot */
    }

    .hero-section .swiper-button-prev,
    .hero-section .swiper-button-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      background-color: #ffffff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      z-index: 10;
    }

    .hero-section .swiper-button-prev {
      left: 24px;
    }

    .hero-section .swiper-button-next {
      right: 24px;
    }

    .hero-section .swiper-button-prev:hover,
    .hero-section .swiper-button-next:hover {
      background-color: #d84818;
    }

    .hero-section .swiper-button-prev:hover img,
    .hero-section .swiper-button-next:hover img {
      filter: brightness(0) invert(1);
    }

    .hero-section .swiper-button-prev img {
      transform: rotate(180deg);
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
      display: none;
      /* Hide default ::after pseudo-element */
    }

    .hero-content {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 100%;
      padding: 84px;
    }

    .hero-text-section {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .hero-title {
      font-size: 72px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 700;
      line-height: 79px;
      color: #121535;
      width: 64%;
      margin-bottom: -2px;
    }

    .hero-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .hero-btn {
      background-color: #d84818;
      color: #ffffff;
      padding: 14px 44px 14px 24px;
      border-radius: 26px;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
    }

    .hero-image {
      width: 332px;
      height: 180px;
      margin-right: 524px;
    }

    .scroll-indicator {
      position: absolute;
      bottom: -14px;
      right: 50%;
      transform: translateX(50%);
      background-color: #ffffff;
      border-radius: 46px;
      padding: 4px;
    }

    .scroll-inner {
      background-color: #d84818;
      border-radius: 40px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .scroll-line {
      width: 2px;
      height: 32px;
      background-color: rgba(255, 255, 255, 0.5);
      margin-right: 10px;
    }

    /* Categories section */
    .categories-section {
      margin-top: 32px;
      width: 100%;
    }

    .categories-container {
      display: flex;
      width: 100%;
    }

    .category-sidebar {
      width: 6%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow-x: auto;
    }

    .categories-grid {
      display: flex;
      gap: 16px;
      width: 100%;
      max-width: 1680px;
      margin: 0 auto;
      padding: 0 16px;
    }

    .category-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 120px;
      flex-shrink: 0;
    }

     

     

    .category-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 0 14px;
    }

    .category-name {
      font-size: 16px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 700;
      color: #121535;
      text-align: center;
    }

    .category-count {
      font-size: 12px;
      color: #999999;
      text-align: center;
    }





    /* Featured cards section */
    .featured-cards {
      display: flex;
      gap: 24px;
      width: 100%;
      max-width: 1680px;
      margin: 26px auto 0;
    }

    .featured-card {
      width: 402px;
      height: 300px;
      border-radius: 24px;
      padding: 28px 20px;
      position: relative;
      overflow: hidden;
    }

    .featured-card.cooking {
      background-color: #f4f6e6;
      background-image: url('../assets/images/img_mask_group.png');
      background-size: cover;
    }

    .featured-card.tv {
      background-color: #daf2da;
      background-image: url('../assets/images/img_mask_group_light_green_50_01.png');
      background-size: cover;
    }

    .featured-card.curiosity {
      background-color: #f7e9e3;
      background-image: url('../assets/images/img_mask_group_light_green_50_01_300x402.png');
      background-size: cover;
    }

    .featured-card.furniture {
      background-color: #ebf3de;
      position: relative;
    }

    .featured-content {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 144px;
    }

    .featured-title {
      font-size: 24px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 700;
      color: #000000;
    }

    .featured-btn {
      background-color: #d84818;
      color: #ffffff;
      padding: 12px 40px 12px 24px;
      border-radius: 24px;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      box-shadow: 0px 2px 4px rgba(153, 153, 153, 0.2);
      width: fit-content;
    }

    .furniture-bg {
      position: absolute;
      top: 0;
      right: 0;
      width: 230px;
      height: 230px;
      background-color: #dae7c3;
      border-radius: 114px;
    }

    .furniture-image {
      position: absolute;
      top: 37px;
      right: 16px;
      width: 190px;
      height: 190px;
      background-image: url('../assets/images/img__4.png');
      background-size: cover;
    }

    /* Promotions section */
    .promotions-section {
      margin-top: 76px;
      width: 100%;
      max-width: 1680px;
      margin-left: auto;
      margin-right: auto;
    }

    .section-header {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      width: 98%;
      margin-bottom: 30px;
      margin-left: auto;
      margin-right: auto;
    }

    .section-title {
      font-size: 28px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 600;
      color: #191919;
    }

    .section-nav {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex: 1;
    }

    .view-all-text {
      font-size: 14px;
      font-weight: 500;
      color: #4d4d4d;
      margin-right: 16px;
    }

    .nav-arrows {
      display: flex;
      gap: 8px;
    }

    .nav-arrow {
      width: 40px;
      height: 40px;
    }

    .promotion-content {
      display: flex;
      width: 100%;
    }

    .promotion-main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 48%;
      background: linear-gradient(312deg, #fdf1e3 0%, #b2c9fd 100%);
      border-radius: 16px;
      padding: 8px 14px;
    }

    .promotion-image {
      width: 24%;
      border-radius: 10px;
      margin: 0 16px 10px 16px;
    }

    .promotion-details {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .promotion-title {
      font-size: 32px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 700;
      color: #121535;
    }

    .countdown-container {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-top: 8px;
    }

    .countdown-item {
      background-color: #ffffff;
      border-radius: 8px;
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 500;
      color: #191919;
    }

    .countdown-separator {
      font-size: 18px;
      font-weight: 500;
      color: #191919;
      margin-bottom: 6px;
    }

    .promotion-btn {
      background-color: #d84818;
      color: #ffffff;
      padding: 12px 40px 12px 24px;
      border-radius: 24px;
      font-size: 16px;
      font-weight: 500;
      margin-top: 24px;
      box-shadow: 0px 2px 4px rgba(153, 153, 153, 0.2);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .promotion-secondary {
      display: flex;
      width: 52%;
      margin-left: -346px;
      background: linear-gradient(129deg, #ffffff 0%, #e8f9cc 50%, #e2f7d2 100%);
      border-radius: 16px;
      background-image: url('../assets/images/img_pattern.svg');
      background-size: cover;
    }

    /* Products grid */
    .products-section {
      margin-top: 54px;
      width: 100%;
      max-width: 1680px;
      margin-left: auto;
      margin-right: auto;
    }

    .products-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 24px;
      width: 98%;
      margin-left: auto;
      margin-right: auto;

    }

    .product-card-link {
      text-decoration: none;
      color: inherit;
      display: block;
      height: 100%;
      cursor: pointer;
    }

    .product-card-link:hover {
      text-decoration: none;
      color: inherit;
    }

    .product-card {
      background-color: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 16px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      height: 100%;
      position: relative;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .product-card-link:hover .product-card {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .product-image-container {
      position: relative;
      width: 100%;
      height: 220px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .product-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
    }

    .discount-badge {
      position: absolute;
      top: 8px;
      left: 8px;
      background-color: #dc2626;
      color: #fef2f2;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      padding: 6px;
      border-radius: 12px;
    }

    .wishlist-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      background-color: #ffffff;
      border-radius: 16px;
      padding: 4px;
      width: 32px;
      height: 32px;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .wishlist-btn.wishlist-active {
      background-color: #dc2626;
    }

    .wishlist-btn.wishlist-active img {
      filter: brightness(0) invert(1);
    }

    .product-info {
      display: flex;
      flex-direction: column;
      gap: 22px;
      padding: 0 8px 8px;
    }

    .product-details {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .product-name {
      font-size: 18px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 600;
      color: #121535;
      line-height: 21px;
    }

    .product-price-container {

      justify-content: center;
      align-items: center;
      width: 100%;
    }

    .product-price {
      font-size: 16px;
      font-weight: 600;
      color: #121535;
    }

    .product-unit {
      font-size: 16px;
      font-weight: 400;
      color: #999999;
    }

    .product-old-price {
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      text-decoration: line-through;

    }

    .rating {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      min-height: 24px;
    }

    .product-rating {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .rating > img {
      position: absolute;
      right: 16px;
      bottom: 16px;
    }

    .rating-score {
      font-size: 12px;
      font-weight: 500;
      color: #7f7f7f;
    }

    .rating-count {
      font-size: 12px;
      font-weight: 500;
      color: #7f7f7f;
    }

    .add-to-cart-btn {
      background-color: #faf6f2;
      color: #d84818;
      border-radius: 20px;
      padding: 8px 50px 8px 34px;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      width: 100%;
      justify-content: center;
    }

    .add-to-cart-btn.primary {
      background-color: #d84818;
      color: #ffffff;
      box-shadow: 0px 2px 4px rgba(153, 153, 153, 0.2);
    }

    /* Category showcase */
    .category-showcase {
      margin-top: 42px;
      width: 100%;
      max-width: 1680px;
      margin-left: auto;
      margin-right: auto;
    }

    .showcase-grid {
      display: flex;
      gap: 24px;
      margin-top: 24px;
    }

    .showcase-card {
      width: 402px;
      height: 318px;
      border-radius: 16px;
      padding: 24px;
      position: relative;
      overflow: hidden;
    }

    .showcase-card.food {
      background-color: #f7f2e3;
      background-image: url('../assets/images/img_rectangle_2.svg');
    }

    .showcase-card.phones {
      background-image: url('../assets/images/img_group_40.svg');
      background-size: cover;
    }

    .showcase-card.appliances {
      background-image: url('../assets/images/img_group_40_purple_50_01.svg');
      background-size: cover;
    }

    .showcase-card.fashion {
      background-image: url('../assets/images/img_group_40_deep_orange_50_01.svg');
      background-size: cover;
    }

    .showcase-content {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .showcase-icon {
      width: 80px;
      height: 80px;
      margin-bottom: 14px;
    }

    .showcase-title {
      font-size: 24px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 600;
      color: #000000;
      text-align: center;
      margin-bottom: 14px;
    }

    .showcase-discount {
      background-color: #fb6a00;
      color: #ffffff;
      font-size: 12px;
      font-weight: 400;
      padding: 4px 16px;
      border-radius: 12px;
      text-align: center;
      margin-bottom: 40px;
      width: fit-content;
      align-self: center;
    }

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

    .showcase-product-icon {
      background-color: #ffffff;
      border-radius: 32px;
      padding: 12px 10px;
      width: 64px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* New arrivals slider */
    .new-arrivals {
      margin-top: 46px;
      width: 100%;
    }

    .slider-container {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding: 0 80px;
      scroll-behavior: smooth;
    }

    .slider-item {
      flex-shrink: 0;
      width: 282px;
      background-color: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 16px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .slider-image-container {
      position: relative;
      width: 100%;
    }

    .slider-image {
      width: 266px;
      height: 266px;
      border-radius: 16px;
    }

    .slider-content {
      padding: 0 14px 6px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .slider-rating {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .slider-title {
      font-size: 18px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 600;
      color: #191919;
      line-height: 21px;
    }

    .slider-price-container {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
    }

    .slider-old-price {
      font-size: 15px;
      font-weight: 600;
      color: #999999;
      text-decoration: line-through;
    }

    .slider-new-price {
      font-size: 15px;
      font-weight: 600;
      color: #121535;
    }

    .slider-unit {
      font-size: 12px;
      font-weight: 400;
      color: #999999;
    }

    .slider-add-btn {
      background-color: #d84818;
      color: #ffffff;
      border-radius: 20px;
      padding: 8px 34px 8px 18px;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      width: fit-content;
    }

    /* Recommendations section */
    .recommendations {
      margin-top: 70px;
      width: 100%;
    }

    .recommendations-container {
      display: flex;
      width: 98%;
      margin-left: auto;
      margin-right: auto
    }

    .recommendations-image {
      width: 30%;
      position: relative;
    }

    .recommendations-content {
      width: 70%;
      background-color: #ffffff;
      border-radius: 16px;
      margin-left: 30px;
    }

    .recommendations-content .products-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      width: 100%;
      margin: 0;
      padding: 20px;
    }

    .recommendations-header {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      width: 100%;
      margin-bottom: 12px;
    }

    .recommendations-title {
      font-size: 32px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 600;
      color: #191919;
    }

    .recommendations-nav {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex: 1;
      margin-top: 6px;
    }

   
    .recommendations-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 16px;
      margin-bottom: 16px;
    }

   .recommendation-card {
      background-color: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

      .recommendation-image {
      width: 100%;
      height: auto;
      max-width: 194px;
      object-fit: cover;
    }

    .recommendation-discount {
      background-color: #eafadd;
      color: #29a060;
      font-size: 14px;
      font-weight: 500;
      padding: 6px;
      border-radius: 4px;
      width: fit-content;
    }

    .recommendation-name {
      font-size: 16px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 600;
      color: #121535;
      line-height: 19px;
      margin-top: 16px;
    }

    .recommendation-rating {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-top: 6px;
    }

    .recommendation-price-container {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }

    /* Partners section */
    .partners-section {
      margin-top: 70px;
       
    }

    .partners-container {
      width: 100%;
      max-width: 1680px;
      margin: 0 auto;
      background-color: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 16px;
      padding: 20px 0px;
    }

    .partners-header {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      width: 100%;
      margin-bottom: 14px;
    }

    .partners-grid {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
    }

    .partner-logo {
      width: 10%;
      border-radius: 8px;
      margin-right: 52px;
    }

    .partner-logo:first-child {
      margin-right: 0;
    }

    .features-section {
      display: flex;
      gap: 34px;
      justify-content: center;
      align-items: center;
      width: 98%;
      margin: 50px auto 0;
    }

    .feature-card {
      background-color: rgba(216, 72, 24, 0.1);
      border-radius: 16px;
      padding: 32px;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .feature-icon {
      width: 56px;
      height: 56px;
    }

    .feature-text {
      font-size: 24px;
      font-family: 'Exo', sans-serif;
      font-weight: 600;
      color: #121535;
      line-height: 28px;
    }

    /* Footer */
    .footer {
      margin-top: 70px;
      padding: 40px 0;
    }

    .footer-content {
      /* display: flex; */
      justify-content: flex-start;
      align-items: center;
      width: 100%;
    }

    .footer-brand {
      width: 24%;
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    .footer-logo {
      display: flex;
      align-items: center;
    }

    .footer-logo-icon {
      width: 24%;
    }

    .footer-logo-text {
      font-size: 40px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 700;
      color: #1c4515;
      margin-left: 8px;
    }

    .footer-description {
      font-size: 16px;
      color: #666666;
      line-height: 22px;
      width: 78%;
    }

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

    .footer-contact-item {
      display: flex;
      align-items: center;
    }

    .footer-contact-icon {
      background-color: #121535;
      border-radius: 16px;
      padding: 8px;
      width: 32px;
      height: 32px;
      margin-right: 16px;
    }

    .footer-contact-text {
      font-size: 16px;
      color: #191919;
    }

    .footer-links {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex: 1;
      padding: 0 22px;
    }

    .footer-column {
      /* width: 18%; */
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    /* Product Detail Page Styles */
    .breadcrumb-detail {
      background-color: #faf3f2;
      padding: 16px 0;
    }

    .breadcrumb-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
    }

    .breadcrumb-title {
      font-family: 'Quicksand', sans-serif;
      font-size: 24px;
      font-weight: 600;
      color: #191c1e;
    }

    .breadcrumb-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
    }

    .breadcrumb-link {
      color: #d84818;
      text-decoration: none;
    }

    .breadcrumb-separator {
      color: #999999;
    }

    .product-section-detail {
      padding: 44px 0;
    }

    .product-container-detail {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    @media (min-width: 1024px) {
      .product-container-detail {
        flex-direction: row;
        gap: 60px;
      }
    }

    .product-images-detail {
      flex: 1;
      max-width: 100%;
    }

    @media (min-width: 1024px) {
      .product-images-detail {
        max-width: 40%;
      }
    }

    .main-image-container-detail {
      border: 1px solid #e6e6e6;
      border-radius: 16px;
      padding: 22px;
      background-color: #ffffff;
      margin-bottom: 24px;
    }

    .main-image-detail {
      width: 100%;
      max-width: 500px;
      height: auto;
      margin: 0 auto;
      display: block;
    }

    .thumbnail-gallery-detail {
      display: flex;
      gap: 24px;
      overflow-x: auto;
      padding: 0 10px;
    }

    .thumbnail-detail {
      flex-shrink: 0;
      width: 84px;
      height: 84px;
      border: 1px solid #e6e6e6;
      border-radius: 16px;
      padding: 14px;
      background-color: #ffffff;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .thumbnail-detail:hover,
    .thumbnail-detail.active {
      border-color: #d84818;
    }

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

    .product-info-detail {
      flex: 1;
    }

    .product-title-detail {
      font-family: 'Quicksand', sans-serif;
      font-size: 28px;
      font-weight: 600;
      color: #191c1e;
      margin-bottom: 24px;
    }

    @media (min-width: 768px) {
      .product-title-detail {
        font-size: 36px;
        margin-bottom: 44px;
      }
    }

    .product-details-detail {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    @media (min-width: 1024px) {
      .product-details-detail {
        flex-direction: row;
        gap: 40px;
      }
    }

    .main-details-detail {
      flex: 1;
    }

    .rating-section-detail {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 30px;
    }

    .stars-detail {
      display: flex;
      gap: 2px;
    }

    .star-detail {
      width: 16px;
      height: 16px;
      background-color: #e6e6e6;
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    }

    .star-detail.filled {
      background-color: #ffc107;
    }

    .rating-text-detail {
      font-size: 14px;
      font-weight: 500;
      color: #191c1e;
    }

    .rating-count-detail {
      font-size: 14px;
      color: #666666;
    }

    .divider-detail {
      width: 100%;
      height: 1px;
      background-color: #e6e6e6;
      margin: 32px 0;
    }

    .product-description-detail {
      font-size: 14px;
      line-height: 1.7;
      color: #4d4d4d;
      margin-bottom: 32px;
    }

    @media (min-width: 768px) {
      .product-description-detail {
        font-size: 16px;
      }
    }

    .price-section-detail {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32px;
      flex-wrap: wrap;
      gap: 16px;
    }

    .price-container-detail {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .current-price-detail {
      font-family: 'Quicksand', sans-serif;
      font-size: 24px;
      font-weight: 600;
      color: #191c1e;
    }

    .original-price-detail {
      font-size: 16px;
      color: #7f7f7f;
      text-decoration: line-through;
    }

    .quantity-section-detail {
      margin-bottom: 44px;
    }

    .quantity-label-detail {
      font-size: 16px;
      color: #191919;
      margin-bottom: 10px;
      display: block;
    }

    .quantity-controls-detail {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }

    .quantity-input-detail {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #cccccc;
      border-radius: 26px;
      padding: 14px;
      background-color: #ffffff;
    }

    .quantity-btn-detail {
      width: 20px;
      height: 20px;
      background: none;
      border: none;
      cursor: pointer;
    }

    .quantity-value-detail {
      font-size: 16px;
      font-weight: 500;
      color: #4d4d4d;
      min-width: 20px;
      text-align: center;
    }

    .add-to-cart-btn-detail {
      background-color: #d84818;
      color: #ffffff;
      padding: 14px 34px;
      border-radius: 26px;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .add-to-cart-btn-detail:hover {
      background-color: #c43d15;
      transform: translateY(-2px);
    }

    .action-buttons-detail {
      display: flex;
      gap: 8px;
    }

    .icon-button-detail {
      width: 52px;
      height: 52px;
      border-radius: 26px;
      background-color: #f3faf2;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .icon-button-detail:hover {
      background-color: #d84818;
    }

    .features-sidebar-detail {
      width: 100%;
      max-width: 402px;
    }

    @media (min-width: 1024px) {
      .features-sidebar-detail {
        width: 42%;
      }
    }

    .feature-list-detail {
      border: 1px solid #e6e6e6;
      border-radius: 16px;
      overflow: hidden;
    }

    .feature-item-detail {
      display: flex;
      align-items: center;
      gap: 24px;
      padding: 24px;
      background-color: #faf3f2;
      border-bottom: 2px solid transparent;
    }

    .feature-item-detail:not(:last-child) {
      border-bottom-color: #ffffff;
    }

    .feature-icon-detail {
      width: 44px;
      height: 44px;
      border-radius: 22px;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .feature-content-detail h3 {
      font-size: 14px;
      font-weight: 500;
      color: #121535;
      margin-bottom: 2px;
    }

    .feature-content-detail p {
      font-size: 14px;
      color: #4d4d4d;
      line-height: 1.4;
      margin: 0;
    }

    /* Responsive */
    @media (max-width: 639px) {
      .breadcrumb-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }

      .product-details-detail {
        gap: 24px;
      }

      .price-section-detail {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }

      .quantity-controls-detail {
        flex-direction: column;
        align-items: stretch;
      }

      .add-to-cart-btn-detail {
        width: 100%;
        justify-content: center;
      }
    }

    .footer-column-title {
      font-size: 24px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 600;
      color: #191919;
    }

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

    .footer-link {
      font-size: 16px;
      color: #666666;
      text-decoration: none;
      line-height: 20px;
    }

    .footer-link.active {
      color: #d84818;
    }

    .footer-download {
      width: 22%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .footer-download-title {
      font-size: 24px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 600;
      color: #191919;
    }

    .footer-download-text {
      font-size: 16px;
      color: #666666;
      margin-top: 16px;
    }

    .footer-app-links {
      display: flex;
      gap: 8px;
      margin-top: 24px;
    }

    .footer-app-link {
      width: 48%;
    }

    .footer-social {
      display: flex;
      align-items: center;
      margin-top: 32px;
    }

    .footer-social-icon {
      background-color: #f3faf2;
      border-radius: 22px;
      padding: 12px;
      width: 44px;
      height: 44px;
      margin-right: 16px;
    }

    /* Bottom footer */
    .bottom-footer {
      background-color: rgba(216, 72, 24, 0.1);
      padding: 22px 20px;
      overflow-x: auto;
    }

    .bottom-footer-content {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin: 0 auto;
    }

    .copyright {
      font-size: 14px;
      color: #666666;
    }

    .payment-section {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex: 1;
    }

    .payment-text {
      font-size: 14px;
      color: #121535;
      margin-right: 16px;
    }

    .payment-methods {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .payment-icon {
      width: 44px;
      height: 30px;
    }
    .ad-banner-section{
      height: 50vh;
      width: 98%;
      margin: 0 auto
    }

    .secure-payment {
      background-color: #191919;
      border: 1px solid #ffffff;
      border-radius: 4px;
      padding: 4px 8px;
      width: 64px;
      height: 32px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .secure-text-top {
      font-size: 11px;
      color: #ffffff;
      position: absolute;
      top: 2px;
    }

    .secure-text-bottom {
      font-size: 12px;
      font-weight: 600;
      color: #ffffff;
      position: absolute;
      bottom: 2px;
    }

    .newsletter-section {
      background-color: #121535;
      padding: 28px;
      margin-top: 80px;
    }
    
    .newsletter-content {
      display: flex;
      align-items: center;
      gap: 22px;
      padding: 0 54px;
    }
    
    .newsletter-icon {
      width: 64px;
      height: 64px;
      flex-shrink: 0;
    }
    
    .newsletter-text {
      flex: 1;
    }
    
    .newsletter-title {
      font-size: 32px;
      font-family: Exo, sans-serif;
      font-weight: 600;
      color: white;
      line-height: 43px;
      margin-bottom: 8px;
    }
    
    .newsletter-subtitle {
      font-size: 16px;
      color: white;
      line-height: 20px;
    }
    
    .newsletter-form {
      display: flex;
      gap: 16px;
      align-items: center;
    }
    
    .newsletter-input {
      padding: 14px;
      border-radius: 8px;
      background-color: white;
      color: #121535;
      font-size: 16px;
      width: 300px;
    }
    
    .newsletter-button {
      background-color: #fb6a00;
      color: white;
      padding: 12px 24px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
    }

    /* Responsive media queries */
    @media (max-width: 639px) {
      .flex-row {
        flex-direction: column;
      }

      .container {
        padding: 0 8px;
      }

      .top-header-content {
        width: 95%;
        flex-direction: column;
        gap: 16px;
      }

      .top-nav-left,
      .top-nav-right {
        flex-wrap: wrap;
        justify-content: center;
      }

      .header-content {
        flex-direction: column;
        padding: 0 16px;
        gap: 16px;
      }

      .search-section {
        width: 100%;
        flex-direction: column;
        gap: 8px;
      }

      .user-actions {
        width: 100%;
        justify-content: center;
      }

      .filter-section,
      .breadcrumb-section {
        width: 100%;
      }

      .hero-title {
        font-size: 36px;
        line-height: 42px;
        width: 100%;
      }

      .hero-content {
        padding: 24px 16px;
      }

      .hero-bottom {
        flex-direction: column;
        gap: 16px;
      }

      .categories-grid {
        flex-direction: column;
        gap: 8px;
      }

      .category-card {
        width: 100%;
      }

      .featured-cards {
        flex-direction: column;
        gap: 16px;
      }

      .featured-card {
        width: 100%;
      }

      .products-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        flex-wrap: wrap;
      }

      .showcase-grid {
        flex-direction: column;
        gap: 16px;
      }

      .showcase-card {
        width: 100%;
      }

      .slider-container {
        padding: 0 16px;
      }

      .recommendations {
        padding: 0 16px;
      }

      .recommendations-container {
        flex-direction: column;
      }

      .recommendations-image,
      .recommendations-content {
        width: 100%;
      }

      .recommendations-grid {
        flex-direction: column;
      }

      .partners-section {
        padding: 0 16px;
      }

      .partners-grid {
        flex-wrap: wrap;
        gap: 16px;
      }

      .partner-logo {
        width: 45%;
        margin-right: 0;
      }

      .features-section {
        flex-direction: column;
        gap: 16px;
      }

      .footer {
        padding: 0 16px;
      }

      .footer-content {
        flex-direction: column;
        gap: 32px;
      }

      .footer-brand,
      .footer-column,
      .footer-download {
        width: 100%;
      }

      .footer-links {
        flex-direction: column;
        gap: 24px;
        padding: 0;
      }

      .bottom-footer-content {
        flex-direction: column;
        gap: 16px;
      }

      .payment-section {
        justify-content: center;
      }

      .payment-methods {
        flex-wrap: wrap;
      }
    }

    @media (min-width: 640px) {
      .hero-title {
        font-size: 48px;
        line-height: 54px;
      }

      .products-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .categories-grid {
        flex-direction: row;
      }
    }

    @media (min-width: 768px) {
      .hero-title {
        font-size: 58px;
        line-height: 64px;
      }

      .products-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .container {
        padding: 0 24px;
      }
    }

    @media (min-width: 1024px) {
      .hero-title {
        font-size: 72px;
        line-height: 79px;
      }

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

      .container {
        padding: 0 32px;
      }
    }

    @media (min-width: 1280px) {
      .container {
        padding: 0 56px;
      }
    }

    /* Interactive states */
    button:hover,
    .hero-btn:hover,
    .featured-btn:hover,
    .promotion-btn:hover,
    .add-to-cart-btn:hover,
    .slider-add-btn:hover {
      transform: scale(1.05);
      transition: all 0.3s ease-in-out;
    }

    button:active,
    .hero-btn:active,
    .featured-btn:active,
    .promotion-btn:active,
    .add-to-cart-btn:active,
    .slider-add-btn:active {
      transform: scale(0.95);
    }

    .product-card:hover,
    .slider-item:hover,
    .recommendation-card:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition: box-shadow 0.3s ease-in-out;
    }

    .category-card:hover {
      transform: translateY(-4px);
      transition: transform 0.3s ease-in-out;
    }

    .footer-link:hover {
      color: #d84818;
      transition: color 0.3s ease-in-out;
    }

    .voir-plus {
      color: white;
      background: #d84818;
      padding: 5px 10px;
    }

    .wishlist-btn:hover,
    .nav-arrow:hover,
    .footer-social-icon:hover {
      background-color: #f3f4f6;
      transition: background-color 0.3s ease-in-out;
    }

     /* Breadcrumb */
    .breadcrumb {
      background-color: #faf3f2;
      padding: 16px 0;
      margin-top: 40px;
    }

    .breadcrumb-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
    }

    .breadcrumb-title {
      font-family: 'Quicksand', sans-serif;
      font-size: 20px;
      font-weight: 600;
      color: #191c1e;
    }

    @media (min-width: 768px) {
      .breadcrumb-title {
        font-size: 24px;
      }
    }

    .breadcrumb-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
    }

    .breadcrumb-link {
      color: #d84818;
      text-decoration: none;
    }

    .breadcrumb-separator {
      color: #999999;
    }

.logo-section {
    text-decoration: none;
}
.search-input {
    background-color: white;
}
.search-container {
    background-color: white;
}
.search-input {
    background-color: transparent;
}