init

assets/animations.js

@@ -0,0 +1,102 @@
+const SCROLL_ANIMATION_TRIGGER_CLASSNAME = 'scroll-trigger';
+const SCROLL_ANIMATION_OFFSCREEN_CLASSNAME = 'scroll-trigger--offscreen';
+const SCROLL_ZOOM_IN_TRIGGER_CLASSNAME = 'animate--zoom-in';
+const SCROLL_ANIMATION_CANCEL_CLASSNAME = 'scroll-trigger--cancel';
+
+// Scroll in animation logic
+function onIntersection(elements, observer) {
+  elements.forEach((element, index) => {
+    if (element.isIntersecting) {
+      const elementTarget = element.target;
+      if (elementTarget.classList.contains(SCROLL_ANIMATION_OFFSCREEN_CLASSNAME)) {
+        elementTarget.classList.remove(SCROLL_ANIMATION_OFFSCREEN_CLASSNAME);
+        if (elementTarget.hasAttribute('data-cascade'))
+          elementTarget.setAttribute('style', `--animation-order: ${index};`);
+      }
+      observer.unobserve(elementTarget);
+    } else {
+      element.target.classList.add(SCROLL_ANIMATION_OFFSCREEN_CLASSNAME);
+      element.target.classList.remove(SCROLL_ANIMATION_CANCEL_CLASSNAME);
+    }
+  });
+}
+
+function initializeScrollAnimationTrigger(rootEl = document, isDesignModeEvent = false) {
+  const animationTriggerElements = Array.from(rootEl.getElementsByClassName(SCROLL_ANIMATION_TRIGGER_CLASSNAME));
+  if (animationTriggerElements.length === 0) return;
+
+  if (isDesignModeEvent) {
+    animationTriggerElements.forEach((element) => {
+      element.classList.add('scroll-trigger--design-mode');
+    });
+    return;
+  }
+
+  const observer = new IntersectionObserver(onIntersection, {
+    rootMargin: '0px 0px -50px 0px',
+  });
+  animationTriggerElements.forEach((element) => observer.observe(element));
+}
+
+// Zoom in animation logic
+function initializeScrollZoomAnimationTrigger() {
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+  const animationTriggerElements = Array.from(document.getElementsByClassName(SCROLL_ZOOM_IN_TRIGGER_CLASSNAME));
+
+  if (animationTriggerElements.length === 0) return;
+
+  const scaleAmount = 0.2 / 100;
+
+  animationTriggerElements.forEach((element) => {
+    let elementIsVisible = false;
+    const observer = new IntersectionObserver((elements) => {
+      elements.forEach((entry) => {
+        elementIsVisible = entry.isIntersecting;
+      });
+    });
+    observer.observe(element);
+
+    element.style.setProperty('--zoom-in-ratio', 1 + scaleAmount * percentageSeen(element));
+
+    window.addEventListener(
+      'scroll',
+      throttle(() => {
+        if (!elementIsVisible) return;
+
+        element.style.setProperty('--zoom-in-ratio', 1 + scaleAmount * percentageSeen(element));
+      }),
+      { passive: true }
+    );
+  });
+}
+
+function percentageSeen(element) {
+  const viewportHeight = window.innerHeight;
+  const scrollY = window.scrollY;
+  const elementPositionY = element.getBoundingClientRect().top + scrollY;
+  const elementHeight = element.offsetHeight;
+
+  if (elementPositionY > scrollY + viewportHeight) {
+    // If we haven't reached the image yet
+    return 0;
+  } else if (elementPositionY + elementHeight < scrollY) {
+    // If we've completely scrolled past the image
+    return 100;
+  }
+
+  // When the image is in the viewport
+  const distance = scrollY + viewportHeight - elementPositionY;
+  let percentage = distance / ((viewportHeight + elementHeight) / 100);
+  return Math.round(percentage);
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+  initializeScrollAnimationTrigger();
+  initializeScrollZoomAnimationTrigger();
+});
+
+if (Shopify.designMode) {
+  document.addEventListener('shopify:section:load', (event) => initializeScrollAnimationTrigger(event.target, true));
+  document.addEventListener('shopify:section:reorder', () => initializeScrollAnimationTrigger(document, true));
+}

assets/cart-drawer.js

@@ -0,0 +1,132 @@
+class CartDrawer extends HTMLElement {
+  constructor() {
+    super();
+
+    this.addEventListener('keyup', (evt) => evt.code === 'Escape' && this.close());
+    this.querySelector('#CartDrawer-Overlay').addEventListener('click', this.close.bind(this));
+    this.setHeaderCartIconAccessibility();
+  }
+
+  setHeaderCartIconAccessibility() {
+    const cartLink = document.querySelector('#cart-icon-bubble');
+    cartLink.setAttribute('role', 'button');
+    cartLink.setAttribute('aria-haspopup', 'dialog');
+    cartLink.addEventListener('click', (event) => {
+      event.preventDefault();
+      this.open(cartLink);
+    });
+    cartLink.addEventListener('keydown', (event) => {
+      if (event.code.toUpperCase() === 'SPACE') {
+        event.preventDefault();
+        this.open(cartLink);
+      }
+    });
+  }
+
+  open(triggeredBy) {
+    if (triggeredBy) this.setActiveElement(triggeredBy);
+    const cartDrawerNote = this.querySelector('[id^="Details-"] summary');
+    if (cartDrawerNote && !cartDrawerNote.hasAttribute('role')) this.setSummaryAccessibility(cartDrawerNote);
+    // here the animation doesn't seem to always get triggered. A timeout seem to help
+    setTimeout(() => {
+      this.classList.add('animate', 'active');
+    });
+
+    this.addEventListener(
+      'transitionend',
+      () => {
+        const containerToTrapFocusOn = this.classList.contains('is-empty')
+          ? this.querySelector('.drawer__inner-empty')
+          : document.getElementById('CartDrawer');
+        const focusElement = this.querySelector('.drawer__inner') || this.querySelector('.drawer__close');
+        trapFocus(containerToTrapFocusOn, focusElement);
+      },
+      { once: true }
+    );
+
+    document.body.classList.add('overflow-hidden');
+  }
+
+  close() {
+    this.classList.remove('active');
+    removeTrapFocus(this.activeElement);
+    document.body.classList.remove('overflow-hidden');
+  }
+
+  setSummaryAccessibility(cartDrawerNote) {
+    cartDrawerNote.setAttribute('role', 'button');
+    cartDrawerNote.setAttribute('aria-expanded', 'false');
+
+    if (cartDrawerNote.nextElementSibling.getAttribute('id')) {
+      cartDrawerNote.setAttribute('aria-controls', cartDrawerNote.nextElementSibling.id);
+    }
+
+    cartDrawerNote.addEventListener('click', (event) => {
+      event.currentTarget.setAttribute('aria-expanded', !event.currentTarget.closest('details').hasAttribute('open'));
+    });
+
+    cartDrawerNote.parentElement.addEventListener('keyup', onKeyUpEscape);
+  }
+
+  renderContents(parsedState) {
+    this.querySelector('.drawer__inner').classList.contains('is-empty') &&
+      this.querySelector('.drawer__inner').classList.remove('is-empty');
+    this.productId = parsedState.id;
+    this.getSectionsToRender().forEach((section) => {
+      const sectionElement = section.selector
+        ? document.querySelector(section.selector)
+        : document.getElementById(section.id);
+      sectionElement.innerHTML = this.getSectionInnerHTML(parsedState.sections[section.id], section.selector);
+    });
+
+    setTimeout(() => {
+      this.querySelector('#CartDrawer-Overlay').addEventListener('click', this.close.bind(this));
+      this.open();
+    });
+  }
+
+  getSectionInnerHTML(html, selector = '.shopify-section') {
+    return new DOMParser().parseFromString(html, 'text/html').querySelector(selector).innerHTML;
+  }
+
+  getSectionsToRender() {
+    return [
+      {
+        id: 'cart-drawer',
+        selector: '#CartDrawer',
+      },
+      {
+        id: 'cart-icon-bubble',
+      },
+    ];
+  }
+
+  getSectionDOM(html, selector = '.shopify-section') {
+    return new DOMParser().parseFromString(html, 'text/html').querySelector(selector);
+  }
+
+  setActiveElement(element) {
+    this.activeElement = element;
+  }
+}
+
+customElements.define('cart-drawer', CartDrawer);
+
+class CartDrawerItems extends CartItems {
+  getSectionsToRender() {
+    return [
+      {
+        id: 'CartDrawer',
+        section: 'cart-drawer',
+        selector: '.drawer__inner',
+      },
+      {
+        id: 'cart-icon-bubble',
+        section: 'cart-icon-bubble',
+        selector: '.shopify-section',
+      },
+    ];
+  }
+}
+
+customElements.define('cart-drawer-items', CartDrawerItems);

assets/cart-notification.js

@@ -0,0 +1,83 @@
+class CartNotification extends HTMLElement {
+  constructor() {
+    super();
+
+    this.notification = document.getElementById('cart-notification');
+    this.header = document.querySelector('sticky-header');
+    this.onBodyClick = this.handleBodyClick.bind(this);
+
+    this.notification.addEventListener('keyup', (evt) => evt.code === 'Escape' && this.close());
+    this.querySelectorAll('button[type="button"]').forEach((closeButton) =>
+      closeButton.addEventListener('click', this.close.bind(this))
+    );
+  }
+
+  open() {
+    this.notification.classList.add('animate', 'active');
+
+    this.notification.addEventListener(
+      'transitionend',
+      () => {
+        this.notification.focus();
+        trapFocus(this.notification);
+      },
+      { once: true }
+    );
+
+    document.body.addEventListener('click', this.onBodyClick);
+  }
+
+  close() {
+    this.notification.classList.remove('active');
+    document.body.removeEventListener('click', this.onBodyClick);
+
+    removeTrapFocus(this.activeElement);
+  }
+
+  renderContents(parsedState) {
+    this.cartItemKey = parsedState.key;
+    this.getSectionsToRender().forEach((section) => {
+      document.getElementById(section.id).innerHTML = this.getSectionInnerHTML(
+        parsedState.sections[section.id],
+        section.selector
+      );
+    });
+
+    if (this.header) this.header.reveal();
+    this.open();
+  }
+
+  getSectionsToRender() {
+    return [
+      {
+        id: 'cart-notification-product',
+        selector: `[id="cart-notification-product-${this.cartItemKey}"]`,
+      },
+      {
+        id: 'cart-notification-button',
+      },
+      {
+        id: 'cart-icon-bubble',
+      },
+    ];
+  }
+
+  getSectionInnerHTML(html, selector = '.shopify-section') {
+    return new DOMParser().parseFromString(html, 'text/html').querySelector(selector).innerHTML;
+  }
+
+  handleBodyClick(evt) {
+    const target = evt.target;
+    if (target !== this.notification && !target.closest('cart-notification')) {
+      const disclosure = target.closest('details-disclosure, header-menu');
+      this.activeElement = disclosure ? disclosure.querySelector('summary') : null;
+      this.close();
+    }
+  }
+
+  setActiveElement(element) {
+    this.activeElement = element;
+  }
+}
+
+customElements.define('cart-notification', CartNotification);

assets/cart.js

@@ -0,0 +1,246 @@
+class CartRemoveButton extends HTMLElement {
+  constructor() {
+    super();
+
+    this.addEventListener('click', (event) => {
+      event.preventDefault();
+      const cartItems = this.closest('cart-items') || this.closest('cart-drawer-items');
+      cartItems.updateQuantity(this.dataset.index, 0);
+    });
+  }
+}
+
+customElements.define('cart-remove-button', CartRemoveButton);
+
+class CartItems extends HTMLElement {
+  constructor() {
+    super();
+    this.lineItemStatusElement =
+      document.getElementById('shopping-cart-line-item-status') || document.getElementById('CartDrawer-LineItemStatus');
+
+    const debouncedOnChange = debounce((event) => {
+      this.onChange(event);
+    }, ON_CHANGE_DEBOUNCE_TIMER);
+
+    this.addEventListener('change', debouncedOnChange.bind(this));
+  }
+
+  cartUpdateUnsubscriber = undefined;
+
+  connectedCallback() {
+    this.cartUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.cartUpdate, (event) => {
+      if (event.source === 'cart-items') {
+        return;
+      }
+      this.onCartUpdate();
+    });
+  }
+
+  disconnectedCallback() {
+    if (this.cartUpdateUnsubscriber) {
+      this.cartUpdateUnsubscriber();
+    }
+  }
+
+  onChange(event) {
+    this.updateQuantity(event.target.dataset.index, event.target.value, document.activeElement.getAttribute('name'), event.target.dataset.quantityVariantId);
+  }
+
+  onCartUpdate() {
+    if (this.tagName === 'CART-DRAWER-ITEMS') {
+      fetch(`${routes.cart_url}?section_id=cart-drawer`)
+        .then((response) => response.text())
+        .then((responseText) => {
+          const html = new DOMParser().parseFromString(responseText, 'text/html');
+          const selectors = ['cart-drawer-items', '.cart-drawer__footer'];
+          for (const selector of selectors) {
+            const targetElement = document.querySelector(selector);
+            const sourceElement = html.querySelector(selector);
+            if (targetElement && sourceElement) {
+              targetElement.replaceWith(sourceElement);
+            }
+          }
+        })
+        .catch((e) => {
+          console.error(e);
+        });
+    } else {
+      fetch(`${routes.cart_url}?section_id=main-cart-items`)
+        .then((response) => response.text())
+        .then((responseText) => {
+          const html = new DOMParser().parseFromString(responseText, 'text/html');
+          const sourceQty = html.querySelector('cart-items');
+          this.innerHTML = sourceQty.innerHTML;
+        })
+        .catch((e) => {
+          console.error(e);
+        });
+    }
+  }
+
+  getSectionsToRender() {
+    return [
+      {
+        id: 'main-cart-items',
+        section: document.getElementById('main-cart-items').dataset.id,
+        selector: '.js-contents',
+      },
+      {
+        id: 'cart-icon-bubble',
+        section: 'cart-icon-bubble',
+        selector: '.shopify-section',
+      },
+      {
+        id: 'cart-live-region-text',
+        section: 'cart-live-region-text',
+        selector: '.shopify-section',
+      },
+      {
+        id: 'main-cart-footer',
+        section: document.getElementById('main-cart-footer').dataset.id,
+        selector: '.js-contents',
+      },
+    ];
+  }
+
+  updateQuantity(line, quantity, name, variantId) {
+    this.enableLoading(line);
+
+    const body = JSON.stringify({
+      line,
+      quantity,
+      sections: this.getSectionsToRender().map((section) => section.section),
+      sections_url: window.location.pathname,
+    });
+
+    fetch(`${routes.cart_change_url}`, { ...fetchConfig(), ...{ body } })
+      .then((response) => {
+        return response.text();
+      })
+      .then((state) => {
+        const parsedState = JSON.parse(state);
+        const quantityElement =
+          document.getElementById(`Quantity-${line}`) || document.getElementById(`Drawer-quantity-${line}`);
+        const items = document.querySelectorAll('.cart-item');
+
+        if (parsedState.errors) {
+          quantityElement.value = quantityElement.getAttribute('value');
+          this.updateLiveRegions(line, parsedState.errors);
+          return;
+        }
+
+        this.classList.toggle('is-empty', parsedState.item_count === 0);
+        const cartDrawerWrapper = document.querySelector('cart-drawer');
+        const cartFooter = document.getElementById('main-cart-footer');
+
+        if (cartFooter) cartFooter.classList.toggle('is-empty', parsedState.item_count === 0);
+        if (cartDrawerWrapper) cartDrawerWrapper.classList.toggle('is-empty', parsedState.item_count === 0);
+
+        this.getSectionsToRender().forEach((section) => {
+          const elementToReplace =
+            document.getElementById(section.id).querySelector(section.selector) || document.getElementById(section.id);
+          elementToReplace.innerHTML = this.getSectionInnerHTML(
+            parsedState.sections[section.section],
+            section.selector
+          );
+        });
+        const updatedValue = parsedState.items[line - 1] ? parsedState.items[line - 1].quantity : undefined;
+        let message = '';
+        if (items.length === parsedState.items.length && updatedValue !== parseInt(quantityElement.value)) {
+          if (typeof updatedValue === 'undefined') {
+            message = window.cartStrings.error;
+          } else {
+            message = window.cartStrings.quantityError.replace('[quantity]', updatedValue);
+          }
+        }
+        this.updateLiveRegions(line, message);
+
+        const lineItem =
+          document.getElementById(`CartItem-${line}`) || document.getElementById(`CartDrawer-Item-${line}`);
+        if (lineItem && lineItem.querySelector(`[name="${name}"]`)) {
+          cartDrawerWrapper
+            ? trapFocus(cartDrawerWrapper, lineItem.querySelector(`[name="${name}"]`))
+            : lineItem.querySelector(`[name="${name}"]`).focus();
+        } else if (parsedState.item_count === 0 && cartDrawerWrapper) {
+          trapFocus(cartDrawerWrapper.querySelector('.drawer__inner-empty'), cartDrawerWrapper.querySelector('a'));
+        } else if (document.querySelector('.cart-item') && cartDrawerWrapper) {
+          trapFocus(cartDrawerWrapper, document.querySelector('.cart-item__name'));
+        }
+
+        publish(PUB_SUB_EVENTS.cartUpdate, { source: 'cart-items', cartData: parsedState, variantId: variantId });
+      })
+      .catch(() => {
+        this.querySelectorAll('.loading__spinner').forEach((overlay) => overlay.classList.add('hidden'));
+        const errors = document.getElementById('cart-errors') || document.getElementById('CartDrawer-CartErrors');
+        errors.textContent = window.cartStrings.error;
+      })
+      .finally(() => {
+        this.disableLoading(line);
+      });
+  }
+
+  updateLiveRegions(line, message) {
+    const lineItemError =
+      document.getElementById(`Line-item-error-${line}`) || document.getElementById(`CartDrawer-LineItemError-${line}`);
+    if (lineItemError) lineItemError.querySelector('.cart-item__error-text').innerHTML = message;
+
+    this.lineItemStatusElement.setAttribute('aria-hidden', true);
+
+    const cartStatus =
+      document.getElementById('cart-live-region-text') || document.getElementById('CartDrawer-LiveRegionText');
+    cartStatus.setAttribute('aria-hidden', false);
+
+    setTimeout(() => {
+      cartStatus.setAttribute('aria-hidden', true);
+    }, 1000);
+  }
+
+  getSectionInnerHTML(html, selector) {
+    return new DOMParser().parseFromString(html, 'text/html').querySelector(selector).innerHTML;
+  }
+
+  enableLoading(line) {
+    const mainCartItems = document.getElementById('main-cart-items') || document.getElementById('CartDrawer-CartItems');
+    mainCartItems.classList.add('cart__items--disabled');
+
+    const cartItemElements = this.querySelectorAll(`#CartItem-${line} .loading__spinner`);
+    const cartDrawerItemElements = this.querySelectorAll(`#CartDrawer-Item-${line} .loading__spinner`);
+
+    [...cartItemElements, ...cartDrawerItemElements].forEach((overlay) => overlay.classList.remove('hidden'));
+
+    document.activeElement.blur();
+    this.lineItemStatusElement.setAttribute('aria-hidden', false);
+  }
+
+  disableLoading(line) {
+    const mainCartItems = document.getElementById('main-cart-items') || document.getElementById('CartDrawer-CartItems');
+    mainCartItems.classList.remove('cart__items--disabled');
+
+    const cartItemElements = this.querySelectorAll(`#CartItem-${line} .loading__spinner`);
+    const cartDrawerItemElements = this.querySelectorAll(`#CartDrawer-Item-${line} .loading__spinner`);
+
+    cartItemElements.forEach((overlay) => overlay.classList.add('hidden'));
+    cartDrawerItemElements.forEach((overlay) => overlay.classList.add('hidden'));
+  }
+}
+
+customElements.define('cart-items', CartItems);
+
+if (!customElements.get('cart-note')) {
+  customElements.define(
+    'cart-note',
+    class CartNote extends HTMLElement {
+      constructor() {
+        super();
+
+        this.addEventListener(
+          'input',
+          debounce((event) => {
+            const body = JSON.stringify({ note: event.target.value });
+            fetch(`${routes.cart_update_url}`, { ...fetchConfig(), ...{ body } });
+          }, ON_CHANGE_DEBOUNCE_TIMER)
+        );
+      }
+    }
+  );
+}

assets/collage.css

@@ -0,0 +1,202 @@
+.collage-wrapper-title {
+  margin-top: 0;
+  margin-bottom: 3rem;
+}
+
+.collage {
+  display: grid;
+}
+
+.collage__item > * {
+  width: 100%;
+}
+
+.collage__item .card__content {
+  flex-grow: initial;
+}
+
+@media screen and (max-width: 749px) {
+  .collage {
+    grid-column-gap: var(--grid-mobile-horizontal-spacing);
+    grid-row-gap: var(--grid-mobile-vertical-spacing);
+  }
+
+  .collage--mobile {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .collage--mobile .collage__item--left:nth-child(3n - 2) {
+    grid-column: span 2;
+  }
+
+  .collage--mobile .collage__item--left:nth-child(3n - 2):nth-last-child(2) {
+    grid-column: span 1;
+  }
+
+  .collage--mobile .collage__item--left:nth-child(3n) {
+    grid-column-start: 2;
+  }
+
+  .collage--mobile .collage__item--right:nth-child(3n - 2) {
+    grid-column-start: 1;
+  }
+
+  .collage--mobile .collage__item--right:nth-child(3n - 2):last-child {
+    grid-column: span 2;
+  }
+
+  .collage--mobile .collage__item--right:nth-child(3n - 1) {
+    grid-column-start: 2;
+  }
+
+  .collage--mobile .collage__item--right:nth-child(3n) {
+    grid-column: 1 / span 2;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .collage {
+    grid-auto-flow: column;
+    grid-column-gap: var(--grid-desktop-horizontal-spacing);
+    grid-row-gap: var(--grid-desktop-vertical-spacing);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .collage__item--left:nth-child(3n - 2) {
+    grid-column: 1 / span 2;
+    grid-row: span 2;
+  }
+
+  .collage__item--left:nth-child(3n - 2):last-child {
+    grid-column: 1 / span 3;
+  }
+
+  .collage__item--left:nth-child(3n - 1),
+  .collage__item--left:nth-child(3n) {
+    grid-column-start: 3;
+  }
+
+  .collage__item--left:nth-child(3n - 1):last-child {
+    grid-row: span 2;
+  }
+
+  .collage__item--right:nth-child(3n - 2) {
+    grid-column: 1 / span 1;
+    grid-row: span 1;
+  }
+
+  .collage__item--right:nth-child(3n - 2):last-child {
+    grid-column: 1 / span 3;
+  }
+
+  .collage__item--right:nth-child(3n - 1) {
+    grid-column-start: 1;
+  }
+
+  .collage__item--right:nth-child(3n-1):last-child {
+    grid-column: span 2;
+  }
+
+  .collage__item--right:nth-child(3n) {
+    grid-column: 2 / span 2;
+    grid-row: span 2;
+  }
+
+  .collage__item--collection:only-child,
+  .collage__item--product:only-child {
+    justify-self: center;
+    max-width: 73rem;
+    width: 100%;
+  }
+}
+
+.collage-card {
+  height: 100%;
+  position: relative;
+  border-radius: var(--border-radius);
+  border: var(--border-width) solid rgba(var(--color-foreground), var(--border-opacity));
+  padding: var(--image-padding);
+}
+
+/* Needed for gradient continuity with or without animation, background-attachment: local scopes the gradient to its container which happens automatically when a transform is applied (animation on scroll) */
+.collage-card.gradient {
+  transform: perspective(0);
+}
+
+.collage-card:after {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
+    rgba(var(--color-shadow), var(--shadow-opacity));
+  width: calc(var(--border-width) * 2 + 100%);
+  height: calc(var(--border-width) * 2 + 100%);
+  top: calc(var(--border-width) * -1);
+  left: calc(var(--border-width) * -1);
+}
+
+.collage-card.product-card-wrapper {
+  --border-radius: var(--product-card-corner-radius);
+  --border-width: var(--product-card-border-width);
+  --border-opacity: var(--product-card-border-opacity);
+  --shadow-horizontal-offset: var(--product-card-shadow-horizontal-offset);
+  --shadow-vertical-offset: var(--product-card-shadow-vertical-offset);
+  --shadow-blur-radius: var(--product-card-shadow-blur-radius);
+  --shadow-opacity: var(--product-card-shadow-opacity);
+  --shadow-visible: var(--product-card-shadow-visible);
+  --image-padding: var(--product-card-image-padding);
+}
+
+.collage-card .media {
+  height: 100%;
+  overflow: hidden;
+  border-radius: calc(var(--border-radius) - var(--border-width) - var(--image-padding));
+}
+
+.collage-card .deferred-media {
+  height: 100%;
+  overflow: visible;
+}
+
+.collage-card__link {
+  display: block;
+  height: 100%;
+}
+
+.collage-card .deferred-media__poster {
+  background-color: transparent;
+  border: 0;
+}
+
+.collage-card .deferred-media__poster:after {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  outline-offset: 0.3rem;
+  bottom: calc(var(--border-width) * -1);
+  left: calc(var(--border-width) * -1);
+  right: calc(var(--border-width) * -1);
+  top: calc(var(--border-width) * -1);
+}
+
+.collage-card .deferred-media__poster:focus:after {
+  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
+  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
+}
+
+.collage-card .deferred-media__poster:focus-visible:after {
+  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
+  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
+}
+
+.collage-card .deferred-media__poster:focus:not(:focus-visible),
+.collage-card .deferred-media__poster:focus:not(:focus-visible):after {
+  outline: none;
+  box-shadow: none;
+}
+
+.collage-card .deferred-media__poster:focus {
+  outline: none;
+  box-shadow: none;
+}

assets/collapsible-content.css

@@ -0,0 +1,128 @@
+.collapsible-content {
+  position: relative;
+  z-index: 0;
+}
+
+.collapsible-section-layout {
+  padding-bottom: 5rem;
+  padding-top: 5rem;
+}
+
+@media screen and (min-width: 750px) {
+  .collapsible-section-layout {
+    padding-bottom: 7rem;
+    padding-top: 7rem;
+  }
+}
+
+/* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
+.collapsible-content__media {
+  background: transparent;
+}
+
+.collapsible-content__media--small {
+  height: 19.4rem;
+}
+
+.collapsible-content__media--large {
+  height: 43.5rem;
+}
+
+@media screen and (min-width: 750px) {
+  .collapsible-content__media--small {
+    height: 31.4rem;
+  }
+
+  .collapsible-content__media--large {
+    height: 69.5rem;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .collapsible-content__grid--reverse {
+    flex-direction: row-reverse;
+  }
+}
+
+.collapsible-content-wrapper-narrow {
+  margin: 0 auto;
+  padding-right: 1.5rem;
+  padding-left: 1.5rem;
+  max-width: 73.4rem;
+}
+
+.collapsible-content__header {
+  word-break: break-word;
+}
+
+.collapsible-content__heading {
+  margin-bottom: 2rem;
+  margin-top: 0;
+}
+
+@media screen and (min-width: 750px) {
+  .collapsible-content__heading {
+    margin-bottom: 3rem;
+  }
+}
+
+.collapsible-none-layout .accordion + .accordion {
+  border-top: 0;
+}
+
+.collapsible-row-layout .accordion:not(:first-child):not(.color-scheme-1) {
+  margin-top: 1rem;
+}
+
+.caption-with-letter-spacing + h2 {
+  margin-top: 1rem;
+}
+
+@media screen and (min-width: 750px) {
+  .collapsible-content .accordion {
+    margin-top: 0;
+  }
+}
+
+.collapsible-row-layout .accordion {
+  border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
+  margin-bottom: 1.5rem;
+  /* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
+  transform: perspective(0);
+}
+
+.collapsible-row-layout .accordion summary,
+.collapsible-row-layout .accordion .accordion__content {
+  padding: 1.5rem;
+}
+
+.collapsible-row-layout .accordion .accordion__content {
+  padding-top: 0;
+}
+
+.collapsible-content summary:hover {
+  background: rgba(var(--color-foreground), 0.04);
+}
+
+.collapsible-content summary:hover .accordion__title {
+  text-decoration: underline;
+  text-underline-offset: 0.3rem;
+}
+
+/* check for flexbox gap in older Safari versions */
+@supports not (inset: 10px) {
+  @media screen and (min-width: 750px) {
+    .collapsible-content__grid:not(.collapsible-content__grid--reverse) .grid__item:last-child,
+    .collapsible-content__grid--reverse .collapsible-content__grid-item {
+      padding-left: 5rem;
+      padding-right: 0;
+    }
+  }
+
+  @media screen and (min-width: 990px) {
+    .collapsible-content__grid:not(.collapsible-content__grid--reverse) .grid__item:last-child,
+    .collapsible-content__grid--reverse .collapsible-content__grid-item {
+      padding-left: 7rem;
+    }
+  }
+}

assets/component-accordion.css

@@ -0,0 +1,58 @@
+.accordion summary {
+  display: flex;
+  position: relative;
+  line-height: 1;
+  padding: 1.5rem 0;
+}
+
+.accordion .summary__title {
+  display: flex;
+  flex: 1;
+}
+
+.accordion .summary__title + .icon-caret {
+  height: calc(var(--font-heading-scale) * 0.6rem);
+}
+
+.accordion + .accordion {
+  margin-top: 0;
+  border-top: none;
+}
+
+.accordion {
+  margin-top: 2.5rem;
+  margin-bottom: 0;
+  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
+  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
+}
+
+.accordion__title {
+  display: inline-block;
+  max-width: calc(100% - 6rem);
+  min-height: 1.6rem;
+  margin: 0;
+  word-break: break-word;
+}
+
+.accordion .icon-accordion {
+  align-self: center;
+  fill: rgb(var(--color-foreground));
+  height: calc(var(--font-heading-scale) * 2rem);
+  margin-right: calc(var(--font-heading-scale) * 1rem);
+  width: calc(var(--font-heading-scale) * 2rem);
+}
+
+.accordion details[open] > summary .icon-caret {
+  transform: rotate(180deg);
+}
+
+.accordion__content {
+  margin-bottom: 1.5rem;
+  word-break: break-word;
+  overflow-x: auto;
+  padding: 0 0.6rem;
+}
+
+.accordion__content img {
+  max-width: 100%;
+}

assets/component-article-card.css

@@ -0,0 +1,142 @@
+@media screen and (max-width: 749px) {
+  .articles-wrapper .article {
+    width: 100%;
+  }
+}
+
+.article {
+  display: flex;
+  align-items: center;
+}
+
+.article.grid__item {
+  padding: 0;
+}
+
+.grid--peek .article-card {
+  box-sizing: border-box;
+}
+
+.article-card__image-wrapper > a {
+  display: block;
+}
+
+.article-card__title {
+  text-decoration: none;
+  word-break: break-word;
+}
+
+.article-card__title a:after {
+  bottom: 0;
+  content: '';
+  height: 100%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}
+
+.article-card__link.link {
+  padding: 0;
+}
+
+.article-card__link {
+  text-underline-offset: 0.3rem;
+}
+
+.article-card .card__heading {
+  margin-bottom: 0.6rem;
+}
+
+.blog-articles .article-card .card__information,
+.blog__posts .article-card .card__information {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.article-card__info {
+  padding-top: 0.4rem;
+}
+
+.article-card__footer {
+  letter-spacing: 0.1rem;
+  font-size: 1.4rem;
+}
+
+.article-card__footer:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.article-card__footer:last-child {
+  margin-top: auto;
+}
+
+.article-card__excerpt {
+  width: 100%;
+  margin-top: 1.2rem;
+}
+
+.article-card__link:not(:only-child) {
+  margin-right: 3rem;
+}
+
+@media screen and (min-width: 990px) {
+  .article-card__link:not(:only-child) {
+    margin-right: 4rem;
+  }
+}
+
+.article-card__image--small .ratio::before {
+  padding-bottom: 11rem;
+}
+
+.article-card__image--medium .ratio::before {
+  padding-bottom: 22rem;
+}
+
+.article-card__image--large .ratio::before {
+  padding-bottom: 33rem;
+}
+
+@media screen and (min-width: 750px) {
+  .article-card__image--small .ratio::before {
+    padding-bottom: 14.3rem;
+  }
+
+  .article-card__image--medium .ratio::before {
+    padding-bottom: 21.9rem;
+  }
+
+  .article-card__image--large .ratio::before {
+    padding-bottom: 27.5rem;
+  }
+}
+
+@media screen and (min-width: 990px) {
+  .article-card__image--small .ratio::before {
+    padding-bottom: 17.7rem;
+  }
+
+  .article-card__image--medium .ratio::before {
+    padding-bottom: 30.7rem;
+  }
+
+  .article-card__image--large .ratio::before {
+    padding-bottom: 40.7rem;
+  }
+}
+
+/* check for flexbox gap in older Safari versions */
+@supports not (inset: 10px) {
+  .articles-wrapper.grid {
+    margin: 0 0 5rem 0;
+  }
+
+  @media screen and (min-width: 750px) {
+    .articles-wrapper.grid {
+      margin-bottom: 7rem;
+    }
+  }
+}

assets/component-card.css

@@ -0,0 +1,484 @@
+.card-wrapper {
+  color: inherit;
+  height: 100%;
+  position: relative;
+  text-decoration: none;
+}
+
+.card {
+  text-decoration: none;
+  text-align: var(--text-alignment);
+}
+
+.card:not(.ratio) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card.card--horizontal {
+  --text-alignment: left;
+  --image-padding: 0rem;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 1.5rem;
+}
+
+.card--horizontal.ratio:before {
+  padding-bottom: 0;
+}
+
+.card--card.card--horizontal {
+  padding: 1.2rem;
+}
+
+.card--card.card--horizontal.card--text {
+  column-gap: 0;
+}
+
+.card--card {
+  height: 100%;
+}
+
+.card--card,
+.card--standard .card__inner {
+  position: relative;
+  box-sizing: border-box;
+  border-radius: var(--border-radius);
+  border: var(--border-width) solid rgba(var(--color-foreground), var(--border-opacity));
+}
+
+.card--card:after,
+.card--standard .card__inner:after {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  width: calc(var(--border-width) * 2 + 100%);
+  height: calc(var(--border-width) * 2 + 100%);
+  top: calc(var(--border-width) * -1);
+  left: calc(var(--border-width) * -1);
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
+    rgba(var(--color-shadow), var(--shadow-opacity));
+}
+
+/* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
+.card--card.gradient,
+.card__inner.gradient {
+  transform: perspective(0);
+}
+
+/* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
+.card__inner.color-scheme-1 {
+  background: transparent;
+}
+
+/* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
+.card--card.gradient,
+.card__inner.gradient {
+  transform: perspective(0);
+}
+
+/* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
+.card__inner.color-scheme-1 {
+  background: transparent;
+}
+
+.card .card__inner .card__media {
+  overflow: hidden;
+  /* Fix for Safari border bug on hover */
+  z-index: 0;
+  border-radius: calc(var(--border-radius) - var(--border-width) - var(--image-padding));
+}
+
+.card--card .card__inner .card__media {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.card--standard.card--text {
+  background-color: transparent;
+}
+
+.card-information {
+  text-align: var(--text-alignment);
+}
+
+.card__media,
+.card .media {
+  bottom: 0;
+  position: absolute;
+  top: 0;
+}
+
+.card .media {
+  width: 100%;
+}
+
+.card__media {
+  margin: var(--image-padding);
+  width: calc(100% - 2 * var(--image-padding));
+}
+
+.card--standard .card__media {
+  margin: var(--image-padding);
+}
+
+.card__inner {
+  width: 100%;
+}
+
+.card--media .card__inner .card__content {
+  position: relative;
+  padding: calc(var(--image-padding) + 1rem);
+}
+
+.card__content {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) max-content minmax(0, 1fr);
+  padding: 1rem;
+  width: 100%;
+  flex-grow: 1;
+}
+
+.card__content--auto-margins {
+  grid-template-rows: minmax(0, auto) max-content minmax(0, auto);
+}
+
+.card__information {
+  grid-row-start: 2;
+  padding: 1.3rem 1rem;
+}
+
+.card:not(.ratio) > .card__content {
+  grid-template-rows: max-content minmax(0, 1fr) max-content auto;
+}
+
+.card-information .card__information-volume-pricing-note {
+  margin-top: 0.6rem;
+  line-height: calc(0.5 + 0.4 / var(--font-body-scale));
+  color: rgba(var(--color-foreground), 0.75);
+}
+
+@media screen and (min-width: 750px) {
+  .card__information {
+    padding-bottom: 1.7rem;
+    padding-top: 1.7rem;
+  }
+}
+
+.card__badge {
+  align-self: flex-end;
+  grid-row-start: 3;
+  justify-self: flex-start;
+}
+
+.card__badge.top {
+  align-self: flex-start;
+  grid-row-start: 1;
+}
+
+.card__badge.right {
+  justify-self: flex-end;
+}
+
+.card:not(.card--horizontal) > .card__content > .card__badge {
+  margin: 1.3rem;
+}
+
+.card__media .media img {
+  height: 100%;
+  object-fit: cover;
+  object-position: center center;
+  width: 100%;
+}
+
+.card__inner:not(.ratio) > .card__content {
+  height: 100%;
+}
+
+.card__heading {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.card__heading:last-child {
+  margin-bottom: 0;
+}
+
+.card--horizontal .card__heading,
+.card--horizontal .price__container .price-item,
+.card--horizontal__quick-add {
+  font-size: calc(var(--font-heading-scale) * 1.2rem);
+}
+
+.card--horizontal
+  .card-information
+  > *:not(.visually-hidden:first-child)
+  + *:not(.rating):not(.card__information-volume-pricing-note) {
+  margin-top: 0;
+}
+
+.card--horizontal__quick-add:before {
+  box-shadow: none;
+}
+
+@media only screen and (min-width: 750px) {
+  .card--horizontal .card__heading,
+  .card--horizontal .price__container .price-item,
+  .card--horizontal__quick-add {
+    font-size: calc(var(--font-heading-scale) * 1.3rem);
+  }
+}
+
+.card--card.card--media > .card__content {
+  margin-top: calc(0rem - var(--image-padding));
+}
+
+.card--standard.card--text a::after,
+.card--card .card__heading a::after {
+  bottom: calc(var(--border-width) * -1);
+  left: calc(var(--border-width) * -1);
+  right: calc(var(--border-width) * -1);
+  top: calc(var(--border-width) * -1);
+}
+
+.card__heading a::after {
+  bottom: 0;
+  content: '';
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+}
+
+.card__heading a:after {
+  outline-offset: 0.3rem;
+}
+
+.card__heading a:focus:after {
+  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
+  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
+}
+
+.card__heading a:focus-visible:after {
+  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
+  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
+}
+
+.card__heading a:focus:not(:focus-visible):after {
+  box-shadow: none;
+  outline: 0;
+}
+
+.card__heading a:focus {
+  box-shadow: none;
+  outline: 0;
+}
+
+@media screen and (min-width: 990px) {
+  .card .media.media--hover-effect > img:only-child,
+  .card-wrapper .media.media--hover-effect > img:only-child {
+    transition: transform var(--duration-long) ease;
+  }
+
+  .card:hover .media.media--hover-effect > img:first-child:only-child,
+  .card-wrapper:hover .media.media--hover-effect > img:first-child:only-child {
+    transform: scale(1.03);
+  }
+
+  .card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child) {
+    opacity: 0;
+  }
+
+  .card-wrapper:hover .media.media--hover-effect > img + img {
+    opacity: 1;
+    transition: transform var(--duration-long) ease;
+    transform: scale(1.03);
+  }
+
+  .underline-links-hover:hover a {
+    text-decoration: underline;
+    text-underline-offset: 0.3rem;
+  }
+}
+
+.card--standard.card--media .card__inner .card__information,
+.card--standard.card--text:not(.card--horizontal) > .card__content .card__heading:not(.card__heading--placeholder),
+.card--standard:not(.card--horizontal) > .card__content .card__badge,
+.card--standard.card--text.article-card > .card__content .card__information,
+.card--standard > .card__content .card__caption {
+  display: none;
+}
+
+.card--standard:not(.card--horizontal) .placeholder-svg {
+  width: 100%;
+}
+
+.card--standard > .card__content {
+  padding: 0;
+}
+
+.card--standard > .card__content .card__information {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.card--card.card--media .card__inner .card__information,
+.card--card.card--text .card__inner,
+.card--card.card--media > .card__content .card__badge {
+  display: none;
+}
+
+.card--horizontal .card__badge,
+.card--horizontal.card--text .card__inner {
+  display: none;
+}
+
+.card--extend-height {
+  height: 100%;
+}
+
+.card--extend-height.card--standard.card--text,
+.card--extend-height.card--media {
+  display: flex;
+  flex-direction: column;
+}
+
+.card--extend-height.card--standard.card--text .card__inner,
+.card--extend-height.card--media .card__inner {
+  flex-grow: 1;
+}
+
+.card .icon-wrap {
+  margin-left: 0.8rem;
+  white-space: nowrap;
+  transition: transform var(--duration-short) ease;
+  overflow: hidden;
+}
+
+.card-information > * + * {
+  margin-top: 0.5rem;
+}
+
+.card-information {
+  width: 100%;
+}
+
+.card-information > * {
+  line-height: calc(1 + 0.4 / var(--font-body-scale));
+  color: rgb(var(--color-foreground));
+}
+
+.card-information > .price {
+  color: rgb(var(--color-foreground));
+}
+
+.card--horizontal .card-information > .price {
+  color: rgba(var(--color-foreground), 0.75);
+}
+
+.card-information > .rating {
+  margin-top: 0.4rem;
+}
+
+.card-information > *:not(.visually-hidden:first-child) + *:not(.rating):not(.card__information-volume-pricing-note) {
+  margin-top: 0.7rem;
+}
+
+.card-information .caption {
+  letter-spacing: 0.07rem;
+}
+
+.card-article-info {
+  margin-top: 1rem;
+}
+
+/* Card Shapes */
+
+.card--shape .card__content {
+  padding-top: 0;
+}
+
+.card--shape.card--standard:not(.card--text) .card__inner {
+  border: 0;
+  /* Border is not currently compatible with image shapes for standard cards. */
+  background-color: transparent;
+  filter: drop-shadow(
+    var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
+      rgba(var(--color-shadow), var(--shadow-opacity))
+  );
+}
+
+.card--shape.card--standard:not(.card--text) .card__inner:after {
+  display: none;
+}
+
+.grid__item:nth-child(2n) .shape--blob {
+  clip-path: polygon(var(--shape--blob-2));
+}
+
+.grid__item:nth-child(3n) .shape--blob {
+  clip-path: polygon(var(--shape--blob-3));
+}
+
+.grid__item:nth-child(4n) .shape--blob {
+  clip-path: polygon(var(--shape--blob-4));
+}
+
+.grid__item:nth-child(5n) .shape--blob {
+  clip-path: polygon(var(--shape--blob-5));
+}
+
+.grid__item:nth-child(7n) .shape--blob {
+  clip-path: polygon(var(--shape--blob-6));
+}
+
+.grid__item:nth-child(8n) .shape--blob {
+  clip-path: polygon(var(--shape--blob-1));
+}
+
+/* Card Shape Hover Rules */
+
+@media (prefers-reduced-motion: no-preference) {
+  .product-card-wrapper .shape--round {
+    transition: clip-path var(--duration-long) ease;
+  }
+
+  .product-card-wrapper:hover .shape--round {
+    clip-path: ellipse(47% 47% at 50% 50%);
+  }
+
+  .product-card-wrapper .shape--blob {
+    transition: clip-path var(--duration-long) ease-in-out;
+  }
+
+  .product-card-wrapper:hover .shape--blob {
+    clip-path: polygon(var(--shape--blob-5));
+  }
+
+  .grid__item:nth-child(2n) .product-card-wrapper:hover .shape--blob {
+    clip-path: polygon(var(--shape--blob-6));
+  }
+
+  .grid__item:nth-child(3n) .product-card-wrapper:hover .shape--blob {
+    clip-path: polygon(var(--shape--blob-1));
+  }
+
+  .grid__item:nth-child(4n) .product-card-wrapper:hover .shape--blob {
+    clip-path: polygon(var(--shape--blob-2));
+  }
+
+  .grid__item:nth-child(5n) .product-card-wrapper:hover .shape--blob {
+    clip-path: polygon(var(--shape--blob-3));
+  }
+
+  .grid__item:nth-child(7n) .product-card-wrapper:hover .shape--blob {
+    clip-path: polygon(var(--shape--blob-4));
+  }
+
+  .grid__item:nth-child(8n) .product-card-wrapper:hover .shape--blob {
+    clip-path: polygon(var(--shape--blob-5));
+  }
+}

assets/component-cart-drawer.css

@@ -0,0 +1,405 @@
+.drawer {
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+  background-color: rgba(var(--color-foreground), 0.5);
+  transition: visibility var(--duration-default) ease;
+}
+
+.drawer.active {
+  visibility: visible;
+}
+
+.drawer__inner {
+  height: 100%;
+  width: 40rem;
+  max-width: calc(100vw - 3rem);
+  padding: 0 1.5rem;
+  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
+  border-right: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform var(--duration-default) ease;
+}
+
+.drawer__inner-empty {
+  height: 100%;
+  padding: 0 1.5rem;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.cart-drawer__warnings {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+}
+
+cart-drawer.is-empty .drawer__inner {
+  display: grid;
+  grid-template-rows: 1fr;
+  align-items: center;
+  padding: 0;
+}
+
+cart-drawer.is-empty .drawer__header {
+  display: none;
+}
+
+cart-drawer:not(.is-empty) .cart-drawer__warnings,
+cart-drawer:not(.is-empty) .cart-drawer__collection {
+  display: none;
+}
+
+.cart-drawer__warnings--has-collection .cart__login-title {
+  margin-top: 2.5rem;
+}
+
+.drawer.active .drawer__inner {
+  transform: translateX(0);
+}
+
+.drawer__header {
+  position: relative;
+  padding: 1.5rem 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.drawer__heading {
+  margin: 0 0 1rem;
+}
+
+.drawer__close {
+  display: inline-block;
+  padding: 0;
+  min-width: 4.4rem;
+  min-height: 4.4rem;
+  box-shadow: 0 0 0 0.2rem rgba(var(--color-button), 0);
+  position: absolute;
+  top: 10px;
+  right: -10px;
+  color: rgb(var(--color-foreground));
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.cart-drawer__warnings .drawer__close {
+  right: 5px;
+}
+
+.drawer__close svg {
+  height: 2rem;
+  width: 2rem;
+}
+
+.drawer__contents {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.drawer__footer {
+  border-top: 0.1rem solid rgba(var(--color-foreground), 0.2);
+  padding: 1.5rem 0;
+}
+
+cart-drawer-items.is-empty + .drawer__footer {
+  display: none;
+}
+
+.drawer__footer > details {
+  margin-top: -1.5rem;
+  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.2);
+}
+
+.drawer__footer > details[open] {
+  padding-bottom: 1.5rem;
+}
+
+.drawer__footer summary {
+  display: flex;
+  position: relative;
+  line-height: 1;
+  padding: 1.5rem 2.8rem 1.5rem 0;
+}
+
+.drawer__footer > details + .cart-drawer__footer {
+  padding-top: 1.5rem;
+}
+
+cart-drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100%;
+}
+
+.cart-drawer__overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.cart-drawer__overlay:empty {
+  display: block;
+}
+
+.cart-drawer__form {
+  flex-grow: 1;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.cart-drawer__collection {
+  margin: 0 2.5rem 1.5rem;
+}
+
+.cart-drawer .drawer__cart-items-wrapper {
+  flex-grow: 1;
+}
+
+.cart-drawer .cart-items,
+.cart-drawer tbody {
+  display: block;
+  width: 100%;
+}
+
+.cart-drawer thead {
+  display: inline-table;
+  width: 100%;
+}
+
+cart-drawer-items {
+  overflow: auto;
+  flex: 1;
+}
+
+@media screen and (max-height: 650px) {
+  cart-drawer-items {
+    overflow: visible;
+  }
+
+  .drawer__inner {
+    overflow: scroll;
+  }
+}
+
+.cart-drawer .cart-item {
+  display: grid;
+  grid-template: repeat(2, auto) / repeat(4, 1fr);
+  gap: 1rem;
+  margin-bottom: 0;
+}
+
+.cart-drawer .cart-item:last-child {
+  margin-bottom: 1rem;
+}
+
+.cart-drawer .cart-item__media {
+  grid-row: 1 / 3;
+}
+
+.cart-drawer .cart-item__image {
+  max-width: 100%;
+}
+
+.cart-drawer .cart-items thead {
+  margin-bottom: 0.5rem;
+}
+
+.cart-drawer .cart-items thead th:first-child,
+.cart-drawer .cart-items thead th:last-child {
+  width: 0;
+  padding: 0;
+}
+
+.cart-drawer .cart-items thead th:nth-child(2) {
+  width: 50%;
+  padding-left: 0;
+}
+
+.cart-drawer .cart-items thead tr {
+  display: table-row;
+  margin-bottom: 0;
+}
+
+.cart-drawer .cart-items th {
+  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
+}
+
+.cart-drawer .cart-item:last-child {
+  margin-bottom: 1.5rem;
+}
+
+.cart-drawer .cart-item .loading__spinner {
+  right: 5px;
+  padding-top: 2.5rem;
+}
+
+.cart-drawer .cart-items td {
+  padding-top: 1.7rem;
+}
+
+.cart-drawer .cart-item > td + td {
+  padding-left: 1rem;
+}
+
+.cart-drawer .cart-item__details {
+  width: auto;
+  grid-column: 2 / 4;
+}
+
+.cart-drawer .cart-item__totals {
+  pointer-events: none;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+
+.cart-drawer.cart-drawer .cart-item__price-wrapper > *:only-child {
+  margin-top: 0;
+}
+
+.cart-drawer .cart-item__price-wrapper .cart-item__discounted-prices {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.cart-drawer .unit-price {
+  margin-top: 0.6rem;
+}
+
+.cart-drawer .cart-items .cart-item__quantity {
+  padding-top: 0;
+  grid-column: 2 / 5;
+}
+
+@media screen and (max-width: 749px) {
+  .cart-drawer .cart-item cart-remove-button {
+    margin-left: 0;
+  }
+}
+
+.cart-drawer__footer > * + * {
+  margin-top: 1rem;
+}
+
+.cart-drawer .totals {
+  justify-content: space-between;
+}
+
+.cart-drawer .price {
+  line-height: 1;
+}
+
+.cart-drawer .tax-note {
+  margin: 1.2rem 0 2rem auto;
+  text-align: left;
+}
+
+.cart-drawer .product-option dd {
+  word-break: break-word;
+}
+
+.cart-drawer details[open] > summary .icon-caret {
+  transform: rotate(180deg);
+}
+
+.cart-drawer .cart__checkout-button {
+  max-width: none;
+}
+
+.drawer__footer .cart__dynamic-checkout-buttons {
+  max-width: 100%;
+}
+
+.drawer__footer #dynamic-checkout-cart ul {
+  flex-wrap: wrap !important;
+  flex-direction: row !important;
+  margin: 0.5rem -0.5rem 0 0 !important;
+  gap: 0.5rem;
+}
+
+.drawer__footer [data-shopify-buttoncontainer] {
+  justify-content: flex-start;
+}
+
+.drawer__footer #dynamic-checkout-cart ul > li {
+  flex-basis: calc(50% - 0.5rem) !important;
+  margin: 0 !important;
+}
+
+.drawer__footer #dynamic-checkout-cart ul > li:only-child {
+  flex-basis: 100% !important;
+  margin-right: 0.5rem !important;
+}
+
+@media screen and (min-width: 750px) {
+  .drawer__footer #dynamic-checkout-cart ul > li {
+    flex-basis: calc(100% / 3 - 0.5rem) !important;
+    margin: 0 !important;
+  }
+
+  .drawer__footer #dynamic-checkout-cart ul > li:first-child:nth-last-child(2),
+  .drawer__footer #dynamic-checkout-cart ul > li:first-child:nth-last-child(2) ~ li,
+  .drawer__footer #dynamic-checkout-cart ul > li:first-child:nth-last-child(4),
+  .drawer__footer #dynamic-checkout-cart ul > li:first-child:nth-last-child(4) ~ li {
+    flex-basis: calc(50% - 0.5rem) !important;
+  }
+}
+
+cart-drawer-items::-webkit-scrollbar {
+  width: 3px;
+}
+
+cart-drawer-items::-webkit-scrollbar-thumb {
+  background-color: rgba(var(--color-foreground), 0.7);
+  border-radius: 100px;
+}
+
+cart-drawer-items::-webkit-scrollbar-track-piece {
+  margin-top: 31px;
+}
+
+.cart-drawer .quantity-popover-container {
+  padding: 0;
+}
+
+.cart-drawer .quantity-popover__info.global-settings-popup {
+  transform: translateY(0);
+  right: 0;
+}
+
+.cart-drawer .cart-item__error {
+  margin-top: 0.8rem;
+}
+
+.cart-drawer .quantity-popover__info + .cart-item__error {
+  margin-top: 0.2rem;
+}
+
+@media screen and (min-width: 750px) {
+  .cart-drawer .cart-item__quantity--info quantity-popover > * {
+    padding-left: 0;
+  }
+
+  .cart-drawer .cart-item__error {
+    margin-left: 0;
+  }
+}

assets/component-cart-items.css

@@ -0,0 +1,356 @@
+cart-items .title-wrapper-with-link {
+  margin-top: 0;
+}
+
+.cart-items td,
+.cart-items th {
+  padding: 0;
+  border: none;
+}
+
+.cart-items th {
+  text-align: left;
+  padding-bottom: 1.8rem;
+  opacity: 0.85;
+  font-weight: normal;
+}
+
+.cart-item__quantity-wrapper {
+  display: flex;
+}
+
+.cart-item__totals {
+  position: relative;
+}
+
+.cart-items *.right {
+  text-align: right;
+}
+
+.cart-item__image-container {
+  display: inline-flex;
+  align-items: flex-start;
+}
+
+.cart-item__image-container:after {
+  content: none;
+}
+
+.cart-item__image {
+  height: auto;
+  max-width: calc(10rem / var(--font-body-scale));
+}
+
+@media screen and (min-width: 750px) {
+  .cart-item__image {
+    max-width: 100%;
+  }
+}
+
+.cart-item__details {
+  font-size: 1.6rem;
+  line-height: calc(1 + 0.4 / var(--font-body-scale));
+}
+
+.cart-item__details > * {
+  margin: 0;
+  max-width: 30rem;
+}
+
+.cart-item__details > * + * {
+  margin-top: 0.6rem;
+}
+
+.cart-item__media {
+  position: relative;
+}
+
+.cart-item__link {
+  display: block;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.cart-item__name {
+  text-decoration: none;
+  display: block;
+}
+
+.cart-item__name:hover {
+  text-decoration: underline;
+  text-underline-offset: 0.3rem;
+  text-decoration-thickness: 0.2rem;
+}
+
+.cart-item__price-wrapper > * {
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+
+.cart-item__discounted-prices dd {
+  margin: 0;
+}
+
+.cart-item__discounted-prices .cart-item__old-price {
+  font-size: 1.4rem;
+}
+
+.cart-item__old-price {
+  opacity: 0.7;
+}
+
+.cart-item__final-price {
+  font-weight: 400;
+}
+
+.product-option {
+  font-size: 1.4rem;
+  word-break: break-word;
+  line-height: calc(1 + 0.5 / var(--font-body-scale));
+}
+
+.cart-item cart-remove-button {
+  display: flex;
+  margin-left: 1rem;
+}
+
+@media screen and (min-width: 750px) and (max-width: 989px) {
+  .cart-item cart-remove-button {
+    width: 4.5rem;
+    height: 4.5rem;
+  }
+}
+
+cart-remove-button .button {
+  min-width: calc(4.5rem / var(--font-body-scale));
+  min-height: 4.5rem;
+  padding: 0;
+  margin: 0 0.1rem 0.1rem 0;
+}
+
+cart-remove-button .button:before,
+cart-remove-button .button:after {
+  content: none;
+}
+
+cart-remove-button .button:not([disabled]):hover {
+  color: rgb(var(--color-foreground));
+}
+
+@media screen and (min-width: 750px) {
+  cart-remove-button .button {
+    min-width: 3.5rem;
+    min-height: 3.5rem;
+  }
+}
+
+cart-remove-button .icon-remove {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.cart-item .loading__spinner {
+  top: 0;
+  left: auto;
+  right: auto;
+  bottom: 0;
+  padding: 0;
+}
+
+@media screen and (min-width: 750px) {
+  .cart-item .loading__spinner {
+    right: 0;
+    padding-top: 4.5rem;
+    bottom: auto;
+  }
+}
+
+.cart-item .loading__spinner:not(.hidden) ~ * {
+  visibility: hidden;
+}
+
+.cart-item__error {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 0.2rem;
+  width: min-content;
+  min-width: 100%;
+}
+
+.cart-item__error-text {
+  font-size: 1.3rem;
+  line-height: 1.4;
+  letter-spacing: 0.04rem;
+  order: 1;
+}
+
+.cart-item__error-text + svg {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 0.7rem;
+  margin-top: 0.25rem;
+}
+
+.cart-item__error-text:empty + svg {
+  display: none;
+}
+
+.product-option + .product-option {
+  margin-top: 0.4rem;
+}
+
+.product-option * {
+  display: inline;
+  margin: 0;
+}
+
+.cart-items thead th {
+  text-transform: uppercase;
+}
+
+@media screen and (max-width: 749px) {
+  .cart-items,
+  .cart-items thead,
+  .cart-items tbody {
+    display: block;
+    width: 100%;
+  }
+
+  .cart-items thead tr {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.2);
+    margin-bottom: 4rem;
+  }
+
+  .cart-item {
+    display: grid;
+    grid-template: repeat(2, auto) / repeat(4, 1fr);
+    gap: 1.5rem;
+    margin-bottom: 3.5rem;
+  }
+
+  .cart-item:last-child {
+    margin-bottom: 0;
+  }
+
+  .cart-item__media {
+    grid-row: 1 / 3;
+  }
+
+  .cart-item__details {
+    grid-column: 2 / 4;
+  }
+
+  .cart-item__quantity {
+    grid-column: 2 / 5;
+  }
+
+  .cart-item__quantity-wrapper {
+    flex-wrap: wrap;
+  }
+
+  .cart-item__totals {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .cart-items {
+    border-spacing: 0;
+    border-collapse: separate;
+    box-shadow: none;
+    width: 100%;
+    display: table;
+  }
+
+  .cart-items th {
+    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
+  }
+
+  .cart-items thead th:first-child {
+    width: 50%;
+  }
+
+  .cart-items th + th {
+    padding-left: 4rem;
+  }
+
+  .cart-items td {
+    vertical-align: top;
+    padding-top: 4rem;
+  }
+
+  .cart-item {
+    display: table-row;
+  }
+
+  .cart-item > td + td {
+    padding-left: 4rem;
+  }
+
+  .cart-item__details {
+    width: 35rem;
+  }
+
+  .cart-item__media {
+    width: 10rem;
+  }
+
+  .cart-item cart-remove-button {
+    margin: 0.5rem 0 0 1.5rem;
+  }
+
+  .cart-item__price-wrapper > *:only-child:not(.cart-item__discounted-prices) {
+    margin-top: 1rem;
+  }
+
+  .cart-item__error {
+    margin-left: 0.3rem;
+  }
+}
+
+@media screen and (min-width: 990px) {
+  .cart-item .cart-item__quantity,
+  .cart-items .cart-items__heading--wide {
+    padding-left: 6rem;
+  }
+
+  .cart-item__details {
+    width: 50rem;
+  }
+
+  .cart-items thead th:first-child {
+    width: 60%;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .cart-items .cart-items__heading--quantity,
+  .cart-item .cart-item__quantity,
+  .cart-item__quantity--info quantity-popover > *,
+  .no-js .cart-item .cart-item__quantity--info {
+    padding-left: 5rem;
+  }
+
+  .cart-item .cart-item__quantity--info,
+  .cart-item__quantity--info .cart-item__quantity-wrapper,
+  .cart-item__quantity--info .cart-items__info {
+    padding-left: 0;
+  }
+}
+
+@media screen and (min-width: 749px) and (max-width: 990px) {
+  .cart-items .quantity-popover__info-button {
+    padding-left: 1.5rem;
+  }
+}

assets/component-cart-notification.css

@@ -0,0 +1,123 @@
+.cart-notification-wrapper {
+  position: relative;
+}
+
+.cart-notification-wrapper .cart-notification {
+  display: block;
+}
+
+.cart-notification {
+  border-bottom-right-radius: var(--popup-corner-radius);
+  border-bottom-left-radius: var(--popup-corner-radius);
+  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
+  border-style: solid;
+  border-width: 0 0 var(--popup-border-width);
+  padding: 2.5rem 3.5rem;
+  position: absolute;
+  right: 0;
+  transform: translateY(-100%);
+  visibility: hidden;
+  width: 100%;
+  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
+    rgba(var(--color-shadow), var(--popup-shadow-opacity));
+  z-index: -1;
+}
+
+.cart-notification.focused {
+  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3),
+    var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
+      rgba(var(--color-shadow), var(--popup-shadow-opacity));
+}
+
+.cart-notification:focus-visible {
+  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3),
+    var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
+      rgba(var(--color-shadow), var(--popup-shadow-opacity));
+}
+
+@media screen and (min-width: 750px) {
+  .header-wrapper:not(.header-wrapper--border-bottom) + cart-notification .cart-notification {
+    border-top-width: var(--popup-border-width);
+  }
+
+  .cart-notification {
+    border-width: 0 var(--popup-border-width) var(--popup-border-width);
+    max-width: 36.8rem;
+    right: 2.2rem;
+  }
+}
+
+@media screen and (min-width: 990px) {
+  .cart-notification-wrapper:is(.page-width) > .cart-notification {
+    right: 4rem;
+  }
+}
+
+.cart-notification.animate {
+  transition: transform var(--duration-short) ease, visibility 0s var(--duration-short) ease;
+}
+
+.cart-notification.active {
+  transform: translateY(0);
+  transition: transform var(--duration-default) ease, visibility 0s;
+  visibility: visible;
+}
+
+.cart-notification__header {
+  align-items: flex-start;
+  display: flex;
+}
+
+.cart-notification__heading {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.cart-notification__heading .icon-checkmark {
+  color: rgb(var(--color-foreground));
+  margin-right: 1rem;
+  width: 1.3rem;
+}
+
+.cart-notification__close {
+  margin-top: -2rem;
+  margin-right: -3rem;
+}
+
+.cart-notification__links {
+  text-align: center;
+}
+
+.cart-notification__links > * {
+  margin-top: 1rem;
+}
+
+.cart-notification-product {
+  align-items: flex-start;
+  display: flex;
+  padding-bottom: 3rem;
+  padding-top: 2rem;
+}
+
+.cart-notification-product dl {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.cart-notification-product__image {
+  display: inline-flex;
+  margin-right: 1.5rem;
+  margin-top: 0.5rem;
+}
+
+.cart-notification-product__image:after {
+  content: none;
+}
+
+.cart-notification-product__name {
+  margin-bottom: 0.5rem;
+  margin-top: 0;
+}

assets/component-cart.css

@@ -0,0 +1,226 @@
+.cart {
+  position: relative;
+  display: block;
+}
+
+.cart__empty-text,
+.is-empty .cart__contents,
+cart-items.is-empty .title-wrapper-with-link,
+.is-empty .cart__footer {
+  display: none;
+}
+
+.is-empty .cart__empty-text,
+.is-empty .cart__warnings {
+  display: block;
+}
+
+.cart__warnings {
+  display: none;
+  text-align: center;
+  padding: 3rem 0 1rem;
+}
+
+.cart__empty-text {
+  margin: 4.5rem 0 2rem;
+}
+
+.cart__contents > * + * {
+  margin-top: 2.5rem;
+}
+
+.cart__login-title {
+  margin: 5.5rem 0 0.5rem;
+}
+
+.cart__login-paragraph {
+  margin-top: 0.8rem;
+}
+
+.cart__login-paragraph a {
+  font-size: inherit;
+}
+
+@media screen and (min-width: 990px) {
+  .cart__warnings {
+    padding: 7rem 0 1rem;
+  }
+
+  .cart__empty-text {
+    margin: 0 0 3rem;
+  }
+}
+
+cart-items {
+  display: block;
+}
+
+.cart__items {
+  position: relative;
+  padding-bottom: 3rem;
+  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
+}
+
+.cart__items--disabled {
+  pointer-events: none;
+}
+
+.cart__footer-wrapper:last-child .cart__footer {
+  padding-bottom: 5rem;
+}
+
+.cart__footer > div:only-child {
+  margin-left: auto;
+}
+
+.cart__footer > * + * {
+  margin-top: 6.5rem;
+}
+
+.cart__footer .discounts {
+  margin-bottom: 1rem;
+}
+
+.cart__note {
+  height: fit-content;
+  top: 2.5rem;
+}
+
+.cart__note label {
+  display: flex;
+  align-items: flex-end;
+  position: absolute;
+  line-height: 1;
+  height: 1.8rem;
+  top: -3rem;
+  color: rgba(var(--color-foreground), 0.75);
+}
+
+.cart__note .field__input {
+  height: 100%;
+  position: relative;
+  border-radius: var(--inputs-radius);
+  padding: 1rem 2rem;
+}
+
+.cart__note .text-area {
+  resize: vertical;
+}
+
+.cart__note:after,
+.cart__note:hover.cart__note:after,
+.cart__note:before,
+.cart__note:hover.cart__note:before,
+.cart__note .field__input:focus,
+.cart__note .field__input {
+  border-bottom-right-radius: 0;
+}
+
+@media screen and (min-width: 750px) {
+  .cart__items {
+    grid-column-start: 1;
+    grid-column-end: 3;
+    padding-bottom: 4rem;
+  }
+
+  .cart__contents > * + * {
+    margin-top: 0;
+  }
+
+  .cart__items + .cart__footer {
+    grid-column: 2;
+  }
+
+  .cart__footer {
+    display: flex;
+    justify-content: space-between;
+    border: 0;
+  }
+
+  .cart__footer-wrapper:last-child {
+    padding-top: 0;
+  }
+
+  .cart__footer > * {
+    width: 35rem;
+  }
+
+  .cart__footer > * + * {
+    margin-left: 4rem;
+    margin-top: 0;
+  }
+}
+
+.cart__ctas button {
+  width: 100%;
+}
+
+.cart__ctas > *:not(noscript:first-child) + * {
+  margin-top: 1rem;
+}
+
+.cart__update-button {
+  margin-bottom: 1rem;
+}
+
+.cart__dynamic-checkout-buttons {
+  max-width: 36rem;
+  margin: 0 auto;
+}
+
+.cart__dynamic-checkout-buttons:has(.dynamic-checkout__content:empty) {
+  margin: 0;
+}
+
+.cart__dynamic-checkout-buttons div[role='button'] {
+  border-radius: var(--buttons-radius-outset) !important;
+}
+
+.cart__blocks > * + * {
+  margin-top: 1rem;
+}
+
+.cart-note__label {
+  display: inline-block;
+  margin-bottom: 1rem;
+  line-height: calc(1 + 1 / var(--font-body-scale));
+}
+
+.tax-note {
+  margin: 2.2rem 0 1.6rem auto;
+  text-align: center;
+  display: block;
+}
+
+.cart__checkout-button {
+  max-width: 36rem;
+}
+
+.cart__ctas {
+  text-align: center;
+}
+
+@media screen and (min-width: 750px) {
+  .cart-note {
+    max-width: 35rem;
+  }
+
+  .cart__update-button {
+    margin-bottom: 0;
+    margin-right: 0.8rem;
+  }
+
+  .tax-note {
+    margin-bottom: 2.2rem;
+    text-align: right;
+  }
+
+  [data-shopify-buttoncontainer] {
+    justify-content: flex-end;
+  }
+
+  .cart__ctas {
+    display: flex;
+    gap: 1rem;
+  }
+}

assets/component-collection-hero.css

@@ -0,0 +1,98 @@
+.collection-hero__inner {
+  display: flex;
+  flex-direction: column;
+}
+
+.collection-hero--with-image .collection-hero__inner {
+  margin-bottom: 0;
+  padding-bottom: 2rem;
+}
+
+@media screen and (min-width: 750px) {
+  .collection-hero.collection-hero--with-image {
+    padding: calc(4rem + var(--page-width-margin)) 0 calc(4rem + var(--page-width-margin));
+    overflow: hidden;
+  }
+
+  .collection-hero--with-image .collection-hero__inner {
+    padding-bottom: 0;
+  }
+}
+
+.collection-hero__text-wrapper {
+  flex-basis: 100%;
+}
+
+@media screen and (min-width: 750px) {
+  .collection-hero {
+    padding: 0;
+  }
+
+  .collection-hero__inner {
+    align-items: center;
+    flex-direction: row;
+    padding-bottom: 0;
+  }
+}
+
+.collection-hero__title {
+  margin: 2.5rem 0;
+}
+
+.collection-hero__title + .collection-hero__description {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+  font-size: 1.6rem;
+  line-height: calc(1 + 0.5 / var(--font-body-scale));
+}
+
+@media screen and (min-width: 750px) {
+  .collection-hero__title + .collection-hero__description {
+    font-size: 1.8rem;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .collection-hero__description {
+    max-width: 66.67%;
+  }
+
+  .collection-hero--with-image .collection-hero__description {
+    max-width: 100%;
+  }
+}
+
+.collection-hero--with-image .collection-hero__title {
+  margin: 0;
+}
+
+.collection-hero--with-image .collection-hero__text-wrapper {
+  padding: 5rem 0 4rem;
+}
+
+.collection-hero__image-container {
+  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
+  border-radius: var(--media-radius);
+  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
+    rgba(var(--color-shadow), var(--media-shadow-opacity));
+}
+
+@media screen and (max-width: 749px) {
+  .collection-hero__image-container {
+    height: 20rem;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .collection-hero--with-image .collection-hero__text-wrapper {
+    padding: 4rem 2rem 4rem 0;
+    flex-basis: 50%;
+  }
+
+  .collection-hero__image-container {
+    align-self: stretch;
+    flex: 1 0 50%;
+    margin-left: 3rem;
+    min-height: 20rem;
+  }
+}

assets/component-complementary-products.css

@@ -0,0 +1,161 @@
+.complementary-products__container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.3rem;
+}
+
+product-recommendations:not(.is-accordion) .complementary-products__container {
+  margin-top: 1.5rem;
+}
+
+.complementary-products__container > details[open] {
+  padding-bottom: 1.5rem;
+}
+
+.complementary-slider {
+  margin-top: 0;
+  gap: 0;
+}
+
+.complementary-slide {
+  --shadow-padding-sides: calc((var(--shadow-horizontal-offset) + var(--shadow-blur-radius)) * var(--shadow-visible));
+  --shadow-padding-sides-negative: calc(
+    (var(--shadow-horizontal-offset) * -1 + var(--shadow-blur-radius)) * var(--shadow-visible)
+  );
+}
+
+.complementary-slide > ul {
+  display: flex;
+  flex-direction: column;
+  gap: var(--grid-mobile-vertical-spacing);
+}
+
+.complementary-slide.complementary-slide--standard > ul {
+  gap: calc(var(--grid-mobile-vertical-spacing) + 8px);
+}
+
+@media screen and (min-width: 750px) {
+  .complementary-slide > ul {
+    gap: var(--grid-desktop-vertical-spacing);
+  }
+
+  .complementary-slide.complementary-slide--standard > ul {
+    gap: calc(var(--grid-desktop-vertical-spacing) + 8px);
+  }
+}
+
+.complementary-slide.grid__item {
+  width: 100%;
+  padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
+  padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
+  padding-right: max(var(--focus-outline-padding), var(--shadow-padding-sides));
+  padding-left: max(var(--focus-outline-padding), var(--shadow-padding-sides-negative));
+}
+
+.complementary-slide .card-wrapper {
+  height: auto;
+}
+
+.complementary-products > .summary__title {
+  display: flex;
+  line-height: 1;
+  padding: 1.5rem 0;
+}
+
+.accordion + product-recommendations .accordion,
+product-recommendations.is-accordion + .accordion {
+  margin-top: 0;
+  border-top: none;
+}
+
+.complementary-products > .summary__title .icon-accordion {
+  fill: rgb(var(--color-foreground));
+  height: calc(var(--font-heading-scale) * 2rem);
+  margin-right: calc(var(--font-heading-scale) * 1rem);
+  width: calc(var(--font-heading-scale) * 2rem);
+}
+
+.complementary-products__container .card--card .card__content,
+.complementary-products__container .card--horizontal .card__information {
+  padding: 0;
+}
+
+.complementary-products__container .card--horizontal .card__inner {
+  max-width: 20%;
+}
+
+@media screen and (min-width: 750px) and (max-width: 1200px) {
+  .complementary-products__container .card--horizontal .card__inner {
+    max-width: 25%;
+  }
+}
+
+.complementary-slide .card--text .card__content {
+  grid-template-rows: minmax(0, 1fr) max-content auto;
+}
+
+.complementary-products__container .card--card.card--media > .card__content {
+  margin-top: 0;
+}
+
+.complementary-products-contains-quick-add .underline-links-hover:hover a {
+  text-decoration: initial;
+}
+
+.complementary-products-contains-quick-add .card__heading:hover a {
+  text-decoration: underline;
+}
+
+.complementary-products__container .card--card .card__inner .card__media {
+  border-radius: calc(var(--corner-radius) - var(--border-width) - var(--image-padding));
+}
+
+.complementary-products__container .card--horizontal .quick-add {
+  margin: 0;
+  max-width: 20rem;
+}
+
+.complementary-products__container .quick-add__submit {
+  padding: 1.5rem 0;
+  min-height: inherit;
+}
+
+.complementary-products__container .quick-add__submit .icon-plus {
+  width: 1.2rem;
+}
+
+.complementary-products__container .icon-wrap {
+  display: flex;
+}
+
+.complementary-products .sold-out-message:not(.hidden) + .icon-wrap {
+  display: none;
+}
+
+.complementary-products__container .quick-add__submit:not(.animate-arrow) .icon-wrap {
+  transition: transform var(--duration-short) ease;
+}
+
+.complementary-products__container .quick-add__submit:not(.animate-arrow):hover .icon-wrap {
+  transform: rotate(90deg);
+}
+
+.complementary-products__container .quick-add__submit:after,
+.complementary-products__container .quick-add__submit:hover:after {
+  box-shadow: none;
+}
+
+.complementary-products__container .card--horizontal .quick-add,
+.complementary-products__container .card__badge {
+  justify-self: var(--text-alignment);
+}
+
+.product--no-media .complementary-products__container .price {
+  text-align: var(--text-alignment);
+}
+
+@media screen and (min-width: 750px) {
+  .complementary-products__container .price--on-sale .price-item--regular {
+    font-size: 1.3rem;
+  }
+}

assets/component-deferred-media.css

@@ -0,0 +1,98 @@
+.deferred-media__poster {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  border-radius: calc(var(--border-radius) - var(--border-width));
+}
+
+.media > .deferred-media__poster {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.deferred-media__poster img {
+  width: auto;
+  max-width: 100%;
+  height: 100%;
+}
+
+.deferred-media {
+  overflow: hidden;
+}
+
+.deferred-media:not([loaded]) template {
+  z-index: -1;
+}
+
+.deferred-media[loaded] > .deferred-media__poster {
+  display: none;
+}
+
+.deferred-media__poster:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--media-border-width) rgba(var(--color-foreground), var(--media-border-opacity)),
+    0 0 0 calc(var(--media-border-width) + 0.3rem) rgb(var(--color-background)),
+    0 0 0 calc(var(--media-border-width) + 0.5rem) rgba(var(--color-foreground), 0.5);
+  border-radius: calc(var(--media-radius) - var(--media-border-width));
+}
+
+.deferred-media__poster:focus {
+  outline: none;
+  box-shadow: 0 0 0 var(--media-border-width) rgba(var(--color-foreground), var(--media-border-opacity)),
+    0 0 0 calc(var(--media-border-width) + 0.3rem) rgb(var(--color-background)),
+    0 0 0 calc(var(--media-border-width) + 0.5rem) rgba(var(--color-foreground), 0.5);
+  border-radius: calc(var(--media-radius) - var(--media-border-width));
+}
+
+.global-media-settings--full-width .deferred-media__poster,
+.global-media-settings--full-width .deferred-media__poster:is(:focus, :focus-visible) {
+  border-radius: 0;
+}
+
+/* outline styling for Windows High Contrast Mode */
+@media (forced-colors: active) {
+  .deferred-media__poster:focus {
+    outline: transparent solid 1px;
+  }
+}
+.deferred-media__poster:focus:not(:focus-visible) {
+  outline: 0;
+  box-shadow: none;
+}
+
+.deferred-media__poster-button {
+  background-color: rgb(var(--color-background));
+  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
+  border-radius: 50%;
+  color: rgb(var(--color-foreground));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 6.2rem;
+  width: 6.2rem;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(1);
+  transition: transform var(--duration-short) ease, color var(--duration-short) ease;
+  z-index: 1;
+}
+
+.deferred-media__poster-button:hover {
+  transform: translate(-50%, -50%) scale(1.1);
+}
+
+.deferred-media__poster-button .icon {
+  width: 2rem;
+  height: 2rem;
+}
+
+.deferred-media__poster-button .icon-play {
+  margin-left: 0.2rem;
+}

assets/component-discounts.css

@@ -0,0 +1,30 @@
+.discounts {
+  font-size: 1.2rem;
+}
+
+.discounts__discount {
+  display: flex;
+  align-items: center;
+  line-height: calc(1 + 0.5 / var(--font-body-scale));
+}
+
+.discounts__discount svg {
+  color: rgba(var(--color-button), var(--alpha-button-background));
+}
+
+.discounts__discount--position {
+  justify-content: center;
+}
+
+@media screen and (min-width: 750px) {
+  .discounts__discount--position {
+    justify-content: flex-end;
+  }
+}
+
+.discounts__discount > .icon {
+  color: rgb(var(--color-foreground));
+  width: 1.2rem;
+  height: 1.2rem;
+  margin-right: 0.7rem;
+}

assets/component-image-with-text.css

@@ -0,0 +1,417 @@
+.image-with-text .grid {
+  margin-bottom: 0;
+}
+
+.image-with-text .grid__item {
+  position: relative;
+}
+
+@media screen and (min-width: 750px) {
+  .image-with-text__grid--reverse {
+    flex-direction: row-reverse;
+  }
+}
+
+.image-with-text__media {
+  min-height: 100%;
+  overflow: visible;
+}
+
+.image-with-text__media--small {
+  height: 19.4rem;
+}
+
+.image-with-text__media--medium {
+  height: 29.6rem;
+}
+
+.image-with-text__media--large {
+  height: 43.5rem;
+}
+
+@media screen and (min-width: 750px) {
+  .image-with-text__media--small {
+    height: 31.4rem;
+  }
+
+  .image-with-text__media--medium {
+    height: 46rem;
+  }
+
+  .image-with-text__media--large {
+    height: 69.5rem;
+  }
+}
+
+.image-with-text__media--placeholder {
+  position: relative;
+  overflow: hidden;
+}
+
+.image-with-text__media--placeholder:after {
+  content: '';
+  position: absolute;
+  background: rgba(var(--color-foreground), 0.04);
+}
+
+.image-with-text__media--placeholder.image-with-text__media--adapt {
+  height: 20rem;
+}
+
+@media screen and (min-width: 750px) {
+  .image-with-text__media--placeholder.image-with-text__media--adapt {
+    height: 30rem;
+  }
+}
+
+.image-with-text__media--placeholder > svg {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+.image-with-text__media--placeholder:is(.animate--ambient, .animate--zoom-in) > svg {
+  top: 0;
+  left: 0;
+  transform: translate(0);
+}
+
+.image-with-text__content {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  align-self: center;
+  padding: 4rem calc(4rem / var(--font-body-scale)) 5rem;
+  position: relative;
+  z-index: 1;
+}
+
+.image-with-text .grid__item::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.image-with-text:not(.image-with-text--overlap) .image-with-text__media-item:after {
+  border-radius: var(--media-radius);
+  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
+    rgba(var(--color-shadow), var(--media-shadow-opacity));
+}
+
+.image-with-text:not(.image-with-text--overlap) .image-with-text__text-item:after {
+  border-radius: var(--text-boxes-radius);
+  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
+    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
+}
+
+.image-with-text .image-with-text__media-item > * {
+  border-radius: var(--media-radius);
+  overflow: hidden;
+  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
+    rgba(var(--color-shadow), var(--media-shadow-opacity));
+}
+
+.image-with-text .global-media-settings {
+  overflow: hidden !important;
+}
+
+.image-with-text .image-with-text__text-item > * {
+  border-radius: var(--text-boxes-radius);
+  overflow: hidden;
+  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
+    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
+}
+
+.image-with-text:not(.image-with-text--overlap) .image-with-text__media-item > *,
+.image-with-text:not(.image-with-text--overlap) .image-with-text__text-item > * {
+  box-shadow: none;
+}
+
+@media screen and (max-width: 749px) {
+  .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__media-item:after,
+  .image-with-text.collapse-corners:not(.image-with-text--overlap) .grid__item .image-with-text__media,
+  .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__media img,
+  .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__media .placeholder-svg {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__text-item:after,
+  .image-with-text.collapse-corners:not(.image-with-text--overlap) .grid__item .image-with-text__content {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .image-with-text.collapse-borders:not(.image-with-text--overlap) .image-with-text__content {
+    border-top: 0;
+  }
+}
+
+.image-with-text__content--mobile-right > * {
+  align-self: flex-end;
+  text-align: right;
+}
+
+.image-with-text__content--mobile-center > * {
+  align-self: center;
+  text-align: center;
+}
+
+.image-with-text--overlap .image-with-text__content {
+  width: 90%;
+  margin: -3rem auto 0;
+}
+
+@media screen and (min-width: 750px) {
+  .image-with-text__grid--reverse .image-with-text__content {
+    margin-left: auto;
+  }
+
+  .image-with-text__content--bottom {
+    justify-content: flex-end;
+    align-self: flex-end;
+  }
+
+  .image-with-text__content--top {
+    justify-content: flex-start;
+    align-self: flex-start;
+  }
+
+  .image-with-text__content--desktop-right > * {
+    align-self: flex-end;
+    text-align: right;
+  }
+
+  .image-with-text__content--desktop-left > * {
+    align-self: flex-start;
+    text-align: left;
+  }
+
+  .image-with-text__content--desktop-center > * {
+    align-self: center;
+    text-align: center;
+  }
+
+  .image-with-text--overlap .image-with-text__text-item {
+    display: flex;
+    padding: 3rem 0;
+  }
+
+  .image-with-text--overlap .image-with-text__content {
+    height: auto;
+    width: calc(100% + 4rem);
+    min-width: calc(100% + 4rem);
+    margin-top: 0;
+    margin-left: -4rem;
+  }
+
+  .image-with-text--overlap .image-with-text__grid--reverse .image-with-text__content {
+    margin-left: 0;
+    margin-right: -4rem;
+  }
+
+  .image-with-text--overlap .image-with-text__grid--reverse .image-with-text__text-item {
+    justify-content: flex-end;
+  }
+
+  .image-with-text--overlap .image-with-text__media-item--top {
+    align-self: flex-start;
+  }
+
+  .image-with-text--overlap .image-with-text__media-item--middle {
+    align-self: center;
+  }
+
+  .image-with-text--overlap .image-with-text__media-item--bottom {
+    align-self: flex-end;
+  }
+
+  .image-with-text__media-item--small,
+  .image-with-text__media-item--large + .image-with-text__text-item {
+    flex-grow: 0;
+  }
+
+  .image-with-text.collapse-corners:not(.image-with-text--overlap)
+    .grid:not(.image-with-text__grid--reverse)
+    .image-with-text__media-item:after,
+  .image-with-text.collapse-corners:not(.image-with-text--overlap)
+    .grid:not(.image-with-text__grid--reverse)
+    .image-with-text__media,
+  .image-with-text.collapse-corners:not(.image-with-text--overlap)
+    .grid:not(.image-with-text__grid--reverse)
+    .image-with-text__media
+    img,
+  .image-with-text.collapse-corners:not(.image-with-text--overlap)
+    .grid:not(.image-with-text__grid--reverse)
+    .image-with-text__media
+    .placeholder-svg,
+  .image-with-text.collapse-corners:not(.image-with-text--overlap)
+    .image-with-text__grid--reverse
+    .image-with-text__text-item:after,
+  .image-with-text.collapse-corners:not(.image-with-text--overlap)
+    .image-with-text__grid--reverse
+    .image-with-text__content,
+  .image-with-text.collapse-corners:not(.image-with-text--overlap)
+    .image-with-text__grid--reverse
+    .image-with-text__content:after {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .image-with-text.collapse-corners:not(.image-with-text--overlap)
+    .grid:not(.image-with-text__grid--reverse)
+    .image-with-text__text-item:after,
+  .image-with-text.collapse-corners:not(.image-with-text--overlap)
+    .grid:not(.image-with-text__grid--reverse)
+    .image-with-text__content,
+  .image-with-text.collapse-corners:not(.image-with-text--overlap)
+    .grid:not(.image-with-text__grid--reverse)
+    .image-with-text__content:after,
+  .image-with-text.collapse-corners:not(.image-with-text--overlap)
+    .image-with-text__grid--reverse
+    .image-with-text__media-item:after,
+  .image-with-text.collapse-corners:not(.image-with-text--overlap)
+    .image-with-text__grid--reverse
+    .image-with-text__media,
+  .image-with-text.collapse-corners:not(.image-with-text--overlap)
+    .image-with-text__grid--reverse
+    .image-with-text__media
+    img,
+  .image-with-text.collapse-corners:not(.image-with-text--overlap)
+    .image-with-text__grid--reverse
+    .image-with-text__media
+    .placeholder-svg {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .image-with-text.collapse-borders:not(.image-with-text--overlap)
+    .grid:not(.image-with-text__grid--reverse)
+    .image-with-text__content {
+    border-left: 0;
+  }
+
+  .image-with-text.collapse-borders:not(.image-with-text--overlap)
+    .image-with-text__grid--reverse
+    .image-with-text__content {
+    border-right: 0;
+  }
+}
+
+.image-with-text:not(.collapse-corners, .image-with-text--overlap) .image-with-text__media-item {
+  z-index: 2;
+}
+
+/* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
+.image-with-text.image-with-text--overlap .backround-transparent,
+.image-with-text:not(.image-with-text--overlap) .background-transparent {
+  background: transparent;
+}
+
+/* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
+.image-with-text .gradient {
+  transform: perspective(0);
+}
+
+.image-with-text__content {
+  border-radius: var(--text-boxes-radius);
+  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
+    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
+  word-break: break-word;
+}
+
+@media screen and (min-width: 990px) {
+  .image-with-text__content {
+    padding: 6rem 7rem 7rem;
+  }
+}
+
+.image-with-text__content > * + * {
+  margin-top: 2rem;
+}
+
+.image-with-text__content > .image-with-text__text:empty ~ a {
+  margin-top: 2rem;
+}
+
+.image-with-text__content > :first-child:is(.image-with-text__heading),
+.image-with-text__text--caption + .image-with-text__heading,
+.image-with-text__text--caption:first-child {
+  margin-top: 0;
+}
+
+.image-with-text__content :last-child:is(.image-with-text__heading),
+.image-with-text__text--caption {
+  margin-bottom: 0;
+}
+
+.image-with-text__content .button + .image-with-text__text {
+  margin-top: 2rem;
+}
+
+.image-with-text__content .image-with-text__text + .button {
+  margin-top: 3rem;
+}
+
+.image-with-text__heading {
+  margin-bottom: 0;
+}
+
+.image-with-text__text p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+@media screen and (max-width: 749px) {
+  .collapse-padding .image-with-text__grid .image-with-text__content {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .collapse-padding
+    .image-with-text__grid:not(.image-with-text__grid--reverse)
+    .image-with-text__content:not(.image-with-text__content--desktop-center) {
+    padding-right: 0;
+  }
+
+  .collapse-padding
+    .image-with-text__grid--reverse
+    .image-with-text__content:not(.image-with-text__content--desktop-center) {
+    padding-left: 0;
+  }
+}
+
+/* check for flexbox gap in older Safari versions */
+@supports not (inset: 10px) {
+  .image-with-text .grid {
+    margin-left: 0;
+  }
+}
+
+/*
+  Multirow
+  note: consider removing from this stylesheet if multirow-specific styles increase signficantly
+*/
+.multirow__inner {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--grid-mobile-vertical-spacing);
+}
+
+@media screen and (min-width: 750px) {
+  .multirow__inner {
+    row-gap: var(--grid-desktop-vertical-spacing);
+  }
+}

assets/component-list-menu.css

@@ -0,0 +1,30 @@
+.list-menu--right {
+  right: 0;
+}
+
+.list-menu--disclosure {
+  position: absolute;
+  min-width: 100%;
+  width: 20rem;
+  border: 1px solid rgba(var(--color-foreground), 0.2);
+}
+
+.list-menu--disclosure:focus {
+  outline: none;
+}
+
+.list-menu__item--active {
+  text-decoration: underline;
+  text-underline-offset: 0.3rem;
+}
+
+.list-menu__item--active:hover {
+  text-decoration-thickness: 0.2rem;
+}
+
+.list-menu--disclosure.localization-selector {
+  max-height: 18rem;
+  overflow: auto;
+  width: 10rem;
+  padding: 0.5rem;
+}

assets/component-list-payment.css

@@ -0,0 +1,22 @@
+.list-payment {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: -0.5rem 0;
+  padding-top: 1rem;
+  padding-left: 0;
+}
+
+@media screen and (min-width: 750px) {
+  .list-payment {
+    justify-content: flex-end;
+    margin: -0.5rem;
+    padding-top: 0;
+  }
+}
+
+.list-payment__item {
+  align-items: center;
+  display: flex;
+  padding: 0.5rem;
+}

assets/component-list-social.css

@@ -0,0 +1,32 @@
+.list-social {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+@media only screen and (max-width: 749px) {
+  .list-social {
+    justify-content: center;
+  }
+}
+
+.list-social__item .icon {
+  height: 2.2rem;
+  width: 2.2rem;
+}
+
+.list-social__link {
+  align-items: center;
+  display: flex;
+  padding: 1.1rem;
+  color: rgb(var(--color-foreground));
+}
+
+.utility-bar .list-social__link {
+  padding: 0 0.8rem;
+  height: 3.8rem;
+}
+
+.list-social__link:hover .icon {
+  transform: scale(1.07);
+}

assets/component-loading-spinner.css

@@ -0,0 +1,61 @@
+.loading__spinner {
+  position: absolute;
+  z-index: 1;
+  width: 1.8rem;
+}
+
+.loading__spinner {
+  width: 1.8rem;
+  display: inline-block;
+}
+
+.spinner {
+  animation: rotator 1.4s linear infinite;
+}
+
+@keyframes rotator {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+
+.path {
+  stroke-dasharray: 280;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  stroke: rgb(var(--color-foreground));
+  animation: dash 1.4s ease-in-out infinite;
+}
+
+@media screen and (forced-colors: active) {
+  .path {
+    stroke: CanvasText;
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dashoffset: 280;
+  }
+  50% {
+    stroke-dashoffset: 75;
+    transform: rotate(135deg);
+  }
+  100% {
+    stroke-dashoffset: 280;
+    transform: rotate(450deg);
+  }
+}
+
+.loading__spinner:not(.hidden) + .cart-item__price-wrapper,
+.loading__spinner:not(.hidden) ~ cart-remove-button {
+  opacity: 50%;
+}
+
+.loading__spinner:not(.hidden) ~ cart-remove-button {
+  pointer-events: none;
+  cursor: default;
+}

assets/component-localization-form.css

@@ -0,0 +1,468 @@
+.localization-form {
+  display: flex;
+  flex-direction: column;
+  flex: auto 1 0;
+  padding: 1rem;
+  margin: 0 auto;
+}
+
+.localization-form:only-child {
+  display: inline-flex;
+  flex-wrap: wrap;
+  flex: initial;
+  padding: 1rem 0;
+}
+
+.localization-form:only-child .button,
+.localization-form:only-child .localization-form__select {
+  margin: 1rem 1rem 0.5rem;
+  flex-grow: 1;
+}
+
+@media screen and (min-width: 750px) {
+  .localization-form {
+    padding: 1rem 2rem 1rem 0;
+  }
+
+  .localization-form:first-of-type {
+    padding-left: 0;
+  }
+
+  .localization-form:only-child {
+    justify-content: start;
+    width: auto;
+    margin: 0 1rem 0 0;
+  }
+
+  .localization-form:only-child .button,
+  .localization-form:only-child .localization-form__select {
+    margin: 1rem 0;
+  }
+}
+
+@media screen and (max-width: 989px) {
+  noscript .localization-form:only-child {
+    width: 100%;
+  }
+}
+
+.localization-form .button {
+  padding: 1rem;
+}
+
+.localization-form__currency {
+  opacity: 0;
+  transition: opacity 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  white-space: nowrap;
+  padding-right: 1.7rem;
+}
+
+@media screen and (max-width: 749px) {
+  .localization-form .button {
+    word-break: break-all;
+  }
+
+  .localization-form__currency {
+    opacity: 1;
+  }
+}
+
+.localization-form__select {
+  border-radius: var(--inputs-radius-outset);
+  position: relative;
+  margin-bottom: 1.5rem;
+  padding-left: 1rem;
+  text-align: left;
+  min-height: calc(4rem + var(--inputs-border-width) * 2);
+  min-width: calc(7rem + var(--inputs-border-width) * 2);
+}
+
+.disclosure__button.localization-form__select {
+  padding: calc(2rem + var(--inputs-border-width));
+  background: rgb(var(--color-background));
+}
+
+noscript .localization-form__select {
+  padding-left: 0rem;
+}
+
+@media screen and (min-width: 750px) {
+  noscript .localization-form__select {
+    min-width: 20rem;
+  }
+}
+
+.localization-form__select .icon-caret {
+  position: absolute;
+  content: '';
+  height: 0.6rem;
+  right: calc(var(--inputs-border-width) + 1.5rem);
+  top: calc(50% - 0.2rem);
+}
+
+.localization-selector.link {
+  text-decoration: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  color: rgb(var(--color-foreground));
+  width: 100%;
+  padding-right: 4rem;
+  padding-bottom: 1.5rem;
+}
+
+noscript .localization-selector.link {
+  padding-top: 1.5rem;
+  padding-left: 1.5rem;
+}
+
+.disclosure .localization-form__select {
+  padding-top: 1.5rem;
+}
+
+.localization-selector option {
+  color: #000000;
+}
+
+.localization-selector + .disclosure__list-wrapper {
+  opacity: 1;
+  animation: animateLocalization var(--duration-default) ease;
+}
+
+.disclosure {
+  position: relative;
+}
+
+.disclosure__button {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  height: 4rem;
+  padding: 0 1.5rem 0 1.5rem;
+  font-size: 1.3rem;
+  background-color: transparent;
+}
+
+.disclosure__list-wrapper {
+  border-width: var(--popup-border-width);
+  border-style: solid;
+  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
+  overflow: hidden;
+  position: absolute;
+  bottom: 100%;
+  transform: translateY(-1rem);
+  z-index: 2;
+  background-color: rgb(var(--color-background));
+  border-radius: var(--popup-corner-radius);
+  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
+    rgba(var(--color-shadow), var(--popup-shadow-opacity));
+  max-height: 27.5rem;
+}
+
+.disclosure__list {
+  position: relative;
+  overflow-y: auto;
+  font-size: 1.4rem;
+  padding-bottom: 0.5rem;
+  padding-top: 0.5rem;
+  scroll-padding: 0.5rem 0;
+  max-height: 20.5rem;
+  max-width: 25.5rem;
+  min-width: 12rem;
+  width: max-content;
+}
+
+.country-selector__list {
+  padding-bottom: 0.95rem;
+  padding-top: 0;
+}
+
+.country-selector__list--with-multiple-currencies {
+  width: 25.5rem;
+}
+
+.country-selector__close-button {
+  display: none;
+}
+
+.country-filter {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1.5rem 1.5rem 0.6rem;
+  position: sticky;
+  top: -0.02rem;
+  background-color: rgb(var(--color-background));
+  z-index: 6;
+}
+
+.country-filter__reset-button,
+.country-filter__search-icon {
+  right: calc(var(--inputs-border-width));
+  top: var(--inputs-border-width);
+}
+
+.country-filter__reset-button:not(:focus-visible)::after,
+.country-filter__reset-button:not(:focus)::after {
+  display: block;
+  height: calc(100% - 1.8rem);
+  content: '';
+  position: absolute;
+  right: 0;
+}
+
+.country-filter__reset-button:focus,
+.country-filter__reset-button:focus-visible {
+  background-color: rgb(var(--color-background));
+  z-index: 4;
+}
+
+.country-filter__reset-button:not(:focus-visible):not(.focused) {
+  box-shadow: inherit;
+  background-color: inherit;
+}
+
+.country-filter__reset-button:hover .icon {
+  transform: scale(1.07);
+}
+
+.country-filter__reset-button .icon.icon-close,
+.country-filter__search-icon .icon {
+  height: 1.8rem;
+  width: 1.8rem;
+  stroke-width: 0.1rem;
+}
+
+.country-filter__search-icon {
+  transition: opacity var(--duration-short) ease, visibility var(--duration-short) ease;
+  opacity: 1;
+  visibility: visible;
+  pointer-events: none;
+  cursor: text;
+}
+
+.country-filter__search-icon--hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+@media screen and (max-width: 749px) {
+  .disclosure__list-wrapper.country-selector:not([hidden]) + .country-selector__overlay:empty {
+    display: block;
+  }
+
+  .country-selector__overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(var(--color-foreground), 0.5);
+    z-index: 3;
+    animation: animateLocalization var(--duration-default) ease;
+  }
+
+  .disclosure__list-wrapper.country-selector {
+    position: fixed;
+    bottom: -1rem;
+    left: 0;
+    width: 100%;
+    height: 80%;
+    max-height: 80vh;
+    border-radius: 0;
+    border: none;
+    box-shadow: none;
+    z-index: 4;
+  }
+
+  .disclosure__list.country-selector__list {
+    max-height: 85%;
+    min-width: 100%;
+    margin-bottom: 0;
+    z-index: 5;
+  }
+
+  .country-selector__close-button.link {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0rem;
+    background-color: transparent;
+    height: 4.4rem;
+    width: 4.4rem;
+  }
+
+  .country-selector__close-button .icon {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .country-filter {
+    padding: 1.5rem 2rem 0.6rem 1.5rem;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .country-filter--no-padding {
+    padding: 0;
+  }
+}
+
+.countries {
+  padding-top: 0.6rem;
+}
+
+.popular-countries {
+  border-bottom: 1px solid rgba(var(--color-foreground), 0.2);
+  padding-bottom: 0.6rem;
+  padding-top: 0.6rem;
+}
+
+.disclosure__item {
+  position: relative;
+}
+
+.disclosure__link {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 0.5rem;
+  padding: 0.9rem 1.5rem;
+  text-decoration: none;
+  line-height: calc(1 + 0.8 / var(--font-body-scale));
+  color: rgba(var(--color-foreground), 0.75);
+  word-break: break-word;
+}
+
+.disclosure__link:hover {
+  color: rgb(var(--color-foreground));
+}
+
+.disclosure__link .icon-checkmark {
+  width: 1rem;
+  margin-right: 0.2rem;
+}
+
+.disclosure__link:hover .localization-form__currency,
+.disclosure__link:focus-visible .localization-form__currency,
+.disclosure__link:focus .localization-form__currency {
+  display: inline-block;
+  opacity: 1;
+}
+
+.disclosure__button[aria-expanded='true'] .icon-caret {
+  transform: rotate(180deg);
+}
+
+/* Header localization */
+.header-localization .localization-form:only-child {
+  margin: 0;
+  padding: 0;
+}
+
+.header-localization .disclosure .localization-form__select {
+  font-size: 1.4rem;
+  letter-spacing: 0.06rem;
+  height: auto;
+  min-height: initial;
+  background: transparent;
+}
+
+.header-localization .disclosure .localization-form__select:hover {
+  text-decoration: underline;
+}
+
+.header-localization .localization-form__select.link:after,
+.header-localization .localization-form__select.link:before {
+  box-shadow: none;
+}
+
+.header-localization .localization-form__select.link:focus-visible {
+  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
+  outline-offset: -0.2rem;
+  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
+}
+
+/* Header icons (desktop) */
+.desktop-localization-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.desktop-localization-wrapper .localization-selector + .disclosure__list-wrapper {
+  animation: animateMenuOpen var(--duration-default) ease;
+}
+
+.desktop-localization-wrapper .localization-form:only-child {
+  padding: 0;
+}
+
+.header-localization:not(.menu-drawer__localization) {
+  align-items: center;
+}
+
+.js .header-localization:not(.menu-drawer__localization) .localization-form__select {
+  padding: 0 2.7rem 0 1.2rem;
+  width: max-content;
+  height: 3.8rem;
+}
+
+.header-localization:not(.menu-drawer__localization) .localization-form:only-child .localization-form__select {
+  margin: 0;
+}
+
+.header-localization:not(.menu-drawer__localization).localization-form__select > span {
+  max-width: 20ch;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.header-localization:not(.menu-drawer__localization) localization-form:only-child .localization-form__select > span {
+  max-width: 26ch;
+}
+
+.header-localization:not(.menu-drawer__localization) .localization-form__select .icon-caret {
+  right: 0.8rem;
+}
+
+.header-localization:not(.menu-drawer__localization) .disclosure__list-wrapper {
+  bottom: initial;
+  top: 100%;
+  right: 0;
+  transform: translateY(0);
+}
+
+/* Menu drawer */
+@media screen and (min-width: 990px) {
+  .menu-drawer__localization {
+    display: none;
+  }
+}
+
+.menu-drawer__localization localization-form {
+  display: block;
+}
+
+.menu-drawer__localization .localization-form__select {
+  background-color: initial;
+  margin-top: 0;
+  padding: 1rem 3.6rem 1rem 0rem;
+}
+
+.menu-drawer__localization .localization-form {
+  padding: 0;
+}
+
+.menu-drawer__localization .localization-form:only-child .localization-form__select {
+  margin: 0;
+}
+
+.menu-drawer__localization + .list-social {
+  margin-top: 1rem;
+}
+
+.menu-drawer__localization noscript .localization-form__select {
+  padding: initial;
+}

assets/component-mega-menu.css

@@ -0,0 +1,87 @@
+.mega-menu {
+  position: static;
+}
+
+.mega-menu__content {
+  background-color: rgb(var(--color-background));
+  border-left: 0;
+  border-radius: 0;
+  border-right: 0;
+  left: 0;
+  overflow-y: auto;
+  padding-bottom: 3rem;
+  padding-top: 3rem;
+  position: absolute;
+  right: 0;
+  top: 100%;
+}
+
+.shopify-section-header-sticky .mega-menu__content {
+  max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem);
+}
+
+.header-wrapper--border-bottom .mega-menu__content {
+  border-top: 0;
+}
+
+.js .mega-menu__content {
+  opacity: 0;
+  transform: translateY(-1.5rem);
+}
+
+.mega-menu[open] .mega-menu__content {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.mega-menu__list {
+  display: grid;
+  gap: 1.8rem 4rem;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  list-style: none;
+}
+
+.mega-menu__link {
+  color: rgba(var(--color-foreground), 0.75);
+  display: block;
+  line-height: calc(1 + 0.3 / var(--font-body-scale));
+  padding-bottom: 0.6rem;
+  padding-top: 0.6rem;
+  text-decoration: none;
+  transition: text-decoration var(--duration-short) ease;
+  word-wrap: break-word;
+}
+
+.mega-menu__link--level-2 {
+  font-weight: bold;
+}
+
+.header--top-center .mega-menu__list {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  column-gap: 0;
+}
+
+.header--top-center .mega-menu__list > li {
+  width: 16%;
+  padding-right: 2.4rem;
+}
+
+.mega-menu__link:hover,
+.mega-menu__link--active {
+  color: rgb(var(--color-foreground));
+  text-decoration: underline;
+}
+
+.mega-menu__link--active:hover {
+  text-decoration-thickness: 0.2rem;
+}
+
+.mega-menu .mega-menu__list--condensed {
+  display: block;
+}
+
+.mega-menu__list--condensed .mega-menu__link {
+  font-weight: normal;
+}

assets/component-menu-drawer.css

@@ -0,0 +1,273 @@
+.header__icon--menu {
+  position: initial;
+}
+
+.js menu-drawer > details > summary::before,
+.js menu-drawer > details[open]:not(.menu-opening) > summary::before {
+  content: '';
+  position: absolute;
+  cursor: default;
+  width: 100%;
+  height: calc(100vh - 100%);
+  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
+  top: 100%;
+  left: 0;
+  background: rgba(var(--color-foreground), 0.5);
+  opacity: 0;
+  visibility: hidden;
+  z-index: 2;
+  transition: opacity 0s, visibility 0s;
+}
+
+menu-drawer > details[open] > summary::before {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity var(--duration-default) ease, visibility var(--duration-default) ease;
+}
+
+.menu-drawer {
+  position: absolute;
+  transform: translateX(-100%);
+  visibility: hidden;
+  z-index: 3;
+  left: 0;
+  top: 100%;
+  width: 100%;
+  padding: 0;
+  background-color: rgb(var(--color-background));
+  overflow-x: hidden;
+  filter: drop-shadow(
+    var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius)
+      rgba(var(--color-shadow), var(--drawer-shadow-opacity))
+  );
+}
+
+.js .menu-drawer {
+  height: calc(100vh - 100%);
+  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
+}
+
+.js details[open] > .menu-drawer,
+.js details[open] > .menu-drawer__submenu {
+  transition: transform var(--duration-default) ease, visibility var(--duration-default) ease;
+}
+
+.no-js details[open] > .menu-drawer,
+.js details[open].menu-opening > .menu-drawer,
+details[open].menu-opening > .menu-drawer__submenu {
+  transform: translateX(0);
+  visibility: visible;
+}
+
+.js .menu-drawer__navigation .submenu-open {
+  visibility: hidden; /* hide menus from screen readers when hidden by submenu */
+}
+
+@media screen and (min-width: 750px) {
+  .menu-drawer {
+    width: 40rem;
+    border-width: 0 var(--drawer-border-width) 0 0;
+    border-style: solid;
+    border-color: rgba(var(--color-foreground), var(--drawer-border-opacity));
+  }
+
+  .no-js .menu-drawer {
+    height: auto;
+  }
+}
+
+.menu-drawer__inner-container {
+  position: relative;
+  height: 100%;
+}
+
+.menu-drawer__navigation-container {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  align-content: space-between;
+  overflow-y: auto;
+  height: 100%;
+}
+
+.menu-drawer__navigation {
+  padding: 3rem 0;
+}
+
+.menu-drawer__inner-submenu {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.no-js .menu-drawer__navigation {
+  padding: 0;
+}
+
+.no-js .menu-drawer__navigation > ul > li {
+  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.04);
+}
+
+.no-js .menu-drawer__submenu ul > li {
+  border-top: 0.1rem solid rgba(var(--color-foreground), 0.04);
+}
+
+.js .menu-drawer__menu li {
+  margin-bottom: 0.2rem;
+}
+
+.menu-drawer__menu-item {
+  padding: 1.1rem 3rem;
+  text-decoration: none;
+  font-size: 1.8rem;
+}
+
+.no-js .menu-drawer__menu-item {
+  font-size: 1.6rem;
+}
+
+.no-js .menu-drawer__submenu .menu-drawer__menu-item {
+  padding: 1.2rem 5.2rem 1.2rem 6rem;
+}
+
+.no-js .menu-drawer__submenu .menu-drawer__submenu .menu-drawer__menu-item {
+  padding-left: 9rem;
+}
+
+.menu-drawer summary.menu-drawer__menu-item {
+  padding-right: 5.2rem;
+}
+
+.no-js .menu-drawer__menu-item .icon-caret {
+  right: 3rem;
+}
+
+.menu-drawer__menu-item--active,
+.menu-drawer__menu-item:focus,
+.menu-drawer__close-button:focus,
+.menu-drawer__menu-item:hover,
+.menu-drawer__close-button:hover {
+  color: rgb(var(--color-foreground));
+  background-color: rgba(var(--color-foreground), 0.04);
+}
+
+.menu-drawer__menu-item--active:hover {
+  background-color: rgba(var(--color-foreground), 0.08);
+}
+
+.js .menu-drawer__menu-item .icon-caret,
+.no-js .menu-drawer .icon-arrow {
+  display: none;
+}
+
+.menu-drawer__menu-item > .icon-arrow {
+  position: absolute;
+  right: 3rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.js .menu-drawer__submenu {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  background-color: rgb(var(--color-background));
+  z-index: 1;
+  transform: translateX(100%);
+  visibility: hidden;
+}
+
+.js .menu-drawer__submenu .menu-drawer__submenu {
+  overflow-y: auto;
+}
+
+.menu-drawer__close-button {
+  margin-top: 1.5rem;
+  padding: 1.2rem 2.6rem 1.2rem 3rem;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  font-size: 1.4rem;
+  width: 100%;
+  background-color: transparent;
+  font-family: var(--font-body-family);
+  font-style: var(--font-body-style);
+  text-align: left;
+}
+
+.no-js .menu-drawer__close-button {
+  display: none;
+}
+
+.menu-drawer__close-button .icon-arrow {
+  transform: rotate(180deg);
+  margin-right: 1rem;
+}
+
+.menu-drawer__utility-links {
+  padding: 0;
+  background-color: rgba(var(--color-foreground), 0.03);
+  position: relative;
+}
+
+.header--has-social .menu-drawer__utility-links {
+  padding: 2rem 3rem;
+}
+
+@media screen and (max-width: 749px) {
+  .header--has-account:where(:not(.header--has-social):not(.header--has-localizations)) .menu-drawer__utility-links {
+    padding: 2rem 3rem;
+  }
+}
+
+@media screen and (max-width: 989px) {
+  .header--has-localizations:where(:not(.header--has-social)) .menu-drawer__utility-links {
+    padding: 2rem 3rem;
+  }
+}
+
+.menu-drawer__account {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  padding: 1rem 0;
+  font-size: 1.4rem;
+  color: rgb(var(--color-foreground));
+  margin-bottom: 0;
+}
+
+.menu-drawer__utility-links:has(.menu-drawer__localization) .menu-drawer__account {
+  margin: 0;
+}
+
+.menu-drawer__account .icon-account {
+  height: 2rem;
+  width: 2rem;
+  margin-right: 1rem;
+}
+
+.menu-drawer__account:hover .icon-account {
+  transform: scale(1.07);
+}
+
+.menu-drawer .list-social {
+  justify-content: flex-start;
+  margin-left: -1.25rem
+}
+
+.menu-drawer .list-social:empty {
+  display: none;
+}
+
+.menu-drawer .list-social__link {
+  padding: 1.1rem 1.1rem;
+}
+
+@media screen and (max-width: 749px) {
+  .menu-drawer.country-selector-open {
+    transform: none !important;
+    filter: none !important;
+    transition: none !important;
+  }
+}

assets/component-modal-video.css

@@ -0,0 +1,102 @@
+.modal-video {
+  background: rgba(var(--color-foreground), 0.2);
+  box-sizing: border-box;
+  height: 100%;
+  left: 0;
+  margin: 0 auto;
+  opacity: 0;
+  overflow: auto;
+  position: fixed;
+  top: 0;
+  visibility: hidden;
+  width: 100%;
+  z-index: -1;
+}
+
+.modal-video[open] {
+  opacity: 1;
+  visibility: visible;
+  z-index: 101;
+}
+
+.modal-video__content {
+  background-color: rgb(var(--color-background));
+  height: 100%;
+  margin: 0;
+  overflow: auto;
+  padding: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.modal-video__toggle {
+  align-items: center;
+  background-color: rgb(var(--color-background));
+  border-radius: 50%;
+  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
+  color: rgba(var(--color-foreground), 0.55);
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  margin: 0 0 0 auto;
+  padding: 1.2rem;
+  position: fixed;
+  right: 0.5rem;
+  top: 2rem;
+  width: 4rem;
+  z-index: 2;
+}
+
+@media screen and (min-width: 750px) {
+  .modal-video__toggle {
+    right: 4.8rem;
+    top: 3.5rem;
+  }
+}
+
+@media screen and (min-width: 990px) {
+  .modal-video__toggle {
+    right: 4.3rem;
+    top: 3rem;
+  }
+}
+
+.modal-video__toggle .icon {
+  height: auto;
+  margin: 0;
+  width: 2.2rem;
+}
+
+.modal-video__content-info {
+  height: calc(100% - 6rem);
+  margin: 0 auto;
+  padding-top: 8rem;
+  width: calc(100% - 1rem);
+}
+
+@media screen and (min-width: 750px) {
+  .modal-video__content-info {
+    height: calc(100% - 7.5rem);
+    padding-top: 9.5rem;
+    width: calc(100% - 9.6rem);
+  }
+}
+
+@media screen and (min-width: 990px) {
+  .modal-video__content-info {
+    height: calc(100% - 7rem);
+    padding-top: 9rem;
+    width: calc(100% - 8.6rem);
+  }
+}
+
+.modal-video__video,
+.modal-video__video iframe {
+  height: 100%;
+  width: 100%;
+}
+
+.modal-video__video iframe {
+  position: static;
+  border: 0;
+}

assets/component-model-viewer-ui.css

@@ -0,0 +1,42 @@
+.shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area {
+  background: rgb(var(--color-background));
+  border-color: rgba(var(--color-foreground), 0.04);
+}
+
+.shopify-model-viewer-ui .shopify-model-viewer-ui__button {
+  color: rgba(var(--color-foreground), 0.75);
+}
+
+.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:hover {
+  color: rgba(var(--color-foreground), 0.55);
+}
+
+.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:active,
+.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control.focus-visible:focus {
+  color: rgba(var(--color-foreground), 0.55);
+  background: rgba(var(--color-foreground), 0.04);
+}
+
+.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:not(:last-child):after {
+  border-color: rgba(var(--color-foreground), 0.04);
+}
+
+.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster {
+  border-radius: 50%;
+  color: rgb(var(--color-foreground));
+  background: rgb(var(--color-background));
+  border-color: rgba(var(--color-foreground), 0.1);
+  transform: translate(-50%, -50%) scale(1);
+  transition: transform var(--duration-short) ease, color var(--duration-short) ease;
+}
+
+.shopify-model-viewer-ui .shopify-model-viewer-ui__poster-control-icon {
+  width: 4.8rem;
+  height: 4.8rem;
+  margin-top: 0.3rem;
+}
+
+.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:hover,
+.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:focus {
+  transform: translate(-50%, -50%) scale(1.1);
+}

assets/component-newsletter.css

@@ -0,0 +1,71 @@
+.newsletter-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  position: relative;
+}
+
+@media screen and (min-width: 750px) {
+  .newsletter-form {
+    align-items: flex-start;
+    margin: 0 auto;
+    max-width: 36rem;
+  }
+}
+
+.newsletter-form__field-wrapper {
+  width: 100%;
+}
+
+.newsletter-form__field-wrapper .field__input {
+  padding-right: 5rem;
+}
+
+.newsletter-form__field-wrapper .field {
+  z-index: 0;
+}
+
+.newsletter-form__message {
+  justify-content: center;
+  margin-bottom: 0;
+}
+
+.newsletter-form__message--success {
+  margin-top: 2rem;
+}
+
+@media screen and (min-width: 750px) {
+  .newsletter-form__message {
+    justify-content: flex-start;
+  }
+}
+
+.newsletter-form__button {
+  width: 4.4rem;
+  margin: 0;
+  right: var(--inputs-border-width);
+  top: 0;
+  height: 100%;
+  z-index: 2;
+}
+
+.newsletter-form__button:focus-visible {
+  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.4rem rgba(var(--color-foreground));
+  background-color: rgb(var(--color-background));
+}
+
+.newsletter-form__button:focus {
+  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.4rem rgba(var(--color-foreground));
+  background-color: rgb(var(--color-background));
+}
+
+.newsletter-form__button:not(:focus-visible):not(.focused) {
+  box-shadow: inherit;
+  background-color: inherit;
+}
+
+.newsletter-form__button .icon {
+  width: 1.5rem;
+}

assets/component-pagination.css

@@ -0,0 +1,82 @@
+.pagination-wrapper {
+  margin-top: 4rem;
+}
+
+@media screen and (min-width: 990px) {
+  .pagination-wrapper {
+    margin-top: 5rem;
+  }
+}
+
+.pagination__list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.pagination__list > li {
+  flex: 1 0 4.4rem;
+  max-width: 4.4rem;
+}
+
+.pagination__list > li:not(:last-child) {
+  margin-right: 1rem;
+}
+
+.pagination__item {
+  color: rgb(var(--color-foreground));
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  height: 4.4rem;
+  width: 100%;
+  padding: 0;
+  text-decoration: none;
+}
+
+a.pagination__item:hover::after {
+  height: 0.1rem;
+}
+
+.pagination__item .icon-caret {
+  height: 0.6rem;
+}
+
+.pagination__item--current::after {
+  height: 0.1rem;
+}
+
+.pagination__item--current::after,
+.pagination__item:hover::after {
+  content: '';
+  display: block;
+  width: 2rem;
+  position: absolute;
+  bottom: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: currentColor;
+}
+
+.pagination__item--next .icon {
+  margin-left: -0.2rem;
+  transform: rotate(90deg);
+}
+
+.pagination__item--next:hover .icon {
+  transform: rotate(90deg) scale(1.07);
+}
+
+.pagination__item--prev .icon {
+  margin-right: -0.2rem;
+  transform: rotate(-90deg);
+}
+
+.pagination__item--prev:hover .icon {
+  transform: rotate(-90deg) scale(1.07);
+}
+
+.pagination__item-arrow:hover::after {
+  display: none;
+}

assets/component-pickup-availability.css

@@ -0,0 +1,175 @@
+pickup-availability {
+  display: block;
+}
+
+pickup-availability[available] {
+  min-height: 8rem;
+}
+
+.pickup-availability-preview {
+  align-items: flex-start;
+  display: flex;
+  gap: 0.2rem;
+  padding: 1rem 2rem 0 0;
+}
+
+.pickup-availability-preview .icon {
+  flex-shrink: 0;
+  height: 1.8rem;
+}
+
+.pickup-availability-preview .icon-unavailable {
+  height: 1.6rem;
+  margin-top: 0.1rem;
+}
+
+.pickup-availability-button {
+  background-color: transparent;
+  color: rgba(var(--color-foreground), 0.75);
+  letter-spacing: 0.06rem;
+  padding: 0 0 0.2rem;
+  text-align: left;
+  text-decoration: underline;
+}
+
+.pickup-availability-button:hover {
+  color: rgb(var(--color-foreground));
+}
+
+.pickup-availability-info * {
+  margin: 0 0 0.6rem;
+}
+
+pickup-availability-drawer {
+  background-color: rgb(var(--color-background));
+  height: 100%;
+  opacity: 0;
+  overflow-y: auto;
+  padding: 2rem;
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 4;
+  transition: opacity var(--duration-default) ease, transform var(--duration-default) ease;
+  transform: translateX(100%);
+  width: 100%;
+  border-width: 0 0 0 var(--drawer-border-width);
+  border-color: rgba(var(--color-foreground), var(--drawer-border-opacity));
+  border-style: solid;
+  filter: drop-shadow(
+    var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius)
+      rgba(var(--color-shadow), var(--drawer-shadow-opacity))
+  );
+}
+
+pickup-availability-drawer[open] {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+@media screen and (min-width: 750px) {
+  pickup-availability-drawer {
+    transform: translateX(100%);
+    width: 37.5rem;
+  }
+
+  pickup-availability-drawer[open] {
+    opacity: 1;
+    transform: translateX(0);
+    animation: animateDrawerOpen var(--duration-default) ease;
+  }
+}
+
+.pickup-availability-header {
+  align-items: flex-start;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1.2rem;
+}
+
+.pickup-availability-drawer-title {
+  margin: 0.5rem 0 0;
+}
+
+.pickup-availability-header .icon {
+  width: 2rem;
+}
+
+.pickup-availability-drawer-button {
+  background-color: transparent;
+  border: none;
+  color: rgb(var(--color-foreground));
+  cursor: pointer;
+  display: block;
+  height: 4.4rem;
+  padding: 1.2rem;
+  width: 4.4rem;
+}
+
+.pickup-availability-drawer-button:hover {
+  color: rgba(var(--color-foreground), 0.75);
+}
+
+.pickup-availability-variant {
+  font-size: 1.3rem;
+  line-height: calc(1 + 0.2 / var(--font-body-scale));
+  margin: 0 0 1.2rem;
+  text-transform: capitalize;
+}
+
+.pickup-availability-variant > * + strong {
+  margin-left: 1rem;
+}
+
+.pickup-availability-list__item {
+  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
+  padding: 2rem 0;
+}
+
+.pickup-availability-list__item:first-child {
+  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
+}
+
+.pickup-availability-list__item > * {
+  margin: 0;
+}
+
+.pickup-availability-list__item > * + * {
+  margin-top: 1rem;
+}
+
+.pickup-availability-address {
+  font-style: normal;
+  font-size: 1.2rem;
+  line-height: calc(1 + 0.5 / var(--font-body-scale));
+}
+
+.pickup-availability-address p {
+  margin: 0;
+}
+
+@keyframes animateDrawerOpen {
+  @media screen and (max-width: 749px) {
+    0% {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @media screen and (min-width: 750px) {
+    0% {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}

assets/component-predictive-search.css

@@ -0,0 +1,225 @@
+.predictive-search {
+  display: none;
+  position: absolute;
+  top: calc(100% + 0.1rem);
+  left: -0.1rem;
+  border-width: var(--popup-border-width);
+  border-style: solid;
+  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
+  background-color: rgb(var(--color-background));
+  z-index: 3;
+  border-bottom-right-radius: var(--popup-corner-radius);
+  border-bottom-left-radius: var(--popup-corner-radius);
+  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
+    rgba(var(--color-shadow), var(--popup-shadow-opacity));
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.predictive-search--search-template {
+  z-index: 2;
+  width: calc(100% + 0.2rem);
+}
+
+.predictive-search__results-groups-wrapper {
+  display: flex;
+  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
+  padding-bottom: 1rem;
+}
+
+@media screen and (max-width: 749px) {
+  .predictive-search--header {
+    right: 0;
+    left: 0;
+    top: 100%;
+  }
+
+  .predictive-search__results-groups-wrapper {
+    flex-direction: column;
+  }
+
+  .predictive-search__results-groups-wrapper:not(.predictive-search__results-groups-wrapper--no-suggestions) {
+    /* On mobile, when there are no suggestions the first .predictive-search__results-groups-wrapper
+     * is virtually empty due to a display: hidden on the predictive-search__pages-wrapper child.
+     * This causes the gap to render and look like a big top margin */
+    gap: 2rem;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .predictive-search {
+    border-top: none;
+    width: calc(100% + 0.2rem);
+  }
+
+  .header predictive-search {
+    position: relative;
+  }
+}
+
+predictive-search[open] .predictive-search,
+predictive-search[loading] .predictive-search {
+  display: block;
+}
+
+.predictive-search__result-group {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  gap: 2rem;
+}
+
+.predictive-search__result-group:first-child .predictive-search__pages-wrapper {
+  display: none;
+}
+
+@media screen and (min-width: 750px) {
+  .predictive-search__results-groups-wrapper--no-products .predictive-search__result-group:nth-child(2),
+  .predictive-search__result-group:last-child .predictive-search__pages-wrapper {
+    display: none;
+  }
+  .predictive-search__result-group:first-child .predictive-search__pages-wrapper {
+    display: initial;
+  }
+  .predictive-search__result-group:first-child {
+    flex: 0 0 26.4rem;
+  }
+  .predictive-search__results-groups-wrapper--no-products .predictive-search__result-group:first-child,
+  .predictive-search__result-group:only-child {
+    flex-grow: 1;
+  }
+}
+
+.predictive-search__heading {
+  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
+  margin: 0 2rem;
+  padding: 1.5rem 0 0.75rem;
+  color: rgba(var(--color-foreground), 0.7);
+}
+
+predictive-search .spinner {
+  width: 1.5rem;
+  height: 1.5rem;
+  line-height: 0;
+}
+
+predictive-search:not([loading]) .predictive-search__loading-state,
+predictive-search:not([loading]) .predictive-search-status__loading {
+  display: none;
+}
+
+predictive-search[loading] .predictive-search__loading-state {
+  display: flex;
+  justify-content: center;
+  padding: 1rem;
+}
+
+predictive-search[loading] .predictive-search__search-for-button {
+  display: none;
+}
+
+predictive-search[loading] .predictive-search__results-groups-wrapper ~ .predictive-search__loading-state {
+  display: none;
+}
+
+predictive-search[loading] .predictive-search__results-groups-wrapper ~ .predictive-search__search-for-button {
+  display: initial;
+}
+
+.predictive-search__list-item[aria-selected='true'] > *,
+.predictive-search__list-item:hover > *,
+.predictive-search__item[aria-selected='true'],
+.predictive-search__item:hover {
+  color: rgb(var(--color-foreground));
+  background-color: rgba(var(--color-foreground), 0.04);
+}
+
+.predictive-search__list-item[aria-selected='true'] .predictive-search__item-heading,
+.predictive-search__list-item:hover .predictive-search__item-heading {
+  text-decoration: underline;
+  text-underline-offset: 0.3rem;
+}
+
+.predictive-search__item {
+  display: flex;
+  padding: 1rem 2rem;
+  text-align: left;
+  text-decoration: none;
+  width: 100%;
+}
+
+.predictive-search__item--link-with-thumbnail {
+  display: grid;
+  grid-template-columns: 5rem 1fr;
+  grid-column-gap: 2rem;
+  grid-template-areas: 'product-image product-content';
+}
+
+.predictive-search__item-content {
+  grid-area: product-content;
+  display: flex;
+  flex-direction: column;
+}
+
+.predictive-search__item-content--centered {
+  justify-content: center;
+}
+
+.predictive-search__item-vendor {
+  font-size: 0.9rem;
+}
+
+.predictive-search__item-heading {
+  margin: 0;
+}
+
+.predictive-search__item-query-result *:not(mark) {
+  font-weight: bolder;
+}
+
+.predictive-search__item-query-result mark {
+  color: rgba(var(--color-foreground), 0.75);
+}
+
+.predictive-search__item-query-result mark {
+  background-color: transparent;
+}
+
+.predictive-search__item .price {
+  color: rgba(var(--color-foreground), 0.7);
+  font-size: 1.2rem;
+}
+
+.predictive-search__item-vendor + .predictive-search__item-heading,
+.predictive-search .price {
+  margin-top: 0.5rem;
+}
+
+.predictive-search__item--term {
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.3rem 2rem;
+  word-break: break-all;
+  line-height: calc(1 + 0.4 / var(--font-body-scale));
+}
+
+@media screen and (min-width: 750px) {
+  .predictive-search__item--term {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+}
+
+.predictive-search__item--term .icon-arrow {
+  width: calc(var(--font-heading-scale) * 1.4rem);
+  height: calc(var(--font-heading-scale) * 1.4rem);
+  flex-shrink: 0;
+  margin-left: calc(var(--font-heading-scale) * 2rem);
+  color: rgb(var(--color-link));
+}
+
+.predictive-search__image {
+  grid-area: product-image;
+  object-fit: contain;
+  font-family: 'object-fit: contain';
+}

assets/component-price.css

@@ -0,0 +1,101 @@
+.price {
+  font-size: 1.6rem;
+  letter-spacing: 0.1rem;
+  line-height: calc(1 + 0.5 / var(--font-body-scale));
+  color: rgb(var(--color-foreground));
+}
+
+.price > * {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.price.price--unavailable {
+  visibility: hidden;
+}
+
+.price--end {
+  text-align: right;
+}
+
+.price .price-item {
+  display: inline-block;
+  margin: 0 1rem 0 0;
+}
+
+.price__regular .price-item--regular {
+  margin-right: 0;
+}
+
+.price:not(.price--show-badge) .price-item--last:last-of-type {
+  margin: 0;
+}
+
+@media screen and (min-width: 750px) {
+  .price {
+    margin-bottom: 0;
+  }
+}
+
+.price--large {
+  font-size: 1.6rem;
+  line-height: calc(1 + 0.5 / var(--font-body-scale));
+  letter-spacing: 0.13rem;
+}
+
+@media screen and (min-width: 750px) {
+  .price--large {
+    font-size: 1.8rem;
+  }
+}
+
+.price--sold-out .price__availability,
+.price__regular {
+  display: block;
+}
+
+.price__sale,
+.price__availability,
+.price .price__badge-sale,
+.price .price__badge-sold-out,
+.price--on-sale .price__regular,
+.price--on-sale .price__availability {
+  display: none;
+}
+
+.price--sold-out .price__badge-sold-out,
+.price--on-sale .price__badge-sale,
+.volume-pricing--sale-badge .price__badge-sale {
+  display: inline-block;
+}
+
+.volume-pricing--sale-badge .price__badge-sale {
+  margin-left: 0.5rem;
+}
+
+.price--on-sale .price__sale {
+  display: initial;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.price--center {
+  display: initial;
+  justify-content: center;
+}
+
+.price--on-sale .price-item--regular {
+  text-decoration: line-through;
+  color: rgba(var(--color-foreground), 0.75);
+  font-size: 1.3rem;
+}
+
+.unit-price {
+  display: block;
+  font-size: 1.1rem;
+  letter-spacing: 0.04rem;
+  line-height: calc(1 + 0.2 / var(--font-body-scale));
+  margin-top: 0.2rem;
+  text-transform: uppercase;
+  color: rgba(var(--color-foreground), 0.7);
+}

assets/component-product-model.css

@@ -0,0 +1,44 @@
+.product__xr-button {
+  background: rgba(var(--color-foreground), 0.08);
+  color: rgb(var(--color-foreground));
+  margin: 1rem auto;
+  box-shadow: none;
+  display: flex;
+}
+
+.button.product__xr-button:hover {
+  box-shadow: none;
+}
+
+.product__xr-button[data-shopify-xr-hidden] {
+  visibility: hidden;
+}
+
+.shopify-design-mode .product__xr-button[data-shopify-xr-hidden] {
+  display: none;
+}
+
+@media screen and (max-width: 749px) {
+  slider-component .product__xr-button {
+    display: none;
+  }
+
+  .active .product__xr-button:not([data-shopify-xr-hidden]) {
+    display: block;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  slider-component + .button.product__xr-button {
+    display: none;
+  }
+
+  .product__xr-button[data-shopify-xr-hidden] {
+    display: none;
+  }
+}
+
+.product__xr-button .icon {
+  width: 1.4rem;
+  margin-right: 1rem;
+}

assets/component-product-variant-picker.css

@@ -0,0 +1,158 @@
+variant-selects {
+  display: block;
+}
+
+.product--no-media .product-form__input--pill,
+.product--no-media .product-form__input--swatch,
+.product--no-media .product-form__input--dropdown {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.product--no-media .product-form__input.product-form__input--pill,
+.product--no-media .product-form__input.product-form__input--swatch {
+  flex-wrap: wrap;
+  margin: 0 auto 1.2rem auto;
+}
+
+.product--no-media .product-form__input--dropdown {
+  flex-direction: column;
+  max-width: 100%;
+}
+
+:is(.product-form__input--pill, .product-form__input--swatch) .form__label {
+  margin-bottom: 0.2rem;
+}
+
+.product-form__input input[type='radio'] {
+  clip: rect(0, 0, 0, 0);
+  overflow: hidden;
+  position: absolute;
+  height: 1px;
+  width: 1px;
+}
+
+.product-form__input input[type='radio']:not(.disabled) + label > .label-unavailable {
+  display: none;
+}
+
+.product-form__input--dropdown {
+  --swatch-input--size: 2rem;
+  margin-bottom: 1.6rem;
+}
+
+
+.product-form__input--dropdown .dropdown-swatch + select {
+  padding-left: calc(2.4rem + var(--swatch-input--size));
+}
+
+.product-form__input--dropdown .dropdown-swatch {
+  position: absolute;
+  left: 1.6rem;
+  top: calc(50% - var(--swatch-input--size) / 2);
+  width: var(--swatch-input--size);
+  height: var(--swatch-input--size);
+  z-index: 1;
+}
+
+
+/* Custom styles for Pill display type */
+.product-form__input--pill input[type='radio'] + label {
+  border: var(--variant-pills-border-width) solid rgba(var(--color-foreground), var(--variant-pills-border-opacity));
+  background-color: rgb(var(--color-background));
+  color: rgba(var(--color-foreground));
+  border-radius: var(--variant-pills-radius);
+  color: rgb(var(--color-foreground));
+  display: inline-block;
+  margin: 0.7rem 0.5rem 0.2rem 0;
+  padding: 1rem 2rem;
+  font-size: 1.4rem;
+  letter-spacing: 0.1rem;
+  line-height: 1;
+  text-align: center;
+  transition: border var(--duration-short) ease;
+  cursor: pointer;
+  position: relative;
+}
+
+.product-form__input--pill input[type='radio'] + label:before {
+  content: '';
+  position: absolute;
+  top: calc(var(--variant-pills-border-width) * -1);
+  right: calc(var(--variant-pills-border-width) * -1);
+  bottom: calc(var(--variant-pills-border-width) * -1);
+  left: calc(var(--variant-pills-border-width) * -1);
+  z-index: -1;
+  border-radius: var(--variant-pills-radius);
+  box-shadow: var(--variant-pills-shadow-horizontal-offset) var(--variant-pills-shadow-vertical-offset)
+    var(--variant-pills-shadow-blur-radius) rgba(var(--color-shadow), var(--variant-pills-shadow-opacity));
+}
+
+.product-form__input--pill input[type='radio'] + label:hover {
+  border-color: rgb(var(--color-foreground));
+}
+
+.product-form__input--pill input[type='radio']:checked + label {
+  background-color: rgb(var(--color-foreground));
+  color: rgb(var(--color-background));
+}
+
+@media screen and (forced-colors: active) {
+  .product-form__input--pill input[type='radio']:checked + label {
+    text-decoration: underline;
+  }
+
+  .product-form__input--pill input[type='radio']:focus-visible + label {
+    outline: transparent solid 1px;
+    outline-offset: 2px;
+  }
+}
+
+.product-form__input--pill input[type='radio']:checked + label::selection {
+  background-color: rgba(var(--color-background), 0.3);
+}
+
+.product-form__input--pill input[type='radio']:disabled + label,
+.product-form__input--pill input[type='radio'].disabled + label {
+  border-color: rgba(var(--color-foreground), 0.1);
+  color: rgba(var(--color-foreground), 0.6);
+  text-decoration: line-through;
+}
+
+.product-form__input--pill input[type='radio'].disabled:checked + label,
+.product-form__input--pill input[type='radio']:disabled:checked + label {
+  color: rgba(var(--color-background), 0.6);
+}
+.product-form__input--pill input[type='radio']:focus-visible + label {
+  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
+}
+
+/* Fallback */
+.product-form__input--pill input[type='radio'].focused + label {
+  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
+}
+
+/* No outline when focus-visible is available in the browser */
+.no-js .product-form__input--pill input[type='radio']:focus:not(:focus-visible) + label {
+  box-shadow: none;
+}
+/* End custom styles for Pill display type  */
+
+/* Custom styles for Swatch display type */
+.product-form__input--swatch {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.product-form__input--swatch .swatch-input__input + .swatch-input__label {
+  margin: 0.7rem 1.2rem 0.2rem 0;
+}
+
+@media screen and (min-width: 750px) {
+  .product-form__input--swatch .swatch-input__input + .swatch-input__label {
+    --swatch-input--size: 2.8rem;
+  }
+}
+/* End custom styles for Swatch display type */

assets/component-rating.css

@@ -0,0 +1,64 @@
+.product--no-media .rating-wrapper {
+  text-align: center;
+}
+
+.rating {
+  display: inline-block;
+  margin: 0;
+}
+
+.product .rating-star {
+  --letter-spacing: 0.8;
+  --font-size: 1.7;
+}
+
+.card-wrapper .rating-star {
+  --letter-spacing: 0.7;
+  --font-size: 1.4;
+}
+
+.rating-star {
+  --color-rating-star: rgb(var(--color-foreground));
+  --percent: calc(
+    (
+        var(--rating) / var(--rating-max) + var(--rating-decimal) * var(--font-size) /
+          (var(--rating-max) * (var(--letter-spacing) + var(--font-size)))
+      ) * 100%
+  );
+  letter-spacing: calc(var(--letter-spacing) * 1rem);
+  font-size: calc(var(--font-size) * 1rem);
+  line-height: 1;
+  display: inline-block;
+  font-family: Times;
+  margin: 0;
+}
+
+.rating-star::before {
+  content: '★★★★★';
+  background: linear-gradient(
+    90deg,
+    var(--color-rating-star) var(--percent),
+    rgba(var(--color-foreground), 0.15) var(--percent)
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.rating-text {
+  display: none;
+}
+
+.rating-count {
+  display: inline-block;
+  margin: 0;
+}
+
+@media (forced-colors: active) {
+  .rating {
+    display: none;
+  }
+
+  .rating-text {
+    display: block;
+  }
+}

assets/component-search.css

@@ -0,0 +1,74 @@
+.search__input.field__input {
+  padding-right: 9.8rem;
+}
+
+.search__button {
+  right: var(--inputs-border-width);
+  top: var(--inputs-border-width);
+}
+
+.reset__button {
+  right: calc(var(--inputs-border-width) + 4.4rem);
+  top: var(--inputs-border-width);
+}
+
+.reset__button:not(:focus-visible)::after {
+  border-right: 0.1rem solid rgba(var(--color-foreground), 0.08);
+  display: block;
+  height: calc(100% - 1.6rem);
+  content: '';
+  position: absolute;
+  right: 0;
+}
+
+.reset__button:not(:focus)::after {
+  border-right: 0.1rem solid rgba(var(--color-foreground), 0.08);
+  display: block;
+  height: calc(100% - 1.8rem);
+  content: '';
+  position: absolute;
+  right: 0;
+}
+
+.search__button:focus-visible,
+.reset__button:focus-visible {
+  background-color: rgb(var(--color-background));
+  z-index: 4;
+}
+
+.search__button:focus,
+.reset__button:focus {
+  background-color: rgb(var(--color-background));
+  z-index: 4;
+}
+
+.search__button:not(:focus-visible):not(.focused),
+.reset__button:not(:focus-visible):not(.focused) {
+  box-shadow: inherit;
+  background-color: inherit;
+}
+
+.search__button:hover .icon,
+.reset__button:hover .icon {
+  transform: scale(1.07);
+}
+
+.search__button .icon {
+  height: 1.8rem;
+  width: 1.8rem;
+}
+
+.reset__button .icon.icon-close {
+  height: 1.8rem;
+  width: 1.8rem;
+  stroke-width: 0.1rem;
+}
+
+/* Remove extra spacing for search inputs in Safari */
+input::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+.template-search__results {
+  position: relative;
+}

assets/component-show-more.css

@@ -0,0 +1,10 @@
+.button-show-more {
+  padding-left: 0;
+  justify-content: flex-start;
+  padding-bottom: 1.1rem;
+}
+
+.button-show-more,
+.button-show-less {
+  margin-top: 1.5rem;
+}

assets/component-slider.css

@@ -0,0 +1,392 @@
+slider-component {
+  --desktop-margin-left-first-item: max(
+    5rem,
+    calc((100vw - var(--page-width) + 10rem - var(--grid-desktop-horizontal-spacing)) / 2)
+  );
+  position: relative;
+  display: block;
+}
+
+slider-component.slider-component-full-width {
+  --desktop-margin-left-first-item: 1.5rem;
+}
+
+@media screen and (max-width: 749px) {
+  slider-component.page-width {
+    padding: 0 1.5rem;
+  }
+}
+
+@media screen and (min-width: 749px) and (max-width: 990px) {
+  slider-component.page-width {
+    padding: 0 5rem;
+  }
+}
+
+@media screen and (max-width: 989px) {
+  .no-js slider-component .slider {
+    padding-bottom: 3rem;
+  }
+}
+
+.slider__slide {
+  --focus-outline-padding: 0.5rem;
+  --shadow-padding-top: calc((var(--shadow-vertical-offset) * -1 + var(--shadow-blur-radius)) * var(--shadow-visible));
+  --shadow-padding-bottom: calc((var(--shadow-vertical-offset) + var(--shadow-blur-radius)) * var(--shadow-visible));
+  scroll-snap-align: start;
+  flex-shrink: 0;
+  padding-bottom: 0;
+}
+
+@media screen and (max-width: 749px) {
+  .slider.slider--mobile {
+    position: relative;
+    flex-wrap: inherit;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    scroll-padding-left: 1.5rem;
+    -webkit-overflow-scrolling: touch;
+    margin-bottom: 1rem;
+  }
+
+  /* Fix to show some space at the end of our sliders in all browsers */
+  .slider--mobile:after {
+    content: '';
+    width: 0;
+    padding-left: 1.5rem;
+  }
+
+  .slider.slider--mobile .slider__slide {
+    margin-bottom: 0;
+    padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
+    padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
+  }
+
+  .slider.slider--mobile.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
+    padding-bottom: var(--focus-outline-padding);
+  }
+
+  .slider.slider--mobile.contains-content-container .slider__slide {
+    --focus-outline-padding: 0rem;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .slider.slider--tablet-up {
+    position: relative;
+    flex-wrap: inherit;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    scroll-padding-left: 1rem;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .slider.slider--tablet-up .slider__slide {
+    margin-bottom: 0;
+  }
+}
+
+@media screen and (max-width: 989px) {
+  .slider.slider--tablet {
+    position: relative;
+    flex-wrap: inherit;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    scroll-padding-left: 1.5rem;
+    -webkit-overflow-scrolling: touch;
+    margin-bottom: 1rem;
+  }
+
+  /* Fix to show some space at the end of our sliders in all browsers */
+  .slider--tablet:after {
+    content: '';
+    width: 0;
+    padding-left: 1.5rem;
+    margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
+  }
+
+  .slider.slider--tablet .slider__slide {
+    margin-bottom: 0;
+    padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
+    padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
+  }
+
+  .slider.slider--tablet.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
+    padding-bottom: var(--focus-outline-padding);
+  }
+
+  .slider.slider--tablet.contains-content-container .slider__slide {
+    --focus-outline-padding: 0rem;
+  }
+}
+
+.slider--everywhere {
+  position: relative;
+  flex-wrap: inherit;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  margin-bottom: 1rem;
+}
+
+.slider.slider--everywhere .slider__slide {
+  margin-bottom: 0;
+  scroll-snap-align: center;
+}
+
+@media screen and (min-width: 990px) {
+  .slider-component-desktop.page-width {
+    max-width: none;
+  }
+
+  .slider--desktop {
+    position: relative;
+    flex-wrap: inherit;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
+    margin-bottom: 1rem;
+    scroll-padding-left: var(--desktop-margin-left-first-item);
+  }
+
+  /* Fix to show some space at the end of our sliders in all browsers */
+  .slider--desktop:after {
+    content: '';
+    width: 0;
+    padding-left: 5rem;
+    margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
+  }
+
+  .slider.slider--desktop .slider__slide {
+    margin-bottom: 0;
+    padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
+    padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
+  }
+
+  .slider--desktop .slider__slide:first-child {
+    margin-left: var(--desktop-margin-left-first-item);
+    scroll-margin-left: var(--desktop-margin-left-first-item);
+  }
+
+  .slider-component-full-width .slider--desktop {
+    scroll-padding-left: 1.5rem;
+  }
+
+  .slider-component-full-width .slider--desktop .slider__slide:first-child {
+    margin-left: 1.5rem;
+    scroll-margin-left: 1.5rem;
+  }
+
+  /* Fix to show some space at the end of our sliders in all browsers */
+  .slider-component-full-width .slider--desktop:after {
+    padding-left: 1.5rem;
+  }
+
+  .slider--desktop.grid--5-col-desktop .grid__item {
+    width: calc((100% - var(--desktop-margin-left-first-item)) / 5 - var(--grid-desktop-horizontal-spacing) * 2);
+  }
+
+  .slider--desktop.grid--4-col-desktop .grid__item {
+    width: calc((100% - var(--desktop-margin-left-first-item)) / 4 - var(--grid-desktop-horizontal-spacing) * 3);
+  }
+
+  .slider--desktop.grid--3-col-desktop .grid__item {
+    width: calc((100% - var(--desktop-margin-left-first-item)) / 3 - var(--grid-desktop-horizontal-spacing) * 4);
+  }
+
+  .slider--desktop.grid--2-col-desktop .grid__item {
+    width: calc((100% - var(--desktop-margin-left-first-item)) / 2 - var(--grid-desktop-horizontal-spacing) * 5);
+  }
+
+  .slider--desktop.grid--1-col-desktop .grid__item {
+    width: calc((100% - var(--desktop-margin-left-first-item)) - var(--grid-desktop-horizontal-spacing) * 9);
+  }
+
+  .slider.slider--desktop.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
+    padding-bottom: var(--focus-outline-padding);
+  }
+
+  .slider.slider--desktop.contains-content-container .slider__slide {
+    --focus-outline-padding: 0rem;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .slider {
+    scroll-behavior: auto;
+  }
+}
+
+/* Scrollbar */
+
+.slider {
+  scrollbar-color: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0.04);
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.slider::-webkit-scrollbar {
+  height: 0.4rem;
+  width: 0.4rem;
+  display: none;
+}
+
+.no-js .slider {
+  -ms-overflow-style: auto;
+  scrollbar-width: auto;
+}
+
+.no-js .slider::-webkit-scrollbar {
+  display: initial;
+}
+
+.slider::-webkit-scrollbar-thumb {
+  background-color: rgb(var(--color-foreground));
+  border-radius: 0.4rem;
+  border: 0;
+}
+
+.slider::-webkit-scrollbar-track {
+  background: rgba(var(--color-foreground), 0.04);
+  border-radius: 0.4rem;
+}
+
+.slider-counter {
+  display: flex;
+  justify-content: center;
+  min-width: 4.4rem;
+}
+
+@media screen and (min-width: 750px) {
+  .slider-counter--dots {
+    margin: 0 1.2rem;
+  }
+}
+
+.slider-counter__link {
+  padding: 1rem;
+}
+
+@media screen and (max-width: 749px) {
+  .slider-counter__link {
+    padding: 0.7rem;
+  }
+}
+
+.slider-counter__link--dots .dot {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  border: 0.1rem solid rgba(var(--color-foreground), 0.5);
+  padding: 0;
+  display: block;
+}
+
+.slider-counter__link--active.slider-counter__link--dots .dot {
+  background-color: rgb(var(--color-foreground));
+}
+
+@media screen and (forced-colors: active) {
+  .slider-counter__link--active.slider-counter__link--dots .dot {
+    background-color: CanvasText;
+  }
+}
+
+.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot {
+  border-color: rgb(var(--color-foreground));
+}
+
+.slider-counter__link--dots .dot,
+.slider-counter__link--numbers {
+  transition: transform 0.2s ease-in-out;
+}
+
+.slider-counter__link--active.slider-counter__link--numbers,
+.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot,
+.slider-counter__link--numbers:hover {
+  transform: scale(1.1);
+}
+
+.slider-counter__link--numbers {
+  color: rgba(var(--color-foreground), 0.5);
+  text-decoration: none;
+}
+
+.slider-counter__link--numbers:hover {
+  color: rgb(var(--color-foreground));
+}
+
+.slider-counter__link--active.slider-counter__link--numbers {
+  text-decoration: underline;
+  color: rgb(var(--color-foreground));
+}
+
+.slider-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media screen and (min-width: 990px) {
+  .slider:not(.slider--everywhere):not(.slider--desktop) + .slider-buttons {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 989px) {
+  .slider--desktop:not(.slider--tablet) + .slider-buttons {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .slider--mobile + .slider-buttons {
+    display: none;
+  }
+}
+
+.slider-button {
+  color: rgba(var(--color-foreground), 0.75);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.slider-button:not([disabled]):hover {
+  color: rgb(var(--color-foreground));
+}
+
+.slider-button .icon {
+  height: 0.6rem;
+}
+
+.slider-button[disabled] .icon {
+  color: rgba(var(--color-foreground), 0.3);
+  cursor: not-allowed;
+}
+
+.slider-button--next .icon {
+  transform: rotate(-90deg);
+}
+
+.slider-button--prev .icon {
+  transform: rotate(90deg);
+}
+
+.slider-button--next:not([disabled]):hover .icon {
+  transform: rotate(-90deg) scale(1.1);
+}
+
+.slider-button--prev:not([disabled]):hover .icon {
+  transform: rotate(90deg) scale(1.1);
+}

assets/component-slideshow.css

@@ -0,0 +1,206 @@
+slideshow-component {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+@media screen and (max-width: 989px) {
+  .no-js slideshow-component .slider {
+    padding-bottom: 3rem;
+  }
+}
+
+slideshow-component .slideshow.banner {
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin: 0;
+  gap: 0;
+}
+
+.slideshow__slide {
+  padding: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  visibility: visible;
+}
+
+@media screen and (max-width: 749px) {
+  .slideshow--placeholder.banner--mobile-bottom.banner--adapt_image .slideshow__media,
+  .slideshow--placeholder.banner--adapt_image:not(.banner--mobile-bottom) {
+    height: 28rem;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .slideshow--placeholder.banner--adapt_image {
+    height: 56rem;
+  }
+}
+
+.slideshow__text.banner__box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  max-width: 54.5rem;
+}
+
+.slideshow__text > * {
+  max-width: 100%;
+}
+
+@media screen and (max-width: 749px) {
+  slideshow-component.page-width .slideshow__text {
+    border-right: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
+    border-left: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
+  }
+
+  .banner--mobile-bottom .slideshow__text.banner__box {
+    max-width: 100%;
+  }
+
+  .banner--mobile-bottom .slideshow__text-wrapper {
+    flex-grow: 1;
+  }
+
+  .banner--mobile-bottom .slideshow__text.banner__box {
+    height: 100%;
+  }
+
+  .banner--mobile-bottom .slideshow__text .button {
+    flex-grow: 0;
+  }
+
+  .slideshow__text.slideshow__text-mobile--left {
+    align-items: flex-start;
+    text-align: left;
+  }
+
+  .slideshow__text.slideshow__text-mobile--right {
+    align-items: flex-end;
+    text-align: right;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .slideshow__text.slideshow__text--left {
+    align-items: flex-start;
+    text-align: left;
+  }
+
+  .slideshow__text.slideshow__text--right {
+    align-items: flex-end;
+    text-align: right;
+  }
+}
+
+.slideshow:not(.banner--mobile-bottom) .slideshow__text-wrapper {
+  height: 100%;
+}
+
+@media screen and (min-width: 750px) {
+  .slideshow__text-wrapper.banner__content {
+    height: 100%;
+    padding: 5rem;
+  }
+}
+
+.slideshow__controls {
+  border: 0.1rem solid rgba(var(--color-foreground), 0.08);
+}
+
+.slideshow__controls--top {
+  order: 2;
+  z-index: 1;
+}
+
+@media screen and (max-width: 749px) {
+  .slideshow__controls--border-radius-mobile {
+    border-bottom-right-radius: var(--text-boxes-radius);
+    border-bottom-left-radius: var(--text-boxes-radius);
+  }
+}
+
+.spaced-section--full-width:last-child slideshow-component:not(.page-width) .slideshow__controls {
+  border-bottom: none;
+}
+
+@media screen and (min-width: 750px) {
+  .slideshow__controls {
+    position: relative;
+  }
+}
+
+slideshow-component:not(.page-width) .slider-buttons {
+  border-right: 0;
+  border-left: 0;
+}
+
+.slideshow__control-wrapper {
+  display: flex;
+}
+
+.slideshow__autoplay {
+  position: absolute;
+  right: 0;
+  border-left: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@media screen and (max-width: 749px) {
+  slideshow-component.page-width .slideshow__autoplay {
+    right: 1.5rem;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .slideshow__autoplay.slider-button {
+    position: inherit;
+    margin-left: 0.6rem;
+    padding: 0 0 0 0.6rem;
+    border-left: 0.1rem solid rgba(var(--color-foreground), 0.08);
+  }
+}
+
+.slideshow__autoplay .icon.icon-play,
+.slideshow__autoplay .icon.icon-pause {
+  display: block;
+  position: absolute;
+  opacity: 1;
+  transform: scale(1);
+  transition: transform 150ms ease, opacity 150ms ease;
+  width: 0.8rem;
+  height: 1.2rem;
+}
+
+.slideshow__autoplay .icon.icon-play {
+  height: 1rem;
+}
+
+.slideshow__autoplay path {
+  fill: rgba(var(--color-foreground), 0.75);
+}
+
+.slideshow__autoplay:hover path {
+  fill: rgb(var(--color-foreground));
+}
+
+@media screen and (forced-colors: active) {
+  .slideshow__autoplay path,
+  .slideshow__autoplay:hover path {
+    fill: CanvasText;
+  }
+}
+
+.slideshow__autoplay:hover svg {
+  transform: scale(1.1);
+}
+
+.slideshow__autoplay--paused .icon-pause,
+.slideshow__autoplay:not(.slideshow__autoplay--paused) .icon-play {
+  visibility: hidden;
+  opacity: 0;
+  transform: scale(0.8);
+}

assets/component-swatch-input.css

@@ -0,0 +1,69 @@
+/* swatch-input lives in its own file for reusability of the swatch in other areas than the product form context */
+.swatch-input__input + .swatch-input__label {
+  --swatch-input--size: 4.4rem;
+  --swatch-input--border-radius: 50%;
+
+  display: inline-block;
+  border-radius: var(--swatch-input--border-radius);
+  cursor: pointer;
+  outline-offset: 0.2rem;
+  forced-color-adjust: none;
+}
+
+.swatch-input__input + .swatch-input__label.swatch-input__label--square {
+  --swatch-input--border-radius: 0.2rem;
+}
+
+.swatch-input__input + .swatch-input__label:hover {
+  outline: 0.2rem solid rgba(var(--color-foreground), 0.4);
+}
+
+.swatch-input__input:active + .swatch-input__label,
+.swatch-input__input:checked + .swatch-input__label {
+  outline: 0.1rem solid rgb(var(--color-foreground));
+}
+
+/* Visually disabled */
+.swatch-input__input.disabled:not(:active):not(:checked) + .swatch-input__label:hover {
+  outline: none;
+}
+
+/* Focus visible */
+.swatch-input__input:focus-visible + .swatch-input__label {
+  box-shadow: 0 0 0 0.5rem rgb(var(--color-background)), 0 0 0 0.7rem rgba(var(--color-foreground), 0.55);
+}
+
+/* Overrides for swatch snippet when used inside disabled swatch-input */
+.swatch-input__input:disabled + .swatch-input__label > .swatch,
+.swatch-input__input.disabled + .swatch-input__label > .swatch {
+  position: relative;
+  overflow: hidden;
+}
+
+/* Display white semi-transparent overlay over swatch when input is disabled */
+.swatch-input__input:disabled + .swatch-input__label > .swatch::before,
+.swatch-input__input.disabled + .swatch-input__label > .swatch::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(250, 250, 250, 0.5);
+}
+
+/* Display crossed out line over swatch when input is disabled */
+.swatch-input__input:disabled + .swatch-input__label > .swatch::after,
+.swatch-input__input.disabled + .swatch-input__label > .swatch::after {
+  /* Diagonal of a square = length of the side * sqrt(2)  */
+  --diagonal--size: calc(var(--swatch-input--size) * 1.414);
+  --crossed-line--size: 0.1rem;
+  --crossed-line--color: rgb(0, 0, 0);
+
+  content: '';
+  position: absolute;
+  bottom: calc(var(--crossed-line--size) * -0.5);
+  left: 0;
+  width: var(--diagonal--size);
+  height: var(--crossed-line--size);
+  background-color: var(--crossed-line--color);
+  transform: rotate(-45deg);
+  transform-origin: left;
+}

assets/component-swatch.css

@@ -0,0 +1,23 @@
+/* swatch lives in its own file for reusability of the swatch in swatch-input and dropdown */
+.swatch {
+  --swatch--size: var(--swatch-input--size, 4.4rem);
+  --swatch--border-radius: var(--swatch-input--border-radius, 50%);
+
+  display: block;
+  width: var(--swatch--size);
+  aspect-ratio: 1 / 1;
+  background: var(--swatch--background);
+  background-size: cover;
+  background-origin: border-box;
+  border: 0.1rem solid rgba(var(--color-foreground), 0.45);
+  border-radius: var(--swatch--border-radius);
+}
+
+.swatch--square {
+  --swatch--border-radius: var(--swatch-input--border-radius, 0.2rem);
+}
+
+.swatch--unavailable {
+  border-style: dashed;
+  border-color: rgba(var(--color-foreground), 0.5);
+}

assets/component-totals.css

@@ -0,0 +1,40 @@
+.totals {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.totals > * {
+  font-size: 1.6rem;
+  margin: 0;
+}
+
+.totals > h2 {
+  font-size: calc(var(--font-heading-scale) * 1.6rem);
+}
+
+.totals * {
+  line-height: 1;
+}
+
+.totals > * + * {
+  margin-left: 2rem;
+}
+
+.totals__total {
+  margin-top: .5rem;
+}
+
+.totals__total-value {
+  font-size: 1.8rem;
+}
+
+.cart__ctas + .totals {
+  margin-top: 2rem;
+}
+
+@media all and (min-width: 750px) {
+  .totals {
+    justify-content: flex-end;
+  }
+}

assets/component-visual-display.css

@@ -0,0 +1,90 @@
+.visual-display {
+  --visual-display__size: min(2.4rem, 100%);
+  position: relative;
+  width: var(--visual-display__size);
+  max-width: 100%;
+  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
+  aspect-ratio: 1/1;
+}
+
+.visual-display.empty {
+  border-style: dashed;
+}
+
+.visual-display--presentation-swatch {
+  --visual-display__size: min(2.4rem, 100%);
+
+  border-radius: 100%;
+  overflow: hidden;
+}
+
+.visual-display-parent .visual-display--presentation-swatch {
+  outline-offset: 0.2rem;
+}
+
+/* Hover, active, and focus states */
+:is(
+    .visual-display-parent:hover .visual-display--presentation-swatch,
+    .visual-display-parent.active .visual-display--presentation-swatch,
+    .visual-display-parent:has(:focus-visible) .visual-display--presentation-swatch
+  ) {
+  outline-style: solid;
+}
+
+/* Active state */
+.visual-display-parent.active .visual-display--presentation-swatch {
+  outline-width: 0.2rem;
+  outline-color: rgb(var(--color-foreground), 1);
+}
+
+/* Hover state */
+.visual-display-parent:hover .visual-display--presentation-swatch {
+  outline-width: 0.2rem;
+  outline-color: rgb(var(--color-foreground), 0.4);
+}
+
+/* Focus state */
+.visual-display-parent:has(:focus-visible) .visual-display--presentation-swatch {
+  outline-width: 0.2rem;
+  outline-color: rgb(var(--color-foreground), 0.4);
+  box-shadow: 0 0 0 0.6rem rgb(var(--color-background)), 0 0 0 0.8rem rgba(var(--color-foreground), 0.5),
+    0 0 1.2rem 0.4rem rgba(var(--color-foreground), 0.3);
+}
+
+/* Focus state for older browsers */
+@supports not selector(:has(a, b)) {
+  .visual-display-parent:focus-within .visual-display--presentation-swatch {
+    outline-offset: 0.2rem;
+    outline: 0.2rem solid rgb(var(--color-foreground), 0.4);
+    box-shadow: 0 0 0 0.6rem rgb(var(--color-background)), 0 0 0 0.8rem rgba(var(--color-foreground), 0.5),
+      0 0 1.2rem 0.4rem rgba(var(--color-foreground), 0.3);
+  }
+}
+
+.visual-display-parent.disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+/* Used to display the disabled dash */
+.visual-display-parent.disabled .visual-display::after {
+  display: block;
+  content: '';
+
+  /* 1.414 is not a magic number, it's the square root of 2, or the length of the diagonal */
+  width: calc(var(--visual-display__size) * 1.414);
+  border-bottom: 0.1rem solid rgb(var(--color-background-contrast));
+  transform: rotate(-45deg);
+  transform-origin: left;
+}
+
+.visual-display .visual-display__child {
+  display: block;
+  height: 100%;
+  width: 100%;
+  forced-color-adjust: none;
+}
+
+.visual-display--presentation-swatch .visual-display__image {
+  object-fit: cover;
+}

assets/component-volume-pricing.css

@@ -0,0 +1,70 @@
+volume-pricing {
+  display: block;
+  margin-top: 2rem;
+}
+
+volume-pricing li:nth-child(odd) {
+  background: rgba(var(--color-foreground), 0.04);
+}
+
+volume-pricing ul {
+  margin-top: 1.2rem;
+}
+
+volume-pricing li {
+  font-size: 1.4rem;
+  letter-spacing: 0.06rem;
+  padding: 0.6rem 0.8rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.volume-pricing-note {
+  margin-top: -2.6rem;
+}
+
+.product--no-media .volume-pricing-note {
+  text-align: center;
+}
+
+.product--no-media volume-pricing {
+  width: 30rem;
+}
+
+.volume-pricing-note span,
+volume-pricing .label-show-more {
+  font-size: 1.2rem;
+  letter-spacing: 0.07rem;
+}
+
+volume-pricing show-more-button {
+  margin-top: 0.8rem;
+}
+
+.product-form__input price-per-item,
+.price-per-item__container {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.product-form__input .price-per-item {
+  color: rgba(var(--color-foreground));
+  font-size: 1.4rem;
+  letter-spacing: 0.06rem;
+}
+
+.price-per-item dl {
+  margin: 0;
+}
+
+.price-per-item dd {
+  margin-left: 0;
+}
+
+.price-per-item__container .variant-item__old-price,
+.price__regular .variant-item__old-price {
+  color: rgba(var(--color-foreground), 0.75);
+  font-size: 1.2rem;
+  letter-spacing: 0.07rem;
+}

assets/constants.js

@@ -0,0 +1,8 @@
+const ON_CHANGE_DEBOUNCE_TIMER = 300;
+
+const PUB_SUB_EVENTS = {
+  cartUpdate: 'cart-update',
+  quantityUpdate: 'quantity-update',
+  variantChange: 'variant-change',
+  cartError: 'cart-error',
+};

assets/customer.css

@@ -0,0 +1,755 @@
+.customer:not(.account):not(.order) {
+  margin: 0 auto;
+  max-width: 33.4rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  text-align: center;
+}
+
+@media screen and (min-width: 750px) {
+  .customer:not(.account):not(.order) {
+    max-width: 47.8rem;
+  }
+}
+
+.customer > h1,
+.customer__title {
+  margin-top: 0;
+}
+
+.customer form {
+  margin-top: 4rem;
+}
+
+.customer button {
+  margin: 4rem 0 1.5rem;
+}
+
+.customer ul {
+  line-height: calc(1 + 0.6 / var(--font-body-scale));
+  padding-left: 4.4rem;
+  text-align: left;
+  margin-bottom: 4rem;
+}
+
+.customer ul a {
+  display: inline;
+}
+
+.customer strong {
+  font-weight: normal;
+  color: rgb(var(--color-foreground));
+}
+
+.customer h2.form__message {
+  font-size: calc(var(--font-heading-scale) * 1.8rem);
+}
+
+@media only screen and (min-width: 750px) {
+  .customer h2.form__message {
+    font-size: calc(var(--font-heading-scale) * 2.2rem);
+  }
+}
+
+.customer .field {
+  margin: 2rem 0 0 0;
+}
+
+.customer .field:first-of-type {
+  margin-top: 0;
+}
+
+/* Customer Table */
+.customer table {
+  table-layout: auto;
+  border-collapse: collapse;
+  border-bottom: 0.01rem solid rgba(var(--color-foreground), 0.08);
+  box-shadow: none;
+  width: 100%;
+  font-size: 1.6rem;
+  position: relative;
+}
+
+@media screen and (min-width: 750px) {
+  .customer table {
+    border: none;
+    box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.08);
+  }
+}
+
+@media screen and (forced-colors: active) {
+  .customer table {
+    border-top: 0.1rem solid transparent;
+    border-bottom: 0.1rem solid transparent;
+  }
+}
+
+.customer tbody {
+  color: rgb(var(--color-foreground));
+}
+
+.customer th,
+.customer td {
+  font-weight: 400;
+  line-height: 1;
+  border: none;
+  padding: 0;
+}
+
+@media screen and (min-width: 750px) {
+  .customer td {
+    padding-right: 2.2rem;
+  }
+}
+
+.customer tbody td {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.customer td:empty {
+  display: initial;
+}
+
+.customer thead th {
+  font-size: 1.2rem;
+  letter-spacing: 0.07rem;
+  text-transform: uppercase;
+}
+
+.customer tbody td:first-of-type {
+  padding-top: 4rem;
+}
+
+@media screen and (min-width: 750px) {
+  .customer th,
+  .customer td:first-of-type {
+    text-align: left;
+    padding-left: 0;
+    padding-right: 2.2rem;
+  }
+
+  .customer thead th,
+  .customer tbody td {
+    padding-top: 2.4rem;
+    padding-bottom: 2.4rem;
+  }
+
+  .customer th:first-of-type,
+  .customer td:first-of-type {
+    padding-left: 2.2rem;
+  }
+
+  .customer tbody td {
+    vertical-align: top;
+  }
+
+  .customer tbody td:first-of-type {
+    padding-top: 2.4rem;
+  }
+}
+
+.customer tbody td:last-of-type {
+  padding-bottom: 4rem;
+}
+
+@media screen and (min-width: 750px) {
+  .customer tbody td:last-of-type {
+    padding-bottom: 0;
+  }
+}
+
+.customer tbody tr {
+  border-top: 0.01rem solid rgba(var(--color-foreground), 0.08);
+}
+
+@media screen and (min-width: 750px) {
+  .customer tbody tr:first-of-type {
+    border-top: none;
+  }
+}
+
+@media screen and (forced-colors: active) {
+  .customer tbody tr {
+    border-top: 0.1rem solid transparent;
+  }
+}
+
+.customer tfoot td:first-of-type,
+.customer tfoot td {
+  padding-top: 0.6rem;
+  padding-bottom: 0.6rem;
+}
+
+.customer tfoot td:first-of-type {
+  text-align: left;
+}
+
+.customer tfoot tr:first-of-type td {
+  padding-top: 4rem;
+}
+
+@media screen and (min-width: 750px) {
+  .customer tfoot tr:first-of-type td,
+  .customer tfoot tr:first-of-type th {
+    padding-top: 2.4rem;
+  }
+}
+
+.customer tfoot tr:last-of-type td {
+  padding-bottom: 4rem;
+}
+
+@media screen and (min-width: 750px) {
+  .customer tfoot tr:last-of-type td,
+  .customer tfoot tr:last-of-type th {
+    padding-bottom: 2.4rem;
+  }
+}
+
+/* works around colspan phantom border issues */
+.customer thead::after,
+.customer tfoot::before {
+  content: ' ';
+  height: 0.1rem;
+  width: 100%;
+  display: block;
+  position: absolute;
+  left: 0;
+  background: rgba(var(--color-foreground), 0.08);
+}
+
+@media screen and (forced-colors: active) {
+  .customer thead::after,
+  .customer tfoot::before {
+    background: CanvasText;
+  }
+}
+
+/* mobile table overrides */
+@media screen and (max-width: 749px) {
+  .customer thead,
+  .customer th,
+  .customer tfoot td:first-of-type {
+    display: none;
+  }
+
+  .customer td {
+    display: flex;
+    text-align: right;
+  }
+
+  .customer td::before {
+    color: rgba(var(--color-foreground), 0.75);
+    content: attr(data-label);
+    font-size: 1.4rem;
+    padding-right: 2rem;
+    text-transform: uppercase;
+    flex-grow: 1;
+    text-align: left;
+  }
+
+  .customer td:first-of-type {
+    display: flex;
+    align-items: center;
+  }
+
+  .customer tr {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    width: 100%;
+  }
+}
+
+/* Pagination */
+.customer .pagination {
+  margin-top: 5rem;
+  margin-bottom: 7rem;
+}
+
+@media screen and (min-width: 990px) {
+  .customer .pagination {
+    margin-top: 7rem;
+    margin-bottom: 10rem;
+  }
+}
+
+.customer .pagination ul {
+  display: flex;
+  justify-content: center;
+  list-style: none;
+  padding: 0;
+}
+
+.customer .pagination li {
+  flex: 1 1;
+  max-width: 4rem;
+}
+
+.customer .pagination li:not(:last-child) {
+  margin-right: 1rem;
+}
+
+.customer .pagination li :first-child {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  height: 4rem;
+  width: 100%;
+  padding: 0;
+  text-decoration: none;
+}
+
+.customer .pagination li :first-child svg {
+  height: 0.6rem;
+}
+
+.customer .pagination li:first-of-type svg {
+  margin-left: -0.2rem;
+  transform: rotate(90deg);
+}
+
+.customer .pagination li:last-of-type svg {
+  margin-right: -0.2rem;
+  transform: rotate(-90deg);
+}
+
+.customer .pagination li [aria-current]::after {
+  content: '';
+  display: block;
+  width: 2rem;
+  height: 0.01rem;
+  position: absolute;
+  bottom: 0.08rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: currentColor;
+}
+
+/* Login */
+.login a {
+  display: block;
+  margin: 0 auto;
+  width: fit-content;
+}
+
+.login a[href='#recover'] {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.login .field + a {
+  margin-top: 1rem;
+}
+
+.login p {
+  margin: 1.5rem 0;
+}
+
+.login h3 {
+  margin-top: 1.5rem;
+  text-align: left;
+  font-size: calc(var(--font-heading-scale) * 1.6rem);
+}
+
+#customer_login_guest button {
+  margin-top: 0;
+}
+
+#recover,
+#recover + div {
+  display: none;
+}
+
+#recover:target {
+  display: block;
+}
+
+#recover:target + div {
+  display: block;
+}
+
+#recover:target ~ #login,
+#recover:target ~ #login + div {
+  display: none;
+}
+
+#recover,
+#login {
+  scroll-margin-top: 20rem;
+}
+
+#recover {
+  margin-bottom: 0;
+}
+
+.activate button[name='decline'],
+.addresses li > button,
+.addresses form button[type] {
+  background-color: rgba(var(--color-background), var(--alpha-button-background));
+  color: rgb(var(--color-link));
+}
+
+@media only screen and (min-width: 750px) {
+  .activate button[name='decline'] {
+    margin-top: inherit;
+    margin-left: 1rem;
+  }
+}
+
+/* Account/Order */
+:is(.account, .order) {
+  margin: 0 auto;
+  max-width: var(--page-width);
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+@media screen and (min-width: 750px) {
+  :is(.account, .order) {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+}
+
+@media screen and (min-width: 990px) {
+  :is(.account, .order) > div:nth-of-type(2) {
+    display: flex;
+    margin-top: 5rem;
+  }
+}
+
+@media screen and (min-width: 990px) {
+  :is(.account, .order) > div:nth-of-type(2) > div:first-of-type {
+    flex-grow: 1;
+    padding-right: 3.2rem;
+  }
+}
+
+@media screen and (min-width: 750px) and (max-width: 989px) {
+  .order > div:nth-of-type(2) > div:last-of-type {
+    display: flex;
+  }
+
+  .order > div:nth-of-type(2) > div:last-of-type div {
+    padding-right: 3.2rem;
+  }
+}
+
+:is(.account, .order) p {
+  margin: 0 0 2rem;
+  font-size: 1.6rem;
+}
+
+:is(.account, .order) h1 {
+  margin-bottom: 1rem;
+}
+
+:is(.account, .order) h2 {
+  margin-top: 4rem;
+  margin-bottom: 1rem;
+}
+
+@media screen and (min-width: 990px) {
+  :is(.account, .order) h2 {
+    margin-top: 0;
+  }
+}
+
+.account h1 + a {
+  display: inline-flex;
+  align-items: center;
+}
+
+.account a svg {
+  width: 1.5rem;
+  margin-bottom: -0.03rem;
+  margin-right: 1rem;
+}
+
+@media screen and (min-width: 750px) {
+  .account thead th:last-child,
+  .account td:last-child {
+    text-align: right;
+  }
+
+  .account table td:first-of-type {
+    padding-top: 1.2rem;
+    padding-bottom: 1.2rem;
+  }
+}
+
+.account table td:first-of-type a {
+  padding: 1.1rem 1.5rem;
+  text-decoration: none;
+  box-shadow: 0 0 0 0.1rem rgba(var(--color-link), 0.2);
+  border: 0.1rem solid transparent;
+  font-size: 1.2rem;
+}
+
+.account table td:first-of-type a:hover {
+  box-shadow: 0 0 0 0.2rem rgba(var(--color-link), 0.2);
+}
+
+.order td:first-of-type {
+  align-items: initial;
+}
+
+@media screen and (min-width: 750px) {
+  .order thead th:nth-last-child(-n + 3),
+  .order td:nth-last-child(-n + 3) {
+    text-align: right;
+  }
+}
+
+.order tfoot tr:last-of-type td,
+.order tfoot tr:last-of-type th {
+  font-size: 2.2rem;
+  padding-top: 1.5rem;
+  padding-bottom: 4rem;
+}
+
+@media screen and (min-width: 750px) {
+  .order tfoot tr:last-of-type td,
+  .order tfoot tr:last-of-type th {
+    padding-bottom: 2.4rem;
+  }
+}
+
+.order tfoot tr:last-of-type td:before {
+  font-size: 2.2rem;
+}
+
+.order table p,
+.order > div:nth-of-type(2) > div:first-of-type h2,
+.order > div:nth-of-type(2) > div:last-of-type h2 + p {
+  margin-bottom: 0;
+}
+
+.order > div:nth-of-type(2) > div:first-of-type h2 ~ p {
+  margin-bottom: 0;
+  font-size: 1.4rem;
+}
+
+.order > div:nth-of-type(2) > div:first-of-type h2 ~ p:last-of-type {
+  margin-bottom: 3rem;
+}
+
+.order .item-props {
+  font-size: 1.4rem;
+  margin-top: 0.05px;
+  display: flex;
+  flex-direction: column;
+}
+
+.order .item-props > span {
+  word-break: break-all;
+  line-height: calc(1 + 0.2 / var(--font-body-scale));
+}
+
+.order .fulfillment {
+  width: fit-content;
+  border: 0.01rem solid rgba(var(--color-foreground), 0.2);
+  padding: 1rem;
+  margin-top: 1rem;
+  font-size: 1.4rem;
+  text-align: left;
+}
+
+.order .fulfillment a {
+  margin: 0.7rem 0;
+}
+
+.order .fulfillment span {
+  display: block;
+}
+
+.order .cart-discount {
+  display: block;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  font-size: 1.2rem;
+}
+
+@media screen and (min-width: 750px) {
+  .order td .cart-discount {
+    display: none;
+  }
+}
+
+.order tbody ul {
+  list-style: none;
+  font-size: 1.2rem;
+  text-align: right;
+  padding-left: 0;
+  margin-top: 1rem;
+  margin-bottom: 0;
+}
+
+@media screen and (min-width: 750px) {
+  .order tbody ul {
+    text-align: left;
+  }
+}
+
+.order table a {
+  line-height: calc(1 + 0.3 / var(--font-body-scale));
+}
+
+.order tbody tr:first-of-type td:first-of-type > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+@media screen and (min-width: 750px) {
+  .order tbody tr:first-of-type td:first-of-type > div {
+    align-items: flex-start;
+  }
+}
+
+.order .properties {
+  font-size: 1.4rem;
+  margin-top: 1rem;
+}
+
+.order .properties span {
+  display: block;
+  line-height: calc(1 + 0.2 / var(--font-body-scale));
+}
+
+.order svg {
+  width: 1.1rem;
+  color: rgb(var(--color-foreground));
+  margin-right: 0.5rem;
+}
+
+.order dl {
+  margin: 0;
+}
+
+.order dd {
+  margin-left: 0;
+  line-height: calc(1 + 0.3 / var(--font-body-scale));
+}
+
+.order dd s {
+  color: rgba(var(--color-foreground), 0.7);
+}
+
+.order .unit-price {
+  font-size: 1.1rem;
+  letter-spacing: 0.07rem;
+  line-height: calc(1 + 0.2 / var(--font-body-scale));
+  margin-top: 0.2rem;
+  text-transform: uppercase;
+  color: rgba(var(--color-foreground), 0.7);
+}
+
+.order .regular-price {
+  font-size: 1.3rem;
+}
+
+/* Addresses */
+.addresses li > button {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.addresses li > button + button,
+.addresses form button + button {
+  margin-top: 0rem;
+}
+
+@media screen and (min-width: 750px) {
+  .addresses li > button:first-of-type {
+    margin-top: 3rem;
+  }
+}
+
+.addresses form button:first-of-type {
+  margin-right: 1rem;
+}
+
+label[for='AddressCountryNew'],
+label[for='AddressProvinceNew'] {
+  display: block;
+  font-size: 1.4rem;
+  margin-bottom: 0.6rem;
+}
+
+.addresses form {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.addresses form > div {
+  width: 100%;
+  text-align: left;
+}
+
+.addresses ul {
+  list-style: none;
+  padding-left: 0;
+  text-align: center;
+}
+
+li[data-address] {
+  margin-top: 5rem;
+}
+
+.addresses [aria-expanded='false'] ~ div[id] {
+  display: none;
+}
+
+.addresses [aria-expanded='true'] ~ div[id] {
+  display: block;
+}
+
+.addresses h2 {
+  text-align: left;
+}
+
+li[data-address] > h2 {
+  text-align: center;
+  font-size: calc(var(--font-heading-scale) * 1.8rem);
+  margin-bottom: 0;
+}
+
+@media only screen and (min-width: 750px) {
+  li[data-address] > h2 {
+    font-size: calc(var(--font-heading-scale) * 2.2rem);
+  }
+}
+
+.addresses ul p {
+  margin-bottom: 0;
+}
+
+.addresses input[type='checkbox'] {
+  margin-top: 2rem;
+  margin-left: 0;
+}
+
+@media only screen and (min-width: 750px) {
+  .addresses form > div:nth-of-type(1) {
+    margin-right: 2rem;
+  }
+
+  .addresses form > div:nth-of-type(2) {
+    margin-top: 0;
+  }
+
+  .addresses form > div:nth-of-type(1),
+  .addresses form > div:nth-of-type(2) {
+    box-sizing: border-box;
+    flex-basis: calc(50% - 1rem);
+  }
+}
+
+.addresses form > div:nth-of-type(7),
+.addresses form > div:nth-of-type(7) + div[id] {
+  margin-top: 1.5rem;
+}

assets/customer.js

@@ -0,0 +1,85 @@
+const selectors = {
+  customerAddresses: '[data-customer-addresses]',
+  addressCountrySelect: '[data-address-country-select]',
+  addressContainer: '[data-address]',
+  toggleAddressButton: 'button[aria-expanded]',
+  cancelAddressButton: 'button[type="reset"]',
+  deleteAddressButton: 'button[data-confirm-message]',
+};
+
+const attributes = {
+  expanded: 'aria-expanded',
+  confirmMessage: 'data-confirm-message',
+};
+
+class CustomerAddresses {
+  constructor() {
+    this.elements = this._getElements();
+    if (Object.keys(this.elements).length === 0) return;
+    this._setupCountries();
+    this._setupEventListeners();
+  }
+
+  _getElements() {
+    const container = document.querySelector(selectors.customerAddresses);
+    return container
+      ? {
+          container,
+          addressContainer: container.querySelector(selectors.addressContainer),
+          toggleButtons: document.querySelectorAll(selectors.toggleAddressButton),
+          cancelButtons: container.querySelectorAll(selectors.cancelAddressButton),
+          deleteButtons: container.querySelectorAll(selectors.deleteAddressButton),
+          countrySelects: container.querySelectorAll(selectors.addressCountrySelect),
+        }
+      : {};
+  }
+
+  _setupCountries() {
+    if (Shopify && Shopify.CountryProvinceSelector) {
+      // eslint-disable-next-line no-new
+      new Shopify.CountryProvinceSelector('AddressCountryNew', 'AddressProvinceNew', {
+        hideElement: 'AddressProvinceContainerNew',
+      });
+      this.elements.countrySelects.forEach((select) => {
+        const formId = select.dataset.formId;
+        // eslint-disable-next-line no-new
+        new Shopify.CountryProvinceSelector(`AddressCountry_${formId}`, `AddressProvince_${formId}`, {
+          hideElement: `AddressProvinceContainer_${formId}`,
+        });
+      });
+    }
+  }
+
+  _setupEventListeners() {
+    this.elements.toggleButtons.forEach((element) => {
+      element.addEventListener('click', this._handleAddEditButtonClick);
+    });
+    this.elements.cancelButtons.forEach((element) => {
+      element.addEventListener('click', this._handleCancelButtonClick);
+    });
+    this.elements.deleteButtons.forEach((element) => {
+      element.addEventListener('click', this._handleDeleteButtonClick);
+    });
+  }
+
+  _toggleExpanded(target) {
+    target.setAttribute(attributes.expanded, (target.getAttribute(attributes.expanded) === 'false').toString());
+  }
+
+  _handleAddEditButtonClick = ({ currentTarget }) => {
+    this._toggleExpanded(currentTarget);
+  };
+
+  _handleCancelButtonClick = ({ currentTarget }) => {
+    this._toggleExpanded(currentTarget.closest(selectors.addressContainer).querySelector(`[${attributes.expanded}]`));
+  };
+
+  _handleDeleteButtonClick = ({ currentTarget }) => {
+    // eslint-disable-next-line no-alert
+    if (confirm(currentTarget.getAttribute(attributes.confirmMessage))) {
+      Shopify.postLink(currentTarget.dataset.target, {
+        parameters: { _method: 'delete' },
+      });
+    }
+  };
+}

assets/details-disclosure.js

@@ -0,0 +1,53 @@
+class DetailsDisclosure extends HTMLElement {
+  constructor() {
+    super();
+    this.mainDetailsToggle = this.querySelector('details');
+    this.content = this.mainDetailsToggle.querySelector('summary').nextElementSibling;
+
+    this.mainDetailsToggle.addEventListener('focusout', this.onFocusOut.bind(this));
+    this.mainDetailsToggle.addEventListener('toggle', this.onToggle.bind(this));
+  }
+
+  onFocusOut() {
+    setTimeout(() => {
+      if (!this.contains(document.activeElement)) this.close();
+    });
+  }
+
+  onToggle() {
+    if (!this.animations) this.animations = this.content.getAnimations();
+
+    if (this.mainDetailsToggle.hasAttribute('open')) {
+      this.animations.forEach((animation) => animation.play());
+    } else {
+      this.animations.forEach((animation) => animation.cancel());
+    }
+  }
+
+  close() {
+    this.mainDetailsToggle.removeAttribute('open');
+    this.mainDetailsToggle.querySelector('summary').setAttribute('aria-expanded', false);
+  }
+}
+
+customElements.define('details-disclosure', DetailsDisclosure);
+
+class HeaderMenu extends DetailsDisclosure {
+  constructor() {
+    super();
+    this.header = document.querySelector('.header-wrapper');
+  }
+
+  onToggle() {
+    if (!this.header) return;
+    this.header.preventHide = this.mainDetailsToggle.open;
+
+    if (document.documentElement.style.getPropertyValue('--header-bottom-position-desktop') !== '') return;
+    document.documentElement.style.setProperty(
+      '--header-bottom-position-desktop',
+      `${Math.floor(this.header.getBoundingClientRect().bottom)}px`
+    );
+  }
+}
+
+customElements.define('header-menu', HeaderMenu);

assets/details-modal.js

@@ -0,0 +1,47 @@
+class DetailsModal extends HTMLElement {
+  constructor() {
+    super();
+    this.detailsContainer = this.querySelector('details');
+    this.summaryToggle = this.querySelector('summary');
+
+    this.detailsContainer.addEventListener('keyup', (event) => event.code.toUpperCase() === 'ESCAPE' && this.close());
+    this.summaryToggle.addEventListener('click', this.onSummaryClick.bind(this));
+    this.querySelector('button[type="button"]').addEventListener('click', this.close.bind(this));
+
+    this.summaryToggle.setAttribute('role', 'button');
+  }
+
+  isOpen() {
+    return this.detailsContainer.hasAttribute('open');
+  }
+
+  onSummaryClick(event) {
+    event.preventDefault();
+    event.target.closest('details').hasAttribute('open') ? this.close() : this.open(event);
+  }
+
+  onBodyClick(event) {
+    if (!this.contains(event.target) || event.target.classList.contains('modal-overlay')) this.close(false);
+  }
+
+  open(event) {
+    this.onBodyClickEvent = this.onBodyClickEvent || this.onBodyClick.bind(this);
+    event.target.closest('details').setAttribute('open', true);
+    document.body.addEventListener('click', this.onBodyClickEvent);
+    document.body.classList.add('overflow-hidden');
+
+    trapFocus(
+      this.detailsContainer.querySelector('[tabindex="-1"]'),
+      this.detailsContainer.querySelector('input:not([type="hidden"])')
+    );
+  }
+
+  close(focusToggle = true) {
+    removeTrapFocus(focusToggle ? this.summaryToggle : null);
+    this.detailsContainer.removeAttribute('open');
+    document.body.removeEventListener('click', this.onBodyClickEvent);
+    document.body.classList.remove('overflow-hidden');
+  }
+}
+
+customElements.define('details-modal', DetailsModal);

assets/facets.js

@@ -0,0 +1,355 @@
+class FacetFiltersForm extends HTMLElement {
+  constructor() {
+    super();
+    this.onActiveFilterClick = this.onActiveFilterClick.bind(this);
+
+    this.debouncedOnSubmit = debounce((event) => {
+      this.onSubmitHandler(event);
+    }, 500);
+
+    const facetForm = this.querySelector('form');
+    facetForm.addEventListener('input', this.debouncedOnSubmit.bind(this));
+
+    const facetWrapper = this.querySelector('#FacetsWrapperDesktop');
+    if (facetWrapper) facetWrapper.addEventListener('keyup', onKeyUpEscape);
+  }
+
+  static setListeners() {
+    const onHistoryChange = (event) => {
+      const searchParams = event.state ? event.state.searchParams : FacetFiltersForm.searchParamsInitial;
+      if (searchParams === FacetFiltersForm.searchParamsPrev) return;
+      FacetFiltersForm.renderPage(searchParams, null, false);
+    };
+    window.addEventListener('popstate', onHistoryChange);
+  }
+
+  static toggleActiveFacets(disable = true) {
+    document.querySelectorAll('.js-facet-remove').forEach((element) => {
+      element.classList.toggle('disabled', disable);
+    });
+  }
+
+  static renderPage(searchParams, event, updateURLHash = true) {
+    FacetFiltersForm.searchParamsPrev = searchParams;
+    const sections = FacetFiltersForm.getSections();
+    const countContainer = document.getElementById('ProductCount');
+    const countContainerDesktop = document.getElementById('ProductCountDesktop');
+    const loadingSpinners = document.querySelectorAll(
+      '.facets-container .loading__spinner, facet-filters-form .loading__spinner'
+    );
+    loadingSpinners.forEach((spinner) => spinner.classList.remove('hidden'));
+    document.getElementById('ProductGridContainer').querySelector('.collection').classList.add('loading');
+    if (countContainer) {
+      countContainer.classList.add('loading');
+    }
+    if (countContainerDesktop) {
+      countContainerDesktop.classList.add('loading');
+    }
+
+    sections.forEach((section) => {
+      const url = `${window.location.pathname}?section_id=${section.section}&${searchParams}`;
+      const filterDataUrl = (element) => element.url === url;
+
+      FacetFiltersForm.filterData.some(filterDataUrl)
+        ? FacetFiltersForm.renderSectionFromCache(filterDataUrl, event)
+        : FacetFiltersForm.renderSectionFromFetch(url, event);
+    });
+
+    if (updateURLHash) FacetFiltersForm.updateURLHash(searchParams);
+  }
+
+  static renderSectionFromFetch(url, event) {
+    fetch(url)
+      .then((response) => response.text())
+      .then((responseText) => {
+        const html = responseText;
+        FacetFiltersForm.filterData = [...FacetFiltersForm.filterData, { html, url }];
+        FacetFiltersForm.renderFilters(html, event);
+        FacetFiltersForm.renderProductGridContainer(html);
+        FacetFiltersForm.renderProductCount(html);
+        if (typeof initializeScrollAnimationTrigger === 'function') initializeScrollAnimationTrigger(html.innerHTML);
+      });
+  }
+
+  static renderSectionFromCache(filterDataUrl, event) {
+    const html = FacetFiltersForm.filterData.find(filterDataUrl).html;
+    FacetFiltersForm.renderFilters(html, event);
+    FacetFiltersForm.renderProductGridContainer(html);
+    FacetFiltersForm.renderProductCount(html);
+    if (typeof initializeScrollAnimationTrigger === 'function') initializeScrollAnimationTrigger(html.innerHTML);
+  }
+
+  static renderProductGridContainer(html) {
+    document.getElementById('ProductGridContainer').innerHTML = new DOMParser()
+      .parseFromString(html, 'text/html')
+      .getElementById('ProductGridContainer').innerHTML;
+
+    document
+      .getElementById('ProductGridContainer')
+      .querySelectorAll('.scroll-trigger')
+      .forEach((element) => {
+        element.classList.add('scroll-trigger--cancel');
+      });
+  }
+
+  static renderProductCount(html) {
+    const count = new DOMParser().parseFromString(html, 'text/html').getElementById('ProductCount').innerHTML;
+    const container = document.getElementById('ProductCount');
+    const containerDesktop = document.getElementById('ProductCountDesktop');
+    container.innerHTML = count;
+    container.classList.remove('loading');
+    if (containerDesktop) {
+      containerDesktop.innerHTML = count;
+      containerDesktop.classList.remove('loading');
+    }
+    const loadingSpinners = document.querySelectorAll(
+      '.facets-container .loading__spinner, facet-filters-form .loading__spinner'
+    );
+    loadingSpinners.forEach((spinner) => spinner.classList.add('hidden'));
+  }
+
+  static renderFilters(html, event) {
+    const parsedHTML = new DOMParser().parseFromString(html, 'text/html');
+    const facetDetailsElementsFromFetch = parsedHTML.querySelectorAll(
+      '#FacetFiltersForm .js-filter, #FacetFiltersFormMobile .js-filter, #FacetFiltersPillsForm .js-filter'
+    );
+    const facetDetailsElementsFromDom = document.querySelectorAll(
+      '#FacetFiltersForm .js-filter, #FacetFiltersFormMobile .js-filter, #FacetFiltersPillsForm .js-filter'
+    );
+
+    // Remove facets that are no longer returned from the server
+    Array.from(facetDetailsElementsFromDom).forEach((currentElement) => {
+      if (!Array.from(facetDetailsElementsFromFetch).some(({ id }) => currentElement.id === id)) {
+        currentElement.remove();
+      }
+    });
+
+    const matchesId = (element) => {
+      const jsFilter = event ? event.target.closest('.js-filter') : undefined;
+      return jsFilter ? element.id === jsFilter.id : false;
+    };
+    const facetsToRender = Array.from(facetDetailsElementsFromFetch).filter((element) => !matchesId(element));
+    const countsToRender = Array.from(facetDetailsElementsFromFetch).find(matchesId);
+
+    facetsToRender.forEach((elementToRender, index) => {
+      const currentElement = document.getElementById(elementToRender.id);
+      // Element already rendered in the DOM so just update the innerHTML
+      if (currentElement) {
+        document.getElementById(elementToRender.id).innerHTML = elementToRender.innerHTML;
+      } else {
+        if (index > 0) {
+          const { className: previousElementClassName, id: previousElementId } = facetsToRender[index - 1];
+          // Same facet type (eg horizontal/vertical or drawer/mobile)
+          if (elementToRender.className === previousElementClassName) {
+            document.getElementById(previousElementId).after(elementToRender);
+            return;
+          }
+        }
+
+        if (elementToRender.parentElement) {
+          document.querySelector(`#${elementToRender.parentElement.id} .js-filter`).before(elementToRender);
+        }
+      }
+    });
+
+    FacetFiltersForm.renderActiveFacets(parsedHTML);
+    FacetFiltersForm.renderAdditionalElements(parsedHTML);
+
+    if (countsToRender) {
+      const closestJSFilterID = event.target.closest('.js-filter').id;
+
+      if (closestJSFilterID) {
+        FacetFiltersForm.renderCounts(countsToRender, event.target.closest('.js-filter'));
+        FacetFiltersForm.renderMobileCounts(countsToRender, document.getElementById(closestJSFilterID));
+
+        const newFacetDetailsElement = document.getElementById(closestJSFilterID);
+        const newElementSelector = newFacetDetailsElement.classList.contains('mobile-facets__details')
+          ? `.mobile-facets__close-button`
+          : `.facets__summary`;
+        const newElementToActivate = newFacetDetailsElement.querySelector(newElementSelector);
+        if (newElementToActivate) newElementToActivate.focus();
+      }
+    }
+  }
+
+  static renderActiveFacets(html) {
+    const activeFacetElementSelectors = ['.active-facets-mobile', '.active-facets-desktop'];
+
+    activeFacetElementSelectors.forEach((selector) => {
+      const activeFacetsElement = html.querySelector(selector);
+      if (!activeFacetsElement) return;
+      document.querySelector(selector).innerHTML = activeFacetsElement.innerHTML;
+    });
+
+    FacetFiltersForm.toggleActiveFacets(false);
+  }
+
+  static renderAdditionalElements(html) {
+    const mobileElementSelectors = ['.mobile-facets__open', '.mobile-facets__count', '.sorting'];
+
+    mobileElementSelectors.forEach((selector) => {
+      if (!html.querySelector(selector)) return;
+      document.querySelector(selector).innerHTML = html.querySelector(selector).innerHTML;
+    });
+
+    document.getElementById('FacetFiltersFormMobile').closest('menu-drawer').bindEvents();
+  }
+
+  static renderCounts(source, target) {
+    const targetSummary = target.querySelector('.facets__summary');
+    const sourceSummary = source.querySelector('.facets__summary');
+
+    if (sourceSummary && targetSummary) {
+      targetSummary.outerHTML = sourceSummary.outerHTML;
+    }
+
+    const targetHeaderElement = target.querySelector('.facets__header');
+    const sourceHeaderElement = source.querySelector('.facets__header');
+
+    if (sourceHeaderElement && targetHeaderElement) {
+      targetHeaderElement.outerHTML = sourceHeaderElement.outerHTML;
+    }
+
+    const targetWrapElement = target.querySelector('.facets-wrap');
+    const sourceWrapElement = source.querySelector('.facets-wrap');
+
+    if (sourceWrapElement && targetWrapElement) {
+      const isShowingMore = Boolean(target.querySelector('show-more-button .label-show-more.hidden'));
+      if (isShowingMore) {
+        sourceWrapElement
+          .querySelectorAll('.facets__item.hidden')
+          .forEach((hiddenItem) => hiddenItem.classList.replace('hidden', 'show-more-item'));
+      }
+
+      targetWrapElement.outerHTML = sourceWrapElement.outerHTML;
+    }
+  }
+
+  static renderMobileCounts(source, target) {
+    const targetFacetsList = target.querySelector('.mobile-facets__list');
+    const sourceFacetsList = source.querySelector('.mobile-facets__list');
+
+    if (sourceFacetsList && targetFacetsList) {
+      targetFacetsList.outerHTML = sourceFacetsList.outerHTML;
+    }
+  }
+
+  static updateURLHash(searchParams) {
+    history.pushState({ searchParams }, '', `${window.location.pathname}${searchParams && '?'.concat(searchParams)}`);
+  }
+
+  static getSections() {
+    return [
+      {
+        section: document.getElementById('product-grid').dataset.id,
+      },
+    ];
+  }
+
+  createSearchParams(form) {
+    const formData = new FormData(form);
+    return new URLSearchParams(formData).toString();
+  }
+
+  onSubmitForm(searchParams, event) {
+    FacetFiltersForm.renderPage(searchParams, event);
+  }
+
+  onSubmitHandler(event) {
+    event.preventDefault();
+    const sortFilterForms = document.querySelectorAll('facet-filters-form form');
+    if (event.srcElement.className == 'mobile-facets__checkbox') {
+      const searchParams = this.createSearchParams(event.target.closest('form'));
+      this.onSubmitForm(searchParams, event);
+    } else {
+      const forms = [];
+      const isMobile = event.target.closest('form').id === 'FacetFiltersFormMobile';
+
+      sortFilterForms.forEach((form) => {
+        if (!isMobile) {
+          if (form.id === 'FacetSortForm' || form.id === 'FacetFiltersForm' || form.id === 'FacetSortDrawerForm') {
+            const noJsElements = document.querySelectorAll('.no-js-list');
+            noJsElements.forEach((el) => el.remove());
+            forms.push(this.createSearchParams(form));
+          }
+        } else if (form.id === 'FacetFiltersFormMobile') {
+          forms.push(this.createSearchParams(form));
+        }
+      });
+      this.onSubmitForm(forms.join('&'), event);
+    }
+  }
+
+  onActiveFilterClick(event) {
+    event.preventDefault();
+    FacetFiltersForm.toggleActiveFacets();
+    const url =
+      event.currentTarget.href.indexOf('?') == -1
+        ? ''
+        : event.currentTarget.href.slice(event.currentTarget.href.indexOf('?') + 1);
+    FacetFiltersForm.renderPage(url);
+  }
+}
+
+FacetFiltersForm.filterData = [];
+FacetFiltersForm.searchParamsInitial = window.location.search.slice(1);
+FacetFiltersForm.searchParamsPrev = window.location.search.slice(1);
+customElements.define('facet-filters-form', FacetFiltersForm);
+FacetFiltersForm.setListeners();
+
+class PriceRange extends HTMLElement {
+  constructor() {
+    super();
+    this.querySelectorAll('input').forEach((element) =>
+      element.addEventListener('change', this.onRangeChange.bind(this))
+    );
+    this.setMinAndMaxValues();
+  }
+
+  onRangeChange(event) {
+    this.adjustToValidValues(event.currentTarget);
+    this.setMinAndMaxValues();
+  }
+
+  setMinAndMaxValues() {
+    const inputs = this.querySelectorAll('input');
+    const minInput = inputs[0];
+    const maxInput = inputs[1];
+    if (maxInput.value) minInput.setAttribute('max', maxInput.value);
+    if (minInput.value) maxInput.setAttribute('min', minInput.value);
+    if (minInput.value === '') maxInput.setAttribute('min', 0);
+    if (maxInput.value === '') minInput.setAttribute('max', maxInput.getAttribute('max'));
+  }
+
+  adjustToValidValues(input) {
+    const value = Number(input.value);
+    const min = Number(input.getAttribute('min'));
+    const max = Number(input.getAttribute('max'));
+
+    if (value < min) input.value = min;
+    if (value > max) input.value = max;
+  }
+}
+
+customElements.define('price-range', PriceRange);
+
+class FacetRemove extends HTMLElement {
+  constructor() {
+    super();
+    const facetLink = this.querySelector('a');
+    facetLink.setAttribute('role', 'button');
+    facetLink.addEventListener('click', this.closeFilter.bind(this));
+    facetLink.addEventListener('keyup', (event) => {
+      event.preventDefault();
+      if (event.code.toUpperCase() === 'SPACE') this.closeFilter(event);
+    });
+  }
+
+  closeFilter(event) {
+    event.preventDefault();
+    const form = this.closest('facet-filters-form') || document.querySelector('facet-filters-form');
+    form.onActiveFilterClick(event);
+  }
+}
+
+customElements.define('facet-remove', FacetRemove);

assets/localization-form.js

@@ -0,0 +1,199 @@
+if (!customElements.get('localization-form')) {
+  customElements.define(
+    'localization-form',
+    class LocalizationForm extends HTMLElement {
+      constructor() {
+        super();
+        this.mql = window.matchMedia('(min-width: 750px)');
+        this.header = document.querySelector('.header-wrapper');
+        this.elements = {
+          input: this.querySelector('input[name="locale_code"], input[name="country_code"]'),
+          button: this.querySelector('button.localization-form__select'),
+          panel: this.querySelector('.disclosure__list-wrapper'),
+          search: this.querySelector('input[name="country_filter"]'),
+          closeButton: this.querySelector('.country-selector__close-button'),
+          resetButton: this.querySelector('.country-filter__reset-button'),
+          searchIcon: this.querySelector('.country-filter__search-icon'),
+          liveRegion: this.querySelector('#sr-country-search-results'),
+        };
+        this.addEventListener('keyup', this.onContainerKeyUp.bind(this));
+        this.addEventListener('keydown', this.onContainerKeyDown.bind(this));
+        this.addEventListener('focusout', this.closeSelector.bind(this));
+        this.elements.button.addEventListener('click', this.openSelector.bind(this));
+
+        if (this.elements.search) {
+          this.elements.search.addEventListener('keyup', this.filterCountries.bind(this));
+          this.elements.search.addEventListener('focus', this.onSearchFocus.bind(this));
+          this.elements.search.addEventListener('blur', this.onSearchBlur.bind(this));
+          this.elements.search.addEventListener('keydown', this.onSearchKeyDown.bind(this));
+        }
+        if (this.elements.closeButton) {
+          this.elements.closeButton.addEventListener('click', this.hidePanel.bind(this));
+        }
+        if (this.elements.resetButton) {
+          this.elements.resetButton.addEventListener('click', this.resetFilter.bind(this));
+          this.elements.resetButton.addEventListener('mousedown', (event) => event.preventDefault());
+        }
+
+        this.querySelectorAll('a').forEach((item) => item.addEventListener('click', this.onItemClick.bind(this)));
+      }
+
+      hidePanel() {
+        this.elements.button.setAttribute('aria-expanded', 'false');
+        this.elements.panel.setAttribute('hidden', true);
+        if (this.elements.search) {
+          this.elements.search.value = '';
+          this.filterCountries();
+          this.elements.search.setAttribute('aria-activedescendant', '');
+        }
+        document.body.classList.remove('overflow-hidden-mobile');
+        document.querySelector('.menu-drawer').classList.remove('country-selector-open');
+        this.header.preventHide = false;
+      }
+
+      onContainerKeyDown(event) {
+        const focusableItems = Array.from(this.querySelectorAll('a')).filter(
+          (item) => !item.parentElement.classList.contains('hidden')
+        );
+        let focusedItemIndex = focusableItems.findIndex((item) => item === document.activeElement);
+        let itemToFocus;
+
+        switch (event.code.toUpperCase()) {
+          case 'ARROWUP':
+            event.preventDefault();
+            itemToFocus =
+              focusedItemIndex > 0 ? focusableItems[focusedItemIndex - 1] : focusableItems[focusableItems.length - 1];
+            itemToFocus.focus();
+            break;
+          case 'ARROWDOWN':
+            event.preventDefault();
+            itemToFocus =
+              focusedItemIndex < focusableItems.length - 1 ? focusableItems[focusedItemIndex + 1] : focusableItems[0];
+            itemToFocus.focus();
+            break;
+        }
+
+        if (!this.elements.search) return;
+
+        setTimeout(() => {
+          focusedItemIndex = focusableItems.findIndex((item) => item === document.activeElement);
+          if (focusedItemIndex > -1) {
+            this.elements.search.setAttribute('aria-activedescendant', focusableItems[focusedItemIndex].id);
+          } else {
+            this.elements.search.setAttribute('aria-activedescendant', '');
+          }
+        });
+      }
+
+      onContainerKeyUp(event) {
+        event.preventDefault();
+
+        switch (event.code.toUpperCase()) {
+          case 'ESCAPE':
+            if (this.elements.button.getAttribute('aria-expanded') == 'false') return;
+            this.hidePanel();
+            event.stopPropagation();
+            this.elements.button.focus();
+            break;
+          case 'SPACE':
+            if (this.elements.button.getAttribute('aria-expanded') == 'true') return;
+            this.openSelector();
+            break;
+        }
+      }
+
+      onItemClick(event) {
+        event.preventDefault();
+        const form = this.querySelector('form');
+        this.elements.input.value = event.currentTarget.dataset.value;
+        if (form) form.submit();
+      }
+
+      openSelector() {
+        this.elements.button.focus();
+        this.elements.panel.toggleAttribute('hidden');
+        this.elements.button.setAttribute(
+          'aria-expanded',
+          (this.elements.button.getAttribute('aria-expanded') === 'false').toString()
+        );
+        if (!document.body.classList.contains('overflow-hidden-tablet')) {
+          document.body.classList.add('overflow-hidden-mobile');
+        }
+        if (this.elements.search && this.mql.matches) {
+          this.elements.search.focus();
+        }
+        if (this.hasAttribute('data-prevent-hide')) {
+          this.header.preventHide = true;
+        }
+        document.querySelector('.menu-drawer').classList.add('country-selector-open');
+      }
+
+      closeSelector(event) {
+        if (
+          event.target.classList.contains('country-selector__overlay') ||
+          !this.contains(event.target) ||
+          !this.contains(event.relatedTarget)
+        ) {
+          this.hidePanel();
+        }
+      }
+
+      filterCountries() {
+        const searchValue = this.elements.search.value.toLowerCase();
+        const popularCountries = this.querySelector('.popular-countries');
+        const allCountries = this.querySelectorAll('a');
+        let visibleCountries = allCountries.length;
+
+        this.elements.resetButton.classList.toggle('hidden', !searchValue);
+
+        if (popularCountries) {
+          popularCountries.classList.toggle('hidden', searchValue);
+        }
+
+        allCountries.forEach((item) => {
+          const countryName = item.querySelector('.country').textContent.toLowerCase();
+          if (countryName.indexOf(searchValue) > -1) {
+            item.parentElement.classList.remove('hidden');
+            visibleCountries++;
+          } else {
+            item.parentElement.classList.add('hidden');
+            visibleCountries--;
+          }
+        });
+
+        if (this.elements.liveRegion) {
+          this.elements.liveRegion.innerHTML = window.accessibilityStrings.countrySelectorSearchCount.replace(
+            '[count]',
+            visibleCountries
+          );
+        }
+
+        this.querySelector('.country-selector').scrollTop = 0;
+        this.querySelector('.country-selector__list').scrollTop = 0;
+      }
+
+      resetFilter(event) {
+        event.stopPropagation();
+        this.elements.search.value = '';
+        this.filterCountries();
+        this.elements.search.focus();
+      }
+
+      onSearchFocus() {
+        this.elements.searchIcon.classList.add('country-filter__search-icon--hidden');
+      }
+
+      onSearchBlur() {
+        if (!this.elements.search.value) {
+          this.elements.searchIcon.classList.remove('country-filter__search-icon--hidden');
+        }
+      }
+
+      onSearchKeyDown(event) {
+        if (event.code.toUpperCase() === 'ENTER') {
+          event.preventDefault();
+        }
+      }
+    }
+  );
+}

assets/magnify.js

@@ -0,0 +1,63 @@
+// create a container and set the full-size image as its background
+function createOverlay(image) {
+  const overlayImage = document.createElement('img');
+  overlayImage.setAttribute('src', `${image.src}`);
+  overlay = document.createElement('div');
+  prepareOverlay(overlay, overlayImage);
+
+  image.style.opacity = '50%';
+  toggleLoadingSpinner(image);
+
+  overlayImage.onload = () => {
+    toggleLoadingSpinner(image);
+    image.parentElement.insertBefore(overlay, image);
+    image.style.opacity = '100%';
+  };
+
+  return overlay;
+}
+
+function prepareOverlay(container, image) {
+  container.setAttribute('class', 'image-magnify-full-size');
+  container.setAttribute('aria-hidden', 'true');
+  container.style.backgroundImage = `url('${image.src}')`;
+  container.style.backgroundColor = 'var(--gradient-background)';
+}
+
+function toggleLoadingSpinner(image) {
+  const loadingSpinner = image.parentElement.parentElement.querySelector(`.loading__spinner`);
+  loadingSpinner.classList.toggle('hidden');
+}
+
+function moveWithHover(image, event, zoomRatio) {
+  // calculate mouse position
+  const ratio = image.height / image.width;
+  const container = event.target.getBoundingClientRect();
+  const xPosition = event.clientX - container.left;
+  const yPosition = event.clientY - container.top;
+  const xPercent = `${xPosition / (image.clientWidth / 100)}%`;
+  const yPercent = `${yPosition / ((image.clientWidth * ratio) / 100)}%`;
+
+  // determine what to show in the frame
+  overlay.style.backgroundPosition = `${xPercent} ${yPercent}`;
+  overlay.style.backgroundSize = `${image.width * zoomRatio}px`;
+}
+
+function magnify(image, zoomRatio) {
+  const overlay = createOverlay(image);
+  overlay.onclick = () => overlay.remove();
+  overlay.onmousemove = (event) => moveWithHover(image, event, zoomRatio);
+  overlay.onmouseleave = () => overlay.remove();
+}
+
+function enableZoomOnHover(zoomRatio) {
+  const images = document.querySelectorAll('.image-magnify-hover');
+  images.forEach((image) => {
+    image.onclick = (event) => {
+      magnify(image, zoomRatio);
+      moveWithHover(image, event, zoomRatio);
+    };
+  });
+}
+
+enableZoomOnHover(2);

assets/main-search.js

@@ -0,0 +1,45 @@
+class MainSearch extends SearchForm {
+  constructor() {
+    super();
+    this.allSearchInputs = document.querySelectorAll('input[type="search"]');
+    this.setupEventListeners();
+  }
+
+  setupEventListeners() {
+    let allSearchForms = [];
+    this.allSearchInputs.forEach((input) => allSearchForms.push(input.form));
+    this.input.addEventListener('focus', this.onInputFocus.bind(this));
+    if (allSearchForms.length < 2) return;
+    allSearchForms.forEach((form) => form.addEventListener('reset', this.onFormReset.bind(this)));
+    this.allSearchInputs.forEach((input) => input.addEventListener('input', this.onInput.bind(this)));
+  }
+
+  onFormReset(event) {
+    super.onFormReset(event);
+    if (super.shouldResetForm()) {
+      this.keepInSync('', this.input);
+    }
+  }
+
+  onInput(event) {
+    const target = event.target;
+    this.keepInSync(target.value, target);
+  }
+
+  onInputFocus() {
+    const isSmallScreen = window.innerWidth < 750;
+    if (isSmallScreen) {
+      this.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
+
+  keepInSync(value, target) {
+    this.allSearchInputs.forEach((input) => {
+      if (input !== target) {
+        input.value = value;
+      }
+    });
+  }
+}
+
+customElements.define('main-search', MainSearch);

assets/mask-blobs.css

@@ -0,0 +1,8 @@
+:root {
+    --shape--blob-1: 97.686% 33.617%, 98.392% 36.152%, 98.960% 38.721%, 99.398% 41.315%, 99.712% 43.928%, 99.909% 46.552%, 99.995% 49.182%, 99.974% 51.813%, 99.852% 54.441%, 99.630% 57.063%, 99.311% 59.675%, 98.897% 62.274%, 98.389% 64.856%, 97.787% 67.417%, 97.091% 69.955%, 96.299% 72.464%, 95.411% 74.941%, 94.422% 77.379%, 93.329% 79.773%, 92.127% 82.114%, 90.812% 84.393%, 89.377% 86.598%, 87.813% 88.714%, 86.114% 90.723%, 84.272% 92.600%, 82.279% 94.317%, 80.125% 95.828%, 77.832% 97.117%, 75.423% 98.172%, 72.920% 98.983%, 70.352% 99.552%, 67.743% 99.887%, 65.115% 100.000%, 62.485% 99.907%, 59.869% 99.627%, 57.277% 99.176%, 54.717% 98.571%, 52.193% 97.825%, 49.711% 96.954%, 47.271% 95.967%, 44.877% 94.876%, 42.529% 93.689%, 40.227% 92.414%, 37.972% 91.058%, 35.764% 89.626%, 33.604% 88.123%, 31.491% 86.555%, 29.426% 84.924%, 27.410% 83.234%, 25.441% 81.487%, 23.522% 79.687%, 21.651% 77.836%, 19.832% 75.935%, 18.064% 73.986%, 16.350% 71.990%, 14.691% 69.947%, 13.090% 67.859%, 11.549% 65.726%, 10.073% 63.547%, 8.665% 61.324%, 7.331% 59.056%, 6.076% 56.744%, 4.907% 54.386%, 3.832% 51.984%, 2.861% 49.539%, 2.006% 47.050%, 1.280% 44.521%, 0.699% 41.955%, 0.280% 39.358%, 0.044% 36.738%, 0.014% 34.107%, 0.212% 31.484%, 0.660% 28.892%, 1.371% 26.359%, 2.338% 23.913%, 3.540% 21.574%, 4.951% 19.354%, 6.546% 17.261%, 8.300% 15.300%, 10.191% 13.471%, 12.199% 11.771%, 14.307% 10.197%, 16.502% 8.746%, 18.771% 7.414%, 21.104% 6.198%, 23.493% 5.094%, 25.930% 4.101%, 28.408% 3.217%, 30.922% 2.439%, 33.466% 1.768%, 36.036% 1.203%, 38.627% 0.744%, 41.235% 0.394%, 43.855% 0.152%, 46.483% 0.023%, 49.114% 0.008%, 51.744% 0.103%, 54.366% 0.315%, 56.977% 0.648%, 59.569% 1.100%, 62.137% 1.672%, 64.676% 2.363%, 67.179% 3.173%, 69.642% 4.101%, 72.056% 5.147%, 74.416% 6.310%, 76.715% 7.590%, 78.946% 8.985%, 81.102% 10.494%, 83.174% 12.115%, 85.156% 13.846%, 87.039% 15.684%, 88.815% 17.625%, 90.477% 19.664%, 92.017% 21.797%, 93.429% 24.017%, 94.707% 26.318%, 95.844% 28.690%, 96.838% 31.126%, 97.686% 33.617%;
+    --shape--blob-2: 85.349% 11.712%, 87.382% 13.587%, 89.228% 15.647%, 90.886% 17.862%, 92.359% 20.204%, 93.657% 22.647%, 94.795% 25.169%, 95.786% 27.752%, 96.645% 30.382%, 97.387% 33.048%, 98.025% 35.740%, 98.564% 38.454%, 99.007% 41.186%, 99.358% 43.931%, 99.622% 46.685%, 99.808% 49.446%, 99.926% 52.210%, 99.986% 54.977%, 99.999% 57.744%, 99.975% 60.511%, 99.923% 63.278%, 99.821% 66.043%, 99.671% 68.806%, 99.453% 71.565%, 99.145% 74.314%, 98.724% 77.049%, 98.164% 79.759%, 97.433% 82.427%, 96.495% 85.030%, 95.311% 87.529%, 93.841% 89.872%, 92.062% 91.988%, 89.972% 93.796%, 87.635% 95.273%, 85.135% 96.456%, 82.532% 97.393%, 79.864% 98.127%, 77.156% 98.695%, 74.424% 99.129%, 71.676% 99.452%, 68.918% 99.685%, 66.156% 99.844%, 63.390% 99.942%, 60.624% 99.990%, 57.856% 99.999%, 55.089% 99.978%, 52.323% 99.929%, 49.557% 99.847%, 46.792% 99.723%, 44.031% 99.549%, 41.273% 99.317%, 38.522% 99.017%, 35.781% 98.639%, 33.054% 98.170%, 30.347% 97.599%, 27.667% 96.911%, 25.024% 96.091%, 22.432% 95.123%, 19.907% 93.994%, 17.466% 92.690%, 15.126% 91.216%, 12.902% 89.569%, 10.808% 87.761%, 8.854% 85.803%, 7.053% 83.703%, 5.418% 81.471%, 3.962% 79.119%, 2.702% 76.656%, 1.656% 74.095%, 0.846% 71.450%, 0.294% 68.740%, 0.024% 65.987%, 0.050% 63.221%, 0.343% 60.471%, 0.858% 57.752%, 1.548% 55.073%, 2.370% 52.431%, 3.283% 49.819%, 4.253% 47.227%, 5.249% 44.646%, 6.244% 42.063%, 7.211% 39.471%, 8.124% 36.858%, 8.958% 34.220%, 9.711% 31.558%, 10.409% 28.880%, 11.083% 26.196%, 11.760% 23.513%, 12.474% 20.839%, 13.259% 18.186%, 14.156% 15.569%, 15.214% 13.012%, 16.485% 10.556%, 18.028% 8.261%, 19.883% 6.211%, 22.041% 4.484%, 24.440% 3.110%, 26.998% 2.057%, 29.651% 1.275%, 32.360% 0.714%, 35.101% 0.337%, 37.859% 0.110%, 40.624% 0.009%, 43.391% 0.016%, 46.156% 0.113%, 48.918% 0.289%, 51.674% 0.533%, 54.425% 0.837%, 57.166% 1.215%, 59.898% 1.654%, 62.618% 2.163%, 65.322% 2.750%, 68.006% 3.424%, 70.662% 4.197%, 73.284% 5.081%, 75.860% 6.091%, 78.376% 7.242%, 80.813% 8.551%, 83.148% 10.036%, 85.349% 11.712%;
+    --shape--blob-3: 78.621% 12.736%, 80.746% 14.354%, 82.710% 16.163%, 84.520% 18.127%, 86.187% 20.215%, 87.721% 22.401%, 89.134% 24.668%, 90.437% 27.000%, 91.639% 29.386%, 92.748% 31.816%, 93.770% 34.284%, 94.714% 36.783%, 95.583% 39.309%, 96.382% 41.858%, 97.112% 44.428%, 97.770% 47.017%, 98.353% 49.624%, 98.858% 52.248%, 99.279% 54.886%, 99.611% 57.536%, 99.847% 60.197%, 99.977% 62.865%, 99.991% 65.537%, 99.879% 68.205%, 99.626% 70.865%, 99.217% 73.504%, 98.635% 76.111%, 97.863% 78.668%, 96.879% 81.151%, 95.683% 83.538%, 94.291% 85.818%, 92.717% 87.976%, 90.974% 89.999%, 89.075% 91.878%, 87.033% 93.599%, 84.860% 95.151%, 82.567% 96.520%, 80.167% 97.692%, 77.673% 98.647%, 75.100% 99.364%, 72.469% 99.819%, 69.805% 99.997%, 67.136% 99.893%, 64.491% 99.529%, 61.884% 98.946%, 59.324% 98.186%, 56.807% 97.290%, 54.329% 96.293%, 51.880% 95.225%, 49.451% 94.114%, 47.030% 92.984%, 44.607% 91.858%, 42.173% 90.757%, 39.719% 89.701%, 37.245% 88.695%, 34.756% 87.723%, 32.263% 86.763%, 29.775% 85.790%, 27.301% 84.782%, 24.852% 83.715%, 22.441% 82.564%, 20.085% 81.306%, 17.802% 79.919%, 15.615% 78.386%, 13.549% 76.694%, 11.627% 74.839%, 9.875% 72.824%, 8.296% 70.669%, 6.878% 68.406%, 5.612% 66.054%, 4.489% 63.630%, 3.502% 61.148%, 2.645% 58.618%, 1.914% 56.049%, 1.304% 53.448%, 0.812% 50.823%, 0.437% 48.178%, 0.177% 45.519%, 0.033% 42.852%, 0.004% 40.181%, 0.091% 37.511%, 0.299% 34.847%, 0.634% 32.197%, 1.088% 29.565%, 1.657% 26.955%, 2.344% 24.374%, 3.150% 21.827%, 4.078% 19.322%, 5.133% 16.868%, 6.321% 14.475%, 7.651% 12.159%, 9.134% 9.937%, 10.780% 7.835%, 12.604% 5.883%, 14.615% 4.127%, 16.820% 2.622%, 19.214% 1.442%, 21.758% 0.633%, 24.387% 0.168%, 27.052% 0.002%, 29.721% 0.082%, 32.378% 0.357%, 35.016% 0.781%, 37.632% 1.318%, 40.231% 1.936%, 42.817% 2.607%, 45.396% 3.304%, 47.975% 4.002%, 50.561% 4.673%, 53.163% 5.278%, 55.778% 5.822%, 58.401% 6.329%, 61.027% 6.821%, 63.650% 7.326%, 66.264% 7.878%, 68.858% 8.515%, 71.418% 9.281%, 73.919% 10.217%, 76.332% 11.362%, 78.621% 12.736%;
+    --shape--blob-4: 80.628% 3.397%, 82.907% 4.713%, 85.051% 6.239%, 87.055% 7.945%, 88.916% 9.806%, 90.636% 11.799%, 92.213% 13.907%, 93.650% 16.112%, 94.946% 18.403%, 96.102% 20.768%, 97.115% 23.198%, 97.983% 25.683%, 98.702% 28.215%, 99.256% 30.788%, 99.652% 33.390%, 99.898% 36.011%, 99.998% 38.642%, 99.953% 41.274%, 99.765% 43.899%, 99.436% 46.511%, 98.966% 49.101%, 98.355% 51.662%, 97.602% 54.184%, 96.703% 56.658%, 95.658% 59.074%, 94.459% 61.417%, 93.104% 63.674%, 91.610% 65.841%, 89.994% 67.919%, 88.274% 69.912%, 86.469% 71.828%, 84.595% 73.677%, 82.668% 75.471%, 80.701% 77.221%, 78.709% 78.941%, 76.701% 80.644%, 74.690% 82.343%, 72.683% 84.048%, 70.680% 85.756%, 68.669% 87.455%, 66.637% 89.129%, 64.575% 90.765%, 62.468% 92.344%, 60.307% 93.847%, 58.080% 95.251%, 55.778% 96.528%, 53.396% 97.648%, 50.934% 98.576%, 48.398% 99.281%, 45.809% 99.751%, 43.186% 99.976%, 40.555% 99.967%, 37.933% 99.738%, 35.337% 99.303%, 32.781% 98.675%, 30.276% 97.865%, 27.834% 96.884%, 25.462% 95.741%, 23.171% 94.446%, 20.969% 93.004%, 18.866% 91.420%, 16.874% 89.700%, 14.991% 87.861%, 13.220% 85.913%, 11.560% 83.870%, 10.011% 81.742%, 8.574% 79.537%, 7.246% 77.263%, 6.029% 74.929%, 4.921% 72.541%, 3.923% 70.106%, 3.034% 67.628%, 2.256% 65.113%, 1.587% 62.566%, 1.033% 59.993%, 0.595% 57.397%, 0.275% 54.784%, 0.076% 52.159%, 0.001% 49.528%, 0.052% 46.896%, 0.236% 44.270%, 0.556% 41.657%, 1.019% 39.066%, 1.631% 36.506%, 2.398% 33.988%, 3.328% 31.525%, 4.412% 29.127%, 5.654% 26.806%, 7.044% 24.570%, 8.571% 22.426%, 10.224% 20.378%, 11.993% 18.429%, 13.868% 16.581%, 15.840% 14.837%, 17.900% 13.198%, 20.041% 11.666%, 22.255% 10.243%, 24.540% 8.937%, 26.891% 7.752%, 29.296% 6.680%, 31.746% 5.718%, 34.235% 4.860%, 36.755% 4.099%, 39.300% 3.427%, 41.865% 2.833%, 44.444% 2.306%, 47.035% 1.836%, 49.633% 1.412%, 52.237% 1.025%, 54.847% 0.677%, 57.463% 0.383%, 60.086% 0.162%, 62.715% 0.029%, 65.348% 0.006%, 67.978% 0.112%, 70.597% 0.372%, 73.193% 0.808%, 75.747% 1.446%, 78.234% 2.304%, 80.628% 3.397%;
+    --shape--blob-5: 80.452% 2.197%, 82.761% 3.507%, 84.885% 5.101%, 86.818% 6.922%, 88.568% 8.920%, 90.147% 11.056%, 91.569% 13.300%, 92.848% 15.628%, 93.997% 18.023%, 95.026% 20.472%, 95.944% 22.966%, 96.759% 25.494%, 97.476% 28.053%, 98.100% 30.635%, 98.634% 33.238%, 99.082% 35.856%, 99.444% 38.489%, 99.714% 41.132%, 99.893% 43.782%, 99.986% 46.438%, 99.992% 49.094%, 99.909% 51.750%, 99.736% 54.401%, 99.472% 57.045%, 99.113% 59.677%, 98.656% 62.294%, 98.098% 64.892%, 97.435% 67.465%, 96.663% 70.007%, 95.776% 72.511%, 94.769% 74.969%, 93.636% 77.373%, 92.372% 79.709%, 90.970% 81.966%, 89.423% 84.125%, 87.728% 86.170%, 85.898% 88.095%, 83.943% 89.894%, 81.873% 91.560%, 79.701% 93.088%, 77.435% 94.475%, 75.087% 95.718%, 72.666% 96.811%, 70.182% 97.753%, 67.645% 98.540%, 65.063% 99.165%, 62.446% 99.622%, 59.804% 99.904%, 57.150% 100.000%, 54.495% 99.900%, 51.855% 99.607%, 49.242% 99.128%, 46.668% 98.471%, 44.142% 97.651%, 41.669% 96.680%, 39.254% 95.572%, 36.900% 94.342%, 34.605% 93.002%, 32.370% 91.566%, 30.193% 90.044%, 28.067% 88.450%, 25.999% 86.782%, 23.993% 85.040%, 22.054% 83.224%, 20.182% 81.338%, 18.380% 79.387%, 16.644% 77.375%, 14.972% 75.310%, 13.360% 73.198%, 11.802% 71.046%, 10.288% 68.863%, 8.816% 66.651%, 7.404% 64.400%, 6.063% 62.107%, 4.809% 59.765%, 3.656% 57.371%, 2.624% 54.923%, 1.730% 52.421%, 0.998% 49.868%, 0.451% 47.268%, 0.112% 44.634%, 0.000% 41.980%, 0.117% 39.327%, 0.446% 36.691%, 0.976% 34.088%, 1.696% 31.531%, 2.600% 29.033%, 3.682% 26.607%, 4.941% 24.268%, 6.375% 22.032%, 7.986% 19.921%, 9.775% 17.957%, 11.743% 16.173%, 13.876% 14.591%, 16.156% 13.229%, 18.548% 12.073%, 21.017% 11.094%, 23.538% 10.255%, 26.091% 9.521%, 28.664% 8.858%, 31.248% 8.240%, 33.837% 7.642%, 36.426% 7.045%, 39.011% 6.431%, 41.589% 5.787%, 44.157% 5.109%, 46.720% 4.407%, 49.281% 3.701%, 51.846% 3.006%, 54.418% 2.339%, 57.001% 1.717%, 59.598% 1.157%, 62.212% 0.680%, 64.842% 0.309%, 67.488% 0.072%, 70.144% 0.002%, 72.797% 0.137%, 75.424% 0.521%, 77.992% 1.197%, 80.452% 2.197%;
+    --shape--blob-6: 71.914% 1.829%, 74.287% 2.884%, 76.559% 4.144%, 78.723% 5.581%, 80.777% 7.171%, 82.721% 8.894%, 84.557% 10.733%, 86.284% 12.673%, 87.906% 14.703%, 89.423% 16.812%, 90.838% 18.991%, 92.151% 21.233%, 93.364% 23.531%, 94.477% 25.878%, 95.492% 28.270%, 96.406% 30.702%, 97.222% 33.169%, 97.938% 35.666%, 98.555% 38.190%, 99.069% 40.737%, 99.476% 43.303%, 99.771% 45.884%, 99.948% 48.476%, 99.999% 51.073%, 99.914% 53.670%, 99.680% 56.257%, 99.287% 58.825%, 98.717% 61.360%, 97.957% 63.844%, 96.984% 66.252%, 95.807% 68.567%, 94.448% 70.781%, 92.930% 72.889%, 91.273% 74.890%, 89.499% 76.788%, 87.625% 78.587%, 85.668% 80.296%, 83.642% 81.923%, 81.560% 83.477%, 79.431% 84.967%, 77.266% 86.402%, 75.071% 87.793%, 72.854% 89.148%, 70.624% 90.481%, 68.375% 91.783%, 66.103% 93.044%, 63.803% 94.253%, 61.470% 95.396%, 59.100% 96.459%, 56.688% 97.425%, 54.232% 98.272%, 51.732% 98.978%, 49.190% 99.518%, 46.616% 99.866%, 44.022% 99.999%, 41.427% 99.904%, 38.848% 99.589%, 36.304% 99.067%, 33.806% 98.353%, 31.365% 97.465%, 28.988% 96.417%, 26.680% 95.223%, 24.446% 93.897%, 22.289% 92.450%, 20.209% 90.892%, 18.210% 89.233%, 16.286% 87.487%, 14.442% 85.656%, 12.685% 83.743%, 11.018% 81.750%, 9.446% 79.682%, 7.974% 77.541%, 6.608% 75.331%, 5.354% 73.056%, 4.218% 70.719%, 3.208% 68.325%, 2.331% 65.880%, 1.594% 63.389%, 0.996% 60.861%, 0.535% 58.304%, 0.216% 55.726%, 0.039% 53.134%, 0.005% 50.536%, 0.119% 47.941%, 0.385% 45.356%, 0.814% 42.794%, 1.416% 40.267%, 2.207% 37.793%, 3.204% 35.394%, 4.427% 33.103%, 5.887% 30.956%, 7.572% 28.979%, 9.454% 27.190%, 11.490% 25.576%, 13.637% 24.114%, 15.862% 22.773%, 18.137% 21.517%, 20.438% 20.310%, 22.744% 19.113%, 25.034% 17.885%, 27.285% 16.589%, 29.485% 15.207%, 31.628% 13.738%, 33.730% 12.210%, 35.812% 10.656%, 37.898% 9.106%, 40.011% 7.595%, 42.174% 6.156%, 44.403% 4.820%, 46.707% 3.621%, 49.090% 2.587%, 51.535% 1.709%, 54.034% 0.998%, 56.576% 0.466%, 59.152% 0.129%, 61.746% 0.001%, 64.342% 0.097%, 66.918% 0.430%, 69.450% 1.007%, 71.914% 1.829%;
+}

assets/media-gallery.js

@@ -0,0 +1,110 @@
+if (!customElements.get('media-gallery')) {
+  customElements.define(
+    'media-gallery',
+    class MediaGallery extends HTMLElement {
+      constructor() {
+        super();
+        this.elements = {
+          liveRegion: this.querySelector('[id^="GalleryStatus"]'),
+          viewer: this.querySelector('[id^="GalleryViewer"]'),
+          thumbnails: this.querySelector('[id^="GalleryThumbnails"]'),
+        };
+        this.mql = window.matchMedia('(min-width: 750px)');
+        if (!this.elements.thumbnails) return;
+
+        this.elements.viewer.addEventListener('slideChanged', debounce(this.onSlideChanged.bind(this), 500));
+        this.elements.thumbnails.querySelectorAll('[data-target]').forEach((mediaToSwitch) => {
+          mediaToSwitch
+            .querySelector('button')
+            .addEventListener('click', this.setActiveMedia.bind(this, mediaToSwitch.dataset.target, false));
+        });
+        if (this.dataset.desktopLayout.includes('thumbnail') && this.mql.matches) this.removeListSemantic();
+      }
+
+      onSlideChanged(event) {
+        const thumbnail = this.elements.thumbnails.querySelector(
+          `[data-target="${event.detail.currentElement.dataset.mediaId}"]`
+        );
+        this.setActiveThumbnail(thumbnail);
+      }
+
+      setActiveMedia(mediaId, prepend) {
+        const activeMedia = this.elements.viewer.querySelector(`[data-media-id="${mediaId}"]`);
+        this.elements.viewer.querySelectorAll('[data-media-id]').forEach((element) => {
+          element.classList.remove('is-active');
+        });
+        activeMedia.classList.add('is-active');
+
+        if (prepend) {
+          activeMedia.parentElement.prepend(activeMedia);
+          if (this.elements.thumbnails) {
+            const activeThumbnail = this.elements.thumbnails.querySelector(`[data-target="${mediaId}"]`);
+            activeThumbnail.parentElement.prepend(activeThumbnail);
+          }
+          if (this.elements.viewer.slider) this.elements.viewer.resetPages();
+        }
+
+        this.preventStickyHeader();
+        window.setTimeout(() => {
+          if (!this.mql.matches || this.elements.thumbnails) {
+            activeMedia.parentElement.scrollTo({ left: activeMedia.offsetLeft });
+          }
+          const activeMediaRect = activeMedia.getBoundingClientRect();
+          // Don't scroll if the image is already in view
+          if (activeMediaRect.top > -0.5) return;
+          const top = activeMediaRect.top + window.scrollY;
+          window.scrollTo({ top: top, behavior: 'smooth' });
+        });
+        this.playActiveMedia(activeMedia);
+
+        if (!this.elements.thumbnails) return;
+        const activeThumbnail = this.elements.thumbnails.querySelector(`[data-target="${mediaId}"]`);
+        this.setActiveThumbnail(activeThumbnail);
+        this.announceLiveRegion(activeMedia, activeThumbnail.dataset.mediaPosition);
+      }
+
+      setActiveThumbnail(thumbnail) {
+        if (!this.elements.thumbnails || !thumbnail) return;
+
+        this.elements.thumbnails
+          .querySelectorAll('button')
+          .forEach((element) => element.removeAttribute('aria-current'));
+        thumbnail.querySelector('button').setAttribute('aria-current', true);
+        if (this.elements.thumbnails.isSlideVisible(thumbnail, 10)) return;
+
+        this.elements.thumbnails.slider.scrollTo({ left: thumbnail.offsetLeft });
+      }
+
+      announceLiveRegion(activeItem, position) {
+        const image = activeItem.querySelector('.product__modal-opener--image img');
+        if (!image) return;
+        image.onload = () => {
+          this.elements.liveRegion.setAttribute('aria-hidden', false);
+          this.elements.liveRegion.innerHTML = window.accessibilityStrings.imageAvailable.replace('[index]', position);
+          setTimeout(() => {
+            this.elements.liveRegion.setAttribute('aria-hidden', true);
+          }, 2000);
+        };
+        image.src = image.src;
+      }
+
+      playActiveMedia(activeItem) {
+        window.pauseAllMedia();
+        const deferredMedia = activeItem.querySelector('.deferred-media');
+        if (deferredMedia) deferredMedia.loadContent(false);
+      }
+
+      preventStickyHeader() {
+        this.stickyHeader = this.stickyHeader || document.querySelector('sticky-header');
+        if (!this.stickyHeader) return;
+        this.stickyHeader.dispatchEvent(new Event('preventHeaderReveal'));
+      }
+
+      removeListSemantic() {
+        if (!this.elements.viewer.slider) return;
+        this.elements.viewer.slider.setAttribute('role', 'presentation');
+        this.elements.viewer.sliderItems.forEach((slide) => slide.setAttribute('role', 'presentation'));
+      }
+    }
+  );
+}

assets/newsletter-section.css

@@ -0,0 +1,50 @@
+.newsletter__wrapper {
+  padding-right: calc(4rem / var(--font-body-scale));
+  padding-left: calc(4rem / var(--font-body-scale));
+}
+
+@media screen and (min-width: 750px) {
+  .newsletter__wrapper {
+    padding-right: 9rem;
+    padding-left: 9rem;
+  }
+}
+
+.newsletter__wrapper > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.newsletter__wrapper > * + * {
+  margin-top: 2rem;
+}
+
+.newsletter__wrapper > * + .newsletter-form {
+  margin-top: 3rem;
+}
+
+.newsletter__subheading {
+  max-width: 70rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.newsletter__wrapper .newsletter-form__field-wrapper {
+  max-width: 36rem;
+}
+
+.newsletter-form__field-wrapper .newsletter-form__message {
+  margin-top: 1.5rem;
+}
+
+.newsletter__button {
+  margin-top: 3rem;
+  width: fit-content;
+}
+
+@media screen and (min-width: 750px) {
+  .newsletter__button {
+    flex-shrink: 0;
+    margin: 0 0 0 1rem;
+  }
+}

assets/pagefly-main.css

@@ -0,0 +1 @@
+.__pf img,.__pf video{max-width:100%;border:0;vertical-align:middle}.__pf [tabIndex],.__pf button,.__pf input,.__pf select,.__pf textarea{touch-action:manipulation}.__pf :focus-visible{outline:0!important;box-shadow:none!important}.__pf :not(input):not(select):not(textarea):focus-visible{border:none!important}.__pf *,.__pf :after,.__pf :before{box-sizing:border-box}.__pf [disabled],.__pf [readonly]{cursor:default}.__pf [data-href],.__pf button:not([data-pf-id]):hover{cursor:pointer}.__pf [disabled]{pointer-events:none}.__pf [hidden]{display:none!important}.__pf [data-link=inherit]{color:inherit;text-decoration:none}.__pf [data-pf-placeholder]{outline:0;height:auto;display:none;pointer-events:none!important}.__pf .pf-ifr,.__pf [style*="--ratio"] img{position:absolute;height:100%;left:0;top:0;width:100%}.__pf .pf-r,.__pf .pf-r-eh>.pf-c{display:flex}.__pf [style*="--cw"]{padding:0 15px;width:100%;margin:auto;max-width:var(--cw)}.__pf .pf-ifr{border:0}.__pf .pf-bg-lazy{background-image:none!important}.__pf .pf-r{flex-wrap:wrap}.__pf .pf-r-dg{display:grid}.__pf [style*="--c-xs"]{max-width:calc(100%/12*var(--c-xs));flex-basis:calc(100%/12*var(--c-xs))}.__pf [style*="--s-xs"]{margin:0 calc(-1 * var(--s-xs))}.__pf [style*="--s-xs"]>.pf-c{padding:var(--s-xs)}.__pf .pf-r-ew>.pf-c{flex-grow:1;flex-basis:0}.__pf [style*="--ew-xs"]>.pf-c{flex-basis:calc(100% / var(--ew-xs));max-width:calc(100% / var(--ew-xs))}.__pf [style*="--ratio"]{position:relative;padding-bottom:var(--ratio)}.__pf .oh{overflow:hidden}.main-content{padding:0}.footer-section,.site-footer,.site-footer-wrapper,main .accent-background+.shopify-section{margin:0}@media (max-width:767.4999px){.__pf .pf-hide{display:none!important}}@media (max-width:1024.4999px) and (min-width:767.5px){.__pf .pf-sm-hide{display:none!important}}@media (max-width:1199.4999px) and (min-width:1024.5px){.__pf .pf-md-hide{display:none!important}}@media (min-width:767.5px){.__pf [style*="--s-sm"]{margin:0 calc(-1 * var(--s-sm))}.__pf [style*="--c-sm"]{max-width:calc(100%/12*var(--c-sm));flex-basis:calc(100%/12*var(--c-sm))}.__pf [style*="--s-sm"]>.pf-c{padding:var(--s-sm)}.__pf [style*="--ew-sm"]>.pf-c{flex-basis:calc(100% / var(--ew-sm));max-width:calc(100% / var(--ew-sm))}}@media (min-width:1024.5px){.__pf [style*="--s-md"]{margin:0 calc(-1 * var(--s-md))}.__pf [style*="--c-md"]{max-width:calc(100%/12*var(--c-md));flex-basis:calc(100%/12*var(--c-md))}.__pf [style*="--s-md"]>.pf-c{padding:var(--s-md)}.__pf [style*="--ew-md"]>.pf-c{flex-basis:calc(100% / var(--ew-md));max-width:calc(100% / var(--ew-md))}}@media (min-width:1199.5px){.__pf [style*="--s-lg"]{margin:0 calc(-1 * var(--s-lg))}.__pf [style*="--c-lg"]{max-width:calc(100%/12*var(--c-lg));flex-basis:calc(100%/12*var(--c-lg))}.__pf [style*="--s-lg"]>.pf-c{padding:var(--s-lg)}.__pf [style*="--ew-lg"]>.pf-c{flex-basis:calc(100% / var(--ew-lg));max-width:calc(100% / var(--ew-lg))}.__pf .pf-lg-hide{display:none!important}}.__pf .pf-r-eh>.pf-c>div{width:100%}.__pf .pf-c-lt{justify-content:flex-start;align-items:flex-start}.__pf .pf-c-ct{justify-content:center;align-items:flex-start}.__pf .pf-c-rt{justify-content:flex-end;align-items:flex-start}.__pf .pf-c-lm{justify-content:flex-start;align-items:center}.__pf .pf-c-cm{justify-content:center;align-items:center}.__pf .pf-c-rm{justify-content:flex-end;align-items:center}.__pf .pf-c-lb{justify-content:flex-start;align-items:flex-end}.__pf .pf-c-cb{justify-content:center;align-items:flex-end}.__pf .pf-c-rb{justify-content:flex-end;align-items:flex-end}

assets/password-modal.js

@@ -0,0 +1,9 @@
+class PasswordModal extends DetailsModal {
+  constructor() {
+    super();
+
+    if (this.querySelector('input[aria-invalid="true"]')) this.open({ target: this.querySelector('details') });
+  }
+}
+
+customElements.define('password-modal', PasswordModal);

assets/pickup-availability.js

@@ -0,0 +1,121 @@
+if (!customElements.get('pickup-availability')) {
+  customElements.define(
+    'pickup-availability',
+    class PickupAvailability extends HTMLElement {
+      constructor() {
+        super();
+
+        if (!this.hasAttribute('available')) return;
+
+        this.errorHtml = this.querySelector('template').content.firstElementChild.cloneNode(true);
+        this.onClickRefreshList = this.onClickRefreshList.bind(this);
+        this.fetchAvailability(this.dataset.variantId);
+      }
+
+      fetchAvailability(variantId) {
+        let rootUrl = this.dataset.rootUrl;
+        if (!rootUrl.endsWith('/')) {
+          rootUrl = rootUrl + '/';
+        }
+        const variantSectionUrl = `${rootUrl}variants/${variantId}/?section_id=pickup-availability`;
+
+        fetch(variantSectionUrl)
+          .then((response) => response.text())
+          .then((text) => {
+            const sectionInnerHTML = new DOMParser()
+              .parseFromString(text, 'text/html')
+              .querySelector('.shopify-section');
+            this.renderPreview(sectionInnerHTML);
+          })
+          .catch((e) => {
+            const button = this.querySelector('button');
+            if (button) button.removeEventListener('click', this.onClickRefreshList);
+            this.renderError();
+          });
+      }
+
+      onClickRefreshList(evt) {
+        this.fetchAvailability(this.dataset.variantId);
+      }
+
+      renderError() {
+        this.innerHTML = '';
+        this.appendChild(this.errorHtml);
+
+        this.querySelector('button').addEventListener('click', this.onClickRefreshList);
+      }
+
+      renderPreview(sectionInnerHTML) {
+        const drawer = document.querySelector('pickup-availability-drawer');
+        if (drawer) drawer.remove();
+        if (!sectionInnerHTML.querySelector('pickup-availability-preview')) {
+          this.innerHTML = '';
+          this.removeAttribute('available');
+          return;
+        }
+
+        this.innerHTML = sectionInnerHTML.querySelector('pickup-availability-preview').outerHTML;
+        this.setAttribute('available', '');
+
+        document.body.appendChild(sectionInnerHTML.querySelector('pickup-availability-drawer'));
+        const colorClassesToApply = this.dataset.productPageColorScheme.split(' ');
+        colorClassesToApply.forEach((colorClass) => {
+          document.querySelector('pickup-availability-drawer').classList.add(colorClass);
+        });
+
+        const button = this.querySelector('button');
+        if (button)
+          button.addEventListener('click', (evt) => {
+            document.querySelector('pickup-availability-drawer').show(evt.target);
+          });
+      }
+    }
+  );
+}
+
+if (!customElements.get('pickup-availability-drawer')) {
+  customElements.define(
+    'pickup-availability-drawer',
+    class PickupAvailabilityDrawer extends HTMLElement {
+      constructor() {
+        super();
+
+        this.onBodyClick = this.handleBodyClick.bind(this);
+
+        this.querySelector('button').addEventListener('click', () => {
+          this.hide();
+        });
+
+        this.addEventListener('keyup', (event) => {
+          if (event.code.toUpperCase() === 'ESCAPE') this.hide();
+        });
+      }
+
+      handleBodyClick(evt) {
+        const target = evt.target;
+        if (
+          target != this &&
+          !target.closest('pickup-availability-drawer') &&
+          target.id != 'ShowPickupAvailabilityDrawer'
+        ) {
+          this.hide();
+        }
+      }
+
+      hide() {
+        this.removeAttribute('open');
+        document.body.removeEventListener('click', this.onBodyClick);
+        document.body.classList.remove('overflow-hidden');
+        removeTrapFocus(this.focusElement);
+      }
+
+      show(focusElement) {
+        this.focusElement = focusElement;
+        this.setAttribute('open', '');
+        document.body.addEventListener('click', this.onBodyClick);
+        document.body.classList.add('overflow-hidden');
+        trapFocus(this);
+      }
+    }
+  );
+}

assets/predictive-search.js

@@ -0,0 +1,277 @@
+class PredictiveSearch extends SearchForm {
+  constructor() {
+    super();
+    this.cachedResults = {};
+    this.predictiveSearchResults = this.querySelector('[data-predictive-search]');
+    this.allPredictiveSearchInstances = document.querySelectorAll('predictive-search');
+    this.isOpen = false;
+    this.abortController = new AbortController();
+    this.searchTerm = '';
+
+    this.setupEventListeners();
+  }
+
+  setupEventListeners() {
+    this.input.form.addEventListener('submit', this.onFormSubmit.bind(this));
+
+    this.input.addEventListener('focus', this.onFocus.bind(this));
+    this.addEventListener('focusout', this.onFocusOut.bind(this));
+    this.addEventListener('keyup', this.onKeyup.bind(this));
+    this.addEventListener('keydown', this.onKeydown.bind(this));
+  }
+
+  getQuery() {
+    return this.input.value.trim();
+  }
+
+  onChange() {
+    super.onChange();
+    const newSearchTerm = this.getQuery();
+    if (!this.searchTerm || !newSearchTerm.startsWith(this.searchTerm)) {
+      // Remove the results when they are no longer relevant for the new search term
+      // so they don't show up when the dropdown opens again
+      this.querySelector('#predictive-search-results-groups-wrapper')?.remove();
+    }
+
+    // Update the term asap, don't wait for the predictive search query to finish loading
+    this.updateSearchForTerm(this.searchTerm, newSearchTerm);
+
+    this.searchTerm = newSearchTerm;
+
+    if (!this.searchTerm.length) {
+      this.close(true);
+      return;
+    }
+
+    this.getSearchResults(this.searchTerm);
+  }
+
+  onFormSubmit(event) {
+    if (!this.getQuery().length || this.querySelector('[aria-selected="true"] a')) event.preventDefault();
+  }
+
+  onFormReset(event) {
+    super.onFormReset(event);
+    if (super.shouldResetForm()) {
+      this.searchTerm = '';
+      this.abortController.abort();
+      this.abortController = new AbortController();
+      this.closeResults(true);
+    }
+  }
+
+  onFocus() {
+    const currentSearchTerm = this.getQuery();
+
+    if (!currentSearchTerm.length) return;
+
+    if (this.searchTerm !== currentSearchTerm) {
+      // Search term was changed from other search input, treat it as a user change
+      this.onChange();
+    } else if (this.getAttribute('results') === 'true') {
+      this.open();
+    } else {
+      this.getSearchResults(this.searchTerm);
+    }
+  }
+
+  onFocusOut() {
+    setTimeout(() => {
+      if (!this.contains(document.activeElement)) this.close();
+    });
+  }
+
+  onKeyup(event) {
+    if (!this.getQuery().length) this.close(true);
+    event.preventDefault();
+
+    switch (event.code) {
+      case 'ArrowUp':
+        this.switchOption('up');
+        break;
+      case 'ArrowDown':
+        this.switchOption('down');
+        break;
+      case 'Enter':
+        this.selectOption();
+        break;
+    }
+  }
+
+  onKeydown(event) {
+    // Prevent the cursor from moving in the input when using the up and down arrow keys
+    if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {
+      event.preventDefault();
+    }
+  }
+
+  updateSearchForTerm(previousTerm, newTerm) {
+    const searchForTextElement = this.querySelector('[data-predictive-search-search-for-text]');
+    const currentButtonText = searchForTextElement?.innerText;
+    if (currentButtonText) {
+      if (currentButtonText.match(new RegExp(previousTerm, 'g')).length > 1) {
+        // The new term matches part of the button text and not just the search term, do not replace to avoid mistakes
+        return;
+      }
+      const newButtonText = currentButtonText.replace(previousTerm, newTerm);
+      searchForTextElement.innerText = newButtonText;
+    }
+  }
+
+  switchOption(direction) {
+    if (!this.getAttribute('open')) return;
+
+    const moveUp = direction === 'up';
+    const selectedElement = this.querySelector('[aria-selected="true"]');
+
+    // Filter out hidden elements (duplicated page and article resources) thanks
+    // to this https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
+    const allVisibleElements = Array.from(this.querySelectorAll('li, button.predictive-search__item')).filter(
+      (element) => element.offsetParent !== null
+    );
+    let activeElementIndex = 0;
+
+    if (moveUp && !selectedElement) return;
+
+    let selectedElementIndex = -1;
+    let i = 0;
+
+    while (selectedElementIndex === -1 && i <= allVisibleElements.length) {
+      if (allVisibleElements[i] === selectedElement) {
+        selectedElementIndex = i;
+      }
+      i++;
+    }
+
+    this.statusElement.textContent = '';
+
+    if (!moveUp && selectedElement) {
+      activeElementIndex = selectedElementIndex === allVisibleElements.length - 1 ? 0 : selectedElementIndex + 1;
+    } else if (moveUp) {
+      activeElementIndex = selectedElementIndex === 0 ? allVisibleElements.length - 1 : selectedElementIndex - 1;
+    }
+
+    if (activeElementIndex === selectedElementIndex) return;
+
+    const activeElement = allVisibleElements[activeElementIndex];
+
+    activeElement.setAttribute('aria-selected', true);
+    if (selectedElement) selectedElement.setAttribute('aria-selected', false);
+
+    this.input.setAttribute('aria-activedescendant', activeElement.id);
+  }
+
+  selectOption() {
+    const selectedOption = this.querySelector('[aria-selected="true"] a, button[aria-selected="true"]');
+
+    if (selectedOption) selectedOption.click();
+  }
+
+  getSearchResults(searchTerm) {
+    const queryKey = searchTerm.replace(' ', '-').toLowerCase();
+    this.setLiveRegionLoadingState();
+
+    if (this.cachedResults[queryKey]) {
+      this.renderSearchResults(this.cachedResults[queryKey]);
+      return;
+    }
+
+    fetch(`${routes.predictive_search_url}?q=${encodeURIComponent(searchTerm)}&section_id=predictive-search`, {
+      signal: this.abortController.signal,
+    })
+      .then((response) => {
+        if (!response.ok) {
+          var error = new Error(response.status);
+          this.close();
+          throw error;
+        }
+
+        return response.text();
+      })
+      .then((text) => {
+        const resultsMarkup = new DOMParser()
+          .parseFromString(text, 'text/html')
+          .querySelector('#shopify-section-predictive-search').innerHTML;
+        // Save bandwidth keeping the cache in all instances synced
+        this.allPredictiveSearchInstances.forEach((predictiveSearchInstance) => {
+          predictiveSearchInstance.cachedResults[queryKey] = resultsMarkup;
+        });
+        this.renderSearchResults(resultsMarkup);
+      })
+      .catch((error) => {
+        if (error?.code === 20) {
+          // Code 20 means the call was aborted
+          return;
+        }
+        this.close();
+        throw error;
+      });
+  }
+
+  setLiveRegionLoadingState() {
+    this.statusElement = this.statusElement || this.querySelector('.predictive-search-status');
+    this.loadingText = this.loadingText || this.getAttribute('data-loading-text');
+
+    this.setLiveRegionText(this.loadingText);
+    this.setAttribute('loading', true);
+  }
+
+  setLiveRegionText(statusText) {
+    this.statusElement.setAttribute('aria-hidden', 'false');
+    this.statusElement.textContent = statusText;
+
+    setTimeout(() => {
+      this.statusElement.setAttribute('aria-hidden', 'true');
+    }, 1000);
+  }
+
+  renderSearchResults(resultsMarkup) {
+    this.predictiveSearchResults.innerHTML = resultsMarkup;
+    this.setAttribute('results', true);
+
+    this.setLiveRegionResults();
+    this.open();
+  }
+
+  setLiveRegionResults() {
+    this.removeAttribute('loading');
+    this.setLiveRegionText(this.querySelector('[data-predictive-search-live-region-count-value]').textContent);
+  }
+
+  getResultsMaxHeight() {
+    this.resultsMaxHeight =
+      window.innerHeight - document.querySelector('.section-header').getBoundingClientRect().bottom;
+    return this.resultsMaxHeight;
+  }
+
+  open() {
+    this.predictiveSearchResults.style.maxHeight = this.resultsMaxHeight || `${this.getResultsMaxHeight()}px`;
+    this.setAttribute('open', true);
+    this.input.setAttribute('aria-expanded', true);
+    this.isOpen = true;
+  }
+
+  close(clearSearchTerm = false) {
+    this.closeResults(clearSearchTerm);
+    this.isOpen = false;
+  }
+
+  closeResults(clearSearchTerm = false) {
+    if (clearSearchTerm) {
+      this.input.value = '';
+      this.removeAttribute('results');
+    }
+    const selected = this.querySelector('[aria-selected="true"]');
+
+    if (selected) selected.setAttribute('aria-selected', false);
+
+    this.input.setAttribute('aria-activedescendant', '');
+    this.removeAttribute('loading');
+    this.removeAttribute('open');
+    this.input.setAttribute('aria-expanded', false);
+    this.resultsMaxHeight = false;
+    this.predictiveSearchResults.removeAttribute('style');
+  }
+}
+
+customElements.define('predictive-search', PredictiveSearch);

assets/price-per-item.js

@@ -0,0 +1,103 @@
+if (!customElements.get('price-per-item')) {
+  customElements.define(
+    'price-per-item',
+    class PricePerItem extends HTMLElement {
+      constructor() {
+        super();
+        this.variantId = this.dataset.variantId;
+        this.input = document.getElementById(`Quantity-${this.dataset.sectionId || this.dataset.variantId}`);
+        if (this.input) {
+          this.input.addEventListener('change', this.onInputChange.bind(this));
+        }
+
+        this.getVolumePricingArray();
+      }
+
+      updatePricePerItemUnsubscriber = undefined;
+      variantIdChangedUnsubscriber = undefined;
+
+      connectedCallback() {
+        // Update variantId if variant is switched on product page
+        this.variantIdChangedUnsubscriber = subscribe(PUB_SUB_EVENTS.variantChange, (event) => {
+          this.variantId = event.data.variant.id.toString();
+          this.getVolumePricingArray();
+        });
+
+        this.updatePricePerItemUnsubscriber = subscribe(PUB_SUB_EVENTS.cartUpdate, (response) => {
+          if (!response.cartData) return;
+
+          // Item was added to cart via product page
+          if (response.cartData['variant_id'] !== undefined) {
+            if (response.productVariantId === this.variantId) this.updatePricePerItem(response.cartData.quantity);
+            // Qty was updated in cart
+          } else if (response.cartData.item_count !== 0) {
+            const isVariant = response.cartData.items.find((item) => item.variant_id.toString() === this.variantId);
+            if (isVariant && isVariant.id.toString() === this.variantId) {
+              // The variant is still in cart
+              this.updatePricePerItem(isVariant.quantity);
+            } else {
+              // The variant was removed from cart, qty is 0
+              this.updatePricePerItem(0);
+            }
+            // All items were removed from cart
+          } else {
+            this.updatePricePerItem(0);
+          }
+        });
+      }
+
+      disconnectedCallback() {
+        if (this.updatePricePerItemUnsubscriber) {
+          this.updatePricePerItemUnsubscriber();
+        }
+        if (this.variantIdChangedUnsubscriber) {
+          this.variantIdChangedUnsubscriber();
+        }
+      }
+
+      onInputChange() {
+        this.updatePricePerItem();
+      }
+
+      updatePricePerItem(updatedCartQuantity) {
+        if (this.input) {
+          this.enteredQty = parseInt(this.input.value);
+          this.step = parseInt(this.input.step)
+        }
+
+        // updatedCartQuantity is undefined when qty is updated on product page. We need to sum entered qty and current qty in cart.
+        // updatedCartQuantity is not undefined when qty is updated in cart. We need to sum qty in cart and min qty for product.
+        this.currentQtyForVolumePricing = updatedCartQuantity === undefined ? this.getCartQuantity(updatedCartQuantity) + this.enteredQty : this.getCartQuantity(updatedCartQuantity) + parseInt(this.step);
+
+        if (this.classList.contains('variant-item__price-per-item')) {
+          this.currentQtyForVolumePricing = this.getCartQuantity(updatedCartQuantity);
+        }
+        for (let pair of this.qtyPricePairs) {
+          if (this.currentQtyForVolumePricing >= pair[0]) {
+            const pricePerItemCurrent = document.querySelector(`price-per-item[id^="Price-Per-Item-${this.dataset.sectionId || this.dataset.variantId}"] .price-per-item span`);
+            this.classList.contains('variant-item__price-per-item') ? pricePerItemCurrent.innerHTML = window.quickOrderListStrings.each.replace('[money]', pair[1]) : pricePerItemCurrent.innerHTML = pair[1];
+            break;
+          }
+        }
+      }
+
+      getCartQuantity(updatedCartQuantity) {
+        return (updatedCartQuantity || updatedCartQuantity === 0) ? updatedCartQuantity : parseInt(this.input.dataset.cartQuantity);
+      }
+
+      getVolumePricingArray() {
+        const volumePricing = document.getElementById(`Volume-${this.dataset.sectionId || this.dataset.variantId}`);
+        this.qtyPricePairs = [];
+
+        if (volumePricing) {
+          volumePricing.querySelectorAll('li').forEach(li => {
+            const qty = parseInt(li.querySelector('span:first-child').textContent);
+            const price = (li.querySelector('span:not(:first-child):last-child').dataset.text);
+            this.qtyPricePairs.push([qty, price]);
+          });
+        }
+        this.qtyPricePairs.reverse();
+      }
+    }
+  );
+}

assets/product-form.js

@@ -0,0 +1,118 @@
+if (!customElements.get('product-form')) {
+  customElements.define(
+    'product-form',
+    class ProductForm extends HTMLElement {
+      constructor() {
+        super();
+
+        this.form = this.querySelector('form');
+        this.form.querySelector('[name=id]').disabled = false;
+        this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
+        this.cart = document.querySelector('cart-notification') || document.querySelector('cart-drawer');
+        this.submitButton = this.querySelector('[type="submit"]');
+
+        if (document.querySelector('cart-drawer')) this.submitButton.setAttribute('aria-haspopup', 'dialog');
+
+        this.hideErrors = this.dataset.hideErrors === 'true';
+      }
+
+      onSubmitHandler(evt) {
+        evt.preventDefault();
+        if (this.submitButton.getAttribute('aria-disabled') === 'true') return;
+
+        this.handleErrorMessage();
+
+        this.submitButton.setAttribute('aria-disabled', true);
+        this.submitButton.classList.add('loading');
+        this.querySelector('.loading__spinner').classList.remove('hidden');
+
+        const config = fetchConfig('javascript');
+        config.headers['X-Requested-With'] = 'XMLHttpRequest';
+        delete config.headers['Content-Type'];
+
+        const formData = new FormData(this.form);
+        if (this.cart) {
+          formData.append(
+            'sections',
+            this.cart.getSectionsToRender().map((section) => section.id)
+          );
+          formData.append('sections_url', window.location.pathname);
+          this.cart.setActiveElement(document.activeElement);
+        }
+        config.body = formData;
+
+        fetch(`${routes.cart_add_url}`, config)
+          .then((response) => response.json())
+          .then((response) => {
+            if (response.status) {
+              publish(PUB_SUB_EVENTS.cartError, {
+                source: 'product-form',
+                productVariantId: formData.get('id'),
+                errors: response.errors || response.description,
+                message: response.message,
+              });
+              this.handleErrorMessage(response.description);
+
+              const soldOutMessage = this.submitButton.querySelector('.sold-out-message');
+              if (!soldOutMessage) return;
+              this.submitButton.setAttribute('aria-disabled', true);
+              this.submitButton.querySelector('span').classList.add('hidden');
+              soldOutMessage.classList.remove('hidden');
+              this.error = true;
+              return;
+            } else if (!this.cart) {
+              window.location = window.routes.cart_url;
+              return;
+            }
+
+            if (!this.error)
+              publish(PUB_SUB_EVENTS.cartUpdate, {
+                source: 'product-form',
+                productVariantId: formData.get('id'),
+                cartData: response,
+              });
+            this.error = false;
+            const quickAddModal = this.closest('quick-add-modal');
+            if (quickAddModal) {
+              document.body.addEventListener(
+                'modalClosed',
+                () => {
+                  setTimeout(() => {
+                    this.cart.renderContents(response);
+                  });
+                },
+                { once: true }
+              );
+              quickAddModal.hide(true);
+            } else {
+              this.cart.renderContents(response);
+            }
+          })
+          .catch((e) => {
+            console.error(e);
+          })
+          .finally(() => {
+            this.submitButton.classList.remove('loading');
+            if (this.cart && this.cart.classList.contains('is-empty')) this.cart.classList.remove('is-empty');
+            if (!this.error) this.submitButton.removeAttribute('aria-disabled');
+            this.querySelector('.loading__spinner').classList.add('hidden');
+          });
+      }
+
+      handleErrorMessage(errorMessage = false) {
+        if (this.hideErrors) return;
+
+        this.errorMessageWrapper =
+          this.errorMessageWrapper || this.querySelector('.product-form__error-message-wrapper');
+        if (!this.errorMessageWrapper) return;
+        this.errorMessage = this.errorMessage || this.errorMessageWrapper.querySelector('.product-form__error-message');
+
+        this.errorMessageWrapper.toggleAttribute('hidden', !errorMessage);
+
+        if (errorMessage) {
+          this.errorMessage.textContent = errorMessage;
+        }
+      }
+    }
+  );
+}

assets/product-info.js

@@ -0,0 +1,99 @@
+if (!customElements.get('product-info')) {
+  customElements.define(
+    'product-info',
+    class ProductInfo extends HTMLElement {
+      constructor() {
+        super();
+        this.input = this.querySelector('.quantity__input');
+        this.currentVariant = this.querySelector('.product-variant-id');
+        this.submitButton = this.querySelector('[type="submit"]');
+      }
+
+      cartUpdateUnsubscriber = undefined;
+      variantChangeUnsubscriber = undefined;
+
+      connectedCallback() {
+        if (!this.input) return;
+        this.quantityForm = this.querySelector('.product-form__quantity');
+        if (!this.quantityForm) return;
+        this.setQuantityBoundries();
+        if (!this.dataset.originalSection) {
+          this.cartUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.cartUpdate, this.fetchQuantityRules.bind(this));
+        }
+        this.variantChangeUnsubscriber = subscribe(PUB_SUB_EVENTS.variantChange, (event) => {
+          const sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section;
+          if (event.data.sectionId !== sectionId) return;
+          this.updateQuantityRules(event.data.sectionId, event.data.html);
+          this.setQuantityBoundries();
+        });
+      }
+
+      disconnectedCallback() {
+        if (this.cartUpdateUnsubscriber) {
+          this.cartUpdateUnsubscriber();
+        }
+        if (this.variantChangeUnsubscriber) {
+          this.variantChangeUnsubscriber();
+        }
+      }
+
+      setQuantityBoundries() {
+        const data = {
+          cartQuantity: this.input.dataset.cartQuantity ? parseInt(this.input.dataset.cartQuantity) : 0,
+          min: this.input.dataset.min ? parseInt(this.input.dataset.min) : 1,
+          max: this.input.dataset.max ? parseInt(this.input.dataset.max) : null,
+          step: this.input.step ? parseInt(this.input.step) : 1,
+        };
+
+        let min = data.min;
+        const max = data.max === null ? data.max : data.max - data.cartQuantity;
+        if (max !== null) min = Math.min(min, max);
+        if (data.cartQuantity >= data.min) min = Math.min(min, data.step);
+
+        this.input.min = min;
+        this.input.max = max;
+        this.input.value = min;
+        publish(PUB_SUB_EVENTS.quantityUpdate, undefined);
+      }
+
+      fetchQuantityRules() {
+        if (!this.currentVariant || !this.currentVariant.value) return;
+        this.querySelector('.quantity__rules-cart .loading__spinner').classList.remove('hidden');
+        fetch(`${this.dataset.url}?variant=${this.currentVariant.value}&section_id=${this.dataset.section}`)
+          .then((response) => {
+            return response.text();
+          })
+          .then((responseText) => {
+            const html = new DOMParser().parseFromString(responseText, 'text/html');
+            this.updateQuantityRules(this.dataset.section, html);
+            this.setQuantityBoundries();
+          })
+          .catch((e) => {
+            console.error(e);
+          })
+          .finally(() => {
+            this.querySelector('.quantity__rules-cart .loading__spinner').classList.add('hidden');
+          });
+      }
+
+      updateQuantityRules(sectionId, html) {
+        const quantityFormUpdated = html.getElementById(`Quantity-Form-${sectionId}`);
+        const selectors = ['.quantity__input', '.quantity__rules', '.quantity__label'];
+        for (let selector of selectors) {
+          const current = this.quantityForm.querySelector(selector);
+          const updated = quantityFormUpdated.querySelector(selector);
+          if (!current || !updated) continue;
+          if (selector === '.quantity__input') {
+            const attributes = ['data-cart-quantity', 'data-min', 'data-max', 'step'];
+            for (let attribute of attributes) {
+              const valueUpdated = updated.getAttribute(attribute);
+              if (valueUpdated !== null) current.setAttribute(attribute, valueUpdated);
+            }
+          } else {
+            current.innerHTML = updated.innerHTML;
+          }
+        }
+      }
+    }
+  );
+}

assets/product-modal.js

@@ -0,0 +1,42 @@
+if (!customElements.get('product-modal')) {
+  customElements.define(
+    'product-modal',
+    class ProductModal extends ModalDialog {
+      constructor() {
+        super();
+      }
+
+      hide() {
+        super.hide();
+      }
+
+      show(opener) {
+        super.show(opener);
+        this.showActiveMedia();
+      }
+
+      showActiveMedia() {
+        this.querySelectorAll(
+          `[data-media-id]:not([data-media-id="${this.openedBy.getAttribute('data-media-id')}"])`
+        ).forEach((element) => {
+          element.classList.remove('active');
+        });
+        const activeMedia = this.querySelector(`[data-media-id="${this.openedBy.getAttribute('data-media-id')}"]`);
+        const activeMediaTemplate = activeMedia.querySelector('template');
+        const activeMediaContent = activeMediaTemplate ? activeMediaTemplate.content : null;
+        activeMedia.classList.add('active');
+        activeMedia.scrollIntoView();
+
+        const container = this.querySelector('[role="document"]');
+        container.scrollLeft = (activeMedia.width - container.clientWidth) / 2;
+
+        if (
+          activeMedia.nodeName == 'DEFERRED-MEDIA' &&
+          activeMediaContent &&
+          activeMediaContent.querySelector('.js-youtube')
+        )
+          activeMedia.loadContent();
+      }
+    }
+  );
+}

assets/product-model.js

@@ -0,0 +1,59 @@
+if (!customElements.get('product-model')) {
+  customElements.define(
+    'product-model',
+    class ProductModel extends DeferredMedia {
+      constructor() {
+        super();
+      }
+
+      loadContent() {
+        super.loadContent();
+
+        Shopify.loadFeatures([
+          {
+            name: 'model-viewer-ui',
+            version: '1.0',
+            onLoad: this.setupModelViewerUI.bind(this),
+          },
+        ]);
+      }
+
+      setupModelViewerUI(errors) {
+        if (errors) return;
+
+        this.modelViewerUI = new Shopify.ModelViewerUI(this.querySelector('model-viewer'));
+      }
+    }
+  );
+}
+
+window.ProductModel = {
+  loadShopifyXR() {
+    Shopify.loadFeatures([
+      {
+        name: 'shopify-xr',
+        version: '1.0',
+        onLoad: this.setupShopifyXR.bind(this),
+      },
+    ]);
+  },
+
+  setupShopifyXR(errors) {
+    if (errors) return;
+
+    if (!window.ShopifyXR) {
+      document.addEventListener('shopify_xr_initialized', () => this.setupShopifyXR());
+      return;
+    }
+
+    document.querySelectorAll('[id^="ProductJSON-"]').forEach((modelJSON) => {
+      window.ShopifyXR.addModels(JSON.parse(modelJSON.textContent));
+      modelJSON.remove();
+    });
+    window.ShopifyXR.setupXRElements();
+  },
+};
+
+window.addEventListener('DOMContentLoaded', () => {
+  if (window.ProductModel) window.ProductModel.loadShopifyXR();
+});

assets/pubsub.js

@@ -0,0 +1,23 @@
+let subscribers = {};
+
+function subscribe(eventName, callback) {
+  if (subscribers[eventName] === undefined) {
+    subscribers[eventName] = [];
+  }
+
+  subscribers[eventName] = [...subscribers[eventName], callback];
+
+  return function unsubscribe() {
+    subscribers[eventName] = subscribers[eventName].filter((cb) => {
+      return cb !== callback;
+    });
+  };
+}
+
+function publish(eventName, data) {
+  if (subscribers[eventName]) {
+    subscribers[eventName].forEach((callback) => {
+      callback(data);
+    });
+  }
+}

assets/quantity-popover.css

@@ -0,0 +1,164 @@
+quantity-popover {
+  position: relative;
+  display: block;
+}
+
+quantity-popover volume-pricing li:nth-child(odd) {
+  background: rgba(var(--color-foreground), 0.03);
+}
+
+quantity-popover volume-pricing li {
+  font-size: 1.4rem;
+  letter-spacing: 0.06rem;
+  padding: 0.6rem 0.8rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.quantity-popover__info.global-settings-popup {
+  width: 100%;
+  z-index: 2;
+  position: absolute;
+  background-color: rgb(var(--color-background));
+  max-width: 36rem;
+}
+
+.quantity-popover__info .button-close,
+.variant-remove-total quick-order-list-remove-all-button .button,
+.quick-order-list-total__confirmation quick-order-list-remove-all-button .button,
+quantity-popover quick-order-list-remove-button .button {
+  --shadow-opacity: 0;
+  --border-opacity: 0;
+}
+
+.quantity-popover__info-button {
+  display: flex;
+  align-items: center;
+  margin: 0 0.4rem 0 0;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  --shadow-opacity: 0;
+  --border-opacity: 0;
+}
+
+.quantity-popover__info-button--icon-with-label {
+  align-items: flex-start;
+  text-align: left;
+}
+
+.quantity-popover__info-button--icon-with-label svg {
+  flex-shrink: 0;
+}
+
+.quantity-popover__info-button--open {
+  text-decoration: underline;
+}
+
+.quantity-popover__info-button span {
+  padding-left: 1rem;
+}
+
+@media screen and (max-width: 989px) {
+  .quantity-popover__info.global-settings-popup {
+    left: 0;
+  }
+
+  .quantity-popover__info-button {
+    padding-left: 0;
+  }
+}
+
+.quantity-popover__info .quantity__rules {
+  margin-top: 1.2rem;
+  margin-bottom: 1rem;
+}
+
+.quantity-popover__info .volume-pricing-label {
+  display: block;
+  margin-left: 1.2rem;
+  margin-top: 1.2rem;
+  font-size: 1.2rem;
+}
+
+.quantity-popover__info .button {
+  width: 3.2rem;
+  height: 3.2rem;
+  position: absolute;
+  top: 0.4rem;
+  right: 0;
+  padding: 0 1.2rem 0 0;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.quantity-popover__info .volume-pricing-label~.button {
+  top: -0.2rem;
+}
+
+.quantity-popover__info .button .icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+quantity-popover volume-pricing {
+  margin-top: 1.2rem;
+  display: block;
+}
+
+quantity-popover .quantity__rules span:first-of-type {
+  display: block;
+}
+
+.quantity-popover-container {
+  display: flex;
+  padding: 0.5rem 0.5rem 0.5rem 0;
+}
+
+.quantity-popover-container:not(.quantity-popover-container--hover) {
+  align-items: center;
+}
+
+@media screen and (min-width: 990px) {
+  .quantity-popover-container--hover:hover {
+    background-color: rgba(var(--color-foreground), 0.03);
+    border-radius: var(--inputs-radius-outset);
+  }
+
+  .quantity-popover-container--empty {
+    margin-right: 2.7rem;
+  }
+
+  .quantity-popover__info.global-settings-popup {
+    width: 27rem;
+  }
+
+  .quantity-popover-container {
+    width: auto;
+    max-width: 20rem;
+  }
+
+  .quantity-popover__info.global-settings-popup {
+    transform: translateY(1rem);
+  }
+}
+
+quantity-popover:has(.quantity__input:focus-visible) .quantity-popover__info {
+  display: block;
+}
+
+quantity-popover .quantity {
+  background: rgb(var(--color-background));
+}
+
+quantity-popover .quantity__rules {
+  margin-left: 0.8rem;
+}
+
+quantity-popover .quantity__rules .divider:nth-child(2)::before {
+  content: none;
+}
+
+quantity-popover .quantity__button:not(:focus-visible):not(.focused),
+quantity-popover .quantity__input:not(:focus-visible):not(.focused) {
+  background-color: initial;
+}

assets/quantity-popover.js

@@ -0,0 +1,80 @@
+if (!customElements.get('quantity-popover')) {
+  customElements.define(
+    'quantity-popover',
+    class QuantityPopover extends HTMLElement {
+      constructor() {
+        super();
+        this.mql = window.matchMedia('(min-width: 990px)');
+        this.mqlTablet = window.matchMedia('(min-width: 750px)');
+        this.infoButtonDesktop = this.querySelector('.quantity-popover__info-button--icon-only');
+        this.infoButtonMobile = this.querySelector('.quantity-popover__info-button--icon-with-label');
+        this.popoverInfo = this.querySelector('.quantity-popover__info');
+        this.closeButton = this.querySelector('.button-close');
+        this.variantInfo = this.querySelector('.quantity-popover-container');
+        this.eventMouseEnterHappened = false;
+
+        if (this.closeButton) {
+          this.closeButton.addEventListener('click', this.closePopover.bind(this));
+        }
+
+        if (this.popoverInfo && this.infoButtonDesktop && this.mql.matches) {
+          this.popoverInfo.addEventListener('mouseenter', this.closePopover.bind(this));
+        }
+
+        if (this.infoButtonDesktop) {
+          this.infoButtonDesktop.addEventListener('click', this.togglePopover.bind(this));
+          this.infoButtonDesktop.addEventListener('focusout', this.closePopover.bind(this));
+        }
+
+        if (this.infoButtonMobile) {
+          this.infoButtonMobile.addEventListener('click', this.togglePopover.bind(this));
+          this.infoButtonMobile.addEventListener('focusout', this.closePopover.bind(this));
+        }
+
+        if (this.infoButtonDesktop && this.mqlTablet.matches) {
+          this.variantInfo.addEventListener('mouseenter', this.togglePopover.bind(this));
+          this.variantInfo.addEventListener('mouseleave', this.closePopover.bind(this));
+        }
+      }
+
+      togglePopover(event) {
+        event.preventDefault();
+        if (event.type === 'mouseenter') {
+          this.eventMouseEnterHappened = true;
+        }
+
+        if (event.type === 'click' && this.eventMouseEnterHappened) return;
+
+        const button = this.infoButtonDesktop && this.mql.matches ? this.infoButtonDesktop : this.infoButtonMobile;
+        const isExpanded = button.getAttribute('aria-expanded') === 'true';
+
+        button.setAttribute('aria-expanded', !isExpanded);
+
+        this.popoverInfo.toggleAttribute('hidden');
+
+        const isOpen = button.getAttribute('aria-expanded') === 'true';
+
+        button.classList.toggle('quantity-popover__info-button--open');
+
+        if (isOpen && event.type !== 'mouseenter') {
+          button.focus();
+        }
+      }
+
+      closePopover(event) {
+        event.preventDefault();
+        const isChild = this.variantInfo.contains(event.relatedTarget);
+
+        const button = this.infoButtonDesktop && this.mql.matches ? this.infoButtonDesktop : this.infoButtonMobile;
+
+        if (!event.relatedTarget || !isChild) {
+          button.setAttribute('aria-expanded', 'false');
+          button.classList.remove('quantity-popover__info-button--open');
+          this.popoverInfo.setAttribute('hidden', '');
+        }
+
+        this.eventMouseEnterHappened = false;
+      }
+    }
+  );
+}

assets/quick-add.css

@@ -0,0 +1,226 @@
+.quick-add {
+  position: relative;
+  grid-row-start: 4;
+  margin: 0 0 1rem;
+  z-index: 1;
+}
+
+.card--card .quick-add {
+  margin: 0 1.3rem 1rem;
+}
+
+.quick-add-modal {
+  box-sizing: border-box;
+  opacity: 0;
+  position: fixed;
+  visibility: hidden;
+  z-index: -1;
+  margin: 0 auto;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: rgba(var(--color-foreground), 0.2);
+  height: 100%;
+}
+
+.quick-add-modal[open] {
+  opacity: 1;
+  visibility: visible;
+  z-index: 101;
+}
+
+.quick-add-modal .scroll-trigger.scroll-trigger {
+  animation: none;
+  opacity: 1;
+}
+
+.quick-add-modal__content {
+  --modal-height-offset: 3.2rem;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  margin: var(--modal-height-offset) auto 0;
+  width: 100%;
+  background-color: rgb(var(--color-background));
+  overflow: hidden;
+  max-width: var(--page-width);
+  width: calc(100% - 3rem);
+}
+
+@media screen and (min-width: 750px) {
+  .quick-add-modal__content {
+    --modal-height-offset: 10rem;
+    margin-top: var(--modal-height-offset);
+    width: 80%;
+    max-height: calc(100% - var(--modal-height-offset) * 2);
+    overflow-y: auto;
+  }
+
+  quick-add-modal .quick-add-modal__toggle {
+    top: 2rem;
+    right: 2rem;
+  }
+}
+
+@media screen and (min-width: 990px) {
+  .quick-add-modal__content {
+    width: 70%;
+  }
+}
+
+.quick-add-modal__content img {
+  max-width: 100%;
+}
+
+.quick-add-modal__content-info {
+  --modal-padding: 2.5rem;
+  padding-right: 4.4rem;
+  display: flex;
+  overflow-y: auto;
+  padding: var(--modal-padding);
+  height: 100%;
+}
+
+.quick-add-modal__content-info > * {
+  height: auto;
+  margin: 0 auto;
+  max-width: 100%;
+  width: 100%;
+}
+
+@media screen and (max-width: 749px) {
+  quick-add-modal .slider .product__media-item.grid__item {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+
+  .quick-add-modal__content {
+    bottom: var(--modal-height-offset);
+  }
+
+  .quick-add-modal__content-info > * {
+    max-height: 100%;
+  }
+
+  quick-add-modal .product--mobile-columns .product__media-item {
+    width: calc(100% - 3rem - var(--grid-mobile-horizontal-spacing));
+  }
+}
+
+.quick-add-modal__toggle {
+  background-color: rgb(var(--color-background));
+  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
+  border-radius: 50%;
+  color: rgba(var(--color-foreground), 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 1.2rem;
+  z-index: 5;
+  width: 4rem;
+  position: fixed;
+  top: 1.5rem;
+  right: 1.5rem;
+}
+
+.quick-add-modal__toggle:hover {
+  color: rgba(var(--color-foreground), 0.75);
+}
+
+.quick-add-modal__toggle .icon {
+  height: auto;
+  margin: 0;
+  width: 2.2rem;
+}
+
+quick-add-modal .product:not(.featured-product) .product__view-details {
+  display: block;
+}
+
+quick-add-modal .quick-add-hidden,
+quick-add-modal .product__modal-opener:not(.product__modal-opener--image),
+quick-add-modal .product__media-item:not(:first-child) {
+  display: none !important;
+}
+
+quick-add-modal .slider.slider--mobile {
+  overflow: visible;
+}
+
+quick-add-modal .product__column-sticky .product__media-list {
+  margin-bottom: 0;
+}
+
+quick-add-modal .product__media-list .deferred-media {
+  display: block;
+  width: 100%;
+}
+
+quick-add-modal .product__column-sticky {
+  top: 0;
+  position: relative;
+}
+
+@media screen and (min-width: 750px) {
+  quick-add-modal .product:not(.product--no-media) .product__media-wrapper {
+    max-width: 45%;
+    width: calc(45% - var(--grid-desktop-horizontal-spacing) / 2);
+  }
+
+  quick-add-modal .product:not(.product--no-media) .product__info-wrapper {
+    padding-left: 4rem;
+    max-width: 54%;
+    width: calc(54% - var(--grid-desktop-horizontal-spacing) / 2);
+  }
+
+  quick-add-modal .product--columns .product__media-item:not(.product__media-item--single):not(:only-child) {
+    max-width: 100%;
+    width: 100%;
+  }
+
+  quick-add-modal .thumbnail-slider .thumbnail-list.slider--tablet-up {
+    display: none;
+  }
+}
+
+quick-add-modal .page-width {
+  padding: 0;
+}
+
+quick-add-modal .product__title > h1 {
+  display: none;
+}
+
+quick-add-modal .product__title > a {
+  display: block;
+  text-decoration: none;
+}
+
+quick-add-modal .product__title > a:hover {
+  color: rgb(var(--color-foreground));
+  text-decoration: underline;
+  text-underline-offset: 0.2rem;
+  text-decoration-thickness: 0.3rem;
+}
+
+quick-add-modal .product-form__buttons {
+  max-width: initial;
+}
+
+.quick-add__submit {
+  padding: 0.8rem;
+  min-width: 100%;
+  box-sizing: border-box;
+}
+
+quick-add-modal .product-media-container.constrain-height {
+  --viewport-offset: calc((var(--modal-height-offset) + var(--modal-padding) + var(--popup-border-width)) * 2);
+}
+
+@media screen and (min-width: 750px) {
+  quick-add-modal .product-media-container.constrain-height {
+    --constrained-min-height: 400px;
+  }
+}

assets/quick-add.js

@@ -0,0 +1,124 @@
+if (!customElements.get('quick-add-modal')) {
+  customElements.define(
+    'quick-add-modal',
+    class QuickAddModal extends ModalDialog {
+      constructor() {
+        super();
+        this.modalContent = this.querySelector('[id^="QuickAddInfo-"]');
+      }
+
+      hide(preventFocus = false) {
+        const cartNotification = document.querySelector('cart-notification') || document.querySelector('cart-drawer');
+        if (cartNotification) cartNotification.setActiveElement(this.openedBy);
+        this.modalContent.innerHTML = '';
+
+        if (preventFocus) this.openedBy = null;
+        super.hide();
+      }
+
+      show(opener) {
+        opener.setAttribute('aria-disabled', true);
+        opener.classList.add('loading');
+        opener.querySelector('.loading__spinner').classList.remove('hidden');
+
+        fetch(opener.getAttribute('data-product-url'))
+          .then((response) => response.text())
+          .then((responseText) => {
+            const responseHTML = new DOMParser().parseFromString(responseText, 'text/html');
+            this.productElement = responseHTML.querySelector('section[id^="MainProduct-"]');
+            this.productElement.classList.forEach((classApplied) => {
+              if (classApplied.startsWith('color-') || classApplied === 'gradient')
+                this.modalContent.classList.add(classApplied);
+            });
+            this.preventDuplicatedIDs();
+            this.removeDOMElements();
+            this.setInnerHTML(this.modalContent, this.productElement.innerHTML);
+
+            if (window.Shopify && Shopify.PaymentButton) {
+              Shopify.PaymentButton.init();
+            }
+
+            if (window.ProductModel) window.ProductModel.loadShopifyXR();
+
+            this.removeGalleryListSemantic();
+            this.updateImageSizes();
+            this.preventVariantURLSwitching();
+            super.show(opener);
+          })
+          .finally(() => {
+            opener.removeAttribute('aria-disabled');
+            opener.classList.remove('loading');
+            opener.querySelector('.loading__spinner').classList.add('hidden');
+          });
+      }
+
+      setInnerHTML(element, html) {
+        element.innerHTML = html;
+
+        // Reinjects the script tags to allow execution. By default, scripts are disabled when using element.innerHTML.
+        element.querySelectorAll('script').forEach((oldScriptTag) => {
+          const newScriptTag = document.createElement('script');
+          Array.from(oldScriptTag.attributes).forEach((attribute) => {
+            newScriptTag.setAttribute(attribute.name, attribute.value);
+          });
+          newScriptTag.appendChild(document.createTextNode(oldScriptTag.innerHTML));
+          oldScriptTag.parentNode.replaceChild(newScriptTag, oldScriptTag);
+        });
+      }
+
+      preventVariantURLSwitching() {
+        const variantPicker = this.modalContent.querySelector('variant-selects');
+        if (!variantPicker) return;
+
+        variantPicker.setAttribute('data-update-url', 'false');
+      }
+
+      removeDOMElements() {
+        const pickupAvailability = this.productElement.querySelector('pickup-availability');
+        if (pickupAvailability) pickupAvailability.remove();
+
+        const productModal = this.productElement.querySelector('product-modal');
+        if (productModal) productModal.remove();
+
+        const modalDialog = this.productElement.querySelectorAll('modal-dialog');
+        if (modalDialog) modalDialog.forEach((modal) => modal.remove());
+      }
+
+      preventDuplicatedIDs() {
+        const sectionId = this.productElement.dataset.section;
+        this.productElement.innerHTML = this.productElement.innerHTML.replaceAll(sectionId, `quickadd-${sectionId}`);
+        this.productElement.querySelectorAll('variant-selects, product-info').forEach((element) => {
+          element.dataset.originalSection = sectionId;
+        });
+      }
+
+      removeGalleryListSemantic() {
+        const galleryList = this.modalContent.querySelector('[id^="Slider-Gallery"]');
+        if (!galleryList) return;
+
+        galleryList.setAttribute('role', 'presentation');
+        galleryList.querySelectorAll('[id^="Slide-"]').forEach((li) => li.setAttribute('role', 'presentation'));
+      }
+
+      updateImageSizes() {
+        const product = this.modalContent.querySelector('.product');
+        const desktopColumns = product.classList.contains('product--columns');
+        if (!desktopColumns) return;
+
+        const mediaImages = product.querySelectorAll('.product__media img');
+        if (!mediaImages.length) return;
+
+        let mediaImageSizes =
+          '(min-width: 1000px) 715px, (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)';
+
+        if (product.classList.contains('product--medium')) {
+          mediaImageSizes = mediaImageSizes.replace('715px', '605px');
+        } else if (product.classList.contains('product--small')) {
+          mediaImageSizes = mediaImageSizes.replace('715px', '495px');
+        }
+
+        mediaImages.forEach((img) => img.setAttribute('sizes', mediaImageSizes));
+      }
+    }
+  );
+}

assets/quick-order-list.css

@@ -0,0 +1,631 @@
+quick-order-list {
+  display: block;
+}
+
+quick-order-list .quantity {
+  width: calc(11rem / var(--font-body-scale) + var(--inputs-border-width) * 2);
+  min-height: calc((var(--inputs-border-width) * 2) + 3.5rem);
+}
+
+quick-order-list .quantity__button {
+  width: calc(3.5rem / var(--font-body-scale));
+}
+
+.quick-order-list__container {
+  padding-bottom: 4rem;
+}
+
+.quick-order-list__container--disabled {
+  pointer-events: none;
+}
+
+.quick-order-list__total {
+  padding-top: 2rem;
+  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
+}
+
+.variant-item__quantity .quantity:before {
+  z-index: 0;
+}
+
+.variant-item__quantity .quantity__button {
+  z-index: 1;
+}
+
+.variant-item__quantity .quantity:before {
+  z-index: 0;
+}
+
+.variant-item__quantity .quantity__button {
+  z-index: 1;
+}
+
+@media screen and (min-width: 990px) {
+  .quick-order-list__total {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+    background-color: rgb(var(--color-background));
+  }
+
+  .variant-item__quantity-wrapper--no-info,
+  .variant-item__error {
+    padding-left: calc(15px + 3.4rem);
+  }
+
+  .variant-item__error {
+    margin-left: 0.3rem;
+  }
+
+  .variant-item--unit-price .variant-item__totals {
+    vertical-align: top;
+  }
+
+  .variant-item--unit-price .variant-item__totals .loading__spinner {
+    padding-top: 1.7rem;
+  }
+}
+
+.quick-order-list__table td,
+.quick-order-list__table th {
+  padding: 0;
+  border: none;
+}
+
+.quick-order-list__table th {
+  text-align: left;
+  padding-bottom: 2rem;
+  opacity: 0.85;
+  font-weight: normal;
+  font-size: 1.1rem;
+}
+
+.variant-item__quantity-wrapper {
+  display: flex;
+}
+
+.variant-item__totals,
+.variant-item__details,
+.variant-item__price {
+  position: relative;
+}
+
+.variant-item__price .price,
+.variant-item__totals .price {
+  display: block;
+}
+
+.quick-order-list__table *.right {
+  text-align: right;
+}
+
+.variant-item__image-container {
+  display: inline-flex;
+  align-items: flex-start;
+  height: 4.5rem;
+  width: 4.5rem;
+}
+
+.variant-item__media {
+  width: 4.5rem;
+  height: 4.5rem;
+  margin-right: 1.2rem;
+}
+
+.variant-item__image {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+
+@media screen and (min-width: 990px) {
+  .variant-item__image {
+    max-width: 100%;
+  }
+
+  .variant-item__inner .small-hide {
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+  }
+
+  .variant-item:not(.variant-item--no-media) .variant-item__inner {
+    display: flex;
+  }
+
+  .variant-item__discounted-prices {
+    justify-content: flex-end;
+  }
+}
+
+.variant-item__details {
+  font-size: 1.6rem;
+  line-height: calc(1 + 0.4 / var(--font-body-scale));
+}
+
+.variant-item__details > * {
+  margin: 0;
+  max-width: 30rem;
+}
+
+.variant-item__info {
+  position: relative;
+  padding-bottom: 0.5rem;
+}
+
+.variant-item__name {
+  display: block;
+  font-size: 1.6rem;
+  letter-spacing: 0.06rem;
+  line-height: calc(1 + 0.5 / var(--font-body-scale));
+}
+
+.variant-item__sku {
+  font-size: 1.1rem;
+  letter-spacing: 0.04rem;
+  margin-top: 0.2rem;
+}
+
+.variant-item__discounted-prices {
+  margin-top: 0;
+  margin-bottom: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.variant-item__discounted-prices dd {
+  margin: 0;
+}
+
+.variant-item__discounted-prices dd:first-of-type {
+  margin-right: 0.8rem;
+}
+
+.variant-item__discounted-prices .variant-item__old-price {
+  font-size: 1.4rem;
+}
+
+.variant-item__old-price {
+  opacity: 0.7;
+}
+
+.variant-item__final-price {
+  font-weight: 400;
+}
+
+.variant-item__sold-out {
+  opacity: 0.7;
+  font-size: 1.6rem;
+  color: rgb(var(--color-foreground));
+}
+
+quick-order-list-remove-button {
+  display: flex;
+  margin: 0 0 0 1.2rem;
+  align-self: center;
+}
+
+.quick-order-list__button-cancel {
+  font-size: 1.5rem;
+  letter-spacing: 0.06rem;
+}
+
+@media screen and (min-width: 750px) and (max-width: 989px) {
+  quick-order-list-remove-button {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  quick-order-list-remove-all-button {
+    margin-left: -1.5rem;
+    margin-top: 1rem;
+  }
+
+  .quick-order-list-total__column {
+    flex-wrap: wrap;
+  }
+
+  .quick-order-list__message,
+  .quick-order-list-error {
+    padding-bottom: 1rem;
+  }
+}
+
+quick-order-list-remove-button .button {
+  min-width: calc(1.5rem / var(--font-body-scale));
+  min-height: 1.5rem;
+  padding: 0;
+  margin: 0 0.1rem 0.1rem 0;
+}
+
+quick-order-list-remove-button .button:not([disabled]):hover {
+  color: rgb(var(--color-foreground));
+}
+
+quick-order-list-remove-button .icon-remove {
+  height: 1.5rem;
+  width: 1.5rem;
+  transition: transform var(--duration-default) ease;
+}
+
+.variant-item .loading__spinner {
+  top: 0;
+  left: auto;
+  right: 0;
+  bottom: 0;
+  padding: 0;
+}
+
+.variant-remove-total {
+  position: relative;
+  align-self: center;
+}
+
+.variant-remove-total .button--tertiary {
+  width: max-content;
+}
+
+.variant-remove-total .icon-remove {
+  width: 1.2rem;
+  height: 1.2rem;
+  margin-right: 0.8rem;
+}
+
+.quick-order-list__message {
+  margin-top: 1rem;
+  display: block;
+}
+
+.quick-order-list__message svg {
+  margin-right: 1rem;
+  width: 1.3rem;
+}
+
+.quick-order-list-error {
+  margin-top: 1rem;
+  display: flex;
+}
+
+.quick-order-list-error svg {
+  flex-shrink: 0;
+  width: 1.2rem;
+  margin-right: 0.7rem;
+  margin-top: 0.3rem;
+  align-self: flex-start;
+}
+
+@media screen and (min-width: 990px) {
+  .variant-item .loading__spinner {
+    padding-top: 3rem;
+    bottom: auto;
+  }
+
+  .variant-item .loading__spinner--error {
+    padding-top: 5rem;
+  }
+
+  .variant-remove-total .loading__spinner {
+    left: 2rem;
+    top: 1.2rem;
+  }
+}
+
+quick-order-list-remove-button:hover .icon-remove {
+  transform: scale(1.25);
+}
+
+.quick-order-list-total__info quick-order-list-remove-all-button:hover {
+  text-decoration: underline;
+  text-underline-offset: 0.3rem;
+}
+
+.variant-remove-total {
+  position: relative;
+  align-self: center;
+}
+
+.variant-item .loading__spinner:not(.hidden) ~ *,
+.variant-remove-total .loading__spinner:not(.hidden) ~ * {
+  visibility: hidden;
+}
+
+.variant-item__error {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 0.2rem;
+  width: min-content;
+  min-width: 100%;
+}
+
+.variant-item__error-text {
+  font-size: 1.2rem;
+  line-height: calc(1 + 0.2 / var(--font-body-scale));
+  order: 1;
+}
+
+.variant-item__error-text + svg {
+  flex-shrink: 0;
+  width: 1.2rem;
+  margin-right: 0.5rem;
+  margin-top: 0.1rem;
+}
+
+.variant-item__error-text:empty + svg {
+  display: none;
+}
+
+.quick-order-list__table thead th {
+  text-transform: uppercase;
+}
+
+.variant-item__image-container--no-img {
+  border: 0;
+}
+
+@media screen and (max-width: 989px) {
+  .quick-order-list-total__info {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .variant-item__details .loading__spinner {
+    left: 0;
+    top: auto;
+  }
+
+  .quick-order-list__table,
+  .quick-order-list__table thead,
+  .quick-order-list__table tbody {
+    display: block;
+    width: 100%;
+  }
+
+  .quick-order-list__table thead tr {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
+    margin-bottom: 4rem;
+  }
+
+  .variant-item {
+    display: grid;
+    grid-template-columns: 4.5rem 1fr;
+    grid-template-rows: repeat(2, auto);
+    gap: 1.5rem;
+    margin-bottom: 3.5rem;
+  }
+
+  .variant-item--no-media {
+    grid-template: repeat(2, auto) / repeat(3, auto);
+  }
+
+  .variant-item:last-child {
+    margin-bottom: 0;
+  }
+
+  .variant-item__totals {
+    grid-column: 5 / 3;
+  }
+
+  .variant-item--no-media .variant-item__inner ~ .variant-item__quantity {
+    grid-column: 1 / 5;
+  }
+
+  .variant-item__quantity {
+    grid-column: 2 / 5;
+  }
+
+  .variant-item__quantity-wrapper {
+    flex-wrap: wrap;
+  }
+
+  .variant-item--no-media .variant-item__inner {
+    display: none;
+  }
+
+  .variant-remove-total {
+    margin-top: 1rem;
+    text-align: center;
+  }
+
+  .quick-order-list__message {
+    text-align: center;
+  }
+
+  .quick-order-list-total__column,
+  .quick-order-list-buttons {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  .quick-order-list__button {
+    max-width: 36rem;
+  }
+}
+
+.quick-order-list-total__confirmation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: -2rem;
+}
+
+@media screen and (min-width: 990px) {
+  .quick-order-list__table {
+    border-spacing: 0;
+    border-collapse: separate;
+    box-shadow: none;
+    width: 100%;
+    display: table;
+  }
+
+  .quick-order-list__table th {
+    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
+  }
+
+  .quick-order-list__table th + th {
+    padding-left: 5.4rem;
+  }
+
+  .quick-order-list__table .quick-order-list__table-heading--wide + .quick-order-list__table-heading--wide {
+    padding-left: 10rem;
+    text-align: right;
+  }
+
+  .quick-order-list__table td {
+    padding-top: 1.6rem;
+  }
+
+  .quick-order-list__table .desktop-row-error td {
+    padding-top: 0;
+  }
+
+  .quick-order-list__table .desktop-row-error td {
+    padding-top: 0;
+  }
+
+  .quick-order-list__table .variant-item--unit-price td {
+    vertical-align: middle;
+  }
+
+  .variant-item {
+    display: table-row;
+  }
+
+  .variant-item .variant-item__price {
+    text-align: right;
+  }
+
+  .variant-item__info {
+    width: 20rem;
+    display: flex;
+    padding: 0.5rem;
+  }
+
+  .quick-order-list-total__confirmation span {
+    margin-right: 3rem;
+  }
+
+  .quick-order-list__total-items {
+    width: calc(((11rem / var(--font-body-scale) + var(--inputs-border-width) * 2)));
+    margin-left: calc(15px + 3.4rem);
+    flex-direction: column;
+  }
+}
+
+@media screen and (min-width: 990px) {
+  .quick-order-list__table thead th:first-child,
+  .quick-order-list-total__column {
+    width: 37%;
+  }
+
+  .quick-order-list-buttons {
+    display: flex;
+  }
+
+  quick-order-list-remove-all-button {
+    margin-left: 0.9rem;
+  }
+}
+
+.quick-order-list__total-items {
+  display: flex;
+  align-items: center;
+}
+
+.quick-order-list__total-items span,
+.totals__subtotal-value {
+  margin-top: 0;
+  margin-bottom: 0;
+  color: rgb(var(--color-foreground));
+}
+
+.quick-order-list__total-items p,
+.totals__subtotal {
+  margin-top: 0.2rem;
+  opacity: 0.75;
+  margin-bottom: 0;
+}
+
+.quick-order-list__total-items p {
+  text-align: center;
+}
+
+.quick-order-list-total__info {
+  display: flex;
+}
+
+.quick-order-list-total__info,
+.quick-order-list-total__confirmation {
+  min-height: 10rem;
+}
+
+.quick-order-list-total__price {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  flex-grow: 1;
+  text-align: right;
+  width: min-content;
+}
+
+.quick-order-list-total__price .button {
+  margin-right: 2rem;
+}
+
+@media screen and (max-width: 989px) {
+  .quick-order-list-total__price {
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+  }
+
+  .totals__product-total {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    align-items: center;
+    padding-bottom: 2rem;
+  }
+
+  .totals__subtotal-value,
+  .quick-order-list__total-items span {
+    margin-right: 1.2rem;
+  }
+
+  .quick-order-list__total-items {
+    margin-top: 1rem;
+    margin-bottom: 1.3rem;
+  }
+
+  .quick-order-list-total__price .button {
+    margin-bottom: 2rem;
+  }
+
+  .quick-order-list-total__confirmation quick-order-list-remove-all-button button {
+    margin-top: 1rem;
+  }
+
+  .quick-order-list-total__confirmation {
+    flex-direction: column;
+    margin-top: 2rem;
+  }
+
+  .quick-order-list__button-confirm {
+    width: 100%;
+    max-width: 36rem;
+  }
+
+  quick-order-list .tax-note {
+    text-align: center;
+  }
+}
+
+quick-order-list .tax-note {
+  margin: 0 0 2rem;
+  display: block;
+  width: 100%;
+}

assets/quick-order-list.js

@@ -0,0 +1,403 @@
+class QuickOrderListRemoveButton extends HTMLElement {
+  constructor() {
+    super();
+    this.addEventListener('click', (event) => {
+      event.preventDefault();
+      const quickOrderList = this.closest('quick-order-list');
+      quickOrderList.updateQuantity(this.dataset.index, 0);
+    });
+  }
+}
+
+customElements.define('quick-order-list-remove-button', QuickOrderListRemoveButton);
+
+class QuickOrderListRemoveAllButton extends HTMLElement {
+  constructor() {
+    super();
+    const allVariants = Array.from(document.querySelectorAll('[data-variant-id]'));
+    const items = {};
+    let hasVariantsInCart = false;
+    this.quickOrderList = this.closest('quick-order-list');
+
+    allVariants.forEach((variant) => {
+      const cartQty = parseInt(variant.dataset.cartQty);
+      if (cartQty > 0) {
+        hasVariantsInCart = true;
+        items[parseInt(variant.dataset.variantId)] = 0;
+      }
+    });
+
+    if (!hasVariantsInCart) {
+      this.classList.add('hidden');
+    }
+
+    this.actions = {
+      confirm: 'confirm',
+      remove: 'remove',
+      cancel: 'cancel',
+    };
+
+    this.addEventListener('click', (event) => {
+      event.preventDefault();
+      if (this.dataset.action === this.actions.confirm) {
+        this.toggleConfirmation(false, true);
+      } else if (this.dataset.action === this.actions.remove) {
+        this.quickOrderList.updateMultipleQty(items);
+        this.toggleConfirmation(true, false);
+      } else if (this.dataset.action === this.actions.cancel) {
+        this.toggleConfirmation(true, false);
+      }
+    });
+  }
+
+  toggleConfirmation(showConfirmation, showInfo) {
+    this.quickOrderList
+      .querySelector('.quick-order-list-total__confirmation')
+      .classList.toggle('hidden', showConfirmation);
+    this.quickOrderList.querySelector('.quick-order-list-total__info').classList.toggle('hidden', showInfo);
+  }
+}
+
+customElements.define('quick-order-list-remove-all-button', QuickOrderListRemoveAllButton);
+
+class QuickOrderList extends HTMLElement {
+  constructor() {
+    super();
+    this.cart = document.querySelector('cart-drawer');
+    this.actions = {
+      add: 'ADD',
+      update: 'UPDATE',
+    };
+    this.quickOrderListId = 'quick-order-list';
+    this.variantItemStatusElement = document.getElementById('shopping-cart-variant-item-status');
+    const form = this.querySelector('form');
+
+    form.addEventListener('submit', this.onSubmit.bind(this));
+
+    const debouncedOnChange = debounce((event) => {
+      this.onChange(event);
+    }, ON_CHANGE_DEBOUNCE_TIMER);
+    this.addEventListener('change', debouncedOnChange.bind(this));
+  }
+
+  cartUpdateUnsubscriber = undefined;
+
+  onSubmit(event) {
+    event.preventDefault();
+  }
+
+  connectedCallback() {
+    this.cartUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.cartUpdate, (event) => {
+      if (event.source === this.quickOrderListId) {
+        return;
+      }
+      // If its another section that made the update
+      this.onCartUpdate();
+    });
+    this.sectionId = this.dataset.id;
+  }
+
+  disconnectedCallback() {
+    if (this.cartUpdateUnsubscriber) {
+      this.cartUpdateUnsubscriber();
+    }
+  }
+
+  onChange(event) {
+    const inputValue = parseInt(event.target.value);
+    const cartQuantity = parseInt(event.target.dataset.cartQuantity);
+    const index = event.target.dataset.index;
+    const name = document.activeElement.getAttribute('name');
+
+    const quantity = inputValue - cartQuantity;
+
+    if (cartQuantity > 0) {
+      this.updateQuantity(index, inputValue, name, this.actions.update);
+    } else {
+      this.updateQuantity(index, quantity, name, this.actions.add);
+    }
+  }
+
+  onCartUpdate() {
+    fetch(`${window.location.pathname}?section_id=${this.sectionId}`)
+      .then((response) => response.text())
+      .then((responseText) => {
+        const html = new DOMParser().parseFromString(responseText, 'text/html');
+        const sourceQty = html.querySelector(this.quickOrderListId);
+        this.innerHTML = sourceQty.innerHTML;
+      })
+      .catch((e) => {
+        console.error(e);
+      });
+  }
+
+  getSectionsToRender() {
+    return [
+      {
+        id: this.quickOrderListId,
+        section: document.getElementById(this.quickOrderListId).dataset.id,
+        selector: '.js-contents',
+      },
+      {
+        id: 'cart-icon-bubble',
+        section: 'cart-icon-bubble',
+        selector: '.shopify-section',
+      },
+      {
+        id: 'quick-order-list-live-region-text',
+        section: 'cart-live-region-text',
+        selector: '.shopify-section',
+      },
+      {
+        id: 'quick-order-list-total',
+        section: document.getElementById(this.quickOrderListId).dataset.id,
+        selector: '.quick-order-list__total',
+      },
+      {
+        id: 'CartDrawer',
+        selector: '#CartDrawer',
+        section: 'cart-drawer',
+      },
+    ];
+  }
+
+  renderSections(parsedState) {
+    this.getSectionsToRender().forEach((section) => {
+      const sectionElement = document.getElementById(section.id);
+      if (sectionElement && sectionElement.parentElement && sectionElement.parentElement.classList.contains('drawer')) {
+        parsedState.items.length > 0
+          ? sectionElement.parentElement.classList.remove('is-empty')
+          : sectionElement.parentElement.classList.add('is-empty');
+
+        setTimeout(() => {
+          document.querySelector('#CartDrawer-Overlay').addEventListener('click', this.cart.close.bind(this.cart));
+        });
+      }
+      const elementToReplace =
+        sectionElement && sectionElement.querySelector(section.selector)
+          ? sectionElement.querySelector(section.selector)
+          : sectionElement;
+      if (elementToReplace) {
+        elementToReplace.innerHTML = this.getSectionInnerHTML(parsedState.sections[section.section], section.selector);
+      }
+    });
+  }
+
+  updateMultipleQty(items) {
+    this.querySelector('.variant-remove-total .loading__spinner').classList.remove('hidden');
+
+    const body = JSON.stringify({
+      updates: items,
+      sections: this.getSectionsToRender().map((section) => section.section),
+      sections_url: window.location.pathname,
+    });
+
+    this.updateMessage();
+    this.setErrorMessage();
+
+    fetch(`${routes.cart_update_url}`, { ...fetchConfig(), ...{ body } })
+      .then((response) => {
+        return response.text();
+      })
+      .then((state) => {
+        const parsedState = JSON.parse(state);
+        this.renderSections(parsedState);
+      })
+      .catch(() => {
+        this.setErrorMessage(window.cartStrings.error);
+      })
+      .finally(() => {
+        this.querySelector('.variant-remove-total .loading__spinner').classList.add('hidden');
+      });
+  }
+
+  updateQuantity(id, quantity, name, action) {
+    this.toggleLoading(id, true);
+
+    let routeUrl = routes.cart_change_url;
+    let body = JSON.stringify({
+      quantity,
+      id,
+      sections: this.getSectionsToRender().map((section) => section.section),
+      sections_url: window.location.pathname,
+    });
+    let fetchConfigType;
+    if (action === this.actions.add) {
+      fetchConfigType = 'javascript';
+      routeUrl = routes.cart_add_url;
+      body = JSON.stringify({
+        items: [
+          {
+            quantity: parseInt(quantity),
+            id: parseInt(id),
+          },
+        ],
+        sections: this.getSectionsToRender().map((section) => section.section),
+        sections_url: window.location.pathname,
+      });
+    }
+
+    this.updateMessage();
+    this.setErrorMessage();
+
+    fetch(`${routeUrl}`, { ...fetchConfig(fetchConfigType), ...{ body } })
+      .then((response) => {
+        return response.text();
+      })
+      .then((state) => {
+        const parsedState = JSON.parse(state);
+        const quantityElement = document.getElementById(`Quantity-${id}`);
+        const items = document.querySelectorAll('.variant-item');
+
+        if (parsedState.description || parsedState.errors) {
+          const variantItem = document.querySelector(
+            `[id^="Variant-${id}"] .variant-item__totals.small-hide .loading__spinner`
+          );
+          variantItem.classList.add('loading__spinner--error');
+          this.resetQuantityInput(id, quantityElement);
+          if (parsedState.errors) {
+            this.updateLiveRegions(id, parsedState.errors);
+          } else {
+            this.updateLiveRegions(id, parsedState.description);
+          }
+          return;
+        }
+
+        this.classList.toggle('is-empty', parsedState.item_count === 0);
+
+        this.renderSections(parsedState);
+
+        let hasError = false;
+
+        const currentItem = parsedState.items.find((item) => item.variant_id === parseInt(id));
+        const updatedValue = currentItem ? currentItem.quantity : undefined;
+        if (updatedValue && updatedValue !== quantity) {
+          this.updateError(updatedValue, id);
+          hasError = true;
+        }
+
+        const variantItem = document.getElementById(`Variant-${id}`);
+        if (variantItem && variantItem.querySelector(`[name="${name}"]`)) {
+          variantItem.querySelector(`[name="${name}"]`).focus();
+        }
+        publish(PUB_SUB_EVENTS.cartUpdate, { source: this.quickOrderListId, cartData: parsedState });
+
+        if (hasError) {
+          this.updateMessage();
+        } else if (action === this.actions.add) {
+          this.updateMessage(parseInt(quantity));
+        } else if (action === this.actions.update) {
+          this.updateMessage(parseInt(quantity - quantityElement.dataset.cartQuantity));
+        } else {
+          this.updateMessage(-parseInt(quantityElement.dataset.cartQuantity));
+        }
+      })
+      .catch((error) => {
+        this.querySelectorAll('.loading__spinner').forEach((overlay) => overlay.classList.add('hidden'));
+        this.resetQuantityInput(id);
+        console.error(error);
+        this.setErrorMessage(window.cartStrings.error);
+      })
+      .finally(() => {
+        this.toggleLoading(id);
+      });
+  }
+
+  resetQuantityInput(id, quantityElement) {
+    const input = quantityElement ?? document.getElementById(`Quantity-${id}`);
+    input.value = input.getAttribute('value');
+  }
+
+  setErrorMessage(message = null) {
+    this.errorMessageTemplate =
+      this.errorMessageTemplate ??
+      document.getElementById(`QuickOrderListErrorTemplate-${this.sectionId}`).cloneNode(true);
+    const errorElements = document.querySelectorAll('.quick-order-list-error');
+
+    errorElements.forEach((errorElement) => {
+      errorElement.innerHTML = '';
+      if (!message) return;
+      const updatedMessageElement = this.errorMessageTemplate.cloneNode(true);
+      updatedMessageElement.content.querySelector('.quick-order-list-error-message').innerText = message;
+      errorElement.appendChild(updatedMessageElement.content);
+    });
+  }
+
+  updateMessage(quantity = null) {
+    const messages = this.querySelectorAll('.quick-order-list__message-text');
+    const icons = this.querySelectorAll('.quick-order-list__message-icon');
+
+    if (quantity === null || isNaN(quantity)) {
+      messages.forEach((message) => (message.innerHTML = ''));
+      icons.forEach((icon) => icon.classList.add('hidden'));
+      return;
+    }
+
+    const isQuantityNegative = quantity < 0;
+    const absQuantity = Math.abs(quantity);
+
+    const textTemplate = isQuantityNegative
+      ? absQuantity === 1
+        ? window.quickOrderListStrings.itemRemoved
+        : window.quickOrderListStrings.itemsRemoved
+      : quantity === 1
+      ? window.quickOrderListStrings.itemAdded
+      : window.quickOrderListStrings.itemsAdded;
+
+    messages.forEach((msg) => (msg.innerHTML = textTemplate.replace('[quantity]', absQuantity)));
+
+    if (!isQuantityNegative) {
+      icons.forEach((i) => i.classList.remove('hidden'));
+    }
+  }
+
+  updateError(updatedValue, id) {
+    let message = '';
+    if (typeof updatedValue === 'undefined') {
+      message = window.cartStrings.error;
+    } else {
+      message = window.cartStrings.quantityError.replace('[quantity]', updatedValue);
+    }
+    this.updateLiveRegions(id, message);
+  }
+
+  updateLiveRegions(id, message) {
+    const variantItemErrorDesktop = document.getElementById(`Quick-order-list-item-error-desktop-${id}`);
+    const variantItemErrorMobile = document.getElementById(`Quick-order-list-item-error-mobile-${id}`);
+    if (variantItemErrorDesktop) {
+      variantItemErrorDesktop.querySelector('.variant-item__error-text').innerHTML = message;
+      variantItemErrorDesktop.closest('tr').classList.remove('hidden');
+    }
+    if (variantItemErrorMobile) variantItemErrorMobile.querySelector('.variant-item__error-text').innerHTML = message;
+
+    this.variantItemStatusElement.setAttribute('aria-hidden', true);
+
+    const cartStatus = document.getElementById('quick-order-list-live-region-text');
+    cartStatus.setAttribute('aria-hidden', false);
+
+    setTimeout(() => {
+      cartStatus.setAttribute('aria-hidden', true);
+    }, 1000);
+  }
+
+  getSectionInnerHTML(html, selector) {
+    return new DOMParser().parseFromString(html, 'text/html').querySelector(selector).innerHTML;
+  }
+
+  toggleLoading(id, enable) {
+    const quickOrderList = document.getElementById(this.quickOrderListId);
+    const quickOrderListItems = this.querySelectorAll(`#Variant-${id} .loading__spinner`);
+
+    if (enable) {
+      quickOrderList.classList.add('quick-order-list__container--disabled');
+      [...quickOrderListItems].forEach((overlay) => overlay.classList.remove('hidden'));
+      document.activeElement.blur();
+      this.variantItemStatusElement.setAttribute('aria-hidden', false);
+    } else {
+      quickOrderList.classList.remove('quick-order-list__container--disabled');
+      quickOrderListItems.forEach((overlay) => overlay.classList.add('hidden'));
+    }
+  }
+}
+
+customElements.define('quick-order-list', QuickOrderList);

assets/recipient-form.js

@@ -0,0 +1,165 @@
+if (!customElements.get('recipient-form')) {
+  customElements.define(
+    'recipient-form',
+    class RecipientForm extends HTMLElement {
+      constructor() {
+        super();
+        this.recipientFieldsLiveRegion = this.querySelector(`#Recipient-fields-live-region-${this.dataset.sectionId}`);
+        this.checkboxInput = this.querySelector(`#Recipient-checkbox-${this.dataset.sectionId}`);
+        this.checkboxInput.disabled = false;
+        this.hiddenControlField = this.querySelector(`#Recipient-control-${this.dataset.sectionId}`);
+        this.hiddenControlField.disabled = true;
+        this.emailInput = this.querySelector(`#Recipient-email-${this.dataset.sectionId}`);
+        this.nameInput = this.querySelector(`#Recipient-name-${this.dataset.sectionId}`);
+        this.messageInput = this.querySelector(`#Recipient-message-${this.dataset.sectionId}`);
+        this.sendonInput = this.querySelector(`#Recipient-send-on-${this.dataset.sectionId}`);
+        this.offsetProperty = this.querySelector(`#Recipient-timezone-offset-${this.dataset.sectionId}`);
+        if (this.offsetProperty) this.offsetProperty.value = new Date().getTimezoneOffset().toString();
+
+        this.errorMessageWrapper = this.querySelector('.product-form__recipient-error-message-wrapper');
+        this.errorMessageList = this.errorMessageWrapper?.querySelector('ul');
+        this.errorMessage = this.errorMessageWrapper?.querySelector('.error-message');
+        this.defaultErrorHeader = this.errorMessage?.innerText;
+        this.currentProductVariantId = this.dataset.productVariantId;
+        this.addEventListener('change', this.onChange.bind(this));
+        this.onChange();
+      }
+
+      cartUpdateUnsubscriber = undefined;
+      variantChangeUnsubscriber = undefined;
+      cartErrorUnsubscriber = undefined;
+
+      connectedCallback() {
+        this.cartUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.cartUpdate, (event) => {
+          if (event.source === 'product-form' && event.productVariantId.toString() === this.currentProductVariantId) {
+            this.resetRecipientForm();
+          }
+        });
+
+        this.variantChangeUnsubscriber = subscribe(PUB_SUB_EVENTS.variantChange, (event) => {
+          if (event.data.sectionId === this.dataset.sectionId) {
+            this.currentProductVariantId = event.data.variant.id.toString();
+          }
+        });
+
+        this.cartUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.cartError, (event) => {
+          if (event.source === 'product-form' && event.productVariantId.toString() === this.currentProductVariantId) {
+            this.displayErrorMessage(event.message, event.errors);
+          }
+        });
+      }
+
+      disconnectedCallback() {
+        if (this.cartUpdateUnsubscriber) {
+          this.cartUpdateUnsubscriber();
+        }
+
+        if (this.variantChangeUnsubscriber) {
+          this.variantChangeUnsubscriber();
+        }
+
+        if (this.cartErrorUnsubscriber) {
+          this.cartErrorUnsubscriber();
+        }
+      }
+
+      onChange() {
+        if (this.checkboxInput.checked) {
+          this.enableInputFields();
+          this.recipientFieldsLiveRegion.innerText = window.accessibilityStrings.recipientFormExpanded;
+        } else {
+          this.clearInputFields();
+          this.disableInputFields();
+          this.clearErrorMessage();
+          this.recipientFieldsLiveRegion.innerText = window.accessibilityStrings.recipientFormCollapsed;
+        }
+      }
+
+      inputFields() {
+        return [this.emailInput, this.nameInput, this.messageInput, this.sendonInput];
+      }
+
+      disableableFields() {
+        return [...this.inputFields(), this.offsetProperty];
+      }
+
+      clearInputFields() {
+        this.inputFields().forEach((field) => (field.value = ''));
+      }
+
+      enableInputFields() {
+        this.disableableFields().forEach((field) => (field.disabled = false));
+      }
+
+      disableInputFields() {
+        this.disableableFields().forEach((field) => (field.disabled = true));
+      }
+
+      displayErrorMessage(title, body) {
+        this.clearErrorMessage();
+        this.errorMessageWrapper.hidden = false;
+        if (typeof body === 'object') {
+          this.errorMessage.innerText = this.defaultErrorHeader;
+          return Object.entries(body).forEach(([key, value]) => {
+            const errorMessageId = `RecipientForm-${key}-error-${this.dataset.sectionId}`;
+            const fieldSelector = `#Recipient-${key}-${this.dataset.sectionId}`;
+            const message = `${value.join(', ')}`;
+            const errorMessageElement = this.querySelector(`#${errorMessageId}`);
+            const errorTextElement = errorMessageElement?.querySelector('.error-message');
+            if (!errorTextElement) return;
+
+            if (this.errorMessageList) {
+              this.errorMessageList.appendChild(this.createErrorListItem(fieldSelector, message));
+            }
+
+            errorTextElement.innerText = `${message}.`;
+            errorMessageElement.classList.remove('hidden');
+
+            const inputElement = this[`${key}Input`];
+            if (!inputElement) return;
+
+            inputElement.setAttribute('aria-invalid', true);
+            inputElement.setAttribute('aria-describedby', errorMessageId);
+          });
+        }
+
+        this.errorMessage.innerText = body;
+      }
+
+      createErrorListItem(target, message) {
+        const li = document.createElement('li');
+        const a = document.createElement('a');
+        a.setAttribute('href', target);
+        a.innerText = message;
+        li.appendChild(a);
+        li.className = 'error-message';
+        return li;
+      }
+
+      clearErrorMessage() {
+        this.errorMessageWrapper.hidden = true;
+
+        if (this.errorMessageList) this.errorMessageList.innerHTML = '';
+
+        this.querySelectorAll('.recipient-fields .form__message').forEach((field) => {
+          field.classList.add('hidden');
+          const textField = field.querySelector('.error-message');
+          if (textField) textField.innerText = '';
+        });
+
+        [this.emailInput, this.messageInput, this.nameInput, this.sendonInput].forEach((inputElement) => {
+          inputElement.setAttribute('aria-invalid', false);
+          inputElement.removeAttribute('aria-describedby');
+        });
+      }
+
+      resetRecipientForm() {
+        if (this.checkboxInput.checked) {
+          this.checkboxInput.checked = false;
+          this.clearInputFields();
+          this.clearErrorMessage();
+        }
+      }
+    }
+  );
+}

assets/search-form.js

@@ -0,0 +1,47 @@
+class SearchForm extends HTMLElement {
+  constructor() {
+    super();
+    this.input = this.querySelector('input[type="search"]');
+    this.resetButton = this.querySelector('button[type="reset"]');
+
+    if (this.input) {
+      this.input.form.addEventListener('reset', this.onFormReset.bind(this));
+      this.input.addEventListener(
+        'input',
+        debounce((event) => {
+          this.onChange(event);
+        }, 300).bind(this)
+      );
+    }
+  }
+
+  toggleResetButton() {
+    const resetIsHidden = this.resetButton.classList.contains('hidden');
+    if (this.input.value.length > 0 && resetIsHidden) {
+      this.resetButton.classList.remove('hidden');
+    } else if (this.input.value.length === 0 && !resetIsHidden) {
+      this.resetButton.classList.add('hidden');
+    }
+  }
+
+  onChange() {
+    this.toggleResetButton();
+  }
+
+  shouldResetForm() {
+    return !document.querySelector('[aria-selected="true"] a');
+  }
+
+  onFormReset(event) {
+    // Prevent default so the form reset doesn't set the value gotten from the url on page load
+    event.preventDefault();
+    // Don't reset if the user has selected an element on the predictive search dropdown
+    if (this.shouldResetForm()) {
+      this.input.value = '';
+      this.input.focus();
+      this.toggleResetButton();
+    }
+  }
+}
+
+customElements.define('search-form', SearchForm);

assets/section-blog-post.css

@@ -0,0 +1,175 @@
+.article-template > *:first-child:not(.article-template__hero-container) {
+  margin-top: 5rem;
+}
+
+@media screen and (min-width: 750px) {
+  .article-template > *:first-child:not(.article-template__hero-container) {
+    margin-top: calc(5rem + var(--page-width-margin));
+  }
+}
+
+.article-template__hero-container {
+  max-width: 130rem;
+  margin: 0 auto;
+}
+
+.article-template__hero-small {
+  height: 11rem;
+}
+
+.article-template__hero-medium {
+  height: 22rem;
+}
+
+.article-template__hero-large {
+  height: 33rem;
+}
+
+@media screen and (min-width: 750px) and (max-width: 989px) {
+  .article-template__hero-small {
+    height: 22rem;
+  }
+
+  .article-template__hero-medium {
+    height: 44rem;
+  }
+
+  .article-template__hero-large {
+    height: 66rem;
+  }
+}
+
+@media screen and (min-width: 990px) {
+  .article-template__hero-small {
+    height: 27.5rem;
+  }
+
+  .article-template__hero-medium {
+    height: 55rem;
+  }
+
+  .article-template__hero-large {
+    height: 82.5rem;
+  }
+}
+
+.article-template header {
+  margin-top: 4.4rem;
+  margin-bottom: 2rem;
+  line-height: calc(0.8 / var(--font-body-scale));
+}
+
+@media screen and (min-width: 750px) {
+  .article-template header {
+    margin-top: 5rem;
+  }
+}
+
+.article-template__title {
+  margin: 0;
+}
+
+.article-template__title:not(:only-child) {
+  margin-bottom: 1rem;
+}
+
+.article-template__link {
+  font-size: 1.8rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+}
+
+.article-template__link .icon-wrap {
+  display: flex;
+  margin-right: 1rem;
+  transform: rotate(180deg);
+}
+
+.article-template__content {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
+.article-template__social-sharing {
+  margin-top: 3rem;
+}
+
+.article-template__social-sharing + header,
+.article-template__social-sharing + .article-template__content {
+  margin-top: 1.5rem;
+}
+
+.article-template__comment-wrapper {
+  margin-top: 5rem;
+  padding: 2.7rem 0;
+}
+
+@media screen and (min-width: 750px) {
+  .article-template__comment-wrapper {
+    margin-top: 6rem;
+    padding: 3.6rem 0;
+  }
+}
+
+.article-template__comment-wrapper h2 {
+  margin-top: 0;
+}
+
+.article-template__comments {
+  margin-bottom: 5rem;
+}
+
+@media screen and (min-width: 750px) {
+  .article-template__comments {
+    margin-bottom: 7rem;
+  }
+}
+
+.article-template__comments-fields {
+  margin-bottom: 4rem;
+}
+
+.article-template__comments-comment {
+  color: rgba(var(--color-foreground), 0.75);
+  background-color: rgb(var(--color-background));
+  margin-bottom: 1.5rem;
+  padding: 2rem 2rem 1.5rem;
+}
+
+@media screen and (min-width: 750px) {
+  .article-template__comments-comment {
+    padding: 2rem 2.5rem;
+  }
+}
+
+.article-template__comments-comment p {
+  margin: 0 0 1rem;
+}
+
+.article-template__comment-fields > * {
+  margin-bottom: 3rem;
+}
+
+@media screen and (min-width: 750px) {
+  .article-template__comment-fields {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-column-gap: 4rem;
+  }
+}
+
+.article-template__comment-warning {
+  margin: 2rem 0 2.5rem;
+}
+
+@media screen and (min-width: 990px) {
+  .article-template__comments .pagination-wrapper {
+    margin: 5rem 0 8rem;
+  }
+}
+
+.article-template__back:last-child {
+  margin-bottom: 3.2rem;
+}

assets/section-collection-list.css

@@ -0,0 +1,61 @@
+.collection-list {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.collection-list-title {
+  margin: 0;
+}
+
+@media screen and (max-width: 749px) {
+  .collection-list:not(.slider) {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .section-collection-list .page-width {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .section-collection-list .collection-list:not(.slider) {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+.collection-list__item:only-child {
+  max-width: 100%;
+  width: 100%;
+}
+
+@media screen and (max-width: 749px) {
+  .slider.collection-list--1-items {
+    padding-bottom: 0;
+  }
+}
+
+@media screen and (min-width: 750px) and (max-width: 989px) {
+  .slider.collection-list--1-items,
+  .slider.collection-list--2-items,
+  .slider.collection-list--3-items,
+  .slider.collection-list--4-items {
+    padding-bottom: 0;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .collection-list__item a:hover {
+    box-shadow: none;
+  }
+}
+
+@media screen and (max-width: 989px) {
+  .collection-list.slider .collection-list__item {
+    max-width: 100%;
+  }
+}
+
+.collection-list-view-all {
+  margin-top: 2rem;
+}

assets/section-contact-form.css

@@ -0,0 +1,39 @@
+.contact img {
+  max-width: 100%;
+}
+
+.contact .form__message {
+  align-items: flex-start;
+}
+
+.contact .icon-success {
+  margin-top: 0.2rem;
+}
+
+.contact .field {
+  margin-bottom: 1.5rem;
+}
+
+@media screen and (min-width: 750px) {
+  .contact .field {
+    margin-bottom: 2rem;
+  }
+}
+
+.contact__button {
+  margin-top: 3rem;
+}
+
+@media screen and (min-width: 750px) {
+  .contact__button {
+    margin-top: 4rem;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .contact__fields {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-column-gap: 2rem;
+  }
+}

assets/section-email-signup-banner.css

@@ -0,0 +1,98 @@
+.email-signup-banner .newsletter-form,
+.email-signup-banner .newsletter-form__field-wrapper {
+  display: inline-block;
+}
+
+@media only screen and (min-width: 750px) {
+  .email-signup-banner:not(.banner--desktop-transparent) .email-signup-banner__box {
+    width: 100%;
+  }
+}
+
+.email-signup-banner__box .email-signup-banner__heading {
+  margin-bottom: 0;
+}
+
+.email-signup-banner__box > * + .newsletter__subheading {
+  margin-top: 2rem;
+}
+
+.email-signup-banner__box .newsletter__subheading p {
+  margin: 0;
+}
+
+.email-signup-banner-background {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+@media screen and (max-width: 749px) {
+  .email-signup-banner:not(.banner--mobile-bottom) .banner__box:not(.email-signup-banner__box--no-image) {
+    background-color: transparent;
+    --color-foreground: 255, 255, 255;
+    --color-button: 255, 255, 255;
+    --color-button-text: 0, 0, 0;
+  }
+}
+
+@media only screen and (min-width: 750px) {
+  .banner--desktop-transparent .email-signup-banner__box--no-image * {
+    color: rgb(var(--color-foreground));
+  }
+
+  .banner--desktop-transparent .email-signup-banner__box .field__input {
+    background-color: transparent;
+  }
+
+  .banner--desktop-transparent .email-signup-banner__box--no-image .field__input {
+    box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55);
+  }
+
+  .banner--desktop-transparent .email-signup-banner__box--no-image .field__input:focus {
+    box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.75);
+  }
+
+  .banner--desktop-transparent .email-signup-banner__box--no-image .field__button:focus-visible {
+    outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
+    box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
+  }
+}
+
+@media only screen and (min-width: 750px) {
+  .email-signup-banner-background-mobile {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 749px) {
+  .email-signup-banner-background:not(.email-signup-banner-background-mobile) {
+    display: none;
+  }
+}
+
+.email-signup-banner .banner__media {
+  overflow: hidden;
+}
+
+@media screen and (max-width: 749px) {
+  .banner--mobile-content-align-left .newsletter-form__message {
+    justify-content: flex-start;
+  }
+
+  .banner--mobile-content-align-right .newsletter-form__message {
+    justify-content: right;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .banner--content-align-center .newsletter-form__message {
+    justify-content: center;
+  }
+
+  .banner--content-align-right .newsletter-form__message {
+    justify-content: right;
+  }
+}

assets/section-featured-blog.css

@@ -0,0 +1,60 @@
+.blog-placeholder-svg {
+  height: 100%;
+}
+
+@media screen and (min-width: 990px) {
+  .grid--1-col-desktop .article-card .card__content {
+    text-align: center;
+  }
+}
+
+.blog__title {
+  margin: 0;
+}
+
+.blog__posts.articles-wrapper {
+  margin-bottom: 1rem;
+}
+
+@media screen and (min-width: 990px) {
+  .blog__posts.articles-wrapper {
+    margin-bottom: 0;
+  }
+}
+
+.blog__posts.articles-wrapper .article {
+  scroll-snap-align: start;
+}
+
+@media screen and (max-width: 749px) {
+  .blog__post.article {
+    width: calc(100% - 3rem - var(--grid-mobile-horizontal-spacing));
+  }
+}
+
+.background-secondary .blog-placeholder__content {
+  background-color: rgb(var(--color-background));
+}
+
+.blog__posts .card-wrapper {
+  width: 100%;
+}
+
+.blog__button {
+  margin-top: 3rem;
+}
+
+@media screen and (min-width: 750px) {
+  .blog__button {
+    margin-top: 5rem;
+  }
+}
+
+/* check for flexbox gap in older Safari versions */
+@supports not (inset: 10px) {
+  @media screen and (min-width: 750px) {
+    .blog__posts .article + .article {
+      margin-left: var(--grid-desktop-horizontal-spacing);
+    }
+  }
+}

assets/section-featured-product.css

@@ -0,0 +1,76 @@
+.featured-product .product__media-list {
+  width: 100%;
+  margin: 0;
+  padding-bottom: 0;
+}
+
+.featured-product .product-media-container {
+  margin-bottom: var(--media-shadow-vertical-offset);
+  max-width: 100%;
+}
+
+.featured-product .product__media-item {
+  padding-left: 0;
+  width: 100%;
+}
+
+.featured-product .product__media-item:not(:first-child) {
+  display: none;
+}
+
+.featured-product .placeholder-svg {
+  display: block;
+  height: auto;
+  width: 100%;
+}
+
+.background-secondary .featured-product {
+  padding: 2.5rem;
+}
+
+.featured-product .share-button:nth-last-child(2) {
+  display: inline-flex;
+}
+
+.share-button + .product__view-details {
+  display: inline-flex;
+  float: right;
+  align-items: center;
+  min-height: 4.4rem;
+}
+
+.share-button + .product__view-details::after {
+  content: '';
+  clear: both;
+  display: table;
+}
+
+@media screen and (min-width: 750px) {
+  .featured-product .product__media-item {
+    padding-bottom: 0;
+  }
+
+  .background-secondary .featured-product {
+    padding: 5rem;
+  }
+}
+
+@media screen and (min-width: 990px) {
+  .background-secondary .featured-product:not(.product--no-media) > .product__info-wrapper {
+    padding: 0 0 0 5rem;
+  }
+
+  .background-secondary .featured-product:not(.product--no-media).product--right > .product__info-wrapper {
+    padding: 0 5rem 0 0;
+  }
+
+  .featured-product:not(.product--no-media) > .product__info-wrapper {
+    padding: 0 7rem;
+  }
+
+  .background-secondary .featured-product {
+    padding: 6rem 7rem;
+    position: relative;
+    z-index: 1;
+  }
+}

assets/section-footer.css

@@ -0,0 +1,516 @@
+.footer {
+  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
+}
+
+.footer:not(.color-scheme-1) {
+  border-top: none;
+}
+
+.footer__content-top {
+  padding-bottom: 5rem;
+  display: block;
+}
+
+@media screen and (max-width: 749px) {
+  .footer .grid {
+    display: block;
+  }
+
+  .footer-block.grid__item {
+    padding: 0;
+    margin: 4rem 0;
+    width: 100%;
+  }
+
+  .footer-block.grid__item:first-child {
+    margin-top: 0;
+  }
+
+  .footer__content-top {
+    padding-bottom: 3rem;
+    padding-left: calc(4rem / var(--font-body-scale));
+    padding-right: calc(4rem / var(--font-body-scale));
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .footer__content-top .grid {
+    row-gap: 6rem;
+    margin-bottom: 0;
+  }
+}
+
+.footer__content-bottom {
+  border-top: solid 0.1rem rgba(var(--color-foreground), 0.08);
+  padding-top: 3rem;
+}
+
+.footer__content-bottom:only-child {
+  border-top: 0;
+}
+
+.footer__content-bottom-wrapper {
+  display: flex;
+  width: 100%;
+}
+
+@media screen and (max-width: 749px) {
+  .footer__content-bottom {
+    flex-wrap: wrap;
+    padding-top: 0;
+    padding-left: 0;
+    padding-right: 0;
+    row-gap: 1.5rem;
+  }
+
+  .footer__content-bottom-wrapper {
+    flex-wrap: wrap;
+    row-gap: 1.5rem;
+    justify-content: center;
+  }
+
+  .footer__content-bottom.scroll-trigger.animate--slide-in {
+    animation: none;
+    opacity: 1;
+    transform: inherit;
+  }
+}
+
+.footer__localization:empty + .footer__column--info {
+  align-items: center;
+}
+
+@media screen and (max-width: 749px) {
+  .footer__localization:empty + .footer__column {
+    padding-top: 1.5rem;
+  }
+}
+
+.footer__column {
+  width: 100%;
+  align-items: flex-end;
+}
+
+.footer__column--info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+@media screen and (min-width: 750px) {
+  .footer__column--info {
+    padding-left: 0;
+    padding-right: 0;
+    align-items: flex-end;
+  }
+}
+
+.footer-block:only-child:last-child {
+  text-align: center;
+  max-width: 76rem;
+  margin: 0 auto;
+}
+
+@media screen and (min-width: 750px) {
+  .footer-block {
+    display: block;
+    margin-top: 0;
+  }
+}
+
+.footer-block:empty {
+  display: none;
+}
+
+.footer-block--newsletter {
+  display: flex;
+  align-items: flex-end;
+  margin-top: 3rem;
+  gap: 1rem;
+}
+
+.footer-block--newsletter:only-child {
+  margin-top: 0;
+}
+
+@media screen and (max-width: 749px) {
+  .footer-block.footer-block--menu:only-child {
+    text-align: left;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .footer-block--newsletter {
+    flex-wrap: nowrap;
+    justify-content: center;
+  }
+}
+
+.footer-block__heading {
+  margin-bottom: 2rem;
+  margin-top: 0;
+  font-size: calc(var(--font-heading-scale) * 1.6rem);
+}
+
+@media screen and (min-width: 990px) {
+  .footer-block__heading {
+    font-size: calc(var(--font-heading-scale) * 1.8rem);
+  }
+}
+
+.footer__list-social:empty,
+.footer-block--newsletter:empty {
+  display: none;
+}
+
+.footer__follow-on-shop {
+  display: flex;
+  text-align: center;
+}
+
+.footer__list-social.list-social:only-child {
+  justify-content: center;
+}
+
+.footer-block__newsletter {
+  text-align: center;
+  flex-grow: 1;
+}
+
+.newsletter-form__field-wrapper {
+  max-width: 36rem;
+}
+
+@media screen and (min-width: 750px) {
+  /* Pushes other components to the right of the flexbox */
+  .footer-block__newsletter:not(:only-child) {
+    text-align: left;
+    margin-right: auto;
+  }
+
+  .footer-block__newsletter:not(:only-child) .footer__newsletter {
+    justify-content: flex-start;
+    margin: 0;
+  }
+
+  .footer-block__newsletter:not(:only-child) .newsletter-form__message--success {
+    left: auto;
+  }
+
+  .footer__follow-on-shop {
+    margin-bottom: 0.4rem;
+  }
+  /* Follow on shop is the first button but it has siblings*/
+  .footer__follow-on-shop:first-child:not(:last-child) {
+    justify-content: flex-start;
+    margin-right: auto;
+    text-align: left;
+  }
+
+  /*
+    All three components are present, email, Follow on Shop, and social icons.
+    Moves the FoS button next to the social icons so they appear grouped together
+  */
+  .footer__follow-on-shop:not(:first-child):not(:last-child) {
+    justify-content: flex-end;
+    text-align: right;
+  }
+}
+
+@media screen and (max-width: 749px) {
+  /*
+    On a small screen we want all the items to be centered
+    because they will be stacked.
+   */
+  .footer-block--newsletter {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 100%;
+    align-items: center;
+    gap: 3rem;
+  }
+
+  .footer__list-social.list-social,
+  .footer__follow-on-shop,
+  .footer-block__newsletter {
+    display: flex;
+    justify-content: center;
+  }
+
+  .footer-block__newsletter {
+    flex-direction: column;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .footer-block__newsletter + .footer__list-social {
+    margin-top: 0;
+  }
+}
+
+.footer__localization {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+  flex-wrap: wrap;
+  padding: 1rem 1rem 0;
+}
+
+.footer__localization:empty {
+  display: none;
+}
+
+.footer__localization h2 {
+  margin: 1rem 1rem 0.5rem;
+  color: rgba(var(--color-foreground), 0.75);
+}
+
+@media screen and (min-width: 750px) {
+  .footer__localization {
+    padding: 0.4rem 0;
+    justify-content: flex-start;
+  }
+
+  .footer__localization h2 {
+    margin: 1rem 0 0;
+  }
+}
+
+@media screen and (max-width: 989px) {
+  .footer__localization noscript {
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .footer__payment {
+    margin-top: 1.5rem;
+  }
+}
+
+.footer__content-bottom-wrapper--center {
+  justify-content: center;
+}
+
+.footer__copyright {
+  text-align: center;
+  margin-top: 1.5rem;
+}
+
+@media screen and (min-width: 750px) {
+  .footer__content-bottom-wrapper:not(.footer__content-bottom-wrapper--center) .footer__copyright {
+    text-align: right;
+  }
+}
+
+@keyframes appear-down {
+  0% {
+    opacity: 0;
+    margin-top: -1rem;
+  }
+  100% {
+    opacity: 1;
+    margin-top: 0;
+  }
+}
+
+.footer-block__details-content {
+  margin-bottom: 4rem;
+}
+
+@media screen and (min-width: 750px) {
+  .footer-block__details-content {
+    margin-bottom: 0;
+  }
+
+  .footer-block__details-content > p,
+  .footer-block__details-content > li {
+    padding: 0;
+  }
+
+  .footer-block:only-child li {
+    display: inline;
+  }
+
+  .footer-block__details-content > li:not(:last-child) {
+    margin-right: 1.5rem;
+  }
+}
+
+.footer-block__details-content .list-menu__item--link,
+.copyright__content a {
+  color: rgba(var(--color-foreground), 0.75);
+}
+
+.footer-block__details-content .list-menu__item--active {
+  transition: text-decoration-thickness var(--duration-short) ease;
+  color: rgb(var(--color-foreground));
+}
+
+@media screen and (min-width: 750px) {
+  .footer-block__details-content .list-menu__item--link:hover,
+  .copyright__content a:hover {
+    color: rgb(var(--color-foreground));
+    text-decoration: underline;
+    text-underline-offset: 0.3rem;
+  }
+
+  .footer-block__details-content .list-menu__item--active:hover {
+    text-decoration-thickness: 0.2rem;
+  }
+}
+
+@media screen and (max-width: 989px) {
+  .footer-block__details-content .list-menu__item--link {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .footer-block__details-content .list-menu__item--link {
+    display: inline-block;
+    font-size: 1.4rem;
+  }
+
+  .footer-block__details-content > :first-child .list-menu__item--link {
+    padding-top: 0;
+  }
+}
+
+.footer-block-image {
+  display: flex;
+}
+
+.footer-block-image.left {
+  justify-content: flex-start;
+}
+
+.footer-block-image.center {
+  justify-content: center;
+}
+
+.footer-block-image.right {
+  justify-content: flex-end;
+}
+
+@media screen and (max-width: 749px) {
+  .footer-block-image,
+  .footer-block-image.left,
+  .footer-block-image.center,
+  .footer-block-image.right {
+    justify-content: center;
+  }
+}
+
+.footer-block__image-wrapper {
+  margin-bottom: 2rem;
+  overflow: hidden !important;
+}
+
+.footer-block__image-wrapper img {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+
+.footer-block__brand-info {
+  text-align: left;
+}
+
+.footer-block:only-child .footer-block__brand-info {
+  text-align: center;
+}
+
+.footer-block:only-child > .footer-block__brand-info > .footer-block__image-wrapper {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.footer-block-image > img,
+.footer-block__brand-info > img {
+  height: auto;
+}
+
+.footer-block:only-child .footer-block__brand-info .footer__list-social.list-social {
+  justify-content: center;
+}
+
+.footer-block__brand-info .footer__list-social.list-social {
+  justify-content: flex-start;
+  margin-left: -1.3rem;
+  margin-right: -1.3rem;
+}
+
+.footer-block__details-content .placeholder-svg {
+  max-width: 20rem;
+}
+
+.copyright__content {
+  font-size: 1.1rem;
+}
+
+.copyright__content a {
+  color: currentColor;
+  text-decoration: none;
+}
+
+.policies {
+  display: inline;
+}
+
+.policies li {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.policies li::before {
+  content: '\00B7';
+  padding: 0 0.8rem;
+}
+
+.policies li a {
+  padding: 0.6rem 0;
+  display: block;
+}
+
+@media screen and (min-width: 750px) {
+  .policies li a {
+    padding: 0;
+  }
+}
+@keyframes animateLocalization {
+  0% {
+    opacity: 0;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(-1rem);
+  }
+}
+
+/* check for flexbox gap in older Safari versions */
+@supports not (inset: 10px) {
+  @media screen and (max-width: 749px) {
+    .footer .grid {
+      margin-left: 0;
+    }
+  }
+
+  @media screen and (min-width: 750px) {
+    .footer__content-top .grid {
+      margin-left: -3rem;
+    }
+
+    .footer__content-top .grid__item {
+      padding-left: 3rem;
+    }
+  }
+}

assets/section-image-banner.css

@@ -0,0 +1,483 @@
+.banner {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  z-index: auto;
+  isolation: isolate;
+}
+
+.banner__box {
+  text-align: center;
+}
+
+/* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
+.banner__box.gradient {
+  transform: perspective(0);
+}
+
+@media only screen and (max-width: 749px) {
+  .banner--content-align-mobile-right .banner__box {
+    text-align: right;
+  }
+
+  .banner--content-align-mobile-left .banner__box {
+    text-align: left;
+  }
+}
+
+@media only screen and (min-width: 750px) {
+  .banner--content-align-right .banner__box {
+    text-align: right;
+  }
+
+  .banner--content-align-left .banner__box {
+    text-align: left;
+  }
+
+  .banner--content-align-left.banner--desktop-transparent .banner__box,
+  .banner--content-align-right.banner--desktop-transparent .banner__box,
+  .banner--medium.banner--desktop-transparent .banner__box {
+    max-width: 68rem;
+  }
+}
+
+.banner__media.animate--zoom-in {
+  clip-path: inset(0px);
+}
+
+.banner__media.animate--zoom-in > img:not(.zoom):not(.deferred-media__poster-button),
+.banner__media.animate--zoom-in > svg:not(.zoom):not(.deferred-media__poster-button) {
+  position: fixed;
+  height: 100vh;
+}
+
+@media screen and (max-width: 749px) {
+  .banner--small.banner--mobile-bottom:not(.banner--adapt) .banner__media,
+  .banner--small.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
+    height: 28rem;
+  }
+
+  .banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media,
+  .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
+    height: 34rem;
+  }
+
+  .banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media,
+  .banner--large.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
+    height: 39rem;
+  }
+
+  .banner--small:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
+    min-height: 28rem;
+  }
+
+  .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
+    min-height: 34rem;
+  }
+
+  .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
+    min-height: 39rem;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .banner {
+    flex-direction: row;
+  }
+
+  .banner--small:not(.banner--adapt) {
+    min-height: 42rem;
+  }
+
+  .banner--medium:not(.banner--adapt) {
+    min-height: 56rem;
+  }
+
+  .banner--large:not(.banner--adapt) {
+    min-height: 72rem;
+  }
+
+  .banner__content.banner__content--top-left {
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+
+  .banner__content.banner__content--top-center {
+    align-items: flex-start;
+    justify-content: center;
+  }
+
+  .banner__content.banner__content--top-right {
+    align-items: flex-start;
+    justify-content: flex-end;
+  }
+
+  .banner__content.banner__content--middle-left {
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  .banner__content.banner__content--middle-center {
+    align-items: center;
+    justify-content: center;
+  }
+
+  .banner__content.banner__content--middle-right {
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .banner__content.banner__content--bottom-left {
+    align-items: flex-end;
+    justify-content: flex-start;
+  }
+
+  .banner__content.banner__content--bottom-center {
+    align-items: flex-end;
+    justify-content: center;
+  }
+
+  .banner__content.banner__content--bottom-right {
+    align-items: flex-end;
+    justify-content: flex-end;
+  }
+}
+
+@media screen and (max-width: 749px) {
+  .banner:not(.banner--stacked) {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .banner--stacked {
+    height: auto;
+  }
+
+  .banner--stacked .banner__media {
+    flex-direction: column;
+  }
+}
+
+.banner__media {
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+
+.banner__media-half {
+  width: 50%;
+}
+
+.banner__media-half + .banner__media-half {
+  right: 0;
+  left: auto;
+}
+
+.banner__media-half.animate--fixed:first-child > img,
+.banner__media-half.animate--zoom-in:first-child > img {
+  width: 50%;
+}
+
+.banner__media-half.animate--fixed:nth-child(2) > img,
+.banner__media-half.animate--zoom-in:nth-child(2) > img {
+  left: 50%;
+  width: 50%;
+}
+
+@media screen and (max-width: 749px) {
+  .banner--stacked .animate--fixed:first-child > img,
+  .banner--stacked .animate--zoom-in:first-child > img {
+    width: 100%;
+  }
+
+  .banner--stacked .banner__media-half.animate--fixed:nth-child(2) > img,
+  .banner--stacked .banner__media-half.animate--zoom-in:nth-child(2) > img {
+    left: 0;
+    width: 100%;
+  }
+
+  .banner--stacked .banner__media-half {
+    width: 100%;
+  }
+
+  .banner--stacked .banner__media-half + .banner__media-half {
+    order: 1;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .banner__media {
+    height: 100%;
+  }
+}
+
+.banner--adapt,
+.banner--adapt_image.banner--mobile-bottom .banner__media:not(.placeholder) {
+  height: auto;
+}
+
+@media screen and (max-width: 749px) {
+  .banner--mobile-bottom .banner__media,
+  .banner--stacked:not(.banner--mobile-bottom) .banner__media {
+    position: relative;
+  }
+
+  .banner--stacked.banner--adapt .banner__content {
+    height: auto;
+  }
+
+  .banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
+    background: transparent;
+  }
+
+  .banner:not(.banner--mobile-bottom) .banner__box {
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .banner:not(.banner--mobile-bottom) .button--secondary {
+    --alpha-button-background: 0;
+  }
+
+  .banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
+    position: absolute;
+    height: auto;
+  }
+
+  .banner--stacked.banner--adapt:not(.banner--mobile-bottom) .banner__content {
+    max-height: 100%;
+    overflow: hidden;
+    position: absolute;
+  }
+
+  .banner--stacked:not(.banner--adapt) .banner__media {
+    position: relative;
+  }
+
+  .banner::before {
+    display: none !important;
+  }
+
+  .banner--stacked .banner__media-image-half {
+    width: 100%;
+  }
+}
+
+.banner__content {
+  padding: 0;
+  display: flex;
+  position: relative;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+}
+
+@media screen and (min-width: 750px) {
+  .banner__content {
+    padding: 5rem;
+  }
+
+  .banner__content--top-left {
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+
+  .banner__content--top-center {
+    align-items: flex-start;
+    justify-content: center;
+  }
+
+  .banner__content--top-right {
+    align-items: flex-start;
+    justify-content: flex-end;
+  }
+
+  .banner__content--middle-left {
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  .banner__content--middle-center {
+    align-items: center;
+    justify-content: center;
+  }
+
+  .banner__content--middle-right {
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .banner__content--bottom-left {
+    align-items: flex-end;
+    justify-content: flex-start;
+  }
+
+  .banner__content--bottom-center {
+    align-items: flex-end;
+    justify-content: center;
+  }
+
+  .banner__content--bottom-right {
+    align-items: flex-end;
+    justify-content: flex-end;
+  }
+}
+
+@media screen and (max-width: 749px) {
+  .banner--mobile-bottom:not(.banner--stacked) .banner__content {
+    order: 2;
+  }
+
+  .banner:not(.banner--mobile-bottom) .field__input,
+  .banner--mobile-bottom:not(.banner--stacked) .banner__box.color-scheme-1 {
+    background: transparent;
+  }
+}
+
+.banner__box {
+  padding: 4rem 3.5rem;
+  position: relative;
+  height: fit-content;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  word-wrap: break-word;
+  z-index: 1;
+}
+
+@media screen and (min-width: 750px) {
+  .banner--desktop-transparent .banner__box {
+    background: transparent;
+    max-width: 89rem;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .banner--desktop-transparent .button--secondary {
+    --alpha-button-background: 0;
+  }
+
+  .banner--desktop-transparent .content-container:after {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 749px) {
+  .banner--mobile-bottom::after,
+  .banner--mobile-bottom .banner__media::after {
+    display: none;
+  }
+}
+
+.banner::after,
+.banner__media::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  background: #000000;
+  opacity: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+}
+
+.banner__box > * + .banner__text {
+  margin-top: 1.5rem;
+}
+
+@media screen and (min-width: 750px) {
+  .banner__box > * + .banner__text {
+    margin-top: 2rem;
+  }
+}
+
+.banner__box > * + * {
+  margin-top: 1rem;
+}
+
+.banner__box > *:first-child {
+  margin-top: 0;
+}
+
+@media screen and (max-width: 749px) {
+  .banner--stacked .banner__box {
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .banner__box {
+    width: auto;
+    max-width: 71rem;
+    min-width: 45rem;
+  }
+}
+
+@media screen and (min-width: 1400px) {
+  .banner__box {
+    max-width: 90rem;
+  }
+}
+
+.banner__heading {
+  margin-bottom: 0;
+}
+
+.banner__box .banner__heading + * {
+  margin-top: 1rem;
+}
+
+.banner__buttons {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  max-width: 45rem;
+  word-break: break-word;
+}
+
+@media screen and (max-width: 749px) {
+  .banner--content-align-mobile-right .banner__buttons--multiple {
+    justify-content: flex-end;
+  }
+
+  .banner--content-align-mobile-center .banner__buttons--multiple > * {
+    flex-grow: 1;
+    min-width: 22rem;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .banner--content-align-center .banner__buttons--multiple > * {
+    flex-grow: 1;
+    min-width: 22rem;
+  }
+
+  .banner--content-align-right .banner__buttons--multiple {
+    justify-content: flex-end;
+  }
+}
+
+.banner__box > * + .banner__buttons {
+  margin-top: 2rem;
+}
+
+@media screen and (max-width: 749px) {
+  .banner:not(.slideshow) .rte a,
+  .banner:not(.slideshow) .inline-richtext a:hover,
+  .banner:not(.slideshow) .rte a:hover {
+    color: currentColor;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .banner--desktop-transparent .rte a,
+  .banner--desktop-transparent .inline-richtext a:hover,
+  .banner--desktop-transparent .rte a:hover {
+    color: currentColor;
+  }
+}

assets/section-main-blog.css

@@ -0,0 +1,61 @@
+.blog-articles {
+  display: grid;
+  grid-gap: 1rem;
+  column-gap: var(--grid-mobile-horizontal-spacing);
+  row-gap: var(--grid-mobile-vertical-spacing);
+}
+
+.blog-articles .card-wrapper {
+  width: 100%;
+}
+
+@media screen and (min-width: 750px) {
+  .blog-articles {
+    grid-template-columns: 1fr 1fr;
+    column-gap: var(--grid-desktop-horizontal-spacing);
+    row-gap: var(--grid-desktop-vertical-spacing);
+  }
+
+  .blog-articles--collage > *:nth-child(3n + 1),
+  .blog-articles--collage > *:nth-child(3n + 2):last-child {
+    grid-column: span 2;
+    text-align: center;
+  }
+
+  .blog-articles--collage > *:nth-child(3n + 1) .card,
+  .blog-articles--collage > *:nth-child(3n + 2):last-child .card {
+    text-align: center;
+  }
+
+  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--small .ratio::before,
+  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--small .ratio::before {
+    padding-bottom: 22rem;
+  }
+
+  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--medium .ratio::before,
+  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--medium .ratio::before {
+    padding-bottom: 44rem;
+  }
+
+  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--large .ratio::before,
+  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--large .ratio::before {
+    padding-bottom: 66rem;
+  }
+}
+
+@media screen and (min-width: 990px) {
+  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--small .ratio .ratio::before,
+  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--small .ratio .ratio::before {
+    padding-bottom: 27.5rem;
+  }
+
+  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--medium .ratio::before,
+  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--medium .ratio::before {
+    padding-bottom: 55rem;
+  }
+
+  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--large .ratio::before,
+  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--large .ratio::before {
+    padding-bottom: 82.5rem;
+  }
+}

assets/section-main-page.css

@@ -0,0 +1,23 @@
+.page-title {
+  margin-top: 0;
+}
+
+.main-page-title {
+  margin-bottom: 3rem;
+}
+
+@media screen and (min-width: 750px) {
+  .main-page-title {
+    margin-bottom: 4rem;
+  }
+}
+
+.page-placeholder-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.page-placeholder {
+  width: 52.5rem;
+  height: 52.5rem;
+}

assets/section-multicolumn.css

@@ -0,0 +1,227 @@
+.multicolumn .title {
+  margin: 0;
+}
+
+.multicolumn.no-heading .title {
+  display: none;
+}
+
+.multicolumn .title-wrapper-with-link {
+  margin-top: 0;
+}
+
+@media screen and (max-width: 749px) {
+  .multicolumn .title-wrapper-with-link {
+    margin-bottom: 3rem;
+  }
+}
+
+@media screen and (max-width: 989px) {
+  .multicolumn .page-width {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.multicolumn-card__image-wrapper--third-width {
+  width: 33%;
+}
+
+.multicolumn-card__image-wrapper--half-width {
+  width: 50%;
+}
+
+.multicolumn-list__item.center .multicolumn-card__image-wrapper:not(.multicolumn-card__image-wrapper--full-width),
+.multicolumn-list__item:only-child {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.multicolumn .button {
+  margin-top: 1.5rem;
+}
+
+@media screen and (min-width: 750px) {
+  .multicolumn .button {
+    margin-top: 4rem;
+  }
+}
+
+.multicolumn-list {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: 0;
+}
+
+.multicolumn-list__item:only-child {
+  max-width: 72rem;
+}
+
+.multicolumn-list__item--empty {
+  display: none;
+}
+
+.multicolumn:not(.background-none) .multicolumn-card {
+  background: rgb(var(--color-background));
+  height: 100%;
+}
+
+.multicolumn.background-primary .multicolumn-card {
+  background: rgb(var(--color-background))
+    linear-gradient(rgba(var(--color-foreground), 0.04), rgba(var(--color-foreground), 0.04));
+}
+
+.multicolumn-list h3 {
+  line-height: calc(1 + 0.5 / max(1, var(--font-heading-scale)));
+}
+
+.multicolumn-list h3,
+.multicolumn-list p {
+  margin: 0;
+}
+
+.multicolumn-card-spacing {
+  padding-top: 2.5rem;
+  margin-left: 2.5rem;
+  margin-right: 2.5rem;
+}
+
+.multicolumn-card__info > :nth-child(2) {
+  margin-top: 1rem;
+}
+
+.multicolumn-list__item.center .media--adapt,
+.multicolumn-list__item .media--adapt .multicolumn-card__image {
+  width: auto;
+}
+
+.multicolumn-list__item.center .media--adapt img {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+@media screen and (max-width: 749px) {
+  .multicolumn-list {
+    margin: 0;
+    width: 100%;
+  }
+
+  .multicolumn-list:not(.slider) {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+@media screen and (min-width: 750px) and (max-width: 989px) {
+  .multicolumn-list:not(.slider) {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .multicolumn-list.slider,
+  .multicolumn-list.grid--4-col-desktop {
+    padding: 0;
+  }
+
+  .multicolumn-list__item,
+  .grid--4-col-desktop .multicolumn-list__item {
+    padding-bottom: 0;
+  }
+
+  .background-none .grid--2-col-tablet .multicolumn-list__item {
+    margin-top: 4rem;
+  }
+}
+
+.background-none .multicolumn-card-spacing {
+  padding: 0;
+  margin: 0;
+}
+
+.multicolumn-card__info {
+  padding: 2.5rem;
+}
+
+.background-none .multicolumn-card__info {
+  padding-top: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.background-none .slider .multicolumn-card__info {
+  padding-bottom: 0;
+}
+
+.background-none .multicolumn-card__image-wrapper + .multicolumn-card__info {
+  padding-top: 2.5rem;
+}
+
+.background-none .slider .multicolumn-card__info {
+  padding-left: 0.5rem;
+}
+
+.background-none .slider .multicolumn-card__image-wrapper + .multicolumn-card__info {
+  padding-left: 1.5rem;
+}
+
+.background-none .multicolumn-list:not(.slider) .center .multicolumn-card__info {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
+@media screen and (max-width: 749px) {
+  .background-none .slider .multicolumn-card__info {
+    padding-bottom: 1rem;
+  }
+
+  .multicolumn.background-none .slider.slider--mobile {
+    margin-bottom: 0rem;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .background-none .multicolumn-card__image-wrapper {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+
+  .background-none .multicolumn-list .multicolumn-card__info,
+  .background-none .multicolumn-list:not(.slider) .center .multicolumn-card__info {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+.multicolumn-card {
+  position: relative;
+  box-sizing: border-box;
+}
+
+.multicolumn-card > .multicolumn-card__image-wrapper--full-width:not(.multicolumn-card-spacing) {
+  border-top-left-radius: calc(var(--text-boxes-radius) - var(--text-boxes-border-width));
+  border-top-right-radius: calc(var(--text-boxes-radius) - var(--text-boxes-border-width));
+  overflow: hidden;
+}
+
+.multicolumn.background-none .multicolumn-card {
+  border-radius: 0;
+}
+
+.multicolumn-card__info .link {
+  text-decoration: none;
+  font-size: inherit;
+  margin-top: 1.5rem;
+}
+
+.multicolumn-card__info .icon-wrap {
+  margin-left: 0.8rem;
+  white-space: nowrap;
+}
+
+@media screen and (min-width: 990px) {
+  .multicolumn-list__item--empty {
+    display: list-item;
+  }
+}

assets/section-password.css

@@ -0,0 +1,333 @@
+/* Base */
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: calc(var(--font-body-scale) * 62.5%);
+}
+
+body {
+  background-color: rgb(var(--color-background));
+  color: rgb(var(--color-foreground));
+  font-size: 1.5rem;
+  letter-spacing: 0.07rem;
+  line-height: calc(1 + 0.8 / var(--font-body-scale));
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-body-family);
+  font-style: var(--font-body-style);
+  font-weight: var(--font-body-weight);
+}
+
+@media screen and (min-width: 750px) {
+  body {
+    font-size: 1.6rem;
+    line-height: calc(1 + 0.8 / var(--font-body-scale));
+  }
+}
+
+.password-modal__content-heading {
+  font-size: 1.8rem;
+  font-weight: 400;
+  line-height: calc(1 + 0.6 / var(--font-body-scale));
+}
+
+@media only screen and (min-width: 750px) {
+  .password-modal__content-heading {
+    font-size: 1.8rem;
+  }
+}
+
+/* Password Section */
+
+.full-height {
+  height: 100%;
+}
+
+.password {
+  background-color: rgb(var(--color-background));
+  height: 100%;
+}
+
+.password-link {
+  align-items: center;
+  font-size: 1.4rem;
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+.password-link svg {
+  width: 1.8rem;
+  height: 1.8rem;
+  margin-right: 1rem;
+}
+
+.password-modal__content {
+  padding: 4.5rem 3.2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.password-modal__content-heading {
+  font-size: 1.8rem;
+  font-weight: 400;
+  line-height: calc(1 + 0.6 / var(--font-body-scale));
+}
+
+@media only screen and (min-width: 750px) {
+  .password-modal__content-heading {
+    font-size: 1.8rem;
+  }
+}
+
+.password-modal .password-form {
+  max-width: 50rem;
+}
+
+.password-form {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: 4rem;
+  margin-bottom: 2rem;
+  width: 100%;
+}
+
+.password-field.field {
+  flex: 1 20rem;
+}
+
+.password-field .form__message {
+  margin-top: 1.5rem;
+}
+
+.password-button {
+  margin-top: 3rem;
+  width: 100%;
+}
+
+@media only screen and (max-width: 749px) {
+  .password-field--error + .password-button {
+    margin-top: 1.5rem;
+  }
+}
+
+@media only screen and (min-width: 750px) {
+  .password-button {
+    margin-top: 0;
+    margin-left: 2rem;
+    width: auto;
+    align-self: start;
+  }
+}
+
+.password-logo {
+  width: 100%;
+  margin-bottom: 1.5rem;
+}
+
+@media only screen and (min-width: 750px) {
+  .password-logo {
+    margin-bottom: 0;
+  }
+}
+
+.password-heading {
+  margin-top: 5rem;
+  font-weight: 400;
+}
+
+.password-main {
+  flex-grow: 1;
+}
+
+.password-main > section:only-child {
+  height: 100%;
+}
+
+.password-main > section:only-child > .newsletter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  margin-top: 0;
+}
+
+.password-main > section:only-child .newsletter__wrapper:not(.email-signup-banner__box) {
+  width: 100%;
+}
+
+.password-main > section:only-child > :not(.newsletter--narrow) > .newsletter__wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.password__footer-text a {
+  padding: 0;
+  font-size: 1.3rem;
+  font-weight: 400;
+  line-height: calc(1 + 0.5 / var(--font-body-scale));
+}
+
+.password__footer-login {
+  margin-top: 1.2rem;
+  padding-bottom: 4rem;
+}
+
+.password-modal .icon-close {
+  color: rgb(var(--color-foreground));
+}
+
+.password__footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 4rem;
+  background-color: rgb(var(--color-background));
+  color: rgb(var(--color-foreground));
+}
+
+hr {
+  margin: 0 !important;
+}
+
+.list-social:not(:empty) + .password__footer-caption {
+  margin-top: 3rem;
+}
+
+.password__footer-caption a {
+  padding: 0;
+  color: rgb(var(--color-link));
+}
+
+.modal__toggle,
+.modal__close-button {
+  list-style-type: none;
+}
+
+details[open] .modal__toggle,
+.modal__close-button {
+  position: absolute;
+  top: 2.2rem;
+  right: 2.2rem;
+  padding: 0.8rem;
+  color: rgb(var(--color-foreground));
+  background-color: transparent;
+}
+
+.no-js .modal__close-button {
+  display: none;
+}
+
+.no-js .modal__toggle {
+  z-index: 2;
+}
+
+.modal__toggle::-webkit-details-marker {
+  display: none;
+}
+
+details.modal .modal__toggle-close {
+  display: none;
+}
+
+details[open].modal .modal__toggle-close {
+  background: rgb(var(--color-background));
+  cursor: pointer;
+  display: flex;
+  padding: 0.8rem;
+  z-index: 1;
+}
+
+details[open].modal .modal__toggle-close svg,
+.modal__close-button svg {
+  height: 1.7rem;
+  width: 1.7rem;
+}
+
+details[open].modal .modal__toggle-close:hover {
+  opacity: 0.75;
+}
+
+.js details[open].modal .modal__toggle-close {
+  display: none;
+}
+
+details.modal .modal__toggle-open {
+  display: flex;
+}
+
+.no-js details[open].modal .modal__toggle-open {
+  display: none;
+}
+
+.password-header {
+  padding: 2rem 1.5rem 2.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: column;
+  color: rgb(var(--color-foreground));
+  max-width: var(--page-width);
+  margin: 0 auto;
+  text-align: center;
+}
+
+@media only screen and (min-width: 750px) {
+  .password-header {
+    display: grid;
+    gap: 3rem;
+    grid-template-columns: 1fr 1.5fr 1fr;
+    padding: 2rem 5rem 2.5rem;
+    text-align: left;
+  }
+}
+
+.password-header details-modal {
+  flex-shrink: 0;
+}
+
+.password-content {
+  text-align: center;
+}
+
+@media only screen and (max-width: 749px) {
+  .password-content {
+    margin-bottom: 1.8rem;
+    margin-top: 1rem;
+  }
+}
+
+.shopify-name {
+  overflow: hidden;
+  position: absolute;
+  height: 1px;
+  width: 1px;
+}
+
+.icon-shopify {
+  width: 7rem;
+  height: 2rem;
+  vertical-align: top;
+  color: rgb(var(--color-foreground));
+}
+
+password-modal {
+  justify-self: flex-end;
+  grid-column: 3;
+}

assets/section-related-products.css

@@ -0,0 +1,7 @@
+.related-products {
+  display: block;
+}
+
+.related-products__heading {
+  margin: 0 0 3rem;
+}

assets/section-rich-text.css

@@ -0,0 +1,86 @@
+.rich-text {
+  z-index: 1;
+}
+
+.rich-text__wrapper {
+  display: flex;
+  justify-content: center;
+  width: calc(100% - 4rem / var(--font-body-scale));
+}
+
+.rich-text:not(.rich-text--full-width) .rich-text__wrapper {
+  margin: auto;
+  width: calc(100% - 8rem / var(--font-body-scale));
+}
+
+.rich-text__blocks {
+  width: 100%;
+}
+
+@media screen and (min-width: 750px) {
+  .rich-text__wrapper {
+    width: 100%;
+  }
+
+  .rich-text__wrapper--left {
+    justify-content: flex-start;
+  }
+
+  .rich-text__wrapper--right {
+    justify-content: flex-end;
+  }
+
+  .rich-text__blocks {
+    max-width: 50rem;
+  }
+}
+
+@media screen and (min-width: 990px) {
+  .rich-text__blocks {
+    max-width: 78rem;
+  }
+}
+
+.rich-text__blocks * {
+  overflow-wrap: break-word;
+}
+
+.rich-text__blocks > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.rich-text__blocks > * + * {
+  margin-top: 2rem;
+}
+
+.rich-text__blocks > * + a {
+  margin-top: 3rem;
+}
+
+.rich-text__buttons {
+  display: inline-flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  width: 100%;
+  max-width: 45rem;
+  word-break: break-word;
+}
+
+.rich-text__buttons--multiple > * {
+  flex-grow: 1;
+  min-width: 22rem;
+}
+
+.rich-text__buttons + .rich-text__buttons {
+  margin-top: 1rem;
+}
+
+.rich-text__blocks.left .rich-text__buttons {
+  justify-content: flex-start;
+}
+
+.rich-text__blocks.right .rich-text__buttons {
+  justify-content: flex-end;
+}

assets/share.js

@@ -0,0 +1,56 @@
+if (!customElements.get('share-button')) {
+  customElements.define(
+    'share-button',
+    class ShareButton extends DetailsDisclosure {
+      constructor() {
+        super();
+
+        this.elements = {
+          shareButton: this.querySelector('button'),
+          shareSummary: this.querySelector('summary'),
+          closeButton: this.querySelector('.share-button__close'),
+          successMessage: this.querySelector('[id^="ShareMessage"]'),
+          urlInput: this.querySelector('input'),
+        };
+        this.urlToShare = this.elements.urlInput ? this.elements.urlInput.value : document.location.href;
+
+        if (navigator.share) {
+          this.mainDetailsToggle.setAttribute('hidden', '');
+          this.elements.shareButton.classList.remove('hidden');
+          this.elements.shareButton.addEventListener('click', () => {
+            navigator.share({ url: this.urlToShare, title: document.title });
+          });
+        } else {
+          this.mainDetailsToggle.addEventListener('toggle', this.toggleDetails.bind(this));
+          this.mainDetailsToggle
+            .querySelector('.share-button__copy')
+            .addEventListener('click', this.copyToClipboard.bind(this));
+          this.mainDetailsToggle.querySelector('.share-button__close').addEventListener('click', this.close.bind(this));
+        }
+      }
+
+      toggleDetails() {
+        if (!this.mainDetailsToggle.open) {
+          this.elements.successMessage.classList.add('hidden');
+          this.elements.successMessage.textContent = '';
+          this.elements.closeButton.classList.add('hidden');
+          this.elements.shareSummary.focus();
+        }
+      }
+
+      copyToClipboard() {
+        navigator.clipboard.writeText(this.elements.urlInput.value).then(() => {
+          this.elements.successMessage.classList.remove('hidden');
+          this.elements.successMessage.textContent = window.accessibilityStrings.shareSuccess;
+          this.elements.closeButton.classList.remove('hidden');
+          this.elements.closeButton.focus();
+        });
+      }
+
+      updateUrl(url) {
+        this.urlToShare = url;
+        this.elements.urlInput.value = url;
+      }
+    }
+  );
+}

assets/show-more.js

@@ -0,0 +1,27 @@
+if (!customElements.get('show-more-button')) {
+  customElements.define(
+    'show-more-button',
+    class ShowMoreButton extends HTMLElement {
+      constructor() {
+        super();
+        const button = this.querySelector('button');
+        button.addEventListener('click', (event) => {
+          this.expandShowMore(event);
+          const nextElementToFocus = event.target.closest('.parent-display').querySelector('.show-more-item');
+          if (nextElementToFocus && !nextElementToFocus.classList.contains('hidden') && nextElementToFocus.querySelector('input')) {
+            nextElementToFocus.querySelector('input').focus();
+          }
+        });
+      }
+      expandShowMore(event) {
+        const parentDisplay = event.target.closest('[id^="Show-More-"]').closest('.parent-display');
+        const parentWrap = parentDisplay.querySelector('.parent-wrap');
+        this.querySelectorAll('.label-text').forEach((element) => element.classList.toggle('hidden'));
+        parentDisplay.querySelectorAll('.show-more-item').forEach((item) => item.classList.toggle('hidden'));
+        if (!this.querySelector('.label-show-less')) {
+          this.classList.add('hidden');
+        }
+      }
+    }
+  );
+}