initial commit
This commit is contained in:
Gerhard Scheikl
@@ -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));
|
||||
}
|
||||
+3612
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,192 @@
|
||||
if (!customElements.get('cart-disclosure-modal')) {
|
||||
class CartDisclosureModal extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.onOpenerClick = this.onOpenerClick.bind(this);
|
||||
this.onCloseClick = this.onCloseClick.bind(this);
|
||||
this.onModalClick = this.onModalClick.bind(this);
|
||||
this.onKeyUp = this.onKeyUp.bind(this);
|
||||
this.removeIfOpenerDisconnected = this.removeIfOpenerDisconnected.bind(this);
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
if (this.initialized) return;
|
||||
|
||||
this.initialized = true;
|
||||
this.dialog = this.querySelector('[role="dialog"]');
|
||||
const controlsId = this.dialog?.id;
|
||||
this.opener = this.previousElementSibling?.classList.contains('cart-item__disclosure')
|
||||
? this.previousElementSibling
|
||||
: controlsId
|
||||
? document.querySelector(`[aria-controls="${controlsId}"]`)
|
||||
: null;
|
||||
this.closeButton = this.querySelector('[data-cart-disclosure-close]');
|
||||
|
||||
let shouldRestoreOpen = false;
|
||||
document.querySelectorAll('cart-disclosure-modal').forEach((modal) => {
|
||||
if (modal === this || modal.id !== this.id) return;
|
||||
|
||||
shouldRestoreOpen = shouldRestoreOpen || modal.hasAttribute('open');
|
||||
modal.remove();
|
||||
});
|
||||
|
||||
this.opener?.addEventListener('click', this.onOpenerClick);
|
||||
this.closeButton?.addEventListener('click', this.onCloseClick);
|
||||
this.addEventListener('click', this.onModalClick);
|
||||
this.addEventListener('keyup', this.onKeyUp);
|
||||
|
||||
if (this.parentElement !== document.body) {
|
||||
this.isMoving = true;
|
||||
document.body.appendChild(this);
|
||||
this.isMoving = false;
|
||||
}
|
||||
|
||||
this.observeOpener();
|
||||
|
||||
if (shouldRestoreOpen) this.show();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
if (this.isMoving) return;
|
||||
|
||||
this.openerObserver?.disconnect();
|
||||
this.opener?.removeEventListener('click', this.onOpenerClick);
|
||||
this.closeButton?.removeEventListener('click', this.onCloseClick);
|
||||
this.removeEventListener('click', this.onModalClick);
|
||||
this.removeEventListener('keyup', this.onKeyUp);
|
||||
|
||||
if (this.hasAttribute('open')) this.hide(false);
|
||||
}
|
||||
|
||||
observeOpener() {
|
||||
this.openerObserver?.disconnect();
|
||||
|
||||
if (!this.opener) return;
|
||||
|
||||
this.openerObserver = new MutationObserver(this.removeIfOpenerDisconnected);
|
||||
this.openerObserver.observe(document.body, { childList: true, subtree: true });
|
||||
this.removeIfOpenerDisconnected();
|
||||
}
|
||||
|
||||
removeIfOpenerDisconnected() {
|
||||
if (this.isMoving || !this.isConnected || this.opener?.isConnected) return;
|
||||
|
||||
this.remove();
|
||||
}
|
||||
|
||||
onOpenerClick(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.show();
|
||||
}
|
||||
|
||||
onCloseClick(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.hide();
|
||||
}
|
||||
|
||||
onModalClick(event) {
|
||||
event.stopPropagation();
|
||||
|
||||
if (event.target === this) this.hide();
|
||||
}
|
||||
|
||||
onKeyUp(event) {
|
||||
if (event.code.toUpperCase() !== 'ESCAPE') return;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.hide();
|
||||
}
|
||||
|
||||
show() {
|
||||
if (this.hasAttribute('open')) return;
|
||||
|
||||
document.querySelectorAll('cart-disclosure-modal[open]').forEach((modal) => {
|
||||
if (modal !== this) modal.hide(false);
|
||||
});
|
||||
|
||||
this.lockScroll();
|
||||
this.setAttribute('open', '');
|
||||
this.opener?.setAttribute('aria-expanded', 'true');
|
||||
|
||||
if (typeof trapFocus === 'function') {
|
||||
trapFocus(this, this.dialog);
|
||||
} else {
|
||||
this.dialog?.focus();
|
||||
}
|
||||
|
||||
window.pauseAllMedia();
|
||||
}
|
||||
|
||||
hide(restoreFocus = true) {
|
||||
if (!this.hasAttribute('open')) return;
|
||||
|
||||
this.removeAttribute('open');
|
||||
this.opener?.setAttribute('aria-expanded', 'false');
|
||||
this.unlockScroll();
|
||||
|
||||
if (restoreFocus) {
|
||||
this.restoreFocusTrap();
|
||||
} else if (typeof removeTrapFocus === 'function') {
|
||||
removeTrapFocus();
|
||||
}
|
||||
|
||||
window.pauseAllMedia();
|
||||
}
|
||||
|
||||
lockScroll() {
|
||||
this.bodyOverflowWasHidden = document.body.classList.contains('overflow-hidden');
|
||||
this.previousBodyPaddingRight = document.body.style.paddingRight;
|
||||
|
||||
if (this.bodyOverflowWasHidden) return;
|
||||
|
||||
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
|
||||
|
||||
if (scrollbarWidth > 0) {
|
||||
const currentPaddingRight = parseFloat(window.getComputedStyle(document.body).paddingRight) || 0;
|
||||
document.body.style.paddingRight = `${currentPaddingRight + scrollbarWidth}px`;
|
||||
}
|
||||
|
||||
document.body.classList.add('overflow-hidden');
|
||||
}
|
||||
|
||||
unlockScroll() {
|
||||
if (this.bodyOverflowWasHidden) return;
|
||||
|
||||
document.body.classList.remove('overflow-hidden');
|
||||
document.body.style.paddingRight = this.previousBodyPaddingRight;
|
||||
}
|
||||
|
||||
restoreFocusTrap() {
|
||||
const cartDrawer = this.opener?.closest('cart-drawer.active');
|
||||
const cartNotification = this.opener?.closest('cart-notification')?.querySelector('#cart-notification.active');
|
||||
|
||||
if (cartDrawer && typeof trapFocus === 'function') {
|
||||
const containerToTrapFocusOn = cartDrawer.classList.contains('is-empty')
|
||||
? cartDrawer.querySelector('.drawer__inner-empty')
|
||||
: document.getElementById('CartDrawer');
|
||||
|
||||
if (containerToTrapFocusOn) {
|
||||
trapFocus(containerToTrapFocusOn, this.opener);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (cartNotification && typeof trapFocus === 'function') {
|
||||
trapFocus(cartNotification, this.opener);
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof removeTrapFocus === 'function') {
|
||||
removeTrapFocus(this.opener);
|
||||
} else {
|
||||
this.opener?.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('cart-disclosure-modal', CartDisclosureModal);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
(function () {
|
||||
// Keeps the cart disclosure hover tooltip within the viewport.
|
||||
// On hover we measure the tooltip and set a `--cart-disclosure-tooltip-shift`
|
||||
// custom property that nudges it back into view;
|
||||
// the arrow is counter-shifted in CSS so it keeps pointing at the icon.
|
||||
const VIEWPORT_MARGIN = 16;
|
||||
|
||||
function positionTooltip(button) {
|
||||
const tooltip = button.querySelector('.cart-item__disclosure-tooltip');
|
||||
if (!tooltip) return;
|
||||
|
||||
// Reset before measuring so we read the natural, centered position.
|
||||
tooltip.style.setProperty('--cart-disclosure-tooltip-shift', '0px');
|
||||
|
||||
const rect = tooltip.getBoundingClientRect();
|
||||
const viewportWidth = document.documentElement.clientWidth;
|
||||
let shift = 0;
|
||||
|
||||
if (rect.right > viewportWidth - VIEWPORT_MARGIN) {
|
||||
shift = viewportWidth - VIEWPORT_MARGIN - rect.right;
|
||||
} else if (rect.left < VIEWPORT_MARGIN) {
|
||||
shift = VIEWPORT_MARGIN - rect.left;
|
||||
}
|
||||
|
||||
tooltip.style.setProperty('--cart-disclosure-tooltip-shift', `${Math.round(shift)}px`);
|
||||
}
|
||||
|
||||
function onPointerOver(event) {
|
||||
const button = event.target.closest?.('.cart-item__disclosure');
|
||||
if (!button || button.dataset.tooltipPositioned === 'true') return;
|
||||
|
||||
button.dataset.tooltipPositioned = 'true';
|
||||
positionTooltip(button);
|
||||
}
|
||||
|
||||
function onPointerOut(event) {
|
||||
const button = event.target.closest?.('.cart-item__disclosure');
|
||||
if (button && !button.contains(event.relatedTarget)) {
|
||||
delete button.dataset.tooltipPositioned;
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('pointerover', onPointerOver);
|
||||
document.addEventListener('pointerout', onPointerOut);
|
||||
})();
|
||||
@@ -0,0 +1,142 @@
|
||||
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');
|
||||
if (!cartLink) return;
|
||||
|
||||
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 (this.classList.contains('active')) return;
|
||||
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');
|
||||
|
||||
// cart-drawer-items is a CartItems subclass that extends createViewEventElement.
|
||||
// Its `view-event-trigger="manual"` skips auto-dispatch on connect; we fire
|
||||
// it here when the drawer opens, with `context: 'dialog'` from the payload attribute.
|
||||
this.querySelector('cart-drawer-items')?.dispatchViewEvent();
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
if (!sectionElement) return;
|
||||
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);
|
||||
@@ -0,0 +1,112 @@
|
||||
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);
|
||||
|
||||
this.dispatchCartViewEvent();
|
||||
}
|
||||
|
||||
// The notification's outer element is server-rendered once at page load, so
|
||||
// its `cart` Liquid object reflects the pre-add state. The morphed children
|
||||
// (inserted from the /cart/add.js sections response in renderContents) are
|
||||
// post-add, but they don't expose the full cart shape we need for the event
|
||||
// payload. So we keep an explicit /cart.json fetch on open. Migrating to the
|
||||
// factory + filter would require re-rendering the notification element
|
||||
// itself in sections, which is out of scope for this PR.
|
||||
async dispatchCartViewEvent() {
|
||||
const { CartViewEvent } = window.StandardEvents || {};
|
||||
if (!CartViewEvent) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${routes.cart_url}.json`);
|
||||
const cart = await response.json();
|
||||
if (!cart?.currency) return;
|
||||
|
||||
this.dispatchEvent(
|
||||
new CartViewEvent({
|
||||
context: 'dialog',
|
||||
cart: CartViewEvent.createCartFromAjaxResponse(cart),
|
||||
})
|
||||
);
|
||||
} catch (e) {
|
||||
// cart:view is informational; swallow fetch errors
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
+415
@@ -0,0 +1,415 @@
|
||||
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, event);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('cart-remove-button', CartRemoveButton);
|
||||
|
||||
class CartItems extends window.StandardEvents.createViewEventElement(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;
|
||||
|
||||
static pendingCartDataPromise = null;
|
||||
|
||||
connectedCallback() {
|
||||
// The factory base class auto-dispatches cart:view from the
|
||||
// `view-event-payload` attribute (Liquid filter output). The drawer
|
||||
// sets `view-event-trigger="manual"` to skip auto-dispatch.
|
||||
super.connectedCallback();
|
||||
|
||||
this.cartUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.cartUpdate, (event) => {
|
||||
if (event.source === 'cart-items') return;
|
||||
return this.onCartUpdate();
|
||||
});
|
||||
}
|
||||
|
||||
// Fetches the full cart shape (used to resolve the cart:lines-update event
|
||||
// promise after /cart/add.js, which only returns the added line — not the
|
||||
// post-mutation cart aggregates). De-duplicated across concurrent callers.
|
||||
static fetchCartData() {
|
||||
if (!CartItems.pendingCartDataPromise) {
|
||||
const pendingCartDataPromise = fetch(`${routes.cart_url}.json`)
|
||||
.then((response) => response.json())
|
||||
.catch(() => null)
|
||||
.finally(() => {
|
||||
if (CartItems.pendingCartDataPromise === pendingCartDataPromise) CartItems.pendingCartDataPromise = null;
|
||||
});
|
||||
|
||||
CartItems.pendingCartDataPromise = pendingCartDataPromise;
|
||||
}
|
||||
return CartItems.pendingCartDataPromise;
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
if (this.cartUpdateUnsubscriber) {
|
||||
this.cartUpdateUnsubscriber();
|
||||
}
|
||||
}
|
||||
|
||||
resetQuantityInput(id) {
|
||||
const input = this.querySelector(`#Quantity-${id}`);
|
||||
input.value = input.getAttribute('value');
|
||||
this.isEnterPressed = false;
|
||||
}
|
||||
|
||||
setValidity(event, index, message) {
|
||||
event.target.setCustomValidity(message);
|
||||
event.target.reportValidity();
|
||||
this.resetQuantityInput(index);
|
||||
event.target.select();
|
||||
}
|
||||
|
||||
validateQuantity(event) {
|
||||
const inputValue = parseInt(event.target.value);
|
||||
const index = event.target.dataset.index;
|
||||
let message = '';
|
||||
|
||||
if (inputValue < event.target.dataset.min) {
|
||||
message = window.quickOrderListStrings.min_error.replace('[min]', event.target.dataset.min);
|
||||
} else if (inputValue > parseInt(event.target.max)) {
|
||||
message = window.quickOrderListStrings.max_error.replace('[max]', event.target.max);
|
||||
} else if (inputValue % parseInt(event.target.step) !== 0) {
|
||||
message = window.quickOrderListStrings.step_error.replace('[step]', event.target.step);
|
||||
}
|
||||
|
||||
if (message) {
|
||||
this.setValidity(event, index, message);
|
||||
} else {
|
||||
event.target.setCustomValidity('');
|
||||
event.target.reportValidity();
|
||||
this.updateQuantity(
|
||||
index,
|
||||
inputValue,
|
||||
event,
|
||||
document.activeElement.getAttribute('name'),
|
||||
event.target.dataset.quantityVariantId
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
onChange(event) {
|
||||
this.validateQuantity(event);
|
||||
}
|
||||
|
||||
onCartUpdate() {
|
||||
if (this.tagName === 'CART-DRAWER-ITEMS') {
|
||||
return 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 {
|
||||
return 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, event, name, variantId) {
|
||||
const eventTarget = event.currentTarget instanceof CartRemoveButton ? 'clear' : 'change';
|
||||
const cartPerformanceUpdateMarker = CartPerformance.createStartingMarker(`${eventTarget}:user-action`);
|
||||
|
||||
this.enableLoading(line);
|
||||
|
||||
const action = quantity === 0 ? 'remove' : 'update';
|
||||
const quantityInput = this.querySelector(`#Quantity-${line}`) || this.querySelector(`#Drawer-quantity-${line}`);
|
||||
const lineVariantId = variantId || quantityInput?.dataset.quantityVariantId;
|
||||
const lineKey = quantityInput?.dataset.quantityLineKey;
|
||||
const linesUpdateDeferred = this.createCartLinesUpdateEvent(action, lineVariantId, quantity, lineKey);
|
||||
|
||||
// Cache sections before the fetch so we read dataset.id while elements still exist in the DOM
|
||||
const sectionsToRender = this.getSectionsToRender();
|
||||
|
||||
const body = JSON.stringify({
|
||||
line,
|
||||
quantity,
|
||||
sections: sectionsToRender.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);
|
||||
|
||||
if (parsedState.errors) {
|
||||
this.dispatchCartErrorEvent(parsedState.errors, 'INVALID');
|
||||
linesUpdateDeferred?.reject(new Error(parsedState.errors));
|
||||
} else {
|
||||
this.resolveCartLinesUpdate(linesUpdateDeferred, parsedState);
|
||||
}
|
||||
|
||||
CartPerformance.measure(`${eventTarget}:paint-updated-sections`, () => {
|
||||
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);
|
||||
|
||||
sectionsToRender.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?.querySelector('.drawer__inner-empty')) {
|
||||
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((e) => {
|
||||
this.querySelectorAll('.loading__spinner').forEach((overlay) => overlay.classList.add('hidden'));
|
||||
const errors = document.getElementById('cart-errors') || document.getElementById('CartDrawer-CartErrors');
|
||||
if (errors) errors.textContent = window.cartStrings.error;
|
||||
this.dispatchCartErrorEvent(window.cartStrings.error, 'SERVICE_UNAVAILABLE');
|
||||
linesUpdateDeferred?.reject(e);
|
||||
})
|
||||
.finally(() => {
|
||||
this.disableLoading(line);
|
||||
CartPerformance.measureFromMarker(`${eventTarget}:user-action`, cartPerformanceUpdateMarker);
|
||||
});
|
||||
}
|
||||
|
||||
createCartLinesUpdateEvent(action, variantId, quantity, lineKey) {
|
||||
const { CartLinesUpdateEvent } = window.StandardEvents || {};
|
||||
if (!CartLinesUpdateEvent || !variantId) return null;
|
||||
// No AJAX line key on the row — likely cached HTML rendered before this
|
||||
// attribute landed. Skip dispatch rather than emit an event with id: ''.
|
||||
if (!lineKey) return null;
|
||||
|
||||
const deferred = CartLinesUpdateEvent.createPromise();
|
||||
this.dispatchEvent(
|
||||
new CartLinesUpdateEvent({
|
||||
action,
|
||||
context: 'cart',
|
||||
lines: [{ id: lineKey, quantity }],
|
||||
promise: deferred.promise,
|
||||
})
|
||||
);
|
||||
return deferred;
|
||||
}
|
||||
|
||||
resolveCartLinesUpdate(deferred, parsedState) {
|
||||
if (!deferred) return;
|
||||
const { CartLinesUpdateEvent } = window.StandardEvents || {};
|
||||
if (!CartLinesUpdateEvent) return;
|
||||
|
||||
deferred.resolve({ cart: CartLinesUpdateEvent.createCartFromAjaxResponse(parsedState) });
|
||||
}
|
||||
|
||||
dispatchCartErrorEvent(message, code) {
|
||||
const { CartErrorEvent } = window.StandardEvents || {};
|
||||
if (!CartErrorEvent) return;
|
||||
this.dispatchEvent(new CartErrorEvent({ error: message, code }));
|
||||
}
|
||||
|
||||
updateLiveRegions(line, message) {
|
||||
const lineItemError =
|
||||
document.getElementById(`Line-item-error-${line}`) || document.getElementById(`CartDrawer-LineItemError-${line}`);
|
||||
if (lineItemError) lineItemError.querySelector('.cart-item__error-text').textContent = 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 newNote = event.target.value;
|
||||
const noteDeferred = this.dispatchNoteUpdateEvent(newNote);
|
||||
|
||||
const body = JSON.stringify({ note: newNote });
|
||||
fetch(`${routes.cart_update_url}`, { ...fetchConfig(), ...{ body } })
|
||||
.then((r) => r.json())
|
||||
.then((cart) => {
|
||||
if (!cart || cart.errors) {
|
||||
throw Object.assign(new Error(cart?.errors), { code: 'INVALID' });
|
||||
}
|
||||
|
||||
if (noteDeferred) {
|
||||
const { CartNoteUpdateEvent } = window.StandardEvents || {};
|
||||
if (CartNoteUpdateEvent) {
|
||||
noteDeferred.resolve({ cart: CartNoteUpdateEvent.createCartFromAjaxResponse(cart) });
|
||||
}
|
||||
}
|
||||
CartPerformance.measureFromEvent('note-update:user-action', event);
|
||||
})
|
||||
.catch((e) => {
|
||||
noteDeferred?.reject(e);
|
||||
const { CartErrorEvent } = window.StandardEvents || {};
|
||||
if (CartErrorEvent) {
|
||||
this.dispatchEvent(
|
||||
new CartErrorEvent({
|
||||
error: e.message || 'Note update failed',
|
||||
code: e.code || 'SERVICE_UNAVAILABLE',
|
||||
})
|
||||
);
|
||||
}
|
||||
});
|
||||
}, ON_CHANGE_DEBOUNCE_TIMER)
|
||||
);
|
||||
}
|
||||
|
||||
dispatchNoteUpdateEvent(newNote) {
|
||||
const { CartNoteUpdateEvent } = window.StandardEvents || {};
|
||||
if (!CartNoteUpdateEvent) return null;
|
||||
|
||||
const context = this.closest('dialog') || this.closest('cart-drawer') ? 'dialog' : 'cart';
|
||||
const deferred = CartNoteUpdateEvent.createPromise();
|
||||
|
||||
this.dispatchEvent(
|
||||
new CartNoteUpdateEvent({
|
||||
context,
|
||||
note: newNote,
|
||||
promise: deferred.promise,
|
||||
})
|
||||
);
|
||||
|
||||
return deferred;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 .svg-wrapper {
|
||||
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%;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,595 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.card__information-volume-pricing-note--button,
|
||||
.card__information-volume-pricing-note--button.quantity-popover__info-button--icon-with-label {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: var(--text-alignment);
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.card__information-volume-pricing-note--button:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
|
||||
transform: initial;
|
||||
top: auto;
|
||||
bottom: 4rem;
|
||||
max-width: 20rem;
|
||||
width: calc(95% + 2rem);
|
||||
}
|
||||
|
||||
.card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info span:first-of-type {
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
|
||||
.card__information-volume-pricing-note--button-right + .global-settings-popup.quantity-popover__info {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.card__information-volume-pricing-note--button-center + .global-settings-popup.quantity-popover__info {
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
|
||||
.card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info .quantity__rules {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 990px) {
|
||||
.grid--6-col-desktop .card__content quick-add-bulk .quantity {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.grid--6-col-desktop .card__content quick-add-bulk .quantity__button {
|
||||
width: calc(3rem / var(--font-body-scale));
|
||||
}
|
||||
|
||||
.grid--6-col-desktop .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
width: calc(100% + var(--border-width) + 3.5rem);
|
||||
}
|
||||
|
||||
.grid--6-col-desktop
|
||||
.card--standard
|
||||
.card__information-volume-pricing-note--button
|
||||
+ .global-settings-popup.quantity-popover__info {
|
||||
width: calc(100% + var(--border-width) + 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 749px) {
|
||||
.grid--2-col-tablet-down .card__content quick-add-bulk .quantity__button {
|
||||
width: calc(3.5rem / var(--font-body-scale));
|
||||
}
|
||||
|
||||
.grid--2-col-tablet-down
|
||||
.card--card
|
||||
.card__information-volume-pricing-note--button
|
||||
+ .global-settings-popup.quantity-popover__info,
|
||||
.grid--2-col-tablet-down
|
||||
.card--standard
|
||||
.card__information-volume-pricing-note--button
|
||||
+ .global-settings-popup.quantity-popover__info {
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
|
||||
.grid--2-col-tablet-down
|
||||
.card--standard
|
||||
.card__information-volume-pricing-note--button
|
||||
+ .global-settings-popup.quantity-popover__info {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid--2-col-tablet-down
|
||||
.card--card
|
||||
.card__information-volume-pricing-note--button
|
||||
+ .global-settings-popup.quantity-popover__info {
|
||||
width: calc(100% + var(--border-width) + 4rem);
|
||||
}
|
||||
|
||||
.grid--2-col-tablet-down .card__content quick-add-bulk .quantity {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.card-information quantity-popover volume-pricing {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 989px) {
|
||||
.card-information quantity-popover .quantity__rules ~ volume-pricing {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.card-information quantity-popover volume-pricing {
|
||||
margin-top: 4.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
/* Specificity needed due to the changes below */
|
||||
.card-information
|
||||
> *:not(.visually-hidden:first-child)
|
||||
+ quantity-popover:not(.rating):not(.card__information-volume-pricing-note),
|
||||
.card-information .card__information-volume-pricing-note.card__information-volume-pricing-note--button {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.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));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,414 @@
|
||||
.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-wrapper {
|
||||
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-item__nested-line .cart-item__image {
|
||||
max-width: 60%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.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-items .cart-item__nested-line td:not(.cart-item__quantity) {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.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);
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,624 @@
|
||||
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__nested-line .cart-item__image-container {
|
||||
min-width: calc(10rem / var(--font-body-scale));
|
||||
justify-content: right;
|
||||
img {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.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__title {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
font-size: calc(var(--font-heading-scale) * 1.5rem);
|
||||
gap: 0.6rem;
|
||||
line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
|
||||
}
|
||||
|
||||
.cart-item__title .cart-item__name {
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cart-item__disclosure {
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
font: inherit;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
top: 0.2rem;
|
||||
}
|
||||
|
||||
.cart-item__disclosure-indicator {
|
||||
--icon-stroke-width: 1.2;
|
||||
|
||||
color: rgb(var(--color-foreground));
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.cart-item__disclosure-tooltip {
|
||||
--cart-disclosure-tooltip-symbol-height: 1.3rem;
|
||||
--cart-disclosure-tooltip-symbol-width: calc(var(--cart-disclosure-tooltip-symbol-height) * 40 / 31);
|
||||
|
||||
background-color: rgb(var(--color-background));
|
||||
border: var(--popup-border-width) solid rgba(var(--color-foreground), var(--popup-border-opacity));
|
||||
bottom: calc(100% + 0.9rem);
|
||||
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));
|
||||
color: rgb(var(--color-foreground));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: var(--font-body-family);
|
||||
font-size: 1.2rem;
|
||||
font-style: var(--font-body-style);
|
||||
font-weight: var(--font-body-weight);
|
||||
gap: 0.6rem;
|
||||
left: 50%;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.35;
|
||||
max-width: min(36rem, calc(100vw - 4rem));
|
||||
opacity: 0;
|
||||
padding: 0.8rem 1rem;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
transform: translateX(calc(-50% + var(--cart-disclosure-tooltip-shift, 0px)));
|
||||
transition: opacity var(--duration-short) ease, visibility var(--duration-short) ease;
|
||||
visibility: hidden;
|
||||
width: max-content;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.cart-item__disclosure-tooltip-row {
|
||||
align-items: flex-start;
|
||||
column-gap: 0.6rem;
|
||||
display: grid;
|
||||
grid-template-columns: var(--cart-disclosure-tooltip-symbol-width) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.cart-item__disclosure-tooltip-symbol-slot {
|
||||
align-items: flex-start;
|
||||
display: inline-flex;
|
||||
height: var(--cart-disclosure-tooltip-symbol-height);
|
||||
justify-content: center;
|
||||
margin-top: 0.16rem;
|
||||
width: var(--cart-disclosure-tooltip-symbol-width);
|
||||
}
|
||||
|
||||
.cart-item__disclosure-tooltip-symbol {
|
||||
display: block;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.cart-item__disclosure-tooltip-title {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.cart-item__disclosure:hover .cart-item__disclosure-tooltip {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-disclosure-modal {
|
||||
align-items: center;
|
||||
background: rgba(var(--color-foreground), 0.58);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
overflow: auto;
|
||||
padding: 2rem;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.cart-disclosure-modal[open] {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
visibility: visible;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.cart-disclosure-modal__content {
|
||||
background-color: rgb(var(--color-background));
|
||||
border: var(--popup-border-width) solid rgba(var(--color-foreground), var(--popup-border-opacity));
|
||||
border-radius: var(--popup-corner-radius);
|
||||
box-sizing: border-box;
|
||||
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));
|
||||
color: rgb(var(--color-foreground));
|
||||
margin: auto;
|
||||
max-height: calc(100vh - 4rem);
|
||||
max-width: min(100%, 56rem);
|
||||
min-width: min(100%, 39rem);
|
||||
overflow-y: auto;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.cart-disclosure-modal__close {
|
||||
align-items: center;
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: 0;
|
||||
color: rgba(var(--color-foreground), 0.65);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 3.6rem;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 0.8rem;
|
||||
top: 0.8rem;
|
||||
width: 3.6rem;
|
||||
}
|
||||
|
||||
.cart-disclosure-modal__close:hover {
|
||||
color: rgb(var(--color-foreground));
|
||||
}
|
||||
|
||||
.cart-disclosure-modal__close .icon {
|
||||
height: 1.6rem;
|
||||
width: 1.6rem;
|
||||
}
|
||||
|
||||
.cart-disclosure-modal__title {
|
||||
font-family: var(--font-heading-family);
|
||||
font-size: calc(var(--font-heading-scale) * 1.8rem);
|
||||
font-weight: var(--font-body-weight-bold);
|
||||
line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
|
||||
margin: 0 4rem 1.8rem 0;
|
||||
}
|
||||
|
||||
.cart-disclosure-modal__item + .cart-disclosure-modal__item {
|
||||
margin-top: 2.4rem;
|
||||
}
|
||||
|
||||
.cart-disclosure-modal__item-header {
|
||||
--cart-disclosure-modal-symbol-height: 1.8rem;
|
||||
--cart-disclosure-modal-symbol-width: calc(var(--cart-disclosure-modal-symbol-height) * 40 / 31);
|
||||
--cart-disclosure-modal-title-font-size: 1.4rem;
|
||||
--cart-disclosure-modal-title-line-height-ratio: calc(1 + 0.35 / var(--font-body-scale));
|
||||
--cart-disclosure-modal-title-line-height: calc(
|
||||
var(--cart-disclosure-modal-title-font-size) * var(--cart-disclosure-modal-title-line-height-ratio)
|
||||
);
|
||||
|
||||
align-items: flex-start;
|
||||
display: grid;
|
||||
gap: 0.9rem;
|
||||
grid-template-columns: var(--cart-disclosure-modal-symbol-width) minmax(0, 1fr);
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.cart-disclosure-modal__symbol-slot {
|
||||
align-items: flex-start;
|
||||
display: inline-flex;
|
||||
height: var(--cart-disclosure-modal-symbol-height);
|
||||
justify-content: center;
|
||||
margin-top: calc(
|
||||
(var(--cart-disclosure-modal-title-line-height) - var(--cart-disclosure-modal-symbol-height)) / 2
|
||||
);
|
||||
width: var(--cart-disclosure-modal-symbol-width);
|
||||
}
|
||||
|
||||
.cart-disclosure-modal__symbol {
|
||||
display: block;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.cart-disclosure-modal__item-title {
|
||||
font-size: var(--cart-disclosure-modal-title-font-size);
|
||||
font-weight: var(--font-body-weight-bold);
|
||||
line-height: var(--cart-disclosure-modal-title-line-height-ratio);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cart-disclosure-modal__item-content {
|
||||
font-size: 1.3rem;
|
||||
line-height: calc(1 + 0.45 / var(--font-body-scale));
|
||||
}
|
||||
|
||||
.cart-disclosure-modal__item-content p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cart-disclosure-modal__item-content p + p {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 749px) {
|
||||
.cart-disclosure-modal {
|
||||
padding: 1.6rem;
|
||||
}
|
||||
|
||||
.cart-disclosure-modal__content {
|
||||
max-height: calc(100vh - 3.2rem);
|
||||
max-width: 100%;
|
||||
padding: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.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-wrapper {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-right: 0.7rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.cart-item__error-text:empty + .svg-wrapper {
|
||||
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:has(+ .cart-item__nested-line) {
|
||||
margin-bottom: 1.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-items .cart-item__nested-line td {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.cart-item > td + td {
|
||||
padding-left: 4rem;
|
||||
}
|
||||
|
||||
.cart-item__details {
|
||||
width: 35rem;
|
||||
}
|
||||
|
||||
.cart-item__media {
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
.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 > * {
|
||||
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 (max-width: 989px) {
|
||||
.cart-items .quantity-popover__info-button {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
.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__title {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.cart-notification-product__title .cart-notification-product__name {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cart-notification-product__title .cart-item__disclosure {
|
||||
font-size: calc(var(--font-heading-scale) * 1.5rem);
|
||||
}
|
||||
|
||||
.cart-notification-product__name {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cart-notification .cart-item__disclosure-tooltip {
|
||||
bottom: auto;
|
||||
top: calc(100% + 0.9rem);
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
.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 > * + * {
|
||||
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__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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
.disclosures {
|
||||
container-type: inline-size;
|
||||
--disclosures-icon-height: 1.6rem;
|
||||
}
|
||||
|
||||
.disclosures__heading {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.disclosures__details {
|
||||
border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
|
||||
border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
|
||||
}
|
||||
|
||||
.disclosures__summary {
|
||||
padding: 2rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.disclosures__summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.disclosures__details[open] .disclosures__summary {
|
||||
padding-bottom: 0rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.disclosures__summary-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem 0;
|
||||
flex: 1;
|
||||
max-width: calc(100% - 3rem);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.disclosures-summary-item {
|
||||
display: inline-flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.disclosures-summary-item__open-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.disclosures__details[open] .disclosures-summary-item__title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.disclosures__details[open] .disclosures-summary-item__open-title {
|
||||
display: inline;
|
||||
font-weight: var(--font-body-weight-bold);
|
||||
}
|
||||
|
||||
.disclosures-separator {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.disclosures__icon {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
width: auto;
|
||||
height: var(--disclosures-icon-height);
|
||||
}
|
||||
|
||||
.disclosures-summary-item .disclosures__icon,
|
||||
.disclosures-item__header .disclosures__icon {
|
||||
margin-block-start: calc((1em * calc(1 + 0.8 / var(--font-body-scale)) - var(--disclosures-icon-height)) / 2);
|
||||
}
|
||||
|
||||
.disclosures__content {
|
||||
padding-top: 0;
|
||||
padding-bottom: 2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.disclosures-item {
|
||||
position: relative;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.disclosures-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 50rem;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.disclosures-item + .disclosures-item {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.disclosures-item:last-child {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.disclosures-item__content {
|
||||
max-width: 50rem;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.disclosures-item__content p:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.disclosures-item__header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.disclosures-item__header span,
|
||||
.disclosures-item__header img {
|
||||
margin: 0;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.disclosures-item__header span {
|
||||
font-weight: var(--font-body-weight-bold);
|
||||
}
|
||||
|
||||
.disclosures__details[open] .disclosures__summary-content > *:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.disclosures__summary > .icon-caret {
|
||||
position: absolute;
|
||||
right: auto;
|
||||
inset-inline-end: 1.5rem;
|
||||
top: calc(50% - 0.75rem);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.disclosures__details[open] .disclosures__summary > .icon-caret {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@container (max-width: 700px) {
|
||||
.disclosures__summary-content {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.disclosures__summary > .icon-caret {
|
||||
top: calc(2rem + (1em * calc(1 + 0.8 / var(--font-body-scale)) - 1.5rem) / 2);
|
||||
}
|
||||
|
||||
.disclosures-separator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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-wrapper {
|
||||
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);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -0,0 +1,451 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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));
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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__input {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.language-selector .disclosure__list {
|
||||
min-width: 200px;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,243 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
.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));
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.js .menu-drawer__menu li {
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.menu-drawer__menu-item {
|
||||
padding: 1.1rem 3rem;
|
||||
text-decoration: none;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.menu-drawer summary.menu-drawer__menu-item {
|
||||
padding-right: 5.2rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-drawer__menu-item > .svg-wrapper {
|
||||
width: 15px;
|
||||
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;
|
||||
}
|
||||
|
||||
.menu-drawer__close-button .svg-wrapper {
|
||||
transform: rotate(180deg);
|
||||
margin-right: 1rem;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.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 account-icon > .svg-wrapper {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.menu-drawer__account shop-user-avatar {
|
||||
--shop-avatar-size: 2.4rem;
|
||||
margin-right: 0.55rem;
|
||||
margin-left: -0.45rem;
|
||||
}
|
||||
|
||||
.menu-drawer__account:hover account-icon > .svg-wrapper {
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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';
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
.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;
|
||||
color: rgba(var(--color-foreground), 0.7);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
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):not(.visually-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);
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
--swatch-input--size: 3.6rem;
|
||||
|
||||
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 */
|
||||
@@ -0,0 +1,33 @@
|
||||
.progress-bar-container {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 0.13rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.progress-bar-value {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgb(var(--color-foreground));
|
||||
animation: indeterminateAnimation var(--duration-extra-longer) infinite ease-in-out;
|
||||
transform-origin: 0;
|
||||
}
|
||||
|
||||
.progress-bar .progress-bar-value {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes indeterminateAnimation {
|
||||
0% {
|
||||
transform: translateX(-20%) scaleX(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(30%) scaleX(0.7);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%) scaleX(0);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,377 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
@@ -0,0 +1,201 @@
|
||||
slideshow-component {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
slideshow-component .slideshow.banner {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
margin: 0;
|
||||
gap: 0;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.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-wrapper {
|
||||
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);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
/* 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--border-radius: 50%;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
border-radius: var(--swatch-input--border-radius);
|
||||
cursor: pointer;
|
||||
outline-offset: 0.2rem;
|
||||
outline-color: transparent;
|
||||
outline-style: solid;
|
||||
transition-property: outline-color, outline-width, box-shadow;
|
||||
transition-duration: var(--duration-short);
|
||||
transition-timing-function: ease;
|
||||
forced-color-adjust: none;
|
||||
}
|
||||
|
||||
.swatch-input__input + .swatch-input__label.swatch-input__label--square {
|
||||
--swatch-input--border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
/* Active state */
|
||||
.swatch-input__input:active + .swatch-input__label,
|
||||
.swatch-input__input:checked + .swatch-input__label {
|
||||
outline: 0.1rem solid rgb(var(--color-foreground));
|
||||
}
|
||||
|
||||
/* Hover state */
|
||||
.swatch-input__input + .swatch-input__label:hover,
|
||||
.swatch-input__input:hover + .swatch-input__label {
|
||||
outline: 0.2rem solid rgba(var(--color-foreground), 0.4);
|
||||
}
|
||||
|
||||
/* Focus visible */
|
||||
.swatch-input__input:focus-visible + .swatch-input__label {
|
||||
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
|
||||
box-shadow: 0 0 0 0.2rem rgb(var(--color-background)), 0 0 0.1rem 0.5rem rgba(var(--color-foreground), 0.25);
|
||||
}
|
||||
|
||||
/* Active and focused */
|
||||
.swatch-input__input:active:focus-visible + .swatch-input__label,
|
||||
.swatch-input__input:checked:focus-visible + .swatch-input__label {
|
||||
outline: 0.1rem solid rgb(var(--color-foreground));
|
||||
box-shadow: 0 0 0 0.2rem rgb(var(--color-background)), 0 0 0.1rem 0.4rem rgba(var(--color-foreground), 0.25);
|
||||
}
|
||||
|
||||
/* Visually disabled */
|
||||
.swatch-input__input.visually-disabled:not(:active):not(:checked) + .swatch-input__label {
|
||||
transition: none;
|
||||
}
|
||||
.swatch-input__input.visually-disabled:not(:active):not(:checked) + .swatch-input__label:hover {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Actually disabled */
|
||||
.swatch-input__input:disabled + .swatch-input__label {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Overrides for swatch snippet when used inside disabled swatch-input */
|
||||
.swatch-input__input:disabled + .swatch-input__label > .swatch,
|
||||
.swatch-input__input.visually-disabled + .swatch-input__label > .swatch {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Disabled styles */
|
||||
.swatch-input__input:disabled + .swatch-input__label > .swatch,
|
||||
.swatch-input__input.visually-disabled + .swatch-input__label > .swatch {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* Display crossed out line over swatch when input is disabled */
|
||||
.swatch-input__input:disabled + .swatch-input__label > .swatch::after,
|
||||
.swatch-input__input.visually-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;
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: calc(var(--crossed-line--size) * -0.5);
|
||||
left: 0;
|
||||
width: var(--diagonal--size);
|
||||
height: var(--crossed-line--size);
|
||||
background-color: rgb(var(--color-foreground));
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
/* 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);
|
||||
max-width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
background: var(--swatch--background);
|
||||
background-position: var(--swatch-focal-point, initial);
|
||||
background-size: cover;
|
||||
background-origin: border-box;
|
||||
border: 0.1rem solid rgba(var(--color-foreground), 0.15);
|
||||
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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
div.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;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
const ON_CHANGE_DEBOUNCE_TIMER = 300;
|
||||
|
||||
const PUB_SUB_EVENTS = {
|
||||
cartUpdate: 'cart-update',
|
||||
quantityUpdate: 'quantity-update',
|
||||
optionValueSelectionChange: 'option-value-selection-change',
|
||||
variantChange: 'variant-change',
|
||||
cartError: 'cart-error',
|
||||
};
|
||||
@@ -0,0 +1,754 @@
|
||||
.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-wrapper {
|
||||
height: 0.6rem;
|
||||
}
|
||||
|
||||
.customer .pagination li:first-of-type .svg-wrapper {
|
||||
margin-left: -0.2rem;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.customer .pagination li:last-of-type .svg-wrapper {
|
||||
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-wrapper {
|
||||
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-wrapper {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
@@ -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' },
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -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);
|
||||
@@ -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);
|
||||
@@ -0,0 +1,26 @@
|
||||
class DisclosuresContent extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.addEventListener('click', (event) => {
|
||||
if (event.target.closest('.disclosures-item__content')) return;
|
||||
if (
|
||||
event.target.closest('.disclosures-item__header') &&
|
||||
event.target !== event.target.closest('.disclosures-item__header')
|
||||
)
|
||||
return;
|
||||
|
||||
const item = event.target.closest('.disclosures-item');
|
||||
if (item) {
|
||||
const content = item.querySelector('.disclosures-item__content');
|
||||
if (content && event.clientX <= content.getBoundingClientRect().right) return;
|
||||
}
|
||||
|
||||
const details = this.closest('details');
|
||||
if (details) details.removeAttribute('open');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (!customElements.get('disclosures-content')) {
|
||||
customElements.define('disclosures-content', DisclosuresContent);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" class="email-signup-banner-background email-signup-banner-background-mobile" data-name="Layer 1" preserveAspectRatio="xMidYMid slice" viewBox="0 0 374.45 238.04"><defs><style>.cls-2,.cls-4,.cls-5{fill:rgb(var(--color-button))}.cls-4{opacity:.75}.cls-5{opacity:.1}</style></defs><path d="M89.5 238c-7.27-1.67-14.13-5.11-20.52-8.82a87.1 87.1 0 0 1-30.36-30.35c-6.72-11.64-9.49-24.91-9.49-39.33H29c0 14.42 2.77 27.71 9.49 39.36a87.1 87.1 0 0 0 30.36 30.35c6.39 3.71 13.25 7.15 20.52 8.82h.46Z" style="fill:none"/><path d="M106.58 95.46v-.6a80.4 80.4 0 0 1-9.11 24.62l-.6 1a80 80 0 0 1-25.22 26.36c-1 .67-2.07 1.33-3.14 1.95a78 78 0 0 1-25.42 9.44 80.3 80.3 0 0 1-14 1.26c0 14.42 2.77 27.69 9.49 39.33A87.1 87.1 0 0 0 69 229.17c6.39 3.71 13.25 7.15 20.52 8.82h4.18a15.3 15.3 0 0 1 3.38 0 74 74 0 0 0 10.2 0h-.64Z" class="cls-2"/><g style="opacity:.55"><path d="M357 118.48A78.9 78.9 0 0 0 346.42 158 78.9 78.9 0 0 0 357 197.68a79.8 79.8 0 0 0 17.46 20.88v-121A79.5 79.5 0 0 0 357 118.48" class="cls-2"/><path d="M346.42 0a78.9 78.9 0 0 1-10.56 39.25 79.66 79.66 0 0 1-28.95 29 78.6 78.6 0 0 1-39.17 10.6 78.6 78.6 0 0 1 39.15 10.59A79.23 79.23 0 0 1 346.42 158V78.86a79 79 0 0 1 28-60.49V0Zm-232.2 27.3a79.2 79.2 0 0 1-5-27.3H0v53.79a39.5 39.5 0 0 1 29.37-13h.86A39.58 39.58 0 0 1 69 78.88v1.51A39.62 39.62 0 0 1 0 107v47a78 78 0 0 0 29 5.56h.15a80.3 80.3 0 0 0 14-1.26 78 78 0 0 0 25.42-9.44 72 72 0 0 0 3.14-1.95 80 80 0 0 0 25.22-26.36l.6-1a80.4 80.4 0 0 0 9.11-24.62V78.57l24.69-24.1a79 79 0 0 1-11.41-15.19 79.3 79.3 0 0 1-5.7-11.98" class="cls-2"/></g><path d="M357 39.26a79.6 79.6 0 0 1 17.46-20.89A79.6 79.6 0 0 0 357 39.26m0 79.2A78.93 78.93 0 0 0 346.42 158a79.09 79.09 0 0 1 28-60.44 79.6 79.6 0 0 0-17.42 20.9" class="cls-2"/><path d="M357 197.68a78.9 78.9 0 0 1-10.57-39.6 79.06 79.06 0 0 0-78.68-79.14 78.6 78.6 0 0 0 39.17-10.6 79.66 79.66 0 0 0 28.95-29A78.9 78.9 0 0 0 346.42 0v-.35H109.28V0a79.2 79.2 0 0 0 5 27.3 79.3 79.3 0 0 0 5.63 12 79 79 0 0 0 11.41 15.19L187 0l57 55.91 23.36 22.93V238h107v-19.44A79.8 79.8 0 0 1 357 197.68M29.37 120A39.62 39.62 0 0 0 69 80.39v-1.51a39.56 39.56 0 0 0-38.77-38.09h-.86A39.5 39.5 0 0 0 0 53.79V107a39.52 39.52 0 0 0 29.37 13" class="cls-2"/><path d="M94.12 238h2.82a12.7 12.7 0 0 0-2.82 0" class="cls-4"/><path d="M38.47 198.87C31.75 187.22 29 173.93 29 159.51A78 78 0 0 1 0 154v84h89.35c-7.27-1.67-14.13-5.11-20.52-8.82a87.1 87.1 0 0 1-30.36-30.31" class="cls-5"/><path d="M267.41 78.88 244 55.91 187 0l-55.74 54.46-24.69 24.1v15.26c0-.21.11-.42.15-.6V238h1.41-.91 160.19zm-80.24-34.39a9.88 9.88 0 1 1 9.83-9.88 9.88 9.88 0 0 1-9.83 9.88" class="cls-4"/><path d="M106.78 238V93.22c0 .18-.1.39-.15.6v1.64l.01 142.54h1.55Z" class="cls-4"/><path d="M357 39.26a78.9 78.9 0 0 0-10.57 39.6V158a79 79 0 0 1 28-60.43v-79.2A79.6 79.6 0 0 0 357 39.26" class="cls-5"/><circle cx="187.17" cy="34.61" r="9.88" class="cls-5"/></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" class="email-signup-banner-background" preserveAspectRatio="xMidYMid slice" version="1.1" viewBox="0 0 2169.3 648"><style>.st0,.st4{fill:rgb(var(--color-button))}.st4{opacity:.55;enable-background:new}</style><path d="M1791.7 650.9V370.8h-.1s.1 271.6.1 280.1m0-280.1s-.1 0 0 0" class="st0"/><path d="M1308.6 371.2V216.6L1084.9-.1 861.4 215.8V651h447.2zm-223.3-248.4c-15 .1-27-12-27.2-26.8s12-27 26.8-27.2c15-.1 27 12 27.2 26.8v.1c0 14.9-11.9 27-26.8 27.1" style="opacity:.75;fill:rgb(var(--color-button))"/><path d="M501.6 436.9h131c-45.2-4-86.7-22.2-120-49.9-30.9-25.8-54.7-59.9-68.1-98.7-7.8-22.5-12-46.4-12-71.3V0h.5-205.7c2.5.1 5-.2 7.5 0 110.9 10.6 197.7 104.5 197.8 217.8.2 120.4-100.3 218.8-220.9 218.8h-76v213.9h152.1v-.2c.1-117.8 95.9-213.4 213.8-213.4m359.8 213.5V277.7c-4.8 17.5-11.8 34.2-20.8 50l-1.7 2.8c-6.3 10.8-13.5 20.8-21.5 30.3-.1.2-.4.4-.5.6l-.1.1c-13.5 15.8-29.2 29.6-46.7 40.9-2.9 1.8-5.6 3.6-8.6 5.3-12.8 7.5-26.3 13.6-40.4 18.3-9.5 3.1-19.1 5.6-29 7.4-10.9 1.9-21.9 3.1-33 3.3-1.8 0-3.5.1-5.3.1h-.1v.7c.1 39 7.7 74.9 25.8 106.5 11.4 19.1 25.4 36.5 41.5 51.6 12.7 11.8 26.6 22.4 41.5 31.2.1.1.4.2.5.4 22.7 13.2 48 20.9 73.9 23.1 1.2.1 2.3.2 3.5.2 3.8.2 20.8.4 20.8.4v-.5z" class="st0"/><path d="M651.6 330.4h2.6c25.2-.6 48.5-9.7 66.8-24.5 25.1-20.2 41.2-51.3 41.2-86 0-34.8-16-65.8-41.2-86-17.9-14.5-40.6-23.4-65.1-24.4-1.4 0-2.9-.1-4.3-.1-61.1 0-110.5 49.5-110.5 110.5s49.4 110.5 110.5 110.5" class="st0"/><g style="opacity:.55"><path d="M1810 371.2c-3.2 0-10.6 0-18.2-.5-3.7-.2-7.5-.6-11-1.1-1.1-.1-2.2-.4-3.2-.5-125.3-15.6-224.1-119.6-229-248.3-.1-1.1-.2-2.3-.4-3.3-11.8 130.3-108.6 234.6-231.7 252-2.6.4-5.3.7-7.9 1v.6c126.6 14 226.7 119.7 239 252.3 0 .2.6.1.7 0 12.4-133.6 114.3-239.9 242.2-252.6h1.2l.2 101.2-.3 179 384.5.1V371z" class="st0"/><path d="M1792.4 239c5.9.8 11.7 1.2 17.8 1.2 72.4 0 131-58.6 131-131 0-45.6-23.3-85.8-58.6-109.2h-144.9c-.2.1-.4-.1-.6 0-34.9 23.6-57.9 64-57.9 109.2 0 66.3 49.3 121.1 113.2 129.8" class="st0"/></g><path d="M432.6 217.8C432.5 104.5 345.7 10.6 234.8-.1l-99 .1v436.7h76c120.6-.1 221-98.5 220.8-218.9M1085 68.9c-15 .1-26.9 12.2-26.8 27.2s12.2 26.9 27.2 26.8c14.8-.1 26.8-12.1 26.8-26.9v-.1c-.2-15.1-12.3-27.2-27.2-27M763.2 627.2c-.1-.1-.4-.2-.5-.4-15.1-8.9-29-19.4-41.5-31.2-16.2-15.1-30-32.4-41.5-51.6-18.2-31.5-25.7-67.5-25.8-106.5v-.7h-.3v-.1h-152c-118 0-213.7 95.6-213.8 213.6v.3h552.9c-1.2-.1-2.3-.2-3.5-.2-26.1-2.2-51.3-10-74-23.2M1882.5-.1s.1-.1 0 0c35.4 23.4 58.7 63.7 58.7 109.2 0 72.4-58.6 131-131 131-6 0-12-.4-17.8-1.2-63.9-8.7-113.2-63.5-113.2-129.8 0-45.2 23-85.7 57.9-109.2.2-.1.4.1.6 0h.2-165.1c-15.8 33.5-24.6 71.7-24.6 111.2v4.9c0 1.7.1 3.5.1 5.1 4.9 128.6 103.7 232.7 229 248.3 1.1.1 2.2.4 3.2.5 3.5.5 7.3.8 11 1.1 7.7.5 276.9.1 276.9.1V-.1z" class="st0" style="opacity:.1"/><path d="M1308.6 216.6v153.9c2.6-.2 5.1-.6 7.8-1 123.1-17.3 219.9-121.7 231.7-251.8.1 1.1.2 2.3.4 3.3-.1-1.7-.1-3.3-.1-5.1V111c0-39.5 8.9-77.5 24.6-111h-488.1zm483 154.2c-127.8 12.8-231 119-243.5 252.6 0 .2-.1.1-.2 0-12.3-132.7-112.7-238.3-239.3-252.3l-.1 279.3v.7h483.1v-.2c.1-8.5 0-280.1 0-280.1" class="st0"/><path d="M1548.1 623.4c12.4-133.5 115.6-239.8 243.5-252.6h-1.3c-127.9 12.7-229.7 119-242.2 252.6M2068.7-.1V371h107.2V-.1z" class="st0"/><path d="M135.9-.1C59.6-.1-2.3 61.8-2.3 138.1v511.8l138.2-.4z" class="st4"/><path d="M721.2 134.3c-17.9-14.5-40.6-23.4-65.1-24.4-1.4 0-2.9-.1-4.3-.1-61.1 0-110.5 49.5-110.5 110.5s49.5 110.5 110.5 110.5h2.6c25.2-.6 48.5-9.7 66.8-24.5 25.1-20.2 41.2-51.3 41.2-86s-16.1-65.8-41.2-86" class="st0"/><path d="M870.4-.1H432.7v217.5c0 24.9 4.2 48.9 12 71.3 13.3 38.8 37.2 72.9 68.1 98.7 33.3 27.8 74.5 45.5 119.9 49.4h21.1s3.7.6 5.5.5c11.1-.2 22.1-1.4 33-3.3 9.8-1.8 19.5-4.3 29-7.4 14-4.7 27.6-10.8 40.4-18.3 2.9-1.7 5.7-3.5 8.6-5.3 17.5-11.4 33.1-25.1 46.7-40.9l.1-.1c.1-.2.4-.4.5-.6 8-9.5 15.2-19.5 21.5-30.3l1.7-2.8c9-15.8 15.9-33.1 20.7-50.6v-62l69-66.6c-37.4-38.5-60.1-91.4-60.1-149.2M721.2 306.3c-18.3 14.8-41.5 23.9-66.8 24.5h-2.6c-61.1 0-110.5-49.5-110.5-110.5s49.5-110.5 110.5-110.5c1.4 0 2.9 0 4.3.1 24.6 1 47.1 9.9 65.1 24.4 25.1 20.2 41.2 51.3 41.2 86-.1 34.8-16.1 65.8-41.2 86" class="st4"/><path d="M870.4-.1s0-.1 0 0c0 57.8 22.7 110.8 60 149.2L1084.9-.1s-214.5-.2-214.5 0" class="st0"/></svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,442 @@
|
||||
class FacetFiltersForm extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.onActiveFilterClick = this.onActiveFilterClick.bind(this);
|
||||
|
||||
this.debouncedOnSubmit = debounce((event) => {
|
||||
this.onSubmitHandler(event);
|
||||
}, 800);
|
||||
|
||||
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 updateEvent = FacetFiltersForm.startUpdateEvent(searchParams);
|
||||
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, updateEvent)
|
||||
: FacetFiltersForm.renderSectionFromFetch(url, event, updateEvent);
|
||||
});
|
||||
|
||||
if (updateURLHash) FacetFiltersForm.updateURLHash(searchParams);
|
||||
}
|
||||
|
||||
static startUpdateEvent(searchParams) {
|
||||
const { SearchUpdateEvent, CollectionUpdateEvent } = window.StandardEvents || {};
|
||||
if (!SearchUpdateEvent && !CollectionUpdateEvent) return;
|
||||
|
||||
const facetsForm = document.querySelector('facet-filters-form');
|
||||
const facetsContainer = document.querySelector('.facets-container');
|
||||
const collectionId = facetsContainer?.dataset.collectionId || null;
|
||||
const collectionHandle = facetsContainer?.dataset.collectionHandle || '';
|
||||
const currentCount = parseInt(document.getElementById('ProductCount')?.dataset.productCount) || 0;
|
||||
const urlSearchParams = new URLSearchParams(searchParams);
|
||||
const isSearchPage = facetsContainer?.dataset.template === 'search';
|
||||
const isCollectionPage = facetsContainer?.dataset.template === 'collection';
|
||||
const dispatchTarget = facetsForm || document;
|
||||
|
||||
let deferred;
|
||||
|
||||
if (isSearchPage) {
|
||||
deferred = SearchUpdateEvent.createPromise();
|
||||
dispatchTarget.dispatchEvent(
|
||||
new SearchUpdateEvent({
|
||||
search: {
|
||||
query: urlSearchParams.get('q') || '',
|
||||
productFilters: SearchUpdateEvent.parseProductFilters(urlSearchParams),
|
||||
sortKey: SearchUpdateEvent.getSortKey(urlSearchParams),
|
||||
},
|
||||
promise: deferred.promise,
|
||||
}),
|
||||
);
|
||||
} else if (isCollectionPage) {
|
||||
// collectionId is null for auto-generated collections (/collections/all,
|
||||
// /collections/vendors/<x>, etc.) — the SSE schema accepts that.
|
||||
deferred = CollectionUpdateEvent.createPromise();
|
||||
dispatchTarget.dispatchEvent(
|
||||
new CollectionUpdateEvent({
|
||||
collection: { id: collectionId, handle: collectionHandle, productsCount: currentCount },
|
||||
productFilters: CollectionUpdateEvent.parseProductFilters(urlSearchParams),
|
||||
sortKey: CollectionUpdateEvent.getSortKey(urlSearchParams),
|
||||
promise: deferred.promise,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
if (!deferred) return;
|
||||
|
||||
return {
|
||||
resolve: (filteredCount) => {
|
||||
deferred.resolve({ [isSearchPage ? 'totalCount' : 'productsCount']: filteredCount });
|
||||
},
|
||||
reject: deferred.reject,
|
||||
};
|
||||
}
|
||||
|
||||
static renderSectionFromFetch(url, event, updateEvent) {
|
||||
fetch(url)
|
||||
.then((response) => response.text())
|
||||
.then((html) => {
|
||||
FacetFiltersForm.filterData = [...FacetFiltersForm.filterData, { html, url }];
|
||||
FacetFiltersForm.renderSection(html, event, updateEvent);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
updateEvent?.reject(error);
|
||||
});
|
||||
}
|
||||
|
||||
static renderSectionFromCache(filterDataUrl, event, updateEvent) {
|
||||
const html = FacetFiltersForm.filterData.find(filterDataUrl).html;
|
||||
FacetFiltersForm.renderSection(html, event, updateEvent);
|
||||
}
|
||||
|
||||
static renderSection(html, event, updateEvent) {
|
||||
FacetFiltersForm.renderFilters(html, event);
|
||||
FacetFiltersForm.renderProductGridContainer(html);
|
||||
FacetFiltersForm.renderProductCount(html, updateEvent);
|
||||
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, updateEvent) {
|
||||
const parsedHtml = new DOMParser().parseFromString(html, 'text/html');
|
||||
const sourceCount = parsedHtml.getElementById('ProductCount');
|
||||
const count = sourceCount.innerHTML;
|
||||
const container = document.getElementById('ProductCount');
|
||||
const containerDesktop = document.getElementById('ProductCountDesktop');
|
||||
container.innerHTML = count;
|
||||
container.dataset.productCount = sourceCount.dataset.productCount || '';
|
||||
container.dataset.totalCount = sourceCount.dataset.totalCount || '';
|
||||
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'));
|
||||
|
||||
updateEvent?.resolve(parseInt(sourceCount.dataset.productCount) || 0);
|
||||
}
|
||||
|
||||
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 isTextInput = event.target.getAttribute('type') === 'text';
|
||||
|
||||
if (!isTextInput) {
|
||||
// Try to return focus to the same checkbox the user just toggled,
|
||||
// re-selecting it from the freshly rendered HTML by its id.
|
||||
const originatingInputId = event.target.id;
|
||||
const matchingInput = originatingInputId
|
||||
? newFacetDetailsElement.querySelector(`#${CSS.escape(originatingInputId)}`)
|
||||
: null;
|
||||
|
||||
if (matchingInput) {
|
||||
matchingInput.focus();
|
||||
} else {
|
||||
// Fallback to summary/close button if the checkbox can't be found
|
||||
const fallbackSelector = newFacetDetailsElement.classList.contains('mobile-facets__details')
|
||||
? `.mobile-facets__close-button`
|
||||
: `.facets__summary`;
|
||||
const fallbackElement = newFacetDetailsElement.querySelector(fallbackSelector);
|
||||
if (fallbackElement) fallbackElement.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') {
|
||||
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));
|
||||
element.addEventListener('keydown', this.onKeyDown.bind(this));
|
||||
});
|
||||
this.setMinAndMaxValues();
|
||||
}
|
||||
|
||||
onRangeChange(event) {
|
||||
this.adjustToValidValues(event.currentTarget);
|
||||
this.setMinAndMaxValues();
|
||||
}
|
||||
|
||||
onKeyDown(event) {
|
||||
if (event.metaKey) return;
|
||||
|
||||
const pattern = /[0-9]|\.|,|'| |Tab|Backspace|Enter|ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Delete|Escape/;
|
||||
if (!event.key.match(pattern)) event.preventDefault();
|
||||
}
|
||||
|
||||
setMinAndMaxValues() {
|
||||
const inputs = this.querySelectorAll('input');
|
||||
const minInput = inputs[0];
|
||||
const maxInput = inputs[1];
|
||||
if (maxInput.value) minInput.setAttribute('data-max', maxInput.value);
|
||||
if (minInput.value) maxInput.setAttribute('data-min', minInput.value);
|
||||
if (minInput.value === '') maxInput.setAttribute('data-min', 0);
|
||||
if (maxInput.value === '') minInput.setAttribute('data-max', maxInput.getAttribute('data-max'));
|
||||
}
|
||||
|
||||
adjustToValidValues(input) {
|
||||
const value = Number(input.value);
|
||||
const min = Number(input.getAttribute('data-min'));
|
||||
const max = Number(input.getAttribute('data-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);
|
||||
+1460
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-3d-model" viewBox="0 0 18 21"><path fill="currentColor" d="m7.68 20.629-6.4-3.906A2.71 2.71 0 0 1 0 14.405v-7.81a2.72 2.72 0 0 1 1.278-2.318l6.4-3.9a2.52 2.52 0 0 1 2.644-.003l6.4 3.9A2.72 2.72 0 0 1 18 6.6v7.809a2.71 2.71 0 0 1-1.279 2.318l-6.4 3.906A2.54 2.54 0 0 1 9 21a2.54 2.54 0 0 1-1.32-.371M8.724 2.078l-6.4 3.9a.71.71 0 0 0-.321.612v7.81a.71.71 0 0 0 .32.61L8 18.48v-7.561a1.77 1.77 0 0 1 .934-1.555l6.512-3.523L9.28 2.08a.52.52 0 0 0-.556-.002"/></svg>
|
||||
|
After Width: | Height: | Size: 532 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-account" viewBox="0 0 18 19"><path fill="currentColor" fill-rule="evenodd" d="M6 4.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0m3-4a4 4 0 1 0 0 8 4 4 0 0 0 0-8m5.58 12.15c1.12.82 1.83 2.24 1.91 4.85H1.51c.08-2.6.79-4.03 1.9-4.85C4.66 11.75 6.5 11.5 9 11.5s4.35.26 5.58 1.15M9 10.5c-2.5 0-4.65.24-6.17 1.35C1.27 12.98.5 14.93.5 18v.5h17V18c0-3.07-.77-5.02-2.33-6.15-1.52-1.1-3.67-1.35-6.17-1.35" clip-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 477 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-apple" viewBox="0 0 20 20"><path d="M10.662 1.843C11.5.994 12.582.556 13.336.406a.5.5 0 0 1 .589.397c.343 1.797-.22 3.099-1.099 3.97-.853.847-1.973 1.26-2.752 1.39a.5.5 0 0 1-.576-.416c-.276-1.752.305-3.035 1.164-3.904m-.23 3.208c.552-.172 1.188-.49 1.69-.988.564-.56.98-1.367.893-2.533a4.36 4.36 0 0 0-1.642 1.016c-.563.57-.985 1.374-.94 2.505"/><path d="M6.745 1.364a.5.5 0 0 1 .618-.343c1.068.307 3.061 1.669 3.137 4.663a.5.5 0 1 1-1 .025C9.437 3.226 7.811 2.19 7.087 1.983a.5.5 0 0 1-.342-.619"/><path d="M5.798 5.516c-.715.287-1.394.82-1.883 1.434-.9 1.13-1.379 2.53-1.379 4.249 0 3.129 1.845 5.768 4.544 6.885.331.137.679.126 1.143.05q.15-.024.32-.056c.384-.07.842-.155 1.314-.155s.954.084 1.369.157q.198.036.373.062c.52.08.918.09 1.273-.058a7.42 7.42 0 0 0 4.592-6.873c-.076-1.458-.297-2.505-.721-3.322-.415-.8-1.047-1.42-2.026-1.988-.795-.33-1.359-.45-1.776-.462a1.93 1.93 0 0 0-.96.2 4 4 0 0 0-.401.23l-.069.044a8 8 0 0 1-.383.231c-.34.188-.74.345-1.271.345-.63 0-1.017-.19-1.335-.44a6 6 0 0 1-.258-.218q-.065-.057-.11-.094a1.7 1.7 0 0 0-.334-.23c-.605-.306-1.31-.277-2.022.01m-.373-.928c.896-.36 1.915-.445 2.847.028.218.11.386.238.526.355.071.06.123.105.168.146.058.05.105.093.172.145.163.128.338.227.719.227.31 0 .544-.086.788-.22a7 7 0 0 0 .403-.246c.146-.091.31-.192.495-.282a2.9 2.9 0 0 1 1.43-.302c.583.019 1.28.183 2.16.552l.028.012.027.015c1.118.643 1.915 1.395 2.442 2.41.52 1.003.755 2.218.833 3.745v.026a8.42 8.42 0 0 1-5.207 7.808c-.622.259-1.254.208-1.807.124a22 22 0 0 1-.467-.078c-.39-.068-.746-.13-1.125-.13-.372 0-.705.061-1.07.128q-.194.036-.404.071c-.508.082-1.087.133-1.685-.114-3.07-1.27-5.162-4.273-5.162-7.81 0-1.918.54-3.545 1.597-4.872.584-.733 1.398-1.379 2.292-1.738"/></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-arrow" viewBox="0 0 14 10"><path fill="currentColor" fill-rule="evenodd" d="M8.537.808a.5.5 0 0 1 .817-.162l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 1 1-.708-.708L11.793 5.5H1a.5.5 0 0 1 0-1h10.793L8.646 1.354a.5.5 0 0 1-.109-.546" clip-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 322 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-banana" viewBox="0 0 20 20"><path d="M9.59 2.05a.5.5 0 0 1 .39-.082l2.176.456a.5.5 0 0 1 .394.544l-.236 2.136c.041.034.091.067.165.116l.146.098c.326.223.766.564 1.065 1.213.334.727.613 1.583.89 2.434l.07.21c.305.935.617 1.865 1.018 2.694.4.83.872 1.525 1.475 2.01.591.475 1.334.768 2.325.757a.5.5 0 0 1 .497.59c-.092.503-.414 1.185-1.072 1.696-.671.522-1.651.835-2.995.658-1.215-.129-2.713-.701-3.892-2.269l-.054-.073c-.833 1.8-3.228 3.968-7.368 3.377a.5.5 0 0 1-.079-.973l.093-.027c.382-.11 1.198-.347 1.752-1.378.267-.756.383-1.315.423-1.803.041-.497.005-.94-.048-1.482l-.015-.15c-.11-1.082-.248-2.461.09-5.018.095-.71.45-1.423.906-1.983.367-.453.84-.854 1.358-1.059l.318-2.351a.5.5 0 0 1 .207-.342m1.683 12.058c-.766-1.551-1.252-3.724-1.236-6.735a.5.5 0 0 1 1 .005c-.02 3.76.772 6.007 1.768 7.332.989 1.314 2.218 1.773 3.204 1.877l.013.001c1.12.148 1.824-.119 2.257-.455a2 2 0 0 0 .48-.536 4.36 4.36 0 0 1-2.243-.939c-.764-.614-1.315-1.456-1.749-2.354-.433-.898-.765-1.888-1.068-2.818l-.064-.196c-.284-.869-.545-1.67-.854-2.341-.188-.41-.456-.625-.72-.805l-.085-.057a4 4 0 0 1-.339-.245c-.141-.123-.322-.328-.335-.64l.003-.075.202-1.818-1.206-.252-.29 2.136a.5.5 0 0 1-.393.422c-.34.07-.764.358-1.136.816-.367.451-.625.997-.69 1.484-.324 2.443-.193 3.737-.088 4.783l.016.155c.054.547.099 1.068.05 1.664-.05.598-.192 1.253-.49 2.09l-.028.064a3.9 3.9 0 0 1-.765 1.023c3.168-.235 4.617-2.481 4.786-3.586"/><path d="M6.271 11.8c.258-.497.332-.892.315-1.055l.994-.103c.047.447-.127 1.05-.421 1.618a5.1 5.1 0 0 1-1.425 1.709 17 17 0 0 1-2.331 1.512c2.157-.21 3.158-.685 3.534-.987l.626.78c-.77.617-2.637 1.313-6.558 1.313a.5.5 0 0 1-.21-.954l.222-.103c1.575-.73 2.596-1.204 4.111-2.357A4.1 4.1 0 0 0 6.271 11.8"/></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-bottle" viewBox="0 0 20 20"><path d="M13.144 3.025a.5.5 0 0 1 .388.815.74.74 0 0 0-.163.503.9.9 0 0 0 .09.37c1.145 1.978 1.575 4.81 1.653 5.973v8.091a.5.5 0 0 1-.5.5H5.398a.5.5 0 0 1-.5-.5v-8.041c-.056-.885.135-1.942.395-2.918.265-.99.612-1.942.894-2.62.053-.128.129-.266.185-.368l.048-.088a.8.8 0 0 0 .103-.266c.01-.08-.012-.18-.083-.312a2 2 0 0 0-.136-.217 2 2 0 0 1-.116-.182.5.5 0 0 1 .439-.74zm-.752 1h-4.93c.051.17.08.368.051.584a1.8 1.8 0 0 1-.209.598l-.083.155c-.046.083-.08.145-.112.22-.268.647-.6 1.555-.85 2.494-.253.949-.411 1.887-.363 2.61l.001.034v7.557h8.216v-7.54c-.077-1.118-.494-3.751-1.52-5.523a1.86 1.86 0 0 1-.201-1.189"/><path d="M6.373 1.698A1 1 0 0 1 7.36.859h5.109a1 1 0 0 1 .97.755l.332 1.313a1 1 0 0 1-.97 1.245h-5.95a.75.75 0 0 1-.74-.87zm6.096.161H7.36l-.215 1.313h5.656zm1.632 7.094H14.1l-.04.021-.002.001-.043.022-.043.02-.043.022-.044.022-.044.02-.045.022-.045.02-.045.021-.046.02-.046.02-.047.02-.047.02-.048.018-.048.019-.049.018-.049.017-.05.017-.05.016-.05.016-.051.015-.052.014-.051.013-.053.012-.052.012-.054.01-.053.01-.054.009-.054.008-.055.006-.054.006-.055.004-.055.004-.055.002-.056.001h-.11l-.055-.003-.055-.003-.055-.005-.054-.005-.054-.007-.054-.008-.054-.008-.053-.01-.053-.01-.053-.012-.051-.012-.052-.013-.051-.014-.05-.015-.051-.015-.05-.016-.049-.017-.049-.017-.048-.018-.048-.018-.047-.018-.047-.02-.046-.019-.046-.02-.046-.02-.045-.02-.045-.02-.044-.022-.044-.02-.044-.022-.043-.02-.043-.022-.04-.02-.002-.001-.04-.02-.002-.002-.042-.02-.241-.125-.04-.02h-.001l-.037-.019h-.002l-.036-.019-.003-.001-.035-.018-.003-.001-.036-.018-.037-.018-.037-.017-.037-.017-.036-.017-.036-.016-.035-.015-.035-.015-.034-.015-.034-.013-.033-.013-.033-.013-.033-.012-.032-.01-.031-.011-.031-.01-.03-.01-.03-.008-.03-.008-.03-.007-.028-.007-.029-.006-.028-.005-.027-.005-.028-.004-.026-.004-.027-.003-.026-.003-.027-.002h-.026l-.026-.002h-.077l-.026.002-.026.002-.027.002-.026.003-.027.003-.027.004-.028.005-.027.005-.029.006-.028.006-.03.007-.029.008-.03.008-.03.01-.031.009-.031.01-.032.011-.033.012-.032.012-.034.013-.033.013-.034.014-.035.015-.035.015-.035.016-.036.016-.037.017-.036.017-.038.018-.037.019-.038.018-.038.02-.038.018-.002.001-.037.02H8.02l-.282.144-.002.001-.042.021-.042.022-.043.021-.044.022-.043.02-.045.022-.044.021-.045.02-.046.022-.045.02-.047.02-.046.02-.048.019-.047.019-.048.018-.049.018-.049.018-.05.017-.05.016-.05.016-.05.014-.052.014-.052.014-.052.012-.053.012-.053.01-.054.01-.054.01-.054.007-.054.007-.055.005-.055.005-.055.004-.055.002-.055.001H5.9l-.055-.003-.055-.003-.055-.005-.055-.005-.054-.006-.054-.008-.054-.009-.053-.01-.001-1.086.031.011.031.01.03.01.031.008.03.008.029.007.029.007.028.006.028.005.028.005.027.004.027.004.027.003.026.003.026.002.026.001.026.001h.078l.026-.001.026-.002.026-.002.027-.003.027-.003.027-.004.027-.005.028-.005.028-.006.029-.006.029-.007.029-.008.03-.008.03-.009.031-.01.031-.01.032-.01.032-.012.033-.012.033-.013.034-.013.034-.014.035-.015.035-.015.035-.016.036-.016.036-.017.037-.018.037-.017.038-.019.038-.018.038-.02.038-.018.001-.001.038-.02h.001l.241-.123.043-.022.042-.021.043-.022.042-.021.044-.021.044-.022.044-.02.044-.022.045-.02.046-.021.045-.02.047-.02.046-.02.047-.02.048-.019.048-.018.049-.018.049-.018.05-.017.049-.016.05-.016.051-.015.052-.014.052-.013.052-.013.052-.012.054-.01.053-.01.054-.01.054-.007.054-.007.055-.006.055-.004.055-.004.055-.002.055-.002h.055l.056.001.055.002.055.003.054.005.055.005.054.006.054.008.054.008.053.01.053.01.053.011.052.013.051.013.052.013.05.015.05.015.05.016.05.016.048.018.049.017.048.018.047.019.047.019.046.02.047.02.045.02.046.02.044.02.045.02.044.022.043.02.043.022.043.021.043.022.042.02.041.022.243.124.039.02h.001l.037.02h.002l.037.018.002.002.036.017.002.002.037.017.037.019.037.017.037.017.036.017.035.016.036.016.035.015.034.014.034.014.033.013.033.012.033.012.032.012.032.01.03.01.031.01.03.008.03.008.03.008.028.006.029.006.028.006.027.005.028.004.027.004.026.003.027.003.026.002.026.001.026.001h.078l.026-.001.026-.002.026-.002.027-.003.026-.003.027-.004.028-.005.027-.005.029-.005.028-.007.03-.007.029-.007.03-.008.03-.01.03-.009.032-.01.032-.01.032-.012.033-.012.033-.013.033-.013.034-.014.035-.015.035-.015.035-.016.036-.016.036-.017.037-.017.037-.018.036-.017.038-.02h.003l.036-.018.002-.001.036-.019h.002l.038-.02.283-.144.001-.001.042-.021.043-.022.043-.021.043-.022.044-.021.044-.021.045-.021.045-.021.045-.02.046-.021.046-.02-.063 1.227-.041.02z"/></svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-box" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.695.679a1 1 0 0 1 .674.003l7.846 2.859a1 1 0 0 1 .658.94v9.948a1 1 0 0 1-.553.894l-7.847 3.924a1 1 0 0 1-.882.006l-8.137-3.929a1 1 0 0 1-.565-.9v-9.94a1 1 0 0 1 .668-.943zM6.08 3.01 2.535 4.257l7.614 3.378 3.42-1.517zm.706-.248L14.2 5.838l3.337-1.48-7.51-2.736zM1.89 14.424v-9.36l7.76 3.444v9.662zm15.984.005-7.224 3.612V8.508l7.224-3.205z"/></svg>
|
||||
|
After Width: | Height: | Size: 478 B |
@@ -0,0 +1 @@
|
||||
<svg class="icon icon-caret" viewBox="0 0 10 6"><path fill="currentColor" fill-rule="evenodd" d="M9.354.646a.5.5 0 0 0-.708 0L5 4.293 1.354.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708" clip-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 237 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-carrot" viewBox="0 0 20 20"><path d="M13.2 3.2c.87.248 1.604.806 2.183 1.384.838.838 1.293 1.714 1.428 2.588.136.874-.055 1.699-.428 2.425-.442.86-1.221 1.436-1.921 1.89L2.626 19.163a1.188 1.188 0 0 1-1.65-1.633l7.63-12.04c.411-.648.922-1.36 1.672-1.82 1.038-.637 2.03-.724 2.923-.47m-.273.963c-.617-.176-1.32-.134-2.126.36-.541.332-.95.873-1.35 1.504L1.82 18.065a.188.188 0 0 0 .261.258l11.836-7.675c.685-.444 1.263-.9 1.576-1.508.294-.574.427-1.187.33-1.815-.098-.626-.431-1.316-1.149-2.034-.518-.518-1.108-.947-1.748-1.128"/><path d="M10.767 12.868a.25.25 0 0 1-.353.014L8.908 11.49a.25.25 0 0 1 .339-.367l1.506 1.392a.25.25 0 0 1 .014.353m.393-4.444a.25.25 0 0 1-.353.016l-2.29-2.1a.25.25 0 1 1 .338-.368l2.29 2.1a.25.25 0 0 1 .015.352m5.327-5.394a.25.25 0 0 1 0 .354L15.119 4.75a.25.25 0 1 1-.354-.353l1.368-1.368a.25.25 0 0 1 .354 0M6.248 14.6a.25.25 0 0 1-.353.014L4.389 13.22a.25.25 0 1 1 .34-.367l1.505 1.392a.25.25 0 0 1 .014.354"/><path d="M15.149 1.795c-.338.372-.634.628-.937.782a1.74 1.74 0 0 1-.902.183h-.812c-.7.06-1.053.693-1.046 1.183l-1 .013c-.012-.85.595-2.093 1.99-2.195l.018-.001h.881c.18.008.29-.01.417-.074.148-.075.35-.232.666-.58l.015-.017.017-.016A2.44 2.44 0 0 1 16.07.42c.662-.01 1.367.252 2.046.866.311.281.753.747.945 1.372.205.666.102 1.433-.532 2.223l-.02.025-.023.022c-.16.155-.231.245-.275.362-.046.122-.08.33-.037.737l.102.77c.06.436-.085.952-.374 1.378-.3.44-.782.83-1.446.956l-.187-.982c.366-.07.633-.281.806-.535.182-.269.23-.54.21-.681V6.93l-.105-.789c-.052-.489-.028-.873.094-1.2.12-.32.315-.533.493-.708.428-.544.436-.963.338-1.28-.111-.363-.389-.68-.66-.924-.523-.473-.99-.614-1.36-.608a1.44 1.44 0 0 0-.935.374"/></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart-empty" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33L28.4 11.8zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1-9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z"/></svg>
|
||||
|
After Width: | Height: | Size: 388 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 0 0-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0 0 20.5 6.5m3.75 5.31v-.56a3.75 3.75 0 1 0-7.5 0v.56zm-7.5 1h7.5v.56a3.75 3.75 0 1 1-7.5 0zm-1 0v.56a4.75 4.75 0 1 0 9.5 0v-.56h2.22l.71 10.67a4 4 0 0 1-3.99 4.27h-7.38a4 4 0 0 1-4-4.27l.72-10.67z"/></svg>
|
||||
|
After Width: | Height: | Size: 485 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-chat-bubble" viewBox="0 0 20 20"><path d="M5.8 10.243a1 1 0 1 1 2 0 1 1 0 0 1-2 0M9.23 10.243a1 1 0 1 1 2 0 1 1 0 0 1-2 0M12.66 10.243a1 1 0 1 1 2 0 1 1 0 0 1-2 0"/><path fill-rule="evenodd" d="m16.645 17.204-.008-.004a19 19 0 0 1-.767-.423c-.645-.367-1.263-.72-1.442-.598a7.472 7.472 0 1 1 2.05-2.082c-.134.202.192.843.533 1.513.147.29.297.584.414.85l.006.014c.193.443.293.808.136.944-.128.136-.488.006-.922-.214m1.614.936c-.38.372-.857.345-1.046.321a2.5 2.5 0 0 1-.626-.181 11 11 0 0 1-1.081-.56l-.132-.074c-.29-.166-.538-.307-.744-.408a8.472 8.472 0 1 1 2.877-2.902l.008.02c.092.22.226.483.385.795l.084.165c.178.353.388.774.516 1.146.063.181.131.42.143.669.01.225-.02.668-.384 1.009"/></svg>
|
||||
|
After Width: | Height: | Size: 767 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-check-mark" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18.5 1.5h-17v17h17zm-17-1a1 1 0 0 0-1 1v17a1 1 0 0 0 1 1h17a1 1 0 0 0 1-1v-17a1 1 0 0 0-1-1z"/><path d="M14.998 6.09a.5.5 0 0 1 .03.707l-6.112 6.666a.5.5 0 0 1-.733.004l-3.188-3.394a.5.5 0 0 1 .729-.685l2.82 3.002 5.746-6.27a.5.5 0 0 1 .707-.03"/></svg>
|
||||
|
After Width: | Height: | Size: 388 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-checkmark" viewBox="0 0 12 9"><path fill="currentColor" fill-rule="evenodd" d="M11.35.643a.5.5 0 0 1 .006.707l-6.77 6.886a.5.5 0 0 1-.719-.006L.638 4.845a.5.5 0 1 1 .724-.69l2.872 3.011 6.41-6.517a.5.5 0 0 1 .707-.006z" clip-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 317 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="icon icon-accordion icon-clipboard" viewBox="0 0 20 20"><path d="M6.311 9.136a.25.25 0 0 1 .25-.25h7.185a.25.25 0 0 1 0 .5H6.561a.25.25 0 0 1-.25-.25M6.311 14.054a.25.25 0 0 1 .25-.25h6.878a.25.25 0 0 1 0 .5H6.561a.25.25 0 0 1-.25-.25M6.926 11.595a.25.25 0 0 1 .25-.25h5.648a.25.25 0 1 1 0 .5H7.176a.25.25 0 0 1-.25-.25M5.196 1.778a1.5 1.5 0 0 1 1.5-1.5h6.608a1.5 1.5 0 0 1 1.5 1.5v1.69a1.5 1.5 0 0 1-1.5 1.5H6.696a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1.69a.5.5 0 0 0 .5.5h6.608a.5.5 0 0 0 .5-.5v-1.69a.5.5 0 0 0-.5-.5z"/><path d="M3.737 2.508v16.215h12.526V2.508h-1.765v-1h1.765a1 1 0 0 1 1 1v16.215a1 1 0 0 1-1 1H3.737a1 1 0 0 1-1-1V2.508a1 1 0 0 1 1-1H5.76v1z"/></svg>
|
||||
|
After Width: | Height: | Size: 746 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-close-small" viewBox="0 0 12 13"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.486 9.33 2.828 3.67M2.885 9.385l5.544-5.77"/></svg>
|
||||
|
After Width: | Height: | Size: 235 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-close" viewBox="0 0 18 17"><path fill="currentColor" d="M.865 15.978a.5.5 0 0 0 .707.707l7.433-7.431 7.579 7.282a.501.501 0 0 0 .846-.37.5.5 0 0 0-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 1 0-.707-.708L8.991 7.853 1.413.573a.5.5 0 1 0-.693.72l7.563 7.268z"/></svg>
|
||||
|
After Width: | Height: | Size: 334 B |
@@ -0,0 +1,12 @@
|
||||
<svg
|
||||
class="icon icon-clipboard"
|
||||
width="11"
|
||||
height="13"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
viewBox="0 0 11 13"
|
||||
>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1a1 1 0 011-1h7a1 1 0 011 1v9a1 1 0 01-1 1V1H2zM1 2a1 1 0 00-1 1v9a1 1 0 001 1h7a1 1 0 001-1V3a1 1 0 00-1-1H1zm0 10V3h7v9H1z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 387 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-dairy-free" viewBox="0 0 20 20"><path d="m6.2 12.918-3.745 2.588-.569-.822 3.746-2.588zm11.198-7.654-3.1 2.055-.552-.833 3.1-2.055z"/><path d="m5.158 12.798-.168-.24.821-.572.168.241z"/><path fill-rule="evenodd" d="M9.94 18.5a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17m0 1a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19"/><path d="M7.72 4.91 6.224 7.186a.5.5 0 1 1-.836-.55l1.497-2.274zm5.986.266-1.165 2.178-.881-.472 1.165-2.177z"/><path d="m13.425 4.634 1.223 1.97a1 1 0 0 1 .15.527v6.9a1 1 0 0 1-.302.715l-1.65 1.609a1 1 0 0 1-.697.283h-1.427v-1h1.427l1.65-1.608V7.131l-1.224-1.97z"/><path d="M5.279 6.958a.5.5 0 0 1 .5-.5h6.856v9.18a1 1 0 0 1-1 1H6.279a1 1 0 0 1-1-1zm1 .5v8.18h5.356v-8.18zM6.5 3.5a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v1.35h-1V3.5h-5V5h-1z"/><path d="M13.408 5.022H6.956v-1h6.452z"/></svg>
|
||||
|
After Width: | Height: | Size: 863 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-dairy" viewBox="0 0 20 20"><path d="M6.468 3.065 4.297 6.088l-.812-.583 2.17-3.023zm8.662.087-1.65 3.084-.882-.472 1.65-3.083z"/><path d="M14.522 2.583h.58l1.379 3.165a1 1 0 0 1 .083.4v9.954a1 1 0 0 1-.302.716l-2.46 2.398a1 1 0 0 1-.698.284H11v-1h2.104l2.46-2.398V6.147l-1.249-2.864.207-.09z"/><path d="M3.5 5.5h10v13a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1zm1 1v12h8v-12zm1-5a1 1 0 0 1 1-1h7.602a1 1 0 0 1 1 1v1.123h-1V1.5H6.5V3h-1z"/><path d="M15.013 3.089H5.876v-.5h9.137z"/></svg>
|
||||
|
After Width: | Height: | Size: 548 B |
@@ -0,0 +1 @@
|
||||
<svg class="icon icon-discount" viewBox="0 0 12 12"><path fill="currentColor" fill-rule="evenodd" d="M7 0h3a2 2 0 0 1 2 2v3a1 1 0 0 1-.3.7l-6 6a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4l6-6A1 1 0 0 1 7 0m2 2a1 1 0 1 0 2 0 1 1 0 0 0-2 0" clip-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 260 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-dryer" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18.47 1.53H1.53v16.94h16.94zM1.53.5A1.03 1.03 0 0 0 .5 1.53v16.94c0 .569.461 1.03 1.03 1.03h16.94a1.03 1.03 0 0 0 1.03-1.03V1.53A1.03 1.03 0 0 0 18.47.5z"/><path fill-rule="evenodd" d="M10 15.224a5.224 5.224 0 1 0 0-10.448 5.224 5.224 0 0 0 0 10.448m0 1.03a6.254 6.254 0 1 0 0-12.508 6.254 6.254 0 0 0 0 12.508"/></svg>
|
||||
|
After Width: | Height: | Size: 449 B |
@@ -0,0 +1 @@
|
||||
<svg class="icon icon-error" viewBox="0 0 13 13"><circle cx="6.5" cy="6.5" r="5.5" stroke="#fff" stroke-width="2"/><circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width=".7"/><path fill="#fff" d="m5.874 3.528.1 4.044h1.053l.1-4.044zm.627 6.133c.38 0 .68-.288.68-.656s-.3-.656-.68-.656-.681.288-.681.656.3.656.68.656"/><path fill="#fff" stroke="#EB001B" stroke-width=".7" d="M5.874 3.178h-.359l.01.359.1 4.044.008.341h1.736l.008-.341.1-4.044.01-.359H5.873Zm.627 6.833c.56 0 1.03-.432 1.03-1.006s-.47-1.006-1.03-1.006-1.031.432-1.031 1.006.47 1.006 1.03 1.006Z"/></svg>
|
||||
|
After Width: | Height: | Size: 593 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-eye" viewBox="0 0 20 20"><path d="M9.524 4.8c-2.761.13-5.44 1.82-8.352 4.865a.484.484 0 0 0 0 .67c2.911 3.044 5.59 4.736 8.352 4.865 2.75.13 5.743-1.286 9.298-4.86a.48.48 0 0 0 0-.68c-3.555-3.574-6.549-4.99-9.298-4.86m-.049-1.04c3.177-.15 6.44 1.503 10.081 5.164a1.526 1.526 0 0 1 0 2.152c-3.641 3.66-6.904 5.314-10.08 5.165-3.167-.149-6.085-2.08-9.053-5.185a1.53 1.53 0 0 1 0-2.112C3.391 5.84 6.31 3.907 9.475 3.76"/><path d="M13.58 10a3.564 3.564 0 0 1-3.568 3.559A3.564 3.564 0 0 1 6.443 10a3.564 3.564 0 0 1 3.569-3.558A3.564 3.564 0 0 1 13.581 10m-3.568 2.517A2.524 2.524 0 0 0 12.542 10a2.524 2.524 0 0 0-2.53-2.517A2.524 2.524 0 0 0 7.482 10a2.524 2.524 0 0 0 2.53 2.517"/></svg>
|
||||
|
After Width: | Height: | Size: 759 B |
@@ -0,0 +1 @@
|
||||
<svg class="icon icon-facebook" viewBox="0 0 20 20"><path fill="currentColor" d="M18 10.049C18 5.603 14.419 2 10 2s-8 3.603-8 8.049C2 14.067 4.925 17.396 8.75 18v-5.624H6.719v-2.328h2.03V8.275c0-2.017 1.195-3.132 3.023-3.132.874 0 1.79.158 1.79.158v1.98h-1.009c-.994 0-1.303.621-1.303 1.258v1.51h2.219l-.355 2.326H11.25V18c3.825-.604 6.75-3.933 6.75-7.951"/></svg>
|
||||
|
After Width: | Height: | Size: 365 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-filter" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M4.833 6.5a1.667 1.667 0 1 1 3.334 0 1.667 1.667 0 0 1-3.334 0M4.05 7H2.5a.5.5 0 0 1 0-1h1.55a2.5 2.5 0 0 1 4.9 0h8.55a.5.5 0 0 1 0 1H8.95a2.5 2.5 0 0 1-4.9 0m11.117 6.5a1.667 1.667 0 1 0-3.334 0 1.667 1.667 0 0 0 3.334 0M13.5 11a2.5 2.5 0 0 1 2.45 2h1.55a.5.5 0 0 1 0 1h-1.55a2.5 2.5 0 0 1-4.9 0H2.5a.5.5 0 0 1 0-1h8.55a2.5 2.5 0 0 1 2.45-2"/></svg>
|
||||
|
After Width: | Height: | Size: 497 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-fire" viewBox="0 0 20 20"><path d="m10.289.196-.272.419-.284-.412a.5.5 0 0 1 .556-.007m-.265 1.028-.056.041A31.4 31.4 0 0 0 6.36 4.368c-.987.995-1.96 2.135-2.685 3.328-.727 1.198-1.181 2.413-1.181 3.569 0 4.807 3.892 7.524 7.376 7.618 3.464.093 7.636-2.675 7.636-7.711 0-1.218-.454-2.458-1.176-3.653-.72-1.194-1.688-2.313-2.67-3.28a28.6 28.6 0 0 0-3.586-2.98zm7.162 5.778c.777 1.286 1.32 2.706 1.32 4.17 0 5.686-4.729 8.816-8.663 8.71-3.915-.105-8.35-3.164-8.35-8.617 0-1.41.55-2.807 1.327-4.088.78-1.284 1.811-2.486 2.83-3.513A32.4 32.4 0 0 1 9.707.22l.019-.013.005-.004.002-.001.284.412.272-.42.002.002.005.003.02.013a10 10 0 0 1 .33.226 29.6 29.6 0 0 1 3.717 3.088c1.016 1.001 2.045 2.186 2.823 3.475"/><path d="m10.298 6.54-.288.408-.3-.401a.5.5 0 0 1 .588-.008m-.28 1.038A19.6 19.6 0 0 0 7.93 9.54c-.597.652-1.183 1.396-1.617 2.173-.436.779-.702 1.56-.702 2.293 0 3.136 2.146 4.88 4.301 4.88 2.18 0 4.477-1.677 4.477-4.942 0-1.572-1.097-3.197-2.305-4.49a18 18 0 0 0-2.066-1.876m2.797 1.194c1.23 1.317 2.574 3.19 2.574 5.172 0 3.84-2.767 5.941-5.477 5.941-2.734 0-5.3-2.217-5.3-5.88 0-.966.346-1.918.828-2.78.485-.867 1.124-1.674 1.752-2.36A20.6 20.6 0 0 1 9.65 6.592l.044-.033.012-.01.003-.002.002-.001.3.4.287-.408.002.001.003.003.012.008.045.032.162.121a19 19 0 0 1 2.293 2.068"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-gluten_free" viewBox="0 0 20 20"><path d="m7.068 12.352-4.552 3.154-.57-.822 4.553-3.154zm10.455-7.03L12.97 8.477l-.57-.822L16.953 4.5zM9.5 16.51V7.488a.5.5 0 0 1 1 0v9.022a.5.5 0 0 1-1 0m2.15-10.34c.415-1.78-.516-3.193-1.233-3.81a.5.5 0 0 0-.697.043C8.505 3.747 8.24 5.056 8.467 6.157l.98-.203c-.136-.658-.043-1.5.67-2.462.428.55.799 1.423.56 2.45z"/><path d="M9.24 5.58a4.1 4.1 0 0 0-2.14-.93.5.5 0 0 0-.552.428c-.183 1.3-.01 2.398.47 3.183l.853-.522c-.27-.44-.436-1.105-.386-1.99.358.107.757.294 1.104.59.505.433.926 1.119.926 2.225h1c0-1.401-.551-2.364-1.276-2.984"/><path d="M10.777 5.77a4.1 4.1 0 0 1 2.139-.93.5.5 0 0 1 .552.428c.183 1.3.01 2.399-.47 3.183l-.853-.522c.27-.44.436-1.105.386-1.99a3.1 3.1 0 0 0-1.104.591c-.505.432-.926 1.118-.926 2.224h-1c0-1.401.551-2.364 1.276-2.983"/><path d="M11.131 8.036a4.1 4.1 0 0 1 2.235-.669.5.5 0 0 1 .498.49c.026 1.314-.276 2.383-.846 3.105l-.785-.62c.32-.405.564-1.045.62-1.93a3.1 3.1 0 0 0-1.167.456c-.552.369-1.052 1-1.183 2.098l-.993-.119c.167-1.391.828-2.281 1.621-2.81"/><path d="M8.784 8.016a4.1 4.1 0 0 0-2.258-.584.5.5 0 0 0-.479.509c.023 1.313.366 2.37.962 3.07l.761-.649c-.335-.393-.603-1.023-.692-1.905.37.05.794.173 1.183.411.566.348 1.089.96 1.262 2.052l.988-.156c-.22-1.384-.914-2.249-1.727-2.748"/><path d="M10.449 12.182c-1.156-1.952-3.177-2.102-4.216-1.867a.5.5 0 0 0-.38.587c.261 1.296.822 2.177 1.523 2.742.695.56 1.488.776 2.167.818l.062-.998a2.8 2.8 0 0 1-1.602-.6c-.41-.33-.792-.84-1.037-1.634.81-.02 1.925.283 2.622 1.461z"/><path d="M9.505 12.182c1.155-1.952 3.176-2.102 4.216-1.867a.5.5 0 0 1 .38.587c-.26 1.291-.806 2.176-1.492 2.747a3.7 3.7 0 0 1-2.148.833l-.062-.998a2.7 2.7 0 0 0 1.57-.604c.401-.334.776-.85 1.02-1.65-.81-.02-1.926.282-2.623 1.461z"/><path fill-rule="evenodd" d="M10 18.5a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17m0 1a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19"/></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-hamburger" viewBox="0 0 18 16"><path fill="currentColor" d="M1 .5a.5.5 0 1 0 0 1h15.71a.5.5 0 0 0 0-1zM.5 8a.5.5 0 0 1 .5-.5h15.71a.5.5 0 0 1 0 1H1A.5.5 0 0 1 .5 8m0 7a.5.5 0 0 1 .5-.5h15.71a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5"/></svg>
|
||||
|
After Width: | Height: | Size: 303 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-heart" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 5.24 8.515 3.773a4.433 4.433 0 0 0-6.21 0 4.293 4.293 0 0 0 0 6.128L10 17.495l7.695-7.593a4.293 4.293 0 0 0 0-6.128 4.433 4.433 0 0 0-6.21 0zm.765-2.177c2.113-2.084 5.538-2.084 7.65 0a5.29 5.29 0 0 1 0 7.55l-7.695 7.593a1.03 1.03 0 0 1-1.44 0l-7.696-7.594a5.29 5.29 0 0 1 0-7.549C3.697.98 7.122.98 9.234 3.063l.766.755z"/></svg>
|
||||
|
After Width: | Height: | Size: 461 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 15 14"><path fill="currentColor" fill-opacity=".75" fill-rule="evenodd" d="M14.5 7a7 7 0 1 1-14 0 7 7 0 0 1 14 0m-7 6.174A6.174 6.174 0 1 0 7.5.826a6.174 6.174 0 0 0 0 12.348" clip-rule="evenodd"/><path fill="currentColor" fill-opacity=".75" fill-rule="evenodd" d="M8.192 3.554c0-.39-.276-.725-.69-.725-.41 0-.696.329-.696.725 0 .392.29.719.696.719.411 0 .69-.332.69-.72" clip-rule="evenodd"/><path fill="currentColor" fill-opacity=".75" d="M6.971 5.724a.33.33 0 0 1 .33-.33H7.7a.33.33 0 0 1 .33.33v5.123a.33.33 0 0 1-.33.33h-.397a.33.33 0 0 1-.33-.33z"/></svg>
|
||||
|
After Width: | Height: | Size: 627 B |
@@ -0,0 +1 @@
|
||||
<svg class="icon icon-instagram" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M13.23 3.492c-.84-.037-1.096-.046-3.23-.046-2.144 0-2.39.01-3.238.055-.776.027-1.195.164-1.487.273a2.4 2.4 0 0 0-.912.593 2.5 2.5 0 0 0-.602.922c-.11.282-.238.702-.274 1.486-.046.84-.046 1.095-.046 3.23s.01 2.39.046 3.229c.004.51.097 1.016.274 1.495.145.365.319.639.602.913.282.282.538.456.92.602.474.176.974.268 1.479.273.848.046 1.103.046 3.238.046s2.39-.01 3.23-.046c.784-.036 1.203-.164 1.486-.273.374-.146.648-.329.921-.602.283-.283.447-.548.602-.922.177-.476.27-.979.274-1.486.037-.84.046-1.095.046-3.23s-.01-2.39-.055-3.229c-.027-.784-.164-1.204-.274-1.495a2.4 2.4 0 0 0-.593-.913 2.6 2.6 0 0 0-.92-.602c-.284-.11-.703-.237-1.488-.273ZM6.697 2.05c.857-.036 1.131-.045 3.302-.045a63 63 0 0 1 3.302.045c.664.014 1.321.14 1.943.374a4 4 0 0 1 1.414.922c.41.397.728.88.93 1.414.23.622.354 1.279.365 1.942C18 7.56 18 7.824 18 10.005c0 2.17-.01 2.444-.046 3.292-.036.858-.173 1.442-.374 1.943-.2.53-.474.976-.92 1.423a3.9 3.9 0 0 1-1.415.922c-.51.191-1.095.337-1.943.374-.857.036-1.122.045-3.302.045-2.171 0-2.445-.009-3.302-.055-.849-.027-1.432-.164-1.943-.364a4.15 4.15 0 0 1-1.414-.922 4.1 4.1 0 0 1-.93-1.423c-.183-.51-.329-1.085-.365-1.943C2.009 12.45 2 12.167 2 10.004c0-2.161 0-2.435.055-3.302.027-.848.164-1.432.365-1.942a4.4 4.4 0 0 1 .92-1.414 4.2 4.2 0 0 1 1.415-.93c.51-.183 1.094-.33 1.943-.366Zm.427 4.806a4.105 4.105 0 1 1 5.805 5.805 4.105 4.105 0 0 1-5.805-5.805m1.882 5.371a2.668 2.668 0 1 0 2.042-4.93 2.668 2.668 0 0 0-2.042 4.93m5.922-5.942a.958.958 0 1 1-1.355-1.355.958.958 0 0 1 1.355 1.355" clip-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1 @@
|
||||
<svg class="icon icon-inventory-status"><circle cx="7.5" cy="7.5" r="7.5" fill="currentColor"/><circle cx="7.5" cy="7.5" r="5" fill="currentColor" stroke="#FFF"/></svg>
|
||||
|
After Width: | Height: | Size: 169 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-iron" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.068 2a.5.5 0 0 1 .5-.5h11.304A1.13 1.13 0 0 1 20 2.64h-1c0-.09-.064-.14-.128-.14H7.568a.5.5 0 0 1-.5-.5M.05 16.29l-.004.013-.003.015a1.83 1.83 0 0 0 .33 1.506c.332.425.838.676 1.384.676h16.486c.976 0 1.757-.81 1.757-1.782V2.641h-1v5.141h-6.65c-4.952 0-8.107 1.653-9.972 3.968a12.4 12.4 0 0 0-1.825 3.077 11.5 11.5 0 0 0-.49 1.413l-.01.036zM19 8.781h-6.65c-4.714 0-7.555 1.562-9.194 3.596a11.5 11.5 0 0 0-1.678 2.827v.002a11 11 0 0 0-.344.94l-.004.012a9 9 0 0 0-.104.354l-.01.03a.84.84 0 0 0 .147.667c.143.183.358.29.594.29h16.486a.775.775 0 0 0 .757-.782z"/><path d="M8.789 14.359c-.4 0-.7.3-.7.7 0 .39.3.69.7.69s.7-.3.7-.69a.7.7 0 0 0-.7-.7m2.83 0c-.4 0-.7.3-.7.7 0 .39.3.69.7.69s.7-.3.7-.69a.7.7 0 0 0-.7-.7m2.83 0c-.4 0-.7.3-.7.7 0 .39.3.69.7.69s.7-.3.7-.69-.3-.7-.7-.7"/></svg>
|
||||
|
After Width: | Height: | Size: 912 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-leaf" viewBox="0 0 20 20"><path d="M18.63.085c.291.058.627.167.869.398.25.24.363.581.421.873.062.307.08.648.08.97a14 14 0 0 1-.099 1.443l-.012.11v.006a67 67 0 0 1-.633 4.278c-.298 1.612-.694 3.382-1.214 4.954v.003c-.502 1.494-1.207 3.11-2.254 4.158-3.607 3.612-9.47 3.639-13.081.024-3.61-3.616-3.584-9.487.023-13.099C3.777 3.155 5.378 2.45 6.884 1.946h.001c1.57-.52 3.325-.917 4.948-1.215a66 66 0 0 1 4.273-.634h.005l.038-.005A14 14 0 0 1 17.665 0c.32.003.66.024.966.085m-2.41 1.018c-1.106.13-2.61.33-4.204.623-1.6.294-3.304.68-4.813 1.18-1.478.494-2.886 1.14-3.758 2.013C.229 8.14.209 13.37 3.421 16.586s8.436 3.196 11.652-.024c.871-.872 1.517-2.293 2.01-3.764.499-1.51.885-3.228 1.179-4.818a66 66 0 0 0 .635-4.327c.035-.314.09-.824.092-1.33 0-.289-.017-.554-.06-.767-.046-.229-.106-.32-.129-.341-.03-.03-.134-.09-.367-.137a4.3 4.3 0 0 0-.775-.066 13 13 0 0 0-1.408.088z"/><path d="M19.43.502a.507.507 0 0 1-.004.715L.861 19.617a.505.505 0 1 1-.711-.72L18.715.498a.505.505 0 0 1 .715.004"/><path d="M5.623 2.477h.505v11.19h11.268v.505H5.623z"/><path d="M10.188 1.188h.505v7.96h8.091v.505h-8.596z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-leather" viewBox="0 0 20 20"><path d="M7.979 1.556a.506.506 0 0 0-.486.392l-.002.007a8 8 0 0 1-.273.897c-.12.31-.293.653-.558.92-.711.723-1.725.809-2.507.809q-.432 0-.858-.106a1.4 1.4 0 0 1-.208-.056.5.5 0 0 0-.15-.024.54.54 0 0 0-.238.057.48.48 0 0 0-.247.292l-.37 1.216a.51.51 0 0 0 .327.637 4.28 4.28 0 0 1 1.717 7.1l-.005.005a4.3 4.3 0 0 1-1.458.951.51.51 0 0 0-.293.625v-.003.005-.002l.554 1.787-.001-.004.003.01-.002-.006a.54.54 0 0 0 .313.329l-.017-.005.029.009-.012-.004c.082.022.13.028.173.028.09 0 .2-.033.292-.099.287-.203.602-.366.91-.491l.008-.003q.73-.285 1.523-.284c.97 0 1.912.342 2.655.944l.01.008.012.01c.088.08.188.168.29.27l-.008-.008.015.015-.007-.007c.16.148.292.306.409.468l-.004-.004.01.012q-.005-.003-.006-.008c.098.126.25.2.399.2V19.5c-.489 0-.953-.235-1.247-.622l-.005-.007-.005-.006a2 2 0 0 0-.279-.321l-.008-.008-.007-.007a6 6 0 0 0-.246-.228l.009.007-.019-.016.01.009a3.17 3.17 0 0 0-1.978-.7q-.596 0-1.133.21l.003-.002-.007.003.004-.002a3.5 3.5 0 0 0-.694.374 1.6 1.6 0 0 1-.906.294c-.18 0-.335-.034-.47-.07l-.014-.004-.014-.005a1.6 1.6 0 0 1-.994-1.006l-.003-.01-.559-1.801c-.23-.768.15-1.613.924-1.913h.002a3.2 3.2 0 0 0 1.096-.72l-.002.003.005-.005-.003.003A3.228 3.228 0 0 0 2.083 7.6H2.08a1.565 1.565 0 0 1-1.012-1.945v-.001l.372-1.219c.125-.408.408-.739.784-.927a1.6 1.6 0 0 1 .712-.17c.18 0 .337.034.473.074l.022.007.021.009.01.002.053.012.012.002.012.003q.31.077.614.077c.765 0 1.37-.104 1.752-.493l.003-.004q.175-.175.322-.556c.096-.249.168-.518.235-.778v.004l.001-.007v.003A1.56 1.56 0 0 1 7.978.5h3.63c.726 0 1.345.504 1.515 1.198V1.7c.06.247.135.517.235.764.103.252.217.444.337.564.425.426 1.082.652 1.75.652q.176 0 .353-.025a2.6 2.6 0 0 0 .616-.177 1.54 1.54 0 0 1 1.285.003c.394.182.71.521.84.961l.39 1.155.003.01c.122.41.08.86-.142 1.24s-.596.643-1.013.736l-.007.001a4 4 0 0 0-.626.198c-.381.17-.735.41-1.036.711a3.36 3.36 0 0 0-.99 2.384c0 .905.348 1.75.988 2.382l.002.003c.375.375.82.652 1.32.822.754.248 1.355 1.104 1.09 1.966l-.443 1.445v.003a1.55 1.55 0 0 1-1.028 1.028l-.006.002c-.132.04-.29.074-.462.074a1.57 1.57 0 0 1-.966-.329l-.003-.003a3 3 0 0 0-.668-.405h.002-.004.002a3.15 3.15 0 0 0-1.271-.265c-.721 0-1.413.245-1.966.699l.008-.007-.015.013.008-.006-.26.23.011-.01-.022.02.012-.01a3 3 0 0 0-.277.326l-.007.01.003-.004c-.281.41-.756.636-1.242.639v-1.056h-.007c.17 0 .308-.08.376-.18l.007-.01c.12-.17.253-.326.407-.48l.01-.011.298-.265.008-.006a4.15 4.15 0 0 1 2.648-.947c.588 0 1.156.118 1.696.353l.004.002c.318.142.614.319.896.542h-.002l.004.002-.002-.002a.5.5 0 0 0 .312.104.6.6 0 0 0 .153-.028h-.003l.006-.001h-.003a.5.5 0 0 0 .33-.332l.444-1.444c.065-.21-.095-.552-.412-.655l-.005-.002a4.46 4.46 0 0 1-1.73-1.076l.002.001-.003-.002.001.001a4.37 4.37 0 0 1-1.3-3.13c0-1.184.469-2.299 1.299-3.13a4.5 4.5 0 0 1 1.367-.936l.01-.004.011-.004a5 5 0 0 1 .803-.252h-.003.007-.004a.5.5 0 0 0 .325-.235.52.52 0 0 0 .045-.403l.004.011-.006-.02.002.01-.392-1.158-.003-.012a.48.48 0 0 0-.27-.306.48.48 0 0 0-.4 0l-.012.005a3.7 3.7 0 0 1-.88.254l-.01.001q-.252.037-.508.037c-.879 0-1.831-.294-2.5-.963-.261-.262-.44-.6-.567-.913a6.4 6.4 0 0 1-.283-.913.506.506 0 0 0-.486-.391z"/></svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-lightning-bolt" viewBox="0 0 20 20"><path d="M14.68.162a.5.5 0 0 1 .22.582l-2.384 7.468 4.178 1a.5.5 0 0 1 .242.834l-9.373 9.649a.5.5 0 0 1-.824-.533l2.965-7.481-4.47-1.07a.5.5 0 0 1-.245-.831L14.062.247a.5.5 0 0 1 .617-.085M6.311 9.84l4.186 1.002a.5.5 0 0 1 .348.67L8.593 17.2l7.014-7.22-3.847-.921a.5.5 0 0 1-.36-.639l1.886-5.907z"/></svg>
|
||||
|
After Width: | Height: | Size: 414 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-lipstick" viewBox="0 0 20 20"><path d="M5.757 9.016a1.03 1.03 0 0 1 1.431 0l4.17 4.071a.97.97 0 0 1 0 1.397L7.1 18.634a2.06 2.06 0 0 1-2.864 0l-2.739-2.675a1.94 1.94 0 0 1 .002-2.793zm4.885 4.77-4.17-4.072-4.258 4.15a.97.97 0 0 0 0 1.397l2.738 2.674a1.03 1.03 0 0 0 1.432 0z"/><path d="m9.726 6.736 3.972 3.878-3.155 3.075L6.572 9.81zm0 1.396-1.723 1.68 2.541 2.48 1.723-1.679z"/><path d="M15.513 1.095a1.03 1.03 0 0 1 1.432 0l.752.735a3.397 3.397 0 0 1-.002 4.888l-4.713 4.594L9.01 7.433zm1.468 1.433-.753-.735-5.787 5.641 2.542 2.481L16.98 6.02a2.426 2.426 0 0 0 .001-3.491"/></svg>
|
||||
|
After Width: | Height: | Size: 657 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-lock" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.5 7.118h-13V19h13zm-13-1a1 1 0 0 0-1 1V19a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V7.118a1 1 0 0 0-1-1z"/><path d="M11.443 11.92c0 .82-.646 1.486-1.443 1.486s-1.443-.665-1.443-1.486c0-.82.646-1.486 1.443-1.486s1.443.665 1.443 1.486"/><path d="M10.019 11.92c.345 0 .625.28.625.625v3.152a.625.625 0 1 1-1.25 0v-3.152c0-.345.28-.625.625-.625M6.242 3.76a3.759 3.759 0 1 1 7.516 0v2.36h-1V3.76a2.759 2.759 0 1 0-5.516 0v2.36h-1z"/></svg>
|
||||
|
After Width: | Height: | Size: 554 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-map-pin" viewBox="0 0 20 20"><path fill-rule="evenodd" d="m9.91 18.59 5.036-8.78c2.228-3.886-.525-8.777-4.942-8.777-4.385 0-7.147 4.822-4.992 8.713zM10.004 0C4.845 0 1.593 5.673 4.13 10.255l5.212 9.41a.64.64 0 0 0 1.12.009l5.358-9.342C18.445 5.755 15.202 0 10.004 0"/><path d="M13 6.796c0 1.76-1.399 3.187-3.124 3.187S6.752 8.556 6.752 6.796s1.399-3.187 3.124-3.187S13 5.036 13 6.796M9.876 8.949c1.166 0 2.11-.964 2.11-2.153s-.944-2.153-2.11-2.153-2.11.964-2.11 2.153.944 2.153 2.11 2.153"/></svg>
|
||||
|
After Width: | Height: | Size: 570 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-minus" viewBox="0 0 10 2"><path fill="currentColor" fill-rule="evenodd" d="M.5 1C.5.7.7.5 1 .5h8a.5.5 0 1 1 0 1H1A.5.5 0 0 1 .5 1" clip-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 228 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-accordion icon-nut-free" viewBox="0 0 20 20"><path d="m8.38 11.586-5.865 3.92-.555-.831 5.865-3.92zm9.318-6.5-5.865 3.921-.556-.831 5.865-3.92z"/><path d="M6.134 9.341c.672.693 1.528 1.115 2.152 1.25a.5.5 0 0 1 .297.194c.12.163.222.3.313.42.153.203.271.36.38.527.185.28.357.6.675 1.243.529 1.067 1.519 1.364 1.902 1.461.623.133 1.131.2 1.543.199.415-.002.697-.073.894-.188.353-.207.628-.687.628-1.9a3.65 3.65 0 0 0-.824-2.287c-.49-.608-1.09-.974-1.56-1.065-1.137-.221-1.753-.919-1.937-1.346-.138-.31-.41-.778-.718-1.228-.311-.455-.618-.832-.818-1.002-.605-.468-1.034-.61-1.637-.713-1.127-.192-1.626-.023-1.873.201-.265.24-.405.684-.46 1.461-.083 1.165.381 2.09 1.043 2.773m-.718.696c-.82-.846-1.43-2.038-1.323-3.54.056-.787.204-1.602.785-2.13.599-.544 1.501-.653 2.714-.447.738.126 1.329.325 2.09.915l.014.012c.313.262.688.742 1.008 1.21.326.476.637 1.002.808 1.39l.003.006c.05.117.39.6 1.21.76.758.147 1.55.678 2.148 1.42a4.65 4.65 0 0 1 1.045 2.914c0 1.287-.28 2.27-1.123 2.763-.402.235-.879.323-1.395.325s-1.107-.082-1.765-.223l-.018-.004c-.438-.11-1.824-.5-2.562-1.99-.318-.64-.466-.912-.614-1.136a8 8 0 0 0-.317-.44l-.24-.32c-.782-.211-1.72-.713-2.468-1.485"/><path fill-rule="evenodd" d="M10 18.5a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17m0 1a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user