npm - @coveo/atomic - Versions diffs - 3.33.3-pre.ee24f8bd85 → 3.33.3-pre.f230cfebef - Mend

@coveo/atomic 3.33.3-pre.ee24f8bd85 → 3.33.3-pre.f230cfebef

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (118) hide show

package/dist/atomic/components/atomic-result2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"atomic-result2.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,~~k27LAAk27L~~,CAAC;~~AAC337L~~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","names":[],"sources":["src/components/search/atomic-result/atomic-result.pcss?tag=atomic-result&encapsulation=shadow","src/components/search/atomic-result/atomic-result.tsx"],"sourcesContent":["@import '../../common/template-system/template-system.pcss';\n\n:host {\n @apply atomic-template-system;\n}\n","import {FoldedResult, InteractiveResult, Result} from '@coveo/headless';\nimport {Component, h, Prop, Element, Listen, Host} from '@stencil/core';\nimport {parentNodeToString} from '../../../utils/dom-utils';\nimport {DisplayConfig} from '../../common/item-list/stencil-item-decorators';\nimport {\n ItemRenderingFunction,\n resultComponentClass,\n} from '../../common/item-list/stencil-item-list-common';\nimport {\n ItemLayout,\n ItemDisplayDensity,\n ItemDisplayImageSize,\n ItemDisplayLayout,\n} from '../../common/layout/display-options';\nimport {SearchStore} from '../atomic-search-interface/store';\nimport {\n InteractiveResultContextEvent,\n ResultContextEvent,\n} from '../result-template-components/result-template-decorators';\n\n/*\n The `atomic-result` component is used internally by the `atomic-result-list` component.\n /\n@Component({\n tag: 'atomic-result',\n styleUrl: 'atomic-result.pcss',\n shadow: true,\n})\nexport class AtomicResult {\n private layout!: ItemLayout;\n\n @Element() host!: HTMLElement;\n\n /\n Whether an atomic-result-link inside atomic-result should stop click event propagation.\n /\n @Prop() stopPropagation?: boolean;\n\n /\n The result item.\n /\n @Prop() result!: Result \| FoldedResult;\n\n /\n The InteractiveResult item.\n * @internal\n /\n @Prop() interactiveResult!: InteractiveResult;\n\n /\n Global Atomic state.\n * @internal\n /\n @Prop() store?: SearchStore;\n\n /\n The result content to display.\n /\n @Prop() content?: ParentNode;\n\n /\n The result link to use when the result is clicked in a grid layout.\n \n @default - An `atomic-result-link` without any customization.\n /\n @Prop() linkContent: ParentNode = new DocumentFragment();\n\n /\n How results should be displayed.\n /\n @Prop() display: ItemDisplayLayout = 'list';\n\n /\n How large or small results should be.\n /\n @Prop() density: ItemDisplayDensity = 'normal';\n\n /\n The size of the visual section in result list items.\n \n This is overwritten by the image size defined in the result content, if it exists.\n /\n @Prop() imageSize: ItemDisplayImageSize = 'icon';\n\n /\n The classes to add to the result element.\n /\n @Prop() classes = '';\n\n /\n @internal\n /\n @Prop() loadingFlag?: string;\n\n /\n Internal function used by atomic-recs-list in advanced setups, which lets you bypass the standard HTML template system.\n * Particularly useful for Atomic React\n \n @internal\n */\n @Prop() renderingFunction: ItemRenderingFunction;\n\n private resultRootRef?: HTMLElement;\n private linkContainerRef?: HTMLElement;\n private executedRenderingFunctionOnce = false;\n\n @Listen('atomic/resolveResult')\n public resolveResult(event: ResultContextEvent<FoldedResult \| Result>) {\n event.preventDefault();\n event.stopPropagation();\n event.detail(this.result);\n }\n\n @Listen('atomic/resolveInteractiveResult')\n public resolveInteractiveResult(event: InteractiveResultContextEvent) {\n event.preventDefault();\n event.stopPropagation();\n if (this.interactiveResult) {\n event.detail(this.interactiveResult);\n }\n }\n\n @Listen('atomic/resolveStopPropagation')\n public resolveStopPropagation(event: CustomEvent) {\n event.detail(this.stopPropagation);\n }\n\n @Listen('atomic/resolveResultDisplayConfig')\n public resolveResultDisplayConfig(event: ResultContextEvent<DisplayConfig>) {\n event.preventDefault();\n event.stopPropagation();\n event.detail({\n density: this.density,\n imageSize: this.imageSize!,\n });\n }\n\n @Listen('click')\n public handleClick(event: MouseEvent) {\n if (this.stopPropagation) {\n event.stopPropagation();\n }\n this.host\n .shadowRoot!.querySelector<HTMLAnchorElement>(\n '.link-container > atomic-result-link a:not([slot])'\n )\n ?.click();\n }\n\n public connectedCallback() {\n this.layout = new ItemLayout(\n this.content!.children,\n this.display,\n this.density,\n this.imageSize\n );\n }\n\n private get isCustomRenderFunctionMode() {\n return this.renderingFunction !== undefined;\n }\n\n private getContentHTML() {\n return parentNodeToString(this.content!);\n }\n\n private getLinkHTML() {\n return parentNodeToString(this.linkContent);\n }\n\n private shouldExecuteRenderFunction() {\n return (\n this.isCustomRenderFunctionMode &&\n this.resultRootRef &&\n !this.executedRenderingFunctionOnce\n );\n }\n\n public render() {\n if (this.isCustomRenderFunctionMode) {\n return (\n <Host class={resultComponentClass}>\n <div\n class=\"result-root\"\n ref={(ref) => (this.resultRootRef = ref)}\n ></div>\n <div\n class=\"link-container\"\n ref={(ref) => (this.linkContainerRef = ref)}\n ></div>\n </Host>\n );\n }\n return (\n <Host class={resultComponentClass}>\n <div\n class={`result-root ${this.layout\n .getClasses()\n .concat(this.classes)\n .join(' ')}`}\n innerHTML={this.getContentHTML()}\n ></div>\n <div class=\"link-container\" innerHTML={this.getLinkHTML()}></div>\n </Host>\n );\n }\n\n public componentDidLoad() {\n if (this.loadingFlag && this.store) {\n this.store.unsetLoadingFlag(this.loadingFlag);\n }\n this.host.classList.add('hydrated');\n }\n\n public componentDidRender() {\n if (this.shouldExecuteRenderFunction()) {\n const customRenderOutputAsString = this.renderingFunction!(\n this.result,\n this.resultRootRef!,\n this.linkContainerRef!\n );\n\n this.resultRootRef!.className += ` ${this.layout\n .getClasses(customRenderOutputAsString)\n .concat(this.classes)\n .join(' ')}`;\n\n this.executedRenderingFunctionOnce = true;\n }\n this.host.classList.add('hydrated');\n }\n}\n"],"version":3}
1	+ {"file":"atomic-result2.js","mappings":"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","names":[],"sources":["src/components/search/atomic-result/atomic-result.pcss?tag=atomic-result&encapsulation=shadow","src/components/search/atomic-result/atomic-result.tsx"],"sourcesContent":["@import '../../common/template-system/template-system.pcss';\n\n:host {\n @apply atomic-template-system;\n}\n","import {FoldedResult, InteractiveResult, Result} from '@coveo/headless';\nimport {Component, h, Prop, Element, Listen, Host} from '@stencil/core';\nimport {parentNodeToString} from '../../../utils/dom-utils';\nimport {DisplayConfig} from '../../common/item-list/stencil-item-decorators';\nimport {\n ItemRenderingFunction,\n resultComponentClass,\n} from '../../common/item-list/stencil-item-list-common';\nimport {\n ItemLayout,\n ItemDisplayDensity,\n ItemDisplayImageSize,\n ItemDisplayLayout,\n} from '../../common/layout/display-options';\nimport {SearchStore} from '../atomic-search-interface/store';\nimport {\n InteractiveResultContextEvent,\n ResultContextEvent,\n} from '../result-template-components/result-template-decorators';\n\n/*\n The `atomic-result` component is used internally by the `atomic-result-list` component.\n /\n@Component({\n tag: 'atomic-result',\n styleUrl: 'atomic-result.pcss',\n shadow: true,\n})\nexport class AtomicResult {\n private layout!: ItemLayout;\n\n @Element() host!: HTMLElement;\n\n /\n Whether an atomic-result-link inside atomic-result should stop click event propagation.\n /\n @Prop() stopPropagation?: boolean;\n\n /\n The result item.\n /\n @Prop() result!: Result \| FoldedResult;\n\n /\n The InteractiveResult item.\n * @internal\n /\n @Prop() interactiveResult!: InteractiveResult;\n\n /\n Global Atomic state.\n * @internal\n /\n @Prop() store?: SearchStore;\n\n /\n The result content to display.\n /\n @Prop() content?: ParentNode;\n\n /\n The result link to use when the result is clicked in a grid layout.\n \n @default - An `atomic-result-link` without any customization.\n /\n @Prop() linkContent: ParentNode = new DocumentFragment();\n\n /\n How results should be displayed.\n /\n @Prop() display: ItemDisplayLayout = 'list';\n\n /\n How large or small results should be.\n /\n @Prop() density: ItemDisplayDensity = 'normal';\n\n /\n The size of the visual section in result list items.\n \n This is overwritten by the image size defined in the result content, if it exists.\n /\n @Prop() imageSize: ItemDisplayImageSize = 'icon';\n\n /\n The classes to add to the result element.\n /\n @Prop() classes = '';\n\n /\n @internal\n /\n @Prop() loadingFlag?: string;\n\n /\n Internal function used by atomic-recs-list in advanced setups, which lets you bypass the standard HTML template system.\n * Particularly useful for Atomic React\n \n @internal\n */\n @Prop() renderingFunction: ItemRenderingFunction;\n\n private resultRootRef?: HTMLElement;\n private linkContainerRef?: HTMLElement;\n private executedRenderingFunctionOnce = false;\n\n @Listen('atomic/resolveResult')\n public resolveResult(event: ResultContextEvent<FoldedResult \| Result>) {\n event.preventDefault();\n event.stopPropagation();\n event.detail(this.result);\n }\n\n @Listen('atomic/resolveInteractiveResult')\n public resolveInteractiveResult(event: InteractiveResultContextEvent) {\n event.preventDefault();\n event.stopPropagation();\n if (this.interactiveResult) {\n event.detail(this.interactiveResult);\n }\n }\n\n @Listen('atomic/resolveStopPropagation')\n public resolveStopPropagation(event: CustomEvent) {\n event.detail(this.stopPropagation);\n }\n\n @Listen('atomic/resolveResultDisplayConfig')\n public resolveResultDisplayConfig(event: ResultContextEvent<DisplayConfig>) {\n event.preventDefault();\n event.stopPropagation();\n event.detail({\n density: this.density,\n imageSize: this.imageSize!,\n });\n }\n\n @Listen('click')\n public handleClick(event: MouseEvent) {\n if (this.stopPropagation) {\n event.stopPropagation();\n }\n this.host\n .shadowRoot!.querySelector<HTMLAnchorElement>(\n '.link-container > atomic-result-link a:not([slot])'\n )\n ?.click();\n }\n\n public connectedCallback() {\n this.layout = new ItemLayout(\n this.content!.children,\n this.display,\n this.density,\n this.imageSize\n );\n }\n\n private get isCustomRenderFunctionMode() {\n return this.renderingFunction !== undefined;\n }\n\n private getContentHTML() {\n return parentNodeToString(this.content!);\n }\n\n private getLinkHTML() {\n return parentNodeToString(this.linkContent);\n }\n\n private shouldExecuteRenderFunction() {\n return (\n this.isCustomRenderFunctionMode &&\n this.resultRootRef &&\n !this.executedRenderingFunctionOnce\n );\n }\n\n public render() {\n if (this.isCustomRenderFunctionMode) {\n return (\n <Host class={resultComponentClass}>\n <div\n class=\"result-root\"\n ref={(ref) => (this.resultRootRef = ref)}\n ></div>\n <div\n class=\"link-container\"\n ref={(ref) => (this.linkContainerRef = ref)}\n ></div>\n </Host>\n );\n }\n return (\n <Host class={resultComponentClass}>\n <div\n class={`result-root ${this.layout\n .getClasses()\n .concat(this.classes)\n .join(' ')}`}\n innerHTML={this.getContentHTML()}\n ></div>\n <div class=\"link-container\" innerHTML={this.getLinkHTML()}></div>\n </Host>\n );\n }\n\n public componentDidLoad() {\n if (this.loadingFlag && this.store) {\n this.store.unsetLoadingFlag(this.loadingFlag);\n }\n this.host.classList.add('hydrated');\n }\n\n public componentDidRender() {\n if (this.shouldExecuteRenderFunction()) {\n const customRenderOutputAsString = this.renderingFunction!(\n this.result,\n this.resultRootRef!,\n this.linkContainerRef!\n );\n\n this.resultRootRef!.className += ` ${this.layout\n .getClasses(customRenderOutputAsString)\n .concat(this.classes)\n .join(' ')}`;\n\n this.executedRenderingFunctionOnce = true;\n }\n this.host.classList.add('hydrated');\n }\n}\n"],"version":3}

