.collection-filter.active .item span {
    font-weight: 700;
   
    color: #1cdbab; /* red accent that matches button theme */
}

.collection-filter .item span {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.collection-filter:hover .item span {
    opacity: 1.5;
    color: #1cdbab;

}
/* Base styling for all variant buttons */
.variant-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    margin: 4px;
    border: 2px solid #d8d8e2;
    border-radius: 6px;
    background: #ffffff;
    color: #3b3486;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
}

/* Hover */
.variant-btn:hover {
    border-color: #4a3aff;
}

/* Active state applied by JS setActive() */
.variant-btn.active {
    background: #4a3aff;
    border-color: #4a3aff;
    color: white;
}


.input-error {
    border-color: #ff4d4d !important;
    transition: border-color 0.5s ease;
}

.label-error {
    color: #ff4d4d !important;
    transition: color 0.5s ease;
}

.error-msg {
    font-size: 13px;
    color: #ff4d4d;
    margin-top: 4px;
    display: none;
}


.collection-filter.active,
.design-filter.active {
    color: #1cdbab !important;
    font-weight: bold;
    background-color: rgba(28, 219, 171, 0.12);
    border-radius: 4px;
    padding: 2px 4px;
}


 .hover-green-btn:hover {
        background-color: #1cdbab !important; /* bright green */
        color: #000 !important;               /* optional: make text black for contrast */
        border-color: #1cdbab !important;
    }



    /* Wrapper for main image and thumbnails */
.product-images-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

/* Main Image Styling */
.main-image-container img.main-image {
    width: 100%;
    height: auto;
    max-width: 600px; /* Optional max-width to limit size */
}

/* Thumbnail Image Styling */
.thumbs-wrapper img.thumbnail {
    width: 150px; /* Example size for thumbnails */
    height: 180px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border 0.3s ease;
}

.thumbs-wrapper img.thumbnail:hover {
    border: 2px solid #00b5e2; /* Highlight border on hover */
}


.thumb-item {
    width: 100%;
    padding: 5px;
    cursor: pointer;
}

.thumb-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border: 2px solid transparent;
    transition: border 0.3s;
}

.thumb-item img:hover {
    border: 2px solid #1e40af; /* Change to your desired hover effect color */
}

/* Main image styling */
.main-image-container img.main-image {
    width: 100%; /* Make it responsive */
    height: auto; /* Maintain aspect ratio */
    max-width: 600px; /* Example max width */
}

/* Style for the Adult Sizing Chart header */
.adult-sizing-header {
    font-size: 24px; /* Adjust the font size */
    font-weight: bold; /* Makes the font bold */
    color: white; /* Change text color */
    margin-top: 20px; /* Adds spacing above the header */
    margin-bottom: 10px; /* Adds spacing below the header */
    padding: 10px; /* Adds padding around the header */
    background-color:rgb(54, 59, 162); /* Adds background color */
    border-radius: 5px; /* Rounds the corners */
    text-align: center; /* Centers the text */
}

/* Style for the Youth Sizing Chart header */
.youth-sizing-header {
    font-size: 22px; /* Adjust the font size */
    font-weight: bold; /* Makes the font bold */
    color: white; /* Change text color */
    margin-top: 20px; /* Adds spacing above the header */
    margin-bottom: 10px; /* Adds spacing below the header */
    padding: 10px; /* Adds padding around the header */
   background-color:rgb(54, 59, 162); /* Adds background color */
    border-radius: 5px; /* Rounds the corners */
    text-align: center; /* Centers the text */
}

/* Style the link like a button */
 .fabric-link {

    color: rgb(54, 18, 171);
    padding:   18px 16px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
    cursor: hand;
}

/* Add a hover effect */
.fabric-link:hover {
    
}

#fabricImagesContainer {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center images and headers horizontally */
    justify-content: center; /* Center images and headers vertically */
    text-align: center; /* Ensure text (headers) is also centered */
}

#fabricImagesContainer img {
    display: block;  /* Makes the image a block element so it can be centered */
    margin-bottom: 15px; /* Adds space between images */
    max-width: 100%; /* Ensure images do not overflow */
    height: auto; /* Maintain aspect ratio */
}

