/**
 * Quick Filters - Standalone CSS
 * Styles for quickFilterTag, quickSearchTag, and quickPriceTag buttons
 * All classes prefixed with "quickFilters" for standalone use
 */

/* ==========================================
   CSS Variables - Customize All Styling Here
   ========================================== */

   :root {--color1: #4486C6;--color2: #30669C;--color3: #212121;--color4: #f7f7f7;
      
    /* ==========================================
       Default State
       ========================================== */--quickfilters-border-color: #212121;--quickfilters-background: #fff;--quickfilters-text-color: #212121;--quickfilters-icon-color: #212121;
    
    /* ==========================================
       Hover State
       ========================================== */--quickfilters-border-color-hover: #4486C6;--quickfilters-background-hover: #fff;--quickfilters-text-color-hover: #212121;--quickfilters-icon-color-hover: #4486C6;
    
    /* ==========================================
       Selected/Active State
       ========================================== */--quickfilters-border-color-selected: #30669C;--quickfilters-background-selected: #30669C;--quickfilters-text-color-selected: #fff;--quickfilters-icon-color-selected: #fff;
    
    /* ==========================================
       Unavailable State
       ========================================== */--quickfilters-border-color-unavailable: #bcbcbc69;--quickfilters-background-unavailable: #fff;--quickfilters-text-color-unavailable: #92929257;--quickfilters-icon-color-unavailable: #9d9d9d69;
    
    /* Unavailable Hover State */--quickfilters-border-color-unavailable-hover: #97979769;--quickfilters-text-color-unavailable-hover: #979797;
   
   
   /* Border & Spacing */--quickfilters-border-width: 1px;--quickfilters-border-radius: 10px;--quickfilters-padding-vertical: 6px;--quickfilters-padding-left: 22px;--quickfilters-padding-right: 42px;--quickfilters-gap: 1rem;
   
   /* Icon */--quickfilters-icon-size: 18px;--quickfilters-icon-position-right: 10px;
   
   /* Typography */--quickfilters-font-family: "citrfontbold";--quickfilters-font-size: smaller;--quickfilters-font-weight: bold;--quickfilters-text-transform: initial;
   
   /* Transitions */--quickfilters-transition: all 0.3s ease-in-out;
   
   /* Section Title */--quickfilters-title-font-size: 20px;--quickfilters-title-font-weight: 600;--quickfilters-title-color: #252525;--quickfilters-title-margin-bottom: 16px;--quickfilters-title-margin-top: 0;--quickfilters-title-line-height: 1.4;--quickfilters-title-letter-spacing: 0;--quickfilters-title-text-align: left;--quickfilters-title-text-transform: none;
   
   /* Container */--quickfilters-container-gap: 1em;--quickfilters-container-margin-bottom: 1rem;--quickfilters-container-scroll-padding: 1rem;--quickfilters-container-justify: flex-start;
   
   /* Image Style */--quickfilters-image-size: 60px;--quickfilters-image-border-radius: var(--quickfilters-border-radius);--quickfilters-image-margin-right: 14px;--quickfilters-image-padding-left: 6px;}
 
 /* ==========================================
    Base Button Styles (All Types)
    ========================================== */
 
 .quickFilterTag,
 .quickSearchTag,
 .quickPriceTag,
 .quickLinkTag {
   margin: 0;
   border: var(--quickfilters-border-width) solid var(--quickfilters-border-color);
   font-family: var(--quickfilters-font-family);
   width: auto;
   text-transform: var(--quickfilters-text-transform);
   text-align: left;
   border-radius: var(--quickfilters-border-radius);
   color: var(--quickfilters-text-color);
   display: flex;
   align-content: center;
   align-items: center;
   justify-content: space-between;
   font-size: var(--quickfilters-font-size);
   padding: var(--quickfilters-padding-vertical) var(--quickfilters-padding-right) var(--quickfilters-padding-vertical) var(--quickfilters-padding-left);
   max-width: 100%;
   font-weight: var(--quickfilters-font-weight);
   position: relative;
   transition: var(--quickfilters-transition);
   cursor: pointer;
   background: var(--quickfilters-background);
   text-decoration: none;
 }
 
 /* Base hover state - applies to all buttons */
 .quickFilterTag:hover,
 .quickSearchTag:hover,
 .quickPriceTag:hover,
 .quickLinkTag:hover {
   border: var(--quickfilters-border-width) solid var(--quickfilters-border-color-hover);
   background: var(--quickfilters-background-hover);
   color: var(--quickfilters-text-color-hover);
   cursor: pointer;
 }
 
 /* ==========================================
    Selected/Active States (All Button Types)
    ========================================== */
 
 /* Selected/Active state - same for all button types */
 .quickFilterTagSelected,
 .quickSearchTag.active,
 .quickPriceTag.active {
   border: var(--quickfilters-border-width) solid var(--quickfilters-border-color-selected);
   background: var(--quickfilters-background-selected);
   color: var(--quickfilters-text-color-selected);
 }
 
 /* Selected/Active hover - maintains selected colors */
 .quickFilterTagSelected:hover,
 .quickFilterTag:hover.quickFilterTagSelected,
 .quickSearchTag.active:hover,
 .quickPriceTag.active:hover {
   border: var(--quickfilters-border-width) solid var(--quickfilters-border-color-selected);
   background: var(--quickfilters-background-selected);
   color: var(--quickfilters-text-color-selected);
 }
 
 /* ==========================================
    Unavailable State (Filter Tags Only)
    ========================================== */
 
 .quickFilterTagUnavailable {
   background: var(--quickfilters-background-unavailable);
   color: var(--quickfilters-text-color-unavailable);
   border: var(--quickfilters-border-width) solid var(--quickfilters-border-color-unavailable);
   cursor: default;
 }
 
 .quickFilterTagUnavailable:hover {
   background: var(--quickfilters-background-unavailable);
   color: var(--quickfilters-text-color-unavailable-hover);
   border: var(--quickfilters-border-width) solid var(--quickfilters-border-color-unavailable-hover);
   cursor: default;
 }
 
 /* ==========================================
    Link Tag
    ========================================== */
 
 /* Link tags don't have active/selected states, they're just links */
 .quickLinkTag {
   text-decoration: none;
 }
 
 .quickLinkTag:hover {
   text-decoration: none;
 }
 
 /* ==========================================
    Section Title
    ========================================== */
 
 .quickFilters-section-title {
   font-size: var(--quickfilters-title-font-size);
   font-weight: var(--quickfilters-title-font-weight);
   color: var(--quickfilters-title-color);
   margin: var(--quickfilters-title-margin-top) 0 var(--quickfilters-title-margin-bottom) 0;
   padding: 0;
   line-height: var(--quickfilters-title-line-height);
   letter-spacing: var(--quickfilters-title-letter-spacing);
   text-align: var(--quickfilters-title-text-align);
   text-transform: var(--quickfilters-title-text-transform);
   font-family: var(--quickfilters-font-family);
   border-bottom: 1px solid #c2c2c2;
   padding-bottom: 5px;
 }
 
 /* ==========================================
    Container Styles (Optional)
    ========================================== */
 
 .quickFilters-container {
   margin: -8px;
   width: 100%;
   margin: 0 0 var(--quickfilters-container-margin-bottom) !important;
   display: flex;
   flex-wrap: wrap;
   gap: var(--quickfilters-container-gap);
   justify-content: var(--quickfilters-container-justify);
   align-items: flex-start;
 }
 
 .quickFilters-title-section {
   width: 100%;
   margin-bottom: var(--quickfilters-title-margin-bottom);
 }
 
 .quickFilters-buttons-preview {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   gap: var(--quickfilters-container-gap);
   justify-content: var(--quickfilters-container-justify);
 }
 
 .quickFilters-buttons-preview > div {
   display: contents; 
 }
 
 /* Container direct children inherit base button styles */
 
 /* On smaller screens: horizontal scroll with snap */
 @media (max-width: 768px) {
 .quickFilters-container {
   flex-wrap: nowrap;
   overflow-x: auto;
   overflow-y: hidden;
   scroll-snap-type: x mandatory;
   scroll-padding: var(--quickfilters-container-scroll-padding);
   -webkit-overflow-scrolling: touch;
   /* Hide scrollbar on some browsers */
   scrollbar-width: thin;
   scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
 }
   
 /* Make buttons snap points and prevent shrinking - works for both preview and generated HTML */
 .quickFilters-buttons-preview .quickFilterTag,
 .quickFilters-buttons-preview .quickSearchTag,
 .quickFilters-buttons-preview .quickPriceTag,
 .quickFilters-buttons-preview .quickLinkTag,
 .quickFilters-container > .quickFilterTag,
 .quickFilters-container > .quickSearchTag,
 .quickFilters-container > .quickPriceTag,
 .quickFilters-container > .quickLinkTag {
   scroll-snap-align: start;
   flex-shrink: 0;
   padding-right: calc(var(--quickfilters-icon-size) + 20px );
 }
}

 
 /* ==========================================
    SVG Icons (::after pseudo-elements)
    ========================================== */
 
 .quickFilterTag::after,
 .quickSearchTag::after,
 .quickPriceTag::after,
 .quickLinkTag::after {
   content: "";
   display: inline-block;
   width: var(--quickfilters-icon-size);
   height: var(--quickfilters-icon-size);
   background-color: var(--quickfilters-icon-color);
   -webkit-mask-image: var(--svg);
   mask-image: var(--svg);
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
   position: absolute;
   right: var(--quickfilters-icon-position-right);
   transition: var(--quickfilters-transition);
 }
 
 /* Default icon for filter tags (checkbox) */
 .quickFilterTag::after {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='18' height='18' x='3' y='3' rx='4'/%3E%3Cpath d='m9 12l2.25 2L15 10'/%3E%3C/g%3E%3C/svg%3E");
 }
 
 /* Selected filter tag icon (checkmark) */
 .quickFilterTagSelected::after,
 .quickFilterTag:hover.quickFilterTagSelected::after {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M7 2a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5zm8.73 8.684a1 1 0 1 0-1.46-1.368l-3.083 3.29l-1.523-1.353a1 1 0 0 0-1.328 1.494l2.25 2a1 1 0 0 0 1.393-.063z' clip-rule='evenodd'/%3E%3C/svg%3E");
   background-color: var(--quickfilters-icon-color-selected) !important;
 }
 
 /* Unavailable filter tag icon (X) */
 .quickFilterTagUnavailable::after {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M5.47 5.47a.75.75 0 0 1 1.06 0l12 12a.75.75 0 1 1-1.06 1.06l-12-12a.75.75 0 0 1 0-1.06'/%3E%3Cpath d='M18.53 5.47a.75.75 0 0 1 0 1.06l-12 12a.75.75 0 0 1-1.06-1.06l12-12a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3C/svg%3E");
   background: var(--quickfilters-icon-color-unavailable);
 }
 
 /* Search tag icon (filter/search icon) */
 .quickSearchTag::after {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 9.4c0-2.24 0-3.36.436-4.216a4 4 0 0 1 1.748-1.748C6.04 3 7.16 3 9.4 3h5.2c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.748 1.748C21 6.04 21 7.16 21 9.4v5.2c0 2.24 0 3.36-.436 4.216a4 4 0 0 1-1.748 1.748C17.96 21 16.84 21 14.6 21H9.4c-2.24 0-3.36 0-4.216-.436a4 4 0 0 1-1.748-1.748C3 17.96 3 16.84 3 14.6zM10.905 8l-1.437 8m4.937-8l-1.437 8m3.314-5.75H7.718m8.564 3.5H7.718'/%3E%3C/svg%3E");
 }
 
 /* Active search tag icon (dollar/filter icon) */
 .quickSearchTag.active::after {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M10.769 13h1.976l.359-2h-1.976z'/%3E%3Cpath d='M9.367 2.25c-1.092 0-1.958 0-2.655.057c-.714.058-1.317.18-1.868.46a4.75 4.75 0 0 0-2.076 2.077c-.281.55-.403 1.154-.461 1.868c-.057.697-.057 1.563-.057 2.655v5.266c0 1.092 0 1.958.057 2.655c.058.714.18 1.317.46 1.869a4.75 4.75 0 0 0 2.077 2.075c.55.281 1.154.403 1.868.461c.697.057 1.563.057 2.655.057h5.266c1.092 0 1.958 0 2.655-.057c.714-.058 1.317-.18 1.869-.46a4.75 4.75 0 0 0 2.075-2.076c.281-.552.403-1.155.461-1.869c.057-.697.057-1.563.057-2.655V9.367c0-1.092 0-1.958-.057-2.655c-.058-.714-.18-1.317-.46-1.868a4.75 4.75 0 0 0-2.076-2.076c-.552-.281-1.155-.403-1.869-.461c-.697-.057-1.563-.057-2.655-.057zm1.67 5.012a.75.75 0 0 1 .606.87L11.397 9.5h1.976l.293-1.633a.75.75 0 0 1 1.477.266L14.897 9.5h1.385a.75.75 0 0 1 0 1.5h-1.654l-.36 2h2.014a.75.75 0 0 1 0 1.5H14l-.293 1.633a.75.75 0 0 1-1.477-.265l.246-1.368H10.5l-.293 1.633a.75.75 0 0 1-1.477-.265l.246-1.368H7.718a.75.75 0 0 1 0-1.5h1.527l.359-2H7.718a.75.75 0 0 1 0-1.5h2.155l.293-1.633a.75.75 0 0 1 .871-.605'/%3E%3C/g%3E%3C/svg%3E");
   background-color: var(--quickfilters-icon-color-selected) !important;
 }
 
 /* Price tag icon (price tag SVG) */
 .quickPriceTag::after {
   --svg: url("data:image/svg+xml,%3Csvg fill='%23000' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M36.6,20.5a2.05,2.05,0,0,1,2.1,2.1V24a2.05,2.05,0,0,1-2.1,2.1H30.3a4.19,4.19,0,0,0-4.2,4V69.7a4.19,4.19,0,0,0,4,4.2H69.7a4.19,4.19,0,0,0,4.2-4V63.4A2.05,2.05,0,0,1,76,61.3h1.4a2.05,2.05,0,0,1,2.1,2.1v7.7a8.39,8.39,0,0,1-8.4,8.4H28.9a8.39,8.39,0,0,1-8.4-8.4V28.9a8.39,8.39,0,0,1,8.4-8.4Z' fill-rule='evenodd'%3E%3C/path%3E%3Cg%3E%3Cpath d='M54.6,24l10.4.2a4.31,4.31,0,0,1,2.2.9h0l4.1,4.1,4.1,4.1a2.94,2.94,0,0,1,.9,2.2h0l.2,10.4a3.17,3.17,0,0,1-.9,2.3h0L58.5,65.3a3.14,3.14,0,0,1-4.4,0h0l-9.4-9.4-9.4-9.4a3.14,3.14,0,0,1,0-4.4h0L52.4,25a2.57,2.57,0,0,1,2.2-1ZM48.8,40.6l-1.7,1.7a.78.78,0,0,0,0,1.1l10,10a.78.78,0,0,0,1.1,0l1.7-1.7a.78.78,0,0,0,0-1.1l-10-10A.78.78,0,0,0,48.8,40.6Zm4.7-4.7-1.7,1.7a.78.78,0,0,0,0,1.1l10,10a.78.78,0,0,0,1.1,0L64.6,47a.78.78,0,0,0,0-1.1l-10-10A.78.78,0,0,0,53.5,35.9Zm16.1-5a3.11,3.11,0,1,0,0,4.4A3.14,3.14,0,0,0,69.6,30.9Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
   width: var(--quickfilters-icon-size);
 }
 
 /* Link tag icon (external link SVG) */
 .quickLinkTag::after {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 11a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1'/%3E%3Cpath fill='%23000' d='M16 5h1.58l-6.29 6.28a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0L19 6.42V8a1 1 0 0 0 1 1a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-4a1 1 0 0 0 0 2'/%3E%3C/svg%3E");
 }
 
 /* Hover states for icons */
 .quickFilterTag:hover::after,
 .quickSearchTag:hover::after,
 .quickPriceTag:hover::after,
 .quickLinkTag:hover::after {
   background-color: var(--quickfilters-icon-color-hover);
 }
 
 /* ==========================================
    Image Style Variants
    ========================================== */
 
 /* Image style - thumbnail on left, text on right */
 .quickFilterTag-image,
 .quickSearchTag-image,
 .quickPriceTag-image,
 .quickLinkTag-image {
   padding-left: var(--quickfilters-image-padding-left);
   align-items: center;
 }
 
 .quickFilterTag-image img,
 .quickSearchTag-image img,
 .quickPriceTag-image img,
 .quickLinkTag-image img {
   width: var(--quickfilters-image-size) !important; /* Important's to get around collection styling */
   height: var(--quickfilters-image-size) !important;
   object-fit: contain;
   border-radius: var(--quickfilters-image-border-radius) !important;
   margin-right: var(--quickfilters-image-margin-right);
   flex-shrink: 0;
   display: block;
 }

 
 
 .quickFilterTag-image::after,
 .quickSearchTag-image::after,
 .quickPriceTag-image::after,
 .quickLinkTag-image::after {
   /* Keep icon on the right even with image */
   right: var(--quickfilters-icon-position-right);
 }
 
 /* ==========================================
    Responsive Adjustments
    ========================================== */
 
 @media (max-width: 768px) {
   .quickFilterTag,
   .quickSearchTag,
   .quickPriceTag,
   .quickLinkTag {
     font-size: 13px;
     /* margin: 0 var(--quickfilters-container-gap) 0 0; */
   }
   
   .quickFilters-section-title {
     font-size: 18px;
   }
 }