import{Segment}from"@dna/analytics";import{RespondToViewport,WithProfiler}from"@dna/mixins";import styles from"@dna/styles";import{addToCart,getCategoryFromTags,getLineItemProperties,getMasterSku,minorToMajorUnit,removeTextBeforeCharacterAndTrim,renderPrice,splitProductName,t}from"@dna/utils";import{LitElement,classMap,createRef,css,html,nothing,ref,repeat,when}from"@lit";const CLOSEST_SELECTORS_OF_IGNORED_CLICKS="button, a a",SELECTORS_OF_IGNORED_CLICKS="#media-carousel";class DNAProductCard extends WithProfiler(RespondToViewport(LitElement)){static properties={product:{type:Object},usPricing:{type:Boolean},imageLoading:{type:String,attribute:"image-loading"},showCarousel:{type:Boolean,attribute:"show-carousel",reflect:!0},enableHover:{type:Boolean,attribute:"enable-hover-image",reflect:!0},quickAddEnabled:{type:Boolean,attribute:"quick-add"},quickViewEnabled:{type:Boolean,attribute:"quick-view"},thumbnailScroll:{type:String,state:!0},hideProductColorCount:{type:Boolean,attribute:"hide-product-color-count"},showEditorialAltImage:{type:Boolean,attribute:"show-editorial-alt-image",reflect:!0},hideBadges:{type:Boolean,attribute:"hide-badges"},hideWishlistIcon:{type:Boolean,attribute:"hide-wishlist-icon"},constructorSelectedId:{type:String},isSearch:{type:Boolean,attribute:"is-search"},sectionId:{type:String,attribute:"section-id"},sectionPosition:{type:Number,attribute:"section-position"},trackingKey:{type:String,attribute:"tracking-key"},applyTest1218:{type:Boolean,attribute:"apply-test-1218"},selectedWidth:{type:String,state:!0}};get rawPrice(){let rawPrice;return this.product.prices?rawPrice=this.product.prices[Shopify.country]*100:rawPrice=this.product.maxPrice,rawPrice}get renderedPrice(){return renderPrice(this.rawPrice)}get renderedComparePrice(){return this.product.compareAtPrices?this.product.compareAtPrices[Shopify.country]&&(this.rawCompareAtPrice=this.product.compareAtPrices[Shopify.country]*100):this.product.compareAtPrice&&(this.rawCompareAtPrice=this.product.compareAtPrice),this.rawPrice>=this.rawCompareAtPrice?!1:this.rawCompareAtPrice?renderPrice(this.rawCompareAtPrice):!1}get productMedia(){const MAX_IMAGES=this.showEditorialAltImage?this.product.media.length:this.isMobile?2:3,result=Object.assign([],this.product.media);if(this.hoverIndex!==-1&&this.hoverIndex!==1){const hoverImage=result.splice(this.hoverIndex,1)[0];result.splice(1,0,hoverImage)}return result.slice(0,MAX_IMAGES)}get hoverIndex(){return this.product.media.findIndex(image=>image.alt.includes(this.hoverFragment))}get showHoverImage(){if(this.isSearch||!this.enableHover)return!1;let showHoverImage;const hasHoverImage=this.hoverIndex!==-1;return this.productMedia.length>1&&hasHoverImage&&(this.classList.contains("product-card__product-carousel")&&!this.applyTest1218&&(showHoverImage=!1),showHoverImage=!0),showHoverImage}get productMediaEmpty(){return this.product.media.length===0}get productUrl(){return`${window.location.origin}${Shopify.routes.root}products/${this.product.handle}`}get primaryBadge(){return this.product.primary_badge}get primaryBadgeType(){return this.product.primary_badge_type?.toLowerCase()}get secondaryBadge(){return this.product.secondary_badge?.includes("$")&&window.Shopify?.country!=="US"||this.isSearch?!1:this.product.secondary_badge}get maximumOrderQuantity(){return this.product.metafields.rothys.maximum_order_quantity?this.product.metafields.rothys.maximum_order_quantity:__DNA_GLOBAL__.b2cMaxOrderQuantity}get productTitle(){return splitProductName(this?.product?.title)}get isSingleVariant(){return this.product.variants.length===1}get isGiftCard(){return this?.product?.giftcard}get colorCount(){return this.product?.colorCountByMarket?.[Shopify.country]??null}get allWidthOptions(){const allWidthOptions=[];if(this.product.variants.some(v=>v.width!==null))for(const variant of this.product.variants)variant.width&&!allWidthOptions.includes(variant.width)&&allWidthOptions.push(variant.width);return allWidthOptions}get quickAddProducts(){return this.allWidthOptions.length>1?this.product.variants.filter(variant=>variant.width===this.selectedWidth):this.product.variants}get editorialImage(){const editorialImage=this.productMedia.find(media=>media.alt?.includes("editorial"));return this.showEditorialAltImage&&editorialImage?editorialImage:null}$thumbnail=createRef();constructor(){super(),this._setMobileBreakpoints(["mobile","tablet"]),this.usPricing=Shopify.country==="US",this.hideProductColorCount=!1,this.hideBadges=!1,this.hideWishlistIcon=!1,this.hoverFragment="hover |",this.isSearch=!1,this.sectionId="",this.constructorSelectedId=this.product?.variants?.[0]?.id,this.thumbnailScroll="left",this.shouldTrackSlideChange=!0,this.selectedWidth="Medium",this.rawCompareAtPrice=0}_handleViewportChange(newViewport){super._handleViewportChange(newViewport),this.requestUpdate()}async _handleAddToCart(event){const variantIndex=event.target.closest("button").getAttribute("data-index"),variant=this.quickAddProducts[variantIndex];if(!__DNA_GLOBAL__.customerB2B){const detail=await(await fetch(`${window.Shopify.routes.root}cart.js`)).json(),itemInCart=detail.items.find(item=>item.variant_id.toString()===variant.id.toString());if(itemInCart&&itemInCart.quantity>=this.maximumOrderQuantity){document.dispatchEvent(new CustomEvent("dna:cart:open",{bubbles:!0,detail}));return}}this.product.compareAtPrice=this.rawCompareAtPrice;const properties=getLineItemProperties(this.product,variant);addToCart({id:variant.id,quantity:1,properties}),this._trackProductCardAddToCart(variant)}_handleWidthSelected(event){const button=event.target.closest("button");this.selectedWidth=button.getAttribute("data-width")}_selectConstructorVariant=({id})=>{this.constructorSelectedId=id??this.product?.variants?.[0]?.id};_trackProductCardClicked=event=>{if(event.target.closest(CLOSEST_SELECTORS_OF_IGNORED_CLICKS)||event.target.matches(SELECTORS_OF_IGNORED_CLICKS)){event.preventDefault();return}Segment.protect(()=>{const eventName=this.closest("sl-carousel-item")||this.isSearch?Segment.CONSTANTS.EVENTS.PRODUCT_CAROUSEL_CLICKED:Segment.CONSTANTS.EVENTS.PRODUCT_CLICKED;Segment.track(eventName,{category:this.productTitle?.style,name:this.productTitle?.color,price:Number(minorToMajorUnit(this.rawPrice)),product_carousel_pod_id:eventName===Segment.CONSTANTS.EVENTS.PRODUCT_CAROUSEL_CLICKED&&this.dataset.cnstrcRecommendationsPodId?.length?this.dataset.cnstrcRecommendationsPodId:void 0,product_category:this.product.tags?getCategoryFromTags(this.product?.tags):void 0,product_click_context:this.isSearch?"search":void 0,product_id:this.product.id,section_page_position:this.sectionPosition,section_tracking_key:this.trackingKey,shopify_product_id:this.product.id,sku_short:getMasterSku(this.product.sku)||getMasterSku(this.product.variants[0].sku),url:this.product.onlineStoreUrl||`${window.location.origin}/products/${this.product.handle}`})})};_trackProductCardAddToCart=variant=>{Segment.protect(()=>{Segment.track(Segment.CONSTANTS.EVENTS.PRODUCT_CTA_CLICKED,{category:this.productTitle?.style,in_stock:variant.available,name:this.productTitle?.color,price:Number(minorToMajorUnit(this.rawPrice)),product_category:this.product.tags?getCategoryFromTags(this.product?.tags):void 0,product_cta_context:"product card",product_cta_text:"add to cart",product_id:this.product.id,shopify_product_id:this.product.id,shopify_variant_id:variant.id.toString(),sku:variant.sku,sku_short:getMasterSku(this.product.sku),url:this.product.onlineStoreUrl,variant:variant.title})})};_trackProductCardCarouselChange=()=>{Segment.protect(()=>{Segment.track(Segment.CONSTANTS.EVENTS.PRODUCT_IMAGE_SCROLLED,{category:this.productTitle?.style,name:this.productTitle?.color,price:Number(minorToMajorUnit(this.rawPrice)),product_category:this.product.tags?getCategoryFromTags(this.product?.tags):void 0,product_id:this.product.id,shopify_product_id:this.product.id,sku_short:getMasterSku(this.product.sku),url:this.product.onlineStoreUrl})})};_handleOpenQuickViewModal=()=>{const updatedVariants=this.product.variants.map(variant=>({...variant,variant_title:variant.title})),product={media:this.product.media,title:this.productTitle?.style,price:this.product.price?.[Shopify.country]?this.product.price?.[Shopify.country]:"",compareAtPrice:this.product.compareAtPrices?.[Shopify.country]?this.product.compareAtPrices[Shopify.country]*100:"",color:this.productTitle?.color,id:this.product.id,url:`${window.location.origin}${Shopify.routes.root}products/${this.product.handle}`,addOnItemsPresent:this.product.addOnItemsPresent,variant_id:this.product.variants[0].id,handle:this.product.handle,tags:this.product.tags,available:this.product.available,metafields:this.product.metafields,sku:this.product.sku,onlineStoreUrl:this.product.onlineStoreUrl,variants:updatedVariants};document.dispatchEvent(new CustomEvent(`dna:quick-view:${this.sectionId}:open`,{detail:{product}}))};_renderPrimaryBadge=()=>html`
      ${when(this.primaryBadge,()=>html`
          <div class="badge label-s">
            ${when(this.primaryBadgeType?.includes("promotion"),()=>html`
                <span class="bg-midnight c-white">
                  ${this.primaryBadge}
                </span>
              `,()=>html`
                <span class="bg-white c-midnight">
                  ${this.primaryBadge}
                </span>
              `)}
          </div>
        `,()=>nothing)}
    `;_renderWishlistIcon=()=>html`    <swymcs-wishlist-button class="swymcs-wishlist-button" data-cnstrc-btn="add_to_wishlist">
      <Button
        id="swymcs-wishlist-button"
        class="swymcs-wishlist-button swymcs-wishlist-button-${this.product.id}"
        data-empi="${this.product.id}"
        data-epi="${this.product.variants[0].id}"
        data-du="${this.productUrl}">
        <div
          id="swymUnfilled" 
          style="height: 100%; display: flex; justify-content: center; align-items: center;"
        >
        ${this.isMobile?html`
            <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.4056 1.10919C9.03827 1.10919 8.00488 2.66055 8.00488 2.66055C8.00488 2.66055 6.95165 0.760339 4.31797 1.20883C2.57485 1.50566 1.22247 2.66055 1.0256 4.57305C0.685006 7.88175 2.83737 11.1866 7.55367 13.9773C7.79817 14.0566 7.90959 14.0855 8.02664 14.0855C8.1437 14.0855 8.29862 14.0632 8.3954 13.9973C10.9467 12.3244 15.0827 9.18859 15.0429 5.20188C15.0232 3.28127 13.5792 1.17055 11.4056 1.10919Z" stroke="white" stroke-width="1.00189" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M11.0549 2.07672C9.0262 2.07672 8.0262 4.07672 8.0262 4.07672C8.0262 4.07672 7.0262 2.07672 4.99745 2.07672C3.3487 2.07672 2.04307 3.4561 2.0262 5.10203C1.99182 8.5186 4.73651 10.9483 7.74495 12.9902C7.82789 13.0466 7.92588 13.0768 8.0262 13.0768C8.12651 13.0768 8.22451 13.0466 8.30745 12.9902C11.3156 10.9483 14.0603 8.5186 14.0262 5.10203C14.0093 3.4561 12.7037 2.07672 11.0549 2.07672Z" stroke="#03143B" stroke-width="1.00189" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M11.0549 2.07672C9.0262 2.07672 8.0262 4.07672 8.0262 4.07672C8.0262 4.07672 7.0262 2.07672 4.99745 2.07672C3.3487 2.07672 2.04307 3.4561 2.0262 5.10203C1.99182 8.5186 4.73651 10.9483 7.74495 12.9902C7.82789 13.0466 7.92588 13.0768 8.0262 13.0768C8.12651 13.0768 8.22451 13.0466 8.30745 12.9902C11.3156 10.9483 14.0603 8.5186 14.0262 5.10203C14.0093 3.4561 12.7037 2.07672 11.0549 2.07672Z" stroke="black" stroke-opacity="0.2" stroke-width="1.00189" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            `:html`
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.8877 2.24158C18.157 2.24163 19.4347 2.91568 20.4082 3.78357C21.378 4.64821 22.1475 5.79686 22.3027 6.86951L22.3457 7.18982C22.7402 10.4818 21.7769 13.0836 20.0996 15.3011C18.6005 17.2831 16.5274 18.9617 14.3701 20.5648L13.4424 21.2474C13.3614 21.3067 13.1703 21.4414 12.9199 21.556C12.6843 21.6639 12.3566 21.7708 11.998 21.7504V21.7513C11.4439 21.7513 10.991 21.5322 10.7334 21.3744L10.5449 21.2474L10.5273 21.2338C5.40488 17.131 1.50293 14.2615 1.50293 8.16248L1.50879 7.90759C1.63731 5.27054 3.74638 2.65372 7.03516 2.27576L7.06641 2.27283C8.73156 2.18637 10.0672 2.81877 10.9727 3.45544C11.4014 3.75691 11.7377 4.06421 11.9756 4.30408C12.1847 4.07425 12.4786 3.78896 12.8652 3.50525C13.7323 2.86901 15.0564 2.24158 16.8877 2.24158Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M16.5417 3.2511C19.3073 3.25129 21.4699 5.56018 21.4978 8.2843L21.491 8.78723C21.2805 13.9363 17.0594 17.5768 12.7009 20.5353L12.7 20.5343C12.4928 20.675 12.2483 20.7511 11.9978 20.7511C11.7473 20.751 11.5028 20.6752 11.2957 20.5343V20.5353C6.79614 17.4814 2.44442 13.7008 2.49878 8.2843L2.50757 8.02942C2.66266 5.41757 4.77586 3.25127 7.45483 3.2511C9.15361 3.2511 10.4093 4.09125 11.2205 4.89661C11.5457 5.21952 11.8038 5.5422 11.9978 5.81262C12.1918 5.54211 12.4507 5.21971 12.7761 4.89661C13.5873 4.09125 14.843 3.2511 16.5417 3.2511Z" stroke="#03143B" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M16.5417 3.2511C19.3073 3.25129 21.4699 5.56018 21.4978 8.2843L21.491 8.78723C21.2805 13.9363 17.0594 17.5768 12.7009 20.5353L12.7 20.5343C12.4928 20.675 12.2483 20.7511 11.9978 20.7511C11.7473 20.751 11.5028 20.6752 11.2957 20.5343V20.5353C6.79614 17.4814 2.44442 13.7008 2.49878 8.2843L2.50757 8.02942C2.66266 5.41757 4.77586 3.25127 7.45483 3.2511C9.15361 3.2511 10.4093 4.09125 11.2205 4.89661C11.5457 5.21952 11.8038 5.5422 11.9978 5.81262C12.1918 5.54211 12.4507 5.21971 12.7761 4.89661C13.5873 4.09125 14.843 3.2511 16.5417 3.2511Z" stroke="black" stroke-opacity="0.2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>`}
        </div>
      </Button>
    </swymcs-wishlist-button>
  `;_handleHover=event=>{document.dispatchEvent(new CustomEvent("dna:product-card:hover",{bubbles:!0,detail:{product:this.product,url:this.productUrl}}))};_handleThumbnailScroll=event=>{const scrollThreshold=this.$thumbnail.value.offsetWidth/2.1;this.$thumbnail.value.scrollLeft>=scrollThreshold?this.thumbnailScroll!=="right"&&(this.thumbnailScroll="right",this._trackProductCardCarouselChange()):this.thumbnailScroll!=="left"&&(this.thumbnailScroll="left",this._trackProductCardCarouselChange())};_renderWithProductLink(content){return html`<a class="product-card-item__link"
      @mouseenter=${this._handleHover}
      @click=${e=>this._trackProductCardClicked(e)}
      href=${this.productUrl}
      aria-label="${t("accessibility.view_details")} ${t("accessibility.for")} ${this.productTitle.style} ${this.productTitle.color}">
        ${content()}
      </a>`}_renderFeaturedImage=()=>{const featuredImage=this.editorialImage?this.editorialImage:this.productMedia[0];return html`
      <div class="thumbnail__image thumbnail__image--featured ${this.editorialImage?"thumbnail__image--editorial":""}">
        <dna-image
          src=${featuredImage?.url}
          alt=${removeTextBeforeCharacterAndTrim(featuredImage?.alt,"|")}
          width="100%"
          height=${this.editorialImage?"100%":"auto"}
          loading=${this.imageLoading}
          additional-styles="object-fit: cover;"
          sizes="(max-width: 768px) 260px, (min-width: 768px) 600px"
        />
      </div>
    `};_renderHoverImage=()=>{const hoverImage=this.editorialImage?this.productMedia[0]:this.productMedia[1];return html`
      <div class="thumbnail__image thumbnail__image--hover ${this.editorialImage?"thumbnail__image--hover-editorial":""}">
        <dna-image
          src=${hoverImage.url}
          alt=${removeTextBeforeCharacterAndTrim(hoverImage.alt,"|")}
          width="100%"
          height="100%"
          fit="cover"
          loading=${this.imageLoading}
          sizes="(max-width: 768px) 260px, (min-width: 768px) 600px"
        />
      </div>
    `};_renderThumbnail=()=>{let scrolling=!1;return html`
      <div
        ${ref(this.$thumbnail)}
        @scroll=${e=>{scrolling||(window.requestAnimationFrame(()=>{this._handleThumbnailScroll(e),scrolling=!1}),scrolling=!0)}}
        class=${classMap({thumbnail:!0,"thumbnail--mobile":this.isMobile,"thumbnail--no-hover":!this.showHoverImage})}
      >
        <!-- @intelligems TECH-1218 -->
        ${when(this.applyTest1218&&this.isMobile,()=>html`${this._renderHoverImage()}`,()=>nothing)}
       ${when(!this.applyTest1218,()=>html`${this._renderFeaturedImage()}`,()=>nothing)}
        <!-- end @intelligems TECH-1218 -->
        ${when(!this.applyTest1218&&this.showHoverImage&&!this.isMobile,()=>html`${this._renderHoverImage()}`,()=>nothing)}
        ${when(!this.applyTest1218&&this.showHoverImage&&this.showCarousel&&this.isMobile,()=>html`${this._renderHoverImage()}`,()=>nothing)}
        ${when(!this.isGiftCard&&this.quickViewEnabled&&!this.isMobile,this._renderQuickView,()=>nothing)}
      </div>
      ${when(this.isMobile&&this.showCarousel&&this.showHoverImage,()=>html`
          <span
            class=${classMap({"js-card-carousel-indicator":!0,"thumbnail__pagination-indicator":!0,"thumbnail__pagination-indicator--left":this.thumbnailScroll==="left","thumbnail__pagination-indicator--right":this.thumbnailScroll==="right"})}
          ></span>
        `,()=>nothing)}
    `};_renderQuickAdd=()=>{const available=this.quickAddProducts[0]?.available,addToBagTranslation=`+ ${t("products.product.add_to_cart")}`,outOfStockTranslation=t("products.product.sold_out"),comingSoonTranslation=t("products.product.coming_soon"),isComingSoon=this.primaryBadge==="COMING SOON",widthTranslation=t("sections.collection_template.product_card_width");return html`
      <div 
        class=${classMap({"quick-add":!0,"quick-add--single-variant":this.isSingleVariant})}
        ?hidden=${!this.quickAddEnabled}
        data-cnstrc-product-detail
        data-cnstrc-item-id=${this.product.id}
        data-cnstrc-item-name=${this.product.title}
        data-cnstrc-item-price=${renderPrice(this.rawPrice,{includeCurrencySymbol:!1,convertToUSD:!0})}
        data-cnstrc-item-variation-id=${this.constructorSelectedId}
      >
        ${when(this.quickAddEnabled&&this.isSingleVariant||isComingSoon,()=>html`
            <div class="quick-add-cta">
              <button
                class=${classMap({disabled:!available||isComingSoon,uppercase:!0})}
                data-index="0"
                @click=${this._handleAddToCart}
                data-cnstrc-btn="add_to_cart"
                @mouseenter=${this._selectConstructorVariant}
              >
              ${isComingSoon?comingSoonTranslation:available?addToBagTranslation:outOfStockTranslation}
                  ${when(!!this.renderedComparePrice&&!isComingSoon,()=>html`<s>${this.renderedComparePrice}</s>`,()=>nothing)}
                  ${when(!isComingSoon,()=>html`<span class="${this.renderedComparePrice?"price--markdown":""}">
                      ${this.renderedPrice}
                      </span>`,()=>nothing)}
            
              </button>
            </div>
          `,()=>html`
            <ul>
              ${repeat(this.quickAddProducts,variant=>variant.id,(variant,index)=>html`
                    <li>
                      <button
                        ?disabled=${!variant.available}
                        class=${classMap({p3:!0,disabled:!variant.available,"disabled--strikethrough":!variant.available})}
                        @click=${this._handleAddToCart}
                        data-index=${index}
                        data-cnstrc-btn="add_to_cart"
                        @mouseenter=${()=>this._selectConstructorVariant({id:variant.id})}
                      >
                        ${variant.title}
                      </button>
                    </li>
                  `)}
            </ul>
            ${this.allWidthOptions.length>1?html`
                <div class="quick-add__width">
                  <span class="quick-add__width-label">${widthTranslation}:</span>
                  ${repeat(this.allWidthOptions,width=>`${this.product.id}-${width}`,width=>html`
                      <button
                        ?checked=${this.selectedWidth===width}
                        data-width="${width}"
                        @click=${this._handleWidthSelected}
                      >
                        ${width}
                      </button>
                    `)}
                </div>
              `:nothing}
          `)}
      </div>
    `};_renderQuickView=()=>html`
    <div class="quick-view-container">
      <div class="quick-view-cta">
        <a @click=${e=>{this._handleOpenQuickViewModal(e)}} role="button" aria-label="${t("sections.quick_view.aria_label")}">${t("sections.quick_view.cta_label")}</a>
      </div>
    </div>
    `;_renderHeader(){return html`
      <div class="header">
        <div class=${classMap({"badge-wrapper":!0,"badge-wrapper--short":this.isSearch})}">
          ${when(this.primaryBadge&&!this.hideBadges,()=>html`
              ${this._renderPrimaryBadge()}
            `,()=>nothing)}
        </div>
        ${when(this.hideWishlistIcon,()=>nothing,this._renderWishlistIcon)}
      </div>
    `}_renderFooter(){const showSecondaryBadge=this.secondaryBadge&&!this.hideBadges,showColorText=this.productTitle.color&&!this.hideProductColorCount;return html`
      <div class=${classMap({footer:!0,"footer--us":this.usPricing,"footer--no-secondary-badge":!showSecondaryBadge,"footer--search":this.isSearch})}>
        <div class="info" data-product-handle=${this.product.handle}>
          <div class="title">
            ${when(this.productTitle.style,()=>html`<h3 class="p3" role="presentation"><strong>${this.productTitle.style}</strong></h3>`,()=>nothing)}
            ${when(showColorText,()=>html`<small class="footer__color">${this.productTitle.color}</small>`,()=>nothing)}
             ${when(this.colorCount&&!this.hideProductColorCount,()=>html`<div class="footer__count">${this.colorCount} ${this.colorCount>1?"Colors":"Color"}</div>`,()=>nothing)}
          </div>
          <div
            class="price p3 
              ${this.renderedComparePrice?"price--markdown":""}
              ${this.isSearch?"price--narrow":""}"
            data-cnstrc-item-price=${renderPrice(this.rawPrice,{includeCurrencySymbol:!1,convertToUSD:!0})}
          >
            ${when(!!this.renderedComparePrice,()=>html`<s>${this.renderedComparePrice}</s>`,()=>nothing)}
            ${this.renderedPrice}
          </div>
        </div>
        ${when(showSecondaryBadge,()=>html`
            <div class="badge2 p4">
              ${this.secondaryBadge}
            </div>
          `,()=>nothing)}
        ${when(!this.isGiftCard&&this.quickAddEnabled&&!this.isMobile,()=>this._renderQuickAdd(),()=>nothing)}
        ${when(!this.isGiftCard&&this.quickViewEnabled&&this.isMobile,this._renderQuickView,()=>nothing)}
      </div>
    `}render(){return this._renderWithProductLink(()=>html`
        ${this._renderHeader()}
        ${this._renderThumbnail()}
        ${this._renderFooter()}
      `)}static styles=[styles.color,styles.flex,styles.typography,css`
      :host {
        background-color: var(--dna-color-sandstone);
        color: var(--dna-color-midnight);
        border: 1px solid #03143B40;
        border-top: 0;
        border-left: 0;
        border-right-color: var(--dna-brand-reverse);
        border-bottom-color: var(--dna-brand-reverse);
        display: flex;
        flex-direction: column;
        flex: 1 0 25%;
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
      :host([is-search="true"]) {
        display: block;
        border: 1px solid var(--dna-brand-reverse);
      }
      h3 {
        margin: 0;
      }
      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
      }
      .badge-wrapper {
        height: var(--dna-space-8);
        width: 100%;
      }
      .badge {
        padding: var(--dna-space-2);
        text-transform: uppercase;

        span {
          display: inline-block;
          padding: var(--dna-space-1) calc(var(--dna-space-3) / 2);
        }
      }
      .badge2 {
        border: thin solid var(--dna-color-midnight);
        display: inline-block;
        font-size: 11px;
        line-height: 1;
        margin-top: var(--dna-space-3);
        padding: var(--dna-space-1) var(--dna-space-2);
      }
      :host([is-search="true"]) .badge {
        padding: var(--dna-space-2);

        span {
          overflow-x: hidden;
          white-space: nowrap;
          max-width: 66%;
          text-overflow: ellipsis;
        }
      }
      .price {
        display: flex;
        justify-content: flex-end;
        justify-content: left;
        gap: var(--dna-space-2);
      }
      .price--markdown {
        color: var(--dna-utility-attention);
      }
      .price--markdown s {
        color: var(--dna-color-midnight);
      }
      .thumbnail {
        aspect-ratio: 3 / 4;
        display: flex;
        height: 100%;
        width: 100%;
        position: relative;
        transition: opacity 0.5s ease;
      }
      .thumbnail--mobile {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        height: auto;
      }
      .thumbnail--mobile::-webkit-scrollbar {
        display: none;
        scrollbar-width: none;
      }
      .card-image-link {
        display: block;
        height: 100%;
      }
      .thumbnail__image {
        scroll-snap-align: start;
        display: block;
        flex-shrink: 0;
        transition: opacity .5s ease;
        height: 100%;
        width: 100%;
      }
      .thumbnail__image--featured {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .thumbnail__image--hover {
        pointer-events: none;
      }
      .thumbnail__image--hover a {
        pointer-events: all;
      }
      .thumbnail__pagination-indicator {
        position: relative;
        border-top: thin solid var(--dna-brand-primary);
        height: 0;
        width: calc(50% - var(--dna-space-2));
        transition: transform .2s ease;
      }
      .thumbnail__pagination-indicator--left {
        transform: translateX(var(--dna-space-2));
      }
      .thumbnail__pagination-indicator--right {
        transform: translateX(calc(100% + var(--dna-space-2)));
      }
      .thumbnail__image--editorial {
        display: block;
      }
      .thumbnail__image--hover-editorial {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      @media screen and (min-width: 1025px) {
        .thumbnail__image--hover {
          position: absolute;
          top: 0;
          opacity: 0;
        }
      :host(:focus-visible) .thumbnail:not(.thumbnail--no-hover) .thumbnail__image--featured,
        :host(:hover) .thumbnail:not(.thumbnail--no-hover) .thumbnail__image--featured {
          opacity: 0;
          pointer-events: none;
        }
        :host(:focus-visible) .thumbnail:not(.thumbnail--no-hover) .thumbnail__image--hover,
        :host(:hover) .thumbnail__image--hover {
          opacity: 1;
        }
        .thumbnail__image--editorial {
          display: block;
          top: 0;
          position: absolute;
        }
      }
      .product-card-item__link {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        color: inherit;
        text-decoration: inherit;
      }
      status-favorite-button {
        margin-right: var(--dna-space-3);
        margin-top: var(--dna-space-3);
        --icon-stroke-filled: var(--dna-color-midnight);
        --icon-fill-filled: var(--dna-color-midnight);
        --icon-background: transparent;
        --icon-shadow-color: transparent;
        --icon-size: 16px;
        position: absolute;
        top: 0;
        right: 0;
        padding-left: 10px;
        padding-bottom: 10px;
        z-index: var(--dna-z-index-content);
        visibility: hidden;
      }
      @media screen and (max-width: 1024px) {
        .badge-wrapper {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          z-index: 1;
        }
        status-favorite-button {
          margin-right: 0;
          margin-top: 0;
        }
        status-favorite-button::part(button) {
          padding-left: 5px;
          padding-bottom: 5px;
        }
      }
      status-favorite-button::part(button) {
        padding-top: var(--dna-space-4);
        padding-right: var(--dna-space-4);
      }
      @media screen and (max-width: 1024px) {
        status-favorite-button::part(button) {
          padding-top: var(--dna-space-2);
          padding-right: var(--dna-space-2);
        }
      }
      status-favorite-button::part(icon-wrapper) {
        width: unset;
        height: unset;
      }
      status-favorite-button.is-active {
        visibility: visible;
      }
      .quick-add {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        background-color: var(--dna-color-sandstone);
        color: var(--dna-color-midnight);
        font: var(--dna-body-p3-font);
        letter-spacing: 2px;
        min-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: opacity .25s ease;
        z-index: 10;
      }
      :host(:hover) .quick-add {
        top: unset;
        bottom: 0;
        min-height: 100%;
        opacity: 1;
      }
      .quick-view-cta {
        font: var(--dna-body-p3-font);
        font-size: 11px;
        text-transform: uppercase;
        text-decoration: underline;
        letter-spacing: 2px;
        margin-top: 16px;
      }
      @media screen and (min-width: 1025px) {
        .quick-view-cta {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 0;
          overflow: hidden;
          transition: height 0.3s ease;
          background-color: transparent;
          color: var(--dna-color-midnight);
          z-index: 10;
          text-align: center;
          align-items: center;
          margin-top: 14px;
          justify-content: center;
          font-weight: 500;
          background-color: rgba(244, 242, 239, 0.5);
        }
        .quick-view-container {
          margin-top: 0;
        }
        :host(:hover) .quick-view-cta {
          height: 46px;
          display: flex;
        }
      }
      .quick-view-cta a {
        cursor: pointer;
      }
      .quick-add-cta {
        text-align: center;
      }
      .quick-add-cta button {
        letter-spacing: 2px;
      }
      .quick-add ul {
        display: flex;
        flex-flow: wrap;
        justify-content: center;
        list-style-type: none;
        margin: 0;
        padding: var(--dna-space-4) calc(var(--dna-space-8) - var(--dna-space-0-5)) 0;
      }
      .quick-add li:not(:last-child) {
        padding-right: 6px;
        padding-bottom: 16px;
      }
      .quick-add button {
        background-color: transparent;
        border: none;
        cursor: pointer;
        color: var(--dna-color-midnight);
      }
      .quick-add button.disabled {
        pointer-events: none;
      }
      .quick-add button.disabled--strikethrough {
        text-decoration: line-through;
        color: rgba(3, 20, 59, 0.5);
      }
      .quick-add__width {
        padding-bottom: 12px;
        display: flex;
        align-items: center;
      }
      .quick-add__width-label {
        letter-spacing: 0.5px;
        font: var(--dna-body-p3-font);
        margin-right: 8px;
      }
      .quick-add__width button {
        border: 1px solid #DCDBDD;
        padding: 5px 14px;
        font: var(--dna-body-p3-font);
      }
      .quick-add__width button[checked] {
        background-color: var(--dna-color-midnight);
        color: var(--dna-brand-reverse);
      }
      .quick-add__width button[checked]:first-of-type {
        border-right: none;
      }
      .quick-add__width button[checked]:nth-of-type(2) {
        border-left: none;
      }
      .footer {
        background-color: var(--dna-color-sandstone);
        flex: 1 1 auto;
        padding: var(--dna-space-2);
        position: relative;
      }
      .footer__color {
        font: var(--dna-body-p3-font);
      }
      .footer__count {
        font: var(--dna-body-p3-font);
      }
      @media screen and (max-width: 1024px) {
        .footer {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-between;
        }
      }
      /* breakpoint-small desktop for search adjustments */
      @media screen and (min-width: 1024px) and (max-width: 1155px) {
        .footer--us.footer--search .price {
          min-width: 50px;
        }
      }
      /* breakpoint-desktop */
      @media screen and (min-width: 1024px) {
        .header {
          position: absolute;
          top: 0;
          z-index: var(--dna-z-index-content);
        }
        .badge {
          padding: var(--dna-space-4);
          z-index: var(--dna-z-index-content);
          font: var(--dna-label-s-font);

          span {
            padding: var(--dna-space-2);
          }
        }
        :host([is-search="true"]) .badge {
          padding: var(--dna-space-2);

          span {
            overflow-x: hidden;
            white-space: nowrap;
            max-width: 74%;
            text-overflow: ellipsis;
          }
        }
        .badge2 {
          font: var(--dna-body-p3-font);
          line-height: 14px;
        }
        .quick-add {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
        .price {
          display: flex;
          flex-direction: unset;
        }
        .badge-wrapper {
          height: 60px;
        }
        .badge-wrapper--short {
          height: 46px;
        }
        :host([is-search="true"]) .badge-wrapper {
          height: 30px;
        }
        .footer {
          padding: var(--dna-space-3) var(--dna-space-4) var(--dna-space-4) var(--dna-space-4);
        }
        .footer.footer--search {
          padding: calc(var(--dna-space-3) / 2) var(--dna-space-2) var(--dna-space-2);
        }
        .footer--us .price {
          min-width: 80px;
          text-align: right;
          justify-content: right;
        }
        .footer--us .info {
          display: flex;
          justify-content: space-between;
          gap: var(--dna-space-2);
        }
        .thumbnail {
          height: unset;
          padding-bottom: 0;
        }
        :host(.product-card__product-carousel) .thumbnail {
          aspect-ratio: .82;
        }
        .footer .p3 {
          font: var(--dna-body-p2-font);
        }
        .footer__color {
          font: var(--dna-body-p2-font);
        }
        .footer__count {
          font: var(--dna-body-p2-font);
        }
        :host #swymcs-wishlist-button {
          width: var(--dna-space-10); 
          height: var(--dna-space-10); 
          padding-top: var(--dna-space-2);
        }
      }
      :host #swymcs-wishlist-button {
        cursor: pointer !important;
        position: absolute;
        z-index: 5;
        top: 0;
        right: 0;
        padding: var(--dna-space-2); 
        font-size: var(--dna-space-4); 
        cursor: pointer; 
        opacity: 1 !important; 
        color: #ffffff; 
        background: none; 
        border: unset; 
        display: flex; 
        justify-content: center;
        padding-top: 10px;
      }
      @media screen and (min-width: 1024px) {
        :host #swymcs-wishlist-button {
          top: calc(var(--dna-space-5) / 2);
          right: calc(var(--dna-space-5) / 2);
        }
        :host([is-search="true"]) #swymcs-wishlist-button {
          top: var(--dna-space-0-5);
          right: 0;
        }
      }
    `]}customElements.define("dna-product-card",DNAProductCard);
//# sourceMappingURL=/cdn/shop/t/1163/assets/component-product-card.js.map?v=172743029550743606851760568441