/** Shopify CDN: Minification failed Line 11482:0 Expected "}" to go with "{" **/ /* components v2.10.66 | Copyright © 2024 Archetype Themes Limited Partnership | "Shopify Theme Store (https://www.shopify.com/legal/terms#9-additional-services)" License */ /* If styles are shared between components, they should be added here * If it's only at the snippet or section level, we should remove * the import from here and move them into the snippet or section folder */ @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap"); :root { --gutter: 30px; --page-width: 1500px; --page-width-narrow: 1000px; --input-radius: 0; --page-width-gutter-small: 17px; --grid-gutter: 22px; --grid-gutter-small: 16px; --slideCurve: 0.25s cubic-bezier(0.165, 0.84, 0.44, 1); --drawerBoxShadow: 0 10px 25px rgba(0, 0, 0, 0.15); /*================ Product and collection grids ================*/ /* Product grid margin is double this variable */ --productGridMargin: 10px; --productGridPadding: 12px; --productRadius: 10px; /*================ Color variables ================*/ --colorStickyNavLinks: #fff; --disabledGrey: #f6f6f6; --disabledBorder: #b6b6b6; --disabledGreyText: #b6b6b6; --errorRed: #d02e2e; --errorRedBg: #fff6f6; --successGreen: #56ad6a; --successGreenBg: #ecfef0; --primaryColor: #e2243c; --grayColor: #555555; /*================ General sizing and z-index ================*/ --desktopMenuChevronSize: 10px; --siteNavItemPadding: 20px; --siteNavItemPaddingTopBottom: 16px; --siteNavIconPadding: 12px; --z-index-modal: 30; --z-index-toolbar: 7; --z-index-header: 6; --z-index-header-bottom-row: 3; --z-index-header-drawers: 5; --z-index-header-drawers-mobile: 3; --z-index-header-search: 7; --z-index-loader: 4; } /*================ Breakpoints ================*/ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes preloading { 0% { transform-origin: 0 50%; transform: scale3d(0, 1, 1); opacity: 0; } 40% { transform-origin: 0 50%; transform: scale3d(1, 1, 1); opacity: 1; } 41% { transform-origin: 100% 50%; transform: scale3d(1, 1, 1); opacity: 1; } 100% { transform-origin: 100% 50%; transform: scale3d(0, 1, 1); opacity: 1; } } @keyframes slideshowBars { from { transform: translateX(-100%); } to { transform: translateX(0); } } /*Ajax load products*/ @keyframes grid-product__loading { 0% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 1; } } /*Overlay animations (modals, panels)*/ @keyframes overlay-on { from { opacity: 0; } to { opacity: 0.6; } } @keyframes overlay-off { from { opacity: 0.6; } to { opacity: 0; } } @keyframes modal-open { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } @keyframes modal-closing { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.97); } } /*Text animations*/ @keyframes rise-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } /*Background image animations*/ @keyframes zoom-fade { from { opacity: 0; transform: scale(1.1, 1.1); } to { opacity: 1; transform: scale(1, 1); } } /*Product form placeholder*/ @keyframes placeholder-shimmer { 0% { background-position: -150% 0; } 100% { background-position: 150% 0; } } :root { --animate-duration: 1s; } [data-animate] { opacity: 0; transition-property: opacity, transform; transition-duration: var(--animate-duration), var(--animate-duration); transition-timing-function: ease-in-out, ease-in-out; } .no-js [data-animate] { opacity: 1; } [data-animate] { opacity: 0; } [ready] [data-animate] { opacity: 1; } [data-animate="fadein"] { opacity: 0; } [ready] [data-animate="fadein"] { opacity: 1; } [data-animate="fadeup"] { transform: translateY(5rem); } [ready] [data-animate="fadeup"] { transform: translateY(0); } [data-animate="fadedown"] { transform: translateY(-5rem); } [ready] [data-animate="fadedown"] { transform: translateY(0); } [data-animate="fadeleft"] { transform: translateX(-5rem); } [ready] [data-animate="fadeleft"] { transform: translateX(0); } [data-animate="faderight"] { transform: translateX(5rem); } [ready] [data-animate="faderight"] { transform: translateX(0); } [data-animate="zoomin"] { transform: scale(0.8); } [ready] [data-animate="zoomin"] { transform: scale(1); } [data-animate="zoomout"] { transform: scale(1.2); } [ready] [data-animate="zoomout"] { transform: scale(1); } .flickity-enabled {position: relative;} .flickity-enabled:focus {outline: none;} .flickity-viewport {overflow: hidden; position: relative; transition: height 0.35s; height: 100%;} .flickity-slider {position: absolute; width: 100%; height: 100%;} .flickity-enabled.is-draggable { -webkit-user-select: none; user-select: none;} .flickity-enabled.is-draggable .flickity-viewport {cursor: move; cursor: grab;} .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {cursor: grabbing;} .flickity-enabled.is-draggable[data-arrows="true"] .flickity-viewport {cursor: default;} .flickity-enabled.is-draggable[data-arrows="true"] .flickity-viewport.is-pointer-down {cursor: default;} .flickity-button {position: absolute; border: none; color: var(--colorBtnPrimaryText); background: var(--colorBtnPrimary); border-radius: 50%;} .hero .flickity-button {color: var(--colorTextBody); background-color: var(--colorBody); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);} .flickity-button:hover {cursor: pointer; opacity: 1;} .flickity-button:disabled {display: none; cursor: auto; pointer-events: none;} .flickity-prev-next-button {top: 50%; width: 40px; height: 40px; transform: translateY(-50%);} .coll_categ_list_m .collection-image-wrap.collection-image-color--grey:after {border-radius: 50%;} .coll_categ_list_main .coll_img img {width: 100%; height: 100%; object-fit: cover; border-radius: 50%;} .coll_categ_list_m .collection-image--portrait {padding-top: 0; border-radius: 50%;} .coll_categ_list_m .collection-image.image-wrap, .coll_categ_list_m a.collection-item .coll_img {width: 188px; height: 188px; border-radius: 50%; position: relative; overflow: hidden; background: transparent;} .coll_categ_list_m .collection-image-wrap:hover {transform: none; box-shadow: none;} .coll_categ_list_m a.collection-item {margin-bottom: 60px;} .coll_categ_list_m .collection-image.image-wrap img, .coll_categ_list_m a.collection-item .coll_img img {width: 100%; height: 100%; object-fit: cover; object-position: right; padding: 0; position: static !important; border-radius: 50%; transform: scale(1) rotate(0deg); -webkit-transition: all 600ms ease-in-out 0s; -o-transition: all 600ms ease-in-out 0s; transition: all 600ms ease-in-out 0s;} .coll_categ_list_m .collection-image--portrait + .coll_img {display: none;} .coll_categ_list_m a.collection-item:hover {color: var(--primaryColor);} .coll_categ_list_m a.collection-item:hover .collection-image.image-wrap img, .coll_categ_list_m a.collection-item:hover .coll_img img {transform: scale(1.1) rotate(-2deg);} .new-grid.coll_categ_list_inn {justify-content: center;} .page-width.store_page01 {padding-top: 60px;} p.store_box-pg {display: flex; flex-wrap: wrap;} p.store_box-pg > a {flex: 0 0 auto; width: 33.33333333%; padding: 15px;} .page-width.store_page01 h2.collection_head {margin: 0; text-align: center; font-weight: 600; font-size: 32px;} button.variant_btn-de {font-weight: normal; padding: 7px 15px 7px; box-shadow: 0 0 0 2px var(--colorTextBody); text-decoration: none; font-size: 14px;} .variant_detail-info div {font-size: 15px; margin-bottom: 15px;} .blogDetailS a {color: #e2243c !important;} .coll_categ_list_main [data-view="6-3"] .grid-item { flex: 0 0 calc(100% / 6);} .template-blog a.view_prd-btn {color: var(--colorBtnPrimary); border: 1px solid var(--colorBtnPrimary); padding: 12px 25px; border-radius: 6px; font-size: 11px; text-align: center; flex: 1 0 0%; order: 1; text-transform: uppercase; font-weight: 600; display: block;} .template-blog .btn--full {margin-bottom: 25px;} @media only screen and (max-width: 768px) { .flickity-prev-next-button {width: 33px; height: 33px;} .breadcrumb__divider {padding: 3px 5px !important;} } .flickity-prev-next-button:hover {transform: translateY(-50%) scale(1.12);} .flickity-prev-next-button:active {transform: translateY(-50%) scale(1);transition: transform 0.05s ease-out;} .flickity-previous {left: 10px;} .flickity-next {right: 10px;} .flickity-rtl .flickity-previous {left: auto; right: 10px;} .flickity-rtl .flickity-next {right: auto; left: 10px;} .flickity-button-icon {position: absolute; left: 35%; top: 35%; width: 30%; height: 30%; fill: currentColor;} .flickity-page-dots {position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0;list-style: none; text-align: center; line-height: 1; color: currentColor; z-index: 2;} .hero .flickity-page-dots {bottom: 20px; color: #fff;} .flickity-rtl .flickity-page-dots {direction: rtl;} .flickity-page-dots .dot {display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin: 0 5px; border-radius: 100%; cursor: pointer; background-color: currentColor; opacity: 0.2;} .flickity-page-dots .dot:hover {opacity: 0.6;} .flickity-page-dots .dot.is-selected {opacity: 1; background-color: currentColor; width: 9px; height: 9px;} .flickity-enabled.is-fade .flickity-slider > * {pointer-events: none; z-index: 0;} .flickity-enabled.is-fade .flickity-slider > .is-selected {pointer-events: auto; z-index: 1;} /* Hero specific styles for flickity dots/arrows */ .hero[data-arrows="true"] {overflow: visible;} .hero[data-arrows="true"] .flickity-prev-next-button {top: auto; bottom: -20px; transform: none; z-index: 2;} .hero[data-arrows="true"] .flickity-prev-next-button:hover {transform: scale(1.12);} .hero[data-arrows="true"] .flickity-prev-next-button:active {transform: scale(1);} .hero[data-arrows="true"] .flickity-previous {left: auto; right: 90px;} .hero[data-arrows="true"] .flickity-next {right: 40px;} .hero.flickity-rtl[data-arrows="true"] .flickity-previous {right: auto; left: 90px;} .hero.flickity-rtl[data-arrows="true"] .flickity-next {right: auto; left: 40px;} @media only screen and (max-width: 768px) { .hero[data-arrows="true"] .flickity-prev-next-button {bottom: -16px;} .hero[data-arrows="true"] .flickity-previous {right: 60px;} .hero[data-arrows="true"] .flickity-next {right: 20px;} .hero.flickity-rtl[data-arrows="true"] .flickity-previous {left: 60px;} .hero.flickity-rtl[data-arrows="true"] .flickity-next {left: 20px;} } /*Change dots to bars*/ .hero[data-bars="true"] .flickity-page-dots {bottom: 0; height: 6px; line-height: 6px; z-index: 2;} [data-bars="true"] .flickity-page-dots .dot {position: relative; border-radius: 0; width: 120px; height: 6px; border: 0; opacity: 1; vertical-align: top; background: none; overflow: hidden;} .product--description .product-block at-rte.page-width {padding: 0;} .product--description .product-single__meta {padding-top: 10px!important;} @media only screen and (max-width: 768px) { [data-bars="true"] .flickity-page-dots .dot {width: 45px;} } [data-bars="true"] .flickity-page-dots .dot:before, [data-bars="true"] .flickity-page-dots .dot:after {content: ""; display: block; position: absolute; left: 0; height: 100%; width: 100%;} [data-bars="true"] .flickity-page-dots .dot:before {opacity: 0.1; background-color: #000;} [data-bars="true"] .flickity-page-dots .dot:hover:before {opacity: 0.2;} [data-bars="true"] .flickity-page-dots .dot:after {transform: translateX(-100%); transition: none; background-color: currentColor;} [data-bars="true"] .flickity-page-dots .dot.is-selected:after {animation: slideshowBars 0s linear forwards;} /* Functional styling; * These styles are required for noUiSlider to function. * You don't need to change these rules to apply your design. */ .noUi-target, .noUi-target * { -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; touch-action: none; user-select: none; box-sizing: border-box;} .noUi-target {position: relative;} .noUi-base, .noUi-connects {width: 100%; height: 100%; position: relative; z-index: 1;} /* Wrapper for all connect elements. */ .noUi-connects {overflow: hidden; z-index: 0;} .noUi-connect, .noUi-origin {will-change: transform; position: absolute; z-index: 1; top: 0; right: 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; -webkit-transform-style: preserve-3d; transform-origin: 0 0; transform-style: flat;} .noUi-connect {height: 100%; width: 100%;} .noUi-origin {height: 10%; width: 10%;} /* Offset direction */ .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {left: 0; right: auto;} /* Give origins 0 height/width so they don't interfere with clicking the * connect elements. */ .noUi-vertical .noUi-origin {width: 0;} .noUi-horizontal .noUi-origin {height: 0;} .noUi-handle { -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute;} .noUi-touch-area {height: 100%; width: 100%;} .noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-origin {transition: transform 0.3s;} .noUi-state-drag * {cursor: inherit !important;} /* Slider size and handle placement; */ .noUi-horizontal {height: 18px;} .noUi-horizontal .noUi-handle {width: 34px; height: 28px; right: -17px; top: -6px;} .noUi-vertical {width: 18px;} .noUi-vertical .noUi-handle {width: 28px; height: 34px; right: -6px; top: -17px;} .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {left: -17px; right: auto;} /* Styling; * Giving the connect element a border radius causes issues with using transform: scale */ .noUi-target {background: #fafafa; border-radius: 4px; border: 1px solid #d3d3d3; box-shadow: inset 0 1px 1px #f0f0f0, 0 3px 6px -5px #bbb;} .noUi-connects {border-radius: 3px;} .noUi-connect {background: #3fb8af;} /* Handles and cursors; */ .noUi-draggable {cursor: ew-resize;} .noUi-vertical .noUi-draggable {cursor: ns-resize;} .noUi-handle {border: 1px solid #d9d9d9; border-radius: 3px; background: #fff; cursor: default; box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ebebeb, 0 3px 6px -3px #bbb;} .noUi-active {box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ddd, 0 3px 6px -3px #bbb;} /* Handle stripes; */ .noUi-handle:before, .noUi-handle:after {content: ""; display: block; position: absolute; height: 14px; width: 1px; background: #e8e7e6; left: 14px; top: 6px;} .noUi-handle:after {left: 17px;} .noUi-vertical .noUi-handle:before, .noUi-vertical .noUi-handle:after {width: 14px; height: 1px; left: 6px; top: 14px;} .noUi-vertical .noUi-handle:after {top: 17px;} /* Disabled state; */ [disabled] .noUi-connect {background: #b8b8b8;} [disabled].noUi-target, [disabled].noUi-handle, [disabled] .noUi-handle {cursor: not-allowed;} /* Base; * */ .noUi-pips, .noUi-pips * {box-sizing: border-box;} .noUi-pips {position: absolute; color: #999;} /* Values; * */ .noUi-value {position: absolute; white-space: nowrap; text-align: center;} .noUi-value-sub {color: #ccc; font-size: 10px;} /* Markings; * */ .noUi-marker {position: absolute; background: #ccc;} .noUi-marker-sub {background: #aaa;} .noUi-marker-large {background: #aaa;} /* Horizontal layout; * */ .noUi-pips-horizontal {padding: 10px 0; height: 80px; top: 100%; left: 0; width: 100%;} .noUi-value-horizontal {transform: translate(-50%, 50%);} .noUi-rtl .noUi-value-horizontal {transform: translate(50%, 50%);} .noUi-marker-horizontal.noUi-marker {margin-left: -1px; width: 2px; height: 5px;} .noUi-marker-horizontal.noUi-marker-sub {height: 10px;} .noUi-marker-horizontal.noUi-marker-large {height: 15px;} /* Vertical layout; * */ .noUi-pips-vertical {padding: 0 10px; height: 100%; top: 0; left: 100%;} .noUi-value-vertical {transform: translate(0, -50%); padding-left: 25px;} .noUi-rtl .noUi-value-vertical {transform: translate(0, 50%);} .noUi-marker-vertical.noUi-marker {width: 5px; height: 2px; margin-top: -1px;} .noUi-marker-vertical.noUi-marker-sub {width: 10px;} .noUi-marker-vertical.noUi-marker-large {width: 15px;} .noUi-tooltip {display: block; position: absolute; border: 1px solid #d9d9d9; border-radius: 3px; background: #fff; color: #000; padding: 5px; text-align: center; white-space: nowrap;} .noUi-horizontal .noUi-tooltip {transform: translate(-50%, 0); left: 50%; bottom: 120%;} .noUi-vertical .noUi-tooltip {transform: translate(0, -50%); top: 50%; right: 120%;} .noUi-horizontal .noUi-origin > .noUi-tooltip {transform: translate(50%, 0); left: auto; bottom: 10px;} .noUi-vertical .noUi-origin > .noUi-tooltip {transform: translate(0, -18px); top: auto; right: 28px;} .parallax-image img {width: 100%; height: 100%; object-fit: cover;} .parallax-image {position: absolute; width: 100%; height: 100%; overflow: hidden; transition: transform 0.05s linear;} .svg-mask {background: transparent !important; background-color: transparent !important; padding-bottom: 100% !important; position: relative !important;} .svg-mask .grid__image-ratio {background: transparent !important; background-color: transparent !important;} .svg-mask img, .svg-mask svg:not(.icon), .svg-mask video {-webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; height: 100% !important; position: absolute !important; object-fit: cover !important;} .svg-mask--landscape {padding-bottom: 56.25% !important;} .svg-mask--portrait {padding-bottom: 150% !important;} .svg-mask--square {padding-bottom: 100% !important;} .svg-mask--rounded-top img, .svg-mask--rounded-top svg:not(.icon), .svg-mask--rounded-top video {border-top-right-radius: 50%; border-top-left-radius: 50%;} .svg-mask--rounded img, .svg-mask--rounded svg:not(.icon), .svg-mask--rounded video {border-radius: 50%;} .svg-mask--star img, .svg-mask--star svg:not(.icon), .svg-mask--star video { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTI4NCcgaGVpZ2h0PScxMjUxJyB2aWV3Qm94PScwIDAgMTI4NCAxMjUxJyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGQ9J002NDIgMEw4MTkuMDA3IDI5MC40NDFMMTE1Ni40NSAyNDcuNzQ0TDEwMzkuNzMgNTY3LjIyTDEyODMuNSA4MDQuNDE5TDk2MC45NTYgOTEyLjM1OUw5MjcuNDk1IDEyNTAuODRMNjQyIDEwNjUuOTZMMzU2LjUwNCAxMjUwLjg0TDMyMy4wNDQgOTEyLjM1OUwwLjQ5NzQzNyA4MDQuNDE5TDI0NC4yNjggNTY3LjIyTDEyNy41NTUgMjQ3Ljc0NEw0NjQuOTkzIDI5MC40NDFMNjQyIDBaJyBmaWxsPScjQTQ5NUZCJy8+PC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTI4NCcgaGVpZ2h0PScxMjUxJyB2aWV3Qm94PScwIDAgMTI4NCAxMjUxJyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGQ9J002NDIgMEw4MTkuMDA3IDI5MC40NDFMMTE1Ni40NSAyNDcuNzQ0TDEwMzkuNzMgNTY3LjIyTDEyODMuNSA4MDQuNDE5TDk2MC45NTYgOTEyLjM1OUw5MjcuNDk1IDEyNTAuODRMNjQyIDEwNjUuOTZMMzU2LjUwNCAxMjUwLjg0TDMyMy4wNDQgOTEyLjM1OUwwLjQ5NzQzNyA4MDQuNDE5TDI0NC4yNjggNTY3LjIyTDEyNy41NTUgMjQ3Ljc0NEw0NjQuOTkzIDI5MC40NDFMNjQyIDBaJyBmaWxsPScjQTQ5NUZCJy8+PC9zdmc+Cg=="); } .svg-mask--rounded-wave img, .svg-mask--rounded-wave svg:not(.icon), .svg-mask--rounded-wave video { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTA2NicgaGVpZ2h0PScxMDY2JyB2aWV3Qm94PScwIDAgMTA2NiAxMDY2JyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGQ9J000OTIuNTA5IDMxLjgyOTJDNTAzLjA1NCAtMTAuMzE0OSA1NjIuOTQ2IC0xMC4zMTQ5IDU3My40OTEgMzEuODI5MlYzMS44MjkyQzU4Mi40MjQgNjcuNTMxIDYyOS44MzMgNzUuMDM5OCA2NDkuMzYxIDQzLjg0NThWNDMuODQ1OEM2NzIuNDEzIDcuMDIyODkgNzI5LjM3NCAyNS41MzA3IDcyNi4zOCA2OC44NzA3VjY4Ljg3MDdDNzIzLjg0MyAxMDUuNTg2IDc2Ni42MTEgMTI3LjM3NyA3OTQuODIzIDEwMy43NDRWMTAzLjc0NEM4MjguMTI1IDc1Ljg0NyA4NzYuNTggMTExLjA1MSA4NjAuMzM5IDE1MS4zNDRWMTUxLjM0NEM4NDYuNTgxIDE4NS40NzggODgwLjUyMiAyMTkuNDE5IDkxNC42NTYgMjA1LjY2MVYyMDUuNjYxQzk1NC45NDkgMTg5LjQyIDk5MC4xNTMgMjM3Ljg3NSA5NjIuMjU2IDI3MS4xNzdWMjcxLjE3N0M5MzguNjIzIDI5OS4zODkgOTYwLjQxNCAzNDIuMTU3IDk5Ny4xMjkgMzM5LjYyVjMzOS42MkMxMDQwLjQ3IDMzNi42MjYgMTA1OC45OCAzOTMuNTg3IDEwMjIuMTUgNDE2LjYzOVY0MTYuNjM5Qzk5MC45NiA0MzYuMTY3IDk5OC40NjkgNDgzLjU3NiAxMDM0LjE3IDQ5Mi41MDlWNDkyLjUwOUMxMDc2LjMxIDUwMy4wNTQgMTA3Ni4zMSA1NjIuOTQ2IDEwMzQuMTcgNTczLjQ5MVY1NzMuNDkxQzk5OC40NjkgNTgyLjQyNCA5OTAuOTYgNjI5LjgzMyAxMDIyLjE1IDY0OS4zNjFWNjQ5LjM2MUMxMDU4Ljk4IDY3Mi40MTMgMTA0MC40NyA3MjkuMzc0IDk5Ny4xMjkgNzI2LjM4VjcyNi4zOEM5NjAuNDE0IDcyMy44NDMgOTM4LjYyMyA3NjYuNjExIDk2Mi4yNTYgNzk0LjgyM1Y3OTQuODIzQzk5MC4xNTMgODI4LjEyNSA5NTQuOTQ5IDg3Ni41OCA5MTQuNjU2IDg2MC4zMzlWODYwLjMzOUM4ODAuNTIyIDg0Ni41ODEgODQ2LjU4MSA4ODAuNTIyIDg2MC4zMzkgOTE0LjY1NlY5MTQuNjU2Qzg3Ni41OCA5NTQuOTQ5IDgyOC4xMjUgOTkwLjE1MyA3OTQuODIzIDk2Mi4yNTZWOTYyLjI1NkM3NjYuNjExIDkzOC42MjMgNzIzLjg0MyA5NjAuNDE0IDcyNi4zOCA5OTcuMTI5Vjk5Ny4xMjlDNzI5LjM3NCAxMDQwLjQ3IDY3Mi40MTMgMTA1OC45OCA2NDkuMzYxIDEwMjIuMTVWMTAyMi4xNUM2MjkuODMzIDk5MC45NiA1ODIuNDI0IDk5OC40NjkgNTczLjQ5MSAxMDM0LjE3VjEwMzQuMTdDNTYyLjk0NiAxMDc2LjMxIDUwMy4wNTQgMTA3Ni4zMSA0OTIuNTA5IDEwMzQuMTdWMTAzNC4xN0M0ODMuNTc2IDk5OC40NjkgNDM2LjE2NyA5OTAuOTYgNDE2LjYzOSAxMDIyLjE1VjEwMjIuMTVDMzkzLjU4NyAxMDU4Ljk4IDMzNi42MjYgMTA0MC40NyAzMzkuNjIgOTk3LjEyOVY5OTcuMTI5QzM0Mi4xNTcgOTYwLjQxNCAyOTkuMzg5IDkzOC42MjMgMjcxLjE3NyA5NjIuMjU2Vjk2Mi4yNTZDMjM3Ljg3NSA5OTAuMTUzIDE4OS40MiA5NTQuOTQ5IDIwNS42NjEgOTE0LjY1NlY5MTQuNjU2QzIxOS40MTkgODgwLjUyMiAxODUuNDc4IDg0Ni41ODEgMTUxLjM0NCA4NjAuMzM5Vjg2MC4zMzlDMTExLjA1MSA4NzYuNTggNzUuODQ3IDgyOC4xMjUgMTAzLjc0NCA3OTQuODIzVjc5NC44MjNDMTI3LjM3NyA3NjYuNjExIDEwNS41ODYgNzIzLjg0MyA2OC44NzA3IDcyNi4zOFY3MjYuMzhDMjUuNTMwNyA3MjkuMzc0IDcuMDIyODcgNjcyLjQxMyA0My44NDU4IDY0OS4zNjFWNjQ5LjM2MUM3NS4wMzk4IDYyOS44MzMgNjcuNTMxIDU4Mi40MjQgMzEuODI5MiA1NzMuNDkxVjU3My40OTFDLTEwLjMxNDkgNTYyLjk0NiAtMTAuMzE0OSA1MDMuMDU0IDMxLjgyOTIgNDkyLjUwOVY0OTIuNTA5QzY3LjUzMSA0ODMuNTc2IDc1LjAzOTggNDM2LjE2NyA0My44NDU4IDQxNi42MzlWNDE2LjYzOUM3LjAyMjg2IDM5My41ODcgMjUuNTMwNyAzMzYuNjI2IDY4Ljg3MDcgMzM5LjYyVjMzOS42MkMxMDUuNTg2IDM0Mi4xNTcgMTI3LjM3NyAyOTkuMzg5IDEwMy43NDQgMjcxLjE3N1YyNzEuMTc3Qzc1Ljg0NyAyMzcuODc1IDExMS4wNTEgMTg5LjQyIDE1MS4zNDQgMjA1LjY2MVYyMDUuNjYxQzE4NS40NzggMjE5LjQxOSAyMTkuNDE5IDE4NS40NzggMjA1LjY2MSAxNTEuMzQ0VjE1MS4zNDRDMTg5LjQyIDExMS4wNTEgMjM3Ljg3NSA3NS44NDcgMjcxLjE3NyAxMDMuNzQ0VjEwMy43NDRDMjk5LjM4OSAxMjcuMzc3IDM0Mi4xNTcgMTA1LjU4NiAzMzkuNjIgNjguODcwN1Y2OC44NzA3QzMzNi42MjYgMjUuNTMwNyAzOTMuNTg3IDcuMDIyODcgNDE2LjYzOSA0My44NDU4VjQzLjg0NThDNDM2LjE2NyA3NS4wMzk4IDQ4My41NzYgNjcuNTMxIDQ5Mi41MDkgMzEuODI5MlYzMS44MjkyWicgZmlsbD0nI0E0OTVGQicvPjwvc3ZnPgo="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTA2NicgaGVpZ2h0PScxMDY2JyB2aWV3Qm94PScwIDAgMTA2NiAxMDY2JyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGQ9J000OTIuNTA5IDMxLjgyOTJDNTAzLjA1NCAtMTAuMzE0OSA1NjIuOTQ2IC0xMC4zMTQ5IDU3My40OTEgMzEuODI5MlYzMS44MjkyQzU4Mi40MjQgNjcuNTMxIDYyOS44MzMgNzUuMDM5OCA2NDkuMzYxIDQzLjg0NThWNDMuODQ1OEM2NzIuNDEzIDcuMDIyODkgNzI5LjM3NCAyNS41MzA3IDcyNi4zOCA2OC44NzA3VjY4Ljg3MDdDNzIzLjg0MyAxMDUuNTg2IDc2Ni42MTEgMTI3LjM3NyA3OTQuODIzIDEwMy43NDRWMTAzLjc0NEM4MjguMTI1IDc1Ljg0NyA4NzYuNTggMTExLjA1MSA4NjAuMzM5IDE1MS4zNDRWMTUxLjM0NEM4NDYuNTgxIDE4NS40NzggODgwLjUyMiAyMTkuNDE5IDkxNC42NTYgMjA1LjY2MVYyMDUuNjYxQzk1NC45NDkgMTg5LjQyIDk5MC4xNTMgMjM3Ljg3NSA5NjIuMjU2IDI3MS4xNzdWMjcxLjE3N0M5MzguNjIzIDI5OS4zODkgOTYwLjQxNCAzNDIuMTU3IDk5Ny4xMjkgMzM5LjYyVjMzOS42MkMxMDQwLjQ3IDMzNi42MjYgMTA1OC45OCAzOTMuNTg3IDEwMjIuMTUgNDE2LjYzOVY0MTYuNjM5Qzk5MC45NiA0MzYuMTY3IDk5OC40NjkgNDgzLjU3NiAxMDM0LjE3IDQ5Mi41MDlWNDkyLjUwOUMxMDc2LjMxIDUwMy4wNTQgMTA3Ni4zMSA1NjIuOTQ2IDEwMzQuMTcgNTczLjQ5MVY1NzMuNDkxQzk5OC40NjkgNTgyLjQyNCA5OTAuOTYgNjI5LjgzMyAxMDIyLjE1IDY0OS4zNjFWNjQ5LjM2MUMxMDU4Ljk4IDY3Mi40MTMgMTA0MC40NyA3MjkuMzc0IDk5Ny4xMjkgNzI2LjM4VjcyNi4zOEM5NjAuNDE0IDcyMy44NDMgOTM4LjYyMyA3NjYuNjExIDk2Mi4yNTYgNzk0LjgyM1Y3OTQuODIzQzk5MC4xNTMgODI4LjEyNSA5NTQuOTQ5IDg3Ni41OCA5MTQuNjU2IDg2MC4zMzlWODYwLjMzOUM4ODAuNTIyIDg0Ni41ODEgODQ2LjU4MSA4ODAuNTIyIDg2MC4zMzkgOTE0LjY1NlY5MTQuNjU2Qzg3Ni41OCA5NTQuOTQ5IDgyOC4xMjUgOTkwLjE1MyA3OTQuODIzIDk2Mi4yNTZWOTYyLjI1NkM3NjYuNjExIDkzOC42MjMgNzIzLjg0MyA5NjAuNDE0IDcyNi4zOCA5OTcuMTI5Vjk5Ny4xMjlDNzI5LjM3NCAxMDQwLjQ3IDY3Mi40MTMgMTA1OC45OCA2NDkuMzYxIDEwMjIuMTVWMTAyMi4xNUM2MjkuODMzIDk5MC45NiA1ODIuNDI0IDk5OC40NjkgNTczLjQ5MSAxMDM0LjE3VjEwMzQuMTdDNTYyLjk0NiAxMDc2LjMxIDUwMy4wNTQgMTA3Ni4zMSA0OTIuNTA5IDEwMzQuMTdWMTAzNC4xN0M0ODMuNTc2IDk5OC40NjkgNDM2LjE2NyA5OTAuOTYgNDE2LjYzOSAxMDIyLjE1VjEwMjIuMTVDMzkzLjU4NyAxMDU4Ljk4IDMzNi42MjYgMTA0MC40NyAzMzkuNjIgOTk3LjEyOVY5OTcuMTI5QzM0Mi4xNTcgOTYwLjQxNCAyOTkuMzg5IDkzOC42MjMgMjcxLjE3NyA5NjIuMjU2Vjk2Mi4yNTZDMjM3Ljg3NSA5OTAuMTUzIDE4OS40MiA5NTQuOTQ5IDIwNS42NjEgOTE0LjY1NlY5MTQuNjU2QzIxOS40MTkgODgwLjUyMiAxODUuNDc4IDg0Ni41ODEgMTUxLjM0NCA4NjAuMzM5Vjg2MC4zMzlDMTExLjA1MSA4NzYuNTggNzUuODQ3IDgyOC4xMjUgMTAzLjc0NCA3OTQuODIzVjc5NC44MjNDMTI3LjM3NyA3NjYuNjExIDEwNS41ODYgNzIzLjg0MyA2OC44NzA3IDcyNi4zOFY3MjYuMzhDMjUuNTMwNyA3MjkuMzc0IDcuMDIyODcgNjcyLjQxMyA0My44NDU4IDY0OS4zNjFWNjQ5LjM2MUM3NS4wMzk4IDYyOS44MzMgNjcuNTMxIDU4Mi40MjQgMzEuODI5MiA1NzMuNDkxVjU3My40OTFDLTEwLjMxNDkgNTYyLjk0NiAtMTAuMzE0OSA1MDMuMDU0IDMxLjgyOTIgNDkyLjUwOVY0OTIuNTA5QzY3LjUzMSA0ODMuNTc2IDc1LjAzOTggNDM2LjE2NyA0My44NDU4IDQxNi42MzlWNDE2LjYzOUM3LjAyMjg2IDM5My41ODcgMjUuNTMwNyAzMzYuNjI2IDY4Ljg3MDcgMzM5LjYyVjMzOS42MkMxMDUuNTg2IDM0Mi4xNTcgMTI3LjM3NyAyOTkuMzg5IDEwMy43NDQgMjcxLjE3N1YyNzEuMTc3Qzc1Ljg0NyAyMzcuODc1IDExMS4wNTEgMTg5LjQyIDE1MS4zNDQgMjA1LjY2MVYyMDUuNjYxQzE4NS40NzggMjE5LjQxOSAyMTkuNDE5IDE4NS40NzggMjA1LjY2MSAxNTEuMzQ0VjE1MS4zNDRDMTg5LjQyIDExMS4wNTEgMjM3Ljg3NSA3NS44NDcgMjcxLjE3NyAxMDMuNzQ0VjEwMy43NDRDMjk5LjM4OSAxMjcuMzc3IDM0Mi4xNTcgMTA1LjU4NiAzMzkuNjIgNjguODcwN1Y2OC44NzA3QzMzNi42MjYgMjUuNTMwNyAzOTMuNTg3IDcuMDIyODcgNDE2LjYzOSA0My44NDU4VjQzLjg0NThDNDM2LjE2NyA3NS4wMzk4IDQ4My41NzYgNjcuNTMxIDQ5Mi41MDkgMzEuODI5MlYzMS44MjkyWicgZmlsbD0nI0E0OTVGQicvPjwvc3ZnPgo="); } .svg-mask--splat-1 img, .svg-mask--splat-1 svg:not(.icon), .svg-mask--splat-1 video { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTA0OCcgaGVpZ2h0PScxMDUyJyB2aWV3Qm94PScwIDAgMTA0OCAxMDUyJyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGZpbGwtcnVsZT0nZXZlbm9kZCcgY2xpcC1ydWxlPSdldmVub2RkJyBkPSdNNTcwLjkwNSAxNTIuMzQ4QzY4OC40NDEgMTQwLjMzIDc3MS4xODcgLTI3LjkxNDggODg0Ljk0MSA0LjAyNTc1Qzk4Ny45OTcgMzIuOTYyMyAxMDA2LjIzIDE3OC4xODggMTAzMi42IDI4MS45ODVDMTA1NS43NiAzNzMuMTU0IDEwNTIuMjUgNDY4LjEzNCAxMDI1Ljc2IDU1OC4zODhDMTAwMS43IDY0MC4zMzYgOTQwLjI5OCA3MDAuNTM5IDg4OS41NTIgNzY5LjIxOUM4MzQuMDIyIDg0NC4zNzUgNzk1LjMgOTM0LjQ2IDcxMy45NSA5ODAuMzk3QzYyMi4zMTggMTAzMi4xNCA1MTAuMTA4IDEwNzMuNSA0MTAuNDM2IDEwMzkuNzdDMzExLjE4NiAxMDA2LjE4IDI3NS45MjcgODg3LjQwNSAyMDYuNjc3IDgwOC43MzdDMTM2LjcwMyA3MjkuMjQ4IDE0LjY1MzYgNjc5Ljk3OCAxLjIyNDE0IDU3NC45MDdDLTEyLjIxNDYgNDY5Ljc2MyA4OC4yODk2IDM4OC40MzMgMTQxLjIyMSAyOTYuNjEyQzE4OC42MTYgMjE0LjM5NCAyMDUuNjQzIDk0LjQ4MjEgMjk1LjU3NSA2NC4yODhDMzg4LjgwOSAzMi45ODUxIDQ3My4wNzEgMTYyLjM1MSA1NzAuOTA1IDE1Mi4zNDhaJyBmaWxsPScjQTQ5NUZCJy8+PC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTA0OCcgaGVpZ2h0PScxMDUyJyB2aWV3Qm94PScwIDAgMTA0OCAxMDUyJyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGZpbGwtcnVsZT0nZXZlbm9kZCcgY2xpcC1ydWxlPSdldmVub2RkJyBkPSdNNTcwLjkwNSAxNTIuMzQ4QzY4OC40NDEgMTQwLjMzIDc3MS4xODcgLTI3LjkxNDggODg0Ljk0MSA0LjAyNTc1Qzk4Ny45OTcgMzIuOTYyMyAxMDA2LjIzIDE3OC4xODggMTAzMi42IDI4MS45ODVDMTA1NS43NiAzNzMuMTU0IDEwNTIuMjUgNDY4LjEzNCAxMDI1Ljc2IDU1OC4zODhDMTAwMS43IDY0MC4zMzYgOTQwLjI5OCA3MDAuNTM5IDg4OS41NTIgNzY5LjIxOUM4MzQuMDIyIDg0NC4zNzUgNzk1LjMgOTM0LjQ2IDcxMy45NSA5ODAuMzk3QzYyMi4zMTggMTAzMi4xNCA1MTAuMTA4IDEwNzMuNSA0MTAuNDM2IDEwMzkuNzdDMzExLjE4NiAxMDA2LjE4IDI3NS45MjcgODg3LjQwNSAyMDYuNjc3IDgwOC43MzdDMTM2LjcwMyA3MjkuMjQ4IDE0LjY1MzYgNjc5Ljk3OCAxLjIyNDE0IDU3NC45MDdDLTEyLjIxNDYgNDY5Ljc2MyA4OC4yODk2IDM4OC40MzMgMTQxLjIyMSAyOTYuNjEyQzE4OC42MTYgMjE0LjM5NCAyMDUuNjQzIDk0LjQ4MjEgMjk1LjU3NSA2NC4yODhDMzg4LjgwOSAzMi45ODUxIDQ3My4wNzEgMTYyLjM1MSA1NzAuOTA1IDE1Mi4zNDhaJyBmaWxsPScjQTQ5NUZCJy8+PC9zdmc+Cg=="); } .svg-mask--splat-2 img, .svg-mask--splat-2 svg:not(.icon), .svg-mask--splat-2 video { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSdub25lJyBoZWlnaHQ9Jzg5Nicgdmlld0JveD0nMCAwIDk3NyA4OTYnIHdpZHRoPSc5NzcnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggY2xpcC1ydWxlPSdldmVub2RkJyBkPSdtOTc1LjY4NCAzODEuODMyYzE3LjI2MyA5NS4wMzMtMTQwLjIxNCAxMjkuMjMxLTE4Ny4xNzcgMjEzLjY2Ni01Mi4xMzggOTMuNzM3IDguNTE1IDI4OC4wOTUtOTguMjUzIDI5OS41MDMtMTI3LjE3NSAxMy41ODctMTM4LjA0OS0xMTUuMzYyLTI2My0xNDIuNjMtMTA5LjU4NS0yMy45MTQtMjI0LjUzNSA5MS44OTQtMzA4LjcxNSAxNy44NjQtODQuNTQzMy03NC4zNDggMTE4LjY4OC0yMDcuMzczIDkzLjgyOS0zMTcuMDk0LTIyLjE0OS05Ny43Ni0yMDQuMTk2NzItMTA0Ljg3OC0yMTIuMDcxNDAxLTIwNC44LTYuODY1NTc5LTg3LjExOCAxMDcuMDIxNDAxLTEzNi4xNzcgMTgxLjU5NjQwMS0xODEuOTAxMyA2Ni4xNjMtNDAuNTY2OCAxNDIuNTMxLTc2LjcwNDkgMjE5LjA4Mi02My43Njk5NiA3MS4zODMgMTIuMDYxNzYgMTQwLjQ4NiA2Mi43NzM1NiAxNjguODUyIDEyOS4zMjAyNiA5LjkyOSAyMy4yOTMgMjUuODM5IDU0LjUyOCA2OS45MiA3OC41MTcgOTEuODU5IDQ5Ljk5IDMwNC44MTYgMCAzMzUuOTM3IDE3MS4zMjV6JyBmaWxsPScjYTQ5NWZiJyBmaWxsLXJ1bGU9J2V2ZW5vZGQnLz48L3N2Zz4="); mask-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSdub25lJyBoZWlnaHQ9Jzg5Nicgdmlld0JveD0nMCAwIDk3NyA4OTYnIHdpZHRoPSc5NzcnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggY2xpcC1ydWxlPSdldmVub2RkJyBkPSdtOTc1LjY4NCAzODEuODMyYzE3LjI2MyA5NS4wMzMtMTQwLjIxNCAxMjkuMjMxLTE4Ny4xNzcgMjEzLjY2Ni01Mi4xMzggOTMuNzM3IDguNTE1IDI4OC4wOTUtOTguMjUzIDI5OS41MDMtMTI3LjE3NSAxMy41ODctMTM4LjA0OS0xMTUuMzYyLTI2My0xNDIuNjMtMTA5LjU4NS0yMy45MTQtMjI0LjUzNSA5MS44OTQtMzA4LjcxNSAxNy44NjQtODQuNTQzMy03NC4zNDggMTE4LjY4OC0yMDcuMzczIDkzLjgyOS0zMTcuMDk0LTIyLjE0OS05Ny43Ni0yMDQuMTk2NzItMTA0Ljg3OC0yMTIuMDcxNDAxLTIwNC44LTYuODY1NTc5LTg3LjExOCAxMDcuMDIxNDAxLTEzNi4xNzcgMTgxLjU5NjQwMS0xODEuOTAxMyA2Ni4xNjMtNDAuNTY2OCAxNDIuNTMxLTc2LjcwNDkgMjE5LjA4Mi02My43Njk5NiA3MS4zODMgMTIuMDYxNzYgMTQwLjQ4NiA2Mi43NzM1NiAxNjguODUyIDEyOS4zMjAyNiA5LjkyOSAyMy4yOTMgMjUuODM5IDU0LjUyOCA2OS45MiA3OC41MTcgOTEuODU5IDQ5Ljk5IDMwNC44MTYgMCAzMzUuOTM3IDE3MS4zMjV6JyBmaWxsPScjYTQ5NWZiJyBmaWxsLXJ1bGU9J2V2ZW5vZGQnLz48L3N2Zz4="); } .svg-mask--splat-3 img, .svg-mask--splat-3 svg:not(.icon), .svg-mask--splat-3 video { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTA3MicgaGVpZ2h0PScxMDUxJyB2aWV3Qm94PScwIDAgMTA3MiAxMDUxJyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGZpbGwtcnVsZT0nZXZlbm9kZCcgY2xpcC1ydWxlPSdldmVub2RkJyBkPSdNNjE4LjkxMyAyMTUuMzgzQzc0NS43NzUgMjI1LjY1NyA4NDEuNzUgMTguMDA0OSA5NjAuNjc4IDYzLjMyMjRDMTA2OS44NSAxMDQuOTI0IDEwNzAuNDMgMjcxLjI2MiAxMDcxLjk5IDM4OC4wMjhDMTA3My4yNSA0ODIuMjg4IDk3Mi4wMjYgNTUwLjg1NSA5NjguNDQ5IDY0NS4wNTVDOTY0LjE0NyA3NTguMzMxIDExMDMuNjkgODY4LjI5OCAxMDQ5Ljk2IDk2OC4xMjZDMTAwMC4yNCAxMDYwLjUgODU2LjQ2OCAxMDM4LjgyIDc1MS44NzYgMTA0Ny40MUM2NjQuMzE2IDEwNTQuNiA1NzMuNjY0IDEwNTQuNDQgNDk1Ljg3IDEwMTMuNjRDNDI0LjczMSA5NzYuMzMxIDQwOS44MzQgODc4LjY4OSAzNDMuNTgyIDgzMy4yNzJDMjQxLjM0OSA3NjMuMTkgNjYuMzk5NyA3OTMuNDE2IDEyLjExOTQgNjgyLjAyM0MtMzcuNTczOCA1ODAuMDQ0IDc5LjI3NTYgNDcyLjUzOCAxMTUuNDAyIDM2NS4wMDhDMTU2LjY3MiAyNDIuMTY0IDExNS4zMiA0MS44NTYzIDIzOS41OTggNC45MjU3M0MzODEuMDgxIC0zNy4xMTc2IDQ3MS43OTEgMjAzLjQ2OCA2MTguOTEzIDIxNS4zODNaJyBmaWxsPScjQTQ5NUZCJy8+PC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTA3MicgaGVpZ2h0PScxMDUxJyB2aWV3Qm94PScwIDAgMTA3MiAxMDUxJyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGZpbGwtcnVsZT0nZXZlbm9kZCcgY2xpcC1ydWxlPSdldmVub2RkJyBkPSdNNjE4LjkxMyAyMTUuMzgzQzc0NS43NzUgMjI1LjY1NyA4NDEuNzUgMTguMDA0OSA5NjAuNjc4IDYzLjMyMjRDMTA2OS44NSAxMDQuOTI0IDEwNzAuNDMgMjcxLjI2MiAxMDcxLjk5IDM4OC4wMjhDMTA3My4yNSA0ODIuMjg4IDk3Mi4wMjYgNTUwLjg1NSA5NjguNDQ5IDY0NS4wNTVDOTY0LjE0NyA3NTguMzMxIDExMDMuNjkgODY4LjI5OCAxMDQ5Ljk2IDk2OC4xMjZDMTAwMC4yNCAxMDYwLjUgODU2LjQ2OCAxMDM4LjgyIDc1MS44NzYgMTA0Ny40MUM2NjQuMzE2IDEwNTQuNiA1NzMuNjY0IDEwNTQuNDQgNDk1Ljg3IDEwMTMuNjRDNDI0LjczMSA5NzYuMzMxIDQwOS44MzQgODc4LjY4OSAzNDMuNTgyIDgzMy4yNzJDMjQxLjM0OSA3NjMuMTkgNjYuMzk5NyA3OTMuNDE2IDEyLjExOTQgNjgyLjAyM0MtMzcuNTczOCA1ODAuMDQ0IDc5LjI3NTYgNDcyLjUzOCAxMTUuNDAyIDM2NS4wMDhDMTU2LjY3MiAyNDIuMTY0IDExNS4zMiA0MS44NTYzIDIzOS41OTggNC45MjU3M0MzODEuMDgxIC0zNy4xMTc2IDQ3MS43OTEgMjAzLjQ2OCA2MTguOTEzIDIxNS4zODNaJyBmaWxsPScjQTQ5NUZCJy8+PC9zdmc+Cg=="); } .svg-mask--splat-4 img, .svg-mask--splat-4 svg:not(.icon), .svg-mask--splat-4 video { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNTE4JyBoZWlnaHQ9JzUwNCcgdmlld0JveD0nMCAwIDUxOCA1MDQnIGZpbGw9J25vbmUnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J00zMDMuNzkzIDg0LjY3M0MzMTkuOTQyIDEwOC41MjEgMzM1LjUzIDEyOC4yNTMgMzYwLjI4OSAxMzMuMzk3QzQwMy42NDMgMTQyLjQwNCA0NTQuNDIxIDk3LjczMiA0OTAuNDc5IDEyMy40NTdDNTIwLjMxMSAxNDQuNzM5IDUyMy44IDIxMC42NDYgNTEwLjQ3OSAyMzUuOTk5QzQ5NC45NzkgMjY1LjQ5OSA0NTguMjc4IDI4MC4wNCA0NDIuOTc5IDMwOS45OTlDNDI0LjYyOSAzNDUuOTMxIDQ1My43NCAzODQuOTY3IDQxMC40NzkgNDEzLjQ5OUMzNzcuNTc4IDQzNS4xOTggMzQxLjgxNiAzOTcuODcyIDMwMy43OTMgNDA4LjE5OEMyNDMuODg2IDQyNC40NjYgMjA5LjIgNTA0LjU0MSAxNDcuMTQ4IDUwMi45OTlDODkuMzQxNCA1MDEuNTYzIDMxLjUxMDMgNDU0LjgzNiAxMC40NzkzIDQwMC45MDhDLTEwLjc0ODEgMzQ2LjQ3NyAyLjQzNTM5IDI3NS4wNTYgNDEuMjE1IDIzMS4zNjZDNjkuNSAxOTkuNSAxMDUgMTg5IDEyMi40OCAxMzlDMTMxLjkzNSAxMTEuOTUzIDExOS40OCAzNiAxNzQuMzc3IDYuOTQ5OThDMjE5LjYxNyAtMTYuOTg5OSAyNjYuNDQyIDI0LjAyMjEgMzAzLjc5MyA4NC42NzNaJyBmaWxsPScjQTQ5NUZCJy8+PC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNTE4JyBoZWlnaHQ9JzUwNCcgdmlld0JveD0nMCAwIDUxOCA1MDQnIGZpbGw9J25vbmUnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J00zMDMuNzkzIDg0LjY3M0MzMTkuOTQyIDEwOC41MjEgMzM1LjUzIDEyOC4yNTMgMzYwLjI4OSAxMzMuMzk3QzQwMy42NDMgMTQyLjQwNCA0NTQuNDIxIDk3LjczMiA0OTAuNDc5IDEyMy40NTdDNTIwLjMxMSAxNDQuNzM5IDUyMy44IDIxMC42NDYgNTEwLjQ3OSAyMzUuOTk5QzQ5NC45NzkgMjY1LjQ5OSA0NTguMjc4IDI4MC4wNCA0NDIuOTc5IDMwOS45OTlDNDI0LjYyOSAzNDUuOTMxIDQ1My43NCAzODQuOTY3IDQxMC40NzkgNDEzLjQ5OUMzNzcuNTc4IDQzNS4xOTggMzQxLjgxNiAzOTcuODcyIDMwMy43OTMgNDA4LjE5OEMyNDMuODg2IDQyNC40NjYgMjA5LjIgNTA0LjU0MSAxNDcuMTQ4IDUwMi45OTlDODkuMzQxNCA1MDEuNTYzIDMxLjUxMDMgNDU0LjgzNiAxMC40NzkzIDQwMC45MDhDLTEwLjc0ODEgMzQ2LjQ3NyAyLjQzNTM5IDI3NS4wNTYgNDEuMjE1IDIzMS4zNjZDNjkuNSAxOTkuNSAxMDUgMTg5IDEyMi40OCAxMzlDMTMxLjkzNSAxMTEuOTUzIDExOS40OCAzNiAxNzQuMzc3IDYuOTQ5OThDMjE5LjYxNyAtMTYuOTg5OSAyNjYuNDQyIDI0LjAyMjEgMzAzLjc5MyA4NC42NzNaJyBmaWxsPScjQTQ5NUZCJy8+PC9zdmc+Cg=="); } /* Shared styling for all images in our themes It's a work in progress and we're trying to move away from having to add specific styling for images in themes All images now have a base fade-in animation when they're loaded Motion & Streamline have settings to enable/disable animations for images */ .svg-mask is-land[data-image-type], .image-wrap:not(.image-wrap__thumbnail) is-land[data-image-type], .grid__image-ratio is-land[data-image-type], .countdown__background-image-wrapper is-land[data-image-type], .social-section__image-wrapper is-land[data-image-type], .fading-images__item-wrapper is-land[data-image-type] {width: 100%; height: 100%; position: absolute; top: 0; left: 0;} img {border: 0 none; display: block; max-width: 100%; height: auto;} .image-element {opacity: 0;} .image-element[loading="eager"] {opacity: 1;} .template-giftcard .image-element {opacity: 1;} [data-animate_images="false"] .image-element {opacity: 1;} [data-media-gallery-layout="stacked"] .image-element {opacity: 1;} .image-element[data-animate="fadein"] {--animate-duration: 0.5s; /* * Gem's new stacked images will have the fade-in animation disabled */ } [data-media-gallery-layout="stacked"] .image-element[data-animate="fadein"] {animation: none;} /* * Remove animation from color scheme images */ .image-element.scheme-image[data-animate="fadein"] { animation: none; } /* Remove animation from eagerly loaded images */ .image-element[data-animate="fadein"][loading="eager"] {animation: none;} .image-element.hero__image[data-animate="fadein"] {animation: none;} /* This should ensure that images show up if JS is disabled */ .no-js .image-element {opacity: 1;} .image-wrap {position: relative;} .image-wrap img {width: 100%; object-fit: cover; height: auto;} .rte p[style*="text-align: center"] img, .rte div[style*="text-align: center"] img {margin-left: auto;margin-right: auto;} *, input, :before, :after { box-sizing: border-box;} html, body {padding: 0; margin: 0;} article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;} audio, canvas, progress, video {display: inline-block; vertical-align: baseline;} input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {height: auto;} input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;} .grid {list-style: none; margin: 0; padding: 0; margin-left: calc(var(--grid-gutter) * -1);} @media only screen and (max-width: 768px) { .grid {margin-left: calc(var(--grid-gutter-small) * -1);} html[dir="rtl"] .grid {margin-left: 0; margin-right: calc(var(--grid-gutter-small) * -1);} } html[dir="rtl"] .grid {margin-left: 0; margin-right: calc(var(--grid-gutter) * -1);} .grid--small {margin-left: -10px;} .grid--small .grid__item {padding-left: 10px;} .grid__item {float: left; padding-left: var(--grid-gutter); width: 100%; min-height: 1px;} @media only screen and (max-width: 768px) { .grid__item {padding-left: var(--grid-gutter-small);} html[dir="rtl"] .grid__item {padding-left: 0; padding-right: var(--grid-gutter-small);} } html[dir="rtl"] .grid__item {float: right; padding-left: 0; padding-right: var(--grid-gutter);} .grid--flush-bottom {margin-bottom: calc(var(--grid-gutter) * -1); overflow: auto;} .grid--flush-bottom > .grid__item {margin-bottom: var(--grid-gutter);} .grid--center {text-align: center;} .grid--center .grid__item {float: none; display: inline-block; vertical-align: top; text-align: left;} html[dir="rtl"] .grid--center .grid__item {text-align: right;} /* Flex grid for products, collections, search */ .new-grid {display: flex; flex-wrap: wrap; margin-left: calc(var(--productGridMargin) * -1); margin-right: calc(var(--productGridMargin) * -1); word-break: break-word;} .new-grid--center {justify-content: center;} .grid-item {flex: 0 0 100%; align-items: stretch; display: flex; margin-bottom: var(--productGridMargin); padding-left: var(--productGridMargin); padding-right: var(--productGridMargin);} [data-view="custom-grid-item-width"] .grid-item.medium-up--one-sixth {flex: 0 auto;} [data-view="custom-grid-item-width"] .grid-item {flex: auto;} /* 6 per row, scrollable on mobile */ [data-view="scrollable"] .grid-item {flex: 0 0 calc(100% / 6); max-width: 250px;} /* 7 per row, scrollable on mobile (recently viewed) */ [data-view="scrollable-7"] .grid-item {flex: 0 0 calc(100% / 7);} /* 5 per row, scrollable on mobile */ [data-view="scrollable-5"] .grid-item {flex: 0 0 calc(100% / 5);} /* 5 per row, 2 mobile */ [data-view="xsmall"] .grid-item {flex: 0 0 20%;} /* 4 per row, 2 per row mobile */ [data-view="small"] .grid-item {flex: 0 0 25%;} /* 3 per row, 3 per row mobile */ [data-view="medium"] .grid-item {flex: 0 0 calc(100% / 4);} /* 2 per row, 2 per row mobile */ [data-view="large"] .grid-item {flex: 0 0 50%;} /* 6 per row, 3 mobile */ [data-view="6-3"] .grid-item {flex: 0 0 calc(100% / 4);} [data-view="6-2"] .grid-item {flex: 0 0 calc(100% / 5);} [data-view="3-1"] .grid-item {flex: 0 0 calc(100% / 3);} @media only screen and (max-width: 768px) { [data-view="xsmall"] .grid-item {flex: 0 0 50%;} [data-view="small"] .grid-item {flex: 0 0 50%;} [data-view="medium"] .grid-item {flex: 0 0 50%;} [data-view="large"] .grid-item {flex: 0 0 100%;} [data-view="subcollections"] .grid-item {flex: 0 0 28%;} [data-view="6-3"] .grid-item {flex: 0 0 calc(100% / 3);} [data-view="6-2"] .grid-item {flex: 0 0 50%;} [data-view="3-1"] .grid-item {flex: 0 0 100%;} } .grid-item__content {position: relative; display: flex; flex-direction: column; text-align: left;width: 100%; background-color: var(--colorBody); padding: 10px;} html[dir="rtl"] .grid-item__content {text-align: right;} .grid-item__link {display: block; width: 100%;} [data-grid-style="grey-round"] .grid-item__link {overflow: hidden; border-radius: var(--productRadius) var(--productRadius) 0 0;} [data-grid-style="white-round"] .grid-item__link {overflow: hidden; border-radius: var(--productRadius);} [data-grid-style="grey-round"] [data-view="list"] .grid-item__link {border-radius: var(--productRadius) 0 0 var(--productRadius);} [data-grid-style="white-round"] [data-view="list"] .grid-item__link {border-radius: var(--productRadius) 0 0 var(--productRadius);} .grid-item__meta {margin: 12px;} @media only screen and (min-width: 769px) { .grid-item__meta {margin: 20px;} } .one-whole {width: 100%;} .one-half {width: 50%;} .one-third {width: 33.33333%;} .two-thirds {width: 66.66667%;} .one-quarter {width: 25%;} .two-quarters {width: 50%;} .three-quarters {width: 75%;} .one-fifth {width: 20%;} .two-fifths {width: 40%;} .three-fifths {width: 60%;} .four-fifths {width: 80%;} .one-sixth {width: 16.66667%;} .two-sixths {width: 33.33333%;} .three-sixths {width: 50%;} .four-sixths {width: 66.66667%;} .five-sixths {width: 83.33333%;} @media only screen and (max-width: 768px) { .small--one-whole {width: 100%;} .small--one-half {width: 50%;} .small--one-third {width: 33.33333%;} .small--two-thirds {width: 66.66667%;} .grid--uniform .small--one-half:nth-of-type(odd), .grid--uniform .small--one-third:nth-of-type(3n + 1) {clear: both;} .small--one-quarter {width: 25%;} .small--two-quarters {width: 50%;} .small--three-quarters {width: 75%;} .grid--uniform .small--one-quarter:nth-of-type(4n + 1) {clear: both;} .small--one-fifth {width: 20%;} .small--two-fifths {width: 40%;} .small--three-fifths {width: 60%;} .small--four-fifths {width: 80%;} .grid--uniform .small--one-fifth:nth-of-type(5n + 1) {clear: both;} .small--one-sixth {width: 16.66667%;} .small--two-sixths {width: 33.33333%;} .small--three-sixths {width: 50%;} .small--four-sixths {width: 66.66667%;} .small--five-sixths {width: 83.33333%;} .grid--uniform .small--one-sixth:nth-of-type(6n + 1), .grid--uniform .small--three-sixths:nth-of-type(odd), .grid--uniform .small--two-sixths:nth-of-type(3n + 1) {clear: both;} } @media only screen and (min-width: 769px) { .medium-up--one-whole {width: 100%;} .medium-up--one-half {width: 50%;} .medium-up--one-third {width: 33.33333%;} .medium-up--two-thirds {width: 66.66667%;} .grid--uniform .medium-up--one-half:nth-of-type(odd), .grid--uniform .medium-up--one-third:nth-of-type(3n + 1) {clear: both;} .medium-up--one-quarter {width: 25%;} .medium-up--two-quarters {width: 50%;} .medium-up--three-quarters {width: 75%;} .grid--uniform .medium-up--one-quarter:nth-of-type(4n + 1) {clear: both;} .medium-up--one-fifth {width: 20%;} .medium-up--two-fifths {width: 40%;} .medium-up--three-fifths {width: 60%;} .medium-up--four-fifths {width: 80%;} .grid--uniform .medium-up--one-fifth:nth-of-type(5n + 1) {clear: both;} .medium-up--one-sixth {width: 16.66667%;} .medium-up--two-sixths {width: 33.33333%;} .medium-up--three-sixths {width: 50%;} .medium-up--four-sixths {width: 66.66667%;} .medium-up--five-sixths {width: 83.33333%;} .grid--uniform .medium-up--one-sixth:nth-of-type(6n + 1), .grid--uniform .medium-up--three-sixths:nth-of-type(odd), .grid--uniform .medium-up--two-sixths:nth-of-type(3n + 1) {clear: both;} } .show {display: block !important;} .hide {display: none !important;} .text-left {text-align: left !important;} .text-right {text-align: right !important;} .text-center {text-align: center !important;} @media only screen and (max-width: 768px) { .small--show {display: block !important;} .small--text-left {text-align: left !important;} .small--text-right {text-align: right !important;} .small--text-center {text-align: center !important;} } @media only screen and (min-width: 991px) { .medium-up--hide {display: none !important;} } .clearfix::after {clear: both; content: ""; display: table;} .is-transitioning {display: block !important; visibility: visible !important;} .visually-hidden {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;} .overlay::after {content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--zIndexOverlay, auto);} /*Keep dimensions but hide visually*/ .visually-invisible {opacity: 0 !important;} /*============================================================================ Skip to content button - Overrides .visually-hidden when focused ==============================================================================*/ .skip-link:focus {clip: auto; width: auto; height: auto; margin: 0; color: var(--colorTextBody); background-color: var(--colorBody); padding: 10px; opacity: 1; z-index: 10000; transition: none;} html {touch-action: manipulation;} html[dir="rtl"] {direction: rtl;} html, body {background-color: var(--colorBody); color: var(--colorTextBody);} @media only screen and (max-width: 768px) { /* .supports-touch.lock-scroll {overflow: hidden;} */ @supports (-webkit-touch-callout: none) {.supports-touch.lock-scroll {overflow: initial;}} } .transition-body {position: relative; z-index: 2;} .recently-viewed__section {position: relative; z-index: 1;} .page-width {max-width: 1320px; margin: 0 auto;} .page-width, .page-full {padding: 0 var(--pageWidthPadding);} .page-width--narrow {max-width: var(--pageNarrow);} .page-width--tiny {max-width: 450px;} @media only screen and (max-width: 768px) { .page-width--flush-small {padding: 0;} .nws_sec-img .newsletter__input-group > div {flex: auto !important;} } .page-content, .shopify-policy__container, .shopify-email-marketing-confirmation__container {padding-top: var(--pageTopPadding); padding-bottom: var(--pageTopPadding);} .shopify-email-marketing-confirmation__container {text-align: center;} .main-content {display: block; min-height: 300px; box-shadow: 0 calc(var(--header-padding-bottom) * -1) var(--colorNav);} @media only screen and (min-width: 769px) { .main-content {min-height: auto;} } .template-challange .main-content {min-height: 0;} hr, .hr--small, .hr--medium, .hr--large {height: 1px; border: 0; border-top: 1px solid; border-top-color: var(--colorBorder);} .hr--small {margin: 15px auto;} .hr--medium {margin: 30px auto;} .hr--large {margin: var(--gutter) auto;} @media only screen and (min-width: 769px) { .hr--large {margin: calc(var(--gutter) * 1.5) auto;} } .page-blocks + .hr--large, .page-blocks + [data-section-type="recently-viewed"] .hr--large {margin-top: 0;} .hr--clear {border: 0;} /*============================================================================ Responsive tables, defined with .table--responsive on table element. ==============================================================================*/ @media only screen and (max-width: 768px) { .table--responsive thead {display: none;} .table--responsive tr {display: block;} .table--responsive tr, .table--responsive td {float: left; clear: both; width: 100%;} .table--responsive th, .table--responsive td {display: block; text-align: right; padding: 15px;} .table--responsive td:before {content: attr(data-label); float: left; font-size: 12px; padding-right: 10px;} } @media only screen and (max-width: 768px) { .table--small-hide {display: none !important;} .table__section + .table__section {position: relative; margin-top: 10px;padding-top: 15px;} .table__section + .table__section:after {content: ""; display: block; position: absolute; top: 0; left: 15px; right: 15px; border-bottom: 1px solid; border-bottom-color: var(--colorBorder);} } details summary::-webkit-details-marker {display: none;} body, input, textarea, button, select, .faux-select {font-family: var(--typeBasePrimary), var(--typeBaseFallback); font-size: var(--typeBaseSize); letter-spacing: var(--typeBaseSpacing); line-height: var(--typeBaseLineHeight); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-rendering: optimizeSpeed;} body {font-weight: var(--typeBaseWeight);} p {margin: 0 0 calc(var(--gutter) / 2) 0;} p:last-child {margin-bottom: 0;} p img {margin: 0;} em {font-style: italic;} b, strong {font-weight: bold;} small, p[data-spam-detection-disclaimer] {font-size: 0.85em;} sup, sub {position: relative; font-size: 60%; vertical-align: baseline;} sup {top: -0.5em;} sub {bottom: -0.5em;} blockquote, .rte blockquote {margin: 0; padding: calc(var(--gutter) / 2) var(--gutter) 40px;} blockquote p, .rte blockquote p {margin-bottom: 0;} blockquote p + cite, .rte blockquote p + cite {margin-top: calc(var(--gutter) / 2);} blockquote cite, .rte blockquote cite {display: block;} code, pre {background-color: #faf7f5; font-family: Consolas, monospace; font-size: 1em; border: 0 none; padding: 0 2px; color: #51ab62;} pre {overflow: auto; padding: calc(var(--gutter) / 2); margin: 0 0 var(--gutter);} label:not(.variant__button-label):not(.text-label), .label {font-weight: var(--typeHeaderWeight); font-size: calc(var(--typeBaseSize) + 1px);} label {display: block; margin-bottom: 10px;} .text-label a {-webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px;} .label-info {display: block; margin-bottom: 10px;} .h0, .heading-font-stack, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback); font-weight: var(--typeHeaderWeight); letter-spacing: var(--typeHeaderSpacing); line-height: var(--typeHeaderLineHeight); } [data-type_header_capitalize="true"] .h0, [data-type_header_capitalize="true"] .heading-font-stack, [data-type_header_capitalize="true"] h1, [data-type_header_capitalize="true"] .h1, [data-type_header_capitalize="true"] h2, [data-type_header_capitalize="true"] .h2, [data-type_header_capitalize="true"] h3, [data-type_header_capitalize="true"] .h3, [data-type_header_capitalize="true"] h4, [data-type_header_capitalize="true"] .h4, [data-type_header_capitalize="true"] h5, [data-type_header_capitalize="true"] .h5, [data-type_header_capitalize="true"] h6, [data-type_header_capitalize="true"] .h6 { text-transform: uppercase; } .h0, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {display: block; margin: 0 0 15px;} @media only screen and (min-width: 769px) { .h0, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {margin: 0 0 20px;} } .h0 a, h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a, h6 a, .h6 a {-webkit-text-decoration: none; text-decoration: none; font-weight: inherit;} /* Mobile sizes */ .h0 { font-size: var(--typeHeaderSize); font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback); font-weight: var(--typeHeaderWeight); letter-spacing: var(--typeHeaderSpacing); line-height: var(--typeHeaderLineHeight); } h1, .h1 {font-size: calc(var(--typeHeaderSize) * 0.85);} h2, .h2 {font-size: calc(var(--typeHeaderSize) * 0.63);} h3, .h3 {font-size: calc(var(--typeHeaderSize) * 0.57);} h4, .h4 {font-size: calc(var(--typeHeaderSize) * 0.55);} /* Desktop sizes */ @media only screen and (min-width: 769px) { .h0 {font-size: calc(var(--typeHeaderSize) * 1.25);} h1, .h1 {font-size: var(--typeHeaderSize);} h2, .h2 {font-size: calc(var(--typeHeaderSize) * 0.85);} h3, .h3 {font-size: calc(var(--typeHeaderSize) * 0.7);} .h3--mobile {font-size: calc(var(--typeHeaderSize) * 0.57);} } .accent-subtitle {letter-spacing: 0.07em; margin: 0 0 20px;} /*Standardize text spacing sometimes*/ .text-spacing, .text-spacing.rte:last-child {margin-bottom: 15px;} @media only screen and (min-width: 769px) { .text-spacing, .text-spacing.rte:last-child {margin-bottom: 25px;} } @media only screen and (max-width: 768px) { .rte table td, .rte table th {padding: 6px 8px;} } .collapsible-content .rte table td, .collapsible-content .rte table th {padding: 6px 8px;} .enlarge-text {font-size: calc(var(--typeBaseSize) + 2px);} @media only screen and (min-width: 769px) { .enlarge-text {font-size: calc(var(--typeBaseSize) + 4px);} } @media only screen and (min-width: 769px) { .table--small-text {font-size: calc(var(--typeBaseSize) * 0.85);} } .index-section--footer h3 {font-size: 1.5em;} /*================ RTL overrides ================*/ html[dir="rtl"] .text-left {text-align: right !important;} html[dir="rtl"] .text-right {text-align: left !important;} /*Icon + text element that prevents awkward line wrapping*/ .icon-and-text {display: flex; flex-wrap: nowrap; align-items: center;} .icon-and-text .icon {flex: 0 0 auto;} .capitalize-first-letter:first-letter {font-size: 55px; float: left; margin-right: 6px; margin-top: -20px; font-weight: var(--typeHeaderWeight);} ul, ol {margin: 0 0 calc(var(--gutter) / 2) var(--gutter); padding: 0;text-rendering: optimizeLegibility;} ol ol {list-style: lower-alpha;} ol {list-style: decimal;} ul ul, ul ol, ol ol, ol ul {margin: 4px 0 5px 20px;} li {margin-bottom: 0.25em;} ul.square {list-style: square outside;} ul.disc {list-style: disc outside;} ol.alpha {list-style: lower-alpha outside;} .no-bullets {list-style: none outside; margin-left: 0;} .inline-list {padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center;} .inline-list li {display: block; margin-bottom: 0;} .inline-list--no-wrap {flex-wrap: nowrap;} table {width: 100%; border-spacing: 1px; position: relative; border: 0 none; background: var(--colorBorder);} .table-wrapper {max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch;} td, th {border: 0 none; text-align: left; padding: 10px 15px; background: var(--colorBody);} html[dir="rtl"] td, html[dir="rtl"] th {text-align: right;} th, .table__title {font-weight: var(--typeHeaderWeight);} a {color: var(--colorTextBody); -webkit-text-decoration: none; text-decoration: none; background: transparent;} a:hover {color: var(--colorTextBody);} /*Force an input/button to look like a text link*/ .text-link {display: inline; border: 0 none; background: none; padding: 0; margin: 0; color: currentColor; background: transparent;} .text-link:hover {color: currentColor;} /*Links in RTE*/ .rte a, .shopify-policy__container a, .shopify-email-marketing-confirmation__container a {color: var(--colorLink);} button {overflow: visible; color: currentColor;} button[disabled], html input[disabled] {cursor: default;} .btn, .rte .btn, .shopify-payment-button .shopify-payment-button__button--unbranded { line-height: 1.42; -webkit-text-decoration: none; text-decoration: none; text-align: center; white-space: normal; font-size: calc(var(--typeBaseSize) + 2px); font-weight: var(--typeHeaderWeight); display: inline-block; padding: var(--btnPadding); margin: 0; width: auto; min-width: 90px; vertical-align: middle; cursor: pointer; border: 1px solid transparent; -webkit-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; border-radius: var(--buttonRadius); color: var(--colorBtnPrimaryText); background: var(--colorBtnPrimary); } .btn:hover, .rte .btn:hover, .shopify-payment-button .shopify-payment-button__button--unbranded:hover {color: var(--colorBtnPrimaryText); background-color: var(--colorBtnPrimary);} .btn[disabled], .rte .btn[disabled], .shopify-payment-button .shopify-payment-button__button--unbranded[disabled], .btn.disabled, .rte .btn.disabled, .shopify-payment-button .shopify-payment-button__button--unbranded.disabled {cursor: default; color: var(--disabledGreyText); background-color: var(--disabledGrey);} .btn[disabled]:hover, .rte .btn[disabled]:hover, .shopify-payment-button .shopify-payment-button__button--unbranded[disabled]:hover, .btn.disabled:hover, .rte .btn.disabled:hover, .shopify-payment-button .shopify-payment-button__button--unbranded.disabled:hover { color: var(--disabledGreyText); background-color: var(--disabledGrey); } /*Mimic the .btn hover style for Shopify Payment Button*/ .shopify-payment-button .shopify-payment-button__button--unbranded:hover:not([disabled]) {color: var(--colorBtnPrimaryText); background-color: var(--colorBtnPrimary);} /*More payment options button color*/ .shopify-payment-button__more-options {color: inherit;} .btn--secondary, .block-buy-buttons[data-show-dynamic-checkout] .btn, .rte .btn--secondary {border: 1px solid; border-color: var(--colorTextBody); color: var(--colorTextBody); background-color: var(--colorBody);} .btn--secondary:hover, .block-buy-buttons[data-show-dynamic-checkout] .btn:hover, .rte .btn--secondary:hover {background-color: var(--colorBody); color: var(--colorTextBody);} .btn--secondary[disabled], .block-buy-buttons[data-show-dynamic-checkout] .btn[disabled], .rte .btn--secondary[disabled], .btn--secondary.disabled, .block-buy-buttons[data-show-dynamic-checkout] .btn.disabled, .rte .btn--secondary.disabled {cursor: default; color: var(--disabledGreyText); background-color: var(--disabledGrey); border-color: var(--disabledBorder);} .btn--circle {padding: 8px; border-radius: 50%; min-width: 0; line-height: 1;} .btn--circle .icon {width: 18px; height: 18px;} .btn--circle:before, .btn--circle:after {content: none; background: none; width: auto;} .btn--circle.btn--large .icon {width: 30px; height: 30px;} .btn--circle.btn--large {padding: 15px;} .btn--circle.btn--loading {text-indent: unset;} @media only screen and (max-width: 768px) { .btn--circle.btn--loading:before {width: 18px; height: 18px; margin-left: -9px; margin-top: -9px; border-width: 2px;} } .btn--circle.btn--loading svg {opacity: 0;} .btn--icon {min-width: 0; padding: 6px;} .btn--icon .icon {display: block; width: 23px;height: 23px;} .btn--small {padding: 8px 14px; font-size: calc(var(--typeBaseSize) - 2px);} .btn--large {padding: 15px 20px;} .btn--full {width: 100%;} .btn--inverse {background-color: transparent; color: #fff; border: 2px solid #fff;} .btn--inverse:hover, .btn--inverse:focus {background-color: transparent;} .btn--loading {position: relative; text-indent: -9999px; background-color: var(--colorBtnPrimaryDim); color: var(--colorBtnPrimaryDim);} .btn--loading:hover, .btn--loading:active {background-color: var(--colorBtnPrimaryDim); color: var(--colorBtnPrimaryDim);} .btn--loading:before {content: ""; display: block; width: 22px; height: 22px; position: absolute; left: 50%; top: 50%; margin-left: -11px; margin-top: -11px; border-radius: 50%; border: 3px solid; border-color: var(--colorBtnPrimaryText); border-top-color: transparent; animation: spin 1s infinite linear;} /*Alt loading state*/ .btn--loading.btn--secondary, .block-buy-buttons[data-show-dynamic-checkout] .btn--loading {color: var(--colorTextBody); background: transparent;} .btn--loading.btn--secondary:before, .block-buy-buttons[data-show-dynamic-checkout] .btn--loading:before {border-color: var(--colorTextBody); border-top-color: transparent;} .collapsible-trigger-btn {text-align: left; display: block; width: 100%; padding: 15px 0; font-weight: 700; font-size: 20px;} @media only screen and (max-width: 768px) { .collapsible-trigger-btn {padding: 12px 17px 12px 0; font-size: calc(var(--typeBaseSize) + 1px);} } .collapsible-content__inner {padding: 0 0 15px;} @media only screen and (max-width: 768px) { .collapsible-content__inner {padding: 0 17px 12px;} } .collapsible-trigger-btn--borders {border-bottom: 1px solid; border-color: var(--colorBorder);} .collapsible-trigger-btn--borders.is-open {border-color: transparent;} .collapsible-content + .collapsible-trigger-btn--borders {margin-top: -1px;} .collapsible-trigger-btn--borders + .collapsible-content--expanded {margin-bottom: var(--gutter);} .collapsible-trigger-btn--borders + .collapsible-content--expanded:last-child {margin-bottom: -1px;} .collapsible-trigger-btn--borders-top {border-top: 1px solid;border-top-color: var(--colorBorder);} /*============================================================================ Button styles when additional quick checkout buttons are enabled on product page ==============================================================================*/ .shopify-payment-button {margin-top: 10px;} .shopify-payment-button .shopify-payment-button__button--unbranded {display: block; width: 100%; transition: none;} .payment-buttons .cart__checkout, .payment-buttons .add-to-cart, .payment-buttons .shopify-payment-button, .payment-buttons .shopify-payment-button__button--unbranded {min-height: 54px;} .add-to-cart.btn--secondary {border: 1px solid; border-color: var(--colorTextBody);} .add-to-cart.btn--secondary.disabled, .add-to-cart.btn--secondary[disabled] {border-color: var(--disabledBorder);} .shopify-payment-button__button--hidden {display: none !important;} svg:not(:root) {overflow: hidden;} iframe {max-width: 100%; border: none;} .video-wrapper {position: relative; overflow: hidden; max-width: 100%; padding-bottom: 56.25%; height: 0; height: auto;} .video-wrapper iframe, .video-wrapper video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .video-wrapper--modal {background-color: #000; width: 1000px;} .grid__image-ratio {position: relative; background-color: var(--colorSmallImageBg);} .grid__image-ratio img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;} .grid__image-ratio img.grid__image-contain {object-fit: contain;} .grid__image-ratio:before {content: ""; display: block; height: 0; width: 100%;} .grid__image-ratio .placeholder-svg {position: absolute; top: 0; right: 0; bottom: 0; left: 0;} .grid__image-ratio--object {opacity: 1;} .grid__image-ratio--wide:before {padding-bottom: 56.25%;} .grid__image-ratio--landscape:before {padding-bottom: 75%;} .grid__image-ratio--square:before {padding-bottom: 100%;} .grid__image-ratio--portrait:before {padding-bottom: 150%;} .image-fit {position: relative; width: 100%; height: 100%; object-fit: cover; font-family: "object-fit: cover"; z-index: 1;} .parallax-container {position: absolute; top: 0; left: 0; height: 100%; width: 100%;} form {margin: 0;} .form-vertical {margin-bottom: calc(var(--gutter) / 2);} .form-vertical label {text-align: left;} [dir="rtl"] .form-vertical label {text-align: right;} button, input, textarea { -webkit-appearance: none; -moz-appearance: none; } button {background: none; border: none; display: inline-block; cursor: pointer;} fieldset {border: 1px solid; border-color: var(--colorBorder); padding: calc(var(--gutter) / 2);} legend {border: 0; padding: 0;} button, input[type="submit"] {cursor: pointer;} input, textarea, select {border: 1px solid; border-color: var(--colorBorder); max-width: 100%; padding: 8px 10px; border-radius: var(--input-radius);} input[disabled], textarea[disabled], select[disabled], input.disabled, textarea.disabled, select.disabled { cursor: default; background-color: var(--disabledGrey); border-color: var(--disabledBorder); } input.input-full, textarea.input-full, select.input-full {width: 100%;} textarea {min-height: 100px;} input[type="checkbox"], input[type="radio"] {margin: 0 10px 0 0; padding: 0; width: auto;} input[type="checkbox"] { -webkit-appearance: checkbox; -moz-appearance: checkbox;} input[type="radio"] { -webkit-appearance: radio; -moz-appearance: radio;} input[type="image"] {padding-left: 0; padding-right: 0;} select, .faux-select { -webkit-appearance: none; appearance: none; background-color: #fff; color: #000; padding: 8px 28px 8px 8px; text-indent: 0.01px; text-overflow: ""; cursor: pointer; text-align: left; border: 1px solid; border-color: var(--colorBorder); } select {background-position: right center; background-image: var(--urlIcoSelect); background-repeat: no-repeat; background-position: right 10px center; background-size: 11px;} .faux-select .icon {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 11px; height: 11px;} /*Force option color (affects IE and some Firefox versions)*/ option {color: #000; background-color: #fff;} option[disabled] {color: #ccc;} select::-ms-expand {display: none;} label[for] {cursor: pointer;} .form-vertical input, .form-vertical select, .form-vertical textarea {display: block; margin-bottom: 30px;} .form-vertical input[type="checkbox"], .form-vertical input[type="radio"], .form-vertical .btn {display: inline-block;} .form-vertical .btn:not(:last-child) {margin-bottom: 30px;} small {display: block;} input.error, textarea.error {border-color: var(--errorRed); background-color: var(--errorRedBg); color: var(--errorRed);} label.error {color: var(--errorRed);} .placeholder-svg {fill: #999; background-color: #e1e1e1; width: 100%; height: 100%; max-width: 100%; max-height: 100%; display: block; padding: 30px 0;} .placeholder-svg--no-padding {padding: 0;} .placeholder-noblocks {padding: 40px; text-align: center;} [data-transitions="true"] .transition-body {opacity: 0;} .no-js [data-transitions="true"] .transition-body {opacity: 1;} .loaded[data-transitions="true"] .transition-body {animation: fade-in 0.8s ease forwards;} .unloading[data-transitions="true"] .transition-body {animation: fade-out 0.3s ease forwards;} .animation-contents {opacity: 0;} [ready] .animation-contents {animation: rise-up 0.8s cubic-bezier(0.26, 0.54, 0.32, 1) forwards;} .image-wrap {background: var(--colorSmallImageBg); overflow: hidden;} .image-wrap img:not([role="presentation"]) { display: block; } .unload:before, .unload:after {content: ""; position: absolute; width: 100px; height: 3px; background: var(--colorBody); left: 50%; top: 30%; margin: -1px 0 0 -50px; z-index: var(--z-index-loader); opacity: 0;} .no-js .unload:before, .no-js .unload:after {display: none;} .unload:before {background: var(--colorTextBody); opacity: 1;} .unload:after {opacity: 0; animation: preloading 0.5s ease 0.3s infinite;} .loading { animation: placeholder-shimmer 1.3s linear 0.5s infinite; background-size: 300% 100%; background-image: linear-gradient( 100deg, var(--colorLargeImageBg) 40%, var(--colorLargeImageBgLight) 63%, var(--colorLargeImageBg) 79% ); } .loading.loaded {animation: none; background-image: none;} .loading--delayed:before {animation-delay: 0.8s !important; animation-duration: 1s !important;} .loading--delayed:after {animation-delay: 1.3s !important;} product-recommendations[data-intent="complementary"] {display: block; overflow: hidden;} product-recommendations[data-intent="complementary"] .product-recommendations__title {margin-top: 40px; width: 100%; max-width: 72%; margin-bottom: 20px; text-align: left;} product-recommendations[data-intent="complementary"] .grid {margin-left: 0;} product-recommendations[data-intent="complementary"] .grid__item, product-recommendations[data-intent="complementary"] .grid-item {margin-bottom: 1rem; padding-left: 0; padding-bottom: 8px;} @media only screen and (max-width: 768px) { product-recommendations[data-intent="complementary"] .grid__item, product-recommendations[data-intent="complementary"] .grid-item {margin-left: 0 !important; flex: 0 0 100%;} } product-recommendations[data-intent="complementary"] .grid-product__image-wrap {min-width: 90px;} product-recommendations[data-intent="complementary"] .grid__image-ratio {background-color: transparent;} product-recommendations[data-intent="complementary"] img.image-style--circle { border-radius: 50%; object-fit: cover; width: 85%; height: 85%; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; } product-recommendations[data-intent="complementary"] .grid__item-image-wrapper .grid-product__link {width: 100%; display: block;} product-recommendations[data-intent="complementary"] .grid__item-image-wrapper, product-recommendations[data-intent="complementary"] .grid-product__link, product-recommendations[data-intent="complementary"] .grid-item__link {display: flex; align-items: center;} product-recommendations[data-intent="complementary"] .grid__item-image-wrapper .grid-product__image-mask, product-recommendations[data-intent="complementary"] .grid-product__link .grid-product__image-mask, product-recommendations[data-intent="complementary"] .grid-item__link .grid-product__image-mask, product-recommendations[data-intent="complementary"] .grid__item-image-wrapper .grid-product__image-wrap, product-recommendations[data-intent="complementary"] .grid-product__link .grid-product__image-wrap, product-recommendations[data-intent="complementary"] .grid-item__link .grid-product__image-wrap, product-recommendations[data-intent="complementary"] .grid__item-image-wrapper .image-wrap, product-recommendations[data-intent="complementary"] .grid-product__link .image-wrap, product-recommendations[data-intent="complementary"] .grid-item__link .image-wrap {width: 112px; margin: 0;} product-recommendations[data-intent="complementary"] .grid__item-image-wrapper .grid-product__meta, product-recommendations[data-intent="complementary"] .grid-product__link .grid-product__meta, product-recommendations[data-intent="complementary"] .grid-item__link .grid-product__meta {margin-left: 48px; width: calc(100% - 112px); text-align: left;} product-recommendations[data-intent="complementary"] .grid-product__actions {top: 0; right: 0;} product-recommendations[data-intent="complementary"] .grid-product__tag {top: initial; right: initial; left: 0; bottom: 0;} product-recommendations[data-intent="complementary"] .flickity-viewport {width: 100%;} product-recommendations[data-intent="complementary"] .flickity-previous {left: auto; top: -32px; right: 50px;} @media only screen and (max-width: 768px) { product-recommendations[data-intent="complementary"] .flickity-previous {right: 45px;} } product-recommendations[data-intent="complementary"] .flickity-next {right: 0; top: -32px;} product-recommendations[data-intent="complementary"] .flickity-page-dots {top: -41px; right: 0; width: auto; bottom: auto;} product-recommendations[data-intent="complementary"] .flickity-button:disabled {display: block; opacity: 0.35;} .product-recommendations__slide {display: block; overflow: hidden; width: 100%; margin: 0; padding: 0;} @media only screen and (max-width: 768px) { .product-recommendations__slide {display: flex; flex-wrap: wrap;} } .product-recommendations__slide .grid__item:last-child {margin-bottom: 0; padding-bottom: 0;} .product-recommendations--title-missing {margin-top: 80px;} product-recommendations[data-intent="complementary"] .grid-product__actions {top: 0; right: 5px;} @media only screen and (min-width: 769px) { product-recommendations[data-intent="complementary"] .grid-product__actions .btn--icon {padding: 10px;} product-recommendations[data-intent="complementary"] .grid-product__actions .icon {width: 25px; height: 25px;} } product-recommendations[data-intent="complementary"] .grid-product__tags {margin-left: 0;} product-recommendations[data-intent="complementary"] .grid-item {padding: 8px;} [data-grid-style*="grey"] product-recommendations[data-intent="complementary"] .grid-item__content, [data-grid-style*="grey-round"] product-recommendations[data-intent="complementary"] .grid-item__content, [data-grid-style*="white"] product-recommendations[data-intent="complementary"] .grid-item__content, [data-grid-style*="white-round"] product-recommendations[data-intent="complementary"] .grid-item__content {padding: 0 8px;} @media only screen and (max-width: 768px) { [data-grid-style*="gridlines"] product-recommendations[data-intent="complementary"] .grid-product__actions { top: -6px; right: -6px; } } [data-grid-style*="gridlines"] product-recommendations[data-intent="complementary"] .product-recommendations__slide .grid-product:last-child:after { border-top: 0; } [data-grid-style*="gridlines"] product-recommendations[data-intent="complementary"] .product-recommendations__slide .grid-product:first-child:after { border-top: solid var(--gridThickness) var(--colorBorder); } [data-grid-style*="gridlines"] product-recommendations[data-intent="complementary"] .grid-product {padding: 8px; margin-bottom: 0;} [data-grid-style*="gridlines"] product-recommendations[data-intent="complementary"] .grid-product:after {padding: 0 8px; box-shadow: none; border: solid var(--gridThickness) var(--colorBorder);} .note, .errors {border-radius: var(--input-radius); padding: 6px 12px; margin-bottom: calc(var(--gutter) / 2); border: 1px solid transparent; text-align: left;} .note ul, .errors ul, .note ol, .errors ol {margin-top: 0; margin-bottom: 0;} .note li:last-child, .errors li:last-child {margin-bottom: 0;} .note p, .errors p {margin-bottom: 0;} .note {border-color: var(--colorBorder);} .errors ul {list-style: disc outside; margin-left: 20px;} .note--success {color: var(--successGreen); background-color: var(--successGreenBg); border-color: var(--successGreen);} .note--success a {color: var(--successGreen); -webkit-text-decoration: underline; text-decoration: underline;} .note--success a:hover { -webkit-text-decoration: none; text-decoration: none;} .form-error, .errors {color: var(--errorRed); background-color: var(--errorRedBg); border-color: var(--errorRed);} .form-error a, .errors a {color: var(--errorRed); -webkit-text-decoration: underline; text-decoration: underline;} .form-error a:hover, .errors a:hover { -webkit-text-decoration: none; text-decoration: none;} .rte {display: block; margin-bottom: calc(var(--gutter) / 4);} @media only screen and (min-width: 769px) { .rte {margin-bottom: calc(var(--gutter) / 2);} } .rte:last-child {margin-bottom: 0;} .rte + .rte {margin-top: var(--gutter);} .rte p, .rte ul, .rte ol, .rte table {margin-bottom: 15px;} @media only screen and (min-width: 769px) { .rte p, .rte ul, .rte ol, .rte table {margin-bottom: 25px;} } .rte p:last-child, .rte ul:last-child, .rte ol:last-child, .rte table:last-child {margin-bottom: 0;} .rte ul ul {margin-bottom: 0;} /*Add some top margin to headers from the rich text editor*/ .rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6 {margin-top: 60px; margin-bottom: 25px;} .rte h1:first-child, .rte h2:first-child, .rte h3:first-child, .rte h4:first-child, .rte h5:first-child, .rte h6:first-child {margin-top: 0;} .rte h1 a, .rte h2 a, .rte h3 a, .rte h4 a, .rte h5 a, .rte h6 a { -webkit-text-decoration: none; text-decoration: none;} /*In case merchants paste meta tags into their content by accident*/ .rte meta:first-child + h1, .rte meta:first-child + h2, .rte meta:first-child + h3, .rte meta:first-child + h4, .rte meta:first-child + h5, .rte meta:first-child + h6 {margin-top: 0;} /*Mimic a paragraph tag because they're not always created*/ .rte > div {margin-bottom: calc(var(--gutter) / 2);} .rte > div:last-child {margin-bottom: 0;} .rte li {margin-bottom: 0;} .rte table {table-layout: fixed;} .rte--block {margin-bottom: 8px;} @media only screen and (min-width: 769px) { .rte--block {margin-bottom: 12px;} } .rte-setting > p:last-child {margin-bottom: 0;} .rte a, .rte-setting a { -webkit-text-decoration: none; text-decoration: none;} .rte img, .rte-setting img {height: auto;} .rte a:not(.rte__image):not(.btn), .rte-setting a:not(.rte__image):not(.btn) { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px;} .rte a.rte__image:after, .rte-setting a.rte__image:after {content: none;} .text-center .rte ul, .text-center.rte ul, .text-center .rte ol, .text-center.rte ol {list-style-position: inside; margin-left: 0;} .rte--nomargin {margin-bottom: 0;} .modal {display: none; bottom: 0; left: 0; opacity: 1; overflow: hidden; position: fixed; right: 0; top: 0; z-index: var(--z-index-modal); color: #fff; align-items: center; justify-content: center;} .modal.modal--quick-shop {align-items: flex-start;} .modal a:not(.btn), .modal a:not(.btn):hover {color: inherit;} .modal-open .modal .modal__inner {animation: modal-open 0.3s forwards;} .modal-open .modal:before {content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--colorModalBg); animation: overlay-on 0.3s forwards; cursor: pointer;} .modal-closing .modal .modal__inner {animation: modal-closing 0.15s forwards;} .modal-closing .modal:before {content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--colorModalBg); animation: overlay-off 0.15s forwards;} .modal-open--solid .modal:before {background-color: var(--colorModalBg);} .modal--is-closing {display: flex !important; /*override .is-transitioning styles*/ overflow: hidden;} .modal--is-active {display: flex !important; /*override .is-transitioning styles*/overflow: hidden;} /*Class on body element when modal open. Only medium-up because iOS jumps to top otherwise*/ @media only screen and (min-width: 769px) { .modal-open {overflow: hidden;} } .modal__inner {transform-style: preserve-3d; flex: 0 1 auto; margin: calc(var(--gutter) / 2); max-width: calc(100% - 30px); display: flex; align-items: center; box-shadow: 0 12px 25px rgb(0 0 0 / 15%); border-radius: var(--roundness);} @media only screen and (min-width: 769px) { .modal__inner {margin: 40px; max-width: calc(100% - 80px);} } .modal--square .modal__inner {background-color: var(--colorBody); color: var(--colorTextBody); border-radius: var(--roundness);} .modal__inner .scheme-image {border-radius: calc(var(--roundness) + 2px);} /*No max height on product images*/ .modal__inner .image-wrap img {max-height: none;} .modal__centered {position: relative; flex: 0 1 auto; min-width: 1px; /*ie10 thing*/ max-width: 100%;} .modal--square .modal__centered-content {max-height: 80vh; padding: 30px; min-width: 200px; min-height: 200px; border-radius: var(--roundness); overflow: auto; -webkit-overflow-scrolling: touch;} @media only screen and (min-width: 769px) { .modal--square .modal__centered-content {padding: calc(var(--gutter) * 1.5); max-height: 90vh; max-width: 1200px;} } .modal--square .modal__centered-content--padded {padding: 60px;} /*Always a .btn .btn--circle .btn--icon*/ .modal__close {border: 0; padding: 6px; position: absolute; top: 0; right: 0; transform: translate(25%, -25%); z-index: 2; transition: transform 0.15s ease-out;} .modal__close:hover {transform: translate(25%, -25%) scale(1.08);} .modal__close .icon {width: 28px; height: 28px;} .modal--is-closing .modal__close {display: none;} /*Ajax page adjustments*/ .modal .page-content, .modal .page-width {padding: 0;} @media only screen and (max-width: 768px) { .modal--mobile-friendly {top: auto; bottom: 20px; overflow: auto;} .modal--mobile-friendly.modal--square .modal__centered-content {padding: 30px;} .modal--mobile-friendly.modal--is-active {overflow: visible;} .modal-open .modal--mobile-friendly:before {display: none;} .modal--mobile-friendly .modal__inner {margin: 0;} .modal--mobile-friendly .h1 {padding-right: 25px;} .modal--mobile-friendly input {font-size: 16px !important;} .modal--mobile-friendly .text-close {display: none;} } /*Always sits on modal overlay (light), so hardcode black*/ .modal__footer-text {padding: calc(var(--gutter) / 2) var(--gutter); text-align: center;} .modal__footer-text a {color: currentColor; -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px;} .js-qty__wrapper {display: inline-block; position: relative; max-width: 70px; min-width: 60px; overflow: visible; background-color: var(--colorBody); color: var(--colorTextBody);} .js-qty__wrapper.is-loading {opacity: 0.5; pointer-events: none;} .js-qty__num {display: block; background: none; text-align: center; width: 100%; padding: 5px 20px; margin: 0;} .js-qty__adjust {cursor: pointer; position: absolute; display: block; top: 0; bottom: 0; border: 0 none; background: none; text-align: center; overflow: hidden; padding: 0 10px; line-height: 1; -webkit-user-select: none; user-select: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: background-color 0.1s ease-out; z-index: 1; fill: var(--colorTextBody); } .js-qty__adjust .icon {display: block; font-size: 8px; vertical-align: middle; width: 10px; height: 10px; fill: inherit;} .js-qty__adjust:hover {background-color: var(--colorBodyDim); color: var(--colorTextBody);} .js-qty__num:active ~ .js-qty__adjust, .js-qty__num:focus ~ .js-qty__adjust {border-color: var(--colorTextBody);} .js-qty__adjust--plus {right: 0;} .js-qty__adjust--minus {left: 0;} .collapsible-trigger {color: inherit; position: relative;} /*button element cannot be display:flex, so add child span to style*/ .collapsible-trigger__layout {display: flex; align-items: center; justify-content: space-between;} .collapsible-trigger__layout--inline {position: relative; justify-content: flex-start;} .collapsible-trigger__layout--inline > span {padding-right: 15px;} .collapsible-trigger__layout--inline .collapsible-trigger__icon {position: static; transform: none;} .collapsible-trigger__icon {display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: var(--collapsibleIconWidth); height: var(--collapsibleIconWidth);} [dir="rtl"] .collapsible-trigger__icon {left: 0; right: auto;} .collapsible-trigger__icon .icon {display: block; width: var(--collapsibleIconWidth); height: var(--collapsibleIconWidth); transition: all 0.1s ease-in;} .collapsible-trigger.is-open .collapsible-trigger__icon > .icon-chevron-down {transform: rotate(180deg);} .collapsible-trigger--inline {font-weight: var(--typeHeaderWeight); padding: 11px 0 11px 20px;} .collapsible-trigger--inline .collapsible-trigger__icon {right: auto; left: 0;} .collapsible-content {transition: opacity 0.2s ease, height 0.15s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateY(-10px);} .collapsible-content.is-open {visibility: visible; opacity: 1; transform: translateY(0); transition: opacity 0.3s ease, height 0.25s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);} .collapsible-content--all {visibility: hidden; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: 0; height: 0;} @media only screen and (min-width: 769px) { .collapsible-content--all.is-open {overflow: initial; visibility: visible; opacity: 1; height: auto;} } .collapsible-content--all.is-open {border-bottom: 1px solid; border-color: var(--colorBorder);} .filter-wrapper .collapsible-content--all.is-open {border: 0;} @media only screen and (max-width: 768px) { .collapsible-content--small {visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: 0; height: 0;} .collapsible-content--small .collapsible-content__inner {transform: translateY(40px);} } @media only screen and (min-width: 769px) { .collapsible-content__inner {padding: 0 0 14px;} } .collapsible-trigger[aria-expanded="true"] .collapsible-label__closed {display: none;} .collapsible-label__open {display: none;} .collapsible-trigger[aria-expanded="true"] .collapsible-label__open {display: inline-block;} :root { --max-height-disclosure: 60vh; --min-height-disclosure: 92px;} .disclosure {position: relative;} .disclosure__toggle {white-space: nowrap;} .disclosure-list {background-color: var(--colorBody); color: var(--colorTextBody); bottom: 100%; padding: 10px 0; margin: 0; position: absolute; display: none; min-height: var(--min-height-disclosure); max-height: var(--max-height-disclosure); overflow-y: auto; border-radius: var(--input-radius); box-shadow: 0 0 20px rgba(0, 0, 0, 0.09); z-index: 1;} .disclosure-list a, .disclosure-list .disclosure-list__item a {color: currentColor;} .disclosure-list--down {bottom: auto; top: 100%;} .disclosure-list--left {right: 0;} .disclosure-list--visible {display: block;} .disclosure-list__item {white-space: nowrap; padding: 5px 15px 4px; text-align: left;} .disclosure-list__option:focus .disclosure-list__label, .disclosure-list__option:hover .disclosure-list__label { -webkit-text-decoration: underline; text-decoration: underline;} .disclosure-list__item--current .disclosure-list__label { -webkit-text-decoration: underline; text-decoration: underline;} .disclosure-list__label {display: inline-block; vertical-align: middle; text-underline-offset: 0.2rem;} [data-disclosure-currency] .disclosure-list__label {padding-left: 10px;} .disclosure-list__label span {border-bottom: 2px solid transparent;} .is-active .disclosure-list__label span {border-bottom: 2px solid currentColor;} ::-webkit-input-placeholder {color: inherit; opacity: 0.5;} :-moz-placeholder {color: inherit; opacity: 0.5;} :-ms-input-placeholder {color: inherit; opacity: 0.5;} ::-ms-input-placeholder {color: inherit; opacity: 1;} input, textarea, select {background-color: inherit; color: inherit;} input[disabled], textarea[disabled], select[disabled], input.disabled, textarea.disabled, select.disabled {background-color: var(--disabledGrey); border-color: transparent;} input:active, textarea:active, select:active, input:focus, textarea:focus, select:focus {border: 1px solid; border-color: var(--colorTextBody);} input[type="image"] {background-color: transparent;} .index-section {margin: var(--indexSectionPadding) 0;} .index-section:not(.index-section--sub-product):first-child {margin-top: 0; padding-top: var(--indexSectionPadding);} .index-section + .index-section, .index-section + .index-section--hidden, .main-content + .index-section {margin-top: 0;} .page-width .index-section .page-width {padding-left: 0; padding-right: 0;} .index-section--flush {margin: 0;} .section--divider {border-top: 1px solid; border-top-color: var(--colorBorder); padding-top: var(--indexSectionPadding);} /*Hide footer sections on /challenge page*/ .template-challange .index-section--footer {display: none;} .product-block {display: block; margin-bottom: 20px;} .product-block.product-block--tab {margin-bottom: 30px;} .product-block hr {margin: 0;} .product-block--tab + .product-block--tab {margin-top: -30px;} .product-block--sales-point + .product-block--sales-point {margin-top: -20px;} .theme-block {margin-bottom: 30px;} .theme-block:last-child {margin-bottom: 0;} :root { --z-index-hero-image: 1; --z-index-hero-video: 2; --z-index-hero-image-overlay: 3; --z-index-hero-text: 4; --slideshowImageAnimationAmount: 200px; --slideshowImageAnimationSpeed: 0.5s; } .hero--padded {margin-top: var(--pageWidthPadding); margin-bottom: var(--pageWidthPadding); /*Required so box-shadow on .main-content doesn't appear when this is the first section*/ } .index-section--hero:first-child .hero--padded {margin-top: 0; padding-top: var(--pageWidthPadding);} .hero {display: block; position: relative; overflow: hidden; background-color: var(--colorLargeImageBg); color: #fff;} .hero.loaded {background-color: transparent; transition: background-color 0.2s ease 0.3s;} .hero--padded .hero {border-radius: var(--roundness);} .hero--padded .hero .hero__media {overflow: hidden; border-radius: var(--roundness);} .hero__image-wrapper {position: absolute; top: 0; left: 0; height: 100%; width: 100%;} .hero__image {position: relative; width: 100%; height: 100%; z-index: var(--z-index-hero-image); object-fit: cover;} /*Mobile only vimeo play button*/ .vimeo-mobile-trigger {display: block; position: absolute; width: 100%; z-index: 2; margin-top: 90px;} .hero__text-content .vimeo-mobile-trigger {bottom: 120%;} .vimeo-mobile-trigger .icon {width: 40px; height: 40px; background-color: #fff; border-radius: 50%; padding: 10px;} .hero__slide-link {display: block; position: absolute; height: 100%; width: 100%; z-index: calc(var(--z-index-hero-text) + 1);} .hero__slide-link:hover ~ .hero__text-wrap .btn:not(.btn--secondary):not(.btn--inverse) {background: var(--colorBtnPrimaryLight); transition-delay: 0.25s;} .hero__text-wrap {position: relative; height: 100%;} .video-interactable .hero__text-wrap {pointer-events: none;} .hero__text-wrap .page-width {display: table; width: 100%; height: 100%;} .hero__text-content {position: relative; padding: calc(var(--gutter) / 2) 0; z-index: var(--z-index-hero-text);} @media only screen and (min-width: 769px) { .hero__text-content {padding: calc(var(--gutter) * 1.5) 0;} } [data-dots="true"] .hero__text-content {padding-bottom: 40px;} .hero__text-shadow {--zIndexOverlay: -1; position: relative; display: inline-block; text-shadow: 0 3px 7px rgb(0, 0, 0, 0.15);} .hero__text-shadow:after {background: radial-gradient(rgba(0, 0, 0, 0.3) 0%, transparent 60%); margin: -100px -200px -100px -200px;} .hero__text-shadow .btn {text-shadow: none;} .horizontal-left .hero__text-shadow {max-width: 500px;} .horizontal-right .hero__text-shadow {max-width: 500px; text-align: left;} @media only screen and (max-width: 768px) { .horizontal-left .hero__text-shadow {max-width: 85%;} .horizontal-right .hero__text-shadow {max-width: 85%;} } .hero__top-subtitle, .hero__title, .hero__subtitle {margin-bottom: 10px;} @media only screen and (min-width: 769px) { .hero__top-subtitle, .hero__title, .hero__subtitle {margin-bottom: 15px;} } .hero__top-subtitle {letter-spacing: 0.07em; font-size: 1.1em;} .hero__title {display: block;} .hero__title p {margin-bottom: 0;} .hero__subtext {margin-top: 20px;} .hero__subtitle {display: block; vertical-align: middle;} @media only screen and (min-width: 769px) { .hero__subtitle {font-size: 1.3em;} } .hero__link {position: relative; display: block;} .video-interactable .hero__link {pointer-events: auto;} .hero__link .btn {margin: 4px 15px 15px 0;} @media only screen and (max-width: 768px) { .hero__link .btn {margin: 4px 10px 6px 0;} .small--text-center .hero__link .btn {margin: 4px 10px 6px;} } /*Play icon in button*/ .hero__link .btn .icon-play {position: relative; top: -2px; margin-right: 5px;} .hero__link .btn--inverse {color: currentColor; border-color: currentColor;} /*Text alignment*/ .hero__text-content {display: table-cell;} .hero__text-content .hero__link {margin-top: calc(var(--gutter) / 4);} @media only screen and (min-width: 769px) { .hero__text-content .hero__link {margin-top: calc(var(--gutter) / 2);} } .hero__text-content.horizontal-left {text-align: left;} .hero__text-content.horizontal-center {text-align: center;} .hero__text-content.horizontal-right {text-align: right;} .hero__text-content.vertical-center {vertical-align: middle;} .hero__text-content.vertical-bottom {vertical-align: bottom;} /*Top padding adjustment to account for overlaid header*/ .overlaid-header .index-section--hero:first-child .hero__text-content.vertical-center {padding-top: 50px;} @media only screen and (min-width: 769px) { .overlaid-header .index-section--hero:first-child .hero__text-content.vertical-center {padding-top: 90px;} } .hero[data-natural] {position: absolute; top: 0; left: 0; right: 0; bottom: 0;} /*Hero and slideshow shared starting animation*/ /*Default positioning pre-animation*/ .hero .slideshow__slide .hero__animation-contents {opacity: 0; transform: translateY(10px); transition: none;} .no-js .hero .slideshow__slide .hero__animation-contents {opacity: 1;} @media only screen and (max-width: 768px) { .hero .slideshow__slide .hero__animation-contents {transform: translateY(7px);} } .hero .slideshow__slide .hero__text-shadow:after {opacity: 0;} /*Override lazyload style*/ .hero .slideshow__slide:not(.animate-out) .hero__image {opacity: 0; transition: none;} .hero .slideshow__slide .hero__link .btn {opacity: 0; transition: none;} .no-js .hero .slideshow__slide .hero__link .btn {opacity: 1;} /*Disable animations when not active or fading out*/ .hero .slideshow__slide .hero__image-wrapper {transform: scale(1.15); opacity: 0; transition: none;} .hero .slideshow__slide .hero__sidebyside {opacity: 0; transition: none;} .no-js .hero .slideshow__slide .hero__sidebyside {opacity: 1;} .hero .slideshow__slide .hero__sidebyside-image .hero__image {opacity: 0; transform: scale(1.15); transition: none;} .no-js .hero .slideshow__slide .hero__sidebyside-image .hero__image {opacity: 1;} /*Hero and slideshow shared active animation */ .hero.loaded .slideshow__slide.is-selected .hero__animation-contents {opacity: 1; transform: translateY(0px); transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.26, 0.54, 0.32, 1);} .hero.loaded .slideshow__slide.is-selected .hero__link .btn {opacity: 1; transition: opacity 1s ease;} .hero.loaded .slideshow__slide.is-selected .hero__text-shadow:after {opacity: 1; transition: all 0.4s ease 0.2s;} .hero.loaded .slideshow__slide.is-selected .hero__title .hero__animation-contents {transition-delay: 0.2s;} .hero.loaded .slideshow__slide.is-selected .hero__subtitle .hero__animation-contents {transition-delay: 0.4s;} .hero.loaded .slideshow__slide.is-selected .hero__link .btn {transition-delay: 0.6s;} .hero.loaded .slideshow__slide.is-selected .hero__link .btn:nth-child(2) {transition-delay: 0.8s;} .hero.loaded .slideshow__slide.is-selected .hero__media, .hero.loaded .slideshow__slide.is-selected .hero__image, .hero.loaded .slideshow__slide.is-selected .hero__image--svg {opacity: 1; transition: none;} .hero.loaded .slideshow__slide.is-selected .hero__image-wrapper {opacity: 1; transform: scale(1); transition: transform 1s cubic-bezier(0.18, 0.63, 0.25, 1), opacity 0.7s ease;} .hero.loaded .slideshow__slide.is-selected .hero__sidebyside {opacity: 1; transition: opacity calc(var(--slideshowImageAnimationSpeed) + 0.2s) ease;} .hero.loaded .slideshow__slide.is-selected .hero__sidebyside-image .hero__image {opacity: 1; transform: scale(1); animation: none; transition: transform calc(var(--slideshowImageAnimationSpeed) + 0.2s) cubic-bezier(0.13, 0.55, 0.25, 1);} /*Slideshow fading out animation*/ .hero .slideshow__slide.animate-out .hero__animation-contents {opacity: 0; transition: none;} .hero .slideshow__slide.animate-out .hero__image-wrapper {opacity: 0; transform: scale(1); transition: transform var(--slideshowImageAnimationSpeed) ease-in 0.05s, opacity var(--slideshowImageAnimationSpeed) ease-in 0.05s;} :root { --tagActiveIconSize: 16px; --tagActiveIconSizeActive: 10px;} .tag-list__header {text-align: left;} .tag-list .tag-list {margin-left: calc(var(--gutter) / 2);} .tag-list a, .tag-list button, .tag-list label {cursor: pointer; display: block; padding: 1px 0;} .tag--swatch label {margin: 0;} .tag-list label:hover, .tag:focus-within label {-webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px;} .tag--active > a, .tag--active > button, .tag--active > label {font-weight: 900;} .tag-list--checkboxes {padding-bottom: 6px;} .tag-list--checkboxes a {position: relative; padding-left: 25px;} .tag-list--checkboxes a:before, .tag-list--checkboxes a:after {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);} .tag-list--checkboxes a:before {border: 1px solid; border-color: var(--colorBorder); height: var(--tagActiveIconSize); width: var(--tagActiveIconSize);} .tag-list--checkboxes a:after {height: var(--tagActiveIconSizeActive); width: var(--tagActiveIconSizeActive); left: 3px;} .tag-list--checkboxes .tag--active a:after, .tag--active .tag__checkbox:after, input:checked ~ .tag__checkbox:after {background-color: var(--colorTextBody); border-color: var(--colorTextBody);} /*Remove tags (top of sidebar)*/ .tag--remove, .tag--inline {display: inline-block; position: relative; margin: 0 10px 13px 0;} .tag--remove a, .tag--inline a {display: block; text-align: left; padding: 7px 15px 7px 36px; min-width: 0;} /*X icon sits over button, not in it*/ .tag--remove .icon, .tag--inline .icon {position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--colorBtnPrimaryText);} .tag--inline a {padding: 7px 15px 7px 15px;} /*Color swatches in sidebar*/ .tag-list--swatches {margin-top: 2px; margin-left: -2px;} .drawer .tag-list--swatches {margin-left: -2px;} .tag-list--swatches li {display: inline-block;} label.tag__checkbox-wrapper {display: flex;} .tag__checkbox {position: relative; padding-left: 25px; overflow: hidden;} .tag__checkbox:before, .tag__checkbox:after {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);} .tag__checkbox:before {border: 1px solid; border-color: var(--colorBorder); height: var(--tagActiveIconSize); width: var(--tagActiveIconSize);} .tag__checkbox:after {height: var(--tagActiveIconSizeActive); width: var(--tagActiveIconSizeActive); left: 3px;} .tag__input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;} :root {--label-bottom-margin: 12px;} .variant-input-wrap {border: 0; padding: 0; margin: 0 0 calc(var(--label-bottom-margin) * -1); position: relative;} .variant-input-wrap label {font: inherit; position: relative; display: inline-block; font-weight: normal; padding: 7px 15px 7px; margin: 0 8px var(--label-bottom-margin) 0; background-color: var(--colorBody); box-shadow: 0 0 0 1px var(--colorBorder); border-radius: 1px; overflow: hidden;} .variant-input-wrap label[data-color-swatch] {padding: 0; background-color: var(--swatch-bg-color); background-image: var(--swatch-bg-image);} [data-center-text="true"] .variant-input-wrap label {margin: 0 4px var(--label-bottom-margin);} .variant-input-wrap input[type="radio"]:focus + label {box-shadow: 0 0 0 1px var(--colorTextBody); outline: 2px auto Highlight; outline: 2px auto -webkit-focus-ring-color; outline-offset: 1px;} .variant-input-wrap input[type="radio"]:checked + label {box-shadow: 0 0 0 2px var(--colorTextBody);} .variant-input-wrap input[data-disabled] + label {color: var(--colorBorder);} .variant-input-wrap input[data-disabled] + label:after {position: absolute; content: ""; left: 50%; top: 0; bottom: 0; border-left: 2px solid; border-color: var(--colorBorder); transform: rotate(45deg);} .variant__label, .variant__label[for] {display: block; margin-bottom: 10px; cursor: default;} /*Product grid variations*/ [data-grid-style*="gridlines"] .product-grid {margin-left: 0; margin-right: 0;} [data-grid-style*="gridlines"] .grid-product {position: relative; padding: 0; margin: 0;} [data-grid-style*="gridlines"] .grid-product:after {pointer-events: none; box-shadow: 0 0 0 var(--gridThickness) var(--colorBorder);} /*Small gridline variations*/ @media only screen and (max-width: 768px) { [data-grid-style*="gridlines"] .product-grid { margin-left: calc(var(--pageWidthPadding) * -1); margin-right: calc(var(--pageWidthPadding) * -1); padding: var(--gridThickness) calc(var(--pageWidthPadding) + var(--gridThickness)); } /*Make flush on mobile*/ [data-grid-style*="gridlines"] .collection-grid { padding: 0; } } [data-grid-style*="grey"] .grid-product, [data-grid-style*="white"] .grid-product { position: relative; } [data-grid-style*="grey"] .grid-product:after, [data-grid-style*="white"] .grid-product:after { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: calc(var(--productGridPadding) / 2); right: calc(var(--productGridPadding) / 2); pointer-events: none; } [data-grid-style*="grey"] .grid-product:after { background-color: var(--colorTextBody); opacity: 0.027; } [data-grid-style*="grey"] .grid-product.grid-product-image-breathing-room--false { padding-left: calc(var(--productGridMargin) / 2); padding-right: calc(var(--productGridMargin) / 2); } [data-grid-style*="white"] .grid-item__content { background-color: #fff; } [data-grid-style*="white"] .grid-product:after { background-color: #fff; z-index: -1; } [data-grid-style*="white"] .grid-product.grid-product-image-breathing-room--false { padding-left: calc(var(--productGridMargin) / 2); padding-right: calc(var(--productGridMargin) / 2); } [data-grid-style="grey-round"] .grid-product:after { border-radius: var(--productRadius); } [data-grid-style="white-round"] .product-grid-item { border-radius: var(--productRadius); } [data-grid-style="white-round"] .grid-item__content { border-radius: var(--productRadius); } [data-grid-style="white-round"] .grid-product:after { border-radius: var(--productRadius); } /*Part 1 of product card is just image*/ .grid-product__image-wrap { position: relative; /* margin: var(--productTileMargin) var(--productTileMargin) 0; */ } [data-view="list"] .grid-product__image-wrap { margin-bottom: var(--productTileMargin); } .grid-item__meta-secondary { margin-top: 5px; flex: 1 0 auto; } /*Remove margin when simple grid and not in list mode*/ [dir="ltr"] [data-grid-style="simple"] .new-grid:not([data-view="list"]) .grid-item__meta { margin-left: 0; } [dir="rtl"] [data-grid-style="simple"] .new-grid:not([data-view="list"]) .grid-item__meta { margin-right: 0; } /* Product list view (full width) */ [data-view="list"] .grid-item__link {display: flex; flex-wrap: nowrap; align-items: center;} [data-view="list"] .grid-product__image-wrap {flex: 1 1 45%; max-width: 200px; margin: calc(var(--productTileMargin) / 4); margin-right: 0;} [data-view="list"] .grid-item__meta {flex: 1 1 55%; padding-right: 20px;} @media only screen and (min-width: 769px) { [data-view="list"] .grid-item__meta {display: flex; justify-content: space-between; padding-right: 0;} [data-view="list"] .grid-item__meta-secondary {margin: 0 20px 0 0; text-align: right;} [data-view="list"] .grid-product__title {font-size: calc(var(--typeBaseSize) + 3px);} } [data-view="list"] .grid-product__price--current {font-size: calc(var(--typeBaseSize) + 6px);} [data-view="list"] .grid-item__meta-secondary {margin-right: 40px;} /* Prevent long words from breaking out of available space */ .grid-product__title {word-break: break-word; -webkit-hyphens: auto; hyphens: auto;} .grid-product__image {display: block; margin: 0 auto; width: 100%; height: auto;} .grid-product__vendor {margin-bottom: 5px; margin-top: 5px; opacity: 0.65; font-size: calc(var(--typeBaseSize) - 3px);} .grid-product__vendor:empty {margin: 0;} .grid-product__price {color: var(--colorPrice);} .grid-product__price--current {display: inline-block; font-weight: var(--typeHeaderWeight); margin-right: 5px; font-size: calc(var(--typeBaseSize) + 2px);} .grid-product__price--original {display: inline-block; font-weight: var(--typeHeaderWeight); -webkit-text-decoration: line-through; text-decoration: line-through; font-size: 0.9em; margin-right: 8px;} .grid-product__price--savings {display: inline-block; color: var(--colorTextSavings); white-space: nowrap; font-size: 0.9em;} [data-view="list"] .grid-product__price--current, [data-view="list"] .grid-product__price--original, [data-view="list"] .grid-product__price--savings {display: block; margin-right: 0;} [data-view="list"] .grid-product__price--from span:not(.money) {display: block;} .grid-product__tags { position: absolute; bottom: 0; left: 0; /* margin-left: calc(var(--productTileMargin) * -1); */ z-index: 1; } .grid-product__tag { float: left; clear: left; line-height: 1; padding: 5px 7px; margin-top: 5px; border-radius: 0 2px 2px 0; background-color: var(--colorBtnPrimary); color: var(--colorBtnPrimaryText); font-size: 10px; text-transform: uppercase; font-weight: var(--typeHeaderWeight); letter-spacing: 0.05em; z-index: 1; transition: opacity 0.4s ease; } .grid-product__tag.grid-product__tag--sold-out {background-color: var(--colorBody); color: var(--colorTextBody);} @media only screen and (min-width: 769px) { .grid-product__tag {padding: 6px 8px; font-size: 11px;} } .grid-product__tag--sale {background-color: var(--colorSaleTag); color: var(--colorSaleTagText);} /*Large screen sizing*/ @media only screen and (min-width: 769px) { .grid-product__price--current {font-size: calc(var(--typeBaseSize) + 2px);} } .sales-points {list-style: none; padding: 0; margin: 0;} .quick-add-modal .sales-points {display: none;} .sales-point {display: block; margin-bottom: 10px;} .sales-point:last-child {margin-bottom: 0;} .sales-point .icon {position: relative; width: 25px; height: 25px; margin-right: 10px;} [dir="rtl"] .sales-point .icon {margin-right: 0; margin-left: 10px;} .sales-point .sales-point__emoji {position: relative; line-height: 1; font-size: 25px; margin-right: 10px;} [data-color-swatch], .color-swatch { position: relative; display: block; text-indent: -9999px; overflow: hidden; margin: 0 4px 4px; background-position: center; background-size: cover; background-repeat: no-repeat; width: 2.5em; border: 3px solid; border-color: var(--colorBody); box-shadow: 0 0 0 1px var(--colorBorder); transition: box-shadow 0.1s ease; width: var(--swatchSize); height: var(--swatchSize); } [data-swatch_style="round"] [data-color-swatch], [data-swatch_style="round"] .color-swatch { border-radius: 100%; } /*Sidebar color swatches*/ .tag--swatch {display: inline-block;} .tag:not(.tag--active) label:hover .color-swatch:hover, .tag:focus-within .color-swatch {box-shadow: 0 0 0 1px var(--colorTextBody);} /*Active product grid and filter swatches*/ .color-swatch.is-active {box-shadow: 0 0 0 1px var(--colorTextBody);} .tag--active .color-swatch {box-shadow: 0 0 0 2px var(--colorTextBody);} .color-swatch--small {width: 25px; height: 25px; border-width: 2px;} .grid-product__colors {display: flex; flex-wrap: wrap; line-height: 25px; margin: 0 0 5px -4px;} .grid-product__colors + .grid-product__colors {margin-top: 4px;} .color-swatch__more {line-height: 25px; margin-left: 5px; font-weight: var(--typeHeaderWeight);} .tag--show-label {width: 100%;} .tag--show-label label {display: flex; align-items: center;} .tag--show-label .tag__text {display: block !important; margin-left: 0.5rem; margin-bottom: 4px;} .color-swatch--filter {width: 35px; height: 35px; flex-shrink: 0;} .tag--active .color-swatch--filter:hover:after {position: absolute; content: ""; left: 50%; top: 0; bottom: 0; border-left: 1px solid; border-color: var(--colorBorder); transform: rotate(45deg);} .scrollable-grid {overflow: hidden; overflow-x: auto; flex-wrap: nowrap; margin: -20px -10px 0 0; padding: 20px 10px 0 var(--gridThickness);} .scrollable-grid .grid-item {flex: 0 0 25%;} .site-header__cart .scrollable-grid .grid-item {min-width: 150px;} .new-grid[data-type="subcollections"] {margin-bottom: 20px; padding-bottom: 5px;} .new-grid[data-type="subcollections"]:empty {border: 0; margin-bottom: 0; padding-bottom: 0;} @media only screen and (max-width: 768px) { .scrollable-grid--small {overflow: hidden; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; margin: calc(var(--productGridMargin) * -1) calc(var(--page-width-gutter-small) * -1) 0 0; padding: var(--productGridMargin) var(--page-width-gutter-small) 0 0; } .page-width--flush-small .scrollable-grid--small {margin-left: 0; margin-right: 0; padding-left: var(--page-width-gutter-small);} .scrollable-grid--small .grid-item {flex: 0 0 45%;} /*Some one-off sizing*/ .scrollable-grid--small[data-type="subcollections"] {margin-left: calc(var(--grid-gutter-small) * -1); margin-bottom: 0; padding-bottom: 10px;} .scrollable-grid--small[data-type="subcollections"] .grid-item {flex: 0 0 30%;} /*Create faux-element to make enough right-side padding inside scrollable div*/ [data-view*="scrollable"]:after {content: ""; display: block; height: 1px; min-width: var(--pageWidthPadding);} } video-section {display: block;} @media only screen and (min-width: 769px) { .product-single__sticky {position: sticky; top: 20px;} .modal--quick-shop .product-single__sticky {top: 0;} .product-full-width {margin-top: 40px;} } @media only screen and (max-width: 768px) { .grid--product-images-right {display: flex;flex-wrap: wrap;} .grid--product-images-right .grid__item:first-child {order: 2;} /* Custom full-width layout for product tabs on mobile */ .product-full-width .page-width--narrow {max-width: none;} .product-full-width .product-block--tab {margin-left: calc(var(--pageWidthPadding) * -1); margin-right: calc(var(--pageWidthPadding) * -1);} .product-full-width .product-block--tab .collapsible-trigger-btn {padding-left: var(--pageWidthPadding);padding-right: var(--pageWidthPadding);} .product-full-width .product-block--tab .collapsible-trigger__icon {right: var(--pageWidthPadding);} } .page-content--product {padding-top: 40px; padding-bottom: 0;} @media only screen and (max-width: 768px) { .page-content--product {padding-top: 15px;} } /* Prevent jittery sizing while loading in quick view */ .modal--quick-shop .page-content--product {width: var(--page-width); max-width: 100%;} .product-single__meta {padding-top: 65px; padding-left: 45px;} @media only screen and (max-width: 768px) { .product-single__meta {padding-top: 0; padding-left: 0; margin-top: calc(var(--gutter) / 2); margin-bottom: calc(var(--gutter) / 2);} } .grid--product-images-right .product-single__meta {padding-left: 0; padding-right: 45px;} @media only screen and (max-width: 768px) { .grid--product-images-right .product-single__meta {padding-right: 0;} } .product-single__meta .social-sharing {margin-top: var(--gutter);} .product-single__meta .rte {text-align: left;} html[dir="rtl"] .product-single__meta .rte {text-align: right;} .product-single__meta > *:first-child {padding-top: 0;} /*Hide selectable elements when slide is not active*/ .flickity-enabled .product-main-slide:not(.is-selected) button, .flickity-enabled .product-main-slide:not(.is-selected) video, .flickity-enabled .product-main-slide:not(.is-selected) iframe, .flickity-enabled .product-main-slide:not(.is-selected) model-viewer {display: none;} .product-main-slide {display: none; width: 100%; overflow: hidden;} @media only screen and (max-width: 768px) { /* Set initial width to prevent layout shifts */ .grid--product-images--partial .product-main-slide {width: 75%; margin-left: auto; margin-right: auto;} } /*Hide all but first slide to prevent page reflows prior to init*/ .product-main-slide:first-child {display: block;} @media only screen and (max-width: 768px) { .product-main-slide {border: 1px solid; border-color: var(--colorBorder);} } [data-media-gallery-layout="stacked"] .product-main-slide {display: block; margin: 8px auto;} .flickity-slider .product-main-slide {display: block;} @media only screen and (max-width: 768px) { .grid--product-images--partial .flickity-slider .product-main-slide {width: 75%; margin-right: 10px;} } .grid-product__price sup {margin-left: 1px; font-size: 60%; top: -0.4em;} /*Used anywhere unit price is visible*/ .product__unit-price {font-size: calc(var(--typeBaseSize) - 3px); opacity: 0.65;} .return-link {text-align: center; padding: 15px 25px;} .return-link .icon {width: 20px; margin-right: 8px;} /*Product page mobile*/ @media only screen and (max-width: 768px) { .product--images {order: 1;} } @media only screen and (max-width: 768px) { .product--description {order: 3;} } .article-tag { display: inline-block; background-color: var(--colorBody); color: var(--colorTextBody); border: 1px solid; border-color: var(--colorTextBody); padding: 3px 9px; margin: 5px; font-size: 12px; font-weight: var(--typeHeaderWeight); letter-spacing: 0.15em; text-transform: uppercase; } .tag--inline .article-tag {margin: 0;} .article-tag:hover, .article-tag:active {background-color: var(--colorBody); color: var(--colorTextBody);} @media only screen and (max-width: 768px) { .article-tag {padding: 4px 6px; font-size: 10px; margin: 3px;} } /*Date, comments, author*/ .article__sub-meta {opacity: 0.65;font-size: calc(var(--typeBaseSize) - 2px);} .article__sub-meta > span {position: relative; display: inline-block; margin-bottom: 2px; margin-right: 10px;} [dir="rtl"] .article__sub-meta > span {margin-right: 0; margin-left: 10px;} .article__sub-meta > span:not(:last-child):after {content: "\b7"; display: inline-block; margin-left: 10px;} [dir="rtl"] .article__sub-meta > span:not(:last-child):after {margin-left: 0; margin-right: 10px;} .section-header .article__sub-meta {margin-top: 20px;} .article__sub-meta-date {text-transform: uppercase;} .article__title {font-weight: var(--typeHeaderWeight);} .icon-shopify-logo {--icon-width-size: 60px; --icon-height-size: 20px;} @media only screen and (max-width: 768px) { .password-header-section .header-item--logo {width: 50%;} } .template-giftcard, .template-giftcard body {background: var(--colorBody);} .template-giftcard a, .template-giftcard body a {-webkit-text-decoration: none; text-decoration: none;} .template-giftcard .page-width {max-width: 588px;} .template-giftcard .shop-url {display: none;} .giftcard__border {padding: 1.5em; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);} .giftcard__content {background-color: var(--colorBody); color: var(--colorTextBody);} .giftcard__header {padding: calc(var(--gutter) / 2);} .giftcard__title {float: left; margin-bottom: 0;} .giftcard__tag {display: block; float: right; background-color: var(--colorTextBody); border: 1px solid transparent; color: var(--colorBody); padding: calc(var(--gutter) / 3); border-radius: 4px; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1;} .giftcard__tag--active {background: transparent; color: var(--colorTextBody);border: 1px solid; border-color: var(--colorBorder);} .giftcard__wrap {position: relative; margin: calc(var(--gutter) / 2) calc(var(--gutter) / 2) var(--gutter);} .giftcard__wrap img {position: relative; display: block; border-radius: 10px; z-index: 2;} .giftcard__code {position: absolute; bottom: var(--gutter); text-align: center; width: 100%; z-index: 50;} .giftcard__code--medium {font-size: 0.875em;} .giftcard__code--small {font-size: 0.75em;} .giftcard__code__inner {display: inline-block; vertical-align: baseline; background-color: #fff; padding: 0.5em; border-radius: 4px; max-width: 450px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);} .giftcard__code--small .giftcard__code__inner {overflow: auto;} .giftcard__code__text {font-weight: 400; font-size: 1.875em; text-transform: uppercase; border-radius: 2px; border: 1px dashed; border-color: var(--colorBorder); padding: 0.4em 0.5em; display: inline-block; vertical-align: baseline; color: var(--colorTextBody); line-height: 1;} .disabled .giftcard__code__text {color: #999; -webkit-text-decoration: line-through; text-decoration: line-through;} .giftcard__amount {position: absolute; top: 0; right: 0; color: #fff; font-size: 2.75em; line-height: 1.2; padding: calc(var(--gutter) / 2); z-index: 50;} .giftcard__amount strong {display: block; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);} .giftcard__amount--medium {font-size: 2em;} .tooltip {display: block; position: absolute; top: -50%; right: 50%; margin-top: 16px; z-index: 3; color: #fff; text-align: center; white-space: nowrap;} .tooltip:before { content: ""; display: block; position: absolute; left: 100%; bottom: 0; width: 0; height: 0; margin-left: -5px; margin-bottom: -5px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 5px solid #333; border-top: 5px solid rgba(51, 51, 51, 0.9); } .tooltip__label { display: block; position: relative; right: -50%; border: none; border-radius: 4px; background: #333; background: rgba(51, 51, 51, 0.9); min-height: 14px; font-weight: 400; font-size: 12px; -webkit-text-decoration: none; text-decoration: none; line-height: 16px; text-shadow: none; padding: 0.5em 0.75em; margin-left: 0.25em; } .tooltip__label small {text-transform: uppercase; letter-spacing: 0.1em; color: #b3b3b3; font-size: 0.875em;} .giftcard__instructions {text-align: center; margin: 0 calc(var(--gutter) / 2) var(--gutter);} .giftcard__actions {position: relative; text-align: center; overflow: hidden; padding-bottom: 1em;} .template-giftcard .action-link {position: absolute; left: calc(var(--gutter) / 2); top: 50%; font-size: 0.875em; font-weight: var(--typeHeaderWeight); display: block; padding-top: 4px; text-transform: uppercase; letter-spacing: 0.2em; margin-top: -10px;} .template-giftcard .action-link:hover, .template-giftcard .action-link:focus {color: var(--colorTextBody);} .template-giftcard .action-link__print { display: inline-block; vertical-align: baseline; width: 17px; height: 17px; vertical-align: middle; margin-right: 10px; opacity: 1; background-image: url("/cdn/s/assets/gift-card/icon-print-164daa1ae32d10d1f9b83ac21b6f2c70.png"); background-repeat: no-repeat; background-position: 0 0; } .giftcard__footer {text-align: center; padding: calc(var(--gutter) * 2) 0;} #QrCode img {padding: var(--gutter); border: 1px solid; border-color: var(--colorBorder); border-radius: 4px; margin: 0 auto var(--gutter);} @media only screen and (max-width: 768px) { .giftcard {font-size: 12px;} .giftcard-header {padding: var(--gutter) 0;} .header-logo {font-size: 2em;} .giftcard__border {padding: calc(var(--gutter) / 2);} .giftcard__actions {padding: calc(var(--gutter) / 2);} .giftcard__actions .btn {width: 100%; padding-left: 0; padding-right: 0;} .template-giftcard .action-link {display: none;} } /*================ Small width ================*/ @media screen and (max-width: 400px) { .giftcard__amount strong {text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);} .giftcard__wrap:before, .giftcard__wrap:after {display: none;} .giftcard__code {font-size: 0.75em;} .giftcard__code--medium {font-size: 0.65em;} .giftcard__code--small {font-size: 0.55em;} } /*================ Small height ================*/ @media screen and (max-height: 800px) { .header-logo img {max-height: 90px;} } @media print { @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } html, body {background-color: #fff;} .giftcard-header {padding: 10px 0;} .giftcard__content, .giftcard__border {border: 0 none;} .site-header__logo-link img:nth-child(2), .giftcard__actions, .giftcard__wrap:before, .giftcard__wrap:after, .tooltip, .add-to-apple-wallet {display: none;} .giftcard__title {float: none; text-align: center;} .giftcard__code__text {color: #555;} .template-giftcard .shop-url {display: block;} .template-giftcard .logo {color: #58686f;} } .slideshow-wrapper {position: relative;} /*Pause button (focusable by keyboard only)*/ .slideshow__pause:focus {clip: auto; width: auto; height: auto; margin: 0; color: var(--colorBtnPrimaryText); background-color: var(--colorBtnPrimary); padding: 10px; z-index: 10000; transition: none;} .video-is-playing .slideshow__pause:focus {display: none;} .slideshow__pause-stop {display: block;} .is-paused .slideshow__pause-stop {display: none;} .slideshow__pause-play {display: none;} .is-paused .slideshow__pause-play {display: block;} .slideshow__slide {display: none; width: 100%; height: 100%; position: relative; overflow: hidden;} .slideshow__slide:first-child {display: block;} .flickity-slider .slideshow__slide {display: block;} .hero--padded .slideshow__slide {border-radius: var(--roundness); overflow: hidden;} :root { --announcementAnimationSpeed: 0.5s; } .announcement-bar {position: relative; font-size: 13px; font-weight: var(--typeHeaderWeight); text-align: center; padding: 7px 0;} @media only screen and (min-width: 769px) { .announcement-bar { padding: 6px 0; font-size: 14px; text-align: left; } [dir="rtl"] .announcement-bar { text-align: right; } } .announcement-slider__slide {position: relative; overflow: hidden; width: 100%;} .announcement-slider__content {opacity: 0; transform: translateY(100%); transition: all var(--announcementAnimationSpeed) ease;} .announcement-slider__content p {margin: 0;} .announcement-slider__content a {-webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px;} .animate-out .announcement-slider__content {opacity: 0; transform: translateY(-100%);} .is-selected .announcement-slider__content {opacity: 1; transform: translateY(0);} /*Article grid items*/ .grid-article {flex: 0 0 100%; display: flex; flex-wrap: wrap; margin-bottom: 40px;} @media only screen and (min-width: 769px) { .grid-article[data-style="medium"], .grid-article[data-style="large"] {display: block;} } .grid-article:last-child { margin-bottom: 0; } .grid-article__image { position: relative; flex: 0 0 100%; } .grid-article__image .image-wrap { border-radius: var(--roundness); } /* Overlaid on article grid item image */ .grid-article__tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; overflow: visible; text-align: center; } .grid-article__tags .article-tag { transform: translateY(-50%); } .grid-article__meta { flex: 0 0 100%; } .grid-article[data-style="large"] .article__title { font-size: calc(var(--typeBaseSize) + 10px); } @media only screen and (max-width: 768px) { .grid-article[data-style="large"] .article__title { font-size: calc(var(--typeBaseSize) + 7px); } } .grid-article[data-style="large"] .article__sub-meta > span { margin: 0 5px 2px; } .grid-article[data-style="medium"] { flex: 0 0 33.3%; } .grid-article[data-style="medium"] .article__title { font-size: calc(var(--typeBaseSize) + 2px); } @media only screen and (min-width: 769px) { .grid-article[data-style="medium"] .article__sub-meta > span { margin: 0 5px 2px; } } /*Compact grid article styles*/ .grid-article[data-style="compact"] { flex: 0 0 100%; flex-wrap: nowrap; text-align: left; margin-bottom: 20px; padding: 0; } .grid-article[data-style="compact"] .grid-article__image { flex: 0 0 40%; align-self: flex-start; } .grid-article[data-style="compact"] .grid-article__meta { flex: 0 0 60%; padding-left: 15px; } .grid-article[data-style="compact"] .article__title { font-size: calc(var(--typeBaseSize) + 1px); } .grid-article[data-style="compact"] .article-tag { font-size: 10px; } /*Only show fist tag*/ .grid-article[data-style="compact"] .article-tag:not(:first-child) { display: none; } /*Medium on large screens matches compact styles on small screens*/ @media only screen and (max-width: 768px) { .grid-article[data-style="medium"] { flex: 0 0 100%; flex-wrap: nowrap; text-align: left; margin-bottom: 20px; } .grid-article[data-style="medium"] .grid-article__image { flex: 0 0 40%; align-self: center; } .grid-article[data-style="medium"] .grid-article__meta { flex: 0 0 60%; padding-left: 15px; } .grid-article[data-style="medium"] .article__title { font-size: calc(var(--typeBaseSize) + 1px); } .grid-article[data-style="medium"] .article-tag { font-size: 10px; } /*Only show fist tag*/ .grid-article[data-style="medium"] .article-tag:not(:first-child) { display: none; } } /*Hide Shopify Payment Buttons if no variant*/ .add-to-cart[disabled] + .shopify-payment-button { display: none; } [data-on-sale] .block-price__regular { display: none; } .block-price__save { display: none; } [data-on-sale] .block-price__save { display: block; } .block-price__sale { display: none; } [data-on-sale] .block-price__sale { display: flex; gap: 10px; } .block-price__unit-price { display: none; } [data-unit-price] .block-price__unit-price { display: block; } .block-price__container { display: flex; align-items: baseline; flex-wrap: wrap; } .product__price { color: var(--colorPrice); margin-right: 5px; font-size: calc(var(--typeBaseSize) + 3px); font-weight: normal; } @media only screen and (min-width: 769px) { .product__price { font-size: calc(var(--typeBaseSize) + 6px); } } .product__price sup { margin-left: 1px; font-size: 60%; top: -0.4em; } .product__price-savings { color: var(--colorTextSavings); white-space: nowrap; } .product__quantity label { display: block; margin-bottom: 10px; } .product-single__title { margin-bottom: 20px; word-wrap: break-word; } .product-single__vendor-sku { opacity: 0.65; } .product-single__vendor-sku > span { display: inline-block; margin-right: 20px; } .product-single__vendor { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } .product-single__sku { font-size: calc(var(--typeBaseSize) - 3px); } .block-variant-picker { display: grid; gap: 16px; padding-top: 4px; } .block-variant-picker[data-picker-type="dropdown"] { display: block; gap: normal; } .breadcrumb { font-size: calc(var(--typeBaseSize) * 0.85); margin: 0 0 18px; } @media only screen and (max-width: 768px) { .breadcrumb { margin-bottom: calc(var(--gutter) / 2); } } .breadcrumb__divider { color: currentColor; /* opacity: 0.2; */ padding: 0 5px; font-weight: 700; } /* General cart item styles */ .cart__item { display: grid; grid-template-areas: "cartImage cartTitle ." "cartImage cartQuantity cartPrice" ". cartRemove cartPrice"; grid-template-columns: 150px auto auto; grid-column-gap: 20px; align-items: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid; border-bottom-color: var(--colorBorder); /*Smaller image in drawer*/ } .site-header__cart .cart__item { grid-template-columns: 100px auto auto; grid-column-gap: 10px; } @media only screen and (max-width: 959px) { .cart__item { grid-template-areas: "cartImage cartTitle cartTitle" "cartImage cartQuantity cartPrice" "cartImage cartRemove cartPrice"; } } .cart__item:last-of-type { border-bottom: 0; } .cart__image { grid-area: cartImage; align-self: flex-start; } .cart__image a { position: relative; display: block; width: 100%; height: 100px; } .cart__image img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: block; object-fit: contain; } .cart__item-title { grid-area: cartTitle; } .cart__item-quantity { grid-area: cartQuantity; } .cart__item-remove { grid-area: cartRemove; } .cart__item-remove a { display: inline-block; margin-top: 10px; } /*Hide in drawer*/ .cart__drawer-form .cart__item-remove { display: none; } .cart__item-price { grid-area: cartPrice; } .cart__item-name { display: block; font-size: calc(var(--typeBaseSize) + 1px); margin-bottom: 8px; font-weight: 700; } .cart__item--variants { font-size: calc(var(--typeBaseSize) - 2px); margin-bottom: 10px; } .cart__item--variants span { font-weight: var(--typeHeaderWeight); } .cart__price { display: block; } .cart__price:not(.cart__price--strikethrough) { font-weight: var(--typeHeaderWeight); font-size: calc(var(--typeBaseSize) + 2px); } .cart__price--strikethrough { -webkit-text-decoration: line-through; text-decoration: line-through; } /* Cart properties */ .cart__item--properties { font-size: calc(var(--typeBaseSize) - 2px); margin-bottom: 10px; line-height: 1.3; } .cart__item--properties span { font-weight: 700; } /*Recommended products*/ .cart__recommended-title { margin-bottom: 20px; } .collection-item { position: relative; display: block; flex: 1 1 100%; text-align: center; margin-bottom: 5px; } @media only screen and (min-width: 769px) { .collection-item { margin-bottom: 15px; } } .collection-image-wrap { position: relative; transition: all 0.2s ease; } .collection-image-wrap.collection-image-color--undefined { --zIndexOverlay: 1; } .collection-image-wrap.collection-image-color--undefined:after { background-color: rgba(0, 0, 0, 0.027); pointer-events: none; transition: all 0.2s ease; border-radius: var(--roundness); } .collection-image-wrap.collection-image-color--white:before { background-color: #fff; transition: all 0.2s ease; border-radius: var(--roundness); } .collection-image-wrap.collection-image-color--grey { --zIndexOverlay: 1; } .collection-image-wrap.collection-image-color--grey:after { background-color: rgba(0, 0, 0, 0.027); pointer-events: none; transition: all 0.2s ease; border-radius: var(--roundness); } .collection-image-wrap.collection-image--circle:hover { border-radius: 50%; } .collection-image-wrap:hover { transform: translateY(-3px); box-shadow: 0 3px 10px rgb(0, 0, 0, 0.1); border-radius: var(--roundness); } .collection-image-wrap:hover:after { background-color: rgba(0, 0, 0, 0); } .collection-item:active .collection-image-wrap { transform: scale(0.97); transition: transform 0.05s ease-out; } .collection-image { position: static; } .collection-image img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: contain; padding: var(--collectionTileMargin); } .collection-image img, .collection-image svg { border-radius: var(--roundness); } .collection-image--is-collection img, .collection-image-fill-space--true img { object-fit: cover; } .collection-image--placeholder { opacity: 1; } .collection-image--placeholder svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .collection-image--circle { border-radius: 50%; overflow: hidden; } .collection-image--circle:after { border-radius: 50%; } .collection-image--circle, .collection-image--square { padding-bottom: 100%; } .collection-image--landscape { padding-top: 75%; } .collection-image--portrait { padding-top: 150%; } .collection-item__title { display: block; margin-top: 12px; font-weight: var(--typeHeaderWeight); padding: 0 7%; } .overlay--before::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--zIndexOverlay, auto); } [class*="color-scheme-"]:not(.color-scheme-none) { position: relative; z-index: 1; } [class*="color-scheme-"]:not(.color-scheme-none) a:not(.btn) { color: currentColor; border-color: currentColor; } .index-section[class*="color-scheme-"]:not(.color-scheme-none) { margin: 0; padding-top: var(--indexSectionPadding); padding-bottom: var(--indexSectionPadding); } .color-scheme-1 { color: var(--colorScheme1Text); background-color: var(--colorScheme1Bg); } .color-scheme-1 .btn { color: var(--colorScheme1Bg); background-color: var(--colorScheme1Text); } .color-scheme-1 .btn.color-scheme-reversed { background-color: var(--colorScheme1Bg); color: var(--colorScheme1Text); border-color: var(--colorScheme1Text); } .color-scheme-2 { color: var(--colorScheme2Text); background-color: var(--colorScheme2Bg); } .color-scheme-2 .btn { color: var(--colorScheme2Bg); background-color: var(--colorScheme2Text); } .color-scheme-2 .btn.color-scheme-reversed { color: var(--colorScheme2Text); background-color: var(--colorScheme2Bg); border-color: var(--colorScheme2Text); } .color-scheme-3 { color: var(--colorScheme3Text); background-color: var(--colorScheme3Bg); } .color-scheme-3 .btn { color: var(--colorScheme3Bg); background-color: var(--colorScheme3Text); } .color-scheme-3 .btn.color-scheme-reversed { color: var(--colorScheme3Text); background-color: var(--colorScheme3Bg); border-color: var(--colorScheme3Text); } .scheme-image, .scheme-darken, .scheme-squiggle, .scheme-swirl, .scheme-dots, .scheme-notebook, .scheme-wave, .scheme-minimal-wave, .scheme-plants, .scheme-cold-blur, .scheme-warm-blur, .scheme-custom-texture-1, .scheme-custom-texture-2, .scheme-custom-texture-3 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } [data-animate].scheme-image { object-fit: cover; pointer-events: none; mix-blend-mode: multiply; opacity: 1; /*Specific styles on some textures*/ } .scheme-image[data-animate][data-texture="space.jpg"] { mix-blend-mode: screen; } [data-animate].scheme-texture--linen, [data-animate].scheme-texture--sand, [data-animate].scheme-texture--stone, [data-animate].scheme-texture--wildflower { opacity: 0.24; } /*Force some elements to be specific colors when over a color scheme*/ [class*="color-scheme-"]:not(.color-scheme-none) input, [class*="color-scheme-"]:not(.color-scheme-none) textarea { color: var(--colorTextBody); background-color: var(--colorBody); } /*Darken is CSS, not image*/ .scheme-darken { --zIndexOverlay: 1; z-index: 1; pointer-events: none; } .scheme-darken:after { background-color: rgba(0, 0, 0, 0.027); pointer-events: none; } /* SVG images as backgrounds - larger images are cached external assets that are only loaded when used */ .scheme-swirl { background-image: var(--urlSwirlSvg); opacity: 0.12; } .scheme-squiggle { background: url("data:image/svg+xml,%3Csvg width='150' height='75' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.17'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .scheme-dots { background-image: radial-gradient(rgba(0, 0, 0, 0.15) 0.5px, transparent 2px); background-size: 16px 16px; } .scheme-notebook { background-image: url(notebook.svg); opacity: 0.5; } .scheme-wave { background-image: url(wave.svg); background-size: cover; opacity: 0.5; } .scheme-minimal-wave { background-image: url(minimal-wave.svg); opacity: 0.5; background-size: cover; } .scheme-plants { background-image: url(plants.svg); background-size: cover; } .scheme-cold-blur { background-image: url(cold-blur.svg); background-size: cover; } .scheme-warm-blur { background-image: url(warm-blur.svg); background-size: cover; } .scheme-custom-texture-1 { background-image: url(custom-texture-1.svg); background-size: cover; } .scheme-custom-texture-2 { background-image: url(custom-texture-2.svg); background-size: cover; } .scheme-custom-texture-3 { background-image: url(custom-texture-3.svg); background-size: cover; } /*Specific overrides*/ .color-scheme-none.footer-promotion { border: 1px solid; border-color: var(--colorBorder); } .recipient-form { display: block; position: relative; margin: 2em auto; } .recipient-form .field { position: relative; } .recipient-form .field__label { position: absolute; top: 0; left: 0; pointer-events: none; color: inherit; padding: 8px 10px; transform-origin: 0 0; transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; margin: 0; } @media only screen and (max-width: 959px) { .recipient-form .field__label { padding: 10px; } } .recipient-form .field__label:not(.variant__button-label):not(.text-label), .recipient-form label:not(.variant__button-label):not(.text-label) { font-weight: normal; } .recipient-form .field__input { margin-bottom: 1.5em; } @media only screen and (max-width: 959px) { .recipient-form .field__input { margin-bottom: 0.6em; } } .recipient-form .field__input.text-area { margin-bottom: 0; height: 150px; } .recipient-form .field__input::-webkit-input-placeholder { color: transparent; } .recipient-form .field__input::-moz-placeholder { color: transparent; } .recipient-form .field__input:focus ~ label, .recipient-form .field__input:not(:placeholder-shown) ~ label { opacity: 0.65; transform: scale(0.85) translateY(-0.4em) translateX(0.15em); font-size: 0.8em; } .recipient-form .field__input:focus, .recipient-form .field__input:not(:placeholder-shown) { padding: 16px 10px 0; } .recipient-form .field__input--error { border-color: var(--errorRed); background-color: var(--errorRedBg); color: var(--errorRed); } .recipient-form .field__input--error ~ label { color: var(--errorRed); } .recipient-form .recipient-form__checkbox-wrapper { display: flex; align-items: center; margin-bottom: 2em; } @media only screen and (max-width: 959px) { .recipient-form .recipient-form__checkbox-wrapper { margin-bottom: 1.5em; } } .recipient-form input[type="checkbox"] { height: 16px; width: 16px; background-color: inherit; border: 1px solid; border-color: var(--colorBorder); border-radius: var(--input-radius); } .recipient-form .checkbox-label { display: block; cursor: pointer; margin-bottom: 0; } .recipient-form .recipient-form-field-label--space-between > span { font-size: 0.8em; } .recipient-form .recipient-fields { display: none; } .site-header__cart-empty { display: none; padding: 20px; } .is-empty .site-header__cart-empty { display: block; } /*Scrollable products, fixed footer*/ .cart__drawer-form { max-height: 75vh; max-height: var(--maxDrawerHeight); display: flex; flex-direction: column; } .cart__scrollable { overflow-y: auto; padding: 20px 20px 0; } .cart__scrollable .scrollable-grid { padding-top: 20px; padding-left: 20px; margin-left: -20px; padding-bottom: 2px; } .cart__footer { padding: 20px; border-top: 1px solid; border-top-color: var(--colorBorder); } .site-nav { margin: 0; } .site-nav__link { display: inline-block; vertical-align: middle; -webkit-text-decoration: none; text-decoration: none; padding: var(--siteNavItemPaddingTopBottom) var(--siteNavItemPadding); white-space: nowrap; color: var(--colorNavText); } .site-nav__link:hover { color: var(--colorNavText); } .is-light .site-nav__link { color: var(--colorStickyNavLinks); } .is-light .site-nav__link:hover { color: var(--colorStickyNavLinks); } .site-nav__link .icon-chevron-down { margin-left: 5px; } @media only screen and (max-width: 959px) { .site-nav__link { padding: var(--siteNavItemPaddingTopBottom) var(--siteNavItemPadding); } } /*Header icons*/ .site-nav__icons { display: flex; align-items: center; } .site-nav__icons > .site-nav__link--icon { flex: 0 0 auto; } /*Hide when cart popup is open*/ .cart-open .site-nav__icons { display: none; } .site-nav__link--icon { display: flex; align-items: center; padding-left: var(--siteNavIconPadding); padding-right: var(--siteNavIconPadding); } @media only screen and (max-width: 768px) { .site-nav__link--icon { padding-left: calc(var(--siteNavItemPadding) / 2); padding-right: calc(var(--siteNavItemPadding) / 2); } .site-nav__link--icon + .site-nav__link--icon { margin-left: -4px; /*~amount of inline-block space*/ } } .site-nav__link--icon .icon { width: 27px; height: 27px; } .site-nav__link--icon .icon.icon-user { position: relative; top: 1px; } @media only screen and (max-width: 768px) { .mobile-nav-open .site-nav__link:not(.mobile-nav-trigger) { display: none; } } .megamenu { padding: 40px 0 0; line-height: 1.8; } .text-center .site-navigation { margin: 0 auto; } .site-navigation--below { margin-left: calc(var(--siteNavItemPadding) * -1); /*Top border*/ } .site-navigation--below:before { position: absolute; left: 0; right: 0; content: ""; display: block; border-top: 1px solid; border-top-color: var(--colorNavText); width: 100%; opacity: 0.1; transition: opacity 0.5s ease 0.3s; z-index: 1; } .is-light .site-navigation--below:before { border-color: var(--colorStickyNavLinks); } .header-wrapper--compressed .site-navigation--below:before { opacity: 0; } .site-header__element.is-active .site-navigation--below:before { opacity: 0.15; } .site-nav__item { position: relative; display: inline-block; margin: 0; } .site-nav__item li { display: block; margin: 0; } .site-nav__item .icon-chevron-down { width: var(--desktopMenuChevronSize); height: var(--desktopMenuChevronSize); } .site-nav--is-megamenu.site-nav__item { position: static; } .megamenu__wrapper { display: flex; } /*Always on right side*/ .megamenu__featured { flex: 0 1 19%; padding-bottom: 40px; } [data-grid-style="simple"] .megamenu__featured .grid-product { border: 1px solid; border-color: var(--colorBorder); } .megamenu__cols { flex: 1 1 81%; flex-flow: column wrap; columns: 4; } .megamenu__cols a:hover { background-color: var(--colorBody); -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } .megamenu__col { padding: 0 40px 40px 0; page-break-inside: avoid; break-inside: avoid; } .megamenu__col-title a { font-weight: var(--typeHeaderWeight); font-size: calc(var(--typeBaseSize) + 1px); } /*Center grid items in megamenu when logo centered*/ .text-center .megamenu .grid { text-align: center; } .text-center .megamenu .grid .grid__item { float: none; display: inline-block; vertical-align: top; text-align: left; } .site-nav__dropdown-link { display: block; padding: 8px 15px; white-space: nowrap; font-size: 14px; } .site-nav__dropdown-link:hover { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } .megamenu .site-nav__dropdown-link { padding: 1px 0; white-space: normal; } .site-nav__link--underline { position: relative; } .site-nav__link--underline:after { content: ""; display: none; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 var(--siteNavItemPadding); border-bottom: 2px solid; border-bottom-color: var(--colorNavText); } /*White underline when no dropdown*/ .is-light .site-nav__item:not(.site-nav--has-dropdown) .site-nav__link--underline:after { border-bottom-color: #fff; } .site-nav__item:hover .site-nav__link--underline:after { display: block; } .site-nav--has-dropdown.is-focused > a, .site-nav--has-dropdown:hover > a { color: var(--colorTextBody) !important; background-color: var(--colorBody); opacity: 1; transition: none; } .site-nav__dropdown { display: block; visibility: hidden; position: absolute; left: 0; z-index: var(--z-index-header); background-color: var(--colorBody); min-width: 100%; padding: calc(var(--gutter) / 3) 0 5px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.09); } details[open] .site-nav__dropdown { visibility: visible; } .site-nav__dropdown-list { margin: 0; } .site-nav__dropdown-animate { transform: translateY(-10px); opacity: 0; } details[open] .site-nav__dropdown-animate { opacity: 1; transform: translateY(0px); transition: opacity 0.3s ease 0.05s, transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) 0.05s; } .site-nav__deep-dropdown { background-color: var(--colorBody); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.09); position: absolute; top: 0; left: 100%; margin: 0; visibility: hidden; opacity: 0; z-index: var(--z-index-header); transform: translate3d(-12px, 0, 0); } .site-nav__deep-dropdown-trigger:hover .site-nav__deep-dropdown, .is-focused + .site-nav__deep-dropdown { visibility: visible; opacity: 1; transform: translate3d(0, 0, 0); transition: all 300ms cubic-bezier(0.2, 0.06, 0.05, 0.95); } .site-nav__deep-dropdown:before { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 10px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.09), transparent); pointer-events: none; } .site-nav__deep-dropdown-trigger:hover .site-nav__dropdown-link--has-children { background-color: var(--colorBodyDim); } .site-nav__dropdown-link--has-children:hover, .site-nav__dropdown-link--has-children:focus { background-color: var(--colorBodyDim); } /*Rotate to face right*/ .site-nav__deep-dropdown-trigger .icon-chevron-down { position: absolute; top: 50%; right: 10px; width: var(--desktopMenuChevronSize); height: var(--desktopMenuChevronSize); transform: rotate(-90deg) translateX(50%); } .site-nav__details { cursor: pointer; color: var(--colorNavText); } .site-nav__close-cart { display: none; } .cart-open .site-nav__close-cart { display: block; } .site-nav__icon-label { margin-left: 15px; } /*Cart link and bubble*/ .cart-link { position: relative; display: inline-block; } .cart-link__bubble { display: none; position: absolute; top: 50%; right: -4px; font-size: 12px; line-height: 1; font-weight: var(--typeHeaderWeight); letter-spacing: 0; text-align: center; } .cart-link__bubble:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; background-color: var(--colorCartDot); border-radius: 50px; width: 150%; height: 0; padding: 10px; transform: translate(-50%, -50%); } /*Slight position change with cart icon*/ [data-icon="cart"] .cart-link__bubble { top: -2px; right: 0; } .cart-link__bubble-num { position: relative; color: var(--colorCartDotText); } .cart-link__bubble--visible { display: block; } /* Override the above for our stroke-only icons */ svg.icon { vertical-align: middle; width: var(--icon-width-size, var(--icon-size, 20px)); height: var(--icon-height-size, var(--icon-size, 20px)); } svg.icon.icon--line { stroke-width: var(--icon-strokeWidth, 2px); stroke-linejoin: var(--icon-strokeLinejoin, miter); } /*Unload ajax styles*/ .collection-grid__wrapper.unload { min-height: 180px; position: relative; } .kproducutSection .flickity-slider .hero__text-shadow.overlay { background-color: rgba(0, 0, 0, 0.5); border-radius: 10px; padding: 40px; max-width: 536px; text-align: center; } .kproducutSection .flickity-slider .hero__text-shadow.overlay .hero__link a.btn { color: #fff !important; font-weight: 600; font-size: 18px; border-radius: 8px; min-width: 190px; padding: 16px 20px; margin-top: 20px; } video.video-js { position: absolute; } .grid-product__title { font-size: 14px; font-weight: 500; } .grid-product__price--current span { color: #e2243c; font-weight: bold; font-size: 18px; } .grid-product__vendor { font-size: 14px; } .section-header.text-left { display: flex; align-items: center; } h2.section-header__title.h2 { flex: 1 1 auto; } span.collection-item__title { font-size: 14px; font-weight: 500; } @media only screen and (min-width: 769px) { .collection-sidebar { padding-right: 10px; margin-bottom: 20px; } } .collection-grid { margin-bottom: var(--indexSectionPadding); } /*Collection sidebar turns into a slide-down drawer on mobile*/ @media only screen and (max-width: 768px) { /*Slight padding above grid when quick view buttons extend above grid item*/ [data-grid-style="simple"] .collection-grid, [data-grid-style*="grey"] .collection-grid, [data-grid-style*="white"] .collection-grid { padding-top: 10px; } } .unload [data-section-type="collection-template"] { animation: grid-product__loading 1.5s ease infinite 1.5s; } .unload .collection-grid { opacity: 0.2; transition: opacity 0.3s; } .item-grid__sidebar { min-height: 0; position: sticky; top: 90px; /*updated with sticky header JS*/ max-height: 90vh; overflow-y: auto; } .collection-mobile-filters .collapsible-trigger__layout--inline { justify-content: space-between; } @media only screen and (max-width: 768px) { .collection-mobile-filters .collapsible-trigger-btn { padding-right: 17px; padding-left: 17px; } .collection-mobile-filters .collapsible-trigger__icon { right: 17px; } } @media only screen and (max-width: 991px) { .collection-mobile-filters .filter-wrapper { display: none; transition: all var(--slideCurve); background-color: var(--colorBody); transform: translateY(-100%); max-height: 80vh; max-height: var(--maxFiltersHeight); overflow: auto; box-shadow: var(--drawerBoxShadow); } .collection-mobile-filters .filter-wrapper.is-active { display: block; transform: translateY(0); } p.store_box-pg > a { flex: 0 0 auto; width: 50%; padding: 15px; } .collection-mobile-filters { position: absolute; left: 0; right: 0; bottom: 0; height: 0; overflow: visible; } } .collection-filter { margin-bottom: calc(var(--gutter) / 2); } @media only screen and (max-width: 768px) { .collection-filter { position: relative; top: 64px; /*updated with JS based on header height*/ z-index: 2; margin-left: calc(var(--page-width-gutter-small) * -1); margin-right: calc(var(--page-width-gutter-small) * -1); margin-bottom: 0; } } .collection-filter__inner { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; } @media only screen and (max-width: 768px) { .collection-filter__inner { position: relative; z-index: 2; justify-content: space-between; background: var(--colorBody); padding: 0 var(--page-width-gutter-small); } .collection-filter__inner:after { content: ""; position: absolute; height: 20px; top: 100%; left: 0; right: 0; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0)); } } .collection-filter__inner select { display: block; width: 100%; border: 0; } .collection-filter__btn { padding: 12px 0; font-weight: var(--typeHeaderWeight); font-size: calc(var(--typeBaseSize) + 1px); } .collection-filter__btn .icon { vertical-align: middle; width: 25px; height: 25px; margin-top: -1px; margin-right: 5px; } .collection-filter__btn path { transition: all 0.3s cubic-bezier(0.18, 0.77, 0.58, 1); } /*Animate SVG to become close icon*/ .collection-filter__btn.is-active path:nth-child(3) { transform: rotate(45deg); transform-origin: 70% 90%; } .collection-filter__btn.is-active path:nth-child(1), .collection-filter__btn.is-active path:nth-child(2), .collection-filter__btn.is-active path:nth-child(4), .collection-filter__btn.is-active path:nth-child(5) { opacity: 0; } .collection-filter__btn.is-active path:nth-child(6) { transform: rotate(-45deg); transform-origin: 80% 44%; } .collection-filter__item { flex: 0 1 auto; } .collection-filter__item--drawer { flex: 0 1 50%; padding-right: calc(var(--gutter) / 4); } .collection-filter__item--count { flex: 1 1 50%; text-align: center; } @media only screen and (max-width: 768px) { .collection-filter__item--count { order: 3; flex: 1 1 100%; } } /*Swap product grid layouts*/ .grid-view-btn { display: block; padding: 10px 8px; opacity: 0.15; } .grid-view-btn:hover { opacity: 0.4; } .grid-view-btn.is-active { opacity: 1; } .grid-view-btn svg { display: block; } @media only screen and (max-width: 768px) { .grid-view-btn svg { width: 18px; height: 18px; } } .collection-filter__item--right { display: flex; align-items: center; justify-content: flex-end; flex: 0 1 auto; /*account for button padding*/ } .collection-filter__item--right > .inline-list { margin-right: -7px; } @media only screen and (max-width: 768px) { .collection-filter__sort select { margin-left: -8px; } } @media only screen and (min-width: 769px) { .collection-filter__sort { padding-right: 15px; margin-right: 15px; /* border-right: 1px solid; */ border-right-color: var(--colorBorder); } } .image-filter__wrapper ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .image-filter__wrapper ul label { height: 100%; align-items: flex-start; border: 1px solid transparent; } .image-filter__wrapper ul label:active, .image-filter__wrapper ul label:hover, .image-filter__wrapper ul label:focus-within { border-color: var(--colorBorder); } .image-filter__wrapper ul .tag__text { margin-left: 0; } .image-filter__wrapper .tag--active label { border-color: var(--colorTextBody); border: 2px solid; } .image-filter__image-wrapper { display: flex; flex-direction: column; gap: 10px; text-align: center; } .tag-list--active-tags:empty { display: none; } @media only screen and (max-width: 768px) { .tag-list--active-tags { margin: 20px 20px 10px; } .collection-sidebar__group { border-top: 1px solid; border-top-color: var(--colorBorder); } } .collection-sidebar__group { overflow: hidden; } @media only screen and (max-width: 768px) { .collection-sidebar__group .tag-list:not(.tag-list--swatches) { columns: 1; } } .collection-sidebar__group .tag-list a:hover { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } @media only screen and (min-width: 769px) { .collection-sidebar__group .collapsible-trigger-btn { padding-top: 5px; } } .product-image-main { position: relative; } .product-image-main[data-size] img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; } .product-image-main[data-size="square"] .image-wrap { padding-bottom: 100% !important; } .product-image-main[data-size="landscape"] .image-wrap { padding-bottom: 75% !important; } .product-image-main[data-size="portrait"] .image-wrap { padding-bottom: 150% !important; } .product__video-wrapper { position: relative; overflow: hidden; max-width: 100%; padding-bottom: 100%; /*apsect ratio overwritten inline*/ height: auto; background-color: var(--colorSmallImageBg); } .product__video-wrapper iframe { width: 100%; height: 100%; transition: opacity 0.5s ease-in; } /*Put overlay on muted videos because they cannot be interacted with*/ .product__video-wrapper.loaded[data-video-style="muted"]:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } /*Unless low power mode requires them to be touched to start*/ .product__video-wrapper.video-interactable:before { display: none; } /*Make sure states don't overlap*/ .product__video-wrapper.loaded:after { display: none; } .product__video-wrapper.loading iframe { opacity: 0.01; /*sneaky way to avoid talking to an invisible YT iframe*/ } .product__video-wrapper.loaded iframe { opacity: 1; } .product__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .product-video-trigger { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /*Zoom button*/ .product__photo-zoom { position: absolute !important; bottom: 0; right: 0; cursor: zoom-in; border: 0; /*Only show active slide's zoom button (mobile)*/ } @media only screen and (max-width: 768px) { .product__photo-zoom { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); padding: 8px; } .product__photo-zoom .icon { width: 21px; height: 21px; } .product__main-photos .product__photo-zoom { margin-bottom: 10px; margin-right: 10px; } /*Hide zoom button on all slides*/ .product-slideshow .product__photo-zoom { opacity: 0; transition: opacity 0.5s ease-out; } .product-slideshow .is-selected .product__photo-zoom { opacity: 1; } } /*Visually hidden, covers full image on desktop*/ @media only screen and (min-width: 769px) { .product__photo-zoom { opacity: 0; width: 100%; top: 0; left: 0; margin: 0; border-radius: 0; } .product__photo-zoom svg, .product__photo-zoom span { display: none; } } .product-single__close-media { position: absolute; top: 10px; right: 10px; z-index: 2; } .multi-selectors { display: flex; justify-content: center; flex-wrap: wrap; } .multi-selectors__item { margin: 0 20px; } .toolbar .multi-selectors__item { margin-right: 0; margin-bottom: 0; } .multi-selectors--footer { justify-content: flex-start; } .multi-selectors--footer .multi-selectors__item { margin-bottom: 20px; margin-left: 0; } .currency-flag { position: relative; display: inline-block; width: 22px; height: 22px; object-fit: cover; vertical-align: middle; overflow: hidden; box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3) inset; border-radius: 50%; background-clip: padding-box; /* Fix for android devices */ } @media only screen and (max-width: 768px) { [data-disclosure-currency] .disclosure-list { left: 50%; transform: translateX(-50%); max-width: 90vw; } [data-disclosure-currency] .disclosure-list--single-true { left: 0; transform: none; } } .newsletter__input-group { margin: 0 auto 20px; max-width: 400px; gap: var(--inputButtonGap); } .newsletter__input-group:last-of-type { margin-bottom: 0; } .newsletter__input::-webkit-input-placeholder { color: var(--colorTextBody); opacity: 1; } .newsletter__input:-moz-placeholder { color: var(--colorTextBody); opacity: 1; } .newsletter__input::-moz-placeholder { color: var(--colorTextBody); opacity: 1; } .newsletter__input:-ms-input-placeholder { color: var(--colorTextBody); } .newsletter__input::-ms-input-placeholder { color: var(--colorTextBody); opacity: 1; } .form__submit--small { line-height: 0; } @media only screen and (max-width: 768px) { span.form__submit--small { display: none; } .blog-sec .new-grid .grid-item { flex: 1 1 calc(50% - 16px) !important; } .nws_sec-img .theme-block p.h2 { font-size: 45px !important; } .form__submit--small { display: block; } } @media only screen and (min-width: 769px) { .form__submit--large { display: block; } .form__submit--small { display: none; } } .shopify-challenge__container { padding: 30px 22px; } @media only screen and (min-width: 769px) { .shopify-challenge__container { padding: 120px 0; } } .input-group { display: flex; } .input-group .input-group-field:first-child, .input-group .input-group-btn:first-child .btn, .input-group input[type="hidden"]:first-child + .input-group-field { border-radius: var(--input-radius) 0 0 var(--input-radius); } .input-group .input-group-field:last-child { border-radius: 0 var(--input-radius) var(--input-radius) 0; } .input-group .input-group-btn:first-child .btn, .input-group input[type="hidden"]:first-child + .input-group-btn .btn { border-radius: var(--buttonRadius) 0 0 var(--buttonRadius); } [dir="rtl"] .input-group .input-group-btn:first-child .btn, [dir="rtl"] .input-group input[type="hidden"]:first-child + .input-group-btn .btn { border-radius: 0 var(--buttonRadius) var(--buttonRadius) 0; } .input-group .input-group-btn:last-child .btn { border-radius: 0 var(--buttonRadius) var(--buttonRadius) 0; } [dir="rtl"] .input-group .input-group-btn:last-child .btn { border-radius: var(--buttonRadius) 0 0 var(--buttonRadius); } /*Nasty Firefox hack for inputs http://davidwalsh.name/firefox-buttons*/ .input-group input::-moz-focus-inner { border: 0; padding: 0; margin-top: -1px; margin-bottom: -1px; } .input-group-field { flex: 1 1 auto; margin: 0; min-width: 0; } .input-group-btn { flex: 0 1 auto; margin: 0; display: flex; /*forces .btn full height*/ } .input-group-btn .icon { vertical-align: initial; } .input-group-btn .btn { min-width: 0; } /* Newsletter reminder */ newsletter-reminder { position: fixed; left: 20px; bottom: 20px; transition: ease-in-out 0.3s opacity; box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15); max-width: 240px; z-index: 10; } @media only screen and (max-width: 768px) { newsletter-reminder { max-width: calc(100% - 40px); } } newsletter-reminder[data-enabled="false"] { opacity: 0; visibility: hidden; pointer-events: none; } newsletter-reminder[class*="color-scheme-"]:not(.color-scheme-none) { position: fixed; } newsletter-reminder .color-scheme-none { color: var(--colorBtnPrimaryText); background-color: var(--colorBtnPrimary); } .newsletter-reminder__message.h3 { cursor: pointer; padding: var(--newsletterReminderPadding); margin: 0; } .pagination { margin: calc(var(--gutter) * 2) 0; text-align: center; } .pagination > span { display: inline-block; vertical-align: middle; line-height: 1; } .pagination a { display: inline-block; } .pagination a:not(.btn), .pagination .page.current { padding: 8px 12px; } .pagination .page.current { opacity: 0.3; } .pagination .btn { transition: transform 0.15s ease-out; } .pagination .btn:hover { transform: scale(1.08); } .pagination .btn .icon { width: 13px; height: 13px; } .pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; touch-action: none; z-index: 15000; -webkit-text-size-adjust: 100%; -webkit-backface-visibility: hidden; outline: none; } .pswp img { max-width: none; } /* style is added when JS option showHideOpacity is set to true */ .pswp--animate_opacity { /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ opacity: 0.001; will-change: opacity; transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--open { display: block; } .pswp--zoom-allowed .pswp__img { cursor: zoom-in; } .pswp--zoomed-in .pswp__img { cursor: grab; } .pswp--dragging .pswp__img { cursor: grabbing; } /* Background is added as a separate element. As animating opacity is much faster than animating rgba() background-color. */ .pswp__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--colorBody); opacity: 0; transform: translateZ(0); -webkit-backface-visibility: hidden; will-change: opacity; } .pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .pswp__container, .pswp__zoom-wrap { touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } /* Prevent selection and tap highlights */ .pswp__container, .pswp__img { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .pswp__zoom-wrap { position: absolute; width: 100%; transform-origin: left top; /* for open/close transition */ transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp__bg { will-change: opacity; /* for open/close transition */ transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { transition: none; } .pswp__container, .pswp__zoom-wrap { -webkit-backface-visibility: hidden; } .pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; } .pswp__img { position: absolute; width: auto; height: auto; top: 0; left: 0; } /* stretched thumbnail or div placeholder element (see below) style is added to avoid flickering in webkit/blink when layers overlap */ .pswp__img--placeholder { -webkit-backface-visibility: hidden; } .pswp--ie .pswp__img { width: 100% !important; height: auto !important; left: 0; top: 0; } /* Error message appears when image is not loaded (JS option errorMsg controls markup) */ .pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; line-height: 16px; margin-top: -8px; color: #ccc; } .pswp__error-msg a { color: #ccc; -webkit-text-decoration: underline; text-decoration: underline; } .pswp__button { position: relative; /*Because JS listens to click on button element itself*/ } .pswp__button:after { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /*Ignore clicks on svgs inside button*/ .pswp__button svg { pointer-events: none; } .pswp__button--arrow--left .icon, .pswp__button--arrow--right .icon { width: 13px; height: 13px; margin: 8px; } .pswp__button[disabled] { opacity: 0; pointer-events: none; } .pswp__ui { position: absolute; display: flex; justify-content: center; align-items: center; bottom: var(--gutter); left: 0; right: 0; transform: translateY(0); transition: transform 0.25s 0.6s; } .pswp__ui .btn { margin: 15px; border: 0; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); } .pswp__ui--hidden { transform: translateY(150%); transition: transform 0.25s; } /* Fixes for iOS15 */ /* See https://gist.github.com/dimsemenov/0b8c255c0d87f2989e8ab876073534ea */ html.pswp-open-in-ios, html.pswp-open-in-ios body { background: #444; height: var(--window-inner-height); overflow: hidden; box-sizing: border-box; } /* Hide page content via CSS when PhotoSwipe opens */ .pswp-open-in-ios body > * { display: none; } .pswp-open-in-ios body .pswp.pswp--open { display: block; } predictive-search { display: flex; align-items: center; position: relative; width: 100%; max-width: 960px; margin: 0 auto; } predictive-search.is-active { flex: 99; } predictive-search.is-active .predictive__screen { display: block; z-index: 3; } predictive-search.is-active .btn--close-search { display: flex; align-items: center; justify-content: center; } .site-header__search-results { position: absolute; top: 100%; transform: translateY(var(--header-padding-bottom)); left: 0; right: 0; background-color: var(--colorBody); color: var(--colorTextBody); max-height: 70vh; max-height: calc(90vh - 100%); overflow: auto; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.09); transition: transform 0.3s cubic-bezier(0.18, 0.77, 0.58, 1); } .header-wrapper--compressed .site-header__search-results { transform: translateY(0); } .site-header__search-results-wrapper { padding: 15px 0; } @media only screen and (min-width: 769px) { .site-header__search-results { max-height: calc(100vh - 100% - 33px); /*search bar + toolbar*/ } .site-header__search-results-wrapper { padding: 30px 0; } } .predictive__label { margin-top: 20px; border-bottom: 1px solid; border-bottom-color: var(--colorBorder); padding-bottom: 5px; margin-bottom: 20px; } :root { /*Layout for article/images*/ --predictiveGap: 10px; } .predictive-result__layout { display: flex; flex-wrap: wrap; padding: var(--predictiveGap); margin-left: calc(var(--predictiveGap) * -1); margin-right: calc(var(--predictiveGap) * -1); } .predictive-result__layout > div { margin: 0 var(--predictiveGap) var(--gutter); } .predictive-result__layout > div:last-child { margin-bottom: 0; } .predictive-result__layout [data-type-products] { flex: 1 1 60%; margin-bottom: 0; } .predictive-result__layout [data-type-products] img { object-fit: contain; } .predictive-result__layout [data-type-products] .predictive-image-fill-space--true img { object-fit: cover; } .predictive-result__layout [data-type-collections], .predictive-result__layout [data-type-pages] { flex: 1 1 200px; } .predictive-result__layout [data-type-articles] { flex: 1 1 60%; } .predictive-result__layout [data-type-articles] .grid-item__meta { margin-left: 10px; } .predictive__image-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .predictive__image-wrap img { object-position: 50% 0; } .predictive-results__footer { padding: 0 0 30px; } .predictive-overflow-hidden { overflow: hidden; } @media only screen and (max-width: 768px) { .predictive-overflow-hidden { overflow: auto; } } [data-dark="true"] input { color: #fff !important; } [data-dark="true"] .btn--search path { stroke: #fff !important; } [data-dark="false"] input { color: #000 !important; } [data-dark="false"] .btn--search path { stroke: #000 !important; } .predictive__screen { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; background: var(--colorModalBg); display: none; } predictive-search form { display: flex; flex-wrap: wrap; z-index: 4; position: relative; width: 100%; } .search__input-wrap { position: relative; flex: 5; transition: flex 0.3s ease-in-out; } .search__input { background: var(--colorNavSearch, #fff); color: var(--color-body-text); flex: 1; width: 100%; border-radius: calc(var(--roundness, 0) * 2); padding-left: 16px; padding-right: 16px; } .btn--search { position: absolute; top: 50%; transform: translateY(-50%); right: 15px; } .btn--search .icon { height: 25px; width: 25px; } @media only screen and (min-width: 769px) { .btn--search { right: 10px; } } [dir="rtl"] .btn--search { right: auto; left: 15px; } @media only screen and (min-width: 769px) { [dir="rtl"] .btn--search { left: 10px; } } .btn--close-search { display: none; flex: 30px 0 0; margin-left: 10px; } .btn--close-search .icon { height: 25px; width: 25px; } .btn--close-search .icon path { stroke: var(--colorNavText) !important; } .search__results { background: var(--color-body); color: var(--color-body-text); position: absolute; width: 100%; min-width: 400px; top: 100%; padding: 0; display: none; margin-top: 10px; container-type: inline-size; max-height: 80vh; overflow-y: auto; word-break: break-all; } @media only screen and (max-width: 768px) { .search__results { width: calc(100% + var(--pageWidthPadding, 17px) * 2); margin-left: calc(var(--pageWidthPadding, 17px) * -1); margin-right: calc(var(--pageWidthPadding, 17px) * -1); max-height: 75vh; } .template-search .page-content .search__results { max-height: 50vh; } } .price-range__slider-wrapper { padding: 0 8px; margin-bottom: 8px; } @media only screen and (max-width: 768px) { .price-range__slider-wrapper { padding: 0 10px; } } .price-range__input { display: none; } .price-range__display-wrapper { display: flex; flex: 1 1 auto; justify-content: space-between; padding: 0; margin-bottom: 8px; width: 100%; } @media only screen and (max-width: 768px) { .price-range__display-wrapper { padding: 0; } } .noUi-horizontal .noUi-handle { border: 0; border-radius: 50%; background: var(--colorTextBody); box-shadow: 0 0 1px 2px rgb(255 255 255); width: 12px; height: 12px; cursor: pointer; right: -6px; top: -3px; } .noUi-horizontal .noUi-handle:hover, .noUi-horizontal .noUi-handle:focus { width: 14px; height: 14px; right: -7px; top: -4px; } .noUi-horizontal .noUi-handle:before, .noUi-horizontal .noUi-handle:after { content: none; } .noUi-target { background: #f4f4f4; border: 0; box-shadow: none; } .noUi-connect { background: var(--colorTextBody); } .noUi-horizontal { height: 6px; } .template-product .grid-product--prefix { margin-top: 16px; margin-bottom: 16px; } .product-grid-item { width: 100%; /*required to prevent double grid border styles*/ background-color: var(--colorBody); } @media only screen and (min-width: 769px) { .product-grid[data-view="list"] .product-tile-layout--inline .grid-product__price--current { font-size: calc(var(--typeBaseSize) + 2px); } } @media only screen and (max-width: 959px) { .product-tile-layout--inline.grid-item { flex: 0 0 100%; } } @media only screen and (max-width: 959px) { .scrollable-grid--small .product-tile-layout--inline.grid-item { flex: 0 0 85%; } } .product-tile-layout--inline .grid-item__link { display: flex; gap: 32px; padding: 16px 16px 8px 16px; } @media only screen and (min-width: 769px) { .product-tile-layout--inline .grid-item__link { padding: 20px; } } .product-tile-layout--inline .grid-product__image-wrap { width: 100%; margin: calc(var(--productTileMargin) / 2) calc(var(--productTileMargin) / 2) 0; } .product-tile-layout--inline .grid-item__meta { width: 100%; display: flex; flex-direction: column; justify-content: center; flex: 0 0 35%; margin: 0; } @media only screen and (min-width: 769px) { [data-view="small"] .product-tile-layout--inline .grid-item__meta { justify-content: flex-start; margin-top: 20px; } } .product-tile-layout--inline .grid-item__meta-main { display: flex; flex-direction: column; justify-content: center; } .product-tile-layout--inline .grid-item__meta-main .grid-product__colors { margin-top: 5px; } .product-tile-layout--inline .grid-item__meta-secondary { flex: initial; } [data-view="list"] .product-tile-layout--inline .grid-item__meta-secondary { text-align: left; } /*Quick add form*/ .quick-add-modal .modal__centered-content { min-width: 70vw; min-height: 350px; max-width: 100%; } @media only screen and (min-width: 769px) { .quick-add-modal .modal__centered-content { min-width: 500px; } } .quick-add-modal .page-width { padding: 0; max-width: none; } /*Hide product layout items*/ .quick-add-modal .product-grid__container > .grid__item { display: none; } /*Except the div with the form*/ .quick-add-modal .product-grid__container .product-grid__content { display: block; width: 500px; max-width: 100%; } .quick-add-modal .product-single__meta { padding: 0; } .quick-add-modal .collapsibles-wrapper, .quick-add-modal .social-sharing { display: none; } .grid-product__secondary-image { position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; opacity: 0; background-color: var(--colorBody); transition: opacity 0s cubic-bezier(0.26, 0.54, 0.32, 1); pointer-events: none; } [data-grid-style*="gridlines"] .grid-product__secondary-image { top: 0; left: 0; right: 0; } .grid-product__secondary-image img { height: 100%; width: 100%; object-fit: cover; } .grid-product:hover .grid-product__secondary-image { transition-duration: 0.2s; opacity: 1; } @media only screen and (max-width: 768px) { .supports-touch .grid-product__secondary-image { display: none; } } .grid-product__color-image { position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; background-repeat: no-repeat; background-size: cover; background-position: center; opacity: 0; background-color: var(--colorBody); } .grid-product__color-image.is-active { opacity: 1; } .grid-product__price--from span:not(.money) { font-size: calc(var(--typeBaseSize) - 5px); } /*Large screen sizing*/ @media only screen and (min-width: 769px) { .grid-product__price--from span:not(.money) { font-size: calc(var(--typeBaseSize) - 3px); } } /*Quick view and quick add elements*/ .grid-product__actions { position: absolute; top: calc(var(--productGridMargin) * -1); right: calc(var(--productGridMargin) * -1); z-index: 1; } .grid-product__actions > button, .grid-product__actions .quick-add-btn, .grid-product__actions .quick-product__btn { display: block; margin-bottom: 5px; } @media only screen and (max-width: 768px) { [data-grid-style*="gridlines"] .grid-product__actions { top: 0; right: 0; } } /*Visual button lives inside actual button element so we can create larger tap areas with smaller visuals*/ @media only screen and (max-width: 768px) { [data-grid-style*="gridlines"] .quick-add-btn .btn { padding: 6px; margin: 0 0 12px 12px; /* override btn--circle */ border-radius: 0 0 0 10px; } /*Make sure button stays round*/ .quick-add-btn .btn--circle { line-height: 0; } .quick-add-btn .icon { width: 12px; height: 12px; } } /*Quick actions appear on hover on larger screens*/ @media only screen and (min-width: 769px) { .grid-product__actions { opacity: 0; transform: translateY(5px); transition: opacity 0.25s ease, transform 0.25s ease-out; } .grid-product:hover .grid-product__actions { opacity: 1; transform: translateY(0); } .grid-product__actions > button, .grid-product__actions .quick-add-btn, .grid-product__actions .quick-product__btn { transition: transform 0.1s ease-out; } .grid-product__actions > button:hover, .grid-product__actions .quick-add-btn:hover, .grid-product__actions .quick-product__btn:hover { transform: scale(1.15); } .grid-product:focus-within .grid-product__actions { opacity: 1; transform: translateY(0); transition: opacity 0.25s ease, transform 0.25s ease-out; } } .product__photos--beside { display: flex; width: 100%; } .product__photos { direction: ltr; margin-top: 10px; } .product__photos a { display: block; max-width: 100%; } .product__photos img { display: block; margin: 0 auto; max-width: 100%; width: 100%; opacity: 1; } @media only screen and (max-width: 768px) { .page-content--full .product__photos { margin-top: 0; } } .product__main-photos { position: relative; flex: 1 1 auto; } .product__main-photos img { display: none; } .product__main-photos .flickity-page-dots { display: none; } .product__main-photos .product-slideshow { border: 1px solid; border-color: var(--colorBorder); } @media only screen and (max-width: 768px) { .product__main-photos .product-slideshow { border: 0; } } @media only screen and (max-width: 768px) { .product__main-photos { margin-bottom: 30px; margin-left: calc(var(--page-width-gutter-small) * -1); margin-right: calc(var(--page-width-gutter-small) * -1); border: 0; /* if no slideshow exists don't create the margin for slideshow dots */ } [data-has-slideshow="false"] .product__main-photos { margin-bottom: 0; } .product__main-photos .flickity-page-dots { display: block; } } .product__thumbs { position: relative; } .product__thumbs--below { margin-top: calc(var(--grid-gutter-small) / 2); } @media only screen and (min-width: 769px) { .product__thumbs--below { margin-top: calc(var(--gutter) / 2); } } .product__thumbs--beside { flex: 0 0 60px; max-width: 60px; margin-left: calc(var(--grid-gutter-small) / 2); } @media only screen and (min-width: 769px) { .product__thumbs--beside { flex: 0 0 80px; max-width: 80px; margin-left: calc(var(--gutter) / 2); } .product__thumbs--beside.product__thumbs-placement--left { order: -1; margin-left: 0; margin-right: calc(var(--gutter) / 2); } } .product__thumbs--scroller { scrollbar-width: none; scroll-behavior: smooth; -ms-overflow-style: -ms-autohiding-scrollbar; } .product__thumbs--scroller::-webkit-scrollbar { height: 0; width: 0; } .product__thumbs--below .product__thumbs--scroller { overflow-x: scroll; white-space: nowrap; text-align: center; } .product__thumbs--beside .product__thumbs--scroller { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; overflow-y: scroll; } .product__thumb-item { border: 2px solid transparent; } .product__thumb-item a:focus, .product__thumb-item a.is-active { outline: none; } .product__thumb-item a:focus:before, .product__thumb-item a.is-active:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset 0 0 0 2px var(--colorTextBody); z-index: 1; } /*Don't pre-focus thumbnails*/ .product__thumb-item a:active:before { content: none; } .product__thumbs--beside .product__thumb-item { margin-bottom: calc(var(--grid-gutter-small) / 2); } @media only screen and (min-width: 769px) { .product__thumbs--beside .product__thumb-item { margin-bottom: calc(var(--gutter) / 2); } } .product__thumbs--beside .product__thumb-item:last-child { margin-bottom: 0; } .product__thumbs--below .product__thumb-item { display: inline-block; vertical-align: middle; margin-right: calc(var(--grid-gutter-small) / 2); max-width: 80px; } @media only screen and (min-width: 769px) { .product__thumbs--below .product__thumb-item { margin-right: calc(var(--gutter) / 2); } } .product__thumbs--below .product__thumb-item:last-child { margin-right: 0; } .product__thumb .image-wrap img { border: 1px solid; border-color: var(--colorBorder); position: static; } /* When image sets are enabled, hide slides that aren't in the slider */ .product-slideshow.flickity-enabled .product-main-slide { display: none; } .product-slideshow.flickity-enabled .flickity-viewport .product-main-slide { display: block; } /*Thumb slider arrows*/ .product__thumb-arrow { position: absolute; background: var(--colorBody); color: var(--colorTextBody); transform: none; border-radius: 0; padding: 0; z-index: 2; } .product__thumb-arrow .icon { display: inline-block; width: 6px; height: 10px; } .product__thumbs[data-position="below"] .product__thumb-arrow { top: 0; height: 100%; width: 25px; } .product__thumbs[data-position="below"] .product__thumb-arrow.product__thumb-arrow--prev { left: 0; text-align: left; } .product__thumbs[data-position="below"] .product__thumb-arrow.product__thumb-arrow--next { right: 0; text-align: right; } .product__thumbs[data-position="beside"] .product__thumb-arrow { width: 100%; } .product__thumbs[data-position="beside"] .product__thumb-arrow .icon { margin: 0 auto; transform: rotate(90deg); } .product__thumbs[data-position="beside"] .product__thumb-arrow.product__thumb-arrow--prev { top: 0; left: auto; padding-bottom: 10px; } .product__thumbs[data-position="beside"] .product__thumb-arrow.product__thumb-arrow--next { top: auto; bottom: 0; right: auto; padding-top: 10px; } .product__thumb { position: relative; display: block; cursor: pointer; } .product__thumb-icon { position: absolute; top: 5px; right: 5px; background-color: var(--colorTextBody); border-radius: 100px; padding: 6px; z-index: 1; opacity: 1; font-size: 0; } .product__thumb-icon .icon { fill: var(--colorBody); width: 10px; height: 10px; } @media only screen and (min-width: 769px) { .product__thumb-icon .icon { width: 13px; height: 13px; } } /*Model viewer controls*/ .shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area { opacity: 1; /*always show controls*/ background: var(--colorBody); border-color: var(--colorTextBodyAlpha005); border-radius: 50px; } .shopify-model-viewer-ui .shopify-model-viewer-ui__button { color: var(--colorTextBody); } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:hover { color: var(--colorTextBody); } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:active, .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control.focus-visible:focus { color: var(--colorTextBody); background-color: var(--colorTextBodyAlpha005); } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:not(:last-child):after { border-color: var(--colorTextBodyAlpha005); } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster { background-color: var(--colorTextBody); color: var(--colorBody); border-radius: 100%; border: 1px solid; border-color: var(--colorBodyAlpha05); } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:hover, .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:focus { color: var(--colorBody); } /*View in space button*/ .product-single__view-in-space { display: block; color: var(--colorTextBody); background-color: var(--colorTextBodyAlpha008); width: 80%; width: calc(80% - 4px); /*4px = right margin on product-image-main*/ margin: 40px 10% 10px; padding: 5px 10px 10px; } .product-single__view-in-space[data-shopify-xr-hidden] { display: none; } .product-single__view-in-space-text { font-size: calc(var(--typeBaseSize) * 0.85); display: inline-block; vertical-align: middle; margin-left: 5px; } /*Model viewer container*/ .shopify-model-viewer-ui, .shopify-model-viewer-ui model-viewer { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .shopify-model-viewer-ui__button[hidden] { display: none; } /*Inventory indicator*/ @keyframes inventory-pulse { 0% { opacity: 0.5; } 100% { transform: scale(2.5); opacity: 0; } } .icon--inventory:before, .icon--inventory:after { width: 9px; height: 9px; background: #54c63a; border-radius: 9px; position: absolute; left: 0; top: 0; content: ""; margin: 8px; } .icon--inventory:before { animation: inventory-pulse 2s linear infinite; } .inventory--low .icon--inventory:before, .inventory--low .icon--inventory:after { background: #f4af29; } product-inventory { padding-top: 20px; } .product-grid-item .product-tags { padding: 0 16px 16px; } @media only screen and (max-width: 959px) { .product-grid-item .product-tags { padding: 0 15px 15px; } } .product-tag { display: inline-flex; align-items: center; justify-content: space-between; padding: 0.2rem 0.4rem; margin-right: 2px; margin-top: 4px; margin-bottom: 4px; white-space: nowrap; border: 1px solid; font-size: 13px; transition: ease-in-out 0.3s opacity; } .product-tag.product-tag--has-link:hover { opacity: 0.7; } .product-tag .icon { display: flex; width: 14px; height: 14px; margin-right: 0.25rem; } .product-tag a { display: inline-flex; align-items: center; justify-content: space-between; } .product-tag--style-round { border-radius: 20px; } .product-tag--none { border-color: var(--colorTextBodyAlpha008); } .product-tag--scheme_1 { background-color: var(--colorScheme1Bg); border-color: var(--colorScheme1Bg); color: var(--colorScheme1Text); } .product-tag--scheme_1 a { color: var(--colorScheme1Text); } .product-tag--scheme_2 { background-color: var(--colorScheme2Bg); border-color: var(--colorScheme2Bg); color: var(--colorScheme2Text); } .product-tag--scheme_2 a { color: var(--colorScheme2Text); } .product-tag--scheme_3 { background-color: var(--colorScheme3Bg); border-color: var(--colorScheme3Bg); color: var(--colorScheme3Text); } .product-tag--scheme_3 a { color: var(--colorScheme3Text); } advanced-accordion { display: block; border-bottom: 1px solid var(--colorBorder); } advanced-accordion[data-disabled="true"] .accordion__title { cursor: default; } .advanced-accordion--1-per-row .accordion__content-block { width: 100%; } .advanced-accordion--2-per-row .accordion__content-block { width: 50%; } .advanced-accordion--3-per-row .accordion__content-block { width: 33.333%; } .advanced-accordion--4-per-row .accordion__content-block { width: 25%; } .advanced-accordion--5-per-row .accordion__content-block { width: 20%; } .accordion__content { display: flex; flex-direction: row; flex-wrap: wrap; } .accordion__title { width: 100%; background: transparent; border: 0; padding: 20px 0; text-align: left; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .accordion__title h2 { margin: 0; } .accordion__title svg.icon { --icon-size: 24px; stroke-width: calc(var(--icon-strokeWidth) / 1.125); transition: ease-in-out 0.3s transform; } details[open] .accordion__title svg { transform: rotate(180deg); } .accordion__content-block { padding: 20px; } @media only screen and (max-width: 768px) { .accordion__content-block { flex: 100% 0 0 !important; padding: 0 15px 20px 15px; } } @media only screen and (max-width: 768px) { .accordion__content-block.two-per-row-mobile { flex: 50% 0 0 !important; } } .accordion__content-block .content-block__image { margin-bottom: 20px; } .accordion__content-block img { height: auto; } a.accordion-link-block__link { display: flex; justify-content: space-between; } a.accordion-link-block__link svg { height: 1rem; margin-left: 10px; } .custom-content { display: flex; align-items: stretch; flex-wrap: wrap; width: auto; margin-bottom: calc(var(--grid-gutter) * -1); margin-left: calc(var(--grid-gutter) * -1); } @media only screen and (max-width: 768px) { .custom-content { margin-bottom: calc(var(--grid-gutter-small) * -1); margin-left: calc(var(--grid-gutter-small) * -1); } } .custom__item { flex: 0 0 auto; margin-bottom: var(--grid-gutter); padding-left: var(--grid-gutter); max-width: 100%; } @media only screen and (max-width: 768px) { .custom__item { flex: 0 0 auto; padding-left: var(--grid-gutter-small); margin-bottom: var(--grid-gutter-small); } .custom__item.small--one-half { flex: 1 0 50%; max-width: 400px; margin-left: auto; margin-right: auto; } } .custom__item img { display: block; } .custom__item-inner { position: relative; display: inline-block; text-align: left; max-width: 100%; width: 100%; } .custom__item-inner--video, .custom__item-inner--html { display: block; } .custom__item-inner--image { width: 100%; } .custom__item-inner--html img { display: block; margin: 0 auto; } .custom__item-inner--placeholder-image { width: 100%; } .align--top-middle { text-align: center; } .align--top-right { text-align: right; } .align--middle-left { align-self: center; } .align--center { align-self: center; text-align: center; } .align--middle-right { align-self: center; text-align: right; } .align--bottom-left { align-self: flex-end; } .align--bottom-middle { align-self: flex-end; text-align: center; } .align--bottom-right { align-self: flex-end; text-align: right; } /* Age verification popup */ .age-verification-popup .rte { margin-top: 20px; margin-bottom: 20px; } @media only screen and (min-width: 769px) { .age-verification-popup .rte { margin-bottom: 30px; } } .age-verification-popup .age-verification-popup__btns-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .age-verification-popup__background-image-wrapper { overflow: hidden; width: 100%; height: 100%; position: absolute; } .age-verification-popup__background-image { object-fit: cover; width: 100%; height: 100%; } .age-verification-popup__content--active { opacity: 1; transition: opacity 1.5s ease-in; } .age-verification-popup__content--inactive, .age-verification-popup__content--inactive *, .age-verification-popup__content--inactive .btn { opacity: 0; width: 0; height: 0; position: absolute; visibility: hidden; padding: 0; border: 0; margin: 0; line-height: 0; font-size: 0; } .age-verification-popup__decline-content--inactive, .age-verification-popup__decline-content--inactive *, .age-verification-popup__decline-content--inactive .btn { opacity: 0; width: 0; height: 0; position: absolute; visibility: hidden; padding: 0; border: 0; margin: 0; line-height: 0; font-size: 0; } .age-verification-popup__decline-content--active { opacity: 1; transition: opacity 1.5s ease-in; } .age-verification-popup__content-wrapper { text-align: center; max-width: 520px; margin: 0 auto; } /* Expanse specific styles */ .age-verification-popup { top: 0; bottom: 0; } .age-verification-popup.age-verification-popup--image-false { position: fixed !important; z-index: 30 !important; } .age-verification-popup.age-verification-popup--image-false.modal:before { background-color: transparent; animation: none; } .age-verification-popup.age-verification-popup--image-false .modal__inner { box-shadow: none; background-color: transparent; } .age-verification-popup.age-verification-popup--image-false.color-scheme-none { background-color: var(--colorBody); } /* We may want to move this to the global color scheme stylesheet */ .age-verification-popup.color-scheme-none .btn.color-scheme-reversed { color: var(--colorBtnPrimary); background-color: var(--colorBtnPrimaryText); border-color: var(--colorBtnPrimary); } /* * This is the stylesheet entrypoint for the apps section. * This file and all its inclusions will be processed through postcss */ .section-header { margin-bottom: var(--sectionHeaderBottom); } .section-header select { display: inline-block; vertical-align: middle; } .section-header--flush { margin-bottom: 0; } .section-header--with-link { display: flex; align-items: center; } .section-header--with-link select { flex: 0 1 auto; } .section-header__title { margin-bottom: 0; } .section-header--with-link .section-header__title { flex: 1 1 auto; } .section-header__title a { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } .section-header__link { flex: 0 1 auto; margin-top: calc(var(--gutter) / 2); font-weight: var(--typeHeaderWeight); -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .section-header--with-link .section-header__link { margin-top: 0; } @media only screen and (max-width: 768px) { .section-header__link { margin-left: 10px; } } .section-header--404 { padding-top: 80px; } .section-header select { margin: 10px 0; } .section-header p { margin: 10px 0; } /* Standalone tag style */ .article-tag__wrapper { margin-bottom: 20px; } .article-tag__wrapper .label { margin-right: 10px; } .article__comment { margin-bottom: 20px; } .article__comment:last-child { margin-bottom: 0; } .comment-author { margin-bottom: 0; } .comment-date { font-size: calc(var(--typeBaseSize) * 0.85); display: block; margin-top: 3px; } @media only screen and (max-width: 768px) { .comment-date { margin-bottom: calc(var(--gutter) / 2); } } .background-media-text { position: relative; width: 100%; overflow: hidden; background: var(--colorLargeImageBg); } .background-media-text__inner { position: absolute; z-index: 2; width: 100%; height: 100%; } .background-media-text__aligner { margin: calc(var(--gutter) * 2); } .background-media-text__text { text-align: left; font-size: 1.1em; background: var(--colorBody); padding: var(--gutter); width: 380px; border-radius: var(--roundness); overflow: hidden; } html[dir="rtl"] .background-media-text__text { text-align: right; } @media only screen and (max-width: 768px) { .background-media-text__text { text-align: center; } } .background-media-text__text .btn { margin-top: calc(var(--gutter) / 2); } @media only screen and (min-width: 769px) { .background-media-text--right .animation-contents { float: right; } } /*Section height*/ .background-media-text__container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } @media only screen and (max-width: 768px) { .background-media-text__container { position: relative; height: 240px; } .background-media-text__inner { position: relative; bottom: 0; } .background-media-text__aligner { margin: -10px 10px 10px; } .background-media-text__text { padding: calc(var(--gutter) * 0.75); width: auto; } .background-media-text.loading:before, .background-media-text.loading:after { top: 117px; } } @media only screen and (min-width: 769px) { .background-media-text--450 { min-height: 450px; } .background-media-text--550 { min-height: 550px; } .background-media-text--650 { min-height: 650px; } .background-media-text--750 { min-height: 750px; } .background-media-text__image { height: 100%; object-fit: cover; } .background-media-text__image, .background-media-text__image svg { opacity: 0; } } .background-media-text__image { opacity: 0; animation: none; transition: none; } .loaded .background-media-text__image, .loaded .background-media-text__image svg { animation: zoom-fade 1s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards; transition: none; } @media only screen and (min-width: 769px) { .loaded .background-media-text__inner .animation-contents { transform: translateY(0); opacity: 1; transition: all 0.8s cubic-bezier(0.26, 0.54, 0.32, 1) 0.5s; } } .background-media-text__inner { position: absolute; z-index: 2; width: 100%; height: 100%; } @media only screen and (min-width: 769px) { .background-media-text--right .animation-contents { float: right; } } .blog-layout { display: flex; flex-wrap: nowrap; flex-direction: column; } .blog-layout__main { margin-bottom: 20px; } .blog-layout__sidebar { order: 1; } /* Any section that isn't the main layout or sidebar should be full width */ .blog-layout > div:not(.blog-layout__main):not(.blog-layout__sidebar) { flex: 1 0 100%; } @media only screen and (min-width: 769px) { .blog-layout { flex-direction: row; flex-wrap: wrap; } .blog-layout__main { flex: 1 1 calc(60% - 90px); } .blog-layout__sidebar { order: 0; flex: 0 0 calc(40% - 90px); align-self: flex-start; padding-left: 0; margin-left: 0; border-left: 0; padding-right: 45px; margin-right: 45px; border-right: 1px solid; border-right-color: var(--colorBorder); } [dir="rtl"] .blog-layout__sidebar { padding-right: 0; margin-right: 0; border-right: 0; padding-left: 45px; margin-left: 45px; border-left: 1px solid; border-left-color: var(--colorBorder); } .blog-layout__main + .blog-layout__sidebar { padding-right: 0; margin-right: 0; border-right: 0; padding-left: 45px; margin-left: 45px; border-left: 1px solid; border-left-color: var(--colorBorder); } [dir="rtl"] .blog-layout__main + .blog-layout__sidebar { padding-left: 0; margin-left: 0; border-left: 0; padding-right: 45px; margin-right: 45px; border-right: 1px solid; border-right-color: var(--colorBorder); } } .article-tag { display: inline-block; background-color: var(--colorBody); color: var(--colorTextBody); border: 1px solid; border-color: var(--colorTextBody); padding: 3px 9px; margin: 5px; font-size: 12px; font-weight: var(--typeHeaderWeight); letter-spacing: 0.15em; text-transform: uppercase; } .tag--inline .article-tag { margin: 0; } .article-tag:hover, .article-tag:active { background-color: var(--colorBody); color: var(--colorTextBody); } @media only screen and (max-width: 768px) { .article-tag { padding: 4px 6px; font-size: 10px; margin: 3px; } } /*Remove tags (top of sidebar)*/ .tag--remove, .tag--inline { display: inline-block; position: relative; margin: 0 10px 13px 0; } .tag--remove a, .tag--inline a { display: block; text-align: left; padding: 7px 15px 7px 36px; min-width: 0; } /*X icon sits over button, not in it*/ .tag--remove .icon, .tag--inline .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--colorBtnPrimaryText); } .tag--inline a { padding: 7px 15px 7px 15px; } .blog-layout { display: flex; flex-wrap: nowrap; flex-direction: column; } .blog-layout__main { margin-bottom: 20px; } /* Any section that isn't the main layout or sidebar should be full width */ .blog-layout > div:not(.blog-layout__main):not(.blog-layout__sidebar) { flex: 1 0 100%; } @media only screen and (min-width: 769px) { .blog-layout { flex-direction: row; flex-wrap: wrap; } .blog-layout__main { flex: 1 1 calc(60% - 90px); } .blog-layout__main + .blog-layout__sidebar { padding-right: 0; margin-right: 0; border-right: 0; padding-left: 45px; margin-left: 45px; border-left: 1px solid; border-left-color: var(--colorBorder); } [dir="rtl"] .blog-layout__main + .blog-layout__sidebar { padding-left: 0; margin-left: 0; border-left: 0; padding-right: 45px; margin-right: 45px; border-right: 1px solid; border-right-color: var(--colorBorder); } } .collection-hero { position: relative; width: 100%; height: 280px; overflow: hidden; background-color: var(--colorLargeImageBg); } @media only screen and (min-width: 769px) { .collection-hero { height: 400px; } } .collection-hero__content { --zIndexOverlay: -1; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; display: flex; align-items: flex-end; padding: calc(var(--gutter) / 2) 0; color: #fff; z-index: 1; } @media only screen and (min-width: 769px) { .collection-hero__content { padding: var(--gutter) 0; } } .collection-hero__content a { color: #fff; } /*Account for overlayed header/toolbar*/ .overlaid-header .collection-hero__content { padding-top: 70px; } @media only screen and (min-width: 769px) { .overlaid-header .collection-hero__content { padding-top: 100px; } } .collection-hero__content .page-width { width: 100%; } .collection-hero__content:after { background: linear-gradient(45deg, rgba(0, 0, 0, 0.3), transparent 50%); pointer-events: none; } /*Apply animations*/ .collection-hero__image { transform: scale(1); transition: transform 1s cubic-bezier(0.18, 0.63, 0.25, 1), opacity 0.7s ease; animation: none; object-fit: cover; } /*Return to collection link*/ .return-section { margin-top: var(--indexSectionPadding); padding: 20px; } .return-link { text-align: center; padding: 12px 22px; } .return-link .icon { width: 20px; margin-right: 8px; } .note, .errors { border-radius: var(--input-radius); padding: 6px 12px; margin-bottom: calc(var(--gutter) / 2); border: 1px solid transparent; text-align: left; } .note ul, .errors ul, .note ol, .errors ol { margin-top: 0; margin-bottom: 0; } .note li:last-child, .errors li:last-child { margin-bottom: 0; } .note p, .errors p { margin-bottom: 0; } .note { border-color: var(--colorBorder); } .errors ul { list-style: disc outside; margin-left: 20px; } .note--success { color: var(--successGreen); background-color: var(--successGreenBg); border-color: var(--successGreen); } .note--success a { color: var(--successGreen); -webkit-text-decoration: underline; text-decoration: underline; } .note--success a:hover { -webkit-text-decoration: none; text-decoration: none; } .form-error, .errors { color: var(--errorRed); background-color: var(--errorRedBg); border-color: var(--errorRed); } .form-error a, .errors a { color: var(--errorRed); -webkit-text-decoration: underline; text-decoration: underline; } .form-error a:hover, .errors a:hover { -webkit-text-decoration: none; text-decoration: none; } /* Countdown */ .countdown-wrapper { position: relative; } .countdown__background-image-wrapper { width: 100%; height: 100%; position: absolute; } .countdown__background-image { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; } .countdown__mobile-image-wrapper { width: 100%; height: 100%; position: absolute; } .countdown__mobile-image { width: 100%; height: 100%; object-fit: cover; } .countdown-layout--banner .countdown__content { padding: 2rem; } @media only screen and (min-width: 769px) { .countdown-layout--banner .countdown__content { display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-around; gap: 1rem; padding: 1.6rem 2rem; } } .countdown-layout--banner.countdown-blocks--2.page-width .countdown__content { justify-content: space-around; } .countdown-layout--banner.countdown-blocks--2 .countdown__content { justify-content: center; } @media only screen and (min-width: 769px) { .countdown-layout--banner .countdown__block { width: 33%; } } .countdown__content { width: 100%; height: auto; max-height: 650px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5rem 2rem; text-align: center; } .page-width .countdown__content { position: relative; } @media only screen and (min-width: 769px) { .countdown-layout--hero .countdown__content { height: 100vh; } } .countdown__block { width: 100%; margin: 1rem auto; z-index: 3; } .countdown__block--content { display: flex; flex-direction: column; justify-content: center; align-items: center; } .countdown__block--content .countdown__block--button { width: 100%; margin: 0; /* Nested button will get spacing from text above it */ } @media only screen and (min-width: 769px) { .countdown-blocks--2.countdown-layout--banner .countdown__block--timer, .countdown-blocks--2.countdown-layout--banner .countdown__block--content { width: 50%; } } @media only screen and (min-width: 769px) { .countdown-blocks--2.countdown-layout--banner .countdown__block--button.button-block-active { width: 50%; } } .countdown__text-wrapper { display: flex; flex-direction: column; justify-content: center; } @media only screen and (min-width: 769px) { .countdown-layout--hero .countdown__text-wrapper { width: 50%; } } .countdown__text-wrapper--content-alignment-left { text-align: left; } .countdown__text-wrapper--content-alignment-right { text-align: right; } .countdown__display { display: flex; justify-content: center; } .countdown__display--loaded { opacity: 1; visibility: visible; transition: opacity ease-in 0.3s; } .countdown__display--visible + .countdown__timer-message--visible { margin-top: 1.5rem; } .countdown__display--hidden { visibility: hidden; opacity: 0; width: 0; height: 0; margin: 0; transition: opacity ease-out 3s; } .countdown__display-block { display: flex; flex-wrap: wrap; flex-direction: column; align-content: center; border-right: 1px solid; padding: 0 1rem; } .countdown__display-block h2 { margin-bottom: 16px; } @media only screen and (min-width: 769px) { .countdown__display-block h2 { margin-bottom: 4px; } } .countdown__display-block span { font-size: 0.6rem; letter-spacing: 1.7px; } @media only screen and (min-width: 769px) { .countdown__display-block span { font-size: 0.75rem; } } .countdown__display-block:last-child { border-right: none; } [dir="rtl"] .countdown__display-block:last-child { border-right: 1px solid; } [dir="rtl"] .countdown__display-block:first-child { border-right: none; } .countdown__timer-message { opacity: 0; visibility: hidden; margin: 0; height: 0; } .countdown__timer-message--visible { opacity: 1; visibility: visible; transition: opacity ease-in 1s; height: auto; } .countdown__block--hidden { opacity: 0; visibility: hidden; margin: 0; transition: opacity ease-out 1s; width: 0 !important; } .countdown__overlay::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background-color: var(--countdown-overlay-rgba); } /* Expanse specific styles */ .countdown__image--blur-true img { filter: blur(4px); transform: scale(1.03); } .countdown__image--blur-true .countdown__background-image-wrapper { overflow: hidden; } .countdown__image--blur-true .countdown__mobile-image-wrapper { overflow: hidden; } .countdown-wrapper.page-width .countdown__content, .countdown-wrapper.page-width .countdown__background-image-wrapper, .countdown-wrapper.page-width .countdown__background-image, .countdown-wrapper.page-width .countdown__mobile-image-wrapper, .countdown-wrapper.page-width .countdown__mobile-image, .countdown-wrapper.page-width .countdown__overlay::after { border-radius: var(--roundness); } .countdown__block--content .countdown__block--button { margin-top: 1.5rem; } .color-scheme-1 .countdown__button.btn--secondary { background-color: transparent; color: var(--colorScheme1Text); border-color: var(--colorScheme1Text); } .color-scheme-2 .countdown__button.btn--secondary { background-color: transparent; color: var(--colorScheme2Text); border-color: var(--colorScheme2Text); } .color-scheme-3 .countdown__button.btn--secondary { background-color: transparent; color: var(--colorScheme3Text); border-color: var(--colorScheme3Text); } .collapsible-trigger { color: inherit; position: relative; } /*button element cannot be display:flex, so add child span to style*/ .collapsible-trigger__layout { display: flex; align-items: center; justify-content: space-between; } .collapsible-trigger__layout--inline { position: relative; justify-content: flex-start; } .collapsible-trigger__layout--inline > span { padding-right: 15px; } .collapsible-trigger__layout--inline .collapsible-trigger__icon { position: static; transform: none; } .collapsible-trigger__icon { display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: var(--collapsibleIconWidth); height: var(--collapsibleIconWidth); } [dir="rtl"] .collapsible-trigger__icon { left: 0; right: auto; } .collapsible-trigger__icon .icon { display: block; width: var(--collapsibleIconWidth); height: var(--collapsibleIconWidth); transition: all 0.1s ease-in; } .collapsible-trigger.is-open .collapsible-trigger__icon > .icon-chevron-down { transform: rotate(180deg); } .collapsible-trigger--inline { font-weight: var(--typeHeaderWeight); padding: 11px 0 11px 20px; } .collapsible-trigger--inline .collapsible-trigger__icon { right: auto; left: 0; } .collapsible-content { transition: opacity 0.2s ease, height 0.15s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateY(-10px); } .collapsible-content.is-open { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity 0.3s ease, height 0.25s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .collapsible-content--all { visibility: hidden; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: 0; height: 0; } /* 13-sept */ .faqS_con .collapsible-content--all { font-size: 16px; line-height: 1.6; } #CollectionSidebarFilterWrap li.tag { font-size: 15px; } #CollectionSidebarFilterWrap .catgory_main_sec .collapsible-trigger-btn { padding: 15px 0; } #CollectionSidebarFilterWrap .collapsible-content--all.is-open { padding-top: 10px; } @media only screen and (min-width: 769px) { .collapsible-content--all.is-open { overflow: initial; visibility: visible; opacity: 1; height: auto; } } .collapsible-content--all.is-open { border-bottom: 1px solid; border-color: var(--colorBorder); } .filter-wrapper .collapsible-content--all.is-open { border: 0; } @media only screen and (max-width: 768px) { .collapsible-content--small { visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: 0; height: 0; } .collapsible-content--small .collapsible-content__inner { transform: translateY(40px); } } @media only screen and (min-width: 769px) { .collapsible-content__inner { padding: 0 0 14px; } } .collapsible-trigger[aria-expanded="true"] .collapsible-label__closed { display: none; } .collapsible-label__open { display: none; } .collapsible-trigger[aria-expanded="true"] .collapsible-label__open { display: inline-block; } .index-section--faq { margin-bottom: 20px; } .featured-collection__carousel { display: flex; } @media only screen and (max-width: 959px) { .featured-collection__carousel { flex-direction: column; } } .featured-collection__carousel .grid-product__actions { top: var(--productGridMargin); right: 0; } .featured-collection__carousel .featured-collection__block-wrapper { display: flex; flex-direction: column; flex: 0 0 25%; padding-right: 20px; } @media only screen and (max-width: 959px) { .featured-collection__carousel .featured-collection__block-wrapper { padding-right: var(--pageWidthPadding); } } .featured-collection__block-wrapper-content-position--top { justify-content: flex-start; } .featured-collection__block-wrapper-content-position--center { justify-content: center; } .featured-collection__block-wrapper-content-position--bottom { justify-content: flex-end; } .featured-collection__block { padding-bottom: 20px; } .featured-collection__block:last-child { padding-bottom: 0; } @media only screen and (max-width: 959px) { .featured-collection__block:last-child { padding-bottom: 20px; } } .featured-collection__carousel-grid-items { display: flex; flex-wrap: nowrap; overflow-x: auto; width: 100%; } .featured-collection__carousel .grid-item { flex: 1 0 40%; margin-bottom: 0; } @media only screen and (max-width: 959px) { .featured-collection__carousel .grid-item { flex: 1 0 60%; } } @media only screen and (max-width: 959px) { .svg-mask--disabled-mobile .image-element { -webkit-mask-image: none !important; mask-image: none !important; } } @media only screen and (max-width: 959px) { .medium-down--banner-image .image-wrap { padding-bottom: 35% !important; } .medium-down--banner-image .image-element { height: 100%; } } .page-width--no-right-padding.page-width { padding-right: 0; } .background-svg--wave { position: relative; padding-bottom: 100px !important; border-bottom: 0 !important; } @media only screen and (max-width: 768px) { .background-svg--wave { padding-bottom: 90px !important; } } .background-svg--wave:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 85px; background-repeat: no-repeat; background-size: cover; background-color: var(--colorBody); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1439 57' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 57L1439 57V-3.8147e-06C1400.62 -3.8147e-06 1313.56 90.4365 1126.12 20.9833C938.69 -48.4699 829.284 116.882 444.121 20.9833C220.961 -34.5797 28.1238 37.491 0 57Z' fill='currentColor'/%3E%3C/svg%3E%0A"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1439 57' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 57L1439 57V-3.8147e-06C1400.62 -3.8147e-06 1313.56 90.4365 1126.12 20.9833C938.69 -48.4699 829.284 116.882 444.121 20.9833C220.961 -34.5797 28.1238 37.491 0 57Z' fill='currentColor'/%3E%3C/svg%3E%0A"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: cover; mask-size: cover; } @media only screen and (max-width: 768px) { .background-svg--wave:after { -webkit-mask-size: 190%; mask-size: 190%; -webkit-mask-position: left bottom; mask-position: left bottom; } } .background-svg--wave-reverse { position: relative; padding-top: 100px !important; border-top: 0 !important; } @media only screen and (max-width: 768px) { .background-svg--wave-reverse { padding-top: 90px !important; } } .background-svg--wave-reverse:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 85px; background-repeat: no-repeat; background-size: cover; background-color: var(--colorBody); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1439 57' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 57L1439 57V-3.8147e-06C1400.62 -3.8147e-06 1313.56 90.4365 1126.12 20.9833C938.69 -48.4699 829.284 116.882 444.121 20.9833C220.961 -34.5797 28.1238 37.491 0 57Z' fill='currentColor'/%3E%3C/svg%3E%0A"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1439 57' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 57L1439 57V-3.8147e-06C1400.62 -3.8147e-06 1313.56 90.4365 1126.12 20.9833C938.69 -48.4699 829.284 116.882 444.121 20.9833C220.961 -34.5797 28.1238 37.491 0 57Z' fill='currentColor'/%3E%3C/svg%3E%0A"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: cover; mask-size: cover; transform: rotate(180deg); } @media only screen and (max-width: 768px) { .background-svg--wave-reverse:after { -webkit-mask-size: 190%; mask-size: 190%; -webkit-mask-position: left bottom; mask-position: left bottom; } } .site-footer { display: block; font-size: calc(var(--typeBaseSize) - 1px); background-color: var(--colorFooter); color: var(--colorFooterText); } .site-footer a { color: var(--colorFooterText); } .site-footer .faux-select { font-size: calc(var(--typeBaseSize) - 1px); min-width: -webkit-max-content; min-width: max-content; } .footer__section { padding: 30px 0; border-top: 1px solid; border-top-color: var(--colorBorder); } .site-footer .footer__section { border-top-color: var(--colorFooterBorder); } @media only screen and (min-width: 769px) { .footer__section--menus { padding-top: 50px; } } /* Mimic a standalone section on mobile */ @media only screen and (max-width: 768px) { .footer__mobile-section { margin-left: calc(var(--pageWidthPadding) * -1); margin-right: calc(var(--pageWidthPadding) * -1); padding: 20px var(--pageWidthPadding) 0; } } .footer__title { margin-bottom: 15px; } .footer__subscribe { font-weight: var(--typeHeaderWeight); font-size: calc(var(--typeBaseSize) + 2px); } .footer__menu { margin: 0 0 20px; padding: 0; list-style: none; } @media only screen and (max-width: 768px) { .footer__menu { margin-bottom: 0; } } .footer__menu li { margin: 0; } .footer__menu a { display: inline-block; padding: 4px 0; } .footer__menu .icon { margin-right: 10px; } [dir="rtl"] .footer__menu .icon { margin-right: 0; margin-left: 10px; } .footer__menu--underline a { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } .footer__newsletter { display: flex; justify-content: center; align-items: center; padding: 0 20px; } .footer__newsletter > * { padding: 0 20px; } .footer__newsletter .newsletter__input-group { margin-bottom: 0; } @media only screen and (max-width: 768px) { .footer__newsletter { flex-wrap: wrap; text-align: center; justify-content: center; } .footer__newsletter > * { padding: 0; } .footer__newsletter .newsletter__input-group { max-width: none; } .footer__newsletter .newsletter__input-group .btn { min-width: auto; } .footer__newsletter form { width: 100%; margin: 20px auto 0; } } .footer__blocks { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .footer__block { flex: 0 1 25%; max-width: 210px; } @media only screen and (max-width: 768px) { .footer__blocks--mobile { display: inline; flex-wrap: wrap; justify-content: center; } .footer__block, .footer__block--mobile { max-width: none; flex: 1 1 50%; } .footer__block[data-type="payment"], .footer__block[data-type="contact"] { flex: 1 0 100%; } :scope .multi-selectors--footer .multi-selectors__item { margin: 0; } } .footer__social { margin: 0; } form + .footer__social { margin-top: var(--gutter); } .footer__social li { display: inline-block; margin: 0 15px 15px 0; } .footer__social a { display: block; } .footer__social .icon { width: 21px; height: 21px; } .footer__social .icon.icon--wide { width: 40px; } .payment-icons { -webkit-user-select: none; user-select: none; cursor: default; margin-bottom: 20px; } @media only screen and (max-width: 768px) { .payment-icons { margin-bottom: 0; } } .payment-icons li { cursor: default; margin: 0 8px 4px 0; } /* Footer of the footer */ .footer__base-links { font-size: 13px; } .footer__base-links a, .footer__base-links span { display: inline-block; padding: 2px 20px 2px 0; } .footer__base-links a { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } @media only screen and (max-width: 768px) { .footer-promotions .grid__item { margin-bottom: 32px; } .footer-promotions .grid__item:last-child { margin-bottom: 0; } } .footer-promotion { width: 100%; text-align: center; padding: 22px; border-radius: var(--roundness); overflow: hidden; } @media only screen and (min-width: 769px) { .footer-promotion { padding: 30px; } } .footer-promotion .scheme-image { border-radius: calc(var(--roundness) + 2px); } .footer-promotion[class*="color-scheme-"]:not(.color-scheme-none) .btn { border: 0; } .footer__grid-image { display: block; text-align: center; margin-bottom: 17px; } @media only screen and (min-width: 769px) { .footer__grid-image { margin-bottom: 20px; } } .footer__grid-image img { display: block; } .giftcard-header { padding: calc(var(--gutter) * 2) 0; font-size: 1em; text-align: center; } .giftcard-header a { display: block; margin: 0 auto; color: var(--colorTextBody); } .header-layout { display: flex; align-items: center; } [data-layout="center"] { align-items: center; } .header-item { display: flex; align-items: center; flex: 1 1 auto; } .header-item--compress-nav { visibility: hidden; flex: 0 0 auto; width: 0; opacity: 0; transition: all 0.3s cubic-bezier(0.18, 0.77, 0.58, 1); overflow: hidden; } .header-wrapper--compressed .header-item--compress-nav { visibility: visible; opacity: 1; width: 50px; transform: translateX(calc(var(--siteNavIconPadding) * -1)); } .header-item--logo { flex: 0 0 auto; word-break: break-all; } .header-item--search { flex: 1 1 100%; max-width: 475px; } [data-layout="center"] .header-item--search { max-width: none; } [data-layout="center"] .header-item--search form { max-width: 320px; } .header-item--search .site-nav__compress-menu { opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.18, 0.77, 0.58, 1); width: 50px; } .header-wrapper--compressed .header-item--search .site-nav__compress-menu { visibility: visible; opacity: 1; transform: translateX(calc(var(--siteNavIconPadding) * -1)); } [dir="rtl"] .header-wrapper--compressed .header-item--search .site-nav__compress-menu { transform: translateX(0); } /*Animate hamburger icon when nav open*/ .mobile-nav-trigger path, .site-nav__compress-menu path { transition: all 0.3s cubic-bezier(0.18, 0.77, 0.58, 1); } .mobile-nav-trigger.is-active path:nth-child(1), .site-nav__compress-menu.is-active path:nth-child(1) { transform: rotate(45deg); transform-origin: 20% 30%; } .mobile-nav-trigger.is-active path:nth-child(2), .site-nav__compress-menu.is-active path:nth-child(2) { opacity: 0; } .mobile-nav-trigger.is-active path:nth-child(3), .site-nav__compress-menu.is-active path:nth-child(3) { transform: rotate(-45deg); transform-origin: 15% 66%; } .header-item--icons { justify-content: flex-end; flex: 1 1 auto; } /*Same default logo and icon container size, logo block width overrides*/ [data-layout="left-center"] .header-item--logo, [data-layout="left-center"] .header-item--icons { flex: 0 0 200px; max-width: 50%; } @media only screen and (min-width: 769px) { [data-layout="left-center"] .header-item--logo, [data-layout="left-center"] .header-item--icons { min-width: 33%; } } @media only screen and (min-width: 769px) { .header-layout[data-logo-align="center"] .header-item--logo { margin: 0 30px; } } .header-layout[data-logo-align="center"] .header-item--navigation, .header-layout[data-logo-align="center"] .header-item--icons, .header-layout[data-logo-align="center"] .header-item--search { flex: 1 1 33%; } @media only screen and (min-width: 769px) { .header-layout[data-logo-align="left"] .site-header__logo { margin-right: 30px; } } /*Icon alignment*/ .header-item--left .site-nav { margin-left: calc(var(--siteNavIconPadding) * -1); } @media only screen and (max-width: 768px) { .header-item--left .site-nav { margin-left: calc(var(--siteNavItemPadding) / -2); } } .header-item--icons .site-nav { /* margin-right: calc(var(--siteNavIconPadding) * -1); */ } @media only screen and (max-width: 768px) { .header-item--icons .site-nav { margin-right: calc(var(--siteNavItemPadding) / -2); } } /*Hide search icon in mobile nav when not in compressed mode*/ @media only screen and (max-width: 992px) { .header-wrapper:not(.header-wrapper--compressed) [data-nav="below"] .js-search-header { display: none; } } .toolbar-section { position: relative; z-index: var(--z-index-toolbar); } .header-section { position: sticky; top: 0; z-index: var(--z-index-header); padding-bottom: var(--header-padding-bottom); pointer-events: none; } .header-section--overlay { padding-bottom: 0; } [data-section-type="header"] { pointer-events: auto; } .site-header { position: relative; } .site-header--password { color: var(--colorNavText); } .site-header--password a, .site-header--password a:hover { color: var(--colorNavText); } .is-light .site-header--password { color: var(--colorStickyNavLinks); } .is-light .site-header--password a, .is-light .site-header--password a:hover { color: var(--colorStickyNavLinks); } .site-header__element { position: relative; background-color: var(--colorNav); z-index: var(--z-index-header); } .is-light .site-header__element { background: transparent; box-shadow: none; } .site-header__element--top { padding: 5px 0; transition: background-color 0.2s ease; } @media only screen and (max-width: 768px) { .site-header__element--top { padding: 0; } } .site-header__element--sub { padding: 0; z-index: var(--z-index-header-bottom-row); transition: transform 0.2s cubic-bezier(0.18, 0.77, 0.58, 1), background-color 0.2s cubic-bezier(0.18, 0.77, 0.58, 1); } .header-wrapper--compressed .site-header__element--sub { transform: translateY(-100%); display: none; } .header-wrapper--compressed .site-header__element--sub.is-active { display: block; transform: translateY(0); } .header-wrapper--init .site-header__element--sub { position: absolute; left: 0; right: 0; } .site-header__element--sub[data-type="search"] .page-width { padding-bottom: 20px; } /*Disable sticky header on short and wide screens*/ @media screen and (min-width: 700px) and (max-height: 550px) { .header-section { position: static; } } .site-header__logo { position: relative; margin: calc(var(--gutter) / 3) 0; display: block; font-size: 24px; /*when no image*/ z-index: calc(var(--z-index-header) + 1); } @media only screen and (min-width: 769px) { .text-center .site-header__logo { padding-right: 0; margin: calc(var(--gutter) / 3) auto; } } .header-layout[data-logo-align="center"] .site-header__logo { margin-left: auto; margin-right: auto; text-align: center; } @media only screen and (max-width: 768px) { .header-layout[data-logo-align="center"] .site-header__logo { text-align: left; margin-left: 0; margin-right: 0; } } .site-header__logo a { max-width: 100%; } .site-header__logo a, .site-header__logo a:hover { -webkit-text-decoration: none; text-decoration: none; } .site-header__logo img { display: block; object-fit: cover; } .header-layout[data-logo-align="center"] .site-header__logo img { margin-left: auto; margin-right: auto; } .site-header__logo-link { display: flex; align-items: center; color: var(--colorNavText); word-break: break-word; } .site-header__logo-link:hover { color: var(--colorNavText); } @media only screen and (max-width: 768px) { .site-header__logo-link { margin: 0 auto; } } .header-wrapper--overlay { position: absolute; top: 0; left: 0; right: 0; background: none; } .header-wrapper--overlay.is-light:after { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: -50px; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 50%, transparent ); pointer-events: none; } .is-light .site-header__logo .logo--has-inverted { opacity: 0; visibility: hidden; overflow: hidden; height: 0; } .site-header__logo .logo--inverted { opacity: 0; visibility: hidden; overflow: hidden; height: 0; } .is-light .site-header__logo .logo--inverted { opacity: 1; visibility: visible; height: auto; } @media only screen and (min-width: 769px) { .site-header__logo { text-align: left; } } .site-header__logo a { color: var(--colorNavText); } .is-light .site-header__logo a { color: var(--colorStickyNavLinks); } .is-light .site-header__logo a:hover { color: var(--colorStickyNavLinks); } /* Cart drawer and mobile navigation are built with same bones */ .site-header__drawers { height: 0; overflow: visible; } @media only screen and (max-width: 768px) { .site-header__drawers { padding: 0; } } .site-header__drawers-container { position: relative; } .site-header__drawer { display: none; position: absolute; top: 1px; padding: 20px; width: 100%; max-height: 75vh; max-height: var(--maxDrawerHeight); overflow-y: auto; background-color: var(--colorBody); color: var(--colorTextBody); box-shadow: var(--drawerBoxShadow); z-index: var(--z-index-header-drawers); transition: all var(--slideCurve); transform: translateY(-100%); } @media only screen and (max-width: 768px) { .site-header__drawer { top: 0; z-index: var(--z-index-header-drawers-mobile); } } .site-header__drawer.is-active { display: block; transform: translateY(0); } .header-wrapper--compressed .site-header__drawer { top: 0; } .site-header__drawer-animate { transform: translateY(-20px); opacity: 0; } .is-active .site-header__drawer-animate { opacity: 1; transform: translateY(0px); transition: opacity 0.3s ease 0.15s, transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) 0.15s; } .cart__item-sub { flex: 1 1 100%; display: flex; justify-content: space-between; align-items: center; } .cart__item-row { margin-bottom: 20px; } .cart__item-row:last-child { margin-bottom: 0; } .cart__item-row.cart-recommendations { margin-bottom: 20px; } .cart__item-row--footer { padding: 0 60px; } .cart__checkout, .cart__continue { width: 100%; } /* Cart drawer popover */ .site-header__cart { right: 0; } @media only screen and (min-width: 769px) { .site-header__cart { max-width: 450px; } } .cart__checkout-wrapper .additional-checkout-buttons, .cart__checkout-wrapper .cart__continue { margin-top: 12px; } .site-header__cart .additional-checkout-buttons { margin: 10px 0; } .site-header__cart .additional-checkout-buttons [data-shopify-buttoncontainer] { justify-content: center; } .site-header__cart .additional-checkout-buttons [data-shopify-buttoncontainer] > * { height: auto !important; } /*Match additional cart button styles to theme*/ .additional-checkout-buttons div[role="button"] { border-radius: var(--buttonRadius) !important; } .cart__discount { color: var(--colorTextSavings); } .cart__item--subtotal { font-weight: var(--typeHeaderWeight); font-size: calc(var(--typeBaseSize) + 2px); } .cart__terms { display: flex; align-items: center; justify-content: center; } .cart__terms label { margin-bottom: 0; } .note-icon svg { position: relative; top: -1px; width: 16px; height: 16px; margin-left: 5px; } .add-note { margin-bottom: 20px; } .add-note.is-active .note-icon--open { display: none; } .note-icon--close { display: none; } .add-note.is-active .note-icon--close { display: inline; } /*PayPal button has unhelpful z-index*/ iframe.zoid-component-frame { z-index: 1 !important; } /*Override header drawer general styles for cart drawer*/ .site-header__cart { padding: 0; overflow: hidden; } .cart__note { margin-bottom: 20px; } header-section { display: block; } [dir="rtl"] :scope .site-header__logo { margin-left: 20px; } .site-header__drawer-animate.is-empty form { display: none; } .site-header__search-container { display: none; align-items: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: var(--colorNav); color: var(--colorNavText); z-index: var(--z-index-header-search); } .site-header__search-container.is-active { display: flex; } .site-header__search-container .page-width { display: flex; width: 100%; position: relative; } .site-header__search { display: flex; width: 100%; } .site-header__search .icon { width: 26px; height: 26px; } .site-header__search > is-land { width: 100%; } [data-logo-align="center"] .header-item--search predictive-search:not(.is-active) { transform: translateX(-50px); transition: transform 0.2s ease; } .header-wrapper--compressed [data-logo-align="center"] .header-item--search predictive-search:not(.is-active) { transform: translateX(0px); } /*Submit and cancel buttons*/ .site-header__search-btn { padding: 0 8px; } .site-header__search-btn--cancel { display: none; position: absolute; top: 0; bottom: 0; right: -50px; color: var(--colorNavText); } .site-header__search-btn--cancel:hover { color: var(--colorNavText); } .site-header__search-container .site-header__search-btn--cancel { padding-right: 5px; } .site-header__mobile-nav { left: 0; right: 0; overflow-x: hidden; } /*Height changes based on active subnav*/ .slide-nav__wrapper { --zIndexOverlay: 1; position: relative; overflow: hidden; display: block; } .slide-nav__wrapper:after { background-color: rgba(0, 0, 0, 0.027); pointer-events: none; border-radius: var(--roundness); } /*Element slides left/right to reveal current nav level*/ .slide-nav { margin: 0; list-style: none; transition: transform var(--slideCurve); } [data-level="2"] .slide-nav { transform: translateX(-100%); } [data-level="3"] .slide-nav { transform: translateX(-200%); } /*button element cannot be flex, so make invisible and style child*/ .slide-nav__button { display: block; background: none; border: 0; padding: 0; width: 100%; text-align: left; } [dir="rtl"] .slide-nav__button { text-align: right; } .slide-nav__link { position: relative; display: flex; width: 100%; padding: 10px 20px; align-items: center; justify-content: space-between; font-size: calc(var(--typeBaseSize) + 2px); } .slide-nav__link > span { display: block; flex: 1 1 auto; } .slide-nav__link .icon { width: 11px; height: 11px; margin-left: 10px; } /*Collection link image*/ .slide-nav__image { position: absolute; width: 40px; height: 40px; left: 15px; top: 50%; margin-top: -20px; } .slide-nav__image img { object-fit: cover; width: 100%; height: 100%; } /* .slide-nav__image + span { padding-left: 45px; } */ /*Slightly different style, icon on left*/ .slide-nav__link--back { font-weight: var(--typeHeaderWeight); justify-content: flex-start; } .slide-nav__link--back > span { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } .slide-nav__link--back .icon { margin-right: 15px; margin-left: 0; } /*list item*/ .slide-nav__item { display: block; width: 100%; margin: 0; } .slide-nav__item:first-child { padding-top: 10px; } .slide-nav__item:last-child { padding-bottom: 10px; } .slide-nav__dropdown { display: none; visibility: hidden; position: absolute; width: 100%; top: 0; right: -100%; margin: 0; opacity: 0; transition: all var(--slideCurve); } .slide-nav__dropdown.is-active { display: block; visibility: visible; opacity: 1; transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s forwards; } /*Adjustments to footer menus when inside mobile nav*/ .site-header__mobile-nav .footer__section--menus { margin-top: 20px; margin-left: calc(var(--pageWidthPadding) * -1); margin-right: calc(var(--pageWidthPadding) * -1); } .text-highlight em { font-style: normal; } .text-highlight.h0 a, .text-highlight.h1 a, .text-highlight.h2 a, .text-highlight.h3 a, .text-highlight.h4 a, .text-highlight.h5 a, .text-highlight.h6 a { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } .text-highlight--outline em { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: inherit; -webkit-text-fill-color: var(--colorBody); } .color-scheme-1 .text-highlight--outline em { -webkit-text-fill-color: var(--colorScheme1Bg); } .color-scheme-2 .text-highlight--outline em { -webkit-text-fill-color: var(--colorScheme2Bg); } .color-scheme-3 .text-highlight--outline em { -webkit-text-fill-color: var(--colorScheme3Bg); } .text-highlight--regular em { font-style: italic; } .text-highlight--serif em { font-family: serif; font-style: italic; } .text-highlight--handwrite em { font-family: cursive; font-style: italic; } .text-highlight--accent-color em { color: var(--colorSaleTag); } .hero__media-container { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .hero__media { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .hero__media { z-index: var(--z-index-hero-image); } .hero__media iframe, .hero__media video { width: 100%; height: 100%; pointer-events: none; } .video-interactable .hero__media iframe, .video-interactable .hero__media video { pointer-events: auto; } .video-parent-section.loading .hero__media iframe, .video-parent-section.loading .hero__media video { opacity: 0.01; /*sneaky way to avoid talking to an invisible YT iframe*/ } .video-parent-section.loaded .hero__media iframe, .video-parent-section.loaded .hero__media video { opacity: 1; animation: zoom-fade 1s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards; transition: none; /*fixes safari animation conflict*/ } /*MP4 sizing*/ .hero__media video { position: relative; object-fit: cover; font-family: "object-fit: cover"; } /*YouTube iframes need more specific sizing*/ .hero__media iframe { position: absolute; top: 0; left: 0; width: 300%; left: -100%; max-width: none; /*This min-width may need to change slightly depending on embedded video dimensions. Can do on a per-shop basis*/ } @media screen and (min-width: 1140px) { .hero__media iframe { width: 100%; height: 300%; left: auto; top: -100%; } } @media only screen and (max-width: 768px) { .hotspots-section .index-section { margin-bottom: 10px; } } .hotspots-section .hotspots-wrapper { display: flex; flex-wrap: wrap; } .hotspots-section .hotspots-wrapper.is-reverse { flex-direction: row-reverse; } .hotspots__title { width: 100%; padding-top: 1.5rem; } .hotspots { position: relative; width: 70%; } @media only screen and (max-width: 768px) { .hotspots { width: 100%; } } .hotspots .grid__image-ratio img { opacity: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } [data-animate_images="true"] .hotspots .grid__image-ratio img { opacity: 1; } .hotspots__buttons { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; background-color: transparent; } .hotspot__button { padding: 10px; border-radius: 50%; position: absolute; line-height: 0; transform: translate(-50%, -50%); } @media only screen and (max-width: 768px) { .hotspot__button { padding: 6px; } } .hotspot__button:hover .hotspot__button-content { opacity: 1; visibility: visible; pointer-events: auto; } .hotspot__button-content { color: var(--colorTextBody); background-color: var(--colorBody); opacity: 0; visibility: hidden; pointer-events: none; padding: 1rem; position: absolute; top: calc(100% + 1rem); left: 50%; transform: translateX(-50%); transition: opacity 0.3s ease-in-out; min-width: 5rem; border-radius: 5px; box-shadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.2); } .hotspot__button-content p, .hotspot__button-content span { white-space: nowrap; margin-bottom: 0; } .hotspot__button-content:before { position: absolute; top: -10px; left: 50%; content: ""; width: 0; height: 0; border-style: solid; border-width: 0 5px 10px 5px; transform: translateX(-50%); border-color: transparent transparent var(--colorBody) transparent; } .hotspot__button-content .content__prices { display: flex; flex-wrap: nowrap; } .hotspots__content { width: 30%; padding: 24px; display: flex; align-items: center; } .page-width .hotspots__content { padding-right: 0; padding-left: 40px; } @media only screen and (max-width: 768px) { .page-width .hotspots__content { padding-left: 0; } } .page-width.is-reverse .hotspots__content { padding-left: 0; padding-right: 40px; } @media only screen and (max-width: 768px) { .page-width.is-reverse .hotspots__content { padding-right: 20px; } } @media only screen and (max-width: 768px) { .hotspots__content { width: 100%; padding: 1rem 20px 0; } } .hotspot-content__block { display: none; max-height: 0; width: 100%; animation: fade-in 0.5s ease 0s forwards; position: sticky; top: 0; /* animation and position:sticky causes issues in themes where quickshop modal is nested */ } .modal-open .hotspot-content__block, .modal-closing .hotspot-content__block { animation: none; position: static; } @media only screen and (max-width: 768px) { .hotspot-content__block { align-items: center; position: relative; padding-top: 0; } } .hotspot-content__block.is-active { display: block; max-height: initial; } .hotspot-content__block .grid-product__image-wrap { margin: 0; } .hotspot-content__block .grid__item { display: block; float: none; padding: 0; } .hotspot-content__block .grid-product__tags { margin-left: 0; } @media only screen and (max-width: 768px) { .hotspot-content__block .grid-product__tag { right: auto; left: 0; } } .hotspot-content__block .grid-item__meta, .hotspot-content__block .grid-product__meta { padding-top: 10px; } @media only screen and (max-width: 768px) { .hotspot-content__block .grid-item__meta, .hotspot-content__block .grid-product__meta { display: flex; justify-content: center; flex-direction: column; flex-wrap: wrap; padding-left: 10px; padding-top: 0; text-align: left; } .hotspot-content__block .grid-item__meta .grid-item__meta-main, .hotspot-content__block .grid-product__meta .grid-item__meta-main, .hotspot-content__block .grid-item__meta .grid-item__meta-secondary, .hotspot-content__block .grid-product__meta .grid-item__meta-secondary { width: 100%; flex: none; } } @media only screen and (max-width: 768px) { .hotspot-content__block .grid-product { padding-right: 0; padding-left: 0; } .hotspot-content__block .quick-add-btn { display: none; } /* Class is unique to Impulse */ .hotspot-content__block .grid__item-image-wrapper { display: flex; } .hotspot-content__block .grid__item-image-wrapper .grid-product__image-mask { flex: 0 0 30%; } .hotspot-content__block .grid-item__link, .hotspot-content__block .grid-product__link { display: flex; flex-wrap: nowrap; } /* TODO: Adjust global stylings in grid.css so we don't have to add exceptions like this */ [data-grid-style="grey-round"] .hotspot-content__block .grid-item__link { border-radius: 10px 0 0 10px; } [data-grid-style="white-round"] .hotspot-content__block .grid-item__link { border-radius: 10px 0 0 10px; } .hotspot-content__block .grid-product__image-mask, .hotspot-content__block .grid-product__image-wrap, .hotspot-content__block .product-slider { width: 30%; } .hotspot-content__block .grid-product__actions { right: initial; left: 10px; top: 10px; } } /** * This is the stylesheet entrypoint for the image-compare section. * This file and all its inclusions will be processed through esbuild */ .comparison { position: relative; display: block; width: 100%; background: #222; overflow: hidden; } .comparison__draggable { position: absolute; top: 0; height: 100%; width: 50%; overflow: hidden; z-index: 2; } .comparison__image { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; -webkit-user-select: none; user-select: none; opacity: 1; animation: none; } .comparison__image-wrapper { width: 100%; height: 100%; } .comparison__button { width: 64px; height: 64px; position: absolute; border-radius: 50%; left: 50%; top: 50%; transform: translate(-32px, -50%); cursor: pointer; z-index: 3; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; border: 3px solid #fff; padding: 0; } .comparison--style-minimal .comparison__button { border: 0; background: transparent; width: auto; transform: translate(-56px, -50%); } .comparison--style-minimal .comparison__button svg { margin: 0 20px; } @supports (-webkit-touch-callout: none) { .comparison--style-minimal .comparison__button svg { position: absolute; } .comparison--style-minimal .comparison__button svg.icon-chevron-left { left: 2px; width: 9px; } .comparison--style-minimal .comparison__button svg.icon-chevron-right { right: 2px; width: 9px; } } @media only screen and (max-width: 768px) { .comparison--style-classic .comparison__button { width: 48px; height: 48px; transform: translate(-24px, -50%); } } .comparison__button svg { width: 12px; height: auto; pointer-events: none; margin: 0 5px; } .comparison__button::before { content: ""; width: 2px; position: absolute; background-color: #fff !important; } .comparison__button::after { content: ""; width: 2px; height: 50%; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); background-color: #fff !important; } .logo-bar { text-align: center; } .logo-bar .product-grid:not([data-view="6-2"]) .grid-item { flex-basis: auto; } .logo-bar--layout-slider .new-grid { flex-wrap: nowrap; overflow-x: scroll; scroll-snap-type: x mandatory; scrollbar-width: none; } .logo-bar--layout-slider .new-grid::-webkit-scrollbar { width: 0px; background: transparent; } .logo-bar--layout-slider .grid-item { scroll-snap-align: start; } .logo-bar__item { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 25px 30px; /*required to prevent double grid border styles*/ background-color: var(--colorBody); } [data-grid-style*="white"] .logo-bar__item { background-color: #fff; } [data-grid-style="white-round"] .logo-bar__item { border-radius: var(--productRadius); } .logo-bar__item-svg { padding: 25px 30px; } .logo-bar__image { display: block; margin: 0 auto; object-fit: cover; height: auto; width: auto; } .logo-bar__link { display: block; } .cart__discounts { margin-top: -10px; margin-bottom: 10px; } /* Cart page layout */ @media only screen and (min-width: 769px) { .cart__page { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; max-width: 1200px; margin: 0 auto; } .cart__page-col:first-child { flex: 1 1 65%; padding-right: 100px; } .cart__page-col:last-child { --zIndexOverlay: -1; flex: 0 1 35%; align-self: flex-start; position: sticky; top: 130px; padding: 30px; padding-top: 30px !important; } .cart__page-col:last-child:after { background-color: var(--colorTextBody); opacity: 0.03; } .cart__page-col:last-child input, .cart__page-col:last-child textarea { background-color: var(--colorBody); } } @media only screen and (min-width: 769px) { .medium-up--overlay::after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--zIndexOverlay, auto); } } section-main-content { display: block; } @media only screen and (min-width: 769px) { section-main-content { padding-top: 60px; } } .rte--collection-desc { padding: 45px 0; margin-bottom: 0; } section-main-search { display: block; } .main-search__content { padding-top: 5px; } @media only screen and (min-width: 769px) { .main-search__content { padding-top: 60px; } } .search-bar { max-width: 100%; } .search-bar--page { max-width: 300px; margin-top: calc(var(--gutter) / -2); } .search-bar .icon { width: 24px; height: 24px; vertical-align: middle; } .map-section { display: block; position: relative; height: 650px; width: 100%; overflow: hidden; } @media only screen and (min-width: 769px) { .map-section { height: 500px; } } .map-section .page-width { height: 100%; } .map-section--load-error { height: auto; } .map-onboarding { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; z-index: 0; } .map-section__overlay-wrapper { position: relative; height: 100%; } .map-section__overlay { position: relative; display: inline-block; margin: var(--gutter); width: 100%; z-index: 3; } @media only screen and (min-width: 769px) { .map-section__overlay { position: absolute; left: var(--pageWidthPadding); top: 50%; transform: translateY(-50%); margin-top: 0; margin-left: 0; width: 80%; max-width: 400px; } } @media only screen and (max-width: 768px) { .map-section__overlay .animation-contents { opacity: 1; } } .map-section--load-error .map-section__overlay { position: static; transform: translateY(0); } .map-section__overlay-inner { padding: var(--gutter); max-width: calc(100% - var(--gutter) * 2); background-color: var(--colorBody); border-radius: var(--roundness); overflow: hidden; } .map-section__link { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } /*Optically center map in visible area with extended height/widths and negative margins*/ .map-section__container { position: absolute !important; /*api will inline relative sometimes*/ top: 0; left: 0; width: 100%; height: 150%; margin-bottom: -50%; } @media only screen and (min-width: 769px) { .map-section__container { width: 130%; height: 100%; margin: 0 -30% 0 0; } } .display-map--false.bg-image--true .map-section__container { width: 100%; height: 100%; } .display-map--false.bg-image--true .map-section__container img { object-fit: cover; width: 100%; height: 100%; } /* * This is the stylesheet entrypoint for the more-products-collection section. * This file and all its inclusions will be processed through postcss */ .newsletter-section .errors { margin-left: auto; margin-right: auto; max-width: 520px; } .newsletter-container { margin: 0 auto !important; padding: 0 !important; } .newsletter-section { display: flex; gap: 40px; align-items: center; padding: 60px 0; } @media only screen and (max-width: 768px) { .newsletter-section { flex-direction: column; padding: 30px 0; } } .newsletter-section--image-left { flex-direction: row-reverse; } @media only screen and (max-width: 768px) { .newsletter-section--image-left { flex-direction: column-reverse; } } .newsletter-section__content { padding-left: 20px; margin: 0 auto; } .newsletter-section--no-image .newsletter-section__content { flex: 100%; } .klform form.needsclick.klaviyo-form.klaviyo-form-version-cid_1.go3725832945.kl-private-reset-css-Xuajs1 { padding: 0 !important; } .klvyo_newsl h4 { font-size: 26px; margin: 0; font-family: "Merriweather", serif; font-weight: 700; color: #000; line-height: 1.2; } .klvyo_newsl p { font-size: 14px; color: #000; font-weight: 500; } .klvyo_newsl .klHeading { text-align: left; } .newsletter-section__content form { display: flex; width: 100%; } .text-left .newsletter-section__content form { justify-content: flex-start; } .text-center .newsletter-section__content form { justify-content: center; } .text-right .newsletter-section__content form { justify-content: flex-end; } .newsletter-section__content .newsletter__input-group { margin: 0; } .newsletter-section__image { width: 100%; } .newsletter-section__image img { opacity: 1; animation: none; display: block; margin: 0 auto; object-fit: cover; height: auto; } .newsletter-section__image--33 { flex: 33.333% 0 0; } .newsletter-section__image--50 { flex: 50% 0 0; } @media only screen and (max-width: 768px) { .newsletter-section__image--50 { max-width: 100%; } } .newsletter-section__image--66 { flex: 66.666% 0 0; } @media only screen and (max-width: 768px) { .newsletter-section__image--66 { max-width: 100%; } } /* * This is the stylesheet entrypoint for the more-products-collection section. * This file and all its inclusions will be processed through postcss */ .pagination { margin: calc(var(--gutter) * 2) 0; text-align: center; } .pagination > span { display: inline-block; vertical-align: middle; line-height: 1; } .pagination a { display: inline-block; } .pagination a:not(.btn), .pagination .page.current { padding: 8px 12px; } .pagination .page.current { opacity: 0.3; } .pagination .btn { transition: transform 0.15s ease-out; } .pagination .btn:hover { transform: scale(1.08); } .pagination .btn .icon { width: 13px; height: 13px; } .newsletter-button { margin-top: 30px; } .password-page__logo h1 { margin-bottom: 0; } .password__lock .icon { position: relative; top: -2px; margin-right: 4px; } #LoginModal .modal__inner { background: var(--colorBody); color: var(--colorTextBody); padding: 50px 50px 10px; } .password-page__toolbar { z-index: var(--z-index-toolbar); } /* * This is the stylesheet entrypoint for the product-recommendations section. * This file and all its inclusions will be processed through esbuild */ :root { --z-index-promo-tint: 2; --z-index-promo-color-overlay: 3; --z-index-promo-text: 3; --z-index-promo-content: 4; --z-index-promo-link: 5; } .promo-grid--space-top { padding-top: var(--indexSectionPadding); } .promo-grid--space-bottom { padding-bottom: var(--indexSectionPadding); } @media only screen and (max-width: 768px) { .promo-grid--hidden-block-images .flex-grid__item.type-image { display: none; } } .promo-grid__container { display: flex; align-items: flex-start; position: relative; overflow: hidden; background-repeat: no-repeat; border-radius: var(--roundness); overflow: hidden; } .promo-grid__container.horizontal-center { justify-content: center; text-align: center; } .promo-grid__container.horizontal-center .btn { margin: 2px 5px; } .promo-grid__container.horizontal-left .btn { margin-right: 10px; } .promo-grid__container.horizontal-right { justify-content: flex-end; text-align: right; } .promo-grid__container.horizontal-right .btn { margin-left: 10px; } .promo-grid__container .scheme-image { border-radius: calc(var(--roundness) + 2px); } .promo-grid__slide-link { display: block; position: absolute; width: 100%; height: 100%; z-index: var(--z-index-promo-link); } .promo-grid__slide-link:hover ~ .promo-grid__content .btn:not(.btn--secondary):not(.btn--inverse) { background: var(--colorBtnPrimaryLight); transition-delay: 0.25s; } .promo-grid__content { flex: 0 1 auto; padding: 2em 2.5em; /*Relative to text-size*/ position: relative; min-width: 200px; z-index: var(--z-index-promo-content); } .promo-grid__content p:last-child { margin-bottom: 0; } .vertical-top .promo-grid__content { align-self: flex-start; } .vertical-center .promo-grid__content { align-self: center; } .vertical-bottom .promo-grid__content { align-self: flex-end; } .video-interactable .promo-grid__content { pointer-events: none; } /*Radial gradient on only some types*/ .type-advanced .promo-grid__content:not(.promo-grid__content--sale) a, .type-simple .promo-grid__content:not(.promo-grid__content--sale) a { color: #fff; border-bottom: 2px solid; border-bottom-color: #fff; } [data-button_style="square"] .type-advanced .promo-grid__content:not(.promo-grid__content--sale) a:not(.btn--inverse), [data-button_style="square"] .type-simple .promo-grid__content:not(.promo-grid__content--sale) a:not(.btn--inverse), [data-button_style^="round"] .type-advanced .promo-grid__content:not(.promo-grid__content--sale) a:not(.btn--inverse), [data-button_style^="round"] .type-simple .promo-grid__content:not(.promo-grid__content--sale) a:not(.btn--inverse) { border-bottom: 0; } .type-advanced .rte--strong, .type-product .rte--strong, .type-sale_collection .rte--strong { line-height: 1.1; } .type-advanced .rte--em, .type-product .rte--em, .type-sale_collection .rte--em { font: inherit; text-transform: lowercase; font-weight: bold; } .type-advanced .rte--strong, .type-product .rte--strong { font-size: 1.8em; line-height: 1.1; } @media only screen and (min-width: 769px) { .type-advanced .rte--strong, .type-product .rte--strong { font-size: 2.25em; } .type-product.flex-grid__item--50 .rte--strong, .type-product.flex-grid__item--33 .rte--strong { font-size: 1.6em; } } .promo-grid__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: left; } .promo-grid__bg .placeholder-svg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: none; width: auto; padding: 0; } .video-interactable .promo-grid__bg:before { pointer-events: none; } .promo-grid__bg-image { z-index: var(--z-index-hero-image); } .promo-grid__text { position: relative; } .promo-grid__text .btn { margin-top: 2px; margin-bottom: 2px; } /*Size adjustments when items 50% width*/ @media only screen and (min-width: 769px) { .promo-grid > .flex-grid > .flex-grid__item--50 .enlarge-text { font-size: calc(var(--typeBaseSize) + 2px); } .promo-grid > .flex-grid > .flex-grid__item--50 .btn { padding: 9px 16px; font-size: calc(var(--typeBaseSize) + 1px); } } /* ======================= Type: Advanced ===================== */ .type-advanced { --zIndexOverlay: -1; } .type-advanced .promo-grid__content { flex: 1 1 auto; padding: 7%; } .type-advanced .rte--block { color: #fff; text-shadow: 0 2px 3px rgb(0 0 0 / 20%); } .type-advanced .btn { margin-bottom: 10px; } @media only screen and (max-width: 768px) { .type-advanced .btn { margin-bottom: 7px; } } .type-advanced .promo-grid__content:after { background: radial-gradient(rgba(0, 0, 0, 0.3) 0%, transparent 60%); margin: -100px -200px -100px -200px; } .type-advanced .horizontal-center .rte--block { padding: 0 10%; } .type-advanced .horizontal-left .rte--block { padding: 0 20% 0 0; } .type-advanced .horizontal-right .rte--block { padding: 0 0 0 20%; } /* ======================= Type: Sale Collection ===================== */ .type-sale_collection { max-height: 600px; } .type-sale_collection .promo-grid__container { align-items: center; } .type-sale_collection .promo-grid__content { padding: 0; margin: 7%; flex: 0 1 auto; min-width: 0; } @media only screen and (max-width: 768px) { .type-sale_collection .promo-grid__content { font-size: 0.9em; } } @media only screen and (min-width: 769px) { .type-sale_collection .promo-grid__content:not(.promo-grid__content--small-text) { font-size: 1.5em; } } /*Custom typography styles*/ .type-sale_collection .rte--block { margin-bottom: 7.5px; } .type-sale_collection .rte--block:last-child { margin-bottom: 0; } .type-sale_collection .rte--strong { position: relative; display: block; font-size: 6.5em; line-height: 1; white-space: nowrap; text-align: left; } @media only screen and (max-width: 768px) { .type-sale_collection .rte--strong { font-size: 6em; } } .type-sale_collection .rte--strong sup { font-size: 0.5em; top: -0.3em; } .type-sale_collection .rte--em, .type-sale_collection .enlarge-text { text-align: left; padding-left: 8px; } @media only screen and (max-width: 768px) { .type-sale_collection .rte--em, .type-sale_collection .enlarge-text { padding-left: 4px; } } /*Custom type layout for "off" when following "%"*/ .type-sale_collection small { display: inline; font-size: 0.4em; margin-left: -1.7em; letter-spacing: 0; } .type-sale-images { flex: 1 1 50%; margin: 7% 7% 7% 3%; } .type-sale-images svg { display: block; } .type-sale-images__crop { overflow: hidden; width: 100%; } /* ======================= Type: Simple ===================== */ .type-simple { --zIndexOverlay: 1; } .type-simple .promo-grid__content { align-self: flex-end; padding: calc(var(--gutter) / 1); } @media only screen and (max-width: 768px) { .type-simple .promo-grid__content { padding: calc(var(--gutter) / 2); } } .type-simple .promo-grid__text { color: #fff; } .type-simple .promo-grid__bg:after { background: linear-gradient(15deg, rgba(0, 0, 0, 0.6), transparent 40%); } .promo-grid__title:last-child { margin-bottom: 0; } /* ======================= Type: Image ===================== */ .type-image .promo-grid__container { background: none; } .type-image img, .type-image a, .type-image .image-wrap { width: 100%; } /*================ Type: Banner ================*/ .type-banner p { margin: 7px; display: inline-block; vertical-align: middle; line-height: 1.2; } .type-banner__link { display: block; flex: 1 1 100%; } .type-banner__content { width: 100%; display: flex; align-items: center; justify-content: center; padding: 0 10px; } .type-banner__text { flex: 0 1 auto; padding: 12px; display: flex; align-items: center; } @media only screen and (max-width: 959px) { .type-banner__text { flex-wrap: wrap; justify-content: center; } } .type-banner h2 { margin: 10px; } @media only screen and (min-width: 769px) { .type-banner__text { padding: 10px; } } /*================ Type: Product ================*/ .type-product__wrapper { flex: 1 1 100%; align-self: center; position: relative; padding: 2em 0; z-index: var(--z-index-promo-content); } .promo-grid__product { display: flex; align-items: center; } @media only screen and (min-width: 769px) { .flex-grid__item--25 .promo-grid__product { flex-direction: column-reverse; } } .type-product__text { flex: 1 1 40%; } .promo-grid__product-images { position: relative; flex: 1 1 60%; } @media only screen and (max-width: 768px) { .promo-grid__product-images { padding-left: 1em; padding-right: 1em; } } @media only screen and (min-width: 769px) { .flex-grid__item--25 .promo-grid__product-images { width: 100%; margin: 0; } } .promo-grid__product-text, .promo-grid__product-images { margin: 6%; } .promo-grid__product-images { margin-left: 0; } .type-product__image { position: relative; } .type-product__image:first-child { width: 100%; } .type-product__image:nth-child(2) { position: absolute; bottom: 40px; right: 0; width: 100%; max-width: 40%; } @media only screen and (max-width: 768px) { .promo-grid__product { flex-wrap: wrap; } .promo-grid__product-text, .promo-grid__product-images { margin: 3%; } .promo-grid__product-text { order: 2; } } .type-product__labels { z-index: var(--z-index-promo-text); display: flex; justify-content: center; gap: 1em; margin-bottom: 2em; } @media only screen and (min-width: 769px) { .type-product__labels { justify-content: flex-start; } .type-product__labels .flex-grid__item--50, .type-product__labels .flex-grid__item--33 { font-size: 0.9em; } } .type-product__label { padding: 4px 12px; background-color: var(--colorBtnPrimary); color: var(--colorBtnPrimaryText); border-radius: var(--roundness); } .type-product__label--secondary { background-color: var(--colorBody); color: var(--colorTextBody); } .flex-grid { display: flex; flex-wrap: wrap; flex: 1 1 100%; } [data-center-text="true"] .flex-grid { justify-content: center; } .flex-grid--center { align-items: center; } .flex-grid--gutters { margin-top: calc(var(--gutter) / -2); margin-left: calc(var(--gutter) / -2); } .flex-grid__item { flex: 0 1 100%; display: flex; align-items: stretch; } .flex-grid--gutters .flex-grid__item { padding-top: calc(var(--gutter) / 2); padding-left: calc(var(--gutter) / 2); } .flex-grid__item > * { flex: 1 1 100%; } .flex-grid__item--stretch { flex: 1 1 100%; } /*Flex grid sizing from theme settings*/ @media only screen and (min-width: 769px) { .flex-grid__item--25 { flex-basis: 25%; } .flex-grid__item--33 { flex-basis: 33.33%; } .flex-grid__item--50 { flex-basis: 50%; } .flex-grid__item--66 { flex-basis: 66.66%; } .flex-grid__item--75 { flex-basis: 75%; } } .background-media-text__video { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; z-index: 0; } @media only screen and (max-width: 768px) { .background-media-text__video { width: 300%; left: -100%; } } .background-media-text__video iframe, .background-media-text__video video { position: absolute; top: 0; left: 0; height: 100%; width: 100%; pointer-events: none; } @media only screen and (min-width: 769px) { .background-media-text__video iframe, .background-media-text__video video { height: 120%; max-width: none; left: -100%; height: 150%; width: 300%; } } /*This min-width may need to change slightly depending on embedded video dimensions. Can do on a per-shop basis*/ @media screen and (min-width: 1140px) { .background-media-text__video iframe, .background-media-text__video video { width: 100%; height: 300%; left: auto; top: -100%; } } .video-interactable .background-media-text__video iframe, .video-interactable .background-media-text__video video { pointer-events: auto; } .loaded .background-media-text__video { animation: zoom-fade 1s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards; transition: none; } @media only screen and (min-width: 769px) { .background-media-text--450 .background-media-text__video { min-height: 450px; } .background-media-text--550 .background-media-text__video { min-height: 550px; } .background-media-text--650 .background-media-text__video { min-height: 650px; } .background-media-text--750 .background-media-text__video { min-height: 750px; } .background-media-text__video { opacity: 0; } } /* * This is the stylesheet entrypoint for the recently-viewed section. * This file and all its inclusions will be processed through postcss */ @media only screen and (min-width: 769px) { .rich-text-section .background-svg--wave .page-width { padding-bottom: 20px; } } .scrolling-text { overflow: hidden; } .scrolling-text__inner { visibility: visible; white-space: nowrap; display: inline-flex; margin: 0.15em 0; animation: scrolling-text var(--move-speed) linear infinite; animation-play-state: running; } .scrolling-text__inner--right { transform: translateX(-50%); animation: scrolling-text-right var(--move-speed) linear infinite; } .scrolling-text span { white-space: nowrap; } .scrolling-text:hover .scrolling-text__inner, .scrolling-text:focus .scrolling-text__inner { animation-play-state: paused; } @keyframes scrolling-text { 0% { transform: translateX(0); -webkit-transform: translateX(0); } 100% { transform: translateX(-100%); -webkit-transform: translateX(-100%); } } @keyframes scrolling-text-right { 0% { transform: translateX(-50%); -webkit-transform: translateX(-50%); } 100% { transform: translateX(0); -webkit-transform: translateX(0); } } .results { padding: 0 20px 20px; display: block; width: 100%; } .results ul { list-style: none; padding: 0; margin: 0; } .results li { transition: background 0.2s ease; padding: 10px; margin-bottom: 0; } .results li:hover { background: rgba(0, 0, 0, 0.05); } .results li a { display: flex; align-items: center; } .results--queries span { font-weight: bolder; } .results--queries mark { background-color: transparent; font-weight: normal; } .results-products__info > span { margin-left: 10px; } .results--products #predictive-search-products { margin-bottom: 20px; } .results-products__image { width: 100%; min-width: 80px; max-width: 80px; height: 80px; } .results-products__info { display: flex; flex-direction: column; } .predictive-search-results { display: flex; flex-wrap: wrap; flex-direction: column; overflow-y: auto; padding: 40px 0 0; } .predictive-search-results h3 { padding-bottom: 10px; border-bottom: 1px solid; border-color: var(--colorBorder); margin-bottom: 10px; } .predictive-search-results--none { padding-top: 20px; } .predictive-search__no-results { display: block; width: 100%; } .predictive-search__no-results:hover { opacity: 0.5; } .results__group-1 { flex: 100% 0 0; } .results__group-1 > div:not(.results--queries) { display: none; } .results__group-2 { flex: 100% 0 0; } .results__search-btn { width: 100%; padding: 10px; transition: background-color 0.2s ease; border: 1px solid; border-color: var(--colorBorder); } .results__search-btn:hover { background-color: rgba(0, 0, 0, 0.05); } .results__search-btn .icon { width: 14px; height: 14px; } @container (min-width: 800px) { .predictive-search-results { flex-direction: row; flex-wrap: nowrap; } .results { padding: 0 40px 20px; } .results__group-1 { flex: 1 0 0; } .results__group-1 div:not(.results--queries) { display: block; } .results__group-2 { flex: 2 0 0; } .results__group-2 > div:not(.results--products) { display: none; } .results__search-btn { text-align: left; padding: 10px 0 10px 40px; } } .slideshow-wrapper { position: relative; } /*Pause button (focusable by keyboard only)*/ .slideshow__pause:focus { clip: auto; width: auto; height: auto; margin: 0; color: var(--colorBtnPrimaryText); background-color: var(--colorBtnPrimary); padding: 10px; z-index: 10000; transition: none; } .video-is-playing .slideshow__pause:focus { display: none; } .slideshow__pause-stop { display: block; } .is-paused .slideshow__pause-stop { display: none; } .slideshow__pause-play { display: none; } .is-paused .slideshow__pause-play { display: block; } .slideshow__slide { display: none; width: 100%; height: 100%; position: relative; overflow: hidden; } .slideshow__slide:first-child { display: block; } .flickity-slider .slideshow__slide { display: block; } .hero--padded .slideshow__slide { border-radius: var(--roundness); overflow: hidden; } .hero__image-wrapper--no-overlay:before { content: none; } .slideshow-wrapper { position: relative; } /*Pause button (focusable by keyboard only)*/ .slideshow__pause:focus { clip: auto; width: auto; height: auto; margin: 0; color: var(--colorBtnPrimaryText); background-color: var(--colorBtnPrimary); padding: 10px; z-index: 10000; transition: none; } .video-is-playing .slideshow__pause:focus { display: none; } .slideshow__pause-stop { display: block; } .is-paused .slideshow__pause-stop { display: none; } .slideshow__pause-play { display: none; } .is-paused .slideshow__pause-play { display: block; } .slideshow__slide { display: none; width: 100%; height: 100%; position: relative; overflow: hidden; } .slideshow__slide:first-child { display: block; } .flickity-slider .slideshow__slide { display: block; } .hero--padded .slideshow__slide { border-radius: var(--roundness); overflow: hidden; } .slideshow-wrapper { position: relative; } /*Pause button (focusable by keyboard only)*/ .slideshow__pause:focus { clip: auto; width: auto; height: auto; margin: 0; color: var(--colorBtnPrimaryText); background-color: var(--colorBtnPrimary); padding: 10px; z-index: 10000; transition: none; } .video-is-playing .slideshow__pause:focus { display: none; } .slideshow__pause-stop { display: block; } .is-paused .slideshow__pause-stop { display: none; } .slideshow__pause-play { display: none; } .is-paused .slideshow__pause-play { display: block; } .slideshow__slide { display: none; width: 100%; height: 100%; position: relative; overflow: hidden; } .slideshow__slide:first-child { display: block; } .flickity-slider .slideshow__slide { display: block; } .hero--padded .slideshow__slide { border-radius: var(--roundness); overflow: hidden; } /* Hero side by side layout */ .hero__sidebyside { height: 100%; display: flex; } .hero__sidebyside.color-scheme-none { background-color: var(--colorBody); color: var(--colorTextBody); } .hero__sidebyside-content { position: relative; } .hero__sidebyside-content-inner { align-self: center; flex: 1; padding: 30px; } .hero__sidebyside-image { overflow: hidden; } .hero__sidebyside-image-link { display: block; height: 100%; } .hero__sidebyside-image--indented .hero__image { padding: 30px 30px 0; object-fit: contain; } .hero__sidebyside-image--indented .placeholder-svg { margin: 30px 30px 0; height: calc(100% - 60px); width: calc(100% - 60px); } @media only screen and (max-width: 768px) { .hero__sidebyside { flex-direction: column; } .hero__sidebyside-image { position: relative; flex: 1 1 auto; } .hero__sidebyside-image .hero__image, .hero__sidebyside-image .placeholder-svg { position: absolute; top: 0; left: 0; } .hero__sidebyside-content { flex: 0 1 auto; display: flex; order: 2; } } @media only screen and (min-width: 769px) { .hero__sidebyside-content { flex: 1 1 auto; display: flex; max-width: 40%; } .hero__sidebyside-content-inner { padding: 5vw; } .hero__sidebyside-text--right .hero__sidebyside-content { order: 2; } .hero__sidebyside-text--left .hero__sidebyside-content-inner--indented { padding-right: 0; } .hero__sidebyside-text--right .hero__sidebyside-content-inner--indented { padding-left: 0; } .hero__sidebyside-image { flex: 0 1 60%; } .hero__sidebyside-image--indented .hero__image { padding: 80px; object-position: center right; } .hero__sidebyside-text--right .hero__sidebyside-image--indented .hero__image { object-position: center left; } } .tool-tip-trigger { background: none; border: 0; cursor: pointer; } .tool-tip-trigger__title { display: inline-block; } .tool-tip-trigger__title:hover, .tool-tip-trigger__title:focus { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } .tool-tip-trigger__content { display: none !important; /* Ensure our content is always hidden */ } /* Size chart trigger */ .size-chart__standalone { margin: var(--sizeChartMargin); } .size-chart__standalone svg { margin-left: var(--sizeChartIconMargin); } [data-tool-tip="size-chart"] .tool-tip__close { border: 0; padding: 6px; position: absolute; top: 0; right: 0; transform: translate(25%, -25%); z-index: 2; color: var(--colorBtnPrimaryText); background: var(--colorBtnPrimary); border-radius: 50%; } tool-tip { display: none; } tool-tip.quick-shop-modal .page-content--product { max-width: 100%; width: 1500px; } /*Ajax page adjustments*/ tool-tip .page-content, tool-tip .page-width { padding: 0; } tool-tip[data-tool-tip-open="true"] { display: flex; justify-content: center; align-items: center; z-index: 10001; position: fixed; top: 0; left: 0; width: 100%; height: 100%; } tool-tip[data-tool-tip-open="true"]:before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #e0e0e0; background-color: var(--colorModalBg); animation: overlay-on 0.3s forwards; cursor: pointer; } .tool-tip__inner { animation: modal-close 0.3s forwards; opacity: 0; color: var(--colorTextBody); } tool-tip[data-tool-tip-open="true"] .tool-tip__inner { animation: modal-open 0.3s forwards; display: block; position: fixed; background: var(--colorBody); box-shadow: 0 10px 20px #00000017; padding: 30px; min-width: 250px; min-height: 250px; } @media only screen and (max-width: 768px) { tool-tip[data-tool-tip-open="true"] .tool-tip__inner { width: calc(100% - 20px); max-width: 500px; } } @media only screen and (min-width: 769px) { .tool-tip__inner { margin: 40px; max-width: calc(100% - 80px); max-height: 90vh; padding: calc(var(--gutter) * 1.5); } .quick-shop-modal .tool-tip__inner { max-width: 1200px; width: calc(100% - 80px); } } .tool-tip__content { max-height: 80vh; overflow: auto; } .quick-shop-modal .tool-tip__content, .quick-add-modal .tool-tip__content { padding: 1rem; } [data-tool-tip="store-availability"] .tool-tip__content { padding: 0; } @media only screen and (max-width: 768px) { .tool-tip__content { font-size: 0.85em; } } .tool-tip__close { position: absolute; top: 0; right: 0; border: 0; padding: 6px; transform: translate(25%, -25%); z-index: 2; transition: transform 0.15s ease-out; } .tool-tip__close:hover { transform: translate(25%, -25%) scale(1.08); } .tool-tip__close .icon { width: 28px; height: 28px; } .store-availability { margin-top: var(--gutter); display: flex; justify-content: space-around; } .store-availability .icon { margin: 6px 0 0; width: 12px; height: 12px; } .store-availability .icon-in-stock { fill: var(--successGreen); } .store-availability .icon-out-of-stock { fill: var(--errorRed); } .store-availability + .store-availability { margin-top: 20px; } .store-availability__info { flex: 0 1 90%; text-align: left; margin-left: 10px; } .store-availability__info > div { margin-bottom: 5px; } .store-availability__info > div:last-child { margin-bottom: 0; } .store-availability__info a { -webkit-text-decoration: underline; text-decoration: underline; } .store-availability__small { font-size: 0.8em; } .store-availability__small a { display: block; margin-top: 10px; } .quick-shop-modal .store-availability__small--link { display: none; } /* * This is the stylesheet entrypoint for the testimonials section. * This file and all its inclusions will be processed through postcss */ .quote-icon { display: block; margin: 0 auto 20px; } .testimonial-stars { display: block; font-size: 16px; letter-spacing: 0.2em; margin-bottom: 10px; } @media only screen and (min-width: 769px) { .testimonial-stars { font-size: 18px; margin-bottom: 15px; } } .testimonials-slide { display: none; opacity: 0; padding: 0 0 55px; width: 33%; /*Hide all but first slide to prevent page reflows prior to init*/ } .testimonials-slide:first-child { display: block; } .flickity-slider .testimonials-slide { display: block; opacity: 1; } .testimonials-slide .testimonials-slider__text { transform: scale(0.95); transition: transform 0.5s ease, box-shadow 0.5s ease; } .testimonials-slide.is-selected .testimonials-slider__text { transform: scale(1.1); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); position: relative; z-index: 10; } @media only screen and (max-width: 768px) { .testimonials-slide { width: 100%; padding: 0 0 25px; } .testimonials-slide .testimonials-slider__text { transform: scale(0.86); } .testimonials-slide.is-selected .testimonials-slider__text { transform: scale(1); } } .testimonials-slider__text { margin: 0 30px; padding: 30px calc(var(--gutter) / 2); background: var(--colorBody); color: var(--colorTextBody); margin-bottom: calc(var(--gutter) / 2); } @media only screen and (min-width: 769px) { .testimonials-slider__text { margin: 0; padding: 30px; margin-bottom: 0; } } .testimonials-slider__text cite { font-style: normal; font-weight: var(--typeHeaderWeight); } @media only screen and (min-width: 769px) { .testimonials-slider__text cite { font-size: calc(var(--typeBaseSize) + 1px); } } .testimonials-slider__text p { margin-bottom: calc(var(--gutter) / 4); } .testimonials-slider__text p + cite { margin-top: 0; } .testimonials__info { font-size: calc(var(--typeBaseSize) - 1px); } :root { --testimonialImageSize: 142px; --testimonialImageSizeRound: 65px; } .testimonial-image { max-width: var(--testimonialImageSize); background-color: var(--colorBody); } .text-right .testimonial-image { margin-left: auto; } .text-center .testimonial-image { margin-left: auto; margin-right: auto; } .testimonial-image .image-wrap { background: none; width: 100%; height: 100%; } .testimonial-image--round { width: var(--testimonialImageSizeRound); height: var(--testimonialImageSizeRound); max-width: none; border-radius: var(--testimonialImageSizeRound); /*fix animation bug in Safari*/ } .testimonial-image--round img { overflow: hidden; border-radius: var(--testimonialImageSizeRound); height: 100%; } .testimonials-section { display: block; padding: var(--indexSectionPadding) 0; } .testimonials-section .flickity-page-dots { bottom: 0; } .feature-row-wrapper { overflow: hidden; direction: ltr; } .feature-row { margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } @media (--widescreen) { .feature-row { margin: 0 6%; } } @media only screen and (max-width: 768px) { .feature-row { flex-direction: column; margin: 0; } } @media only screen and (max-width: 959px) { .feature-row--small-none { display: block; } } .feature-row__item { flex: 0 1 57%; margin: 0 auto; } @media only screen and (max-width: 768px) { .feature-row__item { flex: 1 1 auto; max-width: 100%; min-width: 100%; } } .feature-row__image { display: block; margin: 0 auto; order: 1; } @media only screen and (min-width: 769px) { .feature-row__image { order: 2; } } .feature-row__text { padding: 0; } @media only screen and (max-width: 768px) { .feature-row__text { order: 2; margin-top: 0; padding: 30px 20px 0; padding-bottom: 0; /*always last element on mobile*/ } } .feature-row__text .rte { margin: 0; } .feature-row__text .btn { margin-top: calc(var(--gutter) / 2); } @media only screen and (min-width: 769px) { .feature-row__text--left { padding-left: calc(var(--gutter) * 2); padding-right: 20px; } .feature-row__text--right { padding-right: calc(var(--gutter) * 2); padding-left: 20px; } } .feature-row__item--overlap-images { display: flex; justify-content: space-between; align-items: center; padding: 0 0 15px; margin: 0 0 0 -30px; } @media only screen and (min-width: 769px) { .feature-row__item--overlap-images { padding: 50px 0; margin: 0 auto; } } .feature-row__item--overlap-images > *:first-child { z-index: 1; transform: translate(30px, 30px); } @media only screen and (min-width: 769px) { .feature-row__item--overlap-images > *:first-child { transform: translate(50px, 50px); } } .feature-row__item--overlap-images svg { border: 2px solid; border-color: var(--colorBody); } .feature-row__item--overlap-images .feature-row__first-image { width: 55%; } .feature-row__item--overlap-images .feature-row__second-image { width: 60%; } .feature-row__item--placeholder-images .placeholder-image-wrap { width: 50%; } .feature-row-wrapper .feature-row__images { width: 100%; min-width: 0; } @media only screen and (max-width: 959px) { .feature-row-wrapper .feature-row__images { padding-top: 30px; } } .feature-row-wrapper .feature-row__text { width: 100%; min-width: 0; } @media only screen and (min-width: 769px) { .feature-row-wrapper .feature-row__text { min-width: 43%; flex: 0 1 43%; } } .feature-row--33 .feature-row__images { max-width: 50%; } @media only screen and (min-width: 769px) { .feature-row--33 .feature-row__images { max-width: none; flex: 0 1 33.333%; } } .feature-row--50 .feature-row__images { max-width: 100%; padding-right: 20px; padding-left: 20px; } @media only screen and (min-width: 769px) { .feature-row--50 .feature-row__images { max-width: none; flex: 0 1 50%; padding-right: 0; padding-left: 0; } } .feature-row--66 .feature-row__images { max-width: 100%; padding-right: 20px; padding-left: 20px; } @media only screen and (min-width: 769px) { .feature-row--66 .feature-row__images { max-width: none; flex: 0 1 66.666%; padding-right: 0; padding-left: 0; } } /* Shared styles */ .text-with-icons__blocks { display: flex; flex-wrap: wrap; justify-content: center; margin-left: -30px; margin-right: -30px; } @media only screen and (max-width: 768px) { .text-with-icons__blocks { flex-direction: column; margin: 0; } } .has-1-per-row .text-with-icons__block { width: 100%; } .has-2-per-row .text-with-icons__block { width: 50%; } .has-3-per-row .text-with-icons__block { width: 33.333%; } .has-4-per-row .text-with-icons__block { width: 25%; } .has-5-per-row .text-with-icons__block { width: 20%; } .text-with-icons__blocks .text-with-icons__block { display: flex; flex-direction: column; flex: none; padding: 30px; } @media only screen and (max-width: 768px) { .text-with-icons__blocks .text-with-icons__block { width: 100%; padding: 0 0 60px; } } .text-with-icons__block-icon { display: block; margin-bottom: 10px; } .text-with-icons__block-icon .icon { width: 70px; height: 70px; } @media only screen and (max-width: 768px) { .text-with-icons__block-icon .icon { width: 60px; height: 60px; } } .text-with-icons__button { display: flex; justify-content: center; } /* Expanse specific styles */ .text-with-icons { margin-bottom: -22px; } .text-with-icons__blocks .text-with-icons__block { padding: 0 22px 22px; } @media only screen and (max-width: 768px) { .text-with-icons__blocks .text-with-icons__block { padding: 0 0 22px; } } .text-with-icons__button { padding-bottom: 20px; } .toolbar { position: relative; background: var(--colorToolbar); color: var(--colorToolbarText); font-size: calc(var(--typeBaseSize) * 0.85); } .toolbar a { color: var(--colorToolbarText); } .is-light .toolbar { background-color: transparent; color: var(--colorStickyNavLinks); } .is-light .toolbar a { color: var(--colorStickyNavLinks); } .toolbar:after { position: absolute; left: 0; right: 0; bottom: 0; content: ""; display: block; border-bottom: 1px solid; border-bottom-color: var(--colorToolbarText); width: 100%; opacity: 0.15; } .is-light .toolbar:after { border-color: var(--colorStickyNavLinks); } .toolbar__content { display: flex; justify-content: flex-end; align-items: center; } .toolbar__item { flex: 0 1 auto; padding: 0 5px; } .toolbar__item:first-child { padding-left: 0; } .toolbar__item:last-child { padding-right: 0; } .toolbar__item select, .toolbar__item .faux-select { font-size: 14px; padding-top: 5px; padding-bottom: 5px; padding-left: 0; border: 0; background: transparent; color: currentColor; } .toolbar__item--announcements { flex: 1 1 auto; } .toolbar__social { text-align: right; } .toolbar__social a { display: block; padding: 5px; } .toolbar__social .icon { position: relative; vertical-align: middle; width: 16px; height: 16px; } .social-sharing__title { font-size: calc(var(--typeBaseSize) * 0.85); display: inline-block; vertical-align: middle; padding-right: 15px; padding-left: 3px; } .footer__social { margin: 0; } form + .footer__social { margin-top: var(--gutter); } .footer__social li { display: inline-block; margin: 0 15px 15px 0; } .footer__social a { display: block; } .footer__social .icon { width: 21px; height: 21px; } .footer__social .icon.icon--wide { width: 40px; } .social-sharing { display: inline-flex; flex-wrap: wrap; gap: 10px 20px; } .social-sharing .icon { height: 18px; width: 18px; } .blog-layout__sidebar .social-sharing { margin-bottom: 40px; } .social-sharing__link { display: inline-block; color: var(--colorTextBody); border-radius: 2px; margin: 0 18px 0 0; -webkit-text-decoration: none; text-decoration: none; font-weight: normal; } .social-sharing__link:last-child { margin-right: 0; } .variant__label-info { /*undo accent stack styles*/ text-transform: none; font-weight: normal; letter-spacing: 0; } .variant-input__select { min-width: 100px; } .variant-input { display: inline-block; /*Firefox bug fix*/ } select .variant-input { display: block; } .variant-wrapper + .variant-wrapper { margin-top: 25px; } .no-js .variant-wrapper { display: none; } .variant-wrapper--dropdown { display: inline-block; max-width: 100%; margin-right: calc(var(--gutter) / 2); margin-bottom: 0; } .collection-image-wrap.collection-image--square.collection-image-fill-space--true.collection-image-color--grey.overlay { /* display: none; */ } .kproducutSection #MainContent .section-header .section-header__title { font-size: 30px; font-family: "Merriweather", serif; color: #000000; } .promotio_sec { position: relative; } .promotio_sec .promotion_bann img { width: 100%; } .promotio_sec .text_ovrlay { position: absolute; left: 0; right: 0; top: 50%; text-align: center; transform: translate(0, -50%); max-width: 410px; margin: 0 auto; } .promotio_sec .text_ovrlay .hero__animation-contents { color: #fff; font-size: 16px; letter-spacing: 1px; font-weight: 500; } .promotio_sec .text_ovrlay h2 { font-size: 48px; font-weight: 700; color: #e1a844; font-family: "Merriweather", serif; padding: 15px 0 25px; margin: 0; } .promotio_sec .hero__link a.btn { margin: 0; border-radius: 10px; font-size: 18px; font-weight: 600; min-width: 190px; padding: 16px 20px; } .brandBtnCol { text-align: center; padding-top: 30px; } .brandBtnCol a { font-size: 18px; text-transform: uppercase; color: var(--colorBtnPrimary); border: 2px solid var(--colorBtnPrimary); border-radius: 10px; padding: 7px 22px; } /* .nws_sec-img { background-image: url(/cdn/shop/files/image_1194.jpg?v=1725360386); } */ .btnStyle { color: #fff !important; font-weight: 600 !important; font-size: 18px !important; border-radius: 8px !important; min-width: 190px !important; padding: 16px 20px !important; margin-top: 20px !important; -webkit-transition: all 300ms ease-in-out 0s; -o-transition: all 300ms ease-in-out 0s; transition: all 300ms ease-in-out 0s; } .btnStyle.btnPrimary:hover { background-color: var(--colorBtnPrimaryLight); } .btnStyle.btnOutline { background-color: transparent; color: var(--colorBtnPrimary) !important; } .btnStyle.btnOutline:hover { color: #fff !important; background-color: var(--colorBtnPrimaryLight) !important; } .top_deals_sec .coll_img { padding-top: calc(222 / 246 * 100%); border-radius: 10px; } .top_deals_sec .coll_img, .shop_by_cate-sec .coll_img, .wht_kind_sec .coll_img { position: relative; overflow: hidden; } .top_deals_sec .coll_img img { border-radius: 10px; } .top_deals_sec .coll_img img, .shop_by_cate-sec .coll_img img, .wht_kind_sec .coll_img img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1) rotate(0deg); -webkit-transition: all 600ms ease-in-out 0s; -o-transition: all 600ms ease-in-out 0s; transition: all 600ms ease-in-out 0s; } .top_deals_sec .collection-item:hover .coll_img img, .shop_by_cate-sec .collection-item:hover .coll_img img { transform: scale(1.1) rotate(-2deg); } .top_deals_sec .collection-item:hover, .shop_by_cate-sec .collection-item:hover { color: var(--primaryColor); } .kproducutSection .main-content { background-color: #fff; } .shop_by_cate-sec .coll_img { /* padding-top: calc(307 / 307* 100%); */ border-radius: 50%; width: 250px; height: 250px; margin: 0 auto; } .shop_by_cate-sec .coll_img img { border-radius: 50%; } .wht_kind_sec .coll_img { padding-top: calc(370 / 246 * 100%); border-radius: 10px; } .wht_kind_sec .coll_img img { border-radius: 10px; } .wht_kind_sec a.collection-item span.collection-item__title { position: absolute; left: 0; right: 0; bottom: 30px; background-color: #fff; padding: 10px 20px; font-weight: 600; text-transform: uppercase; max-width: 180px; border-radius: 50px; font-size: 14px; margin: 0 auto; z-index: 1; -webkit-transition: all 300ms ease-in-out 0s; -o-transition: all 300ms ease-in-out 0s; transition: all 300ms ease-in-out 0s; } .wht_kind_sec a.collection-item:hover span.collection-item__title { background-color: var(--primaryColor); color: #fff; } .wht_kind_sec a.collection-item { overflow: hidden; } .wht_kind_sec a.collection-item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1; opacity: 0; visibility: hidden; border-radius: 10px; -webkit-transition: all 300ms ease-in-out 0s; -o-transition: all 300ms ease-in-out 0s; transition: all 300ms ease-in-out 0s; } .wht_kind_sec a.collection-item:hover::before { opacity: 1; visibility: visible; } section.sec-fea-collection.othr_coll_bg-gry { padding-top: 100px; padding-bottom: 100px; background-color: #fafafa; } .logo-bar .logo-bar__item { background-color: transparent; padding: 0; } .logo-bar .grid-item.grid-product::after { display: none; } .logo-bar .logo-bar__item a.logo-bar__link { padding: 10px; width: 100%; height: 165px; } .logo-bar .logo-bar__item img.logo-bar__image { width: 100%; height: 100%; object-fit: cover; background-color: #f8f8f8; } .product-grid .product-block { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; margin-bottom: 0; width: 92%; } .product-grid .product-block a.view_prd-btn { color: var(--colorBtnPrimary); border: 1px solid var(--colorBtnPrimary); padding: 8px 6px; border-radius: 6px; font-size: 11px; text-align: center; flex: 1 0 0%; order: 1; text-transform: uppercase; font-weight: 600; } .product-grid .product-block .shopify-product-form { margin: 0; flex: 1 0 0%; order: 2; } .product-grid .product-block .add-to-cart { padding: 8px 6px; border-radius: 6px; font-size: 11px; text-transform: uppercase; font-weight: 600; } .product-grid .grid-item__meta1 { padding: 20px 14px; } .product-grid .grid-item__meta1 .grid-item__meta-main .grid-product__title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .blog-sec .new-grid .grid-item { flex: 1 0 0%; display: block; width: 100%; max-width: 100%; } .blog-sec .new-grid .grid-item > a { height: 220px; width: 100%; display: block; border-radius: 10px; } .blog-sec .new-grid .grid-item > a img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } .blog-sec .article-sub-meta { padding-top: 20px; } .blog-sec .article-sub-meta a.article__title { color: var(--primaryColor); font-size: 16px; line-height: 1.5; font-weight: 500; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 10px; } .blog-sec .article-sub-meta a { font-size: 14px; text-transform: uppercase; color: var(--primaryColor); font-weight: 500; } .blog-sec .article-sub-meta p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; margin-bottom: 15px; font-size: 14px; line-height: 1.6; } .blog-sec .article-sub-meta a { font-size: 14px; text-transform: uppercase; color: var(--primaryColor); font-weight: 500; } .blog-sec .article-sub-meta a > i { font-size: 100%; margin-left: 0; } .about-sect { padding-top: 100px; padding-bottom: 100px; background-color: #fafafa; margin-bottom: 0; } .about-sect .feature-row__item { padding: 0; margin: 0; } .about-sect .feature-row__item.feature-row__text h2.h2 { font-size: 60px; font-family: "Merriweather", serif; color: #000000; padding-bottom: 12px; } .about-sect .feature-row__item.feature-row__text p.accent-subtitle { font-size: 24px; color: var(--primaryColor); line-height: 1.2; } .about-sect .feature-row__item.feature-row__text .featured-row__subtext { font-size: 16px; color: var(--grayColor); line-height: 1.8; padding-bottom: 10px; } .about-sect .feature-row__item.feature-row__images { position: relative; align-items: start; } .about-sect .about_pattrn-img { position: absolute; left: 50%; bottom: 20px; transform: translate(-100%, 0); margin-left: -5px; } .about-sect .feature-row__first-image { transform: none; padding-right: 20px; } .about-sect .feature-row__second-image { padding-left: 20px; } .about-sect .feature-row__first-image a { max-width: 290px; display: block; background-color: transparent; border-radius: 10px; } .about-sect .feature-row__first-image .image-wrap img { border-radius: 10px; } .about-sect .feature-row__second-image a { max-width: 310px; display: block; background-color: transparent; border-radius: 10px; margin-top: 40px; height: 425px; } .about-sect .feature-row__second-image a .image-wrap { width: 100%; height: 100% !important; padding: 0 !important; background: transparent; } .about-sect .feature-row__second-image .image-wrap img { border-radius: 10px; width: 100%; height: 100%; } .nws_sec-img { padding: 150px 0 100px !important; } .nws_sec-img .newsletter-section--no-image .newsletter-section__content { flex: initial; max-width: 100%; margin: 0; padding: 0; } .nws_sec-img .newsletter-section.newsletter-section--image-right.newsletter-section--no-image { padding: 0 !important; display: block; } .nws_sec-img .newsletter__input-group { max-width: 100%; } .nws_sec-img .newsletter-section__content .theme-block form { display: block; background-color: #fff; padding: 70px 40px; border-radius: 10px; box-shadow: 0 8px 8px rgba(0, 0, 0, 0.03); } .nws_sec-img .newsletter__input-group { max-width: 100%; flex-wrap: wrap; gap: 20px; } .nws_sec-img .newsletter__input-group > div { flex: 1 0 0%; width: 100%; max-width: 100%; position: relative; } .nws_sec-img .newsletter__input-group > div:before { content: ""; position: absolute; left: 20px; top: 50%; width: 18px; height: 18px; background-repeat: no-repeat; background-size: contain; transform: translateY(-50%); background-position: center; } .nws_sec-img .newsletter__input-group > .fname-field:before, .nws_sec-img .newsletter__input-group > .lname-field:before { background-image: url(/cdn/shop/files/Vector.png?v=1725428234); } .nws_sec-img .newsletter__input-group > .email-field:before { background-image: url(/cdn/shop/files/Frame.png?v=1725428235); } .nws_sec-img .theme-block p.h2 { font-size: 60px; font-family: Merriweather, serif; color: #000; max-width: 834px; margin: 0 auto; } .nws_sec-img .newsletter__input-group .input-group-field { width: 100%; background-color: #f2f2f2; border: 0; border-radius: 6px; padding: 20px 20px 20px 50px; font-size: 16px; color: var(--grayColor); } .nws_sec-img .newsletter__input-group > .input-group-btn { flex: 0 0 auto; width: auto; min-width: 222px; } .nws_sec-img .newsletter__input-group > .input-group-btn::before { display: none; } .nws_sec-img .newsletter__input-group > .input-group-btn .btn { color: #fff !important; font-weight: 600 !important; font-size: 18px !important; border-radius: 8px !important; padding: 16px 20px !important; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; width: 100%; text-transform: uppercase; } .nws_sec-img .newsletter__input-group > .input-group-btn .btn:focus-visible { outline: none; } .nws_sec-img .newsletter__input-group > .input-group-btn .btn:hover { background-color: var(--colorBtnPrimaryLight); } .nws_sec-img .note.note--success { background-color: rgba(226, 36, 60, 0.8); border-color: #e2243c; color: #fff; text-align: center; font-size: 18px; font-weight: 500; border-radius: 6px; } .nws_sec-img .newsletter-section .errors { max-width: 100%; position: absolute; left: 40px; bottom: 40px; margin: 0; border: 0; background-color: transparent; padding: 0; } .nws_sec-img .newsletter-section .errors ul { margin: 0; list-style: none; } .site-footer.footr_main-sec .footer__blocks { justify-content: space-between; } .site-footer.footr_main-sec .footer__section--menus { border: 0; padding: 110px 0 50px; } .site-footer.footr_main-sec .footer__block--contact { text-align: center; } .site-footer.footr_main-sec .footer__block--contact .ftr_logo { margin-bottom: 30px; } .site-footer.footr_main-sec h2.footer__title.h4 { font-size: 16px; text-transform: uppercase; font-family: "Poppins", sans-serif; font-weight: 600; letter-spacing: 0.4px; margin-bottom: 26px; color: #000000; } .site-footer.footr_main-sec ul.footer__menu li + li { margin-top: 10px; } .site-footer.footr_main-sec ul.footer__menu a { font-size: 16px; color: var(--grayColor); } .site-footer.footr_main-sec ul.footer__menu a:hover { color: var(--primaryColor); } .site-footer.footr_main-sec .footer__title { font-size: 16px; color: var(--grayColor); font-weight: 500; margin-bottom: 30px; } .site-footer.footr_main-sec { background-color: #fff; } .site-footer.footr_main-sec .footer__section { border-color: #f2f2f2; padding: 70px 0; } .site-footer.footr_main-sec .footer__section .footer__base-links { font-size: 16px; color: #555; position: relative; } .site-header__element .page-width ul li a:hover { color: #e2243c; } summary.site-nav__link.site-nav__link--underline.site-nav__link--has-dropdown:hover { color: #e2243c; } .product-grid .product-block a.view_prd-btn:hover { color: #fff !important; background-color: var(--colorBtnPrimaryLight) !important; } .product-grid .product-block .add-to-cart:hover { background-color: var(--colorBtnPrimaryLight); color: #fff; border: red; } .kproducutSection .site-header__element--sub .site-nav__item a.site-nav__link { padding: 14px; } .top_deals_sec span.collection-item__title { padding: 0; text-align: left; } .cus_feat-coll-sec01 { overflow: hidden; } /******* Shop by brands css start *******/ .kproducutSection .sec_bread-01 { background-color: #f2f2f2; padding: 26px 0; } .kproducutSection .sec_bread-01 ol.breadcrumbs__list { margin: 0; padding: 0; list-style: none; display: flex; } .kproducutSection .sec_bread-01 ol.breadcrumbs__list li.breadcrumbs__item { margin: 0; font-size: 16px; font-weight: 600; text-transform: uppercase; } .kproducutSection .sec_bread-01 ol.breadcrumbs__list li.breadcrumbs__item a.breadcrumbs__link { font-size: 16px; color: #000; font-weight: 600; text-transform: uppercase; } .brands-t-p.page-width.page-width--narrow { max-width: 1320px; margin: 0 auto; text-align: center; padding-top: 35px; } .brands-t-p header.section-header { margin-bottom: 20px; font-size: 30px; } .brands-t-p p { line-height: 1.8; } .brand-list-sec { padding: 35px 0; } .brand-list-sec .section-header { display: block; margin-bottom: 20px; } .brand-list-sec .section-header h2 { font-size: 30px; margin: 0; font-family: "Merriweather", serif; } .brand-list-sec .logo-bar .new-grid.product-grid { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; margin-top: calc(-1 * var(--bs-gutter-y)); margin-right: calc(-0.5 * var(--bs-gutter-x)); margin-left: calc(-0.5 * var(--bs-gutter-x)); } .brand-list-sec .logo-bar .new-grid.product-grid .logo_itm { flex: 0 0 auto; width: 20%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-top: var(--bs-gutter-y); } .brand-list-sec .logo-bar .new-grid.product-grid .logo_itm a { background-color: #fafafa; padding: 16px; min-height: 165px; display: flex; justify-content: center; align-items: center; } .brand-list-sec .logo-bar .new-grid.product-grid .logo_itm a img { max-width: 160px; margin: 0 auto; max-height: 80px; object-fit: contain; } /******* Shop by brands css end *******/ /******* Faq css start *******/ .faqS-title .index-section.index-section--faq { margin: 60px 0 0; padding: 0 0 30px; } .faqS-title .index-section.index-section--faq p.h2 { margin: 0; font-size: 30px; color: #000; } .faqS_con { background-color: #fff; box-shadow: 0 10px 60px #0000000d; border-radius: 20px; border: 1px solid #f2f2f2; padding: 26px 22px; } .faqS_con + .faqS_con { margin-top: 20px; } .faqS_con .collapsible-trigger-btn { padding: 0; color: #000000; font-size: 20px; padding-right: 40px; font-family: "Merriweather", serif; } .faqS_con .collapsible-trigger-btn.is-open { color: var(--primaryColor); } .collapsible-content--all { font-size: 18px; line-height: 1.8; } .collapsible-content--all.is-open { border: 0; height: auto !important; padding-top: 4px; } .faqS_con .collapsible-content__inner { padding: 0; } .faqS_con .collapsible-trigger__icon { width: 18px; height: 18px; } .faqS_con .collapsible-trigger__icon .icon { width: 100%; height: 100%; } .faqSectionStyle { padding-bottom: 110px; } .shopify-section.blog-layout__main h3, .shopify-section.blog-layout__main h4 { font-family: 'Merriweather'; color: #000; } .blogDetailS header.page-width.section-header { padding: 70px 150px 0; } .blogDetailS at-rte.page-width { padding: 0 150px; } .blogDetailS at-rte.page-width p { font-size: 15px; line-height: 1.8; } .blogDetailS { padding-bottom: 110px; } .pagination.clearfix.art_pag_Style { border-top: 1px solid #C7C9CA; } .blogDetailS a.btn.return-link { font-size: 18px; font-weight: 500; border-radius: 10px; } .blogDetailS .pagination.clearfix.art_pag_Style a { font-size: 18px; font-weight: 500; color: #e2243c; text-decoration: none; text-transform: uppercase; } .blogDetailS .pagination-item.left a svg { margin-right: 5px; } .blogDetailS .pagination-item.right a svg { margin-left: 5px; } .pagLR { display: flex; justify-content: space-between; padding: 50px 0 70px; } .blogDetailS hr.hr--large { display: none; } .blogDetailS a img { /* margin: 0!important; */ text-align: left; width: 100%; } .blogDetailS img { /* margin: 0!important; */ text-align: left; width: 100%; } .blog_Tit_Tag a { color: #bdb8b8 !important; font-size: 13px !important; } /******* Faq css end *******/ header.page-width.section-header { text-align: left; } at-rte.page-width.at-rte.rte.clearfix.capitalize-first-letter { text-align: left; } .blog_Tit_Tag { padding-bottom: 10px; } .kproducutSection #MainContent .coll_Banner-Hd .section-header .section-header__title { background-color: #0006; border-radius: 10px; text-align: center; color: #fff; font-size: 48px; padding: 75px 40px; display: inline-block; } .collection-hero__content.overlay.coll_Banner-Hd { align-items: center; } /******************************************** ********* MEDIA QUARY START ********* *******************************************/ @media only screen and (max-width: 1340px) { .kproducutSection .site-header .site-nav__link { padding: 0; } .kproducutSection .site-header ul.site-nav.site-navigation { display: flex; align-items: center; justify-content: space-between; margin-left: 0 !important; gap: 15px; } .kproducutSection .site-header .site-header__logo a { width: 260px !important; } .kproducutSection #MainContent .section-header .section-header__title { font-size: 24px; } .shop_by_cate-sec .coll_img { width: 230px; height: 230px; } .logo-bar .logo-bar__item a.logo-bar__link { height: 130px; } section.sec-fea-collection.othr_coll_bg-gry, .about-sect { padding-top: 80px; padding-bottom: 80px; } .nws_sec-img { padding: 120px 0 80px !important; } .about-sect .feature-row__item.feature-row__text h2.h2 { font-size: 50px; } .about-sect .feature-row__item.feature-row__text p.accent-subtitle { font-size: 20px; } .btnStyle { font-size: 16px !important; min-width: 165px !important; padding: 14px 20px !important; margin-top: 15px !important; } .nws_sec-img .theme-block p.h2 { font-size: 50px; } .nws_sec-img .newsletter-section__content .theme-block form { padding: 50px 30px; } } @media only screen and (max-width: 1399px) { .kproducutSection .scrollable-grid--small { overflow: hidden; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; margin: calc(var(--productGridMargin) * -1) calc(var(--page-width-gutter-small) * -1) 0 0; padding: var(--productGridMargin) var(--page-width-gutter-small) 0 0; } .kproducutSection.page-width--flush-small .scrollable-grid--small { margin-left: 0; margin-right: 0; padding-left: var(--page-width-gutter-small); } .kproducutSection .scrollable-grid--small .grid-item { flex: 0 0 25%; } /*Some one-off sizing*/ .kproducutSection .scrollable-grid--small[data-type="subcollections"] { margin-left: calc(var(--grid-gutter-small) * -1); margin-bottom: 0; padding-bottom: 10px; } .kproducutSection .scrollable-grid--small[data-type="subcollections"] .grid-item { flex: 0 0 30%; } /*Create faux-element to make enough right-side padding inside scrollable div*/ [data-view*="scrollable"]:after { content: ""; display: block; height: 1px; min-width: var(--pageWidthPadding); } .kproducutSection .site-header__element--sub .site-nav__item a.site-nav__link { font-size: 14px !important; padding: 0 !important; } .kproducutSection .site-header ul.site-nav.site-navigation { flex-wrap: wrap; gap: inherit; justify-content: center; } .kproducutSection .site-header ul.site-nav.site-navigation li.site-nav__item { padding: 10px; } .kproducutSection .flickity-slider .hero__text-shadow.overlay { padding: 30px; max-width: 420px; } .kproducutSection .slideshow__slide--slide-1 .hero__title, .kproducutSection .slideshow__slide--slide-1 .hero__title p, .kproducutSection .slideshow__slide--hero_eFjJw8 .hero__title, .kproducutSection .slideshow__slide--hero_eFjJw8 .hero__title p { font-size: 50px !important; } .kproducutSection .hero__link .btn { margin: 0 !important; } .btnStyle { font-size: 14px !important; min-width: 140px !important; padding: 12px 15px !important; margin-top: 10px !important; } } @media only screen and (max-width: 1199px) { .kproducutSection .scrollable-grid--small .grid-item { flex: 0 0 30%; } .kproducutSection .site-header .site-header__logo a { width: 200px !important; } .blog-sec .new-grid .grid-item { flex: 0 0 auto; width: 33.33333333%; margin-bottom: 40px; } .wht_kind_sec a.collection-item span.collection-item__title { bottom: 20px; padding: 8px 10px; max-width: 160px; } .about-sect .feature-row__second-image a { height: 330px; } .nws_sec-img .newsletter__input-group > .input-group-btn { min-width: 180px; } .nws_sec-img .newsletter__input-group > .input-group-btn .btn { font-size: 16px !important; padding: 16px 15px !important; } .shop_by_cate-sec .coll_img { width: 185px; height: 185px; } section.sec-fea-collection.othr_coll_bg-gry, .about-sect { padding-top: 60px; padding-bottom: 60px; } .about-sect .feature-row__item.feature-row__text h2.h2 { font-size: 40px; } .about-sect .feature-row__item.feature-row__text p.accent-subtitle { font-size: 18px; } .nws_sec-img .theme-block p.h2 { font-size: 40px; max-width: 650px; } .site-footer.footr_main-sec .footer__section { padding: 40px 0; } .faqS_con .collapsible-trigger-btn { font-size: 20px; } .collapsible-content--all.is-open { padding-top: 15px; font-size: 16px; line-height: 1.6; } .faqS_con + .faqS_con { margin-top: 15px; } .faqS_con { padding: 24px 20px; } .kproducutSection .sec_bread-01 { padding: 26px 0; } .blogDetailS header.page-width.section-header { padding: 40px 100px 0; } .blogDetailS at-rte.page-width { padding: 0 100px; } .blogDetailS { padding-bottom: 80px; } .pagLR { padding: 30px 0 50px; } .shopify-section.blog-layout__main h3, .shopify-section.blog-layout__main h4 { font-size: 24px; margin-bottom: 15px; margin-top: 50px; } .blogDetailS at-rte.page-width p { font-size: 14px; line-height: 1.8; } .blogDetailS a.btn.return-link { font-size: 16px; } .kproducutSection #MainContent .coll_Banner-Hd .section-header .section-header__title { font-size: 40px !important; padding: 60px 40px; } .brands-t-p.page-width.page-width--narrow { max-width: 100%; padding-top: 60px; } } @media only screen and (max-width: 992px) { .nws_sec-img .theme-block p.h2 { font-size: 36px !important; } .kproducutSection #MainContent .section-header .section-header__title { font-size: 22px !important; } .promotio_sec .text_ovrlay h2 { font-size: 40px !important; } section.sec-fea-collection.othr_coll_bg-gry { padding-top: 55px !important; padding-bottom: 40px !important; } .about-sect { padding-top: 55px !important; } .kproducutSection .scrollable-grid--small .grid-item { flex: 0 0 40%; } .kproducutSection .site-header .header-item--icons .site-nav__link.site-nav__link--icon + .site-nav__link.site-nav__link--icon { margin-left: 20px !important; } .site-footer.footr_main-sec .footer__section { padding: 30px 0; } .nws_sec-img { padding: 80px 0 60px !important; } .about-sect .feature-row__first-image { padding-right: 15px; } .about-sect .feature-row__second-image { padding-left: 15px; } .top_deals_sec .grid-item, .wht_kind_sec .grid-item { flex: 0 0 auto !important; width: 33.33333333%; margin-bottom: 20px; } .nws_sec-img .newsletter-section__content .theme-block form { padding: 30px 20px; } .nws_sec-img .newsletter__input-group > .input-group-btn { min-width: 120px; } .nws_sec-img .newsletter__input-group .input-group-field { padding: 15px 15px 15px 40px; font-size: 14px; } .nws_sec-img .newsletter__input-group > div:before { left: 15px; width: 15px; height: 15px; margin-top: -2px; } .nws_sec-img .newsletter__input-group > .input-group-btn .btn { font-size: 14px !important; padding: 14px 15px !important; } .kproducutSection .site-header .header-item.header-item--search.small--hide .search__input-wrap { max-width: 320px; } .kproducutSection .site-header .header-item.header-item--search.small--hide .search__input-wrap .search__input { border-width: 1px; padding: 10px 35px 10px 15px; } .kproducutSection .site-header .header-item.header-item--search .btn--search .icon { width: 20px; height: 20px; } .kproducutSection .site-header .header-item.header-item--search .btn--search { right: 5px; } .shop_by_cate-sec .coll_img { width: 150px; height: 150px; } .kproducutSection .flickity-slider .hero__text-shadow.overlay { padding: 20px; max-width: 320px; } .kproducutSection .slideshow__slide--slide-1 .hero__title, .kproducutSection .slideshow__slide--slide-1 .hero__title p, .kproducutSection .slideshow__slide--hero_eFjJw8 .hero__title, .kproducutSection .slideshow__slide--hero_eFjJw8 .hero__title p { font-size: 40px !important; } .kproducutSection.hero__subtitle { font-size: 16px !important; margin-bottom: 10px !important; } .kproducutSection .hero__link .btn { margin: 0 !important; font-size: 14px !important; min-width: 120px !important; padding: 10px 15px !important; } .shop_by_cate-sec .new-grid { justify-content: center; } .faqS_con .collapsible-trigger__icon { width: 15px; height: 15px; } .kproducutSection .sec_bread-01 { padding: 26px 0; } .blogDetailS header.page-width.section-header { padding: 20px 40px 0; } .blogDetailS at-rte.page-width { padding: 0 40px; } .shopify-section.blog-layout__main h3, .shopify-section.blog-layout__main h4 { font-size: 22px; } .blogDetailS { padding-bottom: 40px; } .pagLR { padding: 30px 0; } } @media only screen and (max-width: 767px) { .kproducutSection .scrollable-grid--small .grid-item { flex: 0 0 50%; } .kproducutSection .header-item--icons .site-nav { margin-right: 0 !important; } .about-sect .feature-row-wrapper .feature-row__text { margin-top: 30px; } .promotio_sec .text_ovrlay .hero__animation-contents { font-size: 14px; letter-spacing: normal; } .promotio_sec .text_ovrlay h2 { font-size: 30px !important; } .brandBtnCol { padding-top: 0; } .about-sect .feature-row__second-image a { height: 440px; } .about-sect .feature-row__item.feature-row__text p.accent-subtitle { font-size: 16px; } .about-sect .feature-row__item.feature-row__text h2.h2 { font-size: 30px; padding-bottom: 0; } .about-sect .feature-row__item.feature-row__text .featured-row__subtext { font-size: 14px; } .nws_sec-img { padding: 60px 0 40px !important; } .logo-bar .logo-bar__item a.logo-bar__link { height: 100px; padding: 0; } .blog-sec .new-grid .grid-item { width: 50%; margin-bottom: 20px; } .site-footer.footr_main-sec ul.footer__menu li + li { margin-top: 5px; } .site-footer.footr_main-sec .footer__blocks--mobile { display: block; text-align: left; } .site-footer.footr_main-sec img { max-width: 200px; } .kproducutSection .sec_bread-01 { padding: 26px 0; } .faqS-title .index-section.index-section--faq p.h2 { font-size: 26px; } .faqS_con .collapsible-trigger-btn { font-size: 18px; } .collapsible-content--all.is-open { font-size: 14px; } .faqS_con { padding: 15px; border-radius: 10px; box-shadow: 0 6px 20px #0000000d; } .faqS-title .index-section.index-section--faq { margin: 40px 0 0; padding: 0 0 15px; } .faqS_con .collapsible-trigger-btn { font-size: 16px; } .faqSectionStyle { padding-bottom: 80px; } .blogDetailS header.page-width.section-header { padding: 20px 20px 0; } #MainContent .blogDetailS header.page-width.section-header h1.section-header__title { font-size: 20px!important; } .blogDetailS header.page-width.section-header .article__sub-meta { font-size: 13px; margin-top: 10px; } .blogDetailS header.page-width.section-header .article__sub-meta { font-size: 13px; margin-top: 10px; opacity: 1; } .blogDetailS at-rte.page-width { padding: 0 20px; } .shopify-section.blog-layout__main h3, .shopify-section.blog-layout__main h4 { font-size: 20px; margin-bottom: 12px; margin-top: 40px; } .blogDetailS .pagination.clearfix.art_pag_Style a { font-size: 15px; display: flex; justify-content: center; align-items: center; } .blogDetailS .pagination-item.left a svg { margin-right: 10px; width: 20px; } .blogDetailS .pagination-item.right a svg { margin-left: 10px; width: 20px; } .blogDetailS a.btn.return-link { font-size: 14px; padding: 15px; } .collapsible-trigger-btn { font-size: 18px !important; } .prdVarint0 label span, .tabsPRD_Vrnt .product-single__vendor.prddecVendor { font-size: 14px !important; } .prdVarint0 label { font-size: 14px !important; gap: 18px !important; } .kproducutSection #MainContent .coll_Banner-Hd .section-header .section-header__title { font-size: 20px !important; padding: 28px 40px; } } @media only screen and (max-width: 585px) { .kproducutSection .scrollable-grid--small .grid-item { flex: 0 0 100%; } p.store_box-pg > a img { width: 100%; margin: 0 !important; } p.store_box-pg > a { width: 100%; padding: 0 0 15px; display: block; } .kproducutSection .site-header .site-header__element--top { padding: 10px 0 !important; } .kproducutSection .site-header .site-header__logo a { width: 180px !important; } .site-footer.footr_main-sec img { max-width: 180px; } .top_deals_sec .grid-item, .wht_kind_sec .grid-item { flex: 0 0 auto !important; margin-bottom: 15px; } .top_deals_sec .grid-item { width: 50%; } .wht_kind_sec .grid-item { width: 100%; } .promotio_sec .text_ovrlay h2 { font-size: 18px !important; padding: 4px 0; } .kproducutSection .promotio_sec .hero__link .btn { margin: 0 !important; font-size: 12px !important; min-width: 80px !important; padding: 6px 6px !important; border-radius: 4px !important; } section.sec-fea-collection.othr_coll_bg-gry { padding-top: 35px !important; padding-bottom: 20px !important; } .blog-sec .new-grid .grid-item { width: 100%; } .about-sect .feature-row__second-image a { height: 300px !important; margin-top: 30px; } .about-sect .feature-row__first-image .image-wrap img { border-radius: 10px; height: 100% !important; } .about-sect .feature-row__first-image a .image-wrap { height: 280px !important; padding: 0 !important; background: transparent; } .about-sect .feature-row__item.feature-row__text p.accent-subtitle { font-size: 14px; } .nws_sec-img .theme-block p.h2 { font-size: 26px !important; max-width: 100%; } .site-footer.footr_main-sec .footer__section { padding: 20px 0; } .about-sect .feature-row__first-image { padding-right: 10px; } .about-sect .feature-row__second-image { padding-left: 10px; } .wht_kind_sec a.collection-item span.collection-item__title { max-width: 100%; margin: 0 15px; } .faqS-title .index-section.index-section--faq p.h2 { font-size: 20px; } .faqSectionStyle { padding-bottom: 60px; } .kproducutSection .sec_bread-01 ol.breadcrumbs__list li.breadcrumbs__item a.breadcrumbs__link { font-size: 14px; } } @media only screen and (max-width: 485px) { .about-sect .feature-row__second-image a { height: 280px !important; } .about-sect .feature-row__first-image a .image-wrap { height: 260px !important; } .about-sect .feature-row__first-image { padding-right: 8px; } .about-sect .feature-row__second-image { padding-left: 8px; } .collapsible-content--all.is-open { padding-top: 10px; } .faqSectionStyle { padding-bottom: 40px; } } @media only screen and (max-width: 385px) { .about-sect .feature-row__second-image a { height: 260px !important; } .about-sect .feature-row__first-image a .image-wrap { height: 240px !important; } } /* 10-09-2024 collection page */ .coll_categ_list_m ul {display: flex; flex-wrap: wrap; margin-left: calc(var(--productGridMargin) * -1); margin-right: calc(var(--productGridMargin) * -1); margin-bottom: 0;} .coll_categ_list_m {margin: 0 auto;} .coll_categ_list_inn ul li {flex: 1 0 0%; display: block; width: 100%; max-width: 100%;} .coll_categ_list_inn ul li img {margin: 0 auto; width: 150px; height: 150px;} .coll_categ_list_inn .collection-item__title {text-align: center;} .btn--close-search .icon path {stroke: #0e0e0e !important;} .inputStyle .searchBtn.btn--search {transform: none;} .predserch_brand-sec .inputStyle.search + .btn--close-search {position: absolute; right: 145px; top: 50%; transform: translateY(-50%); margin: 0; padding: 0;} .newBrandStyle .inputStyle .form-control {padding-right: 30px;} .predserch_brand-sec.search {margin: 0 auto; max-width: 650px;} .collection-filter__item.collection-filter__item--right {display: none;} .categ_filter01 {border-top: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; margin-bottom: 30px; display: flex; top: 108px; z-index: 4; background-color: #fff;} .categ_filter01 > a {flex: 0 0 auto; width: 230px; border-right: 1px solid #f2f2f2; padding: 20px 20px 20px 0;} .categ_filter01 > .collection-filter {margin: 0; width: 100%; padding: 10px 10px 10px 25px; display: flex;} .categ_filter01 > .collection-filter > .collection-filter__inner {width: 100%;} .categ_filter01 > .collection-filter > .collection-filter__inner .collection-filter__sort {padding-right: 0; margin-right: 0;} .categ_filter01 > a i {font-style: normal; display: flex; justify-content: space-between;} .categ_filter01 > .collection-filter > .collection-filter__inner .collection-filter__item--count {font-weight: 500;} .catgory_main_sec .collapsible-trigger-btn {padding: 20px 0;} .catgory_main_sec form.filter-form > div[class^="collection-sidebar__group--"] + div[class^="collection-sidebar__group--"] {border-top: 1px solid #f2f2f2;} .collection-sidebar__group--2 { border-top: none !important; } .catgory_main_sec .collapsible-trigger-btn > .collapsible-trigger__layout {justify-content: space-between; font-size: 16px; font-weight: 600; font-family: "Poppins", sans-serif;} .catgory_main_sec label.tag__checkbox-wrapper {color: #555;} .catgory_main_sec label.tag__checkbox-wrapper:hover {text-decoration: none;} .catgory_main_sec .tag--active > label {font-weight: normal; color: var(--primaryColor); .catgory_main_sec label .tag__checkbox {--tagActiveIconSize: 20px; --tagActiveIconSizeActive: calc(var(--tagActiveIconSize) - 8px);} .catgory_main_sec label .tag__checkbox::after {left: calc(var(--tagActiveIconSize) / 2); transform: translateX(-50%) translateY(-50%);} .catgory_main_sec .tag--active > label .tag__checkbox::before {border-color: var(--primaryColor);} .catgory_main_sec .tag--active > label .tag__checkbox::after {background-color: var(--primaryColor);} .catgory_main_sec .tag__checkbox {padding-left: 30px;} .grid__item.medium-up--four-fifths.hide_categ-fltryt {width: 100%;} .catgory_main_sec #AjaxContent.grid > .grid__item, .catgory_main_sec #AjaxContent.grid > #filter_container_1 > .grid__item {float: none; width: 100%;} #filter_container_1 {flex: 0 0 auto; width: 240px;} .catgory_main_sec #AjaxContent.grid > #filter_container_1 > .grid__item {top: 175px !important;} .catgory_main_sec #AjaxContent.grid {display: flex;} @media (max-width: 1340px) { .categ_filter01 {top: 100px;} .coll_categ_list_inn ul li img {width: 120px; height: 120px;} } @media (max-width: 1199px) { .categ_filter01 {top: 90px;} .catgory_main_sec [data-view="medium"] .grid-item {flex: 0 0 calc(100% / 2);} #filter_container_1 {width: 270px;} .categ_filter01 > a {width: 255px;} .coll_categ_list_inn ul li img {width: 100px; height: 100px;} } @media (max-width: 991px) { #filter_container_1, .categ_filter01 > a {display: none;} .categ_filter01 > .collection-filter {padding: 0;} .categ_filter01 {top: 88px;} .catgory_main_sec .collapsible-trigger-btn {padding: 10px 15px;} .catgory_main_sec .collapsible-trigger-btn > .collapsible-trigger__layout {font-size: 14px;} .catgory_main_sec label .tag__checkbox {--tagActiveIconSize: 16px;} .catgory_main_sec .tag__checkbox {padding-left: 24px;} .collection-filter__item--drawer {display: block !important;} .coll_categ_list_inn ul li {flex: 0 0 auto;width: 25%;} .coll_categ_list_m ul {justify-content: center; row-gap: 30px;} } @media (max-width: 585px) { .coll_categ_list_inn ul li {width: 33%;} } @media (max-width: 485px) { .coll_categ_list_inn ul li {width: 50%; row-gap: 20px;} } .catgory_main_sec .pagination {text-align: right;} .pagination {margin: calc(var(--gutter) * 2) 0; text-align: right;} .blogPageStyle .blog-sec.new-grid {--grid-gutter: 40px; margin-left: calc(var(--grid-gutter) * -1); margin-right: 0;} .blogPageStyle .blog-sec.new-grid .grid__image-ratio--wide:before {padding-bottom: calc(300 / 400 * 100%);} @media (max-width:1199px) { .blogPageStyle .blog-sec.new-grid {--grid-gutter: 25px;} } @media (max-width:991px) { .kproducutSection #MainContent .coll_Banner-Hd .section-header .section-header__title {font-size: 32px!important; padding: 40px;} } @media (max-width:768px) { .blogPageStyle .blog-sec.new-grid {--grid-gutter: 17px;} .kproducutSection #MainContent .coll_Banner-Hd .section-header .section-header__title {font-size: 20px!important; padding: 30px 20px;} .collapsible-trigger-btn { font-size: 18px !important; } } @media (max-width:575px) { .blogPageStyle .blog-sec.new-grid {display: block;} .blogPageStyle .blog-sec.new-grid .grid__item {display: flex; flex-direction: column;} .blogPageStyle .blog-sec.new-grid .grid__item .grid-article__meta, .blogPageStyle .blog-sec.new-grid .grid__item .grid-article__image {flex: 0 0 100%; width: 100%; padding-left: 0;} .blogPageStyle .blog-sec.new-grid .grid__item + .grid__item {margin-top: 20px;} } @media (max-width:385px) { .kproducutSection #MainContent .coll_Banner-Hd .section-header .section-header__title {font-size: 16px!important; padding: 15px;} } .collection-hero__content.overlay.coll_Banner-Hd .collection-hero__content.overlay {align-items: center;}