html {
   scroll-behavior: smooth;
 }

 body {
   font-family: "Afacad", sans-serif;
   font-optical-sizing: auto;
   font-size: 16px;
 }

 @keyframes marquee {
   0% {
     transform: translateX(0%);
   }

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

 .animate-marquee {
   display: inline-block;
   white-space: nowrap;
   animation: marquee 25s linear infinite;
 }

 @media screen and (min-width: 1024px) {
   .swiper {
     margin: 20px 40px 0 40px !important;
   }
 }

 @media screen and (max-width: 640px) {
   .swiper-button-next::after, .swiper-button-prev::after {
     font-size: 25px !important;
     /* color: white !important; */
     /* arrow icon size */
   }
   .swiper-button-next, .swiper-button-prev {
    width: 30px !important;
    height: 30px !important;
   }
   .swiper-button-prev{
    left: 0 !important;
   }
   .swiper-button-next{
    right: 0 !important;
   }
 }

 .megaDropdown {
   float: left;
   overflow: hidden;
 }

 .megaDropdown .dropbtn {
   font-size: 16px;
   border: none;
   outline: none;
   color: white;
   padding: 14px 16px;
   background-color: inherit;
   font: inherit;
   margin: 0;
 }

 .dropdown-content {
   display: none;
   position: absolute;
   background-color: #fff;
   width: 60%;
   left: 200px;
   top: 44px;
   box-shadow: 0px 15px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
   padding: 4px;
 }

 .dropdown-content .header {
   background: red;
   padding: 16px;
   color: white;
 }

 .megaDropdown:hover .dropdown-content {
   display: block;
 }

 /* Create three equal columns that floats next to each other */
 .column {
   float: left;
   width: 25%;
   padding: 16px;
   background-color: #fff;
   min-height: 180px;
 }

 .column li h3 {
   font-size: 20px;
   color: black;
   padding: 10px 0 2px 4px;
 }

 .column li a {
   float: none;
   padding-left: 4px;
   color: black;
   padding-top: 2px;
   padding-bottom: 2px;
   text-decoration: none;
   display: block;
   text-align: left;
   border-radius: 4px;
 }

 .column a:hover {
   background-color: #ddd;
 }

 @media screen and (max-width: 760px) {
   .column {
     width: 50%;
     height: auto;
   }
 }

 /* Clear floats after the columns */
 .row:after {
   content: "";
   display: table;
   clear: both;
 }

 .gender-options {
   display: flex;
   gap: 0.6rem;
 }

 .gender-option {
   flex: 1;
 }

 .gender-label {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 0.75rem;
   border: 1px solid #e5e7eb;
   border-radius: 0.5rem;
   cursor: pointer;
   transition: all 0.2s ease;
   text-align: center;
 }

 .gender-label:hover {
   background-color: #f9fafb;
   border-color: #d1d5db;
 }

 .gender-icon {
   width: 3rem;
   height: 3rem;
   margin-bottom: 0.5rem;
   color: #6b7280;
 }

 .gender-text {
   font-size: 0.875rem;
   color: #374151;
 }

 input[type="radio"]:checked+.gender-label {
   border-color: #4f46e5;
   background-color: #f5f3ff;
 }

 input[type="radio"]:checked+.gender-label .gender-icon {
   color: #4f46e5;
 }

 input[type="radio"]:checked+.gender-label .gender-text {
   color: #4f46e5;
   font-weight: 500;
 }

 .sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border-width: 0;
 }

 .filter-form {
   --primary-color: #4f46e5;
   --primary-hover: #4338ca;
   --text-color: #374151;
   --light-text: #6b7280;
   --border-color: #e5e7eb;
   --bg-color: #ffffff;
   --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
     0 2px 4px -1px rgba(0, 0, 0, 0.06);
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* Desktop Sidebar */
 .filter-sidebar {
   width: 280px;
   background: var(--bg-color);
   border-radius: 12px;
   box-shadow: var(--shadow);
   padding: 1.5rem;
   position: sticky;
   top: 1rem;
   height: 100vh;
   overflow-y: auto;
 }

 .filter-section {
   border-bottom: 1px solid var(--border-color);
   padding: 1rem 0;
 }

 .filter-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
 }

 .filter-header h3 {
   font-weight: 500;
   color: var(--text-color);
   font-size: 1rem;
   margin: 0;
 }

 .toggle-icon {
   width: 1.25rem;
   height: 1.25rem;
   transition: var(--transition);
 }

 .filter-content {
   padding-top: 1rem;
   display: none;
 }

 .filter-section.active .filter-content {
   display: block;
 }

 .filter-section.active .toggle-icon {
   transform: rotate(180deg);
 }

 /* Price Range */
 .price-inputs {
   display: flex;
   gap: 0.5rem;
   margin-bottom: 1.5rem;
 }

 .price-input {
   flex: 1;
 }

 .price-input label {
   display: block;
   font-size: 0.9rem;
   color: var(--light-text);
   margin-bottom: 0.25rem;
 }

 .price-input-field {
   position: relative;
   display: flex;
   align-items: center;
 }

 .price-input-field span {
   position: absolute;
   left: 0.75rem;
   color: var(--light-text);
   pointer-events: none;
 }

 .product-options {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   max-height: 150px;
   /* initially show limited height */
   overflow: hidden;
   transition: max-height 0.3s ease;
   padding-top: 1rem;
 }

 .see-more-toggle {
   background: none;
   border: none;
   color: var(--primary-color);
   font-size: 0.75rem;
   cursor: pointer;
   margin-top: 0.5rem;
   padding: 0;
 }

 .product-category-section.expanded .product-options {
   max-height: 1000px;
   /* show all items when expanded */
 }

 .product-category-section .size-option label {
   font-size: 0.8rem;
   padding: 0.3rem 0.5rem;
 }

 .price-input-field input {
   width: 100%;
   padding: 0.5rem 0.75rem 0.5rem 1.75rem;
   border: 1px solid var(--border-color);
   border-radius: 6px;
   font-size: 0.8rem;
 }

 .price-divider {
   width: 1rem;
   display: flex;
   align-items: flex-end;
   padding-bottom: 1.25rem;
   justify-content: center;
 }

 /* Color Swatches */
 .color-options {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
 }

 .color-option {
   position: relative;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   cursor: pointer;
 }

 .color-option input {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
 }

 .color-option label {
   position: absolute;
   inset: 0;
   border-radius: 50%;
   cursor: pointer;
 }

 .color-option input:checked+label::after {
   content: "";
   position: absolute;
   top: -4px;
   left: -4px;
   right: -4px;
   bottom: -4px;
   border: 2px solid var(--primary-color);
   border-radius: 50%;
 }

 /* Category Icons */
 .category-options {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }

 .category-option input {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
 }

 .category-option label {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   padding: 0.5rem;
   border-radius: 6px;
   cursor: pointer;
   transition: var(--transition);
 }

 .category-option label:hover {
   background: #f9fafb;
 }

 .category-option svg {
   width: 1.25rem;
   height: 1.25rem;
   color: var(--light-text);
 }

 .category-option input:checked+label {
   background: #f5f3ff;
 }

 .category-option input:checked+label svg {
   color: var(--primary-color);
 }

 /* Size Chips */
 .size-options {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
 }

 .size-option input {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
 }

 .size-option label {
   display: inline-block;
   padding: 0.5rem 1rem;
   border: 1px solid var(--border-color);
   border-radius: 9999px;
   font-size: 0.7rem;
   cursor: pointer;
   transition: var(--transition);
 }

 .size-option input:checked+label {
   background: var(--primary-color);
   color: white;
   border-color: var(--primary-color);
 }

 /* Filter Actions */
 .filter-actions {
   display: flex;
   gap: 1rem;
   padding-top: 1rem;
 }

 .filter-actions button {
   flex: 1;
   padding: 0.5rem;
   border-radius: 16px;
   font-weight: 300;
   cursor: pointer;
   transition: var(--transition);
 }

 .filter-reset {
   background: white;
   padding: 0;
   border: 1px solid var(--border-color);
   color: var(--text-color);
   font-size: 0.9rem;
 }

 .filter-reset:hover {
   background: #c7c7c7;
 }

 .filter-apply {
   background: var(--primary-color) !important;
   border: 1px solid var(--primary-color);
   color: white;
   font-size: 0.9rem;
 }

 .filter-apply:hover {
   background: var(--primary-hover);
   border-color: var(--primary-hover);
 }

 /* Mobile Overlay */
 .mobile-filter-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 50;
   display: none;
   align-items: center;
   justify-content: center;
 }

 .mobile-filter-container {
   background: white;
   width: 90%;
   max-width: 400px;
   max-height: 90vh;
   border-radius: 12px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 }

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

 .mobile-filter-header h3 {
   font-weight: 600;
   margin: 0;
   font-size: 0.8rem;
 }

 .mobile-filter-close {
   background: none;
   border: none;
   cursor: pointer;
   padding: 0.5rem;
 }

 .mobile-filter-close svg {
   width: 1.5rem;
   height: 1.5rem;
   color: var(--light-text);
 }

 .mobile-filter-content {
   flex: 1;
   overflow-y: auto;
   padding: 0 1.5rem;
 }

 .mobile-filter-actions {
   display: flex;
   gap: 1rem;
   padding: 1rem 1.5rem;
   border-top: 1px solid var(--border-color);
   background: #f9fafb;
 }

 @media (max-width: 1023px) {
   .filter-sidebar {
     position: fixed;
     z-index: 20;
     top: 100px;
   }
 }

 @media (max-width: 640px) {
   .filter-sidebar {
     width: 100%;
     position: fixed;
     left: 0;
     height: 90vh;
     overflow-y: scroll;
     padding-top: 0;
     z-index: 50;
   }
 }