#fabricImagesContainer h4 {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    text-align: center; /* Ensure the header is centered */
}

.fabric-modal {

    margin: auto;  /* This centers it horizontally */
    position: absolute;  /* This allows it to be centered vertically */
    top: 50%;  /* Position it in the middle of the screen vertically */
    left: 0%; /* Position it in the middle of the screen horizontally */
    transform: translate(-50%, -50%); /* Adjust it by 50% of its width and height to truly center it */
    width: 700px;
    height: 700px;
    background-color: white;
    border-radius: 20px;
    
}

.fabric-modal .modal-content {
    width: 700px;  /* Set width to 700px */
    height: 500px; /* Set height to 700px */

}
.fabric-modal .modal-content h4 {
    font-size: 24px;
    font-weight: bold;
    color: rgb(54, 59, 162);
    text-align: center; /* Center header text */
    margin-top: 20px; /* Space between header and content */
}
/* Close Button */
.fabric-modal .modal-content {
    position: absolute;
    top: 25px;
    left: 20px;
    font-size: 30px;
    font-weight: bold;
    color: rgb(54, 59, 162);
    background: transparent;
    border: none;
    cursor: pointer;
}

.adult-sizing-header {
    background-color: rgb(54, 59, 162);
    width: 100%;
    
}
.adult-sizing-header h4 {
    color: white;
}
.youth-sizing-header {
    
    width: 100%;
    
}
/* For Description Section */
#description-content {
     padding: 15px;
    background-color: #e7f7e7; /* Light green background for the returns */
    border-radius: 5px;
    border-left: 5px solid rgb(54, 59, 162); /* Add a left border */
}
h3, h4, h5 {
    font-family: 'Roboto', sans-serif; /* You can use a Google font */
    font-weight: bold; /* Make the headers bold */
    color: rgb(54, 59, 162); /* Set the header color */
    text-align: center; /* Align text to the left */
    margin-bottom: 10px; /* Add space below the header */
    margin-top: 15px;
}

/* For Shipping Policy */
#shipping-policy-content {
    padding: 15px;
    background-color: #e7f3f7; /* Light blue background for the shipping policy */
    border-radius: 5px;
    border-left: 5px solid rgb(54, 59, 162); /* Add a left border for a visual cue */
}

/* For Returns Policy */
#returns-content {
    padding: 15px;
    background-color: #e7f7e7; /* Light green background for the returns */
    border-radius: 5px;
    border-left: 5px solid rgb(54, 59, 162); /* Add a left border */
}
/* For Returns Policy */
#care-content {
    padding: 15px;
    background-color: #e7f3f7; /* Light blue background for the returns */
    border-radius: 5px;
    border-left: 5px solid rgb(54, 59, 162); /* Add a left border */
}

/* ============================
   PRODUCT TYPE ACTIVE HIGHLIGHT
   ============================ */

/* When JS marks the <a> active */
.product-type-filter.active {
  color: #1cdbab !important;
  font-weight: bold;
  background-color: rgba(28, 219, 171, 0.12);
  border-radius: 4px;
  padding: 2px 4px;
  display: inline-block; /* ensures padding shows nicely */
}

/* When JS marks the <li> active (your older handler did this) */
#productTypesFilterList .cate-item.active > a {
  color: #1cdbab !important;
  font-weight: bold;
  background-color: rgba(28, 219, 171, 0.12);
  border-radius: 4px;
  padding: 2px 4px;
  display: inline-block;
}

.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* FULL-WIDTH active highlight for Product Types (matches Collections/Designs) */
#productTypesFilterList .cate-item > a.product-type-filter {
  display: block;              /* makes highlight extend full row */
  width: 100%;
  padding: 2px 4px;
  border-radius: 4px;
}

#productTypesFilterList .cate-item.active > a.product-type-filter {
  color: #1cdbab !important;
  font-weight: bold;
  background-color: rgba(28, 219, 171, 0.12);
}