@liquidcommerceteam/elements-sdk/umd/liquidcommerce-elements-sdk.min.js

LiquidCommerce Elements SDK

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((t="undefined"!=typeof globalThis?globalThis:t||self).LiquidCommerceElements={})}(this,function(t){"use strict";var n,e,i,o,r,s,a,c;!function(t){t.OOS="OutOfStock",t.ITEMS_NOT_ADDED="ItemsNotAdded",t.ITEMS_REQUESTED_NOT_ADDED="ItemsRequestedNotAdded",t.ITEM_NOT_ENGRAVED="ItemEngravingError",t.ADDRESS_CHANGE="AddressChange",t.LOCATION_AVAILABILITY="LocationAvailability",t.PARTNER_PRODUCT_CONFIGS="PartnerProductConfigs",t.REMOVED_EXISTING_ITEMS="RemovedExistingCartItems",t.RETAILER_MIN="RetailerMinNotMet",t.NO_ITEMS_IN_CART="NoItemsInCart",t.INVALID_ID="InvalidId",t.NO_ID="NoId",t.CART_CHECKOUT_PROCESSED="CartCheckoutProcessed",t.NEW_CART="NewCart",t.DEFAULT="CartError",t.ITEM_QTY_CHANGE="ItemQuantityChange",t.ITEM_ID_NOT_FOUND="ItemIdNotFound",t.ITEMS_REMOVED="ItemsRemoved",t.COUPON_PROCESSING_ERROR="CouponProcessingError",t.COUPON_NOT_FOUND="CouponNotFound",t.COUPON_EXPIRED="CouponExpired",t.NO_APPLICABLE_DISCOUNT="NoApplicableDiscount",t.COUPON_NOT_STARTED="CouponNotStarted",t.MINIMUM_ORDER_VALUE_NOT_MET="MinimumOrderValueNotMet",t.MINIMUM_ORDER_UNITS_NOT_MET="MinimumOrderUnitsNotMet",t.MINIMUM_DISTINCT_ITEMS_NOT_MET="MinimumDistinctItemsNotMet",t.QUOTA_EXCEEDED="QuotaExceeded",t.USER_LIMIT_EXCEEDED="UserLimitExceeded",t.NOT_FIRST_PURCHASE="NotFirstPurchase",t.INVALID_COUPON="InvalidCoupon",t.INVALID_MEMBERSHIP="InvalidMembership",t.INVALID_DOMAIN="InvalidDomain",t.INVALID_REQUIREMENTS="InvalidRequirements",t.INVALID_ORGANIZATION="InvalidOrganization",t.PRODUCT_NOT_ELIGIBLE="ProductNotEligible",t.NOT_ENOUGH_PREVIOUS_ORDERS="NotEnoughPreviousOrders",t.PRESALE_ITEMS_NOT_ALLOWED="PresaleItemsNotAllowed",t.PRESALE_LIMIT_EXCEEDED="PresaleLimitExceeded",t.PRESALE_NOT_STARTED="PresaleNotStarted",t.PRESALE_EXPIRED="PresaleExpired",t.PRESALE_MIXED_CART="PresaleMixedCart"}(n||(n={})),function(t){t.ERROR_PROCESSING_GIFT_CARDS="ErrorProcessingGiftCards",t.INVALID_GIFT_CARD_CODE="InvalidGiftCardCodes",t.INVALID_GIFT_CARD_PARTNER="InvalidGiftCardPartner",t.INACTIVE_GIFT_CARD="InactiveGiftCard",t.GIFT_CARD_ALREADY_IN_USE="GiftCardAlreadyInUse",t.GIFT_CARD_EXPIRED="GiftCardExpired",t.GIFT_CARD_BALANCE_DEPLETED="GiftCardBalanceDepleted"}(e||(e={})),function(t){t.SHIPPING="shipping",t.BILLING="billing"}(i||(i={})),function(t){t.LOCAL="local",t.DEVELOPMENT="development",t.STAGING="staging",t.PRODUCTION="production"}(o||(o={})),function(t){t.CLIENT_INITIALIZED="clientInitialized",t.PRODUCT_LOADED="productLoaded",t.PRODUCT_QUANTITY_INCREASE="productQuantityIncrease",t.PRODUCT_QUANTITY_DECREASE="productQuantityDecrease",t.PRODUCT_ADD_TO_CART="productAddToCart",t.CART_INITIALIZED="cartInitialized",t.CART_CLOSED="cartClosed",t.CART_OPENED="cartOpened",t.CART_UPDATED="cartUpdated",t.ADDRESS_UPDATED="addressUpdated",t.CHECKOUT_INITIALIZED="checkoutInitialized",t.CHECKOUT_OPENED="checkoutOpened",t.CHECKOUT_CLOSED="checkoutClosed",t.CHECKOUT_UPDATED="checkoutUpdated"}(r||(r={})),function(t){t.CI_FIRST_NAME_INPUT="ciFirstNameInput",t.CI_LAST_NAME_INPUT="ciLastNameInput",t.CI_EMAIL_INPUT="ciEmailInput",t.CI_PHONE_INPUT="ciPhoneInput",t.CI_BIRTHDATE_INPUT="ciBirthDateInput",t.CI_ADDRESS_TWO_INPUT="ciAddressTwoInput",t.CI_COMPANY_INPUT="ciCompanyInput",t.GI_FIRST_NAME_INPUT="giFirstNameInput",t.GI_LAST_NAME_INPUT="giLastNameInput",t.GI_EMAIL_INPUT="giEmailInput",t.GI_PHONE_INPUT="giPhoneInput",t.GI_BIRTHDATE_INPUT="giBirthDateInput",t.GI_ADDRESS_TWO_INPUT="giAddressTwoInput",t.GI_COMPANY_INPUT="giCompanyInput",t.GI_MESSAGE_INPUT="giMessageInput",t.BI_FIRST_NAME_INPUT="biFirstNameInput",t.BI_LAST_NAME_INPUT="biLastNameInput",t.BI_EMAIL_INPUT="biEmailInput",t.BI_PHONE_INPUT="biPhoneInput",t.BI_COMPANY_INPUT="biCompanyInput",t.BI_ADDRESS_ONE_INPUT="biAddressOneInput",t.BI_ADDRESS_TWO_INPUT="biAddressTwoInput",t.BI_CITY_INPUT="biCityInput",t.BI_STATE_INPUT="biStateInput",t.BI_ZIP_INPUT="biZipInput"}(s||(s={})),function(t){t.DRAWER="drawer",t.INPUT="input",t.BIRTHDATE_INPUT="birthdate-input",t.ENGRAVING_FORM="engraving-form",t.BUTTONS_CART_OPEN="buttons-cart-open",t.ADDRESS="address",t.PRODUCT="product",t.PRODUCT_IMAGE_CAROUSEL="product-image-carousel",t.PRODUCT_OPTIONS="product-options",t.PRODUCT_INTERACTIONS="product-interactions",t.PRODUCT_DESCRIPTION="product-description",t.PRODUCT_RETAILERS="product-retailers",t.PRODUCT_RETAILERS_CAROUSEL="product-retailers-carousel",t.PRODUCT_RETAILERS_POPUP="product-retailers-popup",t.PRODUCT_RETAILERS_POPUP_LIST="product-retailers-popup-list",t.PRODUCT_PRICE="product-price",t.PRODUCT_ADD_TO_CART_SECTION="product-add-to-cart-section",t.PRODUCT_ENGRAVING="product-engraving",t.PRODUCT_DRAWER="product-drawer",t.PRODUCT_LOADING="product-loading",t.CART="cart",t.CART_RETAILER="cart-retailer",t.CART_ITEM="cart-item",t.CART_ITEM_ENGRAVING="cart-item-engraving",t.CART_FOOTER="cart-footer",t.CART_ITEM_QUANTITY_PRICE="cart-item-quantity-price",t.CART_RETAILER_SUBTOTAL="cart-retailer-subtotal",t.CART_PROMO_CODE="cart-promo-code",t.CART_HEADER="cart-header",t.CART_BODY="cart-body",t.CART_FULFILLMENT="cart-fulfillment",t.CART_RETAILER_ALERT="cart-retailer-alert",t.CHECKOUT="checkout",t.CHECKOUT_INFORMATION_SECTION="checkout-information-section",t.CHECKOUT_STRIPE_FORM="checkout-stripe-form",t.CHECKOUT_PAYMENT_FORM="checkout-payment-form",t.CHECKOUT_BILLING_FORM="checkout-billing-form",t.CHECKOUT_SUMMARY_SECTION="checkout-summary-section",t.CHECKOUT_PROMO_CODE="checkout-promo-code",t.CHECKOUT_GIFT_CARDS="checkout-gift-cards",t.CHECKOUT_AMOUNTS="checkout-amounts",t.CHECKOUT_ITEMS="checkout-items",t.CHECKOUT_COMPLETED="checkout-completed",t.CHECKOUT_DELIVERY_INFORMATION_FORM="checkout-delivery-information-form",t.CHECKOUT_BUYER_INFORMATION_FORM="checkout-buyer-information-form",t.CHECKOUT_TIPS="checkout-tips",t.CHECKOUT_PC_GC="checkout-pc-gc",t.CHECKOUT_ITEM="checkout-item",t.CHECKOUT_ITEM_QUANTITY="checkout-item-quantity",t.CHECKOUT_PLACE_ORDER_BUTTON="checkout-place-order-button"}(a||(a={})),function(t){t.ON_DEMAND="onDemand",t.SHIPPING="shipping"}(c||(c={}));const l={[o.LOCAL]:"http://0.0.0.0:8080",[o.DEVELOPMENT]:"https://dev.elements.liquidcommerce.cloud",[o.STAGING]:"https://staging.elements.liquidcommerce.cloud",[o.PRODUCTION]:"https://elements.liquidcommerce.cloud"};class d{constructor(){}static setClientConstructor(t){d.clientConstructor=t}static getClientConstructor(){return d.clientConstructor}static getClassInstance(t,n){d.instances.has(t)||d.instances.set(t,n());const e=d.instances.get(t);if(!e)throw new Error(`ElementsSdk: Instance for class ${t} could not be created.`);return e}static async getClient(t){const n=`LiquidCommerceElementsClient_${["apiKey","env","isBuilder","enableDebugging"].map(n=>t[n]).join("_")}`;if(d.instances.has(n))return d.instances.get(n);if(!d.clientConstructor)throw new Error("LiquidCommerce Elements: Client constructor is not set.");const e=new d.clientConstructor(t);return await e.prepare(),d.instances.set(n,e),e}}d.instances=new Map,d.clientConstructor=null;class h{constructor(){this.config=null}static getInstance(){return d.getClassInstance("ClientConfigService",()=>new h)}initialize(t,n={}){this.validateInputs(t,n),this.config=Object.freeze(this.buildConfiguration(t,n))}getConfigs(){return this.ensureInitialized(),{...this.config}}get(t){return this.ensureInitialized(),this.config[t]}isInitialized(){return null!==this.config}isDevelopment(){return this.get("env")===o.DEVELOPMENT}isStaging(){return this.get("env")===o.STAGING}isProduction(){return this.get("env")===o.PRODUCTION}isBuilder(){return this.get("isBuilder")}isDebuggingEnabled(){return this.get("enableDebugging")}debuggingDisabled(){return!this.get("enableDebugging")}hasCustomTheme(){return null!==this.get("customTheme")}validateInputs(t,n){if(!(null==t?void 0:t.trim()))throw new Error("LiquidCommerce Elements: API key is required");if(n.env&&!Object.values(o).includes(n.env))throw new Error(`LiquidCommerce Elements: Invalid environment "${n.env}"`)}buildConfiguration(t,n){var e,i;const r=n.env||o.STAGING,s=l[r];if(!s)throw new Error(`LiquidCommerce Elements: No base URL configured for environment "${r}"`);return{apiKey:t.trim(),env:r,isBuilder:null!==(e=n.isBuilder)&&void 0!==e&&e,enableDebugging:null!==(i=n.enableDebugging)&&void 0!==i&&i,baseUrl:s,customTheme:n.customTheme||null}}ensureInitialized(){if(null===this.config)throw new Error("LiquidCommerce Elements: Not initialized. Call initialize() first.")}}class u{constructor(t){this.prefix="LiquidCommerce Elements",this.colors={debug:"#9CA3AF",log:"#60A5FA",info:"#22D3EE",warn:"#FB923C",error:"#F87171",prefix:"#C084FC"},this.timestamp=!0,this.useColors=!0,this.enableLogging=!1,this.context=t}static getInstance(t){return d.getClassInstance("LoggerService",()=>new u(t))}setEnableLogging(t){this.enableLogging=t}getTimestamp(){return this.timestamp?(new Date).toISOString().slice(11,23):""}getPrefix(t){if(!this.enableLogging)return[];const n=this.getTimestamp(),e=n?`${n} `:"",i=this.context?` ${this.context}`:"";return this.useColors?[`%c[${e}%c${this.prefix}%c${i}%c]`,`color: ${this.colors[t]}`,`color: ${this.colors.prefix}; font-weight: bold`,`color: ${this.colors[t]}`,`color: ${this.colors[t]}`]:[`[${e}${this.prefix}${i}]`]}debug(...t){if(!this.enableLogging)return;const[n,...e]=this.getPrefix("debug");console.debug(n,...e,...t)}log(...t){if(!this.enableLogging)return;const[n,...e]=this.getPrefix("log");console.log(n,...e,...t)}info(...t){if(!this.enableLogging)return;const[n,...e]=this.getPrefix("info");console.info(n,...e,...t)}warn(...t){if(!this.enableLogging)return;const[n,...e]=this.getPrefix("warn");console.warn(n,...e,...t)}error(...t){if(!this.enableLogging)return;const[n,...e]=this.getPrefix("error");console.error(n,...e,...t)}group(t,n=!1){if(!this.enableLogging)return;const[e,...i]=this.getPrefix("log");n?console.groupCollapsed(e,...i,t):console.group(e,...i,t)}groupEnd(){this.enableLogging&&console.groupEnd()}table(t){if(!this.enableLogging)return;const[n,...e]=this.getPrefix("log");console.log(n,...e,"Table data:"),console.table(t)}}class p{constructor(){this.isInitialized=!1,this.isInitializing=!1,this.containerLoadStatus=[],this.currency="USD",this.SCRIPT_LOAD_TIMEOUT=5e3,this.logger=u.getInstance(),this.eventQueue=[],this.MAX_QUEUE_SIZE=100,this.QUEUE_TIMEOUT=3e4,this.clientConfigService=h.getInstance()}static getInstance(){return d.getClassInstance("GoogleTagManagerService",()=>new p)}waitForDOMReady(){return new Promise(t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>t()):t()})}initializeGtag(){try{return window.dataLayer=window.dataLayer||[],window.gtag=(...t)=>{window.dataLayer.push(t)},window.dataLayer.push({"gtm.start":Date.now(),event:"gtm.js"}),"function"==typeof window.gtag||(this.logger.error("GTM initialization failed: gtag function not properly initialized"),!1)}catch(t){return this.logger.error("GTM initialization failed:",t),!1}}loadGTMScript(t){return new Promise((n,e)=>{try{const i=document.createElement("script");i.src=`https://www.googletagmanager.com/gtm.js?id=${t}`,i.async=!0;const o=setTimeout(()=>{i.onerror=null,i.onload=null,e(new Error(`GTM script load timeout for container ${t}`))},this.SCRIPT_LOAD_TIMEOUT);i.onload=()=>{clearTimeout(o),this.logger.info(`GTM container ${t} loaded successfully`),n()},i.onerror=()=>{clearTimeout(o),e(new Error(`Failed to load GTM container ${t}`))},document.head.appendChild(i)}catch(n){e(new Error(`Error creating script for container ${t}: ${n}`))}})}async loadAllContainers(t){const n=t.map(async t=>{const n={containerId:t,loaded:!1};try{await this.loadGTMScript(t),n.loaded=!0}catch(e){n.error=e instanceof Error?e.message:"Unknown error",this.logger.warn(`GTM container ${t} failed to load:`,n.error)}this.containerLoadStatus.push(n)});await Promise.all(n);const e=this.containerLoadStatus.filter(t=>!t.loaded);if(e.length>0){this.logger.warn(`GTM partial initialization: ${e.length} of ${t.length} containers failed to load`);for(const t of e)this.logger.warn(`Failed container: ${t.containerId} - ${t.error}`)}const i=this.containerLoadStatus.filter(t=>t.loaded);if(0===i.length)throw new Error("All GTM containers failed to load");this.logger.info(`GTM initialization complete: ${i.length} of ${t.length} containers loaded successfully`)}processEventQueue(){if(0===this.eventQueue.length)return;const t=[];for(const n of this.eventQueue)try{const e=Date.now()-n.timestamp;if(e>this.QUEUE_TIMEOUT){this.logger.warn(`Skipping stale queued event: ${n.methodName} (${e}ms old)`);continue}window.gtag("event",n.eventName,n.eventData),t.push(n)}catch(t){this.logger.error(`Error processing queued event ${n.methodName}:`,t)}this.eventQueue=[]}queueEvent(t,n,e){this.eventQueue.length>=this.MAX_QUEUE_SIZE&&(this.logger.warn(`GTM event queue full. Dropping oldest event to make room for: ${t}`),this.eventQueue.shift());const i={methodName:t,eventName:n,eventData:e,timestamp:Date.now()};this.eventQueue.push(i)}async initialize(t){if(this.isInitialized||this.isInitializing)return this.initializationPromise;if(this.clientConfigService.isBuilder()||!t)return Promise.resolve();this.isInitializing=!0,this.initializationPromise=this.t(t);try{await this.initializationPromise}catch(t){throw this.isInitializing=!1,this.initializationPromise=void 0,t}return this.initializationPromise}async t(t){try{if(!t.partnerName)throw new Error("GTM initialization failed: partnerName is required");const n=[];if(t.partnerEnableGaTracking&&t.partnerGtmId){if(!t.partnerGtmId.startsWith("GTM-"))throw new Error(`Invalid Partner GTM Container ID format: ${t.partnerGtmId}. Must start with "GTM-"`);n.push(t.partnerGtmId)}if(t.liquidCommerceEnableGaTracking&&t.liquidCommerceGtmId){if(!t.liquidCommerceGtmId.startsWith("GTM-"))throw new Error(`Invalid LiquidCommerce GTM Container ID format: ${t.liquidCommerceGtmId}. Must start with "GTM-"`);n.push(t.liquidCommerceGtmId)}if(0===n.length)return this.logger.warn("GTM initialization skipped: No tracking containers enabled"),this.isInitialized=!0,void(this.isInitializing=!1);if(await this.waitForDOMReady(),!this.initializeGtag())throw new Error("GTM initialization failed: Could not initialize gtag function");await this.loadAllContainers(n),this.partnerName=t.partnerName,this.isInitialized=!0,this.isInitializing=!1,this.processEventQueue()}catch(t){throw this.isInitializing=!1,this.logger.error("GTM initialization failed:",t),t}}safeExecute(t,n,e){try{if(this.clientConfigService.isBuilder())return;if(!this.isInitialized){const i=e();return void this.queueEvent(t,n,i)}const i=e();window.gtag("event",n,i)}catch(n){this.logger.error(`GTM ${t} error:`,n)}}validateItem(t){if(!t.item_id&&!t.item_name)throw new Error("Either item_id or item_name is required")}formatItemForEvent(t){return this.validateItem(t),{...t,quantity:t.quantity||1,price:t.price||0}}calculateValue(t){return t.reduce((t,n)=>t+(n.price||0)*(n.quantity||1),0)}addSourceTracking(t){return{...t,tenant_source:"LiquidCommerce Elements SDK v1.0.0",tenant_name:this.partnerName}}viewItem(t){this.safeExecute("viewItem","view_item",()=>{const n={currency:this.currency,value:this.calculateValue([t]),items:[this.formatItemForEvent(t)]};return this.addSourceTracking(n)})}viewItemList(t,n,e){this.safeExecute("viewItemList","view_item_list",()=>{const i={currency:this.currency,item_list_id:n,item_list_name:e,items:t.map(t=>this.formatItemForEvent(t))};return this.addSourceTracking(i)})}selectItem(t,n,e){this.safeExecute("selectItem","select_item",()=>{const i={item_list_id:n,item_list_name:e,items:[this.formatItemForEvent(t)]};return this.addSourceTracking(i)})}addToCart(t){this.safeExecute("addToCart","add_to_cart",()=>{const n={currency:this.currency,value:this.calculateValue([t]),items:[this.formatItemForEvent(t)]};return this.addSourceTracking(n)})}viewCart(t){this.safeExecute("viewCart","view_cart",()=>{const n={currency:this.currency,value:this.calculateValue(t),items:t.map(t=>this.formatItemForEvent(t))};return this.addSourceTracking(n)})}removeFromCart(t){this.safeExecute("removeFromCart","remove_from_cart",()=>{const n={currency:this.currency,value:this.calculateValue([t]),items:[this.formatItemForEvent(t)]};return this.addSourceTracking(n)})}beginCheckout(t,n){this.safeExecute("beginCheckout","begin_checkout",()=>{const e={currency:this.currency,value:this.calculateValue(t),coupon:n,items:t.map(t=>this.formatItemForEvent(t))};return this.addSourceTracking(e)})}addShippingInfo(t,n,e){this.safeExecute("addShippingInfo","add_shipping_info",()=>{const i={currency:this.currency,value:this.calculateValue(t),shipping_tier:n,coupon:e,items:t.map(t=>this.formatItemForEvent(t))};return this.addSourceTracking(i)})}addPaymentInfo(t,n,e){this.safeExecute("addPaymentInfo","add_payment_info",()=>{const i={currency:this.currency,value:this.calculateValue(t),payment_type:n,coupon:e,items:t.map(t=>this.formatItemForEvent(t))};return this.addSourceTracking(i)})}purchase(t){this.safeExecute("purchase","purchase",()=>{const n={transaction_id:t.transaction_id,value:t.value,currency:this.currency,tax:t.tax,shipping:t.shipping,coupon:t.coupon,items:t.items.map(t=>this.formatItemForEvent(t))};return this.addSourceTracking(n)})}increaseQuantity(t){this.safeExecute("increaseQuantity","add_to_cart",()=>{const n={currency:this.currency,value:t.price||0,items:[this.formatItemForEvent({...t,quantity:1})]};return this.addSourceTracking(n)})}decreaseQuantity(t){this.safeExecute("decreaseQuantity","remove_from_cart",()=>{const n={currency:this.currency,value:t.price||0,items:[this.formatItemForEvent({...t,quantity:1})]};return this.addSourceTracking(n)})}}const f=[a.ADDRESS,a.PRODUCT,a.CART,a.CHECKOUT],m=[a.PRODUCT,a.PRODUCT_IMAGE_CAROUSEL,a.PRODUCT_OPTIONS,a.PRODUCT_INTERACTIONS,a.PRODUCT_DESCRIPTION,a.PRODUCT_RETAILERS_CAROUSEL,a.PRODUCT_RETAILERS_POPUP,a.PRODUCT_RETAILERS_POPUP_LIST,a.PRODUCT_PRICE,a.PRODUCT_ADD_TO_CART_SECTION,a.PRODUCT_ENGRAVING,a.PRODUCT_DRAWER,a.PRODUCT_LOADING],g=[a.ADDRESS],y=[a.CART,a.CART_RETAILER,a.CART_ITEM,a.CART_ITEM_ENGRAVING,a.CART_FOOTER,a.CART_ITEM_QUANTITY_PRICE,a.CART_RETAILER_SUBTOTAL,a.CART_PROMO_CODE,a.CART_HEADER,a.CART_BODY,a.CART_FULFILLMENT,a.CART_RETAILER_ALERT],v=[a.CHECKOUT,a.CHECKOUT_INFORMATION_SECTION,a.CHECKOUT_PAYMENT_FORM,a.CHECKOUT_STRIPE_FORM,a.CHECKOUT_BILLING_FORM,a.CHECKOUT_SUMMARY_SECTION,a.CHECKOUT_PROMO_CODE,a.CHECKOUT_GIFT_CARDS,a.CHECKOUT_COMPLETED,a.CHECKOUT_DELIVERY_INFORMATION_FORM,a.CHECKOUT_BUYER_INFORMATION_FORM,a.CHECKOUT_TIPS,a.CHECKOUT_PC_GC,a.CHECKOUT_ITEM,a.CHECKOUT_ITEM_QUANTITY];a.DRAWER,a.INPUT,a.ENGRAVING_FORM;class x{constructor(){this.googleFontsUrl="",this.defaultFontFamilies=[{name:"Poppins",weights:[400,500,600,700]}]}loadGoogleFonts(t,n="swap"){if(!t||0===t.length)return;const e=[...this.defaultFontFamilies,...t].map(t=>`family=${encodeURIComponent(t.name)}:wght@${t.weights.join(";")}`).join("&"),i=`display=${n}`;this.googleFontsUrl=`https://fonts.googleapis.com/css2?${e}&${i}`,this.injectGoogleFontsResourceHints(),this.injectGoogleFontsLink()}updateGoogleFonts(t,n="swap"){const e=document.querySelector("link[data-liquid-fonts]");this.loadGoogleFonts(t,n),e&&e.remove()}injectGoogleFontsResourceHints(){const t=document.querySelector('link[href="https://fonts.googleapis.com"][rel="preconnect"]'),n=document.querySelector('link[href="https://fonts.gstatic.com"][rel="preconnect"]');if(!t){const t=document.createElement("link");t.rel="preconnect",t.href="https://fonts.googleapis.com",t.setAttribute("data-liquid-fonts-hint",""),document.head.appendChild(t)}if(!n){const t=document.createElement("link");t.rel="preconnect",t.href="https://fonts.gstatic.com",t.crossOrigin="",t.setAttribute("data-liquid-fonts-hint",""),document.head.appendChild(t)}}injectGoogleFontsLink(){if(!this.googleFontsUrl)return;const t=document.createElement("link");t.rel="stylesheet",t.href=this.googleFontsUrl,t.setAttribute("data-liquid-fonts",""),document.head.appendChild(t)}}const b={global:{"headingFont.name":"--heading-font-family","paragraphFont.name":"--paragraph-font-family",buttonCornerRadius:"--button-border-radius",cardCornerRadius:"--card-border-radius",primaryColor:"--primary-color",accentColor:"--accent-color",defaultTextColor:"--default-text-color",selectedTextColor:"--selected-text-color",errorColor:"--error-color",warningColor:"--warning-color",successColor:"--success-color",drawerBackgroundColor:"--drawer-background-color"},product:{backgroundColor:"--product-background-color"},cart:{backgroundColor:"--cart-background-color"},address:{backgroundColor:"--address-background-color"},checkout:{backgroundColor:"--checkout-background-color"}};function w(t){return b[t]||{}}class k{constructor(){this.logger=u.getInstance(),this.opacityLevels=[{suffix:"30",value:.3},{suffix:"50",value:.5},{suffix:"70",value:.7},{suffix:"90",value:.9}]}extractVariablesFromTheme(t,n){const e={},i=w(n);for(const[n,o]of Object.entries(i)){const i=this.getValueByPath(t,n);void 0!==i&&this.isCSSValue(i)&&(e[o]=i,this.isColorVariable(o,i)&&this.generateOpacityVariants(e,o,i))}return e}extractVariablesFromPartialTheme(t,n){const e={},i=w(n);for(const[n,o]of Object.entries(i))if(this.hasValueAtPath(t,n)){const i=this.getValueByPath(t,n);void 0!==i&&this.isCSSValue(i)&&(e[o]=i,this.isColorVariable(o,i)&&this.generateOpacityVariants(e,o,i))}return e}generateCSSVariablesString(t){return Object.entries(t).map(([t,n])=>`  ${t}: ${n};`).join("\n")}updateCSSVariablesInStylesheet(t,n){if(0!==Object.keys(n).length)try{const e=this.findOrCreateRule(t);for(const[t,i]of Object.entries(n))e.style.setProperty(t,String(i))}catch(t){this.logger.warn("Failed to update CSS variables:",t)}}getValueByPath(t,n){return n.split(".").reduce((t,n)=>t&&void 0!==t[n]?t[n]:void 0,t)}hasValueAtPath(t,n){const e=n.split(".");let i=t;for(const t of e){if(null==i||!(t in i))return!1;i=i[t]}return!0}findOrCreateRule(t){const n=":host";for(const e of Array.from(t.cssRules))if(e instanceof CSSStyleRule&&e.selectorText===n)return e;const e=t.insertRule(`${n} {}`);return t.cssRules[e]}isCSSValue(t){if("string"==typeof t){if(""===t.trim())return!1;if(/^(#[0-9a-f]{3,8}|rgb|rgba|hsl|hsla|\d+px|\d+%|\d+rem|\d+em|auto|none|inherit|initial|unset|rounded|squared)/.test(t.toLowerCase()))return!0;if(/^[a-zA-Z0-9\s\-'"]+$/.test(t))return!0;if(/^[a-z-]+$/.test(t))return!0}return"number"==typeof t}generateOpacityVariants(t,n,e){for(const i of this.opacityLevels){const o=`${n}-${i.suffix}`,r=this.addOpacityToHexColor(e,i.value);r&&(t[o]=r)}}isColorVariable(t,n){if("string"!=typeof n)return!1;const e=t.toLowerCase().includes("color"),i=/^#[0-9a-f]{3,8}$/i.test(n);return e&&i}addOpacityToHexColor(t,n){if(!t.startsWith("#"))return null;let e=t.slice(1);return 3===e.length&&(e=e.split("").map(t=>t+t).join("")),6!==e.length?null:`#${e}${Math.round(255*n).toString(16).padStart(2,"0")}`}}class C{constructor(){this.cssProcessor=new k,this.styleSheets=new Map}getStylesheet(t){return this.styleSheets.get(t)}generateSpecificStylesheet(t,n){const e=this.cssProcessor.extractVariablesFromTheme(n,t),i=this.cssProcessor.generateCSSVariablesString(e),o=this.getStylesheetStyles(t).join("\n\n"),r=`\n      ${0===i.length?"":`:host { ${i} }`}\n\n      ${o}\n    `.trim();this.createStylesheet(t,r)}createStylesheet(t,n){const e=new CSSStyleSheet;e.replaceSync(n),this.styleSheets.set(t,e)}updateVariablesInStylesheet(t,n,e){const i=this.styleSheets.get(t);if(!i)return;const o=this.cssProcessor.extractVariablesFromPartialTheme(n,e);this.cssProcessor.updateCSSVariablesInStylesheet(i,o)}getStylesheetStyles(t){switch(t){case"global":return["\n    html, body, div, span, applet, object, iframe,\n    h1, h2, h3, h4, h5, h6, p, blockquote, pre,\n    a, abbr, acronym, address, big, cite, code,\n    del, dfn, em, img, ins, kbd, q, s, samp,\n    small, strike, strong, sub, sup, tt, var,\n    b, u, i, center,\n    dl, dt, dd, ol, ul, li,\n    fieldset, form, label, legend,\n    table, caption, tbody, tfoot, thead, tr, th, td,\n    article, aside, canvas, details, embed,\n    figure, figcaption, footer, header, hgroup,\n    menu, nav, output, ruby, section, summary,\n    time, mark, audio, video {\n      margin: 0;\n      padding: 0;\n      border: 0;\n      font-size: 100%;\n      font: inherit;\n      vertical-align: baseline;\n    }\n\n    *, :after, :before {\n      box-sizing: border-box;\n    }\n\n    article, aside, details, figcaption, figure,\n      footer, header, hgroup, menu, nav, section {\n      display: block;\n    }\n    body {\n      line-height: 1;\n    }\n    ol, ul {\n      list-style: none;\n    }\n    blockquote, q {\n      quotes: none;\n    }\n    blockquote:before, blockquote:after,\n      q:before, q:after {\n      content: '';\n      content: none;\n    }\n    table {\n      border-collapse: collapse;\n      border-spacing: 0;\n    }\n\n    button {\n      background: none;\n      border: none;\n      padding: 0;\n      font: inherit;\n      color: inherit;\n      cursor: pointer;\n    }\n\n    input,\n    textarea {\n      background: none;\n      border: none;\n      padding: 0;\n      resize: none;\n    }\n\n    input[type=\"checkbox\"] {\n      /* Add if not using autoprefixer */\n      -webkit-appearance: none;\n      appearance: none;\n      /* For iOS < 15 to remove gradient background */\n      background-color: #fff;\n      /* Not removed via appearance */\n      margin: 0;\n    }\n\n   .custom-input {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      justify-content: flex-start;\n      gap: 8px;\n      align-self: stretch;\n      flex: 1 0 0;\n      font-family: var(--heading-font-family, Poppins);\n    }\n\n    .custom-input.birthdate .date-input-container {\n      display: flex;\n      height: 36px;\n      align-items: center;\n      gap: 8px;\n      align-self: stretch;\n    }\n\n    .month-field, .day-field {\n      flex: 0 1 50px;\n      max-width: 50px;\n    }\n\n    .year-field {\n      flex: 1 0 70px;\n      max-width: 70px;\n    }\n    \n\n    .date-input-container input {\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-end;\n      align-items: flex-start;\n      height: 36px;\n      padding: 4px 12px;\n      align-self: stretch;\n      border-radius: var(--button-border-radius, 6px);\n      border: 1px solid var(--accent-color, #E4E4E7);\n      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n    }\n\n   .custom-input label {\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 1;\n      overflow: hidden;\n      color: var(--default-text-color, #18181B);\n      text-align: left;\n      text-overflow: ellipsis;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: 100%;\n    }\n\n    .custom-input > input,\n    .custom-input textarea {\n      width: 100%;\n      display: flex;\n      height: 36px;\n      padding: 4px 12px;\n      align-items: center;\n      gap: 4px;\n      align-self: stretch;\n      border-radius: var(--button-border-radius, 6px);\n      border: 1px solid var(--accent-color, #E4E4E7);\n      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n      color: var(--default-text-color, #18181B);\n      font-family: var(--heading-font-family, Poppins);\n    }\n\n    .custom-input input:focus,\n    .custom-input textarea:focus,\n    .custom-input select:focus {\n      outline: none;\n      border-color: var(--primary-color, #3b82f6);\n      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n    }\n\n    \n    .custom-input input:disabled,\n    .custom-input select:disabled {\n      color: var(--default-text-color-50,rgb(60, 44, 44));\n      cursor: not-allowed;\n    }\n\n    .custom-input.textarea textarea {\n      height: auto;\n    }\n\n    .custom-input input.input-error {\n      border-color: var(--error-color, #EF4444);\n    }\n\n   .custom-input .error-container {\n      display: none;\n    }\n\n    .custom-input .error-container.show {\n      display: block;\n      margin-top: 0.25rem;\n    }\n\n    .custom-input .error-message {\n      color: var(--error-color, #EF4444);\n      font-size: 0.875rem;\n      margin-bottom: 0.25rem;\n    }\n\n    /* Alert Styles\n    ** Global styles for alerts\n    */\n\n    .alert {\n      display: flex;\n      flex-direction: row;\n      padding: var(--spacing-2, 8px) var(--spacing-4, 16px);\n      align-items: flex-start;\n      gap: var(--spacing-2, 8px);\n      align-self: stretch;\n      border-radius: var(--border-radius-rounded, 6px);\n    }\n\n    .alert-warning {\n      border: 1px solid var(--warning-color, #EA580C);\n      background: linear-gradient(0deg, var(--alpha-20, rgba(254, 254, 254, 0.80)) 0%, var(--alpha-20, rgba(254, 254, 254, 0.80)) 100%), var(--warning-color, #EA580C);\n    }\n\n    .alert-success {\n      border: 1px solid var(--success-color, #10b981);\n      background: linear-gradient(0deg, var(--alpha-20, rgba(254, 254, 254, 0.80)) 0%, var(--alpha-20, rgba(254, 254, 254, 0.80)) 100%), var(--success-color, #10b981);\n    }\n\n    .alert-info {\n      border: 1px solid var(--base-blue, #3b82f6);\n      background: linear-gradient(0deg, var(--alpha-20, rgba(254, 254, 254, 0.80)) 0%, var(--alpha-20, rgba(254, 254, 254, 0.80)) 100%), var(--base-blue, #3b82f6);\n    }\n\n    .alert-message {\n      color: var(--default-text-color, #18181B);\n      font-family: var(--heading-font-family, Poppins);\n      font-size: var(--typography-base-sizes-small-font-size, 14px);\n      font-style: normal;\n      font-weight: var(--font-weight-normal, 400);\n      line-height: var(--typography-base-sizes-small-line-height, 20px);\n      flex: 1;\n    }\n\n    .alert-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      flex-shrink: 0;\n    }\n\n    .alert-icon-warning {\n      color: var(--warning-color, #EA580C);\n    }\n\n    .alert-icon-success {\n      color: var(--success-color, #10b981);\n    }\n\n    .alert-icon-info {\n      color: var(--base-blue, #3b82f6);\n    }\n\n    .alert-icon svg {\n      width: 16px;\n      height: 16px;\n    }\n\n    .alert-icon-svg {\n      width: 12px;\n      height: 12px;\n      fill: currentColor;\n    }\n\n    .alert-details {\n      margin-top: 8px;\n      padding-left: 24px;\n    }\n\n    .alert-details-text {\n      color: var(--default-text-color, #18181B);\n      font-family: var(--heading-font-family, Poppins);\n      font-size: var(--typography-base-sizes-small-font-size, 12px);\n      font-weight: var(--font-weight-normal, 400);\n      opacity: 0.8;\n    }\n\n    /** Engraving FORM **/\n\n    .engraving-form-container {\n      display: flex;\n      width: 100%;\n      flex-direction: column;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .drawer .engraving-form-container {\n      padding: 16px;\n    }\n\n    .engraving-form-header {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .engraving-form-title {\n      color: var(--default-text-color, #18181B);\n      font-family: var(--heading-font-family, Poppins);\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: 24px;\n    }\n\n    .engraving-form-location {\n      color: var(--default-text-color, #18181B);\n      font-family: var(--heading-font-family, Poppins);\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 24px;\n    }\n\n   .engraving-form-lines {\n      display: flex;\n      width: 100%;\n      height: auto;\n      flex-direction: column;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .engraving-form-input-container {\n      display: flex;\n      padding: 4px 12px;\n      align-items: center;\n      gap: 4px;\n      align-self: stretch;\n      border-radius: var(--border-radius-md, 6px);\n      border: 1px solid var(--accent-color, #E4E4E7);\n      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n    }\n\n    .engraving-form-input-container .engraving-form-input {\n      flex: 1;\n      border: none;\n      outline: none;\n      overflow: hidden;\n      color: var(--default-text-color, #18181B);\n      text-overflow: ellipsis;\n      font-family: var(--heading-font-family, Poppins);\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 20px;\n    }\n\n    .engraving-form-input-container .engraving-form-input-char-count {\n      color: var(--default-text-color, #18181B);\n      font-family: var(--heading-font-family, Poppins);\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 20px;\n    }\n\n    .engraving-form-actions {\n      display: flex;\n      align-items: center;\n      align-content: center;\n      gap: 16px;\n      align-self: stretch;\n      flex-wrap: wrap;\n    }\n\n  .engraving-form-actions > button {\n      display: flex;\n      padding: 8px 16px;\n      justify-content: center;\n      align-items: center;\n      gap: 8px;\n      border: none;\n      font-family: var(--heading-font-family, Poppins);\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: 20px;\n      cursor: pointer;\n    }\n\n    .engraving-form-actions .engraving-form-button-remove {\n      color: var(--primary-color, #1D4ED8);\n    }\n\n    .engraving-form-actions .engraving-form-button-save {\n      border-radius: var(--button-border-radius, 6px);\n      background: var(--primary-color, #1D4ED8);\n      box-shadow: 0px 1.5px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);\n      color: var(--selected-text-color, #FAFAFA);\n      flex: 1 0 0;\n    }\n\n    .engraving-form-actions .engraving-form-button-save.disabled {\n      opacity: 0.5;\n    }\n\n    .engraving-form-disclaimer {\n      color: var(--default-text-color, #18181B);\n      font-family: var(--heading-font-family, Poppins);\n      font-size: 12px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 16px;\n    }\n\n    .engraving-form-disclaimer > span {\n      color: var(--default-text-color, #18181B);\n      font-family: var(--heading-font-family, Poppins);\n      font-size: 12px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 16px;\n    }\n\n    /** Component Error View **/\n    .error-view {\n      padding: 20px;\n      background: #fff5f5;\n      border: 1px solid #fed7d7;\n      border-radius: 4px;\n      color: #c53030;\n      text-align: center;\n    }\n\n    .error-view h3 {\n      margin-bottom: 10px;\n    }\n\n    .error-view p {\n      margin-bottom: 20px;\n      font-size: 16px;\n      font-style: italic;\n    }\n\n    .error-view button {\n      padding: 8px 16px;\n      background: #c53030;\n      color: white;\n      border: none;\n      border-radius: 4px;\n      cursor: pointer;\n    }\n"];case"ui":return["\n    .drawer {\n      position: fixed;\n      top: 0;\n      right: 0;\n      width: 0;\n      height: 100dvh;\n      z-index: 1000;\n      background-color: #ffffff;\n      overflow: hidden;\n      transition: width 0.3s ease;\n      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);\n    }\n\n    /* Opened drawer state */\n    .drawer.open {\n      width: 400px;\n    }\n\n    /* Backdrop overlay */\n    .drawer-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100dvh;\n      background-color: rgba(0, 0, 0, 0.4);\n      z-index: -1;\n      opacity: 0;\n      visibility: hidden;\n      transition: opacity 0.3s ease, visibility 0.3s ease;\n    }\n\n    .drawer-backdrop.visible {\n      opacity: 1;\n      visibility: visible;\n    }\n\n    /* Content area - fills the remaining space */\n    .drawer-content {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      overflow-y: auto;\n      background-color: var(--drawer-background-color, #FAFAFA);\n    }\n\n    /* Mobile adjustments */\n    @media (max-width: 576px) {\n      .drawer.open {\n        width: 100% !important;\n      }\n    }\n\n    /* Accessibility - respect user's motion preferences */\n    @media (prefers-reduced-motion: reduce) {\n      .drawer,\n      .drawer-backdrop {\n        transition: none;\n      }\n    }\n  ","\n  .skeleton-container {\n    min-width: 450px;\n    width: 100%;\n    height: auto;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n  }\n\n  .skeleton-container .wave {\n    background-color: #c4d1e0;\n    border-radius: 6px;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .skeleton-container .wave::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: -100%;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(\n      90deg,\n      transparent 0%,\n      rgba(255, 255, 255, 0.8) 50%,\n      transparent 100%\n    );\n    animation: wave 1.8s infinite ease-in-out;\n    z-index: 1;\n  }\n\n  .sc-title {\n    height: 32px;\n    width: 100%;\n  }\n\n  .sc-sizes {\n    height: 36px;\n    width: 100%;\n    display: flex;\n    gap: 8px;\n  }\n\n  .sc-size-button {\n    height: 36px;\n    width: 30%;\n    background-color: #c4d1e0;\n    border-radius: 6px;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .sc-row {\n    display: flex;\n    gap: 12px;\n    background: none !important;\n    height: auto;\n  }\n\n  .sc-price {\n    height: 36px;\n    width: 30%;\n  }\n\n  .sc-personalization {\n    height: 36px;\n    width: 40%;\n    margin-right: 0;\n    margin-left: auto;\n  }\n\n  .sc-deliver-to {\n    height: 16px;\n    width: 25%;\n    margin-bottom: -16px;\n  }\n\n  .sc-address {\n    height: 16px;\n    width: 75%;\n  }\n\n  .sc-retailers {\n    height: 140px;\n    width: 100%;\n  }\n\n  .sc-quantity {\n    height: 36px;\n    width: 30%;\n    background-color: #c4d1e0;\n    border-radius: 6px;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .sc-add-to-cart {\n    height: 36px;\n    flex: 1;\n    background-color: #c4d1e0;\n    border-radius: 6px;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .sc-description-title {\n    height: 16px;\n    width: 45%;\n    margin-bottom: -12px;\n  }\n\n  .sc-description-line {\n    height: 16px;\n    width: 100%;\n    margin-bottom: -20px;\n  }\n\n  .sc-description-more {\n    height: 16px;\n    width: 30%;\n    margin-top: 8px;\n  }\n\n  .sc-title::before { animation-delay: 0s; }\n  .sc-price::before { animation-delay: 0.1s; }\n  .sc-size-button::before { animation-delay: 0.2s; }\n  .sc-price::before { animation-delay: 0.3s; }\n  .sc-personalization::before { animation-delay: 0.4s; }\n  .sc-deliver-to::before { animation-delay: 0.5s; }\n  .sc-address::before { animation-delay: 0.6s; }\n  .sc-retailers::before { animation-delay: 0.7s; }\n  .sc-quantity::before { animation-delay: 0.8s; }\n  .sc-add-to-cart::before { animation-delay: 0.9s; }\n  .sc-description-title::before { animation-delay: 1.0s; }\n  .sc-description-line:nth-child(10)::before { animation-delay: 1.1s; }\n  .sc-description-line:nth-child(11)::before { animation-delay: 1.2s; }\n  .sc-description-line:nth-child(12)::before { animation-delay: 1.3s; }\n  .sc-description-more::before { animation-delay: 1.4s; }\n\n  @keyframes wave {\n    0% {\n      left: -100%;\n    }\n    100% {\n      left: 100%;\n    }\n  }\n"];case"product":return["\n    .container {\n      width: 100%;\n      max-width: 100%;\n      min-width: 350px;\n      height: 100%;\n      min-height: 500px;\n      display: flex;\n      flex-direction: column;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .container .image-carousel {\n      width: 100%;\n    }\n\n    .container .main {\n      width: 100%;\n    }\n\n    .product-address-container {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 8px;\n      align-self: stretch;\n    }\n\n    .product-address-container > span {\n      color: var(--default-text-color, #18181B);\n      font-family: var(--heading-font-family, Poppins);\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: 100%;\n    }\n\n    .product-address-container .edit-address {\n      color: var(--primary-color, #1D4ED8);\n      font-family: var(--heading-font-family, Poppins);\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 20px;\n      text-decoration-line: underline;\n      text-decoration-style: solid;\n      text-decoration-skip-ink: none;\n      text-decoration-thickness: auto;\n      text-underline-offset: auto;\n      text-underline-position: from-font;\n    }\n\n    .product-add-to-cart {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      gap: 20px;\n      margin: 24px 0;\n    }\n\n    .product-add-to-cart .quantity {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      gap: 10px;\n      color: #1A56DB;\n      border-radius: 4px;\n      background-color: #F3F4F6;\n    }\n\n    .product-add-to-cart .quantity button {\n      background: none;\n      color: inherit;\n      border: none;\n      cursor: pointer;\n    }\n\n    .product-add-to-cart .add-to-cart-button {\n      background: red;\n      color: white;\n      border: none;\n      cursor: pointer;\n      width: 100%;\n      border-radius: 8px;\n      padding: 8px 0;\n      text-align: center;\n    }\n\n    @media (min-width: 769px) {\n      .container {\n        flex-direction: row;\n        gap: 40px;\n      }\n\n      .container .image-carousel {\n        width: 45%;\n      }\n\n      .container .main {\n        width: 55%;\n      }\n    }\n\n    .product-main-container {\n      width: 55%;\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      align-self: stretch;\n      gap: 24px 0px;\n    }\n\n    .product-main-container:first-child {\n      width: 100%;\n    }\n\n    @media (max-width: 768px) {\n      .product-main-container {\n        width: 100%;\n      }\n    }\n\n    .product-interactions {\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n      align-items: flex-start;\n      align-self: stretch;\n    }\n\n    .size-container {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 8px;\n      align-self: stretch;\n    }\n\n    .size-container .size-label {\n      color: var(--default-text-color, #18181B);\n      font-family: var(--heading-font-family, Poppins);\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: 100%;\n    }\n\n    .size-container .size-buttons-container {\n      display: flex;\n      align-items: flex-start;\n      align-content: flex-start;\n      gap: 8px 8px;\n      align-self: stretch;\n      flex-wrap: wrap;\n    }\n\n    .size-container .size-buttons-container .size-button {\n      display: flex;\n      padding: 8px 16px;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      gap: 4px;\n      cursor: pointer;\n      border-radius: var(--button-border-radius, 6px);\n      border: 1px solid var(--accent-color, #E4E4E7);\n\n      color: var(--default-text-color, #18181B);\n      font-family: var(--heading-font-family, Poppins);\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: 20px;\n    }\n\n    .size-container .size-buttons-container .size-button.selected {\n      background: var(--primary-color, #1D4ED8);\n      color: var(--selected-text-color, #FAFAFA);\n      border: 1px solid transparent;\n    }\n\n    .price-personalization-container {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      flex-wrap: wrap;\n      gap: 8px;\n      width: 100%;\n    }\n\n    /** Product Engraving Container */\n\n    .product-engraving-container {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n    }\n\n    .product-engraving-container:has(.engraving-header) {\n      width: 100%;\n      padding: 16px;\n      border-radius: var(--card-border-radius, 6px);\n      border: 1px solid var(--accent-color, #E4E4E7);\n      gap: 16px;\n    }\n\n    .product-engraving-container .engraving-header {\n      width: 100%;\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n      align-items: center;\n      align-content: center;\n    }\n\n    .product-engraving-container .engraving-header h3,\n    .product-engraving-container .engraving-header span {\n      color: var(--default-text-color, #18181B);\n      font-family: var(--heading-font-family, Poppins);\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: 100%;\n    }\n\n    .product-engraving-container .engraving-body {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-end;\n      align-content: flex-end;\n      row-gap: 16px;\n      align-self: stretch;\n      flex-wrap: wrap;\n    }\n\n    .product-engraving-container .engraving-lines {\n      display: flex;\n      min-width: 136px;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 4px;\n      flex: 1 0 0;\n    }\n\n    .product-engraving-container .engraving-lines .engraving-line {\n      color: var(--default-text-color, #18181B);\n      font-family: var(--heading-font-family, Poppins);\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 100%;\n      text-transform: uppercase;\n    }\n\n    .product-engraving-container .engraving-actions {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .product-engraving-container .engraving-actions button {\n      color: var(--primary-color, #1D4ED8);\n      font-family: var(--heading-font-family, Poppins);\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 100%;\n      text-decoration-line: underline;\n      text-decoration-style: solid;\n      text-decoration-skip-ink: none;\n      text-decoration-thickness: auto;\n      text-underline-offset: auto;\n      text-underline-position: from-font;\n      cursor: pointer;\n    }\n\n    .product-engraving-container .add-engraving-button {\n      display: flex;\n      padding: 8px 16px;\n      justify-content: center;\n      align-items: center;\n      gap: 8px;\n      cursor: pointer;\n\n      border-radius: var(--button-border-radius, 6px);\n      border: 1px solid var(--accent-color, #E4E4E7);\n      background: transparent;\n      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n      color: var(--default-text-color, #18181B);\n      font-family: var(--heading-font-family, Poppins);\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: 20px;\n    }\n\n    /** Product Add to Cart Container */\n\n    .add-to-cart-container {\n      display: flex;\n      align-items: flex-start;\n      align-content: flex-start;\n      gap: 16px;\n      align-self: stretch;\n      flex-wrap: wrap;\n    }\n\n    .add-to-cart-container .quantity-container {\n      display: flex;\n      width: 106px;\n      align-items: center;\n      gap: -1px;\n    }\n\n    .add-to-cart-container .quantity-container .quantity-decrease,\n    .add-to-cart-container .quantity-container .quantity-increase {\n      display: flex;\n      width: 36px;\n      height: 36px;\n      padding: 8px 16px;\n      justify-content: center;\n      align-items: center;\n      gap: 8px;\n\n      cursor: pointer;\n      color: var(--default-text-color, #18181B);\n      font-family: var(--heading-font-family, Poppins);\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 20px;\n    }\n\n    .add-to-cart-container .quantity-container.outlined .quantity-decrease,\n    .add-to-cart-container .quantity-container.outlined .quantity-increase {\n      border: 1px solid var(--accent-color, #E4E4E7);\n    }\n\n    .add-to-cart-container .quantity-container .quantity-decrease {\n      border-radius: var(--button-border-radius, 6px) 0px 0px var(--button-border-radius, 6px);\n    }\n\n    .add-to-cart-container .quantity-container .quantity-increase {\n      border-radius: 0px var(--button-border-radius, 6px) var(--button-border-radius, 6px) 0px;\n    }\n\n    .add-to-cart-container .quantity-container .product-count {\n      display: flex;\n      padding: 6px 8px;\n      justify-content: center;\n      align-items: center;\n      gap: 8px;\n      flex: 1 0 0;\n      align-self: stretch;\n\n      color: var(--default-text-color, #18181B);\n      font-family: var(--heading-font-family, Poppins);\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 20px;\n    }\n\n    .add-to-cart-container .quantity-container.outlined .product-count {\n      border-top: 1px solid var(--accent-color, #E4E4E7);\n      border-bottom: 1px solid var(--accent-color, #E4E4E7);\n    }\n\n    .add-to-cart-container .add-to-cart-button {\n      display: flex;\n      min-width: 182px;\n      padding: 8px 16px;\n      justify-content: center;\n      align-items: center;\n      gap: 8px;\n      flex: 1 0 0;\n\n      border-radius: var(--button-border-radius, 6px);\n      background: var(--primary-color, #1D4ED8);\n      outline: none;\n      cursor: pointer;\n      box-shadow: 0px 1.5px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);\n\n      color: var(--selected-text-color, #FAFAFA);\n      font-family: var(--heading-font-family, Poppins);\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: 20px;\n    }\n\n    .product-title {\n      color: var(--default-text-color, #18181B);\n