package/dist/atomic/components/components/commerce/atomic-commerce-facet-number-input/atomic-commerce-facet-number-input.js CHANGED Viewed

@@ -11,13 +11,12 @@ import { ref } from 'lit/directives/ref.js';
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings";
 import { errorGuard } from "../../../decorators/error-guard";
-import { injectStylesForNoShadowDOM } from "../../../decorators/inject-styles-for-no-shadow-dom";
-import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
+import { LightDomMixin } from "../../../mixins/light-dom";
 /**
  * Internal component made to be integrated in a NumericFacet.
  * @internal
  */
-let AtomicCommerceFacetNumberInput = class AtomicCommerceFacetNumberInput extends LitElement {
+let AtomicCommerceFacetNumberInput = class AtomicCommerceFacetNumberInput extends LightDomMixin(LitElement) {
     initialize() {
         this.start = this.range?.start;
         this.end = this.range?.end;
@@ -158,8 +157,6 @@ __decorate([
 ], AtomicCommerceFacetNumberInput.prototype, "render", null);
 AtomicCommerceFacetNumberInput = __decorate([
     customElement('atomic-commerce-facet-number-input'),
-    withTailwindStyles,
-    injectStylesForNoShadowDOM,
     bindings()
 ], AtomicCommerceFacetNumberInput);
 export { AtomicCommerceFacetNumberInput };

package/dist/atomic/components/components/commerce/atomic-commerce-facets/atomic-commerce-facets.js CHANGED Viewed

@@ -13,7 +13,6 @@ import { when } from 'lit/directives/when.js';
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings";
 import { errorGuard } from "../../../decorators/error-guard";
-import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import '../../common/atomic-facet-placeholder/atomic-facet-placeholder';
 import { createAppLoadedListener } from '../../common/interface/store';
 import '../atomic-commerce-category-facet/atomic-commerce-category-facet';
@@ -22,11 +21,12 @@ import '../atomic-commerce-numeric-facet/atomic-commerce-numeric-facet';
 import '../atomic-commerce-timeframe-facet/atomic-commerce-timeframe-facet';
 import { keyed } from 'lit/directives/keyed.js';
 import { bindStateToController } from "../../../decorators/bind-state";
+import { LightDomMixin } from "../../../mixins/light-dom";
 /**
  * The `atomic-commerce-facets` component automatically renders commerce facets based on the Commerce API response.
  * Unlike regular facets, which require explicit definition and request in the query, the `atomic-commerce-facets` component dynamically generates facets.
  */
-let AtomicCommerceFacets = class AtomicCommerceFacets extends LitElement {
+let AtomicCommerceFacets = class AtomicCommerceFacets extends LightDomMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
@@ -48,9 +48,6 @@ let AtomicCommerceFacets = class AtomicCommerceFacets extends LitElement {
             this.isAppLoaded = isAppLoaded;
         });
     }
-    createRenderRoot() {
-        return this;
-    }
     isProductListing() {
         return this.bindings.interfaceElement.type === 'product-listing';
     }
@@ -148,7 +145,6 @@ __decorate([
 ], AtomicCommerceFacets.prototype, "render", null);
 AtomicCommerceFacets = __decorate([
     customElement('atomic-commerce-facets'),
-    bindings(),
-    withTailwindStyles
+    bindings()
 ], AtomicCommerceFacets);
 export { AtomicCommerceFacets };

package/dist/atomic/components/components/commerce/atomic-commerce-layout/atomic-commerce-layout.js CHANGED Viewed

@@ -6,8 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { injectStylesForNoShadowDOM } from "../../../decorators/inject-styles-for-no-shadow-dom";
 import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
+import { LightDomMixin } from "../../../mixins/light-dom";
 import { randomID } from "../../../utils/utils";
 import { DEFAULT_MOBILE_BREAKPOINT } from '../../../utils/replace-breakpoint';
 import styles from './atomic-commerce-layout.tw.css';
@@ -18,8 +18,10 @@ import { buildCommerceLayout } from './commerce-layout';
  * @cssprop --atomic-layout-max-search-box-input-width: The maximum width that the search box input will take.
  * @cssprop --atomic-layout-max-search-box-double-suggestions-width: The maximum width that the search box suggestions will take when displaying a double list.
  * @cssprop --atomic-layout-search-box-left-suggestions-width: The width of the left list when displaying a double list.
+ *
+ * @slot default - The default slot for the layout content.
  */
-let AtomicCommerceLayout = class AtomicCommerceLayout extends ChildrenUpdateCompleteMixin(LitElement) {
+let AtomicCommerceLayout = class AtomicCommerceLayout extends LightDomMixin(ChildrenUpdateCompleteMixin(LitElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -28,13 +30,14 @@ let AtomicCommerceLayout = class AtomicCommerceLayout extends ChildrenUpdateComp
          */
         this.mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT;
     }
-    static async dynamicStyles(instance) {
-        await instance.getUpdateComplete();
-        return unsafeCSS(buildCommerceLayout(instance, instance.mobileBreakpoint));
+    async addStyles() {
+        await this.getUpdateComplete();
+        this.injectStyles(unsafeCSS(buildCommerceLayout(this, this.mobileBreakpoint)));
     }
     connectedCallback() {
         super.connectedCallback();
         this.id = randomID('atomic-commerce-layout-');
+        this.addStyles();
     }
 };
 AtomicCommerceLayout.styles = [styles];
@@ -45,7 +48,6 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'mobile-breakpoint' })
 ], AtomicCommerceLayout.prototype, "mobileBreakpoint", void 0);
 AtomicCommerceLayout = __decorate([
-    customElement('atomic-commerce-layout'),
-    injectStylesForNoShadowDOM
+    customElement('atomic-commerce-layout')
 ], AtomicCommerceLayout);
 export { AtomicCommerceLayout };

