import{Segment}from"@dna/analytics";import{client}from"@dna/constructor";import{RespondToViewport,WithProfiler}from"@dna/mixins";import*as paths from"@dna/paths";import styles from"@dna/styles";import{getSectionPosition,igGetExperimentControl,igReady,t}from"@dna/utils";import{LitElement,classMap,createRef,css,html,nothing,ref,when}from"@lit";try{window?.performance?.measure("component-constructor-results",{start:"rothys.script.component-constructor-results.start",detail:{devtools:{trackGroup:"Rothys",track:"Script Loading"}}})}catch(e){console.error(e)}const TaskStatus={PENDING:"PENDING",LOADING:"LOADING",COMPLETE:"COMPLETE",ERROR:"ERROR"},cleanedSearchQuery=query=>query?query.replace(/[\/\\]/g,""):"";class DNAConstructorResults extends WithProfiler(RespondToViewport(LitElement)){static properties={searchTerm:{type:String},isSearch:{type:Boolean,attribute:"is-search"},collectionHandle:{type:String,attribute:"collection-handle"},showFilters:{type:Boolean,attribute:"show-filters"},showPagination:{type:Boolean,attribute:"show-pagination"},showSort:{type:Boolean,attribute:"show-sort"},resultsPerPage:{type:Number,attribute:"results-per-page"},showCardCarousels:{type:Boolean,attribute:"show-card-carousels",reflect:!0},enableHoverImage:{type:Boolean,attribute:"enable-hover-image",reflect:!0},quickAdd:{type:Boolean,attribute:"quick-add"},quickView:{type:Boolean,attribute:"quick-view"},filtersOpen:{type:Boolean,attribute:"filters-open",reflect:!0},inGrids:{type:Array},status:{type:String},startedInitialLoad:{type:Boolean},sectionID:{type:String,attribute:"section-id"},fitTips:{type:Array},hidePriceControlOptions:{type:Boolean},hasRenderedSchema:{type:Boolean},navOpen:{type:Boolean,state:!0},allProducts:{type:Array,state:!0},experimentationTrackingKey:{type:String,attribute:"experimentation-tracking-key"},trackingKey:{type:String,attribute:"tracking-key"},hideProductColorCount:{type:Boolean,attribute:"hide-product-color-count",reflect:!0},showEditorialAltImage:{type:Boolean,attribute:"show-editorial-alt-image",reflect:!0}};constructor(){super(),performance.mark("component-constructor-results-start"),this.router=__DNA_GLOBAL__.utils.queryRouter,this._setMobileBreakpoints(["mobile","tablet"]);const query=this.router.query.get();this.searchTerm=cleanedSearchQuery(query?.q?.[0])??__DNA_GLOBAL__?.constructor?.searchTerm,this.showFilters=!1,this.showPagination=!1,this.showSort=!1,this.resultsPerPage=__DNA_GLOBAL__?.constructor?.resultsPerPage,this.searchResultsPerPage=__DNA_GLOBAL__?.constructor?.searchResultsPerPage,this.isSearch=__DNA_GLOBAL__?.constructor?.isSearch??!1,this.collectionHandle=__DNA_GLOBAL__?.constructor?.collectionHandle??"",this.inGrids=[],this.results=null,this.status=TaskStatus.PENDING,this.filtersOpen=!1,this.navOpen=!0,this.topBarRef=createRef(),this.startedInitialLoad=!1,this.cartItems=[],this.sectionID="",this.fitTips=[],this.hidePriceControlOptions=!1,this.hasRenderedSchema=!1,this.allProducts=[],this.rafID=null,this.showMoreClicked=!1,this.queryParams=this.router.query.get(),this.sortTriggered=!1,this.applyTest1368=!1,this.filterBarRef=createRef();const params=this.router.query.getNormalized(),pageNum=Array.isArray(params.page)?Number.parseInt(params.page[0]):Number.parseInt(params.page);this.currentPage=pageNum||1,(this.collectionHandle||this.isSearch)&&this.loadInitialResults()}connectedCallback(){super.connectedCallback(),this.$section=this.closest(".shopify-section"),this.sectionPosition=getSectionPosition(this.$section),igReady.then(async()=>{await igGetExperimentControl({staging:"295da21f-8686-45f9-af3e-4bcba4c92194",production:"1b257090-860c-460c-ac39-ef43b5e72408"})||(this.applyTest1368=!0)}),this.applyTest1368||(document.addEventListener("dna:main-menu:show",this._handleNavShow),document.addEventListener("dna:main-menu:hide",this._handleNavHide)),window.addEventListener("scroll",this._handleScroll,{passive:!0}),this.currentPage>1&&history.scrollRestoration&&(history.scrollRestoration="manual"),this.io=new IntersectionObserver(entries=>{for(const entry of entries)this.handleObserverEntry(entry)},{root:null,rootMargin:"0px",threshold:.5})}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("dna:main-menu:show",this._handleNavShow),document.removeEventListener("dna:main-menu:hide",this._handleNavHide),window.removeEventListener("scroll",this._handleScroll)}async showMoreRef(ref2){ref2?(await ref2.updateComplete,this.io.observe(ref2)):this.io.disconnect()}handleObserverEntry(entry){entry.isIntersecting&&this.prefetchProductsObserver()}async prefetchProductsObserver(){this.prefetchedResults instanceof Promise||await this.prefetchProducts()}_handleNavShow=()=>{this.navOpen=!0};_handleNavHide=()=>{this.navOpen=!1};_handleScroll=()=>{this.rafID===null&&(this.rafID=requestAnimationFrame(()=>{this.rafID=null,this.currentPage>1&&this.status===TaskStatus.COMPLETE&&sessionStorage.setItem("rothys_scroll_position",window.scrollY)}))};firstUpdated(){super.firstUpdated(),this.startedInitialLoad||this.loadInitialResults(),this.router?.events?.addEventListener("queryChange",event=>{const updatedParams=this.router.query.get(),sortEqual=this.queryParams?.sort?.[0]===updatedParams?.sort?.[0],sortByEqual=this.queryParams?.sort_order?.[0]===updatedParams?.sort_order?.[0];this.sortTriggered=!(sortEqual&&sortByEqual),this.showMoreClicked||(this.sortTriggered||(this.allProducts=[]),this.prefetchedResults=null,this.currentPage=1),this.fetchProducts(),this.showMoreClicked=!1,this.queryParams=updatedParams}),document.addEventListener("DOMContentLoaded",()=>{setTimeout(()=>{this.status===TaskStatus.COMPLETE&&this.dispatchEvent(new CustomEvent("dna:constructor-results:loaded",{detail:this.results,bubbles:!0}))},0)}),document.querySelector(":root")?.style.setProperty("--dna-filter-bar-height",this.filterBarRef?.value?`${this.filterBarRef.value.getBoundingClientRect().height}px`:"0px")}updateResults(results){this.results=results,this.sortTriggered?this.allProducts=results.products:this.allProducts.push(...results.products),this.status=TaskStatus.COMPLETE,this.dispatchEvent(new CustomEvent("dna:constructor-results:loaded",{detail:results,bubbles:!0})),performance.mark("component-constructor-results-end");try{performance.measure("component-constructor-results",{start:"component-constructor-results-start",end:"component-constructor-results-end",detail:{devtools:{track:"Constructor",trackGroup:"Rothys",properties:[["Collection Handle",this.collectionHandle]]}}})}catch(e){console.error(e)}}async loadInitialResults(){if(this.startedInitialLoad=!0,__DNA_GLOBAL__?.constructor?.prefetchPromise instanceof Promise){console.log("CIO Prefetch promise was found"),this.dispatchEvent(new CustomEvent("dna:load:start"));const result=await __DNA_GLOBAL__.constructor?.prefetchPromise;this.updateResults(result)}else console.log("CIO Prefetch promise was not found"),this.fetchProducts(!0)}async prefetchProducts(){try{const response2=this.isSearch?await this.searchQuery(!0):await this.browseQuery(!0);this.prefetchedResults=Promise.resolve(response2)}catch(err){console.error("Error preloading results:",err)}}toggleFilters(){this.filtersOpen=!this.filtersOpen,this.filtersOpen?(this.querySelector("dna-grid-filters")?.focus(),this.trackFiltersViewed()):this?.focus()}async searchQuery(isPrefetching=!1,isInitialLoad=!1){const params=this.router.query.getNormalized();if(isInitialLoad){const fetchPromises=[];for(let page=1;page<=this.currentPage;page++){const pageParams={...params,page};fetchPromises.push(client.getSearchResults(this.searchTerm,pageParams))}const allResults=await Promise.all(fetchPromises);return{...allResults[0],products:allResults.flatMap(result=>result.products)}}return params.page=isPrefetching?this.currentPage+1:params.page||this.currentPage,await client.getSearchResults(this.searchTerm,{...params,resultsPerPage:this.searchResultsPerPage})}async browseQuery(isPrefetching=!1,isInitialLoad=!1){const params=this.router.query.getNormalized();if(isInitialLoad){const fetchPromises=[];for(let page=1;page<=this.currentPage;page++){const pageParams={...params,page};fetchPromises.push(client.getBrowseProducts(this.collectionHandle,pageParams))}const allResults=await Promise.all(fetchPromises);return{...allResults[0],products:allResults.flatMap(result=>result.products)}}return params.page=isPrefetching?this.currentPage+1:params.page||this.currentPage,await client.getBrowseProducts(this.collectionHandle,{...params,resultsPerPage:this.resultsPerPage})}fetchProducts=async(isInitialProducts=!1)=>{this.status=TaskStatus.LOADING;try{let response2,shouldScrollToTop;this.prefetchedResults instanceof Promise?(response2=await this.prefetchedResults,this.prefetchedResults=null):(this.dispatchEvent(new CustomEvent("dna:load:start")),response2=this.isSearch?await this.searchQuery(!1,isInitialProducts):await this.browseQuery(!1,isInitialProducts),shouldScrollToTop=!0),this.updateResults(response2),this.prefetchedResults=null,this.topBarRef.value&&shouldScrollToTop&&this.topBarRef.value.scrollIntoView({behavior:"smooth"})}catch(err){throw console.error("Error fetching results:",err),this.status=TaskStatus.ERROR,new Error(response)}};clearAllFilters(){const queryData=this.router.query.get(),filtersObj=Object.keys(queryData).filter(key=>key.startsWith("filter.")).reduce((acc,key)=>(acc[key]=null,acc),{});this.router.query.update(filtersObj),this.trackFiltersCleared()}get products(){return this.allProducts||[]}get totalCount(){return this.results?.meta?.totalCount||void 0}get filters(){return this.results?.filters||[]}get activeFilters(){return this.filters.map(filter=>({...filter,options:void 0,selectedOptions:Array.isArray(filter?.options)?filter.options.filter(option=>option.status==="selected"):[]}))}get activeSelectedFilters(){return this.activeFilters.filter(filter=>filter.selectedOptions.length>0)}get sort(){if(!this.results?.sort)return{options:[],selected:""};const selected=this.results?.sort?.selected;return{options:this.results?.sort?.options||[],selected:`${selected.sort_by}|${selected.sort_order}`}}get totalResults(){return this.results?.pagination?.totalResults}get selectedOptionsValues(){return this.activeFilters.flatMap(filter=>filter.selectedOptions)}get mobileFilterButtonText(){return this.totalCount===0?"See Products":`See ${this.totalCount} Product${this.totalCount>1?"s":""}`}get searchandising(){return this.results?.searchandising}showMore(){this.showMoreScrollPosition=window.scrollY,this.showMoreClicked=!0,this.router.query.update({page:this.currentPage+1}),this.currentPage=this.currentPage+1}removeFilterOption(filter,option){this.router.query.remove({[`filter.${filter?.name}`]:option.value}),this.trackFilterRemoved({filter_name:option?.name?.toLowerCase(),filter_type:filter?.display_name?.toLowerCase()})}trackFiltersViewed(){Segment.protect(()=>{Segment.track(Segment.CONSTANTS.EVENTS.FILTERS_VIEWED)})}trackFiltersCleared(){Segment.protect(()=>{Segment.track(Segment.CONSTANTS.EVENTS.FILTERS_CLEARED)})}trackFilterRemoved(filterData){Segment.protect(()=>{Segment.track(Segment.CONSTANTS.EVENTS.FILTER_REMOVED,filterData)})}_renderSchema(){if(this.products.length>0&&!this.hasRenderedSchema){const scriptContent={"@context":"http://schema.org/","@type":"ItemList",itemListElement:this.products.map((product,index)=>({"@type":"ListItem",position:index+1,item:{"@type":"Product",name:product.title,url:`${window.location.origin}${Shopify.routes.root}products/${product.handle}`,image:product.media.filter(media=>media.type==="image").slice(0,3).map(media=>media.url),...product.metafields?.yotpo?.reviews_average>0&&product.metafields?.yotpo?.reviews_count>0?{aggregateRating:{"@type":"AggregateRating",ratingValue:product.metafields?.yotpo?.reviews_average,reviewCount:product.metafields?.yotpo?.reviews_count}}:{},offers:{"@type":"Offer",price:product.prices[Shopify.country],priceCurrency:window.Shopify.currency.active,...product.compareAtPrices[Shopify.country]&&product.compareAtPrices[Shopify.country]>product.prices[Shopify.country]?{priceSpecification:{"@type":"UnitPriceSpecification",priceType:"https://schema.org/ListPrice",price:product.compareAtPrices[Shopify.country],priceCurrency:window.Shopify.currency.active}}:{}}}}))},scriptElement=document.createElement("script");scriptElement.type="application/ld+json",scriptElement.textContent=JSON.stringify(scriptContent),document.head.appendChild(scriptElement),this.hasRenderedSchema=!0}}_renderPagination=()=>{const currentTotalAmount=this.products.length,totalResults=this.totalResults,updatedProgress=currentTotalAmount/totalResults*100;return html`
      <div class="pagination">
        <div class="pagination__count">${currentTotalAmount} of ${totalResults}</div>
        <div class="pagination__progress-bar">
          <div class="pagination__progress-bar--content" style="width:${updatedProgress}%"></div>
        </div>
        ${when(currentTotalAmount<totalResults,()=>html`
            <sl-button ${ref(this.showMoreRef)} class="pagination__button" variant="primary" @click=${this.showMore}>
              ${t("sections.collection_template.show_more_button")}
            </sl-button>
          `,()=>nothing)}
      </div>
    `};_renderFilterDrawer=()=>html`
    <sl-drawer
      placement="start"
      class="mobile-plp-filter"
      .open=${this.filtersOpen}
      @sl-request-close=${()=>{this.filtersOpen=!1}}
    >
      <h3 class="h6" slot="label">Filters</h3>
      <dna-grid-filters
        data-drawer
        .filters=${this.filters}
        .hidePriceControlOptions=${this.hidePriceControlOptions}
      >
        <div slot="loading">
          <p>Loading...</p>
        </div>
      </dna-grid-filters>

      <div slot="footer" class="mobile-plp-filter__footer">
        <button
          class="label-s clear-filters-btn uppercase"
          @click=${this.clearAllFilters}
        >
            ${t("sections.collection_template.clear_all")}
        </button>
        <sl-button
          class="label-s see-products-btn"
          @click=${()=>{this.filtersOpen=!1}}
          variant='primary'
        >
          ${this.mobileFilterButtonText}
        </sl-button>
      </div>
    </sl-drawer>
  `;_renderActiveFilters=()=>html`
      <div class="filter-tags">
        ${this.activeFilters.map(filter=>filter.selectedOptions.map(option=>html`<span class="filter-tag label-s uppercase"
              data-filter=${filter.display_name}>
                ${option.name}
                <button class="remove-btn"
                  aria-label="${t("sections.collection_template.clear")} ${filter.name} ${option.value}"
                  @click=${()=>this.removeFilterOption(filter,option)}>
                  ${paths.closeSmall}
                </button>
              </span>`))}
        <button
          class="clear-filters-top-btn"
          @click=${this.clearAllFilters}
        >
          ${t("sections.collection_template.clear_all")}
        </button>
      </div>
    `;render(){const topBarMarkup=html`
    <div class="top-bar-scroll-reference" ${ref(this.topBarRef)}></div>
      <div class=${classMap({"constructor-results__top-bar":!0,"nav-open":this.navOpen||this.applyTest1368})} ${ref(this.filterBarRef)}>
        <div class="filter">
          ${when(this.showFilters,()=>html`
              <button class="flex flex-align-center filter-toggle js-filter-toggle" aria-expanded=${this.filtersOpen} @click=${this.toggleFilters}>
                ${paths.filter}
                <span>
                  <span>
                    ${t("sections.collection_template.filter")}
                  </span>
                  ${when(this.totalCount,()=>html`
                      <span class="count">
                        (${this.totalCount} ${t("sections.collection_template.match")})
                      </span>
                    `,()=>nothing)}
                </span>
              </button>
            `,()=>nothing)}
        </div>

        ${when(this.activeSelectedFilters.length>0,this._renderActiveFilters,()=>nothing)}

        ${when(this.showSort,()=>html`
            <dna-grid-sort .sort=${this.sort} .hidePriceControlOptions=${this.hidePriceControlOptions}>
              <div class="skeleton skeleton--heading mt-6 mb-4"></div>
            </dna-grid-sort>
          `,()=>nothing)}
      </div>
    `;return this._renderSchema(),this.status===TaskStatus.COMPLETE&&this.products.length===0?nothing:html`
        <div class="constructor-results flex flex-align-center">
          <div class=${classMap({"constructor-results__grid-container":!0,"filter-active":this.filtersOpen})}>
          ${this.showFilters||this.showSort?topBarMarkup:nothing}
            <div class="flex flex-align-top results-container">
              <div class=${classMap({filters:!0,active:this.filtersOpen,"nav-open":this.navOpen||this.applyTest1368})}>
                <dna-grid-filters .filters=${this.filters} .hidePriceControlOptions=${this.hidePriceControlOptions}>
                  <div slot="loading">
                    <div class="skeleton skeleton--heading mt-6 mb-6"></div>
                    ${Array(6).fill(html`<div class="skeleton skeleton--small-text mt-6 mb-6"></div>`)}
                  </div>
                </dna-grid-filters>
              </div>
              <dna-collection-grid
                .products=${this.products}
                .status=${this.status}
                .inGrids=${this.inGrids}
                .searchandising=${this.searchandising}
                .isSearch=${this.isSearch}
                .collectionHandle=${this.collectionHandle}
                .totalResults=${this.totalResults}
                .fitTips=${this.fitTips}
                ?filters-active=${this.filtersOpen}
                ?filters-applied=${this.activeSelectedFilters.length>0}
                ?show-card-carousels=${this.showCardCarousels}
                ?enable-hover-image=${this.enableHoverImage}
                ?hide-product-color-count=${this.hideProductColorCount}
                ?show-editorial-alt-image=${this.showEditorialAltImage}
                ?quick-add=${this.quickAdd}
                ?quick-view=${this.quickView}
                class=${classMap({loading:this.status===TaskStatus.LOADING})}
                section-id=${this.sectionID}
                section-position=${this.sectionPosition}
                experimentation-tracking-key=${this.experimentationTrackingKey}
                tracking-key=${this.trackingKey}
                .showMoreScrollPosition=${this.showMoreScrollPosition}
              >
                <div slot="loading">
                  <slot name="product-card-placeholder"></slot>
                </div>
              </dna-collection-grid>
            </div>
          </div>
        </div>
        ${when(this.showPagination,this._renderPagination,()=>nothing)}
        ${when(this.isMobile,()=>html`
            <div class="mobile-plp-filter-drawer">
              ${this._renderFilterDrawer()}
            </div>
          `,()=>nothing)}
      `}static styles=[styles.reset,styles.flex,styles.container,styles.typography,styles.a11y,styles.shoelace,css`
    sl-drawer:not(:defined) {
      display: none;
    }
    
    .constructor-results {
      gap: var(--dna-space-4);
      flex-direction: column;
      position: relative;
    }

    .constructor-results__grid-container {
      width: 100%;
    }

    .filters {
      display: none;
    }

    .filters.active {
      top: var(--dna-filter-bar-height);
    }

    .filters.nav-open {
      top: calc(var(--dna-filter-bar-height) + var(--dna-header-height));
    }

    dna-collection-grid {
      flex:1;
    }

    .filter-toggle {
      gap: 8px;
    }

    .filter-toggle .count {
      font-size: 10px;
      line-height: 14px;
    }

    .filter-toggle:focus-visible {
      outline: 1px solid var(--dna-utility-focus);
      outline-offset: var(--dna-focus-outline-offset);
    }

    /* breakpoint-tablet */
    @media screen and (min-width: 1024px) {
      .filter-toggle {
        gap: 16px;
      }

      .filters dna-grid-filters {
        width: 100%;
        opacity: 0 ;
        visibility: hidden;
        position: relative;
        left: -100%;
        transition: all 0.3s;
      }

      .filters.active dna-grid-filters {
        left: 0;
        opacity: 1;
        visibility: visible;
      }


      .filters {
        align-self: flex-start;
        display: block;
        position: sticky;
        top: 0;
        max-height: calc(100vh - var(--dna-filter-bar-height));
        overflow-y: auto;
        max-width: 0;
        transition: all 0.3s;
      }

      .filters.nav-open {
        max-height: calc(100vh - (var(--dna-header-height) + var(--dna-filter-bar-height)));
      }

      .filters.active {
        max-width: 360px;
        width: 360px;
      }
    }

    .top-bar-scroll-reference {
      scroll-margin-top: var(--dna-header-height);
    }

    .constructor-results__top-bar {
      display: flex;
      flex-wrap: wrap;
      top: -1px;
    }

    .constructor-results__top-bar.nav-open {
      top: calc(var(--dna-header-height) - 1px);
    }

    .constructor-results__top-bar .filter-tags {
      order: 3;
      flex-basis: 100%;
    }

    .constructor-results__top-bar {
      min-height: 68px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      background-color: var(--dna-color-sandstone);
      padding: 0 16px;
      position: sticky;
      top: -1px;
      z-index: var(--dna-z-index-overlay-base);
      transition: top .5s;
    }
    .results-container {
      border-top: 1px solid var(--dna-brand-reverse);
    }

    .filter-tags {
      display: flex;
      flex: 1;
      gap: 8px;
      justify-content: flex-start;
      padding-bottom: var(--dna-space-4);
      overflow: auto;
      white-space: nowrap;
    }

    .filter-tag {
      background-color: var(--dna-brand-reverse);
      padding: 8px 10px;
      display: inline-flex;
      gap: 4px;
      align-items: center;
    }

    .remove-btn,
    .remove-btn svg {
      width: 16px;
      height: 16px;
    }

    .remove-btn:focus-visible {
      outline-style: solid;
      outline-color: var(--dna-utility-focus);
      outline-offset: var(--dna-focus-outline-offset);
    }

    .pagination sl-button[disabled],
    .pagination-btn[disabled] {
      pointer-events: none;
    }


    /* breakpoint-tablet */
    @media screen and (min-width: 1024px) {
      .constructor-results {
        flex-direction: row;
      }
      .constructor-results__grid-container {
        flex: 0 1 auto;
        width: 100%;
        display: flex;
        flex-direction: column;
      }

      .constructor-results__top-bar {
        align-items: flex-start;
        flex-wrap: nowrap;
        padding: calc(var(--dna-space-6) - var(--dna-space-0-5)) var(--dna-space-10);
      }

      .constructor-results__top-bar .filter {
        flex: 0 0 auto;
      }

      .constructor-results__top-bar .filter-tags {
        order: unset;
        flex-basis: auto;
        flex-wrap: wrap;
        margin: 0 var(--dna-space-10);
        padding-bottom: 0;
        scrollbar-width: thin;
      }
    }

    .pagination {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 20px auto;
    }
    .pagination__progress-bar {
      width: 260px;
      height: 3px;
      background-color: #D9D9D9;
      border-radius: 100px;
      margin-top: 12px;
      margin-bottom: 20px;
    }
    .pagination__progress-bar--content {
      background-color: #092DC5;
      border-radius: 100px;
      height: 3px;
    }

    .flip-icon svg {
      transform: scaleX(-1)
    }

    .mobile-plp-filter-drawer {
      position: relative;
      z-index: 2147483099;
    }

    sl-drawer::part(body) {
      padding: 0;
    }

    sl-drawer::part(header) {
      background-color: white;
      height: 70px;
      align-items: center;
      display: flex;
      padding: 0 var(--dna-container-horizontal-padding, 16px);
    }

    sl-drawer::part(title) {
      padding: 0;
    }

    sl-drawer::part(header-actions) {
      padding: 0;
    }

    sl-drawer::part(close-button__base) {
      color: black;
      width: 24px;
      height: 24px;
      font-size: 24px;
      padding: 0;
    }

    sl-drawer::part(footer) {
      border-top: 1px solid var(--dna-color-midnight);
      padding: 16px 16px;
    }

    sl-button::part(base) {
      padding: 16px 24px;
    }

    .mobile-plp-filter__footer {
      display: flex;
      justify-content: space-evenly;
      gap: 6px;
    }

    dna-grid-sort {
      z-index: var(--dna-z-index-dropdown, 300);
    }

    .clear-filters-btn {
      border: none;
      background: none;
      color: var(--dna-color-midnight);
    }

    .clear-filters-top-btn {
      border: none;
      background: none;
      color: var(--dna-color-midnight);
      text-decoration: underline;
      font-size: 12px;
      font-weight: 400;
      line-height: 18px;
      letter-spacing: 0.5px;
      padding-left: calc(var(--dna-space-5) / 2);
      text-align: left;
      white-space: nowrap;
    }
    
    .clear-filters-top-btn:focus-visible {
      outline: 1px solid var(--dna-utility-focus);
      outline-offset: var(--dna-focus-outline-offset);
    }

    .see-products-btn::part(label) {
      padding: 0;
    }

    @keyframes fade {
      0%, 100% { opacity: 0.2; }
      50% { opacity: 1; }
    }

    .loading {
      animation: fade 2s ease-in-out infinite;
    }
    `]}customElements.define("dna-constructor-results",DNAConstructorResults);
//# sourceMappingURL=/cdn/shop/t/1163/assets/component-constructor-results.js.map?v=7867131485418836531760568440