/* Theme Name: iKLEEK™ Theme URI: https://iKLEEK.com Author: ErfanMHDi Author URI: https://ErfanMHDi.com Description: iKLEEK™ Shopify Template, Developed by ErfanMHDi. Version: 1.0.0 */ /*---------------------------------------------------------------------------------*/ /* Vatiable Objects ---------------------------------------------------------------*/ /*---------------------------------------------------------------------------------*/ :root { color-scheme: light dark; supported-color-schemes: light dark; --System-ColorBrand: rgba( 0, 110, 249, 1); --System-ColorRed: rgba(255, 56, 60, 1); --System-ColorOrange: rgba(255, 141, 40, 1); --System-ColorYellow: rgba(255, 204, 0, 1); --System-ColorGreen: rgba( 52, 199, 89, 1); --System-ColorMint: rgba( 0, 200, 179, 1); --System-ColorTeal: rgba( 0, 195, 208, 1); --System-ColorCyan: rgba( 0, 192, 232, 1); --System-ColorBlue: rgba( 0, 136, 255, 1); --System-ColorIndigo: rgba( 97, 85, 245, 1); --System-ColorPurple: rgba(203, 48, 224, 1); --System-ColorPink: rgba(255, 45, 85, 1); --System-ColorBrown: rgba(172, 127, 94, 1); --System-ColorText: rgba( 0, 0, 0, 1); --System-ColorText2: rgba( 0, 0, 0, 0.64); --System-ColorText3: rgba( 0, 0, 0, 0.32); --System-ColorText4: rgba( 0, 0, 0, 0.16); --System-ColorGray: rgba(142, 142, 147, 1); --System-ColorGray2: rgba(174, 174, 178, 1); --System-ColorGray3: rgba(199, 199, 204, 1); --System-ColorGray4: rgba(209, 209, 214, 1); --System-ColorGray5: rgba(229, 229, 234, 1); --System-ColorGray6: rgba(242, 242, 247, 1); --System-ColorBG: rgba(255, 255, 255, 1); --System-ColorBG2: rgba(242, 242, 247, 1); --System-ColorLight: rgba(255, 255, 255, 1); --System-ColorDark: rgba( 0, 0, 0, 1); --System-ColorSep: rgba(229, 229, 234, 1); @media (prefers-color-scheme: dark) { color-scheme: light dark; supported-color-schemes: light dark; --System-ColorBrand: rgba( 0, 110, 249, 1); --System-ColorRed: rgba(255, 66, 69, 1); --System-ColorOrange: rgba(255, 146, 48, 1); --System-ColorYellow: rgba(255, 214, 0, 1); --System-ColorGreen: rgba( 48, 209, 88, 1); --System-ColorMint: rgba( 0, 218, 195, 1); --System-ColorTeal: rgba( 0, 210, 224, 1); --System-ColorCyan: rgba( 60, 211, 254, 1); --System-ColorBlue: rgba( 0, 145, 255, 1); --System-ColorIndigo: rgba(109, 124, 255, 1); --System-ColorPurple: rgba(219, 52, 242, 1); --System-ColorPink: rgba(255, 55, 95, 1); --System-ColorBrown: rgba(183, 138, 102, 1); --System-ColorText: rgba(255, 255, 255, 1); --System-ColorText2: rgba(255, 255, 255, 0.64); --System-ColorText3: rgba(255, 255, 255, 0.32); --System-ColorText4: rgba(255, 255, 255, 0.16); --System-ColorGray: rgba(142, 142, 147, 1); --System-ColorGray2: rgba( 99, 99, 102, 1); --System-ColorGray3: rgba( 72, 72, 74, 1); --System-ColorGray4: rgba( 58, 58, 60, 1); --System-ColorGray5: rgba( 44, 44, 46, 1); --System-ColorGray6: rgba( 28, 28, 30, 1); --System-ColorBG: rgba( 0, 0, 0, 1); --System-ColorBG2: rgba( 28, 28, 30, 1); --System-ColorLight: rgba(255, 255, 255, 1); --System-ColorDark: rgba( 0, 0, 0, 1); --System-ColorSep: rgba( 44, 44, 46, 1); } } /*---------------------------------------------------------------------------------*/ /* Font Structure -----------------------------------------------------------------*/ /*---------------------------------------------------------------------------------*/ @font-face { font-display: swap; font-family: 'PoetsenOne'; font-style: normal; font-weight: 400; src: url('/cdn/shop/files/PoetsenOne-Regular.eot'); /* IE9 Compat Modes */ src: url('/cdn/shop/files/PoetsenOne-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/cdn/shop/files/PoetsenOne-Regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('/cdn/shop/files/PoetsenOne-Regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */ url('/cdn/shop/files/PoetsenOne-Regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } @font-face { font-display: swap; font-family: 'TitilliumWeb'; font-style: normal; font-weight: 400; src: url('/cdn/shop/files/TitilliumWeb-Regular.eot'); /* IE9 Compat Modes */ src: url('/cdn/shop/files/TitilliumWeb-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/cdn/shop/files/TitilliumWeb-Regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('/cdn/shop/files/TitilliumWeb-Regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */ url('/cdn/shop/files/TitilliumWeb-Regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ url('/cdn/shop/files/TitilliumWeb-Regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */ } @font-face { font-display: swap; font-family: 'TitilliumWeb'; font-style: normal; font-weight: 600; src: url('/cdn/shop/files/TitilliumWeb-SemiBold.eot'); /* IE9 Compat Modes */ src: url('/cdn/shop/files/TitilliumWeb-SemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/cdn/shop/files/TitilliumWeb-SemiBold.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('/cdn/shop/files/TitilliumWeb-SemiBold.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */ url('/cdn/shop/files/TitilliumWeb-SemiBold.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ url('/cdn/shop/files/TitilliumWeb-SemiBold.svg#TitilliumWeb') format('svg'); /* Legacy iOS */ } @font-face { font-display: swap; font-family: 'TitilliumWeb'; font-style: normal; font-weight: 700; src: url('/cdn/shop/files/TitilliumWeb-Bold.eot'); /* IE9 Compat Modes */ src: url('/cdn/shop/files/TitilliumWeb-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/cdn/shop/files/TitilliumWeb-Bold.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('/cdn/shop/files/TitilliumWeb-Bold.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */ url('/cdn/shop/files/TitilliumWeb-Bold.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ url('/cdn/shop/files/TitilliumWeb-Bold.svg#TitilliumWeb') format('svg'); /* Legacy iOS */ } :root { --font-heading-family: "PoetsenOne", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font-body-family: "TitilliumWeb", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --System-PageWidth: 980px; --color-background: transparent; --color-border: var(--System-ColorSep); --color-highlight: var(--System-ColorBrand); --page-padding: var(--System-Padding); --System-Gap: 1rem; --System-Padding: 2rem; --System-Font5XL: 4rem; /* max: 64px */ --System-Font4XL: 2.5rem; /* max: 48px */ --System-Font3XL: 2rem; /* max: 36px */ --System-Font2XL: 1.5rem; /* max: 28px */ --System-FontXL: 1.25rem; /* max: 24px */ --System-FontL: 1.125rem; /* max: 20px */ --System-FontM: 1rem; /* max: 16px */ --System-FontS: 0.875rem; /* max: 14px */ --System-FontXS: 0.75rem; /* max: 12px */ --System-Font2XS: 0.625rem; /* max: 10px */ @media screen and (max-width: 768px) { --System-Gap: 1rem; --System-Padding: 1rem; --System-Font5XL: 2.5rem; /* max: 48px */ --System-Font4XL: 1.75rem; /* max: 28px */ --System-Font3XL: 1.5rem; /* max: 24px */ --System-Font2XL: 1.25rem; /* max: 20px */ --System-FontXL: 1.125rem; /* max: 18px */ --System-FontL: 1rem; /* max: 16px */ --System-FontM: 0.875rem; /* max: 14px */ --System-FontS: 0.75rem; /* max: 12px */ --System-FontXS: 0.625rem; /* max: 10px */ --System-Font2XS: 0.5rem; /* max: 8px */ } } /*---------------------------------------------------------------------------------*/ /* Fonts & Typography Injection ---------------------------------------------------*/ /*---------------------------------------------------------------------------------*/ body { font-family: var(--font-body-family); font-size: var(--System-FontM); line-height: normal; font-weight: normal; } blockquote,h1, h2, h3, h4, h5, h6, strong, .heading, .h0, .h1, .h2, .h3, .h4, .h5, .h6, .price, cart-count, button, .modal__header, .mobile-dock .dock__item, .variant-picker .swatches .label-swatch, .product__accordion .details__summary, .product__info .variant-picker .form__label .flex span, .subcollections .wrapper li, .facet-drawer .facet-form .details .details__summary, .facet-drawer .facet-form .select-sort-by label, .drawer__footer-bottom .totals .totals__subtotal-value, .drawer__content .free-shipping-bar .font-bold, .drawer__content .search__form .search__box .grid .search__heading, .product-sticky-form .leading-tight.font-medium, .newsletter-bar__button, .shopify-policy__body a, countdown-timer { font-family: var(--font-heading-family); color: var(--System-ColorText); font-weight: normal !important; } .mega-menu__panel .grid > .flex .text-base , .variant-input-wrapper[data-option-slug="badge"] .LabelWrp span, .subcollections .wrapper li .count, .subcollections .wrapper li .btn-text p span, .media-card__contentwrp .media-card__text .count, .drawer__content .drawer__menu-group .text-2xl p span, .price .unit-price, .product-card__media .quick-add .button { font-family: var(--font-body-family); } blockquote, h1, .heading, .h0, .h1 { font-size: var(--System-Font3XL); } h2, .h2 { font-size: var(--System-Font2XL); } h3, h4, h5, h6, .h3, .h4, .h5, .h6 { font-size: var(--System-FontXL); } strong { font-weight: normal; } b { font-weight: bold } .title-xl { font-size: var(--System-Font4XL) !important; } .title-lg { font-size: var(--System-Font3XL) !important; } .title-md { font-size: var(--System-Font2XL) !important; } .title-sm { font-size: var(--System-FontXL) !important; } /* Dark Shadow Texts --------------------------------------------------------------*/ @media (prefers-color-scheme: dark) { .banner__box { text-shadow: 0 0 16px rgb(0 0 0 / 64%); } } /*---------------------------------------------------------------------------------*/ /* Global Structure ---------------------------------------------------------------*/ /*---------------------------------------------------------------------------------*/ *, *::before, *::after { box-sizing: inherit; -ms-overflow-style: none; scrollbar-width: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } ::-webkit-scrollbar { display: none; } *:focus-visible { outline: 2px solid rgb(var(--System-ColorBlue)); outline-offset: 2px; } body { background: var(--System-ColorBG2); color: var(--System-ColorText); } .page-container { background-color: transparent; overflow: hidden; /* fixes overlap and horizontal scroll on pages witth product slider */ } .section { background: transparent; color: var(--System-ColorText); &:before { background-color: transparent; } } .section--padding { padding-block-start: var(--section-padding-top); padding-block-end: var(--section-padding-bottom); } .page-width { width: 100%; max-width: var(--System-PageWidth); margin: 0 auto; padding-top: var(--System-Padding); padding-right: var(--System-Padding); padding-right: max(var(--System-Padding), env(safe-area-inset-right)); padding-left: var(--System-Padding); padding-left: max(var(--System-Padding), env(safe-area-inset-left)); @media screen and (max-width: 768px) { overflow: hidden; /* for horizontal scrolles like product slider and home page banner slider */ /* First Section of each page has not top padding if below active */ /* padding-bottom: var(--System-Padding); */ /* margin-bottom: calc(var(--System-Padding) * -1); */ } } .page-width--full { width: 100%; max-width: 100%; } .main-content { z-index: 1; } .LightOnDark { @media (prefers-color-scheme: dark) { filter: brightness(0) invert(1); -webkit-filter: brightness(1) invert(1); } } .mouse-cursor { color: var(--System-ColorText); background-color: var(--System-ColorBG); z-index: 110; &.active { border: 2px solid var(--System-ColorSep); box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } } } .badge { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; gap: 4px; background-color: var(--System-ColorOrange); color: var(--System-ColorLight); font-size: var(--System-Font2XS); font-weight: bold; text-transform: uppercase; padding: 4px 8px; text-shadow: 0 0 8px rgb(0 0 0 / 32%); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.64); text-shadow: 0 0 8px rgb(255 255 255 / 32%); } span { } img { width: 12px; height: 12px; object-fit: contain; margin: 0; } &.basics { background-color: var(--System-ColorDark); } &.premium { background-color: var(--System-ColorDark); } &.supreme { background-color: var(--System-ColorDark); img { margin: -2px 0 0; } } } div[data-class-name="product-rating__widget"] iframe { width: calc(100% + (var(--System-Padding) * 2)) !important; margin: 0 calc((var(--System-Padding) / 2) * -1) calc((var(--System-Padding) / 2) * -1); } div[data-dr="showcase-page"] iframe, #doran-product-question-widget iframe, #doran-product-widget iframe { /* width: calc(100% + (var(--System-Padding) * 2)) !important; margin: calc(var(--System-Padding) * -1) calc(var(--System-Padding) * -1) 0 calc(var(--System-Padding) * -1); */ } #pr-toast { &>div { &>div { bottom: calc(var(--mobile-dock-height) + var(--System-Padding)) !important; } } } .highlighted-text { &:is([data-style=full_text], &[data-style=half_text], &[data-style=underline]) { background-image: linear-gradient( to var(--transform-origin-end), var(--color-highlight) 0, var(--color-background) 100% ), linear-gradient( to var(--transform-origin-end), var(--color-highlight) 0, var(--color-background) 100% ); } .icon { stroke: var(--System-ColorBrand); } } .split-words .word { overflow: visible; white-space: normal; } .shopify-section:last-child { border-radius: 0 !important; } .price { display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: 0; .unit-price { color: var(--System-ColorText2); } .price__regular { font-size: var(--System-FontM); color: var(--System-ColorText); } &.price--on-sale { .price__regular { color: var(--System-ColorOrange); } .price__sale { font-size: var(--System-FontM); color: var(--System-ColorText2); &:before { border-block-end: 2px solid var(--System-ColorOrange); transform: rotate(-10deg); margin-top: -2px; opacity: 0.8; } } } } .text-opacity { color: var(--System-ColorText2); } .alert { padding: 8px 16px 8px 8px !important; border: 1px solid var(--System-ColorSep); gap: 8px; color: var(--System-ColorText); &.alert--success { background: rgb(52 199 89 / 16%); border-color: var(--System-ColorGreen); svg { color: var(--System-ColorGreen); } } &.alert--error { background: rgb(255 45 85 / 16%); border-color: var(--System-ColorPink); svg { color: var(--System-ColorPink); } } &.alert--info { background: rgb(0 122 255 / 16%); border-color: var(--System-ColorBlue); svg { color: var(--System-ColorBlue); } } } body:has(.dr-overlay){ overflow: hidden; } .dr-overlay { -webkit-backdrop-filter: saturate(256%) blur(32px); backdrop-filter: saturate(256%) blur(32px); background: transparent !important; opacity: 0; visibility: hidden; transition: .32s cubic-bezier(.7,0,.2,1) !important; transition-property: opacity, visibility, background !important; z-index: 20 !important; @media screen and (min-width: 769px) { padding: 0 var(--System-Padding); } .dr-modal-content { background: var(--System-ColorBG) !important; color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: 36px !important; overflow: hidden; opacity: 0; height: 512px; width: 100%; max-width: 980px; transform: scale(.8); transition: transform .64s cubic-bezier(.7,0,.2,1); transition-property: transform, opacity; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } iframe { height: 100% !important; @media screen and (min-width: 769px) { margin: 0 calc(var(--System-Padding) * -1); width: calc(100% + (var(--System-Padding) * 2)) !important; padding: 0 calc(var(--System-Padding) / 2); } } @media screen and (max-width: 768px) { border-radius: 36px 36px 0 0 !important; overflow: hidden; height: 100%; max-height: calc(100% - var(--header-height) - env(safe-area-inset-top) - var(--System-Padding) * 2) !important; max-height: calc(100% - var(--header-height) - var(--mobile-dock-height) - env(safe-area-inset-top) - var(--System-Padding) * -1) !important; width: 100%; inset: auto auto 0; margin: auto auto 0; scroll-behavior: smooth; scrollbar-color: auto; scrollbar-width: thin; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--mobile-dock-height) + var(--System-Padding) + env(safe-area-inset-bottom)) !important; transform: translate3d(0, 100%, 0); } } &.dr-dimming-enter, &.dr-dimming-enter-done { opacity: 1; visibility: visible; .dr-modal-content { opacity: 1; transform: scale(1); transition: transform .64s cubic-bezier(.7,0,.2,1); } } &.dr-dimming-exit { transition: .32s cubic-bezier(.7,0,.2,1) !important; .dr-modal-content { opacity: 0; transform: scale(.8); @media screen and (max-width: 768px) { transform: translate3d(0, 200%, 0); } } } } .newsletter-bar { display: grid; background: var(--System-ColorBG); border: 2px solid var(--System-ColorSep); margin: 0 8px !important; padding: 8px 0 !important; -webkit-backdrop-filter: saturate(128%) blur(16px) !important; backdrop-filter: saturate(128%) blur(16px) !important; background: rgb(255 255 255 / 64%) !important; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%) !important; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } @media screen and (max-width: 768px) { display: none !important; /* width: auto !important; border-radius: 0 100px 100px 0 !important; left: -10px !important; padding: 0 !important; */ } .newsletter-bar__button{ background: var(--System-ColorBG2); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); font-size: var(--System-FontM); @media screen and (max-width: 768px) { background: transparent; border: none; /* transform: none !important; writing-mode: unset !important; */ } } .newsletter-bar__social { @media screen and (max-width: 768px) { display: none; } } } .button-wrapper, .title-wrapper { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; justify-content: flex-start; text-transform: capitalize; align-items: flex-end; margin-bottom: 8px; .title-head { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; flex-grow: 1; .collection-icon { width: auto; max-width: 48px; margin-bottom: auto; } .grid { gap: 0; .heading { font-size: var(--System-Font2XL); text-transform: none; } .description { font-size: var(--System-FontM); margin: 0; max-width: 100%; color: var(--System-ColorText2); -webkit-line-clamp: 1; visibility: visible; -webkit-box-orient: vertical; display: -webkit-inline-box; overflow: hidden; } } } } .rte { font-size: var(--System-FontM); color: var(--System-ColorText2); margin: 0 !important; line-height: normal; } .title-wrapper, .title-wrapper+.tab-list, .title-wrapper~[role="tabpanel"] { .Nav { display: flex; flex-direction: column-reverse; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-left: auto; &>.button { font-size: var(--System-FontS); padding: 7px 16px; width: 100%; text-align: center; .btn-text { white-space: nowrap; vertical-align: middle; text-transform: capitalize; width: 100%; svg { display: none; width: 16px; height: auto; } } } } .indicators { display: flex; gap: 8px; margin-left: auto; margin-bottom: auto; @media screen and (max-width: 568px) { display: none; } &[hidden] { display:none; } button { width: 48px; height: 48px; height: auto !important; max-width: unset !important; padding: 0; } } } .title-wrapper+.tab-list { margin: 0 auto 8px; gap: 8px; z-index: 1; position: relative; .scroll-area { max-width: calc(100% - 104px); padding: 0; margin: 0; @media screen and (max-width: 568px) { max-width: 100%; } .flex { gap: 16px; @media screen and (max-width: 768px) { gap: 8px; } } } .tab__item { padding: 4px 16px; } .indicators { margin-top: -38px; } } .title-wrapper~[role="tabpanel"] { .Nav { max-width: 104px; margin-top: -38px; margin-left: auto; @media screen and (max-width: 568px) { margin-top: -74px; margin-bottom: 38px; } } slider-element { margin-top: -22px !important; @media screen and (max-width: 768px) { margin-top: -8px !important; } } } .featured-collections { .title-wrapper { margin-block-end: 8px !important; width: 100%; max-width: calc(100% - 104px); } .button { &.button--primary, &:hover, &:focus { color: var(--System-ColorLight) !important; border-color: var(--System-ColorBlue); transition: all 0.64s ease; .btn-fill { --motion-translateY: 0% !important; transition: all 0.64s ease; display: block; transform: translateY(var(--motion-translateY)); } .btn-text { color: var(--System-ColorLight); } } } } /* Reverse Radius Shapes ----------------------------------------------------------*/ .corner { color: var(--System-ColorBG); } /* Buttons & LightBox Structure ---------------------------------------------------*/ .button { padding: 8px 16px; } .button[disabled], button.shopify-payment-button__button--unbranded[disabled] { opacity: 1; cursor: initial; } .button, .pswp__button, .pswp__counter { font-size: var(--System-FontM); font-weight: normal; color: var(--System-ColorText); border: 4px solid var(--System-ColorSep); padding: 16px 16px; text-transform: capitalize; transition: all 0.64s ease; -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); background: rgb(255 255 255 / 64%) !important; @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%) !important; } .btn-fill { background-color: var(--System-ColorBrand) !important; } .btn-text { color: var(--System-ColorText); } &:after { display: none; } &[open], &:hover { color: var(--System-ColorLight) !important; transition: all 0.64s ease; } &:hover, &:focus { color: var(--System-ColorLight) !important; border-color: var(--System-ColorBlue); transition: all 0.64s ease; .btn-fill { --motion-translateY: 0% !important; transition: all 0.64s ease; display: block; transform: translateY(var(--motion-translateY)); } .btn-text { color: var(--System-ColorLight); } } &:focus { .btn-fill { --motion-translateY: 0% !important; } .btn-text { color: var(--System-ColorLight); } } } .pswp { .pswp__bg { -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); background: rgb(255 255 255 / 64%); color: var(--System-ColorText) !important; text-transform: uppercase; /* border: 4px solid var(--System-ColorSep); */ transition: color 0.64s ease 0.32s, border-color 0.64s ease 0.32s; @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%); } } img { /* transform: scale(0.85); */ background: var(--System-ColorBG); color: var(--System-ColorText); /* border: 4px solid var(--System-ColorBG); */ /* border-radius: 36px; */ box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } } .pswp__button { -webkit-backdrop-filter: saturate(100%) blur(32px); backdrop-filter: saturate(100%) blur(32px); .icon { stroke-width: 2px; stroke: var(--System-ColorText); width: 32px !important; height: auto !important; filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, .32)); stroke: var(--System-ColorDark); stroke-width: 0.32; stroke-opacity: 0.64; } } } /* Banner Structure ---------------------------------------------------------------*/ .banner { color: var(--System-ColorText); border: 4px solid var(--System-ColorBG); .banner__overlay { z-index: 1; height: 100% !important; backdrop-filter: saturate(100%) blur(64px); -webkit-backdrop-filter: saturate(100%) blur(64px); filter: saturate(256%) blur(64px); -webkit-filter: saturate(256%) blur(64px); mask-image: linear-gradient(180deg, transparent 32%, black 85%); -webkit-mask-image: linear-gradient(180deg, transparent 32%, black 85%); background: var(--System-ColorBG2); background: rgb(255 255 255 / 64%); mask-composite: intersect; -webkit-mask-composite: destination-in; @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%); } } &.images-with-text-overlay { .banner__overlay { backdrop-filter: saturate(256%) blur(64px); -webkit-backdrop-filter: saturate(256%) blur(64px); mask-image: linear-gradient(225deg, transparent 0%, black 50%); -webkit-mask-image: linear-gradient(225deg, transparent 0%, black 50%); } } .scrolled-images { border-radius: 0; height: 100%; .scrolled-images__main { --tiles-height: clamp(256px, 52vw, 640px); .scrolled-images__row { .scrolled-images__item { --tile-margin: clamp(8px, 1vw, 16px); } .placeholder { background-color: var(--System-ColorBG2); fill: var(--System-ColorText); color: var(--System-ColorText); } &:nth-child(1) { opacity: 0.33; @media (prefers-color-scheme: dark) { opacity: 0.16; } } &:nth-child(2) { opacity: 0.66; @media (prefers-color-scheme: dark) { opacity: 0.33; } } &:nth-child(3) { opacity: 1; } } } } .banner__content { &>.page-width { padding-right: var(--System-Padding); padding-right: max(var(--System-Padding), env(safe-area-inset-right)); padding-left: var(--System-Padding); padding-left: max(var(--System-Padding), env(safe-area-inset-left)); } .banner__box { width: 100%; max-width: 100%; padding: 0; &>*+* { margin-block-start: 0; } .banner__subheading { font-size: var(--System-FontM); color: var(--System-ColorText2); letter-spacing: 0; } .media { img { max-width: 128px; } } } } } /* Marquee Text Structure ---------------------------------------------------------*/ .highlight-text { .heading { font-size: var(--System-Font4XL) !important; } } /* Marquee Text Structure ---------------------------------------------------------*/ .scrolling-text { .marquee { .scrolling-text__item { &:before { border-color: var(--System-ColorBrand); } } } } /* Scrolling Text Structure -------------------------------------------------------*/ .scrolling-text-section { --gradient-background: linear-gradient( 180deg, var(--System-ColorBrand) 50%, var(--System-ColorDark) 185% ) !important; @media (prefers-color-scheme: dark) { --gradient-background: linear-gradient( 180deg, var(--System-ColorBrand) 16%, var(--System-ColorDark) 132% ) !important; } &>.section:before { display: none; } .scrolling-wrapper { z-index: 0; border: 2px solid var(--System-ColorSep); --logical: -1; padding: 16px 0; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } &:before { background: var(--gradient-background); background-color: rgb(var(--color-background)); } .scrolling-text__item { font-size: var(--System-Font3XL); color: var(--System-ColorLight); line-height: var(--System-Font3XL); strong { color: var(--System-ColorLight); } .highlighted-text { letter-spacing: 4px; text-transform: uppercase; .icon { stroke: var(--System-ColorLight); @media (prefers-color-scheme: dark) { stroke: var(--System-ColorLight); } } } } & + .scrolling-wrapper { filter: unset; opacity: 1; z-index: 1; &:before { background-color: transparent; background: rgb(255 255 255 / 64%); -webkit-backdrop-filter: saturate(256%) blur(32px); backdrop-filter: saturate(256%) blur(32px); } @media (prefers-color-scheme: dark) { &:before { background: rgb(0 0 0 / 64%); } } .scrolling-text__item { color: var(--System-ColorText); strong { color: var(--System-ColorText); } .highlighted-text .icon { stroke: var(--System-ColorBrand); @media (prefers-color-scheme: dark) { stroke: var(--System-ColorBrand); } } } } } } /* Cards, Grids and Sliders Structure ---------------------------------------------*/ .product-grid, .card-grid, .slider, .collage { gap: var(--System-Gap); padding-top: var(--System-Padding); margin-top: calc(var(--System-Padding) * -1); padding-bottom: var(--System-Padding); margin-bottom: calc(var(--System-Padding) * -1); } .card-grid { --card-grid-per-row: 4; @media screen and (max-width: 768px) { --card-grid-per-row: 3; } @media screen and (max-width: 568px) { --card-grid-per-row: 2; } @media screen and (max-width: 428px) { --card-grid-per-row: 2; } @media screen and (max-width: 375px) { --card-grid-per-row: 1; } } .product__gallery .product__media, .product-card .wrapper, .media-card, .collage__item, .banner { background: var(--System-ColorBG); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: 18px; overflow: hidden; contain: paint; isolation: isolate; transform: translateZ(0); box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } } .product-card { background: transparent; background-color: transparent !important; box-shadow: unset; border: unset; border-radius: unset; .wrapper { transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; &.ViewAll { background-size: cover; background-position: center; &:before { content: ""; position: absolute; inset: 0; background: var(--System-ColorBG); transition: opacity 0.32s ease; z-index: 0; } & > img { -webkit-filter: saturate(256%) blur(64px); filter: saturate(256%) blur(64px); position: absolute; inset: 0; background: var(--System-ColorBG); opacity: 0.64; transition: opacity 0.32s ease; z-index: 0; height: 100%; width: 100%; object-fit: cover; } } .product-card__media { & > .media { background: var(--System-ColorBG); margin: 4px; border-radius: 14px !important; } .media, .flickity-viewport { border-start-start-radius: 0; border-start-end-radius: 0; background: var(--System-ColorBG2); } .flickity-viewport { border-radius: 14px !important; .media { margin: 0 4px; border-radius: 14px !important; background: var(--System-ColorBG2); } } .flickity-page-dots { display: none; border: 2px solid var(--System-ColorSep); background: rgb(255 255 255 / 64%) !important; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%) !important; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } .flickity-page-dot { width: 16px; &:before { background-color: var(--System-ColorText2); } &.is-selected { &:before { background-color: var(--System-ColorText); } } } } .badges { top: 12px !important; left: 12px !important; width: calc(100% - 24px); .badge { right: 0; top: 0; img { display: none; } &.basics { &:before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--System-ColorBrand); background: var(--System-ColorGray2); } } &.premium { &:before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--System-ColorBrand); rotate: -45deg; background: var(--System-ColorOrange); } } &.supreme { &:before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--System-ColorBrand); border-radius: 100%; background: var(--System-ColorOrange); background: var(--System-ColorBrand); } } } } .product-card__rating { -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); background: rgb(255 255 255 / 64%); color: var(--System-ColorText); top: 18px; right: 18px; font-size: var(--System-FontM); padding: 8px 16px; @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%); } .icon { fill: var(--System-ColorBrand); width: 20px; height: auto; stroke: var(--System-ColorDark); stroke-width: 1; stroke-opacity: .32; } } .quick-view__button { height: auto; width: 24px; border: 1px solid var(--System-ColorSep); top: 12px !important; right: 12px !important; padding: 0; svg { height: auto; width: 16px; } } .quick-add { bottom: 12px; bottom: 12px !important; --tw-translate-y: unset !important; @media screen and (max-width: 768px) { padding: 0; } .button { padding: 2px 12px; border-width: 1px; text-transform: capitalize; background: var(--System-ColorLight); font-size: var(--System-FontXS); font-weight: bold !important; color: var(--System-ColorPink); border-color: var(--System-ColorPink); @media screen and (max-width: 768px) { height: auto; width: auto; svg { height: auto; width: 16px; } } &:hover, &:focus { color: var(--System-ColorLight) !important; } } } .product-card__countdown { bottom: 20px; .button { padding: 4px 8px; font-size: var(--System-FontXS); -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); background: rgb(255 255 255 / 64%); color: var(--System-ColorText) !important; border: 1px solid var(--System-ColorSep); @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%); } .btn-text { gap: 4px !important; } svg { stroke: var(--System-ColorOrange); width: 16px; stroke-width: 2px; } countdown-timer { line-height: normal; margin-top: -2px; .countdown__item { &:nth-child(3) p:after, &:nth-child(4), &:nth-child(5) { display: none; } } } } } } .product-card__content { padding: 8px 16px 16px; .product-card__top { padding-bottom: 4px; .caption, .unit-price, .price__sale { color: var(--System-ColorText2); font-size: var(--System-FontXS); letter-spacing: 2px; } } .product-card__details { gap: 8px; .product-card__title, .horizontal-product__title { font-size: var(--System-FontM); font-weight: 600; -webkit-line-clamp: 2; visibility: visible; -webkit-box-orient: vertical; display: -webkit-inline-box; overflow: hidden; text-align: center; text-align-last: center; background: unset !important; } .price { flex-direction: row; align-content: center; gap: 8px; .unit-price { display: none; } &.price--on-sale { .price__regular { color: var(--System-ColorOrange); font-size: var(--System-FontM); } .price__sale { color: var(--System-ColorText2); font-size: var(--System-FontXS); } } .price__regular { color: var(--System-ColorText); font-size: var(--System-FontM); small { color: var(--System-ColorText2); font-size: var(--System-FontS); display: none; } } } } .product-card__bottom { padding-top: 8px; .swatches { gap: 4px; li { background: var(--System-ColorBG2); border-radius: 1000px; .color-swatch { border: 1px solid var(--System-ColorSep); width: 20px; height: 20px; &:before { box-shadow: inset 1px 2px 6px rgba(0, 0, 0, 0.32); @media (prefers-color-scheme: dark) { box-shadow: inset 1px 2px 6px rgba(0, 0, 0, 0.64); } } } } } .text-opacity { color: var(--System-ColorText3); font-size: var(--System-FontXS); } } } .product-card__spec { @media screen and (max-width: 980px) { display: none; } .product-card__icons { background-color: transparent; border-top: 1px solid var(--System-ColorSep); padding: 8px 0; .product-card__icon { & > .flex { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: center; justify-content: center; } &:not(:first-child) { border-inline-start: 1px solid var(--System-ColorSep); } figure { margin: auto; @media (prefers-color-scheme: dark) { filter: brightness(0) invert(1); -webkit-filter: brightness(1) invert(1); } } .info { color: var(--System-ColorText2); font-size: var(--System-FontS); gap: 0; p { color: var(--System-ColorText2); } } } } } &:hover { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.24); transform: scale3d(1.01, 1.01, 1.01) !important; @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.48); } } } &.view-all { .product-card__details { img { margin: 0 auto; width: 48px; } strong { font-size: var(--System-FontM); letter-spacing: normal; text-transform: none; } p { color: var(--System-ColorText2); letter-spacing: normal; text-transform: none; font-size: var(--System-FontS); font-weight: 600; } a { } .button { text-align: center; display: inline-block; width: auto; margin: 16px auto 0; padding: 8px 16px; .btn-text { white-space: nowrap; vertical-align: middle; text-transform: capitalize; width: 100%; svg { display: none; width: 16px; height: auto; } } } } } } .slider { --page-padding: calc(max(var(--sp-12),50vw - var(--scrollbar-width, 0px) / 2 - var(--page-width) / 2) + var(--System-Padding)); overflow-y: hidden; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scroll-behavior: smooth; padding-inline: var(--page-padding); margin-inline: calc(var(--page-padding) * -1); scroll-padding-inline: var(--page-padding); @media screen and (max-width: 768px) { margin-bottom: 0; } &.slider--desktop .card-grid, &.slider--tablet .card-grid { --slider-item-width: calc((980px / var(--card-grid-per-row)) - ( (var(--System-Padding) * var(--card-grid-per-row)) / ( var(--card-grid-per-row) + 1 ) ) ); --slider-grid: auto / auto-flow var(--slider-item-width); grid: var(--slider-grid); --card-grid-per-row: 4; @media screen and (max-width: 568px) { --card-grid-per-row: 4; gap: 8px; } @media screen and (max-width: 428px) { --card-grid-per-row: 5; } @media screen and (max-width: 375px) { --card-grid-per-row: 3; } } } .collage { --collage-row-height: 256px; --row-height: max(256px, min(100vw / 5, var(--collage-row-height))); grid: auto-flow dense var(--row-height) / repeat(10, minmax(0, 1fr)) !important; @media screen and (max-width: 768px) { --collage-row-height: 128px; } @media screen and (max-width: 568px) { grid: auto-flow dense var(--collage-row-height) / repeat(2,minmax(0,1fr)) !important; } .collage__item { grid-area: span var(--collage-row) / span var(--collage-column) !important; @media screen and (max-width: 568px) { --collage-row: 2 !important; grid-area: span min(2, var(--collage-row)) / span min(2, var(--collage-column)) !important } .media-card__link { .media-card__content { color: var(--System-ColorText); padding: var(--System-Padding); } } } .collage-right, .collage-left { overflow: inherit; img { width: 100%; aspect-ratio: unset !important; } } &.with-richtext { padding: 0; margin: 0; } } .media-card { border: 4px solid var(--System-ColorBG2); .media-card__link { .media { background: transparent; border-radius: 0; img { aspect-ratio: 4 / 6; } &:after { background: linear-gradient( to bottom, transparent 0%, var(--System-ColorBG2) 85% ); backdrop-filter: saturate(256%) blur(32px); -webkit-backdrop-filter: saturate(256%) blur(32px); filter: saturate(256%) blur(64px); -webkit-filter: saturate(256%) blur(64px); mask-image: linear-gradient(180deg, transparent 0%, black 85%); -webkit-mask-image: linear-gradient( 180deg, transparent 0%, black 85% ); } } .media-card__content { padding: 16px; color: var(--System-ColorText); .media-card__text { text-align: initial; flex-grow: 1; p { opacity: 1; font-size: var(--System-FontXS) !important; line-height: 1.16; color: var(--System-ColorText2); span { font-size: var(--System-FontXL); } } .count { inset-block-start: unset; } } .icon { display: none; } } } } /* Drawer Structure ---------------------------------------------------------------*/ .drawer { .overlay { background: linear-gradient(to left, transparent 40%, var(--System-ColorBG2) 80%); -webkit-backdrop-filter: saturate(256%) blur(32px); backdrop-filter: saturate(256%) blur(32px); mask-image: linear-gradient(to left, transparent 25%, var(--System-ColorBG2) 50%); -webkit-mask-image: linear-gradient(to left, transparent 25%, var(--System-ColorBG2) 50%); @media screen and (max-width: 768px) { mask-image: linear-gradient(to bottom, transparent 0%, var(--System-ColorBG2) 0%) !important; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--System-ColorBG2) 0%) !important; background: transparent !important; } } .drawer__inner { background: var(--System-ColorBG) !important; color: var(--System-ColorText); border-top: 1px solid var(--System-ColorSep); border-radius: 36px; overflow: hidden; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } @media screen and (max-width: 768px) { border-radius: 36px 36px 0 0 !important; height: 100% !important; max-height: calc(100% - var(--header-height) - env(safe-area-inset-top) - var(--System-Padding)) !important; width: 100% !important; max-width: 100% !important; inset: auto auto 0 !important; margin: auto auto 0; transform: translate3d(0, 100%, 0); padding-bottom: calc( var(--mobile-dock-height) + env(safe-area-inset-bottom) ) !important; } .drawer__header { flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: center; width: 100%; height: auto; border-bottom: 1px solid var(--System-ColorSep); padding: var(--System-Padding) 16px; padding: 16px; @media screen and (max-width: 768px) { padding: calc(var(--System-Padding) * 3) var(--System-Padding) calc(var(--System-Padding) * 1) !important; @media screen and (max-width: 768px) { border-bottom: 0; padding-top: 40px !important; } &:before { content: ""; position: absolute; inset: var(--System-Padding) 0 0; margin: 0 auto; background: var(--System-ColorText4); border-radius: 100px; height: 8px; width: 64px; transform: none; } } .drawer__close { padding: 0; @media screen and (max-width: 768px) { clip: rect(0, 0, 0, 0); border-width: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } } .drawer__title { } } .drawer__content { padding: 0; .drawer__scrollable { padding: var(--System-Padding); gap: var(--System-Gap); @media screen and (max-width: 768px) { padding:var(--System-Padding) var(--System-Padding) !important; } .SizeGuideTable { margin: calc(var(--System-Padding) * -1); width: calc(100% + (var(--System-Padding) * 2) ) !important; @media screen and (max-width: 768px) { margin: calc(var(--System-Padding) * -2) calc(var(--System-Padding) * -1) !important; } } .horizontal-products { .horizontal-product { &+.horizontal-product { border-top: 1px solid var(--System-ColorSep); } .horizontal-product__media { width: auto; border-radius: 18px; border: 2px solid var(--System-ColorSep); background: var(--System-ColorBG2); @media screen and (max-width: 768px) { border-radius: 12px; } img { width: 80px; height: auto; @media screen and (max-width: 768px) { width: 64px; } } } .horizontal-product__details { .price { flex-direction: row; align-items: center; gap: 4px; line-height: 1.32; font-size: var(--System-FontXL); .price__sale { font-size: var(--System-FontS); } .price__regular { font-size: var(--System-FontM); } .unit-price { gap:0; color: var(--System-ColorText2); font-size: var(--System-FontXS); } } .horizontal-product__title { font-size: var(--System-FontM); } .grid { display: flex; flex-direction: row; align-content: center; gap: 4px; flex-wrap: wrap; .leading-tight { gap: 4px; font-size: var(--System-FontS); color: var(--System-ColorText2); &:not(:first-child):before { content: "/"; } dd { font-weight: bold; color: var(--System-ColorText2) !important; } } } } } } .drawer__empty { width: 100%; max-width: 100%; margin: auto; .icon-empty { width: 64px; height: auto; stroke-width: 4px; color: var(--System-ColorText3); } .drawer__empty-message { color: var(--System-ColorText2); } .drawer__empty-collections { margin-top: 16px; a { display: inline-flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; gap: 16px; margin: 0 auto; padding: 16px 32px; width: 100%; max-width: 256px; background: var(--System-ColorBG2); border-radius: 100px !important; border: 2px solid var(--System-ColorSep); } } } } } .drawer__footer { .modal { overlay-element { background: linear-gradient(to bottom, transparent 40%, var(--System-ColorBG2) 80%); mask-image: linear-gradient(to left, transparent 0%, var(--System-ColorBG2) 0%); -webkit-mask-image: linear-gradient(to left, transparent 0%, var(--System-ColorBG2) 0%); -webkit-backdrop-filter: saturate(100%) blur(0); backdrop-filter: saturate(100%) blur(0px); } .modal__container { background: var(--System-ColorBG); border-radius: 36px 36px 0 0; border-top: 1px solid var(--System-ColorSep); @media screen and (max-width: 768px) { padding-bottom: calc( var(--mobile-dock-height) + env(safe-area-inset-bottom) + var(--System-Padding) ) !important; } .modal__header { padding:var(--System-Padding) var(--System-Padding) 0 ; .close { @media screen and (max-width: 768px) { position: relative; width: 48px; height: 48px; } } } .modal__content { padding:var(--System-Padding); margin-top: calc(calc(var(--System-Padding)/2) * -1); .modal__scrollable { padding: 4px; margin: -4px; width: calc(100% + 8px); } textarea, input, select { background: var(--System-ColorBG2) !important; } button { text-transform: uppercase; } .cart-discount { .badge { padding: 4px 16px; font-size: var(--System-FontS); gap: 12px; background-color: var(--System-ColorOrange); border: 1px solid var(--System-ColorOrange); color: var(--System-ColorLight); button svg { stroke: var(--System-ColorLight); } } &>.input-group { position: relative; gap: 0; input { } button { border-radius: 0 18px 18px 0; width: 100px; height: 100%; max-height: 100%; position: absolute; right: 0; top: 0; border: 1px solid var(--System-ColorSep); &:hover, &:focus { border-color: var(--System-ColorBlue); outline: none; /* box-shadow: 0 0 0 4px rgb(0 122 255 / 60%) !important; */ border-color: var(--System-ColorBrand) !important; text-transform: uppercase; } } } } } } } .drawer__footer-bottom { gap: var(--System-Gap); background: transparent; } } } &.drawer--start { .overlay { mask-image: linear-gradient(to left, transparent 25%, var(--System-ColorBG2) 50%); -webkit-mask-image: linear-gradient(to left, transparent 25%, var(--System-ColorBG2) 50%); } .drawer__inner { border-radius: 0 36px 36px 0; } } &.drawer--end { .overlay { mask-image: linear-gradient(to right, transparent 25%, var(--System-ColorBG2) 50%); -webkit-mask-image: linear-gradient(to right, transparent 25%, var(--System-ColorBG2) 50%); } .drawer__inner { border-radius: 36px 0 0 36px; } } &.newsletter-modal { z-index: 99; .overlay { background: transparent; mask-image: linear-gradient(to left, transparent 0%, var(--System-ColorBG2) 0%); -webkit-mask-image: linear-gradient(to left, transparent 0%, var(--System-ColorBG2) 0%); } .drawer__inner { border: 4px solid var(--System-ColorBG); height: auto !important; padding: 0 !important; background: rgb(255 255 255 / 85%) !important; @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 85%) !important; } .drawer__header { border: none; padding: 8px; position: absolute; @media screen and (max-width: 768px) { position: relative; } } @media screen and (max-width: 768px) { inset: inherit !important; margin: auto auto 0 !important; border-width: 1px 0 0 0; .newsletter__image { display: none; } .drawer__content { .newsletter-grid { max-width: 100%; &>* { max-width: 100%; padding-bottom: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom) + var(--System-Padding) * 2) !important; } } } } } } &.cookie-modal { z-index: 9; position: fixed; inset: auto auto 0 !important; height: auto; .overlay { display: none; } .drawer__inner { position: relative; inset: unset !important; border: 1px solid var(--System-ColorSep); height: auto !important; border-radius: 0 !important; border-width: 1px 0 0 0 !important; width: 100% !important; max-width: 100%; margin: 0 auto !important; -webkit-backdrop-filter: saturate(256%) blur(32px); backdrop-filter: saturate(256%) blur(32px); background: rgb(255 255 255 / 64%) !important; box-shadow: -2px -4px 12px rgba(0, 0, 0, 0.08); @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%) !important; box-shadow: -2px -4px 12px rgba(0, 0, 0, 0.16); } @media screen and (max-width: 768px) { border-radius: 36px 36px 0 0 !important; } .drawer__header { display: none; } .drawer__content { .drawer__scrollable { padding: 0 !important; .cookie-banner { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center; gap: 16px; width: 100%; max-width: var(--System-PageWidth); margin: 0 auto; padding: 16px var(--System-Padding); @media screen and (max-width: 768px) { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; gap: 16px; } .leading-none { @media screen and (max-width: 768px) { grid-column: 1; grid-row: 1; } .media { width: 64px; height: auto; } } .leading-normal { font-size: var(--System-FontM) !important; color: var(--System-ColorText2); margin: 0 ; @media screen and (max-width: 768px) { grid-column: 2; grid-row: 1; } p { text-align: left; margin: 0 ; color: var(--System-ColorText2); font-size: var(--System-FontM); line-height: var(--System-FontL); strong { color: var(--System-ColorText); font-size: var(--System-FontXL); display: block; margin-bottom: 8px; } } } .cookie__buttons { margin: 0 ; @media screen and (max-width: 768px) { grid-column: 1 / -1; grid-row: 2; } &>div { gap: 8px; button { padding: 8px 16px; text-transform: capitalize; } .button--primary { padding: 8px 16px; border-radius: 100px 64px 64px 100px; } .button--secondary { padding: 8px 16px; border-radius: 64px 100px 100px 64px; } } } } } } } } &.search-drawer { .search__form { gap: var(--System-Gap); .search__box { gap: var(--System-Padding); padding-bottom: var(--System-Padding); margin-top: var(--System-Padding); .grid { gap: 8px; .search__heading { padding-bottom: 8px; color: var(--System-ColorText); border-block-end: 1px solid var(--System-ColorSep); font-size: var(--System-FontM); line-height: normal; } } } .search__field { .typed { background: var(--System-ColorBG2); color: var(--System-ColorText2); border: 1px solid var(--System-ColorSep); font-size: var(--System-FontM); height: 64px !important; width: 100%; border-radius: 18px; padding: 16px; } .search__input { background: var(--System-ColorBG2) !important; padding: 16px; } } .search__results { .search__heading { padding-bottom: 8px; color: var(--System-ColorText2); border-block-end: 1px solid var(--System-ColorSep); } mark { background: transparent; color: var(--System-ColorText); } .drawer__sticky { padding: 0; } } } } &.cart-drawer { .drawer__inner { .drawer__header { .drawer__tabs { display: flex; justify-content: flex-start; gap: 32px; cart-count { background: var(--System-ColorBrand); color: var(--System-ColorLight); padding: 3px 6px; border-radius: 100px; top: -10px !important; left: 58px; right: auto !important; font-size: var(--System-FontS) !important; min-height: 16px; min-width: 20px; text-align: center; @media screen and (max-width: 768px) { left: 44px; } } .drawer__tab { opacity: 0.32; &:hover, &[aria-expanded=true] { opacity: 1; } } } } .drawer__content { .free-shipping-bar { span { font-size: var(--System-FontM); span { font-size: var(--System-FontL); } } progress-bar { background: var(--System-ColorBG2); height: 10px; border: 2px solid var(--System-ColorSep); &:before { background: var(--System-ColorBrand); background: var(--System-ColorOrange); height: 6px; } } } cart-items { .horizontal-product { .horizontal-product__quantity { .cart-quantity { width: 72px; @media screen and (max-width: 768px) { width: 64px; } .quantity__input { padding: 8px 28px 8px 16px; font-size: var(--System-FontM); text-align: center; background: var(--System-ColorBG2) !important; color: var(--System-ColorText) !important; border-radius: 10px; height: auto !important; @media screen and (max-width: 768px) { padding: 8px 16px; } } .quantity__buttons { gap: 8px; width: 24px; margin-right: 4px; display: flex; @media screen and (max-width: 768px) { display: none; } .quantity__button { width: 100%; padding: 0; .icon { width: 10px; height: auto; color: var(--System-ColorText2); } } } } .Remove { margin: 4px 0 0; a { display: flex; gap: 4px; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; color: var(--System-ColorText2); } a:hover, a:focus { color: var(--System-ColorRed); background: transparent; } &.is-loading { .remove-link { visibility: hidden; pointer-events: none; } } } } } } product-recommendations { .recommend__title { border-block-end: 1px solid var(--System-ColorSep); } .horizontal-products { .horizontal-product { &+.horizontal-product { border-top: none; } } } } } .drawer__footer { .drawer__footer-top { border-top: 1px solid var(--System-ColorSep); &>button+button { border-left: 1px solid var(--System-ColorSep); } button { color: var(--System-ColorText2); &:hover, &:focus { color: var(--System-ColorText); } .cart-discount__count { background: transparent; font-size: var(--System-FontM); padding: 0; font-weight: bold; border: 2px solid var(--System-ColorOrange); color: var(--System-ColorOrange); } } .modal__container { .modal__header { span { font-size: var(--System-FontXL); text-transform: capitalize; } } } } .drawer__footer-bottom { border-top: 1px solid var(--System-ColorSep); .discounts { border-bottom: 2px dashed var(--System-ColorSep); padding-bottom: var(--System-Gap); @media screen and (max-width: 768px) { display: none; } .badge { padding: 8px 16px; font-size: var(--System-FontS); gap: 12px; background-color: var(--System-ColorOrange); border: 1px solid var(--System-ColorOrange); color: var(--System-ColorLight); } } .tax-note { color: var(--System-ColorText2); font-size: var(--System-FontM); font-size: var(--System-FontS); margin-top: auto !important; } .totals { .totals__subtotal { color: var(--System-ColorText2); font-size: var(--System-FontM); } .totals__subtotal-value { font-size: var(--System-Font3XL); } } .drawer__footer-buttons { display: flex; flex-direction: row-reverse; gap: var(--System-Gap); justify-content: center; align-items: center; .button { font-size: var(--System-FontM); flex-grow: 1; line-height: 20px; &.button--primary { font-size: var(--System-FontL); } .icon { display: block !important; } @media screen and (max-width: 768px) { padding: 8px 16px; } } } } } } } &.quick-view { .overlay { background: transparent; mask-image: linear-gradient(to left, transparent 0%, var(--System-ColorBG2) 0%); -webkit-mask-image: linear-gradient(to left, transparent 0%, var(--System-ColorBG2) 0%); } .drawer__inner { max-width: 980px; .drawer__header { border-bottom: 0; padding: 0; .drawer__close { inset: 16px; background: transparent; } } .product { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); @media screen and (max-width: 768px) { grid-template-columns: unset; } .product__gallery { border: none; background: var(--System-ColorBG2); @media screen and (max-width: 768px) { width: calc(100% - var(--System-Padding) * 2) !important; margin: 0 auto; border-radius: 18px !important; overflow: hidden; border: 1px solid var(--System-ColorSep); } .product__media-container { gap: 0; .slider { padding: 0; margin: 0; .product__media { background: var(--System-ColorBG2); border-radius: 0; border: none; box-shadow: unset; overflow: unset; contain: unset; isolation: unset; transform: unset; width: 100%; button { display: none; } img { object-fit: contain; } } } .product__thumbnails-list { position: absolute; inset-block-end: 32px; inset-inline-start: 50%; height: 32px; width: auto; margin-block-start: 0; padding: 8px 16px; border-radius: 100px; border: 2px solid var(--System-ColorSep); transform: translate(-50%); -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); background: rgb(255 255 255 / 64%) !important; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%) !important; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } .product__thumbnail { &:before { background: var(--System-ColorText3); } &[aria-current=true]:before { background-color: transparent !important; box-shadow: 0 0 0 2px var(--System-ColorText2); } } } } } .product__content { .product__info { padding: var(--System-Padding) var(--System-Padding) calc(var(--System-Padding) * 3); max-width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 32px; scroll-behavior: smooth; scroll-snap-type: y mandatory; scrollbar-color: auto; scrollbar-width: thin; overflow-x: hidden; overflow-y: auto; @media screen and (max-width: 768px) { padding: var(--System-Padding); } .variant-picker .swatches li .label-swatch { background: var(--System-ColorBG2); } .product__accordion { background: var(--System-ColorBG2); .product-bundle__info { .checkbox, .horizontal-product__media { background: var(--System-ColorBG); } } } } .product__more { -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); border-top: 1px solid var(--System-ColorSep); margin: var(--System-Padding) 0 auto; background: rgb(255 255 255 / 64%) !important; @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%) !important; } @media screen and (max-width: 768px) { margin: 0 auto 32px; border-bottom: 1px solid var(--System-ColorSep); } } } } .product, .product__content, .product__info, .product__gallery, .product__media-container, .product__media-list, .product__media { height: 100%; @media screen and (max-width: 768px) { height: auto; } } } } &.x-modal { .overlay { background: transparent; mask-image: linear-gradient(to left, transparent 0%, var(--System-ColorBG2) 0%); -webkit-mask-image: linear-gradient(to left, transparent 0%, var(--System-ColorBG2) 0%); } .drawer__inner { margin: 0 var(--System-Padding); border: 1px solid var(--System-ColorSep); @media screen and (max-width: 768px) { border-right: none; border-left: none; margin: 0 auto; } } &.address-modal { .drawer__inner { margin: 0 auto; } } } &.menu-drawer { &#MenuDrawer-menu_7EWUFr { .drawer__content { .drawer__menu-item { img { background: var(--System-ColorBG2); border-radius: 8px; border: 1px solid var(--System-ColorSep); padding: 2px; filter: unset; -webkit-filter: unset; } } } } .drawer__inner { overflow: visible; padding-bottom: 0 !important; .drawer__header { } .drawer__content { .drawer__scrollable { padding-bottom: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom) + 108px) !important; } .drawer__menu { height: 100%; max-height: unset !important; &.active { .drawer__menu-group { &>.mega-menu__list { transform: translate(calc(-30% * var(--transform-logical))); } } } .drawer__menu-group { padding: 0; &:not(:first-child) { margin-top: 16px; border-top: 1px solid var(--System-ColorSep); padding-top: 16px; } &>.mega-menu__list { transition: transform var(--animation-primary); } .drawer__menu-item { padding: 0; &:after { right: 8px; border-color: var(--System-ColorSep); opacity: 1; border-width: 2px; width: 12px; height: 12px; } &>svg { left: auto; right: 0; } } .text-2xl { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: flex-start; gap: 8px; img { max-width: 40px; width: 100%; @media (prefers-color-scheme: dark) { filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); } } p { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-right: 32px; strong { display: block; text-align: left; font-size: var(--System-FontL); } span { color: var(--System-ColorText2); font-size: var(--System-FontS); text-align: left; } } } .drawer__submenu { background: var(--System-ColorBG); &>.tracking-tight { color: var(--System-ColorText); border-bottom: 1px solid var(--System-ColorSep); padding: 0 16px 16px; margin: 0 16px; width: calc(100% - 32px); height: auto; } } .drawer__scrollable { .drawer__promotions { .mega-menu__list { display: block; .mega-menu__item { width: 100%; max-height: 256px; .media-card__content { padding: 16px; .media-card__text p { display: block; } } } } } .mega-menu__footer { width: 100%; margin-top: 16px; border-top: 1px solid var(--System-ColorSep); padding-top: 32px; } &.mega-menu__item--large { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; height: auto; &>.drawer__menu-group { display: inline; flex-grow: 1; width: auto; padding: 0; margin: 0; border: none; .drawer__menu-item { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center; gap: 8px; border: 2px solid var(--System-ColorSep); border-radius: 100px; padding: 8px 16px; img { background: transparent; margin: 0; margin-left: -8px; aspect-ratio: 1 / 1; max-width: 32px; width: 100%; background: var(--System-ColorBG2); border-radius: 100px; } p { padding: 0; strong { background: transparent; margin: 0; font-size: var(--System-FontM) !important; } span { display: none; } } } } } } } } .drawer__footer { position: absolute; width: 100%; height: auto; bottom: calc(var(--mobile-dock-height) - 18px); left: 0; right: 0; margin: 0 auto; z-index: 3; -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); border-top: 1px solid var(--System-ColorSep); overflow: hidden; background: rgb(255 255 255 / 64%); @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%); } .drawer__footer-bottom { margin: 16px 16px 34px; padding: 0; .button { width: 100%; height: 44px; .btn-text { display: flex; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; gap: 4px; white-space: nowrap; text-transform: capitalize; .icon { display: none; } } } } } } } } &#HelpDrawer { .help-list { .help-list__item { background-color: var(--System-ColorBG2); color: var(--System-ColorText2); .rte { font-size: var(--System-FontM); color: inherit; } .h4 { color: var(--System-ColorText); } } } } &[active] { &>.drawer__inner { @media screen and (max-width: 768px) { transform: translateZ(0); } } } } body[data-jmodal-scroll] { overflow: hidden; touch-action: none; -ms-touch-action: none; height: 100%; width: 100%; position: absolute; } .jdgm-modal, .jdgm-review-widget-modal { display: flex; align-items: center; justify-content: center; transition: unset !important; &.jdgm-widget-revamp[role="presentation"] { z-index: 30 !important; } &.jdm-modal-open { display: flex!important; } &.jdgm-modal__fade-enter-from, &.jdgm-modal__fade-enter-active, &.jdgm-modal__fade-leave-from, &.jdgm-modal__fade-leave-active { transition: unset !important; .jdgm-modal__overlay, .jdgm-write-review-modal__overlay { opacity: 0 !important; transition: opacity 1.28s ease; } .jdgm-modal__content, .jdgm-write-review-modal__container { transform: translateY(100vh); transition: transform .64s ease; } } .jdgm-modal__overlay, .jdgm-write-review-modal__overlay { opacity: 1 !important; transition: opacity .64s ease; background: linear-gradient(to left, transparent 40%, var(--System-ColorBG2) 80%) !important; -webkit-backdrop-filter: saturate(256%) blur(32px); backdrop-filter: saturate(256%) blur(32px); mask-image: linear-gradient(to left, transparent 25%, var(--System-ColorBG2) 50%); -webkit-mask-image: linear-gradient(to left, transparent 25%, var(--System-ColorBG2) 50%); background: transparent !important; mask-image: linear-gradient(to left, transparent 0%, var(--System-ColorBG2) 0%); -webkit-mask-image: linear-gradient(to left, transparent 0%, var(--System-ColorBG2) 0%); @media screen and (max-width: 768px) { mask-image: linear-gradient(to bottom, transparent 0%, var(--System-ColorBG2) 0%) !important; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--System-ColorBG2) 0%) !important; background: transparent !important; } } .jdgm-modal__content, .jdgm-write-review-modal__container { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; transform: translateY(0); transform-origin: bottom center; transition: transform .32s ease; position: static !important; height: auto !important; max-height: 90vh; max-width: var(--System-PageWidth); margin: 0 var(--System-Padding); border: 1px solid var(--System-ColorSep); background: var(--System-ColorBG) !important; color: var(--System-ColorText); border-top: 1px solid var(--System-ColorSep); border-radius: 36px; overflow: hidden; opacity: 1; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } @media screen and (max-width: 768px) { border-radius: 36px 36px 0 0 !important; height: auto !important; min-height: calc(100% - var(--header-height) - var(--mobile-dock-height) - env(safe-area-inset-top) - var(--System-Padding) * -1) !important; max-height: 100% !important; width: 100% !important; max-width: 100% !important; inset: auto auto 0 !important; margin: auto auto 0; background: transparent !important; background: var(--System-ColorBG) !important; padding-bottom: calc( var(--mobile-dock-height) + env(safe-area-inset-bottom) ) !important; } .jdgm-modal__container, .jdgm-write-review-modal__content { max-height: 100% !important; max-width: 100% !important; height: 100% !important; width: 100% !important; display: flex !important; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: flex-start; align-items: center; .jm-indicator { padding: var(--System-Gap); top: 0; right: 0; z-index: 99; } .jm-indicator button, .jdgm-write-review-modal__close-btn { opacity: 1; -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); text-transform: uppercase; border: 4px solid var(--System-ColorSep); border-radius: 100px; height: 48px; width: 48px; font-family: var(--font-body-family); color: var(--System-ColorText); background: #ffffffa3; transition: color 0.64s ease 0s, border-color 0.64s ease 0s; position: relative; overflow: hidden; svg { transition: color 0.64s ease 0s, border-color 0.64s ease 0s; color: var(--System-ColorText); } &:hover, &:focus { color: var(--System-ColorLight) !important; border-color: var(--System-ColorBlue); transition: color 0.64s ease 0s, border-color 0.64s ease 0s; opacity: 1; box-shadow: unset; svg { color: var(--System-ColorLight); } } &:before, &:after { content:""; display: block; background-color: var(--System-ColorBrand) !important; display: block; border-radius: 50%; width: 150%; height: 200%; inset-block-start: -50%; inset-inline-start: -25%; position: absolute; transition: transform 0.64s cubic-bezier(0.3, 1, 0.3, 1); z-index: -1; } &:before { transform: translateY(86%); } &:after { transform: translateY(-76%); transition-delay: .16s; } &:hover:before, &:hover::after { transform: translateY(0%); } &:focus:before { transform: translateY(0%); } } .jdgm-write-review-modal__close-btn { position: absolute; display: flex; justify-content: flex-end; align-items: center; top: var(--System-Gap); right: var(--System-Gap); z-index: 99; padding: 8px; &:hover, &:focus { svg { &>* { stroke: var(--System-ColorLight); } } } } .jm-slide { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: flex-start; align-items: stretch; border-radius: 0; background: var(--System-ColorBG) !important; @media screen and (max-width: 768px) { display: flex; flex-direction: column; flex-wrap: nowrap; height: auto; align-items: center; scroll-behavior: smooth; scrollbar-color: auto; scrollbar-width: none; overflow-x: hidden; overflow-y: auto; padding-top: 80px; max-height: var(--jm-lightbox-max-height); max-height: 100vh; max-height: calc(100vh - var(--header-height) - var(--mobile-dock-height) - env(safe-area-inset-top) - var(--System-Padding) ) !important; } .jm-carousel, .jm-content { width: calc(100% / 2); flex: unset; height: unset; flex-grow: 1; overflow-y: unset; overscroll-behavior: unset; touch-action: unset; @media screen and (max-width: 768px) { width: 100%; } } .jm-carousel { flex-shrink: 0; background: var(--System-ColorBG2) !important; @media screen and (max-width: 768px) { width: calc(100% - 32px); margin: 0 16px 16px; border-radius: 18px !important; overflow: hidden; border: 1px solid var(--System-ColorSep); } .jm-carousel__wrapper { aspect-ratio: 1/1; } .jm-thumbnails { padding: 0; .jm-media-grid { height: auto; --thumbnail-size: 64px !important; --thumbnail-spacing: 8px !important; .jm-media-grid__container { gap: var(--System-Gap); padding: var(--System-Gap) !important; .jm-media-grid__item { width: 64px; height: 64px; aspect-ratio: 1/1; border-radius: calc( 36px - var(--System-Gap) ); -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); background: rgb(255 255 255 / 64%); border: 2px solid var(--System-ColorSep); overflow: hidden ; outline: none; min-width: unset; font-family: var(--font-heading-family) !important; font-size: var(--System-FontM); color: var(--System-ColorText) !important; z-index: 9; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); transition: color 0.64s ease 0.32s, border-color 0.64s ease, opacity 0.64s ease; @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); background: rgb(0 0 0 / 64%); } &.jm-media-grid__item--active { border-color: var(--System-ColorBlue); } } } } } &>button { width: 48px; height: 48px !important; max-width: unset !important; padding: 0; cursor: pointer; display: inline-flex; align-items: stretch; justify-content: center; gap: 0; overflow: hidden; padding: 0; border-radius: 100px; -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); background: rgb(255 255 255 / 64%); border: 4px solid var(--System-ColorSep); overflow: hidden ; outline: none; min-width: unset; font-family: var(--font-heading-family) !important; font-size: var(--System-FontM); color: var(--System-ColorText) !important; z-index: 9; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); transition: color 0.64s ease 0.32s, border-color 0.64s ease 0.32s, opacity 0.64s ease; @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); background: rgb(0 0 0 / 64%); } &.jm-navigation__next { right: -4px; border-right: 0 !important; border-radius: 100px 0 0 100px; } &.jm-navigation__previous { left: -4px; border-left: 0 !important; border-radius: 0 100px 100px 0; } svg { width: 12px; height: auto; margin: 0 auto; color: var(--System-ColorText); transition: color 0.32s ease, border-color 0.64s ease 0.32s, opacity 0.64s ease; } span { margin-right: 4px; border-color: color-mix(in srgb, var(--System-ColorLight) 40%, transparent); border-top-color: var(--System-ColorLight); } &:before, &:after { content:""; display: block; background-color: var(--System-ColorBrand) !important; display: block; border-radius: 50%; width: 150%; height: 200%; inset-block-start: -50%; inset-inline-start: -25%; position: absolute; transition: transform 0.64s cubic-bezier(0.3, 1, 0.3, 1); z-index: -1; } &:before { transform: translateY(86%); } &:after { transform: translateY(-76%); transition-delay: .16s; } &:hover:before, &:hover:after { transform: translateY(0%); } &:focus:before { transform: translateY(0%); } &:hover, &:focus { color: var(--System-ColorLight) !important; border-color: var(--System-ColorBG); transition: color 0.64s ease 0s, border-color 0.64s ease 0s; opacity: 1; box-shadow: unset; border: 4px solid var(--System-ColorBlue); svg { color: var(--System-ColorLight); transition: color 0.32s ease, border-color 0.64s ease 0.32s, opacity 0.64s ease; } } &:disabled { opacity: 0.3; } } } .jm-content { border: none; background: var(--System-ColorBG) !important; padding: 0; .jm-review-item { height: 100%; &>.jm-stack { display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; align-items: stretch; height: 100%; &>* { margin: 0 !important; } .jm-review-item__body { padding: var(--System-Padding); .jm-review-item__content { display: flex; flex-direction: column; flex-wrap: wrap; align-items: stretch; gap: var(--System-Gap); flex: unset; .jm-star-rating { .jm-cluster { &>* { display: flex !important; flex-direction: row; align-items: center; flex-wrap: nowrap; justify-content: center; gap: 4px; .jm-star-rating__font-icon { color: var(--System-ColorOrange) !important; font-size: 24px !important; filter: drop-shadow(2px 4px 12px rgba(0, 0, 0, 0.16)); text-shadow: 0 0 1px rgba(0, 0, 0, 0.32); &:nth-child(2), &:nth-child(4) { /* font-size: 48px !important; */ } &:nth-child(3) { /* font-size: 64px !important; */ } } } } } .jm-reviewer-info { margin: 0 !important; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--System-Gap); .jm-reviewer-avatar { background: var(--System-ColorBrand); background-color: color-mix(in srgb, var(--System-ColorBrand) 10%, transparent); color: var(--System-ColorText); font-family: var(--font-heading-family) !important; font-size: var(--System-FontXL); width: 48px; height: auto; aspect-ratio: 1 / 1; span { font-weight: normal !important; } } .jm-reviewer-info__details { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: space-between; align-items: center; gap: 4px; flex-grow: 1; .jm-cluster { font-weight: normal; text-decoration: none; font-size: var(--System-FontM); color: var(--System-ColorText) !important; line-height: 1; margin: 0; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: center; gap: 8px; min-width: 50%; &>* { } &:first-child { flex-grow: 1; justify-content: space-between; } .jm-reviewer-info__name { font-family: var(--font-heading-family) !important; color: var(--System-ColorText) !important; font-size: var(--System-FontM); font-weight: normal !important; } .jm-verified-buyer-badge__text { background: var(--System-ColorLight); border: 2px solid var(--System-ColorBlue) !important; color: var(--System-ColorBlue) !important; border-radius: 100px; font-weight: bold; font-size: 12px; padding: 0px 4px; } &:nth-child(2) { gap: 4px; width: 100%; &>* { order: 10; } .jm-text:not(.jm-location) { display: none; margin-left: auto; &:last-child { margin-left: auto; display: inline-block; } } } .jm-location { font-family: var(--font-body-family); font-size: var(--System-FontS); color: var(--System-ColorText2) !important; order: 2; } .jm-reviewer-info__flag { order: 1; width: 16px; height: auto; } } .jm-text { margin: 0; font-family: var(--font-body-family); font-size: var(--System-FontS); color: var(--System-ColorText2) !important; line-height: var(--System-FontM); } } } .jm-review-content { margin: 0 !important; max-height: 512px; height: 100%; scroll-behavior: smooth; scrollbar-color: auto; scrollbar-width: none; overflow-x: hidden; overflow-y: auto; @media screen and (max-width: 768px) { overflow-x: hidden; overflow-y: hidden; max-height: 100%; } .jm-text { margin: 0; p { margin: 0 0 var(--System-Gap); color: var(--System-ColorText2); line-height: var(--System-FontXL); font-size: var(--System-FontL); &:last-child { margin: 0 0; } } } } } } .jm-shop-reply { padding: var(--System-Padding); background: var(--System-ColorBrand); background-color: color-mix(in srgb, var(--System-ColorBrand) 10%, transparent); border-top: 1px solid var(--System-ColorSep); @media screen and (max-width: 768px) { border-radius: 18px; border: 1px solid var(--System-ColorSep); margin: auto var(--System-Gap) var(--System-Gap) !important; } .jm-shop-reply__author { color: var(--System-ColorText2) !important; margin-bottom: 4px; } .jm-shop-reply-content { margin: 0 !important; max-height: 512px; height: 100%; scroll-behavior: smooth; scrollbar-color: auto; scrollbar-width: none; overflow-x: hidden; overflow-y: auto; @media screen and (max-width: 768px) { overflow-x: hidden; overflow-y: hidden; max-height: 100%; } &:hover, &:focus { .jm-shop-reply__expand-button { p { color: var(--System-ColorText) !important; } } } .jm-shop-reply__text { p { margin: 0 0 var(--System-Gap); color: var(--System-ColorText2); line-height: var(--System-FontXL); font-size: var(--System-FontL); &:last-child { margin: 0 0; } } } .jm-shop-reply__expand-button { margin-top: 0; color: var(--System-ColorText2); transition: all 0.32s ease; p { font-family: var(--font-body-family); line-height: var(--System-FontL); font-size: var(--System-FontS); font-weight: bold; text-decoration: underline; transition: all 0.32s ease; color: var(--System-ColorText2) !important; } &:hover, &:focus { p { color: var(--System-ColorText) !important; } } } } } .jm-product-variant-card { padding: var(--System-Gap); margin: auto 0 0 !important; background: var(--System-ColorBG2); color: var(--System-ColorText); border-radius: 0; border: 0; border-top: 1px solid var(--System-ColorSep); @media screen and (max-width: 768px) { border-radius: 18px; border: 1px solid var(--System-ColorSep); margin: auto var(--System-Gap) var(--System-Gap) !important; } &>.jm-cluster { gap: 8px; .jm-text { line-height: 1; margin-bottom: 2px; &.jm-product-variant-card__product-link { color: var(--System-ColorText) !important; font-size: var(--System-FontM); font-family: var(--font-heading-family); } } } } } } } } } } } /* Form Fields Structure ----------------------------------------------------------*/ input[type="text"],input[type="email"], .input, select, .select, textarea, .textarea { font-size: var(--System-FontM); text-overflow: ellipsis; -moz-font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; height: 64px !important; width: 100%; border-radius: 18px; border: 1px solid var(--System-ColorSep) !important; padding: 16px 16px 0; background: var(--System-ColorBG) !important; color: var(--System-ColorText) !important; outline: none; transition: all 0.25s ease; } textarea, .textarea { height: auto !important; resize: none; } select[required]:valid ~ .label, .select[required]:valid ~ .label, select[selected] ~ .label, .select[selected] ~ .label, :is(input[type="text"], input[type="email"], textarea):focus ~ .label, :is(.input, .textarea):focus ~ .label, :is(input[type="text"], input[type="email"], textarea):not(:placeholder-shown) ~ .label, :is(.input, .textarea):not(:placeholder-shown) ~ .label, :is(input[type="text"], input[type="email"], textarea, select):-webkit-autofill ~ .label, :is(.input, .textarea, .select):-webkit-autofill ~ .label { --tw-translate-y: -0.64rem; --tw-scale-x: 0.64; --tw-scale-y: 0.64; } input[type="email"]:hover, input[type="text"]:hover, .input:hover, select:hover, .select:hover, textarea:hover, .textarea:hover { border-color: var(--System-ColorBrand) !important; } input[type="email"]:focus, input[type="text"]:focus, .input:focus, select:focus-visible, .select:focus-visible, textarea:focus, .textarea:focus { border-color: var(--System-ColorBlue); box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.6); outline: none; box-shadow: 0 0 0 4px rgb(0 122 255 / 60%) !important; border-color: var(--System-ColorBrand) !important; } .label.is-floating { margin: 0 16px; } input[type="checkbox"], .checkbox { --active: var(--System-ColorDark); --active-inner: var(--System-ColorLight); --background: var(--System-ColorBG2); --border: var(--System-ColorSep); --border-hover: var(--System-ColorText2); background: var(--System-ColorBG); &:after { border-color: var(--System-ColorText) !important; } } .image-comparison { background: var(--System-ColorBG); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: 18px; --button-touch: 64px; --button-line: 6px; --button-width: 32px; --button-height: 64px; .media { background: radial-gradient(circle at 50% 50%, var(--System-ColorBG2) 32%, var(--System-ColorBG) 100%), radial-gradient(circle at 50% 36%, var(--System-ColorBG2) 32%, var(--System-ColorBG) 100%) var(--System-ColorBG); /* base background */ background-repeat: no-repeat; background-size: 100% 100%; } .comparison__button { &:before, &:after, span { background: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-width: 0 1px; } span { color: var(--System-ColorBG); border: 1px solid var(--System-ColorSep); border-width: 1px; } } } /*---------------------------------------------------------------------------------*/ /* Header Structure ---------------------------------------------------------------*/ /*---------------------------------------------------------------------------------*/ .topbar-section { background: var(--System-ColorBG2); color: var(--System-ColorText); z-index: 9; position: relative; border-bottom: 1px solid var(--System-ColorSep); .topbar { background: var(--System-ColorBG2); color: var(--System-ColorText); padding-top: 0; gap: var(--System-Gap); --topbar-grid-template: "socials announcement localization" / minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); display: block; @media screen and (max-width: 768px) { --topbar-grid-template: "announcement" / auto; } &:before { background: var(--System-ColorBG2); color: var(--System-ColorText); height: auto !important; } .social-icons, .localization { display: flex; @media screen and (max-width: 768px) { display: none; } } .social-icons { ul { gap: 16px; } } .announcement__slides { max-width: inherit; min-width: inherit; .announcement__content { gap: 8px; .announcement-icon { display: block !important; svg { width: 20px; height: auto; } } .announcement-text { font-size: var(--System-FontM); font-family: var(--font-body-family); color: var(--System-ColorText2); strong { font-family: var(--font-heading-family); color: var(--System-ColorText); } } } } .localization { justify-content: flex-end; .localization__item { .leading-tight { white-space: nowrap; } } } .dropdown { margin: 0 auto !important; .dropdown__container { background: var(--System-ColorBG2); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-top: 0; border-radius: 0 0 18px 18px; padding-block: var(--System-Padding); overflow: hidden; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } .dropdown__nav { li > p { padding-inline: var(--System-Padding); } } .corner { color: var(--System-ColorBG2); path:last-child { fill: var(--System-ColorGreen); } &.top.left { left: calc(var(--border-radius) * -1 + 1px); } &.top.right { right: calc(var(--border-radius) * -1 + 1px); } } } } } } .header-section { z-index: 8; @media screen and (max-width: 768px) { z-index: 10; } .header { padding-top: 10px; padding-bottom: 10px; background: transparent; color: var(--System-ColorText) !important; position: unset; transform: unset !important; &::before { opacity: 1; background: var(--System-ColorBG); transition: background 0.8s cubic-bezier(0.7, 0, 0.2, 1); } @media screen and (max-width: 768px) { &::before { border-radius: 0 0 18px 18px !important; overflow: hidden; } } .header__cutout { display: none; } --header-grid-template: "logo navigation icons" / minmax(0, 1fr) fit-content(70%) minmax(0, 1fr); @media screen and (max-width: 768px) { --header-grid-template: "tools logo icons" / minmax(0, 1fr) auto minmax(0, 1fr); display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center; } } .header__icons { &.header__icons--start { display: none; @media screen and (max-width: 768px) { display: flex; display: none; } } .header__buttons { gap: 0px; .lg\:flex { display: flex; } .search-drawer-button, .cart-drawer-button { order: 1; @media screen and (max-width: 768px) { display: none; } } cart-count { background: var(--System-ColorBrand); color: var(--System-ColorLight); padding: 3px 6px; border-radius: 100px; top: 0 !important; left: 24px; right: auto !important; font-size: var(--System-FontS) !important; height: 20px; min-width: 20px; text-align: center; line-height: 1; } } } .header__navigation, .header__navigation .header__menu { display: flex; @media screen and (max-width: 768px) { display: none; } } .header__logo { text-align: unset; margin-inline: unset; max-width: unset; justify-content: left; img { max-height: 44px !important; max-width: 44px !important; opacity: 1 !important; &.white-logo { display: none; } @media (prefers-color-scheme: dark) { &.logo { display: none; } &.white-logo { display: block; opacity: 1; } } } @media screen and (max-width: 768px) { text-align: center; margin-inline: auto; width: 44px; height: 44px; margin: 0; } } .header__menu { .menu__item { .btn-duplicate { background-color: var(--System-ColorBrand) !important; color: var(--System-ColorLight) !important; } } .mega-menu { max-width: var(--System-PageWidth); margin: 0 auto; left: 0; right: 0; padding-block-start: var(--header-height) !important; overflow: visible; } .dropdown { padding-block-start: var(--header-height) !important; } .mega-menu__container, .dropdown__container { background-color: var(--System-ColorBG) !important; color: var(--System-ColorText); } .mega-menu__container { position: relative; width: calc(100% - (var(--border-radius) * 2)); margin: auto; padding: 0; .mega-menu__list { max-width: unset; gap: var(--System-Gap); padding: var(--System-Padding); } .mega-menu__item { color: var(--System-ColorText); padding: 0; flex: calc(25% - var(--System-Padding) / 2); &.mega-menu__item--tabs { max-width: min(224px, 32%); gap: var(--System-Gap); & > p { font-size: var(--System-FontM); color: var(--System-ColorText2); text-transform: capitalize; } .mega-menu__nav { gap: var(--System-Gap); .mega-menu__nav-item { img { height: 32px; width: auto; @media (prefers-color-scheme: dark) { filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); } } span { font-size: var(--System-FontXL); text-transform: capitalize; text-transform: uppercase; } } } } &.mega-menu__item--panels { max-width: unset; .mega-menu__panel { gap: 22px; .grid { gap: var(--System-Gap); --card-grid-gap: unset; &>.flex { align-items: flex-end; .text-opacity, .text-base { font-size: var(--System-FontM); color: var(--System-ColorText2); text-transform: capitalize; } .mega-menu__link { .heading { font-size: var(--System-FontL); text-transform: capitalize; color: var(--System-ColorText2); } &:hover, &:focus { .heading { color: var(--System-ColorText); } } } } .product-card__media { .product-card__countdown, .quick-view__button, .quick-add { display: none; } } .product-card__content { padding: 16px 16px; .product-card__top, .product-card__details .price { display: none; } } .product-grid { .product-card { display: none; &:nth-child(1), &:nth-child(2), &:nth-child(3) { display: flex; max-width: calc( 33.33% - var(--System-Padding) / 3 ); } .wrapper { background: var(--System-ColorBG2); box-shadow: none; .product-card__media .media, .product-card__media .flickity-viewport { background: var(--System-ColorBG); background: radial-gradient(circle at 50% 164%, var(--System-ColorBG2) 32%, var(--System-ColorBG) 64%); background: radial-gradient(circle at -20% 50%, var(--System-ColorBG2) 32%, transparent 64%), /* left glow */ radial-gradient(circle at 120% 50%, var(--System-ColorBG2) 32%, transparent 64%), /* right glow */ var(--System-ColorBG); /* base background */ background: radial-gradient(circle at 50% 120%, var(--System-ColorBG2) 32%, transparent 64%), /* bottom glow */ radial-gradient(circle at 50% -20%, var(--System-ColorBG2) 32%, transparent 64%), /* top glow */ var(--System-ColorBG); /* base background */ background: radial-gradient(circle at 50% 50%, var(--System-ColorBG2) 48%, var(--System-ColorBG) 128%), var(--System-ColorBG); background: radial-gradient(circle at 50% 50%, var(--System-ColorBG2) 32%, var(--System-ColorBG) 100%), radial-gradient(circle at 50% 36%, var(--System-ColorBG2) 32%, var(--System-ColorBG) 100%) var(--System-ColorBG); /* base background */ background-repeat: no-repeat; background-size: 100% 100%; } .product-card__content { padding: 8px 12px 16px; .product-card__title, .horizontal-product__title { font-size: var(--System-FontS); } .product-card__bottom { .swatches { gap: 8px; .color-swatch { width: 20px; height: 20px; } } .text-opacity { color: var(--System-ColorText3); font-size: var(--System-FontXS); } } } .badge { align-items: center; gap: 4px; } .quick-view__button, .flickity-page-dots { display: none; } .product-card__title, .horizontal-product__title { font-size: var(--System-FontM); } } } } } .media-card--card { display: none; } } } &.mega-menu__item--nav { flex: calc(75% - var(--System-Padding) / 2); max-width: 100%; width: 100%; &.mega-menu__item--full { .mega-menu__nav-item { width: calc((100% / 4) - ((var(--System-Padding) / 2) * 3 / 4)); max-width: calc((100% / 4) - ((var(--System-Padding) / 2) * 3 / 4)); flex: unset; flex-grow: 1; } } &.mega-menu__item--large { .mega-menu__nav { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; align-items: center; gap: 8px; li { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; /* width: auto; */ /* flex: auto; */ /* flex-grow: 1;*/ gap: 8px; border: 2px solid var(--System-ColorSep); /* background: var(--System-ColorBG2); */ border-radius: 100px; padding: 0; flex-grow: unset; width: unset; max-width: unset; overflow: hidden; padding: 4px 4px; .media { background: transparent; margin:0; img { aspect-ratio: 1 / 1; max-width: 32px; width: 100%; background: var(--System-ColorBG2); border-radius: 100px; } } .heading { background: transparent; margin: 0; padding-right: 12px; font-size: var(--System-FontM); } } } } .mega-menu__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; column-gap: var(--System-Gap); row-gap: var(--System-Gap); &>li { &>a { font-size: var(--System-FontXL); } } ul { margin-top: 4px; li { a { font-size: var(--System-FontM); color: var(--System-ColorText2); text-transform: capitalize; } } } } } .mega-menu__footer { &:before { display: none; } .link { border-top: 1px solid var(--System-ColorSep); padding-top: calc(var(--System-Padding) / 2); padding-bottom: 0; transition: all 0.32s ease; span { font-size: var(--System-FontL); color: var(--System-ColorText2); text-transform: capitalize; } &:hover, &:focus { span { color: var(--System-ColorText); } } } } } } } .overlay { position: absolute; top: 0; height: 100vh; z-index: -1; background: linear-gradient(to top, transparent 40%, var(--System-ColorBG2) 80%); -webkit-backdrop-filter: saturate(256%) blur(32px); backdrop-filter: saturate(256%) blur(32px); mask-image: linear-gradient(to top, transparent 25%, var(--System-ColorBG2) 50%); -webkit-mask-image: linear-gradient(to top, transparent 25%, var(--System-ColorBG2) 50%); } &.header-scrolled { .header { &::before { border-bottom: 1px solid var(--System-ColorSep); -webkit-backdrop-filter: saturate(256%) blur(64px); backdrop-filter: saturate(256%) blur(64px); background: rgb(255 255 255 / 64%); box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); } @media (prefers-color-scheme: dark) { &::before { background: rgb(0 0 0 / 64%); box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } } } .header__menu { .mega-menu__container, .dropdown__container { border: 1px solid var(--System-ColorText5); border-top: 0; } } } &.header-transparent { .header { position: unset; inset-block-start: unset; &:before { -webkit-backdrop-filter: saturate(256%) blur(64px); backdrop-filter: saturate(256%) blur(64px); background: rgb(255 255 255 / 64%); border-bottom: 1px solid var(--System-ColorText5); } @media (prefers-color-scheme: dark) { &::before { background: rgb(0 0 0 / 64%); } } } &.header-scrolled { .header { position: unset; inset-block-start: unset; } } } } body.header-transparent { .main-content { margin-top: calc(var(--header-height) * -1); } } body.has-dropdown-menu { .header-section { background: var(--System-ColorBG); &.header-scrolled { .header { &::before { background: var(--System-ColorBG); } @media (prefers-color-scheme: dark) { &::before { background: var(--System-ColorBG); border-bottom: none; } } } .header__menu { .mega-menu__container, .dropdown__container { background-color: var(--System-ColorBG); @media (prefers-color-scheme: dark) { background-color: var(--System-ColorBG); } } } } } } /*---------------------------------------------------------------------------------*/ /* Footer Structure --------------------------------------------------------------*/ /*---------------------------------------------------------------------------------*/ .footer-group { z-index: 0; position: relative; background: var(--System-ColorBG2); & > :first-child { background: var(--System-ColorBG2); .flickity-page-dot { &:before { background-color: transparent; box-shadow: 0 0 0 2px var(--System-ColorText2); } &.is-selected:before, &[aria-current="true"]:before { background-color: var(--System-ColorText); box-shadow: 0 0 0 2px var(--System-ColorText); } } } & > :last-child { background: var(--System-ColorBG2); .section:before { display: none; } } .logo-list { img { opacity: 0.64; @media (prefers-color-scheme: dark) { filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); } } } .text-with-icons { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: stretch; gap: var(--System-Gap); .flickity-viewport { height: unset !important; width: 100%; overflow: visible; .flickity-slider { position: relative; transform: unset !important; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: stretch; gap: var(--System-Gap); } } .flickity-page-dots { display: none !important; } .column { position: relative; inset: unset; transform: unset !important; background: var(--System-ColorBG); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: 18px !important; overflow: hidden; contain: paint; isolation: isolate; transform: translateZ(0); flex: auto; flex-grow: 1; align-items: center; gap: 8px; padding: 16px !important; width: calc((100% / 3) - var(--System-Padding)); min-width: 256px; flex-direction: column; cursor: auto; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } .column__icon { svg { width: 2rem; height: 2rem; } } .column__content { text-align: center; .column__title { font-size: var(--System-FontM); } .column__text { padding: 0; p { margin: 4px auto 0; font-size: var(--System-FontS); color: var(--System-ColorText2); display: block; } } } } } .footer { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; gap: var(--System-Gap); color: var(--System-ColorText); @media screen and (max-width: 768px) { flex-direction: column-reverse; gap: 32px; } & > .flex { padding: 0 !important; width: 100%; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; justify-content: space-between; @media screen and (max-width: 768px) { flex-direction: column; } .footer__logo { width: 100%; padding: 0; } .footer__logo:nth-of-type(1) { @media (prefers-color-scheme: dark) { display: none; } } .footer__logo:nth-of-type(2) { display: none; @media (prefers-color-scheme: dark) { display: block; } } .footer__accordions { gap: var(--System-Gap) !important; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; @media screen and (max-width: 768px) { gap: var(--System-Padding) !important; } .details { border: none; &.footer__item--text_d9YkeH { width: 100%; padding: 0; border-bottom: 1px solid var(--System-ColorSep); padding-bottom: var(--System-Padding); margin-bottom: var(--System-Gap); @media screen and (max-width: 768px) { margin-bottom: 0; } .details__summary { display: none; pointer-events: none; padding: 0; span { font-size: var(--System-Font2XL); } svg { display: none; } } &>* { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: flex-start; gap: var(--System-Gap); @media screen and (max-width: 768px) { flex-direction: column; } &>.half, &>.footer__newsletter { width: 100%; max-width: calc((100% / 2) - calc( var(--System-Padding) / 2 )); @media screen and (max-width: 768px) { max-width: 100%; } } .footer__newsletter { gap: 8px; .h3 { font-size: var(--System-Font2XL); } .rte { color: var(--System-ColorText2); font-size: var(--System-FontM); } } .footer_links { max-width: 100%; } .details__content { font-size: var(--System-FontM); color: var(--System-ColorText2); margin-top: 4px; padding: 0 !important; &:after { display: none; } @media screen and (max-width: 768px) { padding-bottom: var(--System-Padding); } } .heading { font-size: var(--System-FontL); display: block; } } } &:not(.footer__item--text_d9YkeH) { width: auto; /* flex: auto; flex-grow: 1; */ min-width: calc((100% / 4) - var(--System-Gap)); padding: 0; @media screen and (max-width: 768px) { min-width: 100%; border: none; } &:not(:last-child) { @media screen and (max-width: 768px) { border-bottom: 1px solid var(--System-ColorSep); } } .details__summary { padding-bottom: 0; @media screen and (max-width: 768px) { padding-top: 0; padding-bottom: var(--System-Padding); } .heading { font-size: var(--System-FontL); } } .details__content { padding: 16px 0 32px; color: var(--System-ColorText2); @media screen and (max-width: 768px) { padding-top: 0; } &:before, &:after { display: none; } ul { gap: 4px; } a { color: var(--System-ColorText2); font-size: var(--System-FontM); &:hover, &:focus { color: var(--System-ColorText); } } } } &[aria-expanded=true] { &:last-child { @media screen and (max-width: 768px) { .details__summary { padding-bottom: var(--System-Padding); } } } } } } .footer_links { width: 100%; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; @media screen and (max-width: 768px) { flex-direction: column-reverse; gap: 32px; padding-block: 16px; align-items: flex-start; margin-top: 0; } .localization { justify-content: inherit; align-items: flex-start; svg { position: relative; width: 32px; height: auto; } select { height: auto !important; padding: 0 !important; } } .footer__socials { align-self: inherit; flex-grow: 1; @media screen and (max-width: 768px) { width: 100%; } ul { flex-grow: 1; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--System-Gap); @media screen and (max-width: 768px) { justify-content: space-evenly; } li { flex-grow: 1; @media screen and (max-width: 768px) { flex-grow: 0; } a { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 8px; @media screen and (max-width: 768px) { justify-content: center; } svg { } span { clip: unset; border-width: unset; height: unset; margin: unset; overflow: unset; padding: unset; position: unset; white-space: unset; width: unset; @media screen and (max-width: 768px) { display: none; } } } } } } } } .footer__right { max-width: calc( 100% / 12 * 5 - calc(var(--System-Padding) / 2) + var(--System-Padding) ); border: none; border-left: 1px solid var(--System-ColorSep); padding-left: var(--System-Padding) !important; gap: 32px; @media screen and (max-width: 768px) { max-width: 100%; border: none; border-bottom: 1px solid var(--System-ColorSep); padding-left: 0 !important; padding-bottom: 32px !important; } .footer__newsletter { gap: 16px; } .footer__logo { margin: 0; } .footer__socials { align-self: flex-start; } } .footer__left { border: none; max-width: calc( 100% / 12 * 7 - calc(var(--System-Padding) / 2) - var(--System-Padding) ); @media screen and (max-width: 768px) { max-width: 100%; } } } .footer-overlay { opacity: 1; background-image: linear-gradient( to bottom, var(--System-ColorBG2), var(--System-ColorBG) ); inset-block-start: -2px; background: var(--System-ColorBG2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background: rgb(242 242 247 / 64%); @media (prefers-color-scheme: dark) { background: rgb(28 28 30 / 64%); } &:before { content: ""; position: absolute; bottom: 0; height: 100%; width: 100%; box-shadow: 0px 24px 42px -20px rgba(0, 0, 0, 0.32); @media (prefers-color-scheme: dark) { box-shadow: 0px 24px 42px -20px rgba(0, 0, 0, 0.64); } } } .footer-copyright { color: var(--System-ColorText); display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; gap: 32px; align-items: flex-start; align-content: flex-start; padding: var(--System-Padding) var(--System-Padding); margin-top: calc(var(--System-Padding) * -1 - 0px); @media screen and (max-width: 768px) { padding-top: 0; padding-bottom: calc(32px + var(--mobile-dock-height)); margin-top: 0; } .CopyRight { width: 100%; .CPLine { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--System-Gap); @media screen and (max-width: 768px) { align-items: flex-start; flex-direction: column; } &:last-child { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--System-ColorSep); @media screen and (max-width: 768px) { padding-top: 0; margin-top: 0; border-top: none; } } .CPCol { @media screen and (max-width: 768px) { flex-direction: column; align-items: center; width: 100%; gap: 16px !important; } } &.CPLinks { flex-direction: row-reverse; align-items: flex-end; @media screen and (max-width: 768px) { flex-direction: column-reverse; gap: 16px; .CPCol:first-child { padding-top: 32px; padding-bottom: 16px; border-top: 1px solid var(--System-ColorSep); } .CPCol:last-child { padding-top: 16px; border-top: 1px solid var(--System-ColorSep); } } } &.CPSigs { align-items: flex-start; @media screen and (max-width: 768px) { gap: 16px; } .CPCol { display: flex; flex-direction: column; flex-wrap: wrap; gap: 8px; } } .policy-links { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: 8px; li { a { font-size: var(--System-FontS); color: var(--System-ColorText2); &:hover, &:focus { color: var(--System-ColorText); } } &:not(:last-child) { border-right: 1px solid var(--System-ColorSep); padding-right: 8px; } } } .payment-icons { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; align-content: center; gap: 8px; @media screen and (max-width: 768px) { order: 1; } svg { width: auto !important; height: 16px; opacity: 0.64; transition: all 0.32s ease; &:hover, &:focus { opacity: 1; filter: unset; } } } .Currencies { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px; .Currency { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; padding: 0; border: none; img { width: 32px; height: 32px; border-radius: 100px; border: 1px solid var(--System-ColorSep); transition: all 0.5s ease; padding: 1px; object-fit: cover; object-position: center; display: inline; vertical-align: middle; border-color: var(--System-ColorText2); } p { display: flex; flex-direction: column; flex-wrap: wrap; gap: 2px; padding: 0; border: none; font-size: var(--System-FontS); transition: color 0.32s ease; color: var(--System-ColorText2); b { display: block; font-size: var(--System-FontS); line-height: var(--System-FontS); } span { display: block; letter-spacing: -.64px; font-size: var(--System-FontXS); line-height: var(--System-FontXS); letter-spacing: 0px; } } &.Current { img { border-color: var(--System-ColorBlue); box-shadow: 0 0 0 1px rgb(0 122 255 / 60%) !important; } p { color: var(--System-ColorText); } } &:hover, &:focus { img { border-color: var(--System-ColorBlue); box-shadow: 0 0 0 1px rgb(0 122 255 / 60%) !important; } p { color: var(--System-ColorBlue); } } &:not(:last-child) { border-right: 1px solid var(--System-ColorSep); padding-right: 8px; } } } .CPText { font-size: var(--System-FontXS); line-height: var(--System-FontXS); color: var(--System-ColorText2); display: flex; align-items: baseline; strong { opacity: 0.64; padding: 0 2px; vertical-align: middle; margin-top: -4px; font-size: var(--System-FontXS); line-height: var(--System-FontXS); color: var(--System-ColorText); display: inline-block; } @media screen and (max-width: 768px) { order: 2; } a { line-height: normal; } a:hover, a:focus { color: var(--System-ColorText); } } .MHDiSig { a { text-align: justify; text-align-last: center; p { font-size: 12px; line-height: 14px; letter-spacing: -0.5px; color: var(--System-ColorText2); white-space: nowrap; text-transform: uppercase; position: relative; left: 1px; } strong { color: var(--System-ColorText2); font-size: 20px; line-height: 20px; display: block; transition: all 0.32s ease; letter-spacing: -0.5px; white-space: nowrap; } &:hover, &:focus { strong { color: var(--System-ColorText); letter-spacing: -3px; font-size: 27px; } } } } } } } recently-viewed { z-index: 3; position: relative; } } .mobile-dock { -webkit-backdrop-filter: saturate(256%) blur(32px); backdrop-filter: saturate(256%) blur(32px); transform: translateY(0) !important; border-top: 1px solid var(--System-ColorSep); z-index: 99; padding: 16px; padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important; border-radius: 18px 18px 0 0; overflow: hidden; background: rgb(255 255 255 / 64%) !important; box-shadow: -2px -4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%) !important; box-shadow: -2px -4px 12px rgba(0, 0, 0, 0.32); } .dock__item { color: var(--System-ColorText); } cart-count { background: var(--System-ColorBrand); color: var(--System-ColorLight); padding: 2px 6px; border-radius: 100px; top: -10px !important; left: 14px; right: auto !important; font-size: var(--System-FontXS) !important; min-height: 16px; min-width: 20px; text-align: center; } } /*---------------------------------------------------------------------------------*/ /* Home Page Structure ------------------------------------------------------------*/ /*---------------------------------------------------------------------------------*/ .template-index { .main-content { &:first-child { slideshow-element { @media screen and (max-width: 768px) { overflow: hidden; } .flickity-viewport { overflow: visible; .flickity-slider { .banner { border-radius: 18px; margin: calc(var(--System-Padding) / 2) calc(var(--System-Padding) / 2) var(--System-Padding); max-width: calc(min(calc(100vw - var(--scrollbar-width, 0px) - var(--System-Padding) * 2), var(--System-PageWidth)) - var(--System-Padding)); .banner__overlay { border-radius: 0; backdrop-filter: saturate(128%) blur(64px); -webkit-backdrop-filter: saturate(128%) blur(64px); mask-image: linear-gradient(180deg,transparent 0%,black 50%); -webkit-mask-image: linear-gradient(180deg,transparent 32%,black 85%); } .banner__products { opacity: 0.5; .scrolled-images__main { inset: 32%; .scrolled-images__item { --tile-margin: var(--System-Gap); height: calc(var(--tileswrap-height) / 5 - var(--tile-margin) * 4 / 2); width: calc(var(--tileswrap-height) / 5 - var(--tile-margin) * 4 / 2); } } } } } } } slideshow-element + .page-width { inset: auto 0 0; .slideshow-content { padding: 32px 0 calc(var(--System-Padding) + 16px); max-width: calc(100% - 64px); margin: 0 auto; .slideshow-word { gap: var(--System-Padding); .banner__box { max-width: unset; .slideshow-icon { max-width: 80px; @media screen and (max-width: 568px) { max-width: 64px; } } .heading { margin: 0 auto; font-size: var(--System-Font4XL); } .subtitle { margin: 0; max-width: 100%; line-height: normal; font-size: var(--System-FontL) !important; line-height: normal; strong { color: var(--System-ColorText2); } } .description { font-size: var(--System-FontM) !important; margin: 0; line-height: normal; max-width: 100%; color: var(--System-ColorText2); @media screen and (max-width: 568px) { display: none; } } } } .slideshow-dots { margin-top: var(--System-Padding); @media screen and (max-width: 768px) { display: none; } .flickity-page-dots { margin: 0 auto; .flickity-page-dot { &.is-selected:before, &[aria-current=true]:before { background-color: var(--System-ColorText); } &:before { width: 8px; height: 8px; background-color: var(--System-ColorText2); box-shadow: 0 0 0 2px var(--System-ColorText); } } } } } } } } .featured-product { spinning-text { --font-size: 1 !important; --character-width: 1.25 !important; font-size: var(--System-FontM); right: 0; background: var(--System-ColorBrand); color: var(--System-ColorDark) !important; position: absolute; margin-right: -32px; margin-left: auto; margin-top: -32px; height: 96px; width: 96px; border-radius: 100px; color: var(--System-ColorText); border: 4px solid var(--System-ColorBG); overflow: hidden; contain: paint; isolation: isolate; transform: translateZ(0); box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } svg { width: var(--System-Padding); height: auto; } @media screen and (max-width: 768px) { --character-width: 1.25 !important; margin-right: auto; left: 0; margin-left: auto; margin-top: -32px; font-size: var(--System-FontS); height: 64px; width: 64px; } } } .reveal-testimonials { .testimonial { border-radius: 100px; color: var(--System-ColorText); border: 4px solid var(--System-ColorBG); border-radius: 18px; overflow: hidden; contain: paint; isolation: isolate; transform: translateZ(0); -webkit-backdrop-filter: saturate(256%) blur(32px); backdrop-filter: saturate(256%) blur(32px); background: rgb(255 255 255 / 32%); box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 32%); box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } } } } /*---------------------------------------------------------------------------------*/ /* All Collections, Designs Page Structure ----------------------------------------*/ /*---------------------------------------------------------------------------------*/ .template-list-collections { .collage { .collage__item { .media-card__content { color: rgb(var(--color-foreground)); .media-card__text { .heading { color: var(--color-foreground); } } } } } .button-wrapper, .title-wrapper { margin-bottom: var(--System-Padding); .title-head { .grid { gap: 16px; .heading { font-size: var(--System-FontL) !important; } .description { display: block; } } } } } .collection-designs { .main-content { & > :first-child { .banner { .page-width { .banner__box { .banner__title { position: unset; } } } } } } .media-card { .ViewAll { .media-card__content { justify-content: center !important; .media-card__text { gap: 8px; .button { text-align: center; display: inline-block; width: auto; margin: 16px auto 0; padding: 8px 16px; } } } } .media-card__link { .media-card__content { .media-card__text { text-align: center; } } } } } .CollectionChips { .grid.slider:not(.slider--desktop) { display: block; .card-grid { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; width: 100%; gap: 16px; .media-card { min-width: calc((100% / 3) - 16px); width: auto; flex-grow: 1; border-radius: 256px; border: 4px solid var(--System-ColorBG); @media (prefers-color-scheme: dark) { border: 4px solid var(--System-ColorSep); } .media-card__link { display: block; .media { position: absolute; width: 100%; height: 100%; inset: 0; &:after { backdrop-filter: unset; -webkit-backdrop-filter: unset; filter: unset; -webkit-filter: unset; mask-image: unset; -webkit-mask-image: unset; background: var(--System-ColorBG2); opacity: 0.32; opacity: .64; } img { aspect-ratio: initial; width: 250%; height: 250%; filter: saturate(256%) blur(64px); -webkit-filter: saturate(256%) blur(64px); --tx: 0%; --ty: 0%; transform: translate(var(--tx), var(--ty)); animation: moveX 2.5s ease-in-out infinite alternate, moveY 5s ease-in-out infinite alternate; will-change: transform; } } .media-card__content { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; height: 100%; position: relative; padding: 8px 16px; gap: 16px; img { max-width: 40px; margin: 0 auto; @media screen and (max-width: 428px) { max-width: 32px; } } .media-card__contentwrp { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; height: 100%; position: relative; flex-grow: 1; gap: 16px; .media-card__text { text-align: left; p { font-size: var(--System-FontS); span { font-size: var(--System-FontS); } } } .icon { display: inherit; } } } } } } } } @property --tx { syntax: ""; inherits: false; initial-value: 0%; } @property --ty { syntax: ""; inherits: false; initial-value: 0%; } @keyframes moveX { 0% { --tx: 0%; } 100% { --tx: 16%; } } @keyframes moveY { 0% { --ty: 0%; } 100% { --ty: 32%; } } /*---------------------------------------------------------------------------------*/ /* Collection Page Structure ------------------------------------------------------*/ /*---------------------------------------------------------------------------------*/ .template-collection { .main-content { &>:first-child { .banner { border: unset; border-radius: unset; overflow: visible; contain: unset; isolation: unset; transform: unset; background: var(--System-ColorBG2); box-shadow: unset; z-index: 1; height: auto; .banner__content { overflow: visible; .page-width { overflow: visible; } } .banner__overlay { backdrop-filter: saturate(128%) blur(64px); -webkit-backdrop-filter: saturate(128%) blur(64px); mask-image: linear-gradient(180deg,transparent 0%,black 50%); -webkit-mask-image: linear-gradient(180deg,transparent 0%,black 50%); } .banner__media { position: absolute; inset: 0; overflow: hidden; .media { background: var(--System-ColorBrand); svg { display: none; } } } .banner__content { position: relative; .banner__box { .rte { @media screen and (max-width: 568px) { display: block; text-align: justify; } } } } } .banner[class*="media"] { padding: calc(var(--header-height) + 64px) 0 96px; padding: calc(var(--header-height) + var(--System-Padding)) 0 calc(var(--System-Padding) * 2); } .relative.page-width { padding-top: 0; overflow: visible; .banner { border-radius: 0 0 18px 18px; overflow: unset; border: 2px solid var(--System-ColorBG2); border-top: 0; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } .banner__media, .banner__overlay { border-radius: 0 0 16px 16px; } } } .relative:not(.page-width) { .banner[class*="media"] { overflow: hidden; } .banner { .banner__overlay { mask-image: linear-gradient(0deg, transparent 0%, black 0%); -webkit-mask-image: linear-gradient(0deg, transparent 0%, black 0%); } } } } } .collection { display: flex; flex-direction: column; flex-wrap: wrap; align-content: stretch; align-items: stretch; justify-content: center; gap: 32px; .facet-sticky { transform: translateY( calc( ( var(--mobile-dock-height) * -1 ) - env(safe-area-inset-bottom) ) ) !important; bottom: var(--System-Padding); } .collection__topbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: center; justify-content: space-between; gap: 32px; .facet-wrapper { padding: 0; & > button { z-index: 3; } } #ProductCount { display: none; } .facet-sorting { gap: 8px; margin: 0; & > span { display: none; } .sort-by { &[open] { border-color: var(--System-ColorBG); height: calc(var(--facet-listbox-height) + var(--sp-10) + calc(clamp(var(--sp-4), 1.052vw, var(--sp-5)) * 4) + calc(var(--buttons-border-width) * 2)); box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } } .btn-text { .sort-close { background: var(--System-ColorBrand); height: 16px; width: 16px; } } &:hover { .btn-text { .sort-close { background: var(--System-ColorDark); } } } &[open] { .btn-text { color: var(--System-ColorLight) !important; .sort-close { background: var(--System-ColorDark) !important; height: var(--sp-10); width: var(--sp-10); svg { stroke: var(--System-ColorLight) !important; } } .sort-title { opacity: 1; } .sort-listbox input[type="radio"] { &:checked + label { opacity: 1; } & + label { opacity: 0.48; } } } } } } } .active-facets { margin-top: -16px; margin-bottom: 0; .removable-facet { max-height: 2rem; background: var(--System-ColorBG); color: var(--System-ColorText) !important; border: 4px solid var(--System-ColorSep); } } .collection__content { margin: 0 auto; #ProductGridContainer { gap: var(--System-Gap); } .pagination { .page.current { background: var(--System-ColorDark); color: var(--System-ColorLight); } } } } /* for product types and collections & Designs */ &.collection, &.collection-designs { .main-content { &>:first-child { .banner { .page-width { .banner__box { padding: 0; position: relative; .banner__title { position: unset; .marquee-wrp { position: absolute; transform: translateY(-50%); top: 50%; margin: auto; marquee-element { font-size: 256px; align-items: center; height: -webkit-fill-available; .marquee { white-space: pre; } } } } } } } } } } } .subcollections { .wrapper { justify-content: center; li { z-index: 0; &:hover { z-index: 2; } .subcollection { opacity: 1; .btn-icon { img { height: 32px; max-width: 32px; vertical-align: middle; @media (prefers-color-scheme: dark) { filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); } } } .btn-text { gap: 8px; &:before { --tw-absolute-y: calc( clamp(2rem, 1.5vw, 2.5rem) * -1 - 32px ); margin-left: 32px; -webkit-backdrop-filter: saturate( 256% ) blur(8px); backdrop-filter: saturate(256%) blur(8px); background: rgb(255 255 255 / 64%); border: 4px solid var(--System-ColorSep); } @media (prefers-color-scheme: dark) { &:before { background: rgb(0 0 0 / 64%); } } &:after { display: none; } p { span { display: block; font-size: var(--System-FontS); color: var(--System-ColorText2); position: relative; top: -8px; margin-bottom: -8px; text-align: left; } } } .btn-reveal { --tw-width: clamp(96px, 6vw, 192px); } &.no-thumbnail { & .btn-text { &:before { --tw-absolute-y: calc(clamp(2rem, 1.5vw, 2.5rem) * -1 - 16px); margin-left: 0; } } } &:hover { .btn-icon { visibility: hidden; } } } &.parent { .subcollection { --motion-translateY: 0px !important; --motion-translateX: 0px !important; } } } } } .facet-drawer { .input, .select, .textarea { background: var(--System-ColorBG2) !important; } .facet-form { border-bottom: unset; .details { .swatches { .color-swatch { border: 4px solid var(--System-ColorSep); width: 48px; height: 48px; &:hover { border-color: var(--System-ColorBrand); } &:before, &:after { display: none; } } &.swatches--variant { li { .color-swatch { width: 85px; height: 85px; border-radius: 18px; } } } :checked+.color-swatch { border-color: var(--System-ColorBrand); } } .select { background: var(--System-ColorBG2) !important; } .switch { background: var(--System-ColorBG2); --active: var(--System-ColorBrand); --active-inner: var(--System-ColorDark); --border-hover: transparent; border-color: var(--System-ColorBG2) !important; border-width: 4px; box-shadow: unset !important; border-radius: 100px; width: 64px; height: 32px; &:after { width: 20px; height: 20px; inset-inline-start: 2px; inset-block-start: 2px; background: var(--System-ColorDark); opacity: 0.64; } &:checked { --x: 32px; background: var(--System-ColorBrand); &:after { opacity: 1; background: var(--System-ColorLight); } } @media (prefers-color-scheme: dark) { &:after { background: var(--System-ColorText4); } } } .price-range { .range-wrapper { background: linear-gradient(to var(--transform-origin-end), var(--System-ColorBG2) var(--range-min), var(--System-ColorBrand) var(--range-min), var(--System-ColorBrand) var(--range-max), var(--System-ColorBG2) var(--range-max)); } .field { input { background-color: var(--System-ColorBG2) !important; } } } &:not(:last-child) { border-bottom: 1px solid var(--System-ColorSep); } .text-opacity { color: var(--System-ColorText2); } } } } .grid.slider { display: grid; .card-grid { .media-card { border: 4px solid var(--System-ColorBG); @media (prefers-color-scheme: dark) { border: 4px solid var(--System-ColorSep); } .media-card__link { display: block; .media { position: absolute; width: 100%; height: 100%; inset: 0; &:after { backdrop-filter: unset; -webkit-backdrop-filter: unset; filter: unset; -webkit-filter: unset; mask-image: unset; -webkit-mask-image: unset; background: var(--System-ColorBG); opacity: 0.32; } img, svg { aspect-ratio: initial; width: 100%; height: 100%; filter: saturate(256%) blur(64px); -webkit-filter: saturate(256%) blur(64px); --tx: 0%; --ty: 0%; transform: translate(var(--tx), var(--ty)); animation: moveX 2.5s ease-in-out infinite alternate, moveY 5s ease-in-out infinite alternate; will-change: transform; } } .media-card__content { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; height: 100%; position: relative; gap: 16px; &> img { max-width: 128px; height: auto; margin: 32px auto; } .media-card__contentwrp { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; align-items: flex-end; justify-content: flex-start; position: relative; gap: 16px; width: 100%; .media-card__text { p { font-size: var(--System-FontS) !important; span { font-size: var(--System-FontL) !important; .count { inset-block-start: -8px; } } } } .icon { display: none; } } } } } } } /*---------------------------------------------------------------------------------*/ /* Custom Collection Page Structure -----------------------------------------------*/ /* like ByFit! which has Collection-* in their template name ----------------------*/ /*---------------------------------------------------------------------------------* body[class*=" collection-by"] { .main-content { &>:first-child { position: sticky; top: calc(var(--header-height) * -1); } .shopify-section { background: var(--System-ColorBG2); &:nth-child(2) { margin-top: 64px; background: var(--System-ColorBG2); border-radius: 0 !important; &:before { content: ""; position: absolute; top: -64px; height: 100%; width: 100%; -webkit-backdrop-filter: saturate(128%) blur(32px); backdrop-filter: saturate(128%) blur(32px); background: rgb(242 242 247 / 64%); } @media (prefers-color-scheme: dark) { &:before { background: rgb(28 28 30 / 64%); } } &>.section { padding-top: 0; margin-top: -32px; } &.collection-section { &>.section { margin-top: 0; padding-top: var(--section-padding-top); } .collection { padding-top: 0; margin-top: -88px; } } } } } &.header-scrolled { .main-content { .shopify-section { &:nth-child(2) { &:before { border-top: 1px solid var(--System-ColorSep); box-shadow: 0px -24px 42px -20px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); box-shadow: 0px -24px 42px -20px rgba(0, 0, 0, 0.64); } } } } } } } /*---------------------------------------------------------------------------------*/ /* Product Page Structure ---------------------------------------------------------*/ /*---------------------------------------------------------------------------------*/ .template-product { .page-container { /* Prevent Sticky column of gallery and info to becom stuck */ overflow: unset; .main-content { .shopify-section:first-of-type { .page-width { /* Prevent Sticky column of gallery and info to becom stuck */ overflow: unset; } } } } } .template-index, .template-product, .drawer.quick-view { .product { display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: var(--System-Gap); @media screen and (max-width: 568px) { flex-direction: column; &>* { width: 100% !important; max-width: 100% !important; } } .product__info { max-width: 320px; width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; gap: 32px; align-items: stretch; @media screen and (max-width: 768px) { max-width: 256px; } & > * { margin: 0 auto !important; width: 100%; gap: 0; } .jdgm-preview-badge { width: max-content; .jdgm-prev-badge { display: grid !important; grid-template-columns: repeat(2, max-content); align-items: center; justify-items: start; justify-content: start; gap: 0px 8px; .jdgm-prev-badge__stars { width: auto; .jdgm-star { font-size: var(--System-Font2XL); color: var(--System-ColorOrange); } } .jdgm-prev-badge__text { width: auto; color: var(--System-ColorText2); font-size: var(--System-FontM); transition: all 0.64s ease; &:hover, &:focus { color: var(--System-ColorText) !important; } } } .jdgm-qa-badge { .jdgm-qa-badge__icon { font-size: var(--System-Font2XL); color: var(--System-ColorText2) !important; padding-right: 8px; transition: all 0.64s ease; } .jdgm-qa-badge__text { color: var(--System-ColorText2); font-size: var(--System-FontM); transition: all 0.64s ease; } &:hover, &:focus { .jdgm-qa-badge__text { color: var(--System-ColorText) !important; } .jdgm-qa-badge__icon { color: var(--System-ColorBlue) !important; } } } } .badges { margin: 0 0 -32px !important; .badge { font-size: var(--System-FontS); color: var(--System-ColorGray); img { display: none; } &.basics { &:before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--System-ColorBrand); background: var(--System-ColorGray2); } } &.premium { &:before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--System-ColorBrand); rotate: -45deg; background: var(--System-ColorOrange); } } &.supreme { &:before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--System-ColorBrand); border-radius: 100%; background: var(--System-ColorOrange); background: var(--System-ColorBrand); } } } } .product__vendor { margin: 0 0 -32px !important; font-size: var(--System-FontS); & > a { color: var(--System-ColorText2); &:hover { color: var(--System-ColorText); } } & > span { color: var(--System-ColorText2); } } .product__rating { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; .rating { span { &:before { background: linear-gradient( calc(90deg * var(--transform-logical)), var(--System-ColorOrange) var(--percent), var(--System-ColorText2) var(--percent) ); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; font-size: var(--System-FontXL); } } } .rating-text { color: var(--System-ColorText2); } .rating-count { color: var(--System-ColorText2); padding: 0; margin-left: -4px; &:before { display: inline; content: "-"; margin-right: 0; } } } .product__title { margin: 0 0 -24px !important; .heading { font-size: var(--System-Font3XL); } } .variant-picker { gap: 32px; .form__label { font-size: var(--System-FontM); .flex { align-items: center; span { font-size: var(--System-FontL); line-height: var(--System-FontM); vertical-align: middle; display: block; } } } .swatches { gap: var(--System-Gap); li { .color-swatch { text-align: center; border: 4px solid var(--System-ColorBG); width: 48px; height: 48px; overflow: hidden; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } .tooltip { display: none; background-color: var(--System-ColorBG); color: var(--System-ColorText); height: 22px; padding: 0px 10px; &:after { border-color: var(--System-ColorBG) transparent; } } } .label-swatch { text-align: center; width: 100%; padding: 16px; background: var(--System-ColorBG); color: var(--System-ColorText); border: 4px solid transparent; border-radius: 18px; overflow: hidden; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } &:after { display: none; } } input:checked + .color-swatch, input:checked + .label-swatch { border: 4px solid var(--System-ColorBrand); &:after { box-shadow: unset; } &.basics { border-color: var(--System-ColorGray2); } &.premium { border-color: var(--System-ColorOrange); } &.supreme { border-color: var(--System-ColorBrand); } } input:is([type="checkbox"], [type="radio"]):is( :disabled, .disabled ):checked + .color-swatch, input:is([type="checkbox"], [type="radio"]):is( :disabled, .disabled ):checked + .label-swatch { border: 4px solid var(--System-ColorSep); } input:is([type="checkbox"], [type="radio"]):is( :disabled, .disabled ) + .color-swatch, input:is([type="checkbox"], [type="radio"]):is( :disabled, .disabled ) + .label-swatch { opacity: 0.64; color: var(--System-ColorText3); &:after { opacity: 0.64; box-shadow: unset; background: var(--System-ColorBG); height: 100%; width: 100%; inset: 0; border-radius: unset; } &:before { opacity: 0.64; background: linear-gradient( to bottom right, transparent calc(50% - 2px), var(--System-ColorDark) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px) ); z-index: 0; height: 100%; display: none; } } } } .variant-input-wrapper:not([data-option-slug$="color"]):not([data-option-slug="frame"]) { .swatches { li { flex: auto; flex-grow: 1; min-width: calc( (100% / 2) - calc(var(--System-Padding) / 2) ); } } } .variant-input-wrapper[data-option-slug="badge"] { .label-swatch { height: 100%; text-align: left; border-radius: 100px; padding: 8px 12px; .LabelWrp { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; img { width: auto; height: 24px; display: none; } .TitleWrp { display: inline-flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 4px; flex-grow: 1; p { font-size: var(--System-FontM); text-align: left; display: block; width: 100%; } span { font-size: var(--System-FontS); color: var(--System-ColorText2); text-align: left; display: block; width: 100%; font-size: 12px; line-height: 12px; font-weight: 600; } } } &.basics { .LabelWrp:before { content: ""; display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: var(--System-ColorBrand); background: var(--System-ColorGray2); } } &.premium { .LabelWrp:before { content: ""; display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: var(--System-ColorBrand); rotate: -45deg; background: var(--System-ColorOrange); } } &.supreme { .LabelWrp:before { content: ""; display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: var(--System-ColorBrand); border-radius: 100%; background: var(--System-ColorOrange); background: var(--System-ColorBrand); } } } } } .product__inventory { progress-bar { background: var(--System-ColorBG); } } .product__price { .price { .price__regular { font-size: var(--System-Font3XL); } &.price--on-sale { .price__sale { font-size: var(--System-Font2XL); } } } } .product-countdown { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: stretch; justify-content: flex-start; gap: 16px; padding: 0; border-radius: 100px; max-width: 320px; margin-left: 0 !important; margin-bottom: -16px !important; border: 1px solid var(--System-ColorBrand); background: var(--System-ColorBrand); background: rgb(204 255 0 / 32%); border: 1px solid var(--System-ColorOrange); background: var(--System-ColorOrange); background: rgb(255 149 0 / 32%); & > div { color: var(--System-ColorLight); background: var(--System-ColorBrand); background: var(--System-ColorOrange); border-radius: 100px; height: auto; padding: 8px 16px 8px 8px; gap: 8px; svg { width: 32px; height: auto; display: block; stroke-width: 2px; } div { gap: 4px; p { color: var(--System-ColorLight); font-size: var(--System-FontS); white-space: nowrap; } } } .countdown__timer { margin: auto; color: var(--System-ColorText); padding: 8px 24px 8px 8px; .countdown__item { background: transparent; padding: 0; p { font-size: var(--System-FontL); &:after { color: inherit; } } span { font-size: var(--System-FontS); } &:nth-child(3) p:after, &:nth-child(4), &:nth-child(5) { display: none; } } } } .product__accordion { background: var(--System-ColorBG); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: 18px; overflow: hidden; padding: 0; .details__summary { padding: 16px 16px; } .details__content { padding: 16px 16px; gap: 16px; .product-bundle__info { padding: 0; display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; gap: 0px 8px; align-items: start; background: transparent; &:not(:last-child) { padding-bottom: 16px; border-bottom: 1px solid var(--System-ColorSep); border-radius: 0; } .checkbox { grid-column: 3; grid-row: 1 / span 2; background: var(--System-ColorBG2); margin-left: auto; } .horizontal-product__media { grid-column: 1; grid-row: 1 / span 2; width: 48px; border-radius: 8px; border: 1px solid var(--System-ColorSep); background: var(--System-ColorBG2); } .horizontal-product__details { grid-column: 2; grid-row: 1; .horizontal-product__title { color: var(--System-ColorText); font-size: var(--System-FontS); /* -webkit-line-clamp: 1; visibility: visible; -webkit-box-orient: vertical; display: -webkit-inline-box; overflow: hidden; */ } .text-xs { color: var(--System-ColorText2); font-size: var(--System-FontS); display: none; } } .horizontal-product__quantity { grid-column: 2; grid-row: 2; margin: 0; .price { display: block; .price__regular { color: var(--System-ColorOrange); font-size: var(--System-FontS); display: inline-block; vertical-align: middle; } .price__sale { font-size: var(--System-FontS); vertical-align: middle; display: inline-block; } } } } } } product-complementary { .horizontal-product { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; gap: 8px; align-items: start; margin: 16px auto 0; .media { max-width: 48px; border-radius: 8px; border: 1px solid var(--System-ColorSep); } .horizontal-product__details { .horizontal-product__title { color: var(--System-ColorText); font-size: var(--System-FontM); /* -webkit-line-clamp: 1; visibility: visible; -webkit-box-orient: vertical; display: -webkit-inline-box; overflow: hidden; */ } .price { flex-direction: row; .price__regular { color: var(--System-ColorText); font-size: var(--System-FontM); } .price__sale { font-size: var(--System-FontM); } } } .horizontal-product__quantity { .button { padding: 0; width: 32px; height: 32px; .btn-text { width: auto; .icon { width: 16px; height: 16px; stroke-width: 1px; } .hidden { display: none !important } } } } } } .product-form-wrapper { @media screen and (max-width: 768px) { margin-bottom: 16px !important; } .product-form { display: block; .product-form__buttons { gap: 16px; .buy-buttons { flex-wrap: wrap; align-items: center; gap: 10px 0; .quantity { border: none; } .button--fixed { min-width: unset; font-size: var(--System-FontL); text-transform: capitalize; } } #ge-personalize { cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font-size: var(--System-FontM); text-transform: uppercase; padding: 22px 32px; border-radius: 100px; max-height: 3.75rem; height: auto; -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); background: rgb(255 255 255 / 64%); color: var(--System-ColorText) !important; border: 4px solid var(--System-ColorSep); position: relative; overflow: hidden; transition: color 0.64s ease 0.32s, border-color 0.64s ease 0.32s; gap: 16px; padding: 12px 20px; text-transform: capitalize; border: 4px solid var(--System-ColorSep) !important; @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%); } &:before, &:after { content: ""; display: block; background-color: var( --System-ColorBrand ) !important; display: block; border-radius: 50%; width: 150%; height: 200%; inset-block-start: -50%; inset-inline-start: -25%; position: absolute; transition: transform 0.64s cubic-bezier(0.3, 1, 0.3, 1); z-index: -1; } &:before { transform: translateY(86%); } &:after { transform: translateY(-76%); transition-delay: 0.16s; border: none; } &:hover:before, &:hover::after { transform: translateY(0%); } &:focus { box-shadow: unset; } &:hover, &.bg-button-background { color: var(--System-ColorDark) !important; border-color: var(--System-ColorBG); transition: color 0.64s ease 0s, border-color 0.64s ease 0s; opacity: 1; box-shadow: unset; } &.bg-button-background { background-color: var( --System-ColorBrand ) !important; } } .shopify-payment-button__more-options { margin-top: 16px !important; } } } } .DesignWrp { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 16px; &>img { margin: 0; } .DesignWrp-Text { strong { font-size: var(--System-FontM); display: block; color: var(--System-ColorText); } p { font-size: var(--System-FontS); color: var(--System-ColorText2); margin: 4px auto 0; display: block; } a { font-size: var(--System-FontS); color: var(--System-ColorBlue); } } } .help-desk { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: flex-start; gap: 16px; order: 420; padding-top: 32px; border-top: 1px solid var(--System-ColorSep); @media screen and (max-width: 768px) { padding-top: 0; border-top: none; } img, svg { stroke-width: 1px; width: 64px; height: 40px; display: block; margin: 0; object-fit: contain; .fill { fill: var(--System-ColorText3); } } .help-desk__text { strong { font-size: var(--System-FontM); display: block; } p { font-size: var(--System-FontS); color: var(--System-ColorText2); margin-top: 2px; display: block; line-height: 1.25; } a { font-size: var(--System-FontS); color: var(--System-ColorBlue); } } } .share-product { order: 421; &>.sm\:hidden { display: none !important; } .social-sharing-wrp { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: flex-start; gap: 16px; justify-content: space-between; p { font-size: var(--System-FontM); display: block; } .social-sharing { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: center; gap: 16px; justify-content: space-between; } } } .product__highlights, .product-services { display: none; @media screen and (max-width: 568px) { display: flex; margin-top: -16px !important; } } } .product__gallery-container { max-width: calc(100% - 320px - var(--System-Padding)); width: 100%; gap: var(--System-Gap); display: flex; flex-direction: row; flex-wrap: wrap; @media screen and (max-width: 768px) { max-width: calc(100% - 256px - var(--System-Padding)); } .product__gallery { flex-grow: 1; .slider { padding: var(--System-Padding); margin: calc(var(--System-Padding) * -1); width: calc(100% + var(--System-Padding) * 2); .product__media-list { gap: var(--System-Gap); padding: 0; display: grid; @media screen and (max-width: 568px) { display: flex; } .product__media { background: radial-gradient(circle at 50% 164%, var(--System-ColorBG2) 32%, var(--System-ColorBG) 64%); background: radial-gradient(circle at -20% 50%, var(--System-ColorBG2) 32%, transparent 64%), /* left glow */ radial-gradient(circle at 120% 50%, var(--System-ColorBG2) 32%, transparent 64%), /* right glow */ var(--System-ColorBG); /* base background */ background: radial-gradient(circle at 50% 120%, var(--System-ColorBG2) 32%, transparent 64%), /* bottom glow */ radial-gradient(circle at 50% -20%, var(--System-ColorBG2) 32%, transparent 64%), /* top glow */ var(--System-ColorBG); /* base background */ background: radial-gradient(circle at 50% 50%, var(--System-ColorBG2) 48%, var(--System-ColorBG) 128%), var(--System-ColorBG); background: radial-gradient(circle at 50% 50%, var(--System-ColorBG2) 32%, var(--System-ColorBG) 100%), radial-gradient(circle at 50% 36%, var(--System-ColorBG2) 32%, var(--System-ColorBG) 100%), var(--System-ColorBG); /* base background */ background-repeat: no-repeat; background-size: 100% 100%; grid-column: span 1; &.full-wide { grid-column: span 2 !important; } width: 100%; @media screen and (max-width: 568px) { width: calc(100% - 32px); scroll-snap-align: center; } button { width: 100%; height: 100%; inset: 0; border-radius: 0; background: transparent; backdrop-filter: unset; opacity: 0; @media screen and (max-width: 568px) { /* pointer-events: auto; width: 32px; height: 32px; inset: unset; inset-inline-end: 8px; inset-block-start: 8px; color: var(--System-ColorText); border-radius: 100px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--System-ColorSep); background: rgb(255 255 255 / 64%); @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%); } */ } } } } } .product__thumbnails { display: none; @media screen and (max-width: 568px) { display: grid; } .product__thumbnail { &[aria-current=true]:before { border: 4px solid var(--System-ColorText2); box-shadow: unset; background: var(--System-ColorText2); width: 16px; height: 16px; } &:before { width: 8px; height: 8px; background: var(--System-ColorText3); } } } } .product__highlights, .product-services { display: flex; @media screen and (max-width: 568px) { display: none !important; } } } .product__highlights { padding: 0; margin: 0; border: none; background: transparent; & > p { display: none; } .product-card__spec { padding: var(--System-Padding); margin: calc(var(--System-Padding) * -1); .product-card__icons { gap: 16px; padding: var(--System-Padding); margin: calc(var(--System-Padding) * -1); flex-wrap: wrap; .product-card__icon { background: var(--System-ColorBG); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: 18px; overflow: hidden; contain: paint; isolation: isolate; transform: translateZ(0); flex: auto; flex-grow: 1; width: auto; padding: 16px; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } & > .flex { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: center; justify-content: center; } figure { margin: auto 0; @media (prefers-color-scheme: dark) { filter: brightness(0) invert(1); -webkit-filter: brightness(1) invert(1); } } .info { color: var(--System-ColorText2); font-size: var(--System-FontM); gap: 0; p { color: var(--System-ColorText2); font-size: var(--System-FontM); } } } } } } .product-services { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; gap: 16px; flex-grow: 1; min-width: calc(50% - calc(var(--System-Padding) / 2) / 2); .product__text { height: 100%; padding: 16px; flex: auto; flex-grow: 1; min-width: calc((100% / 2) - 8px); background: var(--System-ColorBG); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: 18px; overflow: hidden; contain: paint; isolation: isolate; transform: translateZ(0); box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } .product__text-inner { padding: 0; .icon { min-width: 16px; height: auto; } strong { color: var(--System-ColorText2); display: block; font-size: var(--System-FontM); line-height: normal; } p { font-size: var(--System-FontS); color: var(--System-ColorText2); display: block; letter-spacing: -0.25px; } } } } } .jdgm-review-widget { .jm-review-widget { padding: 0; .jm-review-widget__header-and-body { gap: 0; .jm-review-widget__header { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; gap: var(--System-Gap); &>* { margin: 0 !important; order: 10; } .jm-histogram, .jm-action-buttons { margin-top: 0; background: var(--System-ColorBG); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: 18px; padding: var(--System-Padding); overflow: hidden; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } } .jm-review-widget-header__summary-section { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: center; width: 100%; gap: var(--System-Gap); .jm-review-widget-header__title-and-rating { max-width: min( max-content, calc(100% / 2 - var(--System-Gap)) ); .jm-review-widget-header__average-rating-display { width: 100%; .jm-average-rating-display { padding: 0; width: 100%; .jm-cluster { width: fit-content; } .jm-average-rating-display__content { display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; justify-content: center; margin: 0; .jm-star-rating { .jm-cluster { &>* { display: flex !important; flex-direction: row; align-items: center; flex-wrap: nowrap; justify-content: center; gap: 4px; .jm-star-rating__font-icon { color: var(--System-ColorOrange) !important; font-size: 24px !important; filter: drop-shadow(2px 4px 12px rgba(0, 0, 0, 0.16)); text-shadow: 0 0 1px rgba(0, 0, 0, 0.32); &:nth-child(2), &:nth-child(4) { /* font-size: 48px !important; */ } &:nth-child(3) { /* font-size: 64px !important; */ } } } } } .jm-cluster { margin-top: 0; align-items: flex-start; p { color: var(--System-ColorText2) !important; font-size: var(--System-FontM); font-family: var(--font-body-family); &:first-child { color: var(--System-ColorText) !important; font-size: var(--System-Font3XL); font-family: var(--font-heading-family); } } } } } } } } .jm-review-widget-header__main-content { order: 2; display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-content: center; justify-content: center; align-items: stretch; gap: var(--System-Gap); margin: 0; width: 100%; .jm-histogram, .jm-action-buttons { flex-grow: 1; max-width: calc(100% / 2 - 8px); --cluster-justify: center !important; --cluster-align: center !important; @media screen and (max-width: 768px) { max-width: 100%; } } .jm-histogram { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--System-Gap); .jm-stack { display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: stretch; gap: 4px; margin: 0; .jm-histogram-row { width: 100%; margin-top: 0; .jm-star-rating { .jm-cluster { &>* { display: flex !important; flex-direction: row; align-items: center; flex-wrap: nowrap; justify-content: center; gap: 0px; .jm-star-rating__font-icon { color: var(--System-ColorOrange) !important; font-size: 18px !important; filter: drop-shadow(2px 4px 12px rgba(0, 0, 0, 0.16)); text-shadow: 0 0 1px rgba(0, 0, 0, 0.32); } } } } .jm-progress-bar { background: var(--System-ColorBG2); border: 1px solid var(--System-ColorSep); height: 16px; margin: 0; border-radius: 100px; @media screen and (max-width: 768px) { height: 12px; } .jm-progress-bar__fill { background-color: var(--System-ColorOrange); } } .jm-histogram-row__frequency { color: var(--System-ColorText2); font-size: var(--System-FontXL); font-family: var(--font-heading-family); text-align: center; min-width: unset; width: 16px; } } } } .jm-action-buttons { display: flex; align-items: center; flex-direction: column; flex-wrap: nowrap; align-content: center; gap: var(--System-Gap); @media screen and (max-width: 768px) { padding-block: 32px; } .jm-stack { text-align: center; .jm-button--primary, .jm-button--secondary { cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; line-height: 1rem; font-size: clamp(0.875rem, 0.8115rem + 0.1587vw, 1.0rem); font-weight: 500; padding: 22px 32px; border-radius: 100px; max-height: 3.75rem; height: auto; -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); background: rgb(255 255 255 / 64%); color: var(--System-ColorText) !important; border: 4px solid var(--System-ColorSep); position: relative; overflow: hidden; min-width: unset; font-family: var(--font-heading-family) !important; font-size: var(--System-FontXL); transition: color 0.16s ease 0.32s, border-color 0.14s ease 0.32s; @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%); } &:before, &:after { content:""; display: block; background-color: var(--System-ColorBrand) !important; display: block; border-radius: 50%; width: 150%; height: 200%; inset-block-start: -50%; inset-inline-start: -25%; position: absolute; transition: transform 0.64s cubic-bezier(0.3, 1, 0.3, 1); z-index: -1; } &:before { transform: translateY(86%); } &:after { transform: translateY(-76%); transition-delay: .16s; } &:disabled:before, &:disabled:after, &:hover:before, &:hover:after { transform: translateY(0%); } &:disabled:before, &:focus:before { transform: translateY(0%); } &:disabled, &:hover, &:focus { color: var(--System-ColorLight) !important; border-color: var(--System-ColorBG); transition: color 0.16s ease 0s, border-color 0.16s ease 0s; opacity: 1; box-shadow: unset; border: 4px solid var(--System-ColorBlue); svg { color: var(--System-ColorText2); } } } .jm-button--secondary { background: transparent; border-radius: 0; border: none; color: var(--System-ColorText2) !important; font-family: var(--font-body-family) !important; font-size: var(--System-FontXL); font-weight: bold !important; margin: 22px auto 0; width: auto; padding: 0; overflow: visible; &:before, &:after { display: none; } &:disabled, &:hover, &:focus { color: var(--System-ColorBlue) !important; border: none; } } } } } .jm-media-preview { order: 1; margin: 0 auto; padding: 0; border-width: 4px; border-color: var(--System-ColorBG); min-width: auto !important; max-width: none !important; width: fit-content !important; width: 100% !important; @media screen and (max-width: 768px) { } .jm-media-preview--expanded { } .jm-media-grid { padding: 0 !important; color: var(--System-ColorText); height: auto; overflow: visible; .jm-media-grid__arrow { display: none !important; width: 48px; height: 48px !important; max-width: unset !important; padding: 0; cursor: pointer; display: inline-flex; align-items: stretch; justify-content: center; gap: 0; overflow: hidden; padding: 0; border-radius: 100px; -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); background: rgb(255 255 255 / 64%); border: 4px solid var(--System-ColorSep); overflow: hidden ; outline: none; min-width: unset; font-family: var(--font-heading-family) !important; font-size: var(--System-FontM); color: var(--System-ColorText) !important; z-index: 9; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); transition: color 0.64s ease 0.32s, border-color 0.64s ease 0.32s, opacity 0.64s ease;; @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); background: rgb(0 0 0 / 64%); } &.jm-media-grid__arrow--next { right: -4px; border-right: 0 !important; border-radius: 100px 0 0 100px; } &.jm-media-grid__arrow--prev { left: -4px; border-left: 0 !important; border-radius: 0 100px 100px 0; } svg { width: 24px; height: auto; margin: 0 auto; } span { margin-right: 4px; border-color: color-mix(in srgb, var(--System-ColorLight) 40%, transparent); border-top-color: var(--System-ColorLight); } &:before, &:after { content:""; display: block; background-color: var(--System-ColorBrand) !important; display: block; border-radius: 50%; width: 150%; height: 200%; inset-block-start: -50%; inset-inline-start: -25%; position: absolute; transition: transform 0.64s cubic-bezier(0.3, 1, 0.3, 1); z-index: -1; } &:before { transform: translateY(86%); } &:after { transform: translateY(-76%); transition-delay: .16s; } &:hover:before, &:hover:after { transform: translateY(0%); } &:focus:before { transform: translateY(0%); } &:hover, &:focus { color: var(--System-ColorLight) !important; border-color: var(--System-ColorBG); transition: color 0.64s ease 0s, border-color 0.64s ease 0s; opacity: 1; box-shadow: unset; border: 4px solid var(--System-ColorBlue); } &:disabled { opacity: 0.3; } } .jm-media-grid__container { padding: 0 !important; overflow: visible; gap: 0; .jm-media-grid__item { overflow: hidden; outline: 0; border-radius: 18px !important; border: 4px solid var(--System-ColoSep); border: 4px solid var(--System-ColorBG); width: 128px; height: 128px; margin: 0 -32px; z-index: 1; transition: all 0.64s ease; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } @media screen and (max-width: 768px) { width: 96px; height: 96px; margin: 0 -24px; } display: none; &:nth-last-child(-n + 5) { display: block; } &:last-child { &:before, &:after { content: ""; position: absolute; inset: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; box-sizing: border-box; z-index: 2; border-radius: 0; } &:before { background: var(--System-ColorBG); opacity: 0.8; } &:after { content: "+"; font-family: var(--font-body-family); font-size: 52px; font-weight: 600; line-height: 1; inset: 0; margin: auto; height: 64px; top: -16px; } } .jm-media-grid__image-container { transition: all 0.32s ease; } &:hover, &:focus { &+.jm-media-grid__item { margin-left: 16px; transition: all 0.64s ease; transition-delay: .16s; @media screen and (max-width: 768px) { margin-left: 8px; } } .jm-media-grid__image-container { transform: scale(1.16); transition: all 0.32s ease; } } } } } .jm-expanded-media-grid__container { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: center; justify-content: center; gap: 0; outline: 0; .jm-expanded-media-grid__item { overflow: hidden; outline: 0; border-radius: 18px !important; border: 4px solid var(--System-ColoSep); border: 4px solid var(--System-ColorBG); width: 128px; height: 128px; margin: 0 -22px; z-index: 1; transition: all 0.64s ease; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } .jm-expanded-media-grid__image-container { transition: all 0.32s ease; } .jm-expanded-media-grid__overlay { background: var(--System-ColorBG); opacity: 0.8; border-radius: 0; .jm-expanded-media-grid__overlay-icon-container { background: transparent; padding: 0; svg { color: var(--System-ColorText); width: 32px; height: auto; } } } &:hover { transition: all 0.64s ease; &+.jm-expanded-media-grid__item { margin-left: 16px; transition: all 0.32s ease; } .jm-expanded-media-grid__image-container { transform: scale(1.16); transition: all 0.32s ease; transition-delay: .32s; } } } } } .jm-review-widget-header__filters-wrapper { order: 3; display: none; .jm-stack { width: auto; } } .jm-center { order: 4; } .jm-filter-panel { padding: 0; display: flex; flex-direction: row-reverse; justify-content: space-between; flex-wrap: wrap; align-content: center; align-items: center; gap: var(--System-Gap); border: none; margin-top: calc(var(--System-Gap) * -1) !important; margin-bottom: var(--System-Gap) !important; @media screen and (max-width: 568px) { flex-direction: column; align-content: flex-start; align-items: flex-start; gap: var(--System-Gap); } &>.jm-cluster { p { display: none; } .jm-filter-panel__clear-btn { font-family: var(--font-heading-family); cursor: pointer; position: relative; font-size: var(--System-FontS); font-weight: 500; text-transform: uppercase; padding: 12px 16px; border-radius: 100px; max-height: 3.75rem; height: auto; -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); background: rgb(255 255 255 / 64%); color: var(--System-ColorText) !important; border: 4px solid var(--System-ColorSep); overflow: hidden; transition: color 0.64s ease 0.32s, border-color 0.64s ease 0.32s; @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%); } &:before, &:after { content:""; display: block; background-color: var(--System-ColorBrand) !important; display: block; border-radius: 50%; width: 150%; height: 200%; inset-block-start: -50%; inset-inline-start: -25%; position: absolute; transition: transform 0.64s cubic-bezier(0.3, 1, 0.3, 1); z-index: -1; } &:before { transform: translateY(86%); } &:after { transform: translateY(-76%); transition-delay: .16s; } &:hover:before, &:hover::after { transform: translateY(0%); } &:focus:before { transform: translateY(0%); } &:hover, &:focus { color: var(--System-ColorLight) !important; border-color: var(--System-ColorBG); transition: color 0.64s ease 0s, border-color 0.64s ease 0s; opacity: 1; box-shadow: unset; svg { color: var(--System-ColorLight); } } svg { transition: color 0.64s ease 0s, border-color 0.64s ease 0s; color: var(--System-ColorText); } } } &>.jm-stack { width: max-content; margin: 0; p { display: none; } &>.jm-cluster { gap: 8px; margin: 0; label { font-family: var(--font-heading-family); cursor: pointer; position: relative; font-size: var(--System-FontM); font-weight: 500; text-transform: uppercase; padding: 12px 16px; border-radius: 100px; max-height: 3.75rem; height: auto; -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); background: rgb(255 255 255 / 64%); color: var(--System-ColorText) !important; border: 4px solid var(--System-ColorSep); overflow: hidden; transition: color 0.64s ease 0.32s, border-color 0.64s ease 0.32s; @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%); } &:before, &:after { content:""; display: block; background-color: var(--System-ColorBrand) !important; display: block; border-radius: 50%; width: 150%; height: 200%; inset-block-start: -50%; inset-inline-start: -25%; position: absolute; transition: transform 0.64s cubic-bezier(0.3, 1, 0.3, 1); z-index: -1; } &:before { transform: translateY(86%); } &:after { transform: translateY(-76%); transition-delay: .16s; } &:hover:before, &:hover::after { transform: translateY(0%); } &:focus:before { transform: translateY(0%); } &:hover, &:focus { color: var(--System-ColorLight) !important; border-color: var(--System-ColorBlue); transition: color 0.64s ease 0s, border-color 0.64s ease 0s; opacity: 1; box-shadow: unset; svg { color: var(--System-ColorLight); } } svg { transition: color 0.64s ease 0s, border-color 0.64s ease 0s; color: var(--System-ColorText); } .jdgm-visually-hidden { display: none; } .jm-rating-filter__star { font-size: var(--System-FontM); } &.jm-rating-filter__tag--selected { color: var(--System-ColorLight) !important; border-color: var(--System-ColorBlue); transition: color 0.64s ease 0s, border-color 0.64s ease 0s; opacity: 1; box-shadow: unset; svg { color: var(--System-ColorLight); } &:before, &:after { transform: translateY(0%); } &:before { transform: translateY(0%); } .jdgm-visually-hidden { background: var(--System-ColorLight); border: 1px solid var(--System-ColorBlue); width: 16px; height: 16px; } &:hover, &:focus { .jdgm-visually-hidden { background: var(--System-ColorLight); } } } } } } } } .jm-review-widget__body { .jdgm-empty-state { color: var(--System-ColorText); } .jdgm-carousel-review-list { background: transparent; .jdgm-carousel-review-list__nav-container { display: flex; gap: var(--System-Gap); margin-left: auto; margin-bottom: auto; margin-top: 0; padding: 0; z-index: 1; position: relative; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; margin: 0 auto var(--System-Gap) auto; width: auto; @media screen and (max-width: 768px) { justify-content: center } button { width: 112px; height: 48px !important; max-width: unset !important; padding: 0; cursor: pointer; position: relative; display: inline-flex; align-items: stretch; justify-content: center; gap: 0; overflow: hidden; padding: 0; border-radius: 100px; -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); background: rgb(255 255 255 / 64%); border: 4px solid var(--System-ColorSep); position: relative; overflow: hidden; min-width: unset; font-family: var(--font-heading-family) !important; font-size: var(--System-FontM); color: var(--System-ColorText) !important; transition: color 0.64s ease 0.32s, border-color 0.64s ease 0.32s, opacity 0.64s ease; @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%); } @media screen and (max-width: 568px) { width: 80px; } svg { width: 12px; height: auto; transform: scale(.90); margin: auto; } span { margin-right: 4px; border-color: color-mix(in srgb, var(--System-ColorLight) 40%, transparent); border-top-color: var(--System-ColorLight); } &:before, &:after { content:""; display: block; background-color: var(--System-ColorBrand) !important; display: block; border-radius: 50%; width: 150%; height: 200%; inset-block-start: -50%; inset-inline-start: -25%; position: absolute; transition: transform 0.64s cubic-bezier(0.3, 1, 0.3, 1); z-index: -1; } &:before { transform: translateY(86%); } &:after { transform: translateY(-76%); transition-delay: .16s; } &:hover:before, &:hover:after { transform: translateY(0%); } &:hover { color: var(--System-ColorLight) !important; border-color: var(--System-ColorBG); transition: color 0.64s ease 0s, border-color 0.64s ease 0s; opacity: 1; box-shadow: unset; border: 4px solid var(--System-ColorBlue); svg { fill: var(--System-ColorLight); } } &:disabled { cursor:not-allowed; opacity: 0.3; &:hover, &:focus { color: var(--System-ColorText) !important; background: rgb(255 255 255 / 64%); border: 4px solid var(--System-ColorSep); @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%); } } &:before, &:after { display: none; } } } } .jm-carousel { position: relative; width: unset; margin: 0 auto; overflow: unset; overflow-x: unset; outline: none; container-type: inline-size; container-name: carousel; padding-bottom: var(--System-Padding); --slides-per-view: 4 !important; .jm-carousel__viewport { position: relative; width: unset; display: grid; gap: var(--System-Gap); padding-top: var(--System-Padding); margin-top: calc(var(--System-Padding) * -1); padding-bottom: var(--System-Padding); margin-bottom: calc(var(--System-Padding) * -1); --page-padding: calc(max(var(--sp-12), 50vw - var(--scrollbar-width, 0px) / 2 - var(--page-width) / 2) + var(--System-Padding)); overflow-y: hidden; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scroll-behavior: smooth; padding-inline: var(--page-padding); margin-inline: calc(var(--page-padding) * -1); scroll-padding-inline: var(--page-padding); &:before, &::after { display: none; } .jm-carousel__track { display: grid; gap: var(--System-Gap); padding: unset; padding-top: var(--System-Padding); margin-top: calc(var(--System-Padding) * -1); padding-bottom: var(--System-Padding); margin-bottom: calc(var(--System-Padding) * -1); align-items: stretch; overflow: unset; overflow-x: unset; scroll-behavior: smooth; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; --slider-item-width: calc((100% - (var(--System-Gap) * (var(--card-grid-per-row) - 1))) / var(--card-grid-per-row)); --slider-item-width: calc((980px / var(--card-grid-per-row)) - ((var(--System-Padding) * var(--card-grid-per-row)) / (var(--card-grid-per-row) + 1))); --slider-grid: auto / auto-flow var(--slider-item-width); grid: var(--slider-grid); --card-grid-per-row: 3; @media screen and (max-width: 768px) { --card-grid-per-row: 3; } @media screen and (max-width: 568px) { --card-grid-per-row: 3; gap: 8px; } @media screen and (max-width: 428px) { --card-grid-per-row: 3; } @media screen and (max-width: 375px) { --card-grid-per-row: 4; } .jm-review-item { scroll-snap-align: start; width: unset; min-width: unset; flex-shrink: 0; flex-grow: 0; max-width: unset; overflow: hidden; cursor: pointer; display: block; padding: 0; break-inside: avoid; background: var(--System-ColorBG); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: 18px; overflow: hidden; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } &:hover, &:focus { .jm-review-content__expand-button { p { color: var(--System-ColorText) !important; } } } .jm-carousel-review-item__body { display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: flex-end; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 18px; border: 4px solid var(--System-ColorBG) !important; outline: unset; .jm-highlight-thumbnail { order: 1; display: block; flex: auto; flex-grow: 1; padding: 0 !important; background: var(--System-ColorBG2); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep) !important; overflow: hidden; border-radius: 14px !important; aspect-ratio: 4 / 3 !important; max-width: 100% !important; min-height: unset; max-height: unset; margin: 0 auto; height: 100%; outline: none; box-shadow: inset 2px 4px 12px rgba(0.0, 0.0, 0.0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: inset 2px 4px 12px rgba(0.0, 0.0, 0.0, 0.32); } img{ width: 100%; height: 100%; object-fit: cover; } } &>.jm-cluster { order: 2; padding: 16px 16px 0; .jm-star-rating { margin-bottom: 8px !important; .jm-cluster { &>* { display: flex !important; flex-direction: row; align-items: center; flex-wrap: nowrap; justify-content: center; gap: 2px; .jm-star-rating__font-icon { color: var(--System-ColorOrange) !important; font-size: 16px !important; filter: drop-shadow(2px 4px 12px rgba(0, 0, 0, 0.16)); text-shadow: 0 0 1px rgba(0, 0, 0, 0.32); &:nth-child(2), &:nth-child(4) { /* font-size: 48px !important; */ } &:nth-child(3) { /* font-size: 64px !important; */ } } } } } } .jm-reviewer-info { order: 3; padding: 0 16px; margin: 0; .jm-reviewer-info__details { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: space-between; align-items: center; gap: 2px; .jm-cluster { font-weight: normal; text-decoration: none; font-size: var(--System-FontM); color: var(--System-ColorText) !important; line-height: 1; margin: 0; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: center; gap: 4px; min-width: 50%; &>* { } &:first-child { flex-grow: 1; justify-content: space-between; } .jm-reviewer-info__name { font-family: var(--font-heading-family) !important; color: var(--System-ColorText) !important; font-weight: normal; } .jm-verified-buyer-badge__text { background: var(--System-ColorLight); border: 2px solid var(--System-ColorBlue) !important; color: var(--System-ColorBlue) !important; border-radius: 100px; font-weight: bold; font-size: 12px; padding: 0px 4px; } .jm-location { font-family: var(--font-body-family); font-size: var(--System-FontS); color: var(--System-ColorText2) !important; order: 2; } .jm-reviewer-info__flag { order: 1; width: 16px; height: auto; } } .jm-text { margin: 0; font-family: var(--font-body-family); font-size: var(--System-FontS); color: var(--System-ColorText2) !important; line-height: var(--System-FontM); } } } .jm-review-content { order: 4; padding: 0 16px; margin: 8px 0 16px; .jm-text { margin: 0; p { margin: 0; color: var(--System-ColorText2); line-height: var(--System-FontL); font-size: var(--System-FontM); } } .jm-review-content__expand-button { margin-top: 0; color: var(--System-ColorText2); transition: all 0.32s ease; p { font-family: var(--font-body-family); line-height: var(--System-FontL); font-size: var(--System-FontS); font-weight: bold; text-decoration: underline; transition: all 0.32s ease; color: var(--System-ColorText2) !important; } &:hover, &:focus { p { color: var(--System-ColorText) !important; } } } } .jm-product-variant-card { order: 5; display: none; margin-top: auto; background: var(--System-ColorBG2); color: var(--System-ColorText); border-radius: 14px; } } } } } } } .jdgm-masonry-grid { padding: 0; overflow: visible; .jdgm-masonry-grid__container { column-count: 3; gap: var(--System-Gap) !important; height: auto !important; @media screen and (min-width: 768px) { column-count: 3 !important; column-gap: 12px !important; height: auto !important; } @media screen and (max-width: 768px) { column-count: 2 !important; column-gap: 12px !important; height: auto !important; } @media screen and (max-width: 568px) { column-count: 1 !important; column-gap: 12px !important; height: auto !important; } .jdgm-masonry-grid__masonry-item { position: static !important; transform: none !important; width: 100% !important; display: block; break-inside: avoid; margin-bottom: var(--System-Gap) !important; background: var(--System-ColorBG); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: 18px; overflow: hidden; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } .jdgm-review-card { display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: flex-end; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 18px; border: 2px solid var(--System-ColorBG) !important; outline: unset; .jdgm-review-card__media-cover { min-height: unset; padding: 0; border: none; .jdgm-review-card__highlight { margin-top: auto; display: block; flex: auto; flex-grow: 1; padding: 0 !important; background: var(--System-ColorBG2); color: var(--System-ColorText); border-bottom: 2px solid var(--System-ColorBG) !important; overflow: hidden; border-radius: 0 !important; aspect-ratio: 4 / 3 !important; max-width: 100% !important; min-height: unset; max-height: unset; margin: 0 auto; height: 100%; box-shadow: inset 2px 4px 12px rgba(0.0, 0.0, 0.0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: inset 2px 4px 12px rgba(0.0, 0.0, 0.0, 0.32); } img{ width: 100%; height: 100%; object-fit: cover; } } } .jdgm-review-card__content { padding: 16px; background: transparent; &>.jm-stack { display: flex; flex-direction: column; gap: 0px; &>* { margin: 0 auto !important; width: 100%; .jm-stack { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 2px; &>* { margin: 0 !important } .jdgm-review-card__name, .jm-location { font-family: var(--font-heading-family); font-weight: normal; text-decoration: none; font-size: var(--System-FontM); color: var(--System-ColorText) !important; line-height: 1; } .jm-location { color: var(--System-ColorText2); color: var(--System-ColorText2) !important; } .jm-verified-buyer-badge { p { background: var(--System-ColorBlue); border: none; border-radius: 100px; padding: 0 8px; font-weight: bold; font-size: 10px; } } } .jm-box { margin: 0 !important; .jm-text { color: var(--System-ColorText2) !important; line-height: 1; font-size: var(--System-FontS); margin-top: 2px; } } } .jm-star-rating { margin-bottom: 8px !important; .jm-cluster { &>* { display: flex !important; flex-direction: row; align-items: center; flex-wrap: nowrap; justify-content: center; gap: 2px; .jm-star-rating__font-icon { color: var(--System-ColorOrange) !important; font-size: 16px !important; filter: drop-shadow(2px 4px 12px rgba(0, 0, 0, 0.16)); text-shadow: 0 0 1px rgba(0, 0, 0, 0.32); &:nth-child(2), &:nth-child(4) { /* font-size: 48px !important; */ } &:nth-child(3) { /* font-size: 64px !important; */ } } } } } .jdgm-reply-item__content { margin-top: 8px !important; .jm-text { margin-top: 0; p { color: var(--System-ColorText2) !important; line-height: var(--System-FontL); font-size: var(--System-FontM); } } } } } } } } .jdgm-masonry-grid__footer { .jdgm-masonry-grid__fade { display: none; } button { cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; line-height: 1rem; font-size: clamp(0.875rem, 0.8115rem + 0.1587vw, 1.0rem); font-weight: 500; text-transform: uppercase; padding: 22px 32px; border-radius: 100px; max-height: 3.75rem; height: auto; -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); background: rgb(255 255 255 / 64%); color: var(--System-ColorText) !important; border: 4px solid var(--System-ColorSep); position: relative; overflow: hidden; min-width: unset; font-family: var(--font-heading-family) !important; font-size: var(--System-FontM); text-transform: capitalize; transition: color 0.64s ease 0.32s, border-color 0.64s ease 0.32s; @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%); } svg { transform: scale(1.5); } span { margin-right: 4px; border-color: color-mix(in srgb, var(--System-ColorLight) 40%, transparent); border-top-color: var(--System-ColorLight); } &:before, &:after { content:""; display: block; background-color: var(--System-ColorBrand) !important; display: block; border-radius: 50%; width: 150%; height: 200%; inset-block-start: -50%; inset-inline-start: -25%; position: absolute; transition: transform 0.64s cubic-bezier(0.3, 1, 0.3, 1); z-index: -1; } &:before { transform: translateY(86%); } &:after { transform: translateY(-76%); transition-delay: .16s; } &:disabled:before, &:disabled:after, &:hover:before, &:hover:after { transform: translateY(0%); } &:disabled:before, &:focus:before { transform: translateY(0%); } &:disabled, &:hover, &:focus { color: var(--System-ColorLight) !important; border-color: var(--System-ColorBG); transition: color 0.64s ease 0s, border-color 0.64s ease 0s; opacity: 1; box-shadow: unset; border: 4px solid var(--System-ColorBlue); svg { fill: var(--System-ColorLight); } } } } } .jm-loading-overlay__shimmer { display: none; background: linear-gradient(110deg, transparent 0%, transparent 40%, var(--System-ColorText3) 50%, var(--System-ColorText2) 55%, var(--System-ColorText3) 60%, transparent 70%, transparent 100%); } } } } } } .template-product { .header-sticky ~ .page-container .sticky:is(.product__info, .product__preview), .header-sticky ~ .page-container .product__gallery-container, .header-sticky ~ .page-container .product__info { top: calc(var(--header-height) + var(--System-Padding)) !important; position: sticky; @media screen and (max-width: 568px) { top: unset !important; position: initial; } } .mobile-dock-section~.page-container :is(.facet-sticky,.product-sticky-form) { transition: transform var(--animation-primary); } .header-sticky.header-hidden~.mobile-dock-section~.page-container .product-sticky-form, .mobile-dock-section.active~.page-container .product-sticky-form { transform: translateY(0); } .product-sticky-form { width: 100%; inset: auto 0 0; transform: translateY(0); padding-bottom: 0; @media screen and (max-width: 767px) { /* When scrolling up disappears the stickey bar */ /* transform: translateY(calc(var(--mobile-dock-height) - (var(--System-Padding) * 3) * -1)); */ } @media screen and (min-width: 980px) { transform: translateY(var(--mobile-dock-height) * -1) !important; bottom: var(--System-Padding); } .product-sticky-form__card { width: 100%; max-width: var(--System-PageWidth); margin: 0 auto; padding: 0; -webkit-backdrop-filter: saturate(256%) blur(32px); backdrop-filter: saturate(256%) blur(32px); background: rgb(255 255 255 / 64%); box-shadow: 2px 4px 12px rgb(0 0 0 / 8%); border: 1px solid var(--System-ColorSep); border-radius: 100px; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%); box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } @media screen and (max-width: 980px) { border-radius: 18px 18px 0 0; border-width: 1px 0 0 0; } .product-sticky-form__variant { width: 100%; padding: 8px 16px; margin: 0 auto; max-width: var(--System-PageWidth); padding-right: 16px; padding-right: max(16px, env(safe-area-inset-right)); padding-left: 16px; padding-left: max(16px, env(safe-area-inset-left)); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; @media screen and (max-width: 767px) { padding-bottom: max(calc(var(--mobile-dock-height) + var(--System-Padding))); } &>.grid { gap: 0; .grid { gap: 0; } } .media { display: inline-block; max-width: 64px; background: transparent; border: 0px solid var(--System-ColorSep); } .button--primary { margin-left: auto; @media screen and (max-width: 767px) { .btn-loader { gap: 2px; pointer-events: none; padding: 0 8px; } } } .price { flex-direction: row; gap: 8px; } } } } .page-container { .page-width { .rich-text { margin-bottom: calc(var(--System-Padding) * -1); .heading { margin-bottom: 16px; } .rte { text-align: justify; font-size: var(--System-FontL) !important; margin: 0 0 16px; } .product__highlights { padding: 0; margin: 0; border: none; background: transparent; & > p { display: none; } .product-card__spec { padding: var(--System-Padding); margin: calc(var(--System-Padding) * -1); margin-bottom: -16px; border: none; @media screen and (max-width: 768px) { margin-bottom: 0; } .product-card__icons { gap: 16px; padding: var(--System-Padding); margin: -16px calc(var(--System-Padding) * -1); flex-wrap: wrap; @media screen and (max-width: 768px) { margin: 0 calc(var(--System-Padding) * -1); } .product-card__icon { background: var(--System-ColorBG); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: 18px; overflow: hidden; contain: paint; isolation: isolate; transform: translateZ(0); flex: auto; flex-grow: 1; width: auto; padding: 16px; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } & > .flex { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: center; justify-content: center; } figure { margin: auto 0; @media (prefers-color-scheme: dark) { filter: brightness(0) invert(1); -webkit-filter: brightness(1) invert(1); } } .info { gap: 0; color: var(--System-ColorText2); display: block; font-size: var(--System-FontM); align-items: flex-start; text-align: left; p { font-size: var(--System-FontS); color: var(--System-ColorText2); display: block; margin-top: 4px; } } } } } } } } } .specifications-section { :is(.title-wrapper, .specifications) { padding: 0; gap: 0; } .specifications { .grow, .grow-0 { padding: 0; } } .accordion { border-top: 1px solid var(--System-ColorSep); * { color: var(--System-ColorText) !important; } &:first-child { border-top: none; } .details__summary { .heading { font-size: var(--System-Font2XL); .icon { width: 2rem; height: auto; } } } .details__content { .specification.grid { display: flex; justify-content: center; align-items: stretch; gap: 32px; align-items: flex-start; flex-wrap: wrap; & > div { flex: auto; flex-grow: 1; min-width: calc((100% / 4) - 12px); width: auto; &:first-child { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: center; justify-content: flex-start; gap: 32px; width: 100%; p { width: 100%; text-align: justify; font-size: var(--System-FontL) !important; margin: 0 0 16px; } ul, ol { margin: 0; padding-left: 16px; li { &::marker { color: var(--System-ColorText2) !important; } margin: 0 4px; color: var(--System-ColorText2) !important; font-size: var(--System-FontL) !important; strong { } } } } .leading-none { font-size: var(--System-FontM); border-bottom: 1px solid var(--System-ColorSep); padding-bottom: 8px; } p, span, span * { color: var(--System-ColorText2) !important; } } } } } .specs__sidebar { position: relative; width: 100%; gap: var(--System-Gap); padding: var(--System-Padding) !important; background: var(--System-ColorBG); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: calc(var(--System-Padding) + 18px); inset: 0 !important; margin-top: 80px; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } .icon-box { color: var(--System-ColorText2); min-width: 128px; width: 25%; max-width: 256px; .fill { fill: var(--System-ColorBG2); } } .heading { } ul { align-items: stretch; gap: 16px; li { display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 32px; flex: auto; flex-grow: 1; min-width: calc((100% / 3) - calc(var(--System-Padding) / 3)); background: var(--System-ColorBG2); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: 18px; margin: 0; box-shadow: inset 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } padding: 32px; &:first-child { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 32px; width: auto; .media { width: auto; img { width: 100%; max-width: 128px; background: var(--System-ColorBG); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: 18px; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } } } p { font-size: var(--System-FontL); text-align: left; max-width: 512px; span { display: block; text-align: left; color: var(--System-ColorText2); font-size: var(--System-FontL); margin-top: 4px; } } } .media { width: 64px; height: auto; } p { font-size: var(--System-FontM); } } } } } #doran-product-question-widget { } .ReviewSection { .ReviewSectionLink { top: calc((var(--header-height) + var(--System-Padding)) * -1); position: relative; display: block; } .ReviewSectionWrp { display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; align-items: center; justify-content: center; margin: 0 auto; width: 100%; max-width: 512px; text-align: center; .ReviewStars { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: flex-end; gap: 8px; svg { color: var(--System-ColorOrange); stroke: var(--System-ColorDark); width: 32px; height: auto; stroke-width: .32; stroke-opacity: .16; margin: 0 -8px; filter: drop-shadow(2px 4px 12px rgba(0, 0, 0, 0.16)); @media (prefers-color-scheme: dark) { filter: drop-shadow(2px 4px 12px rgba(0, 0, 0, 0.32)); } &:nth-child(2), &:nth-child(4) { width: 48px; } &:nth-child(3) { width: 64px; } } } .highlight-text { padding: 8px 0 var(--System-Padding); svg { stroke: var(--System-ColorOrange); } } } } .collage { @media screen and (max-width: 567px) { display: flex; flex-direction: column; .collage__item:not(:has(video-media)) { img { position: relative; } } } } } .SizeGuideTable { border: none !important; border-radius: 0 !important; width: 100%; thead { border-bottom: 1px solid var(--System-ColorSep); background: var(--System-ColorBG2); span { display: block; } } tbody { tr { border: none; td:first-child { /* background: var(--System-ColorBG2); */ } } tr:not(:first-child) { border-top: 1px solid var(--System-ColorSep); } tr:nth-child(even) { background: var(--System-ColorBG2); } } th, td { padding: 8px 16px; } th { border: none; } td:not(:first-child) { border-left: 1px solid var(--System-ColorSep); } p { margin: 0 !important; span { font-size: var(--System-FontXS); color: var(--System-ColorText2); } } } .faqs { display: flex; flex-direction: column; width: 100%; background: transparent; color: var(--System-ColorText); gap: var(--System-Gap); & > * { padding: 0 !important; gap: var(--System-Gap); width: 100%; } & > form { background-color: transparent !important; } &.with-background { color: var(--System-ColorText); } .title-wrapper { display: flex; align-items: center; justify-content: space-between; flex-direction: column; .page-width--narrow { color: var(--System-ColorText2) !important; max-width: 512px; margin: 0 auto; font-size: var(--System-FontS); padding: 8px 32px !important; width: auto; background: transparent !important; a { color: var(--System-ColorText2) !important; margin: 0 4px; } } .heading { font-size: var(--System-Font4XL) !important; } } .faq { padding: 0 !important; .accordion { &:not(:last-child) { border-bottom: 1px solid var(--System-ColorSep); } .details__summary { padding: var(--System-Padding) 0; strong { font-size: var(--System-FontL); text-transform: capitalize; font-weight: normal; } } .details__content { p { margin-block: 0; } } } } .contact__sidebar { gap: var(--System-Gap); position: relative; inset: 0 !important; width: 100%; max-width: 512px; margin: 0 auto; color: var(--System-ColorText); display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: center; margin-top: calc((var(--header-height) + var(--System-Padding)) * -1); padding-top: calc((var(--header-height) + var(--System-Padding)) * 1); & > .flex { display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 16px; text-align: center; } &:before { content: ""; display: block; width: 100%; height: 24px; background: var(--System-ColorBrand); border-radius: 100px; border: 4px solid var(--System-ColorBG); box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.32); @media (prefers-color-scheme: dark) { box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.64); } } } } /*---------------------------------------------------------------------------------*/ /* Cart Page Structure ------------------------------------------------------------*/ /*---------------------------------------------------------------------------------*/ .template-cart { .page-container { overflow: clip; } .main-content { .cart { .title-wrapper { display: flex; justify-content: space-between; margin-bottom: var(--System-Padding); .button { padding: 8px 16px; text-transform: capitalize; } } .cart__content { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 32px; padding-bottom: var(--System-Padding); @media screen and (max-width: 768px) { flex-direction: column; } &>* { position: sticky; top: calc(var(--header-height) + var(--System-Padding)); @media screen and (max-width: 768px) { width: 100%; max-width: 100% !important; position: unset; top: unset; } } .grow { width: 100%; max-width: calc(100% - 320px - 32px); gap: 32px; .cart__form { table { display: flex; flex-direction: row; flex-wrap: wrap; tbody { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: var(--System-Padding); width: 100%; tr { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; width: 100%; td { padding: 0; width: 100%; display: block; &:first-child { width: 100%; .flex { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 16px; .media { width: 96px; height: auto; margin-bottom: -40px; border-radius: 18px; border: 2px solid var(--System-ColorSep); background: var(--System-ColorBG2); box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } @media screen and (max-width: 568px) { width: 64px; border-radius: 12px; } .icon { -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); background: rgb(255 255 255 / 64%); border: 1px solid var(--System-ColorSep); border-width: 2px 0 0 2px; border-radius: 18px 0 17px 0; overflow: hidden; @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%); } svg { height: 24px; margin-top: -4px; @media (prefers-color-scheme: dark) { -webkit-filter: grayscale(1) invert(1); filter: grayscale(1) invert(1); } } } } .cart-item__details { display: block; width: calc( 100% - 96px - 16px ); gap:var(--sp-1); @media screen and (max-width: 568px) { width: calc( 100% - 64px - 16px ); } .leading-tight { font-size: var(--System-FontM); margin-bottom: 0; gap: 0; } .properties { display: flex; flex-direction: row; align-content: center; gap: 4px; flex-wrap: wrap; .leading-tight { gap: 4px; font-size: var(--System-FontS); color: var(--System-ColorText2); &:not(:first-child):before { content: "/"; } } } .cart__item-title_wrp { justify-content: space-between; display: flex; align-items: center; .cart__item-title { font-size: var(--System-FontXL); margin-bottom: 0; display: inline-block; } } .Remove { margin: 4px 0 0; a { display: flex; gap: 4px; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; color: var(--System-ColorText2); } a:hover, a:focus { color: var(--System-ColorRed); background: transparent; } &.is-loading { .remove-link { visibility: hidden; pointer-events: none; } } } .price-wrp { gap: 16px; .grid { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; } .price { flex-direction: row; align-items: center; gap: 4px; line-height: 1.32; font-size: var(--System-FontXL); .price__sale { font-size: var(--System-FontS); } .price__regular { font-size: var(--System-FontM); } .unit-price { gap:0; color: var(--System-ColorText2); font-size: var(--System-FontXS); } } } dt { font-size: var(--System-FontS); } dd { font-weight: bold; color: var(--System-ColorText2) !important; } &> .flex { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: flex-start; justify-content: space-between; gap: 16px; &:first-child { margin-bottom: 8px; } &:nth-child(2) { align-items: center; } } } } } .cart-item__quantity { .cart-quantity__info { display: flex; gap: 16px; align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: space-between; .cart-quantity { width: 72px; height: 54px; align-items: unset; @media screen and (max-width: 768px) { width: 64px; } .quantity__input { padding: 8px 28px 8px 16px; font-size: var(--System-FontM); text-align: center; background: var(--System-ColorBG2) !important; color: var(--System-ColorText) !important; border-radius: 10px; height: auto !important; @media screen and (max-width: 768px) { padding: 8px 16px; } } .quantity__buttons { gap: 8px; width: 24px; margin-right: 4px; display: flex; @media screen and (max-width: 768px) { display: none; } .quantity__button { width: 100%; padding: 0; .icon { width: 10px; height: auto; color: var(--System-ColorText2); &.icon-increase { margin-top: auto; } } } } } } } &.text-right { .price { align-content: flex-end; font-size: var(--System-FontL); } } } border-top: none; &:not(:last-child) { border-bottom: 1px solid var(--System-ColorSep); padding-bottom: var(--System-Padding); } } } } } } .grow-0 { width: 100%; max-width: 320px; width: 100%; sticky-element { background: transparent; gap: var(--System-Gap); &> .grid { gap: var(--System-Gap); } .cart__sidebar { width: 100%; padding: 0; background: transparent; margin: 0; gap: var(--System-Gap); &> .grid { gap: 0; } .free-shipping-bar { display: flex; flex-direction: column; align-items: stretch; padding: 0; gap: 8px; border-radius: 0; background: transparent; background: var(--System-ColorBG); padding: 16px; background: var(--System-ColorBG); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: 18px; overflow: hidden; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } progress-bar { background: var(--System-ColorBG2); height: 10px; border: 2px solid var(--System-ColorSep); &:before { background: var(--System-ColorBrand); background: var(--System-ColorOrange); height: 6px; } } } .totalswrp { background: var(--System-ColorBG); padding: 16px; background: var(--System-ColorBG); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: 18px; overflow: hidden; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } .totals { border: none; .totals__subtotal { font-size: var(--System-FontM); color: var(--System-ColorText2); width: 100%; } } .tax-note { font-size: var(--System-FontS); color: var(--System-ColorText2); } .discounts { border-bottom: 2px dashed var(--System-ColorSep); margin-bottom: var(--System-Gap); padding-bottom: var(--System-Gap); .badge { padding: 8px 16px; font-size: var(--System-FontS); gap: 12px; background-color: var(--System-ColorOrange); border: 1px solid var(--System-ColorOrange); color: var(--System-ColorLight); } } } } cart-note { .leading-tight { display: none; } label { font-size: var(--System-FontM); color: var(--System-ColorText2); margin-bottom: 8px; } gap: 8px; display: flex; flex-direction: column; } .show_payment_icons { gap: 4px; svg { width: 32px; filter: grayscale(1); opacity: 0.64; transition: all 0.32s ease; &:hover, &:focus { opacity: 1; filter: unset; } } } .cart-details { background: var(--System-ColorBG); padding: 16px; background: var(--System-ColorBG); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: 18px; overflow: hidden; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } .details__summary { span { font-size: var(--System-FontXL); text-transform: capitalize; } .cart-discount__count { background: transparent; font-size: var(--System-FontM); padding: 0; font-weight: bold; border: 2px solid var(--System-ColorOrange); color: var(--System-ColorOrange); } } .details__content { gap: 0; .grid { display: flex; flex-direction: column; align-items: stretch; align-content: center; justify-content: center; gap: 16px; select, input { background: var(--System-ColorBG2) !important; } .active-facets { .badge { padding: 4px 16px; font-size: var(--System-FontS); gap: 12px; background-color: var(--System-ColorOrange); border: 1px solid var(--System-ColorOrange); color: var(--System-ColorLight); button svg { stroke: var(--System-ColorLight); } } } &>.discount-code { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px; .field { width: 100%; } .button { border-radius: 0 18px 18px 0; width: 100px; height: 100%; max-height: 100%; position: absolute; right: 0; top: 0; border: 1px solid var(--System-ColorSep); text-transform: uppercase; } } } } } } } } } } } /*---------------------------------------------------------------------------------*/ /* User Dashboard Pages Structure -------------------------------------------------*/ /*---------------------------------------------------------------------------------*/ .template-customers-login { .main-content { padding: 64px 0; .title-wrapper { margin-bottom: 32px; justify-content: center; } .customer { form { display: flex; flex-direction: column; flex-wrap: wrap; align-items: stretch; gap: var(--System-Gap); .sign-in-with-shop-provider { order: 2; display: flex; flex-direction: column; flex-wrap: wrap; align-items: stretch; shop-login-button { order: 2; } &>p { order: 1; margin: 0 auto var(--System-Padding); } } .button-group { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; width: 100%; gap: var(--System-Padding); &>* { max-width: unset; width: calc((100% / 2) - (var(--System-Padding) / 2)); } } .grid { order: 1; gap: var(--System-Padding); &.gap-8 { &>.text-center { display: none; } } &.gap-5 { margin-bottom: var(--System-Padding); } } .h-captcha { display: none; } } } } } .template-customers-register { .main-content { padding: 64px 0; .title-wrapper { margin-bottom: 32px; } .customer { form { display: flex; flex-direction: column; flex-wrap: wrap; align-items: stretch; gap: var(--System-Gap); .grid { &.gap-5 { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 16px; .field { width: 100%; max-width: 100%; &:nth-child(1), &:nth-child(2) { max-width: calc(50% - 8px); @media screen and (max-width: 428px) { max-width: 100%; } } } } &.gap-8 { &>.text-center { display: none; } } } .h-captcha { display: none; } } } } } .template-customers-reset_password { .main-content { padding: 64px 0; .title-wrapper { margin-bottom: 32px; justify-content: center; .heading { font-size: var(--System-Font2XL); } } } } .template-customers-account, .template-customers-order, .template-customers-addresses { .title-wrapper { display: flex; justify-content: space-between; margin-bottom: var(--System-Padding); .button { padding: 8px 16px; text-transform: capitalize; } } .customer__content { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 32px; padding-bottom: var(--System-Padding); @media screen and (max-width: 768px) { flex-direction: column; } &>* { position: sticky; top: calc(var(--header-height) + var(--System-Padding)); @media screen and (max-width: 768px) { width: 100%; max-width: 100% !important; position: unset; top: unset; } } .grow { width: 100%; max-width: calc(100% - 256px - 32px); gap: 16px; .order-history { display: flex; flex-direction: row; flex-wrap: wrap; box-shadow: unset; border-radius: unset; overflow: visible; thead { display: none; } tbody { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: var(--System-Gap); width: 100%; tr { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; background: var(--System-ColorBG); padding: 32px var(--System-Padding); background: var(--System-ColorBG); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: 18px; overflow: hidden; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } @media screen and (max-width: 428px) { justify-content: center; } td { padding: 0; display: block; &:before { display: none; } &:nth-child(1), &:nth-child(2) { width: 100%; max-width: calc(50% - 16px); } &:nth-child(1) { margin-right: auto; order: 1; a { font-size: var(--System-FontM); } } &:nth-child(2) { order: 2; text-align: right; font-size: var(--System-FontM); color: var(--System-ColorText2); } &:nth-child(3), &:nth-child(4) { order: 4; border: 2px solid var(--System-ColorSep); padding: 4px 16px; border-radius: 100px; font-size: var(--System-FontM); background: var(--System-ColorBG2); @media screen and (max-width: 428px) { order: 3; } } &:nth-child(5) { order: 3; font-size: var(--System-FontM); margin: 0 auto 0 0; @media screen and (max-width: 428px) { margin: auto; order: 4; width: 100%; text-align: center; } } } &:not(:last-child) { border-bottom: 1px solid var(--System-ColorSep); padding-bottom: var(--System-Padding); } } } } .order-details { display: flex; flex-direction: row; flex-wrap: wrap; box-shadow: unset; border-radius: unset; overflow: visible; thead { display: none; } tbody { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: var(--System-Gap); width: 100%; tr { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; background: var(--System-ColorBG); padding: 32px var(--System-Padding); background: var(--System-ColorBG); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: 18px; overflow: hidden; box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } @media screen and (max-width: 428px) { justify-content: center; } td { padding: 0; display: block; } &:not(:last-child) { border-bottom: 1px solid var(--System-ColorSep); padding-bottom: var(--System-Padding); } } } } } .grow-0 { width: 100%; max-width: 256px; sticky-element { gap: 16px; background: transparent; padding: 0; .button { padding: 8px 16px; text-transform: capitalize; margin-top: -8px; } } .customer__sidebar { padding: 0; background: transparent; } } } .addresses { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 32px; padding-bottom: var(--System-Padding); .address-grid { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: var(--System-Gap); .address { background: var(--System-ColorBG); color: var(--System-ColorText); border: 1px solid var(--System-ColorSep); border-radius: 18px; padding: var(--System-Padding); overflow: hidden; width: 100%; max-width: calc(50% - var(--System-Padding) / 2); box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.16); @media (prefers-color-scheme: dark) { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.32); } @media screen and (max-width: 428px) { max-width: 100%; } } } } } /*---------------------------------------------------------------------------------*/ /* Single Page Structure ----------------------------------------------------------*/ /*---------------------------------------------------------------------------------*/ .page-policies { .rich-text { .heading { text-transform: uppercase; @media screen and (max-width: 768px) { text-align: center; } } .body { margin: 0 auto; p { text-align: justify; font-size: var(--System-Font2XL) !important; margin: 0 0 16px; @media screen and (max-width: 768px) { text-align-last: center; } } .pc--opt-out-form { border-top: 1px solid var(--System-ColorSep); margin: 32px auto 0; padding-top: 32px; width: 100%; max-width: 100%; @media screen and (max-width: 768px) { flex-wrap: wrap; align-content: center; } .pc--opt-out-form-container { @media screen and (max-width: 768px) { align-items: center; } } .pc--opt-out-form-wrapper { label { margin-bottom: 8px; text-align: left; } } .pc--opt-out-form-button { font-family: var(--font-heading-family); margin: 0; -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); background: rgb(255 255 255 / 64%); color: var(--System-ColorText) !important; text-transform: uppercase; border: 4px solid var(--System-ColorSep); transition: color 0.64s ease 0s, background 0.64s ease 0s, border-color 0.64s ease 0s; @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%); } @media screen and (max-width: 768px) { margin: 0 auto; } &:hover, &:focus { color: var(--System-ColorLight) !important; border-color: var(--System-ColorBlue); background: var(--System-ColorBrand); } } .pc--opt-out-form-message { background: var(--System-ColorGreen); color: var(--System-ColorDark); padding: 16px 32px; border-radius: 18px; width: auto; font-size: var(--System-FontM) !important; @media screen and (max-width: 768px) { margin: 0 auto; } } } } } } .shopify-email-marketing-confirmation__container { width: 100%; max-width: var(--System-PageWidth) !important; margin: 0 auto !important; padding-top: var(--System-Padding) !important; padding-right: var(--System-Padding) !important; padding-right: max(var(--System-Padding), env(safe-area-inset-right)) !important; padding-left: var(--System-Padding) !important; padding-left: max(var(--System-Padding), env(safe-area-inset-left)) !important; gap: var(--System-Padding); text-align: center; h1 { font-size: var(--System-Font5XL); margin-bottom: var(--System-Padding); } p { color: var(--System-ColorText2); font-size: var(--System-FontL) !important; line-height: var(--System-Font2XL) !important; margin: 0 0 8px; &::marker { color: var(--System-ColorText2) !important; } } a { margin-top: var(--System-Gap); cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; line-height: 1rem; font-size: clamp(0.875rem, 0.8115rem + 0.1587vw, 1.0rem); font-weight: 500; text-transform: uppercase; padding: 22px 32px; border-radius: 100px; max-height: 3.75rem; height: auto; -webkit-backdrop-filter: saturate(256%) blur(8px); backdrop-filter: saturate(256%) blur(8px); background: rgb(255 255 255 / 64%); color: var(--System-ColorText) !important; border: 4px solid var(--System-ColorSep); position: relative; overflow: hidden; min-width: unset; font-family: var(--font-heading-family) !important; font-size: var(--System-FontXL); text-transform: capitalize; transition: color 0.64s ease 0.32s, border-color 0.64s ease 0.32s; @media (prefers-color-scheme: dark) { background: rgb(0 0 0 / 64%); } &:before, &:after { content:""; display: block; background-color: var(--System-ColorBrand) !important; display: block; border-radius: 50%; width: 150%; height: 200%; inset-block-start: -50%; inset-inline-start: -25%; position: absolute; transition: transform 0.64s cubic-bezier(0.3, 1, 0.3, 1); z-index: -1; } &:before { transform: translateY(86%); } &:after { transform: translateY(-76%); transition-delay: .16s; } &:hover:before, &:hover::after { transform: translateY(0%); } &:focus:before { transform: translateY(0%); } &:hover, &:focus { color: var(--System-ColorLight) !important; border-color: var(--System-ColorBG); transition: color 0.64s ease 0s, border-color 0.64s ease 0s; opacity: 1; box-shadow: unset; border: 4px solid var(--System-ColorBlue); svg { color: var(--System-ColorText2); } } } } .shopify-policy__container { width: 100%; max-width: var(--System-PageWidth) !important; margin: 0 auto !important; padding-top: var(--System-Padding) !important; padding-right: var(--System-Padding) !important; padding-right: max(var(--System-Padding), env(safe-area-inset-right)) !important; padding-left: var(--System-Padding) !important; padding-left: max(var(--System-Padding), env(safe-area-inset-left)) !important; gap: var(--System-Padding); .shopify-policy__title h1 { text-transform: capitalize; font-size: var(--System-Font5XL); text-align: left; } .shopify-policy__body { h1,h2,h3,h4,h5,h6 { margin-top: 32px; margin-bottom: 16px; } li, p { color: var(--System-ColorText2); font-size: var(--System-FontL) !important; line-height: var(--System-Font2XL) !important; margin: 0 0 8px; &::marker { color: var(--System-ColorText2) !important; } } strong { font-size: var(--System-FontXL) !important; line-height: var(--System-Font2XL) !important; text-transform: capitalize; } } } /*---------------------------------------------------------------------------------*/ /* AboutUs Page Structure ---------------------------------------------------------*/ /*---------------------------------------------------------------------------------*/ .page-about { .main-content { &>:first-child { .banner { .banner__overlay { mask-image: linear-gradient(225deg, transparent 0%, black 64%); -webkit-mask-image: linear-gradient(225deg, transparent 0%, black 64%); @media screen and (max-width: 768px) { mask-image: linear-gradient(180deg, transparent 0%, black 64%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 64%); } } } } .title-xl { font-size: var(--System-Font5XL) !important; } .title-lg { font-size: var(--System-Font4XL) !important; } .title-md { font-size: var(--System-Font3XL) !important; } .title-sm { font-size: var(--System-Font2XL) !important; } h1 { font-size: var(--System-Font4XL) !important; } h2 { font-size: var(--System-Font3XL) !important; } .rich-text { .rte { text-align: justify; font-size: var(--System-Font2XL) !important; margin: 0 0 16px; } } } } /*---------------------------------------------------------------------------------*/ /* ContactUs Page Structure -------------------------------------------------------*/ /*---------------------------------------------------------------------------------*/ .contact { gap: var(--System-Gap); flex-direction: row; @media screen and (max-width: 768px) { flex-direction: column; } &>form { .contact__fields { .rte.text-sm { display: none; } } } &>div { width: 100%; max-width: 320px; @media screen and (max-width: 768px) { max-width: 100%; } } .contact__sidebar { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: var(--System-Gap); @media screen and (max-width: 768px) { flex-direction: row; justify-content: space-between; margin-top: 16px; gap: 32px; } li { display: inline-flex; gap: 8px; .subtitle { color: var(--System-ColorText2); } .rte { a { color: var(--System-ColorText); } } } } } /*---------------------------------------------------------------------------------*/ /* 404 NotFound Page Structure ----------------------------------------------------*/ /*---------------------------------------------------------------------------------*/ .template-404 { .title-wrapper { .heading { margin: 0 auto; } } .page-404 { } }