package/dist/atomic/components/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.js CHANGED Viewed

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { NumberValue, Schema, StringValue } from '@coveo/bueno';
 import { buildProductListing, buildSearch, } from '@coveo/headless/commerce';
-import { html, LitElement, nothing } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
 import { map } from 'lit/directives/map.js';
@@ -25,10 +25,13 @@ import { createAppLoadedListener } from '../../common/interface/store.js';
 import { renderDisplayWrapper } from '../../common/item-list/display-wrapper.js';
 import { renderGridLayout } from '../../common/item-list/grid-layout.js';
 import { ItemListCommon, } from '../../common/item-list/item-list-common.js';
+import gridDisplayStyles from '../../common/item-list/styles/grid-display.tw.css';
+import listDisplayStyles from '../../common/item-list/styles/list-display.tw.css';
+import placeholderStyles from '../../common/item-list/styles/placeholders.tw.css';
+import tableDisplayStyles from '../../common/item-list/styles/table-display.tw.css';
 import { renderTableData, renderTableLayout, renderTableRow, } from '../../common/item-list/table-layout.js';
 import { getItemListDisplayClasses, } from '../../common/layout/display-options.js';
 import { ProductTemplateProvider } from '../product-list/product-template-provider.js';
-import styles from './atomic-commerce-product-list.tw.css';
 /**
  * The `atomic-commerce-product-list` component is responsible for displaying products.
  *
@@ -326,7 +329,14 @@ let AtomicCommerceProductList = class AtomicCommerceProductList extends Children
             (!this.summaryState.firstRequestExecuted || this.summaryState.hasProducts));
     }
 };
-AtomicCommerceProductList.styles = styles;
+AtomicCommerceProductList.styles = [
+    placeholderStyles,
+    tableDisplayStyles,
+    listDisplayStyles,
+    gridDisplayStyles,
+    css`/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
+:host{& .result-link{color:var(--atomic-on-background);&:hover,&:focus-visible{color:var(--atomic-primary);text-decoration:underline}&:focus{outline:none}&:visited{color:var(--atomic-visited)}}& .result-grid{grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;& a{justify-content:center}}& .result-list{flex-direction:column;display:flex;& .result-item{flex-wrap:wrap;width:100%;max-width:600px;display:flex;& .result-details{align-content:center}}}}@media (width>=1024px){:host .result-grid{display:grid}}@media not all and (width>=1024px){:host .result-grid{flex-direction:column;display:flex}}`,
+];
 __decorate([
     state()
 ], AtomicCommerceProductList.prototype, "bindings", void 0);

package/dist/atomic/components/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.js CHANGED Viewed

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { NumberValue, Schema, StringValue } from '@coveo/bueno';
 import { buildRecommendations, } from '@coveo/headless/commerce';
-import { html, LitElement, nothing } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
 import { map } from 'lit/directives/map.js';
@@ -29,7 +29,7 @@ import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
 import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
 import { FocusTargetController } from "../../../utils/accessibility-utils";
 import { randomID } from "../../../utils/utils";
-import styles from './atomic-commerce-recommendation-list.tw.css';
+import placeholderStyles from '../../common/item-list/styles/placeholders.tw.css';
 /**
  * The `atomic-commerce-recommendation-list` component displays a list of product recommendations by applying one or more product templates.
  *
@@ -378,7 +378,11 @@ let AtomicCommerceRecommendationList = class AtomicCommerceRecommendationList ex
         return true;
     }
 };
-AtomicCommerceRecommendationList.styles = styles;
+AtomicCommerceRecommendationList.styles = [
+    placeholderStyles,
+    css`/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial}}}:host{& [part~=outline][part~=result-list-grid-clickable-container]{border:1px solid #0000;border-radius:1rem;padding:1rem;transition:all .12s ease-out;position:relative;&:hover{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);box-shadow:0px 10px 25px var(--atomic-neutral);cursor:pointer}}& [part=result-list-grid-clickable]:focus-visible{border-style:var(--tw-border-style);border-width:2px;border-color:var(--atomic-primary);color:var(--atomic-primary);cursor:pointer;text-align:center;border-radius:2px;text-decoration:underline;display:inline-block;position:absolute}& [part=result-list-grid-clickable]:not(:focus){clip:rect(1px,1px,1px,1px);padding:0;position:absolute;overflow:hidden}& .list-wrapper{word-break:break-word}& .list-root.display-grid{justify-content:space-evenly;display:grid;& .result-component{box-sizing:border-box;height:100%}}& .list-root{grid-column-gap:.5rem;grid-row-gap:.5rem;grid-template-columns:repeat(var(--atomic-recs-number-of-columns,1),minmax(0,1fr));grid-template-rows:repeat(var(--atomic-recs-number-of-rows,1),minmax(0,1fr));& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}}& [part=label]{font-family:var(--atomic-font-family);font-size:var(--atomic-text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2/1.5)));--tw-font-weight:var(--atomic-font-bold);font-weight:var(--atomic-font-bold)}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}`,
+];
 __decorate([
     state()
 ], AtomicCommerceRecommendationList.prototype, "bindings", void 0);

package/dist/atomic/components/components/commerce/atomic-product/atomic-product.tw.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
 import { css } from 'lit';
 const styles = css`/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-border-style:solid}}}atomic-result-section-badges{text-align:left}atomic-result-section-actions{text-align:right}atomic-result-section-title-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}atomic-result-section-emphasized{--font-size:var(--atomic-text-2xl);font-weight:500;font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);margin-top:.5rem}:host{position:relative;@layer components{& :host{font-family:var(--atomic-font-family);--tw-font-weight:var(--atomic-font-normal);font-weight:var(--atomic-font-normal)}& atomic-result-section-badges,& atomic-result-section-actions,& atomic-product-section-actions{text-align:left}& atomic-result-section-title-metadata,& atomic-product-section-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-emphasized{--font-size:var(--atomic-text-2xl);font-weight:500;font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);margin-top:.5rem}& .result-root{&.with-sections{justify-items:stretch;display:grid;& atomic-result-section-visual,& atomic-product-section-visual{grid-area:visual}& atomic-result-section-badges{grid-area:badges}& atomic-result-section-actions,& atomic-product-section-actions{grid-area:actions;& atomic-result-quickview{display:inline-block}}& atomic-result-section-title,& atomic-product-section-name{color:var(--atomic-on-background);grid-area:title}& atomic-result-section-title-metadata,& atomic-product-section-metadata{grid-area:title-metadata}& atomic-result-section-emphasized{grid-area:emphasized}& atomic-result-section-excerpt{color:var(--atomic-neutral-dark);grid-area:excerpt}& atomic-result-section-bottom-metadata{color:var(--atomic-neutral-dark);grid-area:bottom-metadata}& atomic-result-section-children{grid-area:children}& atomic-result-section-badges,& atomic-result-section-actions,& atomic-product-section-actions{max-height:calc(2*var(--row-height,2rem) + .5rem);flex-wrap:wrap;gap:.5rem;display:flex}& atomic-result-section-visual,& atomic-product-section-visual,& atomic-result-section-badges,& atomic-result-section-actions,& atomic-product-section-actions,& atomic-result-section-title,& atomic-product-section-name,& atomic-result-section-title-metadata,& atomic-product-section-metadata,& atomic-result-section-emphasized,& atomic-result-section-excerpt,& atomic-product-section-description,& atomic-result-section-bottom-metadata{text-overflow:ellipsis;overflow:hidden}&.image-icon{& atomic-result-section-visual,& atomic-product-section-visual{border-radius:var(--atomic-border-radius)}}&.display-list{@media (width>=1024px){&.image-large.density-compact{& atomic-result-section-visual,& atomic-product-section-visual{width:10.25rem;height:10.25rem}}& atomic-result-section-children{& atomic-result-children::part(children-root),& atomic-insight-result-children::part(children-root){border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:16px}}&.density-comfortable{& atomic-result-section-visual,& atomic-product-section-visual{margin-right:1.5rem}& atomic-result-section-badges,& atomic-result-section-actions,& atomic-product-section-actions{--row-height:2rem;margin-bottom:1.5rem}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-2xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-lg);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:3;-webkit-box-orient:vertical;max-height:4.5rem;margin-top:1.75rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:4rem;margin-top:1.25rem}& atomic-result-section-title-metadata,& atomic-product-section-metadata{margin-top:.475rem}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:16px;margin-top:1.25rem;padding:1.75rem}&::part(show-hide-button){margin-top:1.25rem;margin-bottom:1.25rem}}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:16px;margin-top:1.25rem;padding:1.75rem}&::part(show-hide-button){margin-top:1.25rem;margin-bottom:1.25rem}}&.child-result:not(.last-child),& .placeholder{margin-bottom:1.75rem}}&.density-normal{& atomic-result-section-visual,& atomic-product-section-visual{margin-right:1rem}& atomic-result-section-badges,& atomic-result-section-actions,& atomic-product-section-actions{--row-height:2rem;margin-bottom:1rem}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:2.5rem;margin-top:1.25rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:3.5rem;margin-top:.875rem}& atomic-result-section-title-metadata,& atomic-product-section-metadata{margin-top:.475rem}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:16px;margin-top:.875rem;padding:1.5rem}&::part(show-hide-button){margin-top:.875rem;margin-bottom:.875rem}}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:16px;margin-top:.875rem;padding:1.5rem}&::part(show-hide-button){margin-top:.875rem;margin-bottom:.875rem}}&.child-result:not(.last-child),& .placeholder{margin-bottom:1.5rem}}&.density-compact{& atomic-result-section-visual,& atomic-product-section-visual{margin-right:1rem}& atomic-result-section-badges,& atomic-result-section-actions,& atomic-product-section-actions{--row-height:2rem;margin-bottom:1rem}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:1;-webkit-box-orient:vertical;max-height:1.25rem;margin-top:1rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:3.25rem;margin-top:.6875rem}& atomic-result-section-title-metadata,& atomic-product-section-metadata{margin-top:.475rem}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:16px;margin-top:.475rem;padding:1rem}&::part(show-hide-button){margin-top:.475rem;margin-bottom:.475rem}}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:16px;margin-top:.475rem;padding:1rem}&::part(show-hide-button){margin-top:.475rem;margin-bottom:.475rem}}&.child-result:not(.last-child),& .placeholder{margin-bottom:1rem}}&.image-large,&.image-small{grid-template-rows:repeat(6,auto) minmax(0,1fr);grid-template-columns:minmax(0,min-content) auto 1fr auto;grid-template-areas:"badges badges.actions""visual title title title""visual title-metadata title-metadata title-metadata""visual emphasized emphasized emphasized""visual excerpt excerpt excerpt""visual bottom-metadata bottom-metadata bottom-metadata""visual children children children"}&.image-large.density-comfortable,&.image-large.density-normal{& atomic-result-section-visual,& atomic-product-section-visual{width:20.375rem;height:20.375rem}}&.image-small,&.image-large.density-compact{& atomic-result-section-visual,& atomic-product-section-visual{width:10rem;height:10rem}}&.image-icon{grid-template-rows:repeat(7,minmax(0,min-content));grid-template-columns:minmax(0,min-content) auto 1fr auto;grid-template-areas:"badges badges.actions""visual title title title""visual title-metadata title-metadata title-metadata""visual emphasized emphasized emphasized""visual excerpt excerpt excerpt""visual bottom-metadata bottom-metadata bottom-metadata""visual children children children";& atomic-result-section-visual,& atomic-product-section-visual{width:2rem;height:2rem}}&.image-none{grid-template-rows:repeat(6,auto);grid-template-columns:auto 1fr auto;grid-template-areas:"badges.actions""title title title""title-metadata title-metadata title-metadata""emphasized emphasized emphasized""excerpt excerpt excerpt""bottom-metadata bottom-metadata bottom-metadata""children children children";& atomic-result-section-visual,& atomic-product-section-visual{display:none}}}@media not all and (width>=1024px){& atomic-result-section-children{& atomic-result-children::part(children-root),& atomic-insight-result-children::part(children-root){border-top-style:var(--tw-border-style);border-top-width:1px;border-top-color:var(--atomic-neutral)}}&.density-comfortable{& atomic-result-section-visual,& atomic-product-section-visual{margin-right:1rem}& atomic-result-section-badges{--row-height:2rem;margin-bottom:1rem}& atomic-result-section-actions,& atomic-product-section-actions{--row-height:2.5rem;margin-top:1rem}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:2.5rem;margin-top:1.25rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:4rem;margin-top:.75rem}& atomic-result-section-title-metadata,& atomic-product-section-metadata{margin-top:.475rem}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){margin-inline:-1rem;padding-top:1.75rem;margin-top:1rem;padding-inline:1rem}&::part(show-hide-button){margin-top:1.25rem;margin-bottom:1.25rem}}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){margin-inline:-1rem;padding-top:1.75rem;margin-top:1rem;padding-inline:1rem}&::part(show-hide-button){margin-top:1.25rem;margin-bottom:1.25rem}}&.child-result:not(.last-child),& .placeholder{margin-bottom:1.75rem}}&.density-normal{& atomic-result-section-visual,& atomic-product-section-visual{margin-right:1rem}& atomic-result-section-badges{--row-height:2rem;margin-bottom:1rem}& atomic-result-section-actions,& atomic-product-section-actions{--row-height:2.5rem;margin-top:.75rem}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:2.5rem;margin-top:1rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:3.5rem;margin-top:.625rem}& atomic-result-section-title-metadata,& atomic-product-section-metadata{margin-top:.475rem}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){margin-inline:-1rem;padding-top:1.5rem;margin-top:1rem;padding-inline:1rem}&::part(show-hide-button){margin-top:.875rem;margin-bottom:.875rem}}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){margin-inline:-1rem;padding-top:1.5rem;margin-top:1rem;padding-inline:1rem}&::part(show-hide-button){margin-top:.875rem;margin-bottom:.875rem}}&.child-result:not(.last-child),& .placeholder{margin-bottom:1.5rem}}&.density-compact{& atomic-result-section-visual,& atomic-product-section-visual{margin-right:1rem}& atomic-result-section-badges{--row-height:2rem;margin-bottom:1rem}& atomic-result-section-actions,& atomic-product-section-actions{--row-height:2.5rem;margin-top:.5em}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:1;-webkit-box-orient:vertical;max-height:1.25rem;margin-top:.75rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:3.25rem;margin-top:.4375rem}& atomic-result-section-title-metadata,& atomic-product-section-metadata{margin-top:.475rem}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){margin-inline:-1rem;padding-top:1rem;margin-top:1rem;padding-inline:1rem}&::part(show-hide-button){margin-top:.475rem;margin-bottom:.475rem}}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){margin-inline:-1rem;padding-top:1rem;margin-top:1rem;padding-inline:1rem}&::part(show-hide-button){margin-top:.475rem;margin-bottom:.475rem}}&.child-result:not(.last-child),& .placeholder{margin-bottom:1rem}}&.image-large{grid-template-rows:repeat(8,auto);grid-template-columns:100%;grid-template-areas:"visual""badges""title""title-metadata""emphasized""excerpt""bottom-metadata""actions""children";& atomic-result-section-visual,& atomic-product-section-visual{aspect-ratio:1;aspect-ratio:1;aspect-ratio:1;width:100%;height:auto;margin-bottom:1rem;margin-right:0;@supports not (aspect-ratio:1 / 1){&{height:7.25rem}}}}&.image-small{grid-template-rows:repeat(4,auto) minmax(0,1fr) repeat(3,auto);grid-template-columns:auto minmax(0,1fr);grid-template-areas:"badges badges""visual title""visual title-metadata""visual emphasized""visual.""excerpt excerpt""bottom-metadata bottom-metadata""actions actions""children children";& atomic-result-section-visual,& atomic-product-section-visual{width:24vw;height:24vw;margin-bottom:1rem}}&.image-icon{grid-template-rows:repeat(7,auto) 1fr;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"badges badges""visual title""visual title-metadata""visual emphasized""visual excerpt""visual bottom-metadata""visual actions""visual children";& atomic-result-section-visual,& atomic-product-section-visual{width:2rem;height:2rem;margin-bottom:0}}&.image-none{grid-template-rows:repeat(7,auto);grid-template-columns:100%;grid-template-areas:"badges""title""title-metadata""emphasized""excerpt""bottom-metadata""actions""children";& atomic-result-section-visual,& atomic-product-section-visual{display:none}}}}&.display-grid{& a,& button{position:relative}&.image-large{@media (width>=1024px){&{grid-template-rows:repeat(9,auto);grid-template-columns:100%;grid-template-areas:"badges""visual""title""title-metadata""emphasized""excerpt""children""bottom-metadata""actions"}&.density-comfortable{&.image-large,&.image-small{& atomic-result-section-visual,& atomic-product-section-visual{margin:0 auto 2rem}}&.image-icon{& atomic-result-section-badges{margin-bottom:2rem}& atomic-result-section-visual,& atomic-product-section-visual{width:2rem;height:2rem}}& atomic-result-section-visual,& atomic-product-section-visual{margin-bottom:.5rem}& atomic-result-section-badges{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);--row-height:2rem;margin-bottom:1rem}& atomic-result-section-actions,& atomic-product-section-actions{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);--row-height:2.5rem;margin-top:2.25rem}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-2xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);word-break:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}& atomic-result-section-title-metadata,& atomic-product-section-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);margin-top:.475rem}& atomic-result-section-emphasized{--font-size:var(--atomic-text-2xl);font-weight:500;font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-lg);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:3;-webkit-box-orient:vertical;margin-top:2.25rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:4rem;margin-top:1.75rem}}&.density-normal{&.image-large,&.image-small{& atomic-result-section-visual,& atomic-product-section-visual{margin:0 auto 1.5rem}}&.image-icon{& atomic-result-section-badges{margin-bottom:1.5rem}& atomic-result-section-visual,& atomic-product-section-visual{width:2rem;height:2rem}}& atomic-result-section-visual,& atomic-product-section-visual{margin-bottom:.5rem}& atomic-result-section-badges{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);--row-height:2rem;margin-bottom:1rem}& atomic-result-section-actions,& atomic-product-section-actions{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);--row-height:2rem;margin-top:1.75rem}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);word-break:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}& atomic-result-section-title-metadata,& atomic-product-section-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);margin-top:.475rem}& atomic-result-section-emphasized{--font-size:var(--atomic-text-2xl);font-weight:500;font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:1.75rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:3.5rem;margin-top:1.375rem}}&.density-compact{&.image-large,&.image-small{& atomic-result-section-visual,& atomic-product-section-visual{margin:0 auto 1rem}}&.image-icon{& atomic-result-section-badges{margin-bottom:1rem}& atomic-result-section-visual,& atomic-product-section-visual{width:2rem;height:2rem}}& atomic-result-section-visual,& atomic-product-section-visual{margin-bottom:.5rem}& atomic-result-section-badges{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);--row-height:2rem;margin-bottom:1rem}& atomic-result-section-actions,& atomic-product-section-actions{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);--row-height:2rem;margin-top:1.25rem}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);word-break:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}& atomic-result-section-title-metadata,& atomic-product-section-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);margin-top:.475rem}& atomic-result-section-emphasized{--font-size:var(--atomic-text-2xl);font-weight:500;font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:1;-webkit-box-orient:vertical;margin-top:1.25rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:3.25rem;margin-top:.9375rem}}&.image-large{& atomic-result-section-visual,& atomic-product-section-visual{aspect-ratio:1;aspect-ratio:1;aspect-ratio:1;width:100%;height:auto;@supports not (aspect-ratio:1 / 1){&{height:19.75rem}}}& atomic-result-section-badges{margin-bottom:1rem}}&.image-small{& atomic-result-section-visual,& atomic-product-section-visual{aspect-ratio:1;aspect-ratio:1;aspect-ratio:1;width:100%;height:auto;@supports not (aspect-ratio:1 / 1){&{height:14rem}}}}&.image-none{& atomic-result-section-visual,& atomic-product-section-visual{display:none}}}@media not all and (width>=1024px){& atomic-result-section-children{& atomic-result-children::part(children-root),& atomic-insight-result-children::part(children-root){border-top-style:var(--tw-border-style);border-top-width:1px;border-top-color:var(--atomic-neutral)}}&.density-comfortable{& atomic-result-section-visual,& atomic-product-section-visual{margin-right:1rem}& atomic-result-section-badges{--row-height:2rem;margin-bottom:1rem}& atomic-result-section-actions,& atomic-product-section-actions{--row-height:2.5rem;margin-top:1rem}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:2.5rem;margin-top:1.25rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:4rem;margin-top:.75rem}& atomic-result-section-title-metadata,& atomic-product-section-metadata{margin-top:.475rem}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){margin-inline:-1rem;padding-top:1.75rem;margin-top:1rem;padding-inline:1rem}&::part(show-hide-button){margin-top:1.25rem;margin-bottom:1.25rem}}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){margin-inline:-1rem;padding-top:1.75rem;margin-top:1rem;padding-inline:1rem}&::part(show-hide-button){margin-top:1.25rem;margin-bottom:1.25rem}}&.child-result:not(.last-child),& .placeholder{margin-bottom:1.75rem}}&.density-normal{& atomic-result-section-visual,& atomic-product-section-visual{margin-right:1rem}& atomic-result-section-badges{--row-height:2rem;margin-bottom:1rem}& atomic-result-section-actions,& atomic-product-section-actions{--row-height:2.5rem;margin-top:.75rem}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:2.5rem;margin-top:1rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:3.5rem;margin-top:.625rem}& atomic-result-section-title-metadata,& atomic-product-section-metadata{margin-top:.475rem}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){margin-inline:-1rem;padding-top:1.5rem;margin-top:1rem;padding-inline:1rem}&::part(show-hide-button){margin-top:.875rem;margin-bottom:.875rem}}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){margin-inline:-1rem;padding-top:1.5rem;margin-top:1rem;padding-inline:1rem}&::part(show-hide-button){margin-top:.875rem;margin-bottom:.875rem}}&.child-result:not(.last-child),& .placeholder{margin-bottom:1.5rem}}&.density-compact{& atomic-result-section-visual,& atomic-product-section-visual{margin-right:1rem}& atomic-result-section-badges{--row-height:2rem;margin-bottom:1rem}& atomic-result-section-actions,& atomic-product-section-actions{--row-height:2.5rem;margin-top:.5em}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:1;-webkit-box-orient:vertical;max-height:1.25rem;margin-top:.75rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:3.25rem;margin-top:.4375rem}& atomic-result-section-title-metadata,& atomic-product-section-metadata{margin-top:.475rem}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){margin-inline:-1rem;padding-top:1rem;margin-top:1rem;padding-inline:1rem}&::part(show-hide-button){margin-top:.475rem;margin-bottom:.475rem}}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){margin-inline:-1rem;padding-top:1rem;margin-top:1rem;padding-inline:1rem}&::part(show-hide-button){margin-top:.475rem;margin-bottom:.475rem}}&.child-result:not(.last-child),& .placeholder{margin-bottom:1rem}}&.image-large{grid-template-rows:repeat(8,auto);grid-template-columns:100%;grid-template-areas:"visual""badges""title""title-metadata""emphasized""excerpt""bottom-metadata""actions""children";& atomic-result-section-visual,& atomic-product-section-visual{aspect-ratio:1;aspect-ratio:1;aspect-ratio:1;width:100%;height:auto;margin-bottom:1rem;margin-right:0;@supports not (aspect-ratio:1 / 1){&{height:7.25rem}}}}&.image-small{grid-template-rows:repeat(4,auto) minmax(0,1fr) repeat(3,auto);grid-template-columns:auto minmax(0,1fr);grid-template-areas:"badges badges""visual title""visual title-metadata""visual emphasized""visual.""excerpt excerpt""bottom-metadata bottom-metadata""actions actions""children children";& atomic-result-section-visual,& atomic-product-section-visual{width:24vw;height:24vw;margin-bottom:1rem}}&.image-icon{grid-template-rows:repeat(7,auto) 1fr;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"badges badges""visual title""visual title-metadata""visual emphasized""visual excerpt""visual bottom-metadata""visual actions""visual children";& atomic-result-section-visual,& atomic-product-section-visual{width:2rem;height:2rem;margin-bottom:0}}&.image-none{grid-template-rows:repeat(7,auto);grid-template-columns:100%;grid-template-areas:"badges""title""title-metadata""emphasized""excerpt""bottom-metadata""actions""children";& atomic-result-section-visual,& atomic-product-section-visual{display:none}}}}&.image-small,&.image-icon,&.image-none{@media (width>=1024px){&{grid-template-rows:repeat(9,auto);grid-template-columns:100%;grid-template-areas:"badges""visual""title""title-metadata""emphasized""excerpt""children""bottom-metadata""actions"}&.density-comfortable{&.image-large,&.image-small{& atomic-result-section-visual,& atomic-product-section-visual{margin:0 auto 2rem}}&.image-icon{& atomic-result-section-badges{margin-bottom:2rem}& atomic-result-section-visual,& atomic-product-section-visual{width:2rem;height:2rem}}& atomic-result-section-visual,& atomic-product-section-visual{margin-bottom:.5rem}& atomic-result-section-badges{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);--row-height:2rem;margin-bottom:1rem}& atomic-result-section-actions,& atomic-product-section-actions{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);--row-height:2.5rem;margin-top:2.25rem}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-2xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);word-break:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}& atomic-result-section-title-metadata,& atomic-product-section-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);margin-top:.475rem}& atomic-result-section-emphasized{--font-size:var(--atomic-text-2xl);font-weight:500;font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-lg);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:3;-webkit-box-orient:vertical;margin-top:2.25rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:4rem;margin-top:1.75rem}}&.density-normal{&.image-large,&.image-small{& atomic-result-section-visual,& atomic-product-section-visual{margin:0 auto 1.5rem}}&.image-icon{& atomic-result-section-badges{margin-bottom:1.5rem}& atomic-result-section-visual,& atomic-product-section-visual{width:2rem;height:2rem}}& atomic-result-section-visual,& atomic-product-section-visual{margin-bottom:.5rem}& atomic-result-section-badges{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);--row-height:2rem;margin-bottom:1rem}& atomic-result-section-actions,& atomic-product-section-actions{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);--row-height:2rem;margin-top:1.75rem}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);word-break:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}& atomic-result-section-title-metadata,& atomic-product-section-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);margin-top:.475rem}& atomic-result-section-emphasized{--font-size:var(--atomic-text-2xl);font-weight:500;font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:1.75rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:3.5rem;margin-top:1.375rem}}&.density-compact{&.image-large,&.image-small{& atomic-result-section-visual,& atomic-product-section-visual{margin:0 auto 1rem}}&.image-icon{& atomic-result-section-badges{margin-bottom:1rem}& atomic-result-section-visual,& atomic-product-section-visual{width:2rem;height:2rem}}& atomic-result-section-visual,& atomic-product-section-visual{margin-bottom:.5rem}& atomic-result-section-badges{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);--row-height:2rem;margin-bottom:1rem}& atomic-result-section-actions,& atomic-product-section-actions{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);--row-height:2rem;margin-top:1.25rem}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);word-break:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}& atomic-result-section-title-metadata,& atomic-product-section-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);margin-top:.475rem}& atomic-result-section-emphasized{--font-size:var(--atomic-text-2xl);font-weight:500;font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:1;-webkit-box-orient:vertical;margin-top:1.25rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:3.25rem;margin-top:.9375rem}}&.image-large{& atomic-result-section-visual,& atomic-product-section-visual{aspect-ratio:1;aspect-ratio:1;aspect-ratio:1;width:100%;height:auto;@supports not (aspect-ratio:1 / 1){&{height:19.75rem}}}& atomic-result-section-badges{margin-bottom:1rem}}&.image-small{& atomic-result-section-visual,& atomic-product-section-visual{aspect-ratio:1;aspect-ratio:1;aspect-ratio:1;width:100%;height:auto;@supports not (aspect-ratio:1 / 1){&{height:14rem}}}}&.image-none{& atomic-result-section-visual,& atomic-product-section-visual{display:none}}}@media not all and (width>=1024px){&{grid-template-rows:repeat(9,auto);grid-template-columns:100%;grid-template-areas:"badges""visual""title""title-metadata""emphasized""excerpt""children""bottom-metadata""actions"}&.density-comfortable{& atomic-result-section-visual,& atomic-product-section-visual{margin-bottom:1rem}&.image-small{& atomic-result-section-visual,& atomic-product-section-visual{width:10.25rem;height:10.25rem}}& atomic-result-section-badges{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);--row-height:2rem;margin-bottom:1rem}& atomic-result-section-actions,& atomic-product-section-actions{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);--row-height:2rem;margin-top:1.25rem}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-lg);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:3rem;display:-webkit-box;overflow:hidden}& atomic-result-section-title-metadata,& atomic-product-section-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);margin-top:.475rem}& atomic-result-section-emphasized{--font-size:var(--atomic-text-2xl);font-weight:500;font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:1.25rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:3rem;margin-top:1rem}& atomic-result-section-children{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);margin-top:1.25rem}}&.density-normal{& atomic-result-section-visual,& atomic-product-section-visual{margin-bottom:.75rem}&.image-small{& atomic-result-section-visual,& atomic-product-section-visual{width:10.25rem;height:10.25rem}}& atomic-result-section-badges{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);--row-height:2rem;margin-bottom:1rem}& atomic-result-section-actions,& atomic-product-section-actions{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);--row-height:2rem;margin-top:1rem}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-lg);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:3rem;display:-webkit-box;overflow:hidden}& atomic-result-section-title-metadata,& atomic-product-section-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);margin-top:.475rem}& atomic-result-section-emphasized{--font-size:var(--atomic-text-2xl);font-weight:500;font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:1rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:3rem;margin-top:.75rem}& atomic-result-section-children{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);margin-top:1rem}}&.density-compact{& atomic-result-section-visual,& atomic-product-section-visual{margin-bottom:.5rem}&.image-large{& atomic-result-section-visual,& atomic-product-section-visual{width:100%}}&.image-small{& atomic-result-section-visual,& atomic-product-section-visual{width:10.25rem;height:10.25rem}}& atomic-result-section-badges{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);--row-height:2rem;margin-bottom:1rem}& atomic-result-section-actions,& atomic-product-section-actions{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);--row-height:2rem;margin-top:.75rem}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-lg);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:3rem;display:-webkit-box;overflow:hidden}& atomic-result-section-title-metadata,& atomic-product-section-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);margin-top:.475rem}& atomic-result-section-emphasized{--font-size:var(--atomic-text-2xl);font-weight:500;font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:1;-webkit-box-orient:vertical;margin-top:.75rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:3rem;margin-top:.5rem}& atomic-result-section-children{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);margin-top:.75rem}}&.image-small{& atomic-result-section-visual,& atomic-product-section-visual{aspect-ratio:1;aspect-ratio:1;aspect-ratio:1;width:100%;height:auto;@supports not (aspect-ratio:1 / 1){&{height:9rem}}}}&.image-icon{& atomic-result-section-visual,& atomic-product-section-visual{width:2rem;height:2rem}}&.image-none{& atomic-result-section-visual,& atomic-product-section-visual{display:none}}}}}&.display-table{&.image-large.density-compact{& atomic-result-section-visual,& atomic-product-section-visual{width:10.25rem;height:10.25rem}}& atomic-result-section-children{& atomic-result-children::part(children-root),& atomic-insight-result-children::part(children-root){border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:16px}}&.density-comfortable{& atomic-result-section-visual,& atomic-product-section-visual{margin-right:1.5rem}& atomic-result-section-badges,& atomic-result-section-actions,& atomic-product-section-actions{--row-height:2rem;margin-bottom:1.5rem}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-2xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-lg);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:3;-webkit-box-orient:vertical;max-height:4.5rem;margin-top:1.75rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:4rem;margin-top:1.25rem}& atomic-result-section-title-metadata,& atomic-product-section-metadata{margin-top:.475rem}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:16px;margin-top:1.25rem;padding:1.75rem}&::part(show-hide-button){margin-top:1.25rem;margin-bottom:1.25rem}}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:16px;margin-top:1.25rem;padding:1.75rem}&::part(show-hide-button){margin-top:1.25rem;margin-bottom:1.25rem}}&.child-result:not(.last-child),& .placeholder{margin-bottom:1.75rem}}&.density-normal{& atomic-result-section-visual,& atomic-product-section-visual{margin-right:1rem}& atomic-result-section-badges,& atomic-result-section-actions,& atomic-product-section-actions{--row-height:2rem;margin-bottom:1rem}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:2.5rem;margin-top:1.25rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:3.5rem;margin-top:.875rem}& atomic-result-section-title-metadata,& atomic-product-section-metadata{margin-top:.475rem}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:16px;margin-top:.875rem;padding:1.5rem}&::part(show-hide-button){margin-top:.875rem;margin-bottom:.875rem}}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:16px;margin-top:.875rem;padding:1.5rem}&::part(show-hide-button){margin-top:.875rem;margin-bottom:.875rem}}&.child-result:not(.last-child),& .placeholder{margin-bottom:1.5rem}}&.density-compact{& atomic-result-section-visual,& atomic-product-section-visual{margin-right:1rem}& atomic-result-section-badges,& atomic-result-section-actions,& atomic-product-section-actions{--row-height:2rem;margin-bottom:1rem}& atomic-result-section-title,& atomic-product-section-name{--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height)}& atomic-result-section-excerpt{--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);-webkit-line-clamp:1;-webkit-box-orient:vertical;max-height:1.25rem;margin-top:1rem;display:-webkit-box;overflow:hidden}& atomic-result-section-bottom-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);font-size:var(--font-size);line-height:var(--line-height);max-height:3.25rem;margin-top:.6875rem}& atomic-result-section-title-metadata,& atomic-product-section-metadata{margin-top:.475rem}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:16px;margin-top:.475rem;padding:1rem}&::part(show-hide-button){margin-top:.475rem;margin-bottom:.475rem}}& atomic-result-children,& atomic-insight-result-children{&::part(children-root){border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:16px;margin-top:.475rem;padding:1rem}&::part(show-hide-button){margin-top:.475rem;margin-bottom:.475rem}}&.child-result:not(.last-child),& .placeholder{margin-bottom:1rem}}&.image-large,&.image-small{grid-template-rows:repeat(6,auto) minmax(0,1fr);grid-template-columns:minmax(0,min-content) auto 1fr auto;grid-template-areas:"badges badges.actions""visual title title title""visual title-metadata title-metadata title-metadata""visual emphasized emphasized emphasized""visual excerpt excerpt excerpt""visual bottom-metadata bottom-metadata bottom-metadata""visual children children children"}&.image-large.density-comfortable,&.image-large.density-normal{& atomic-result-section-visual,& atomic-product-section-visual{width:20.375rem;height:20.375rem}}&.image-small,&.image-large.density-compact{& atomic-result-section-visual,& atomic-product-section-visual{width:10rem;height:10rem}}&.image-icon{grid-template-rows:repeat(7,minmax(0,min-content));grid-template-columns:minmax(0,min-content) auto 1fr auto;grid-template-areas:"badges badges.actions""visual title title title""visual title-metadata title-metadata title-metadata""visual emphasized emphasized emphasized""visual excerpt excerpt excerpt""visual bottom-metadata bottom-metadata bottom-metadata""visual children children children";& atomic-result-section-visual,& atomic-product-section-visual{width:2rem;height:2rem}}&.image-none{grid-template-rows:repeat(6,auto);grid-template-columns:auto 1fr auto;grid-template-areas:"badges.actions""title title title""title-metadata title-metadata title-metadata""emphasized emphasized emphasized""excerpt excerpt excerpt""bottom-metadata bottom-metadata bottom-metadata""children children children";& atomic-result-section-visual,& atomic-product-section-visual{display:none}}}}& atomic-table-element{display:none}}& .link-container{display:none}}& .with-sections{&.image-icon{& atomic-product-image::part(previous-button),& atomic-product-image::part(next-button),& atomic-product-image::part(indicator){display:none}}&.display-grid{&.image-large,&.image-small,&.image-icon,&.image-none{& atomic-product-section-name{min-height:calc(var(--line-height)*2);-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}}&.density-comfortable{&.image-icon,&.image-none,&.image-small,&.image-large{& atomic-product-section-description{margin-top:1.25rem}}}&.density-normal{&.image-icon,&.image-none,&.image-small,&.image-large{& atomic-product-section-description{margin-top:.75rem}}}&.density-compact{&.image-icon,&.image-none,&.image-small,&.image-large{& atomic-product-section-description{margin-top:.25rem}}@media (width>=1024px){&.image-large atomic-product-section-children .product-child{aspect-ratio:1;aspect-ratio:1;aspect-ratio:1;width:16.65%;height:auto;@supports not (aspect-ratio:1 / 1){&{height:auto}}}&.image-small atomic-product-section-children .product-child{aspect-ratio:1;aspect-ratio:1;aspect-ratio:1;width:16.65%;height:auto;@supports not (aspect-ratio:1 / 1){&{height:auto}}}&.image-icon atomic-product-section-children .product-child,&.image-none atomic-product-section-children .product-child{width:2rem;height:2rem}}@media not all and (width>=1024px){&.image-large atomic-product-section-children .product-child{aspect-ratio:1;aspect-ratio:1;aspect-ratio:1;width:16.65%;height:auto;@supports not (aspect-ratio:1 / 1){&{height:auto}}}&.image-small atomic-product-section-children .product-child{aspect-ratio:1;aspect-ratio:1;aspect-ratio:1;width:16.65%;max-width:4.75rem;height:auto;@supports not (aspect-ratio:1 / 1){&{height:auto}}}&.image-icon atomic-product-section-children .product-child,&.image-none atomic-product-section-children .product-child{width:2rem;height:2rem}}}}}}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}`;
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial}}}:host{position:relative;@layer components{& :host{font-family:var(--atomic-font-family);--tw-font-weight:var(--atomic-font-normal);font-weight:var(--atomic-font-normal)}& .result-root{&.with-sections{justify-items:stretch;display:grid;&.display-list{@media (width>=1024px){&.image-large,&.image-small{grid-template-rows:repeat(6,auto) minmax(0,1fr);grid-template-columns:minmax(0,min-content) auto 1fr auto;grid-template-areas:"badges badges.actions""visual title title title""visual title-metadata title-metadata title-metadata""visual emphasized emphasized emphasized""visual excerpt excerpt excerpt""visual bottom-metadata bottom-metadata bottom-metadata""visual children children children"}&.image-icon{grid-template-rows:repeat(7,minmax(0,min-content));grid-template-columns:minmax(0,min-content) auto 1fr auto;grid-template-areas:"badges badges.actions""visual title title title""visual title-metadata title-metadata title-metadata""visual emphasized emphasized emphasized""visual excerpt excerpt excerpt""visual bottom-metadata bottom-metadata bottom-metadata""visual children children children"}&.image-none{grid-template-rows:repeat(6,auto);grid-template-columns:auto 1fr auto;grid-template-areas:"badges.actions""title title title""title-metadata title-metadata title-metadata""emphasized emphasized emphasized""excerpt excerpt excerpt""bottom-metadata bottom-metadata bottom-metadata""children children children"}}}&.display-table{&.image-large,&.image-small{grid-template-rows:repeat(6,auto) minmax(0,1fr);grid-template-columns:minmax(0,min-content) auto 1fr auto;grid-template-areas:"badges badges.actions""visual title title title""visual title-metadata title-metadata title-metadata""visual emphasized emphasized emphasized""visual excerpt excerpt excerpt""visual bottom-metadata bottom-metadata bottom-metadata""visual children children children"}&.image-icon{grid-template-rows:repeat(7,minmax(0,min-content));grid-template-columns:minmax(0,min-content) auto 1fr auto;grid-template-areas:"badges badges.actions""visual title title title""visual title-metadata title-metadata title-metadata""visual emphasized emphasized emphasized""visual excerpt excerpt excerpt""visual bottom-metadata bottom-metadata bottom-metadata""visual children children children"}&.image-none{grid-template-rows:repeat(6,auto);grid-template-columns:auto 1fr auto;grid-template-areas:"badges.actions""title title title""title-metadata title-metadata title-metadata""emphasized emphasized emphasized""excerpt excerpt excerpt""bottom-metadata bottom-metadata bottom-metadata""children children children"}}&.display-list{@media not all and (width>=1024px){&.image-large{grid-template-rows:repeat(8,auto);grid-template-columns:100%;grid-template-areas:"visual""badges""title""title-metadata""emphasized""excerpt""bottom-metadata""actions""children"}&.image-small{grid-template-rows:repeat(4,auto) minmax(0,1fr) repeat(3,auto);grid-template-columns:auto minmax(0,1fr);grid-template-areas:"badges badges""visual title""visual title-metadata""visual emphasized""visual.""excerpt excerpt""bottom-metadata bottom-metadata""actions actions""children children"}&.image-icon{grid-template-rows:repeat(7,auto) 1fr;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"badges badges""visual title""visual title-metadata""visual emphasized""visual excerpt""visual bottom-metadata""visual actions""visual children"}&.image-none{grid-template-rows:repeat(7,auto);grid-template-columns:100%;grid-template-areas:"badges""title""title-metadata""emphasized""excerpt""bottom-metadata""actions""children"}}}&.display-grid{grid-template-rows:repeat(9,auto);grid-template-columns:100%;grid-template-areas:"badges""visual""title""title-metadata""emphasized""excerpt""children""bottom-metadata""actions";& a,& button{position:relative}@media not all and (width>=1024px){&.image-large{&.image-large{grid-template-rows:repeat(8,auto);grid-template-columns:100%;grid-template-areas:"visual""badges""title""title-metadata""emphasized""excerpt""bottom-metadata""actions""children"}&.image-small{grid-template-rows:repeat(4,auto) minmax(0,1fr) repeat(3,auto);grid-template-columns:auto minmax(0,1fr);grid-template-areas:"badges badges""visual title""visual title-metadata""visual emphasized""visual.""excerpt excerpt""bottom-metadata bottom-metadata""actions actions""children children"}&.image-icon{grid-template-rows:repeat(7,auto) 1fr;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"badges badges""visual title""visual title-metadata""visual emphasized""visual excerpt""visual bottom-metadata""visual actions""visual children"}&.image-none{grid-template-rows:repeat(7,auto);grid-template-columns:100%;grid-template-areas:"badges""title""title-metadata""emphasized""excerpt""bottom-metadata""actions""children"}}}}}& atomic-table-element{display:none}}& .link-container{display:none}}& .with-sections{&.display-grid{&.image-large,&.image-small,&.image-icon,&.image-none{& atomic-product-section-name{min-height:calc(var(--line-height)*2);-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}}@media (width>=1024px){&.image-large atomic-product-section-children .product-child{aspect-ratio:1;width:16.65%;height:auto;@supports not (aspect-ratio:1 / 1){&{height:auto}}}&.image-small atomic-product-section-children .product-child{aspect-ratio:1;width:16.65%;height:auto;@supports not (aspect-ratio:1 / 1){&{height:auto}}}&.image-icon atomic-product-section-children .product-child,&.image-none atomic-product-section-children .product-child{width:2rem;height:2rem}}@media not all and (width>=1024px){&.image-large atomic-product-section-children .product-child{aspect-ratio:1;width:16.65%;height:auto;@supports not (aspect-ratio:1 / 1){&{height:auto}}}&.image-small atomic-product-section-children .product-child{aspect-ratio:1;width:16.65%;max-width:4.75rem;height:auto;@supports not (aspect-ratio:1 / 1){&{height:auto}}}&.image-icon atomic-product-section-children .product-child,&.image-none atomic-product-section-children .product-child{width:2rem;height:2rem}}&.density-comfortable{&.image-icon,&.image-none,&.image-small,&.image-large{& atomic-product-section-description{margin-top:1.25rem}}}&.density-normal{&.image-icon,&.image-none,&.image-small,&.image-large{& atomic-product-section-description{margin-top:.75rem}}}&.density-compact{&.image-icon,&.image-none,&.image-small,&.image-large{& atomic-product-section-description{margin-top:.25rem}}@media (width>=1024px){&.image-large atomic-product-section-children .product-child{aspect-ratio:1;width:16.65%;height:auto;@supports not (aspect-ratio:1 / 1){&{height:auto}}}&.image-small atomic-product-section-children .product-child{aspect-ratio:1;width:16.65%;height:auto;@supports not (aspect-ratio:1 / 1){&{height:auto}}}&.image-icon atomic-product-section-children .product-child,&.image-none atomic-product-section-children .product-child{width:2rem;height:2rem}}@media not all and (width>=1024px){&.image-large atomic-product-section-children .product-child{aspect-ratio:1;width:16.65%;height:auto;@supports not (aspect-ratio:1 / 1){&{height:auto}}}&.image-small atomic-product-section-children .product-child{aspect-ratio:1;width:16.65%;max-width:4.75rem;height:auto;@supports not (aspect-ratio:1 / 1){&{height:auto}}}&.image-icon atomic-product-section-children .product-child,&.image-none atomic-product-section-children .product-child{width:2rem;height:2rem}}}}}}@property --tw-font-weight{syntax:"*";inherits:false}`;
 export default styles;

package/dist/atomic/components/components/commerce/atomic-product-children/atomic-product-children.js CHANGED Viewed

@@ -10,12 +10,12 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { bindings } from "../../../decorators/bindings";
 import { createProductContextController } from "../../../decorators/commerce/product-template-decorators";
 import { errorGuard } from "../../../decorators/error-guard";
-import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { filterProtocol } from '../../../utils/xss-utils';
 import { renderButton } from '../../common/button';
 import '../atomic-commerce-text/atomic-commerce-text';
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { multiClassMap, tw } from "../../../directives/multi-class-map";
+import { LightDomMixin } from "../../../mixins/light-dom";
 import { closest } from "../../../utils/dom-utils";
 /**
  * Maximum number of child products to display before showing a "+N" button.
@@ -30,7 +30,7 @@ const AMOUNT_OF_VISIBLE_CHILDREN = 5;
  * The component displays up to 5 child products before showing a "+N" button for additional variants.
  * This limit ensures consistent UI layout while preventing performance issues with large product variant collections.
  */
-let AtomicProductChildren = class AtomicProductChildren extends LitElement {
+let AtomicProductChildren = class AtomicProductChildren extends LightDomMixin(LitElement) {
     constructor() {
         super(...arguments);
         this.productController = createProductContextController(this);
@@ -61,9 +61,6 @@ let AtomicProductChildren = class AtomicProductChildren extends LitElement {
             }
         };
     }
-    createRenderRoot() {
-        return this;
-    }
     initialize() {
         const product = this.productController.item;
         if (product) {
@@ -188,7 +185,6 @@ __decorate([
 ], AtomicProductChildren.prototype, "render", null);
 AtomicProductChildren = __decorate([
     customElement('atomic-product-children'),
-    bindings(),
-    withTailwindStyles
+    bindings()
 ], AtomicProductChildren);
 export { AtomicProductChildren };

package/dist/atomic/components/components/commerce/atomic-product-description/atomic-product-description.js CHANGED Viewed

@@ -15,11 +15,11 @@ import { createProductContextController } from "../../../decorators/commerce/pro
 import { errorGuard } from "../../../decorators/error-guard.js";
 import { renderExpandableText, } from '../../common/expandable-text/expandable-text.js';
 import '../atomic-product-text/atomic-product-text.js';
-import { injectStylesForNoShadowDOM } from "../../../decorators/inject-styles-for-no-shadow-dom.js";
+import { LightDomMixin } from "../../../mixins/light-dom.js";
 /**
  * The `atomic-product-description` component renders the description of a product.
  */
-let AtomicProductDescription = class AtomicProductDescription extends LitElement {
+let AtomicProductDescription = class AtomicProductDescription extends LightDomMixin(LitElement) {
     initialize() {
         this.validateProps();
     }
@@ -140,7 +140,6 @@ __decorate([
 ], AtomicProductDescription.prototype, "render", null);
 AtomicProductDescription = __decorate([
     customElement('atomic-product-description'),
-    bindings(),
-    injectStylesForNoShadowDOM
+    bindings()
 ], AtomicProductDescription);
 export { AtomicProductDescription };

package/dist/atomic/components/components/commerce/atomic-product-excerpt/atomic-product-excerpt.js CHANGED Viewed

@@ -15,11 +15,11 @@ import { createProductContextController } from "../../../decorators/commerce/pro
 import { errorGuard } from "../../../decorators/error-guard";
 import { renderExpandableText, } from '../../common/expandable-text/expandable-text';
 import '../atomic-product-text/atomic-product-text.js';
-import { injectStylesForNoShadowDOM } from "../../../decorators/inject-styles-for-no-shadow-dom";
+import { LightDomMixin } from "../../../mixins/light-dom";
 /**
  * The `atomic-product-excerpt` component renders the excerpt of a product.
  */
-let AtomicProductExcerpt = class AtomicProductExcerpt extends LitElement {
+let AtomicProductExcerpt = class AtomicProductExcerpt extends LightDomMixin(LitElement) {
     initialize() { }
     constructor() {
         super();
@@ -118,7 +118,6 @@ __decorate([
 ], AtomicProductExcerpt.prototype, "render", null);
 AtomicProductExcerpt = __decorate([
     customElement('atomic-product-excerpt'),
-    bindings(),
-    injectStylesForNoShadowDOM
+    bindings()
 ], AtomicProductExcerpt);
 export { AtomicProductExcerpt };

package/dist/atomic/components/components/commerce/atomic-product-field-condition/atomic-product-field-condition.js CHANGED Viewed

@@ -9,6 +9,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { bindings } from "../../../decorators/bindings";
 import { createProductContextController } from "../../../decorators/commerce/product-template-decorators";
 import { errorGuard } from "../../../decorators/error-guard";
+import { LightDomMixin } from "../../../mixins/light-dom";
 import { mapProperty } from "../../../utils/props-utils";
 import { makeDefinedConditions, makeMatchConditions, } from '../../common/product-template/product-template-common';
 /**
@@ -17,14 +18,11 @@ import { makeDefinedConditions, makeMatchConditions, } from '../../common/produc
  *
  * @slot default - The content to render if the conditions are met.
  */
-let AtomicProductFieldCondition = class AtomicProductFieldCondition extends LitElement {
+let AtomicProductFieldCondition = class AtomicProductFieldCondition extends LightDomMixin(LitElement) {
     constructor() {
         super(...arguments);
         this.productController = createProductContextController(this);
     }
-    createRenderRoot() {
-        return this;
-    }
     initialize() { }
     get conditions() {
         return [

package/dist/atomic/components/components/commerce/atomic-product-link/atomic-product-link.js CHANGED Viewed

@@ -14,11 +14,10 @@ import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings";
 import { createInteractiveProductContextController, createProductContextController, } from "../../../decorators/commerce/product-template-decorators.js";
 import { errorGuard } from "../../../decorators/error-guard";
-import { injectStylesForNoShadowDOM } from "../../../decorators/inject-styles-for-no-shadow-dom";
-import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { buildCustomEvent } from "../../../utils/event-utils";
 import { buildStringTemplateFromProduct } from '../product-template-component-utils/product-utils';
 import '../atomic-product-text/atomic-product-text';
+import { LightDomMixin } from "../../../mixins/light-dom";
 import { SlotsForNoShadowDOMMixin, } from "../../../mixins/slots-for-no-shadow-dom-mixin";
 import styles from './atomic-product-link.tw.css';
 /**
@@ -27,7 +26,7 @@ import styles from './atomic-product-link.tw.css';
  * @slot default - The content to display inside the link.
  * @slot attributes - Use `<a slot="attributes" target="_blank"></a>` to pass custom attributes to the generated link.
  */
-let AtomicProductLink = class AtomicProductLink extends SlotsForNoShadowDOMMixin(LitElement) {
+let AtomicProductLink = class AtomicProductLink extends LightDomMixin(SlotsForNoShadowDOMMixin(LitElement)) {
     constructor() {
         super(...arguments);
         this.productController = createProductContextController(this);
@@ -125,8 +124,6 @@ __decorate([
 ], AtomicProductLink.prototype, "render", null);
 AtomicProductLink = __decorate([
     customElement('atomic-product-link'),
-    bindings(),
-    injectStylesForNoShadowDOM,
-    withTailwindStyles
+    bindings()
 ], AtomicProductLink);
 export { AtomicProductLink };

package/dist/atomic/components/components/commerce/atomic-product-numeric-field-value/atomic-product-numeric-field-value.js CHANGED Viewed

@@ -11,7 +11,7 @@ import { bindingGuard } from "../../../decorators/binding-guard.js";
 import { bindings } from "../../../decorators/bindings.js";
 import { createProductContextController } from "../../../decorators/commerce/product-template-decorators.js";
 import { errorGuard } from "../../../decorators/error-guard.js";
-import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { LightDomMixin } from "../../../mixins/light-dom.js";
 import { defaultNumberFormatter, } from '../../common/formats/format-common.js';
 import { parseValue } from '../product-template-component-utils/product-utils.js';
 /**
@@ -19,7 +19,7 @@ import { parseValue } from '../product-template-component-utils/product-utils.js
  *
  * The number can be formatted by adding a `atomic-format-number`, `atomic-format-currency` or `atomic-format-unit` component into this component.
  */
-let AtomicProductNumericFieldValue = class AtomicProductNumericFieldValue extends LitElement {
+let AtomicProductNumericFieldValue = class AtomicProductNumericFieldValue extends LightDomMixin(LitElement) {
     constructor() {
         super(...arguments);
         this.productController = createProductContextController(this);
@@ -31,9 +31,6 @@ let AtomicProductNumericFieldValue = class AtomicProductNumericFieldValue extend
             this.formatter = customEvent.detail;
         };
     }
-    createRenderRoot() {
-        return this;
-    }
     initialize() {
         this.addEventListener('atomic/numberFormat', this.setFormat);
     }
@@ -74,7 +71,6 @@ __decorate([
 ], AtomicProductNumericFieldValue.prototype, "render", null);
 AtomicProductNumericFieldValue = __decorate([
     customElement('atomic-product-numeric-field-value'),
-    bindings(),
-    withTailwindStyles
+    bindings()
 ], AtomicProductNumericFieldValue);
 export { AtomicProductNumericFieldValue };