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

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

@@ -1 +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}
+{"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

@@ -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

@@ -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

@@ -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

@@ -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.
  *
@@ -52,7 +55,7 @@ let AtomicCommerceProductList = class AtomicCommerceProductList extends Children
         super(...arguments);
         this.loadingFlag = randomID('firstProductLoaded-');
         this.isAppLoaded = false;
-        this.isEveryProductsReady = false;
+        this.isEveryProductReady = false;
         this.resultTemplateRegistered = false;
         this.templateHasError = false;
         /**
@@ -104,25 +107,27 @@ let AtomicCommerceProductList = class AtomicCommerceProductList extends Children
     }
     async updated(changedProperties) {
         super.updated(changedProperties);
-        if (changedProperties.has('searchOrListingState') &&
-            this.isEveryProductsReady) {
-            this.isEveryProductsReady = false;
+        if (changedProperties.has('searchOrListingState')) {
+            const oldState = changedProperties.get('searchOrListingState');
+            if (!oldState?.isLoading && this.searchOrListingState.isLoading) {
+                this.isEveryProductReady = false;
+            }
         }
         await this.updateProductsReadyState();
     }
     async updateProductsReadyState() {
         if (this.isAppLoaded &&
-            !this.isEveryProductsReady &&
+            !this.isEveryProductReady &&
             this.summaryState?.firstRequestExecuted &&
             this.searchOrListingState?.products?.length > 0) {
             await this.getUpdateComplete();
-            this.isEveryProductsReady = true;
+            this.isEveryProductReady = true;
         }
     }
     render() {
         return html `${when(this.shouldRender, () => html `${when(this.templateHasError, () => html `<slot></slot>`, () => {
             const listClasses = this.computeListDisplayClasses();
-            const productClasses = `${listClasses} ${!this.isEveryProductsReady && 'hidden'}`;
+            const productClasses = `${listClasses} ${!this.isEveryProductReady && 'hidden'}`;
             // Products must be rendered immediately (though hidden) to start their initialization and loading processes.
             // If we wait to render products until placeholders are removed, the components won't begin loading until then,
             // causing a longer delay. The `isEveryProductsReady` flag hides products while preserving placeholders,
@@ -131,7 +136,7 @@ let AtomicCommerceProductList = class AtomicCommerceProductList extends Children
               ${when(this.isAppLoaded, () => renderDisplayWrapper({
                 props: { listClasses: productClasses, display: this.display },
             })(html `${when(this.display === 'grid', () => this.renderGrid(), () => html `${when(this.display === 'list', () => this.renderList(), () => this.renderTable())}`)}`))}
-              ${when(!this.isEveryProductsReady, () => renderDisplayWrapper({
+              ${when(!this.isEveryProductReady, () => renderDisplayWrapper({
                 props: { listClasses, display: this.display },
             })(renderItemPlaceholders({
                 props: {
@@ -213,7 +218,7 @@ let AtomicCommerceProductList = class AtomicCommerceProductList extends Children
         this.searchOrListing.promoteChildToParent(child);
     }
     computeListDisplayClasses() {
-        const displayPlaceholders = !(this.isAppLoaded && this.isEveryProductsReady);
+        const displayPlaceholders = !(this.isAppLoaded && this.isEveryProductReady);
         return getItemListDisplayClasses(this.display, this.density, this.imageSize, this.searchOrListingState?.isLoading, displayPlaceholders);
     }
     renderGrid() {
@@ -326,7 +331,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);
@@ -338,7 +350,7 @@ __decorate([
 ], AtomicCommerceProductList.prototype, "isAppLoaded", void 0);
 __decorate([
     state()
-], AtomicCommerceProductList.prototype, "isEveryProductsReady", void 0);
+], AtomicCommerceProductList.prototype, "isEveryProductReady", void 0);
 __decorate([
     state()
 ], AtomicCommerceProductList.prototype, "resultTemplateRegistered", void 0);

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

@@ -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

@@ -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}}& .result-root.display-grid{grid-template-areas:"badges""visual""title""title-metadata""emphasized""excerpt""bottom-metadata""actions""children"}& .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

@@ -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

@@ -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

@@ -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

@@ -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 [