.category-card {
      height: 300px;
      cursor: pointer;
      position: relative;
    }

    .category-img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }

    .category-card:hover .category-img {
      transform: scale(1.1);
    }

    .category-label {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      padding: 8px 20px;
      border-radius: 6px;
      transition: all 0.4s ease;
    }

    .category-label h5 {
      margin: 0;
      font-weight: 600;
      font-size: 16px;
      text-wrap: nowrap;
      transition: all 0.4s ease;
    }

    /* Hover Animation Effect */
    .category-card:hover .category-label {
      padding: 16px 40px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      transform: translateX(-50%) translateY(-5px);
    }

    .category-card:hover .category-label h5 {
      font-size: 18px;
      /* letter-spacing: 1px; */
    }

    /* testimonials */

    .testi-title {
      color: #2b572b;
      font-family: "Poltawski Nowy", serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
      font-size: 40px;
    }

    .testi-slider {
      width: 100%;
      overflow: hidden;
    }

    .testi-slide-row {
      display: flex;
      width: 400%;
      /* 4 slides */
      transition: 0.5s ease-in-out;
    }

    .testi-slide-col {
      position: relative;
      flex: 0 0 100%;
      max-width: 100%;
      height: 400px;
      display: flex;
      align-items: center;
      /* justify-content: space-between; */
      margin-left: 45px;
    }

    .testi-hero {
      height: 100%;
      flex-shrink: 0;
    }

    .testi-hero img {
      height: 100%;
      width: 320px;
      border-radius: 10px;
      object-fit: cover;
      pointer-events: none;
      user-select: none;
    }

    .testi-content {
      max-width: 700px;
      color: #4d4352;
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(4.5px);
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    }

    .testi-content p {
      font-size: 1.1rem;
      line-height: 1.5;
    }

    .testi-content h3 {
      font-size: 1.4rem;
      margin-top: 1rem;
      font-weight: 600;
    }

    .testi-indicator {
      display: flex;
      justify-content: center;
      margin-top: 2rem;
    }

    .testi-indicator .testi-btn {
      display: inline-block;
      height: 12px;
      width: 12px;
      margin: 4px;
      border-radius: 50%;
      background: #623627;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
    }

    .testi-btn.active {
      width: 30px;
      border-radius: 15px;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .testi-slide-row{
          width: auto;
      }
      .testi-slide-col {
        flex-direction: column-reverse;
        text-align: center;
        height: auto;
        gap: 16px;
        margin-left: 0px;
      }
      
      .testi-hero{
          height: auto;
      }

      .testi-hero img {
        width: 200px;
        height: auto;
        margin-top: 1rem;
      }

      .testi-content {
        width: 100%;
        padding: 1.5rem;
      }
    }

    /* newsticker */
    .ur-ticker-area {
      position: relative;
      height: 70px;
    }

    .ur-ticker-wrapper {
      white-space: nowrap;
      overflow: hidden;
      background-color: #9ECD68;
    }

    .ur-ticker {
      display: inline-block;
      padding-left: 100%;
      animation: ticker 30s linear infinite;
    }

    .ur-ticker-wrapper:hover .ur-ticker {
      animation-play-state: paused;
      /* ✅ Pause on hover */
    }

    @keyframes ticker {
      0% {
        transform: translateX(0%);
      }

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

    .ur-ticker span {
      display: inline-block;
      margin-right: 3rem;
      font-size: 1.1rem;